docs: add demo.tutorialkit.dev website

.github/workflows/ci.yaml

@@ -52,4 +52,6 @@ jobs:
       - name: Build
         run: pnpm build
       - name: Build docs
-        run: pnpm run docs:build
+        run: |
+          pnpm run docs:build
+          pnpm run demo:build

docs/demo/.gitignore

@@ -0,0 +1,6 @@
+# generated types
+.astro
+
+# environment variables
+.env
+.env.production

docs/demo/README.md

@@ -0,0 +1,29 @@
+# [demo.tutorialkit.dev](https://demo.tutorialkit.dev)
+
+## Local Development
+
+### Prerequisites
+
+- Install [Node.js](https://nodejs.org/en) v18.18 or above.
+- Install [pnpm](https://pnpm.io/).
+
+### Set up
+
+Clone this repository and navigate into the cloned directory.
+
+```
+git clone [email protected]:stackblitz/tutorialkit.git
+cd tutorialkit
+```
+
+TutorialKit uses [pnpm workspaces](https://pnpm.io/workspaces). Just run the install command in the root of the project.
+
+```
+pnpm install
+```
+
+You can now start the demo website by running:
+
+```
+pnpm run demo
+```

docs/demo/_headers

@@ -0,0 +1,3 @@
+/*
+  Cross-Origin-Embedder-Policy: require-corp
+  Cross-Origin-Opener-Policy: same-origin

docs/demo/astro.config.ts

@@ -0,0 +1,9 @@
+import tutorialkit from '@tutorialkit/astro';
+import { defineConfig } from 'astro/config';
+
+export default defineConfig({
+  devToolbar: {
+    enabled: false,
+  },
+  integrations: [tutorialkit()],
+});

docs/demo/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "demo.tutorialkit.dev",
+  "version": "0.0.1",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "astro": "astro",
+    "build_with_check": "astro check && pnpm run build",
+    "build": "astro build && cp _headers ./dist/",
+    "dev": "astro dev",
+    "preview": "astro preview",
+    "start": "astro dev"
+  },
+  "dependencies": {
+    "@tutorialkit/components-react": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/react": "^3.6.0",
+    "@iconify-json/ph": "^1.1.13",
+    "@iconify-json/svg-spinners": "^1.1.2",
+    "@tutorialkit/astro": "workspace:*",
+    "@tutorialkit/types": "workspace:*",
+    "@unocss/reset": "^0.60.4",
+    "@unocss/transformer-directives": "^0.60.4",
+    "astro": "^4.10.3",
+    "fast-glob": "^3.3.2",
+    "prettier-plugin-astro": "^0.14.0",
+    "typescript": "^5.4.5",
+    "unocss": "^0.60.4"
+  }
+}

docs/demo/src/content/config.ts

@@ -0,0 +1,9 @@
+import { chapterSchema, lessonSchema, partSchema, tutorialSchema } from '@tutorialkit/types';
+import { defineCollection } from 'astro:content';
+
+const tutorial = defineCollection({
+  type: 'content',
+  schema: tutorialSchema.strict().or(partSchema.strict()).or(chapterSchema.strict()).or(lessonSchema.strict()),
+});
+
+export const collections = { tutorial };

docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/_files/index.html

@@ -0,0 +1,23 @@
+<form>
+  <fieldset>
+    <legend>Hello</legend>
+    <div>
+      <label for="q_1">Let's learn!</label>
+      <input id="q_1" />
+    </div>
+    <div><input type="checkbox" checked /><progress value="75" max="100"></progress></div>
+  </fieldset>
+</form>
+
+<link rel="stylesheet" href="style.css" />
+<style>
+  body {
+    font-family: sans-serif;
+  }
+  label {
+    display: inline-block;
+    width: 100px;
+    text-align: right;
+    padding: 6px;
+  }
+</style>

docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/_files/style.css

@@ -0,0 +1,56 @@
+fieldset {
+  background: #f7fafc;
+  border-color: #e2e8f0;
+  border-style: solid;
+  margin: 1em auto;
+  padding: 1em;
+  max-width: 500px;
+}
+
+legend {
+  color: #718096;
+  font-size: 90%;
+  padding: 0.2em 0.5em;
+  border: solid 2px #e2e8f0;
+  border-radius: 4px;
+  background: #fff;
+}
+
+fieldset > div {
+  padding: 0.3em 0.5em;
+  display: grid;
+  grid-template-columns: 1fr 3fr;
+}
+
+progress {
+  border: none;
+  margin: 20px 130px 10px;
+}
+
+progress::-webkit-progress-bar {
+  background: #f6cd86;
+  border-radius: 5px;
+}
+
+progress::-webkit-progress-value {
+  background: tomato;
+  border-radius: 5px;
+}
+
+input {
+  border: solid 2px #e2e8f0;
+  padding: 4px;
+  font-size: 1em;
+  accent-color: #ff3399;
+}
+
+input[type='checkbox'] {
+  justify-self: end;
+  margin-right: 14px;
+  width: 20px;
+}
+
+label {
+  padding: 0.5em;
+  text-align: right;
+}

docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/_files/welcome.css

@@ -0,0 +1,5 @@
+/* 
+
+Hello, World!
+
+*/

docs/demo/src/content/tutorial/1-forms-css/1-introduction/1-welcome/content.md

@@ -0,0 +1,15 @@
+---
+type: lesson
+title: Style up your forms!
+slug: welcome
+focus: /welcome.css
+---
+:::info{noBorder=true title="Welcome!"}
+This is a demo tutorial built with <a href="https://tutorialkit.dev" target="_blank">TutorialKit</a>. Although we use it for demonstration purposes, the lessons include actual CSS techniques, so we hope you'll enjoy them and learn something new!
+:::
+
+# Style up your forms!
+
+Forms are an incredibly common set of HTML elements – they are a part of almost every web app – but styling them is often not as straightforward as styling a typical `div` or `section`.
+
+This tutorial will let you learn and experiment with some practical techniques that will help elevate your form's CSS to the next level!

docs/demo/src/content/tutorial/1-forms-css/1-introduction/meta.md

@@ -0,0 +1,5 @@
+---
+type: chapter
+title: Introduction
+slug: introduction
+---