docs: add tutorialkit.dev website

.prettierignore

@@ -1,2 +1,3 @@
 pnpm-lock.yaml
 **/*.md
+**/*.mdx

docs/tutorialkit.dev/.gitignore

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

docs/tutorialkit.dev/README.md

@@ -0,0 +1,29 @@
+# [TutorialKit.dev](https://www.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 documentation website by running:
+
+```
+pnpm run docs
+```

docs/tutorialkit.dev/astro.config.ts

@@ -0,0 +1,63 @@
+import { defineConfig } from 'astro/config';
+import react from '@astrojs/react';
+import starlight from '@astrojs/starlight';
+import starlightLinksValidator from 'starlight-links-validator';
+
+// https://astro.build/config
+export default defineConfig({
+  site: 'https://tutorialkit.dev',
+  integrations: [
+    react(),
+    starlight({
+      title: 'Create interactive coding tutorials',
+      components: {
+        Head: './src/components/Layout/Head.astro',
+      },
+      customCss: ['./src/styles/custom.scss'],
+      logo: {
+        dark: './src/assets/brand/tutorialkit-logo-dark.svg',
+        light: './src/assets/brand/tutorialkit-logo-light.svg',
+        replacesTitle: true,
+      },
+      plugins: [starlightLinksValidator()],
+      sidebar: [
+        {
+          label: 'Guides',
+          items: [
+            // Each item here is one entry in the navigation menu.
+            {
+              label: 'About',
+              link: '/guides/about/',
+            },
+            {
+              label: 'Installation',
+              link: '/guides/installation/',
+            },
+            {
+              label: 'Creating a Lesson',
+              link: '/guides/creating-content/',
+            },
+            {
+              label: 'Configuration',
+              link: '/guides/configuration/',
+            },
+            {
+              label: 'Deployment',
+              link: '/guides/deployment/',
+            },
+            {
+              label: 'User Interface Reference',
+              link: '/guides/ui/',
+            },
+          ],
+        },
+      ],
+      // social: {
+      // github: 'https://github.com/withastro/starlight',
+      // },
+      tableOfContents: {
+        maxHeadingLevel: 5,
+      },
+    }),
+  ],
+});

docs/tutorialkit.dev/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "tutorialkit.dev",
+  "type": "module",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro check && astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/react": "^3.4.0",
+    "@astrojs/starlight": "^0.23.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "astro": "^4.8.6",
+    "classnames": "^2.5.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "sass": "^1.77.3",
+    "sharp": "^0.32.5",
+    "starlight-links-validator": "^0.9.0",
+    "typescript": "^5.4.5"
+  },
+  "devDependencies": {
+    "@types/gtag.js": "^0.0.20"
+  }
+}

docs/tutorialkit.dev/src/components/Buttons/Button/Button.module.scss

@@ -0,0 +1,45 @@
+@import '../../../styles/variables.scss';
+
+.link {
+  --outline-color-hsl: 0, 0%, 100%;
+  --outline-opacity: 0.08;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 52px;
+  // width: fit-content;
+  padding: 1px 40px 0;
+  border-radius: 26px;
+  color: var(--custom-color-text-strong);
+  font-size: 15px;
+  font-weight: 500;
+  text-align: center;
+  text-decoration: none;
+  box-shadow: inset 0 0 0 1px hsla(var(--outline-color-hsl), var(--outline-opacity));
+  background-color: hsla(224, 32%, 28%, 0.24);
+  backdrop-filter: blur(8px);
+  transition: var(--transition-fast);
+  transition-property: background-color, box-shadow, color;
+  [data-theme='light'] & {
+    --outline-color-hsl: 0, 0%, 0%;
+    background-color: hsla(224, 32%, 28%, 0.08);
+  }
+  &:hover {
+    --outline-opacity: 0.1;
+    color: var(--custom-color-text-strong) !important; // !important for starlight override only
+    background-color: hsla(224, 32%, 28%, 0.54);
+    [data-theme='light'] & {
+      --outline-opacity: 0.16;
+      background-color: hsla(224, 32%, 28%, 0.04);
+    }
+  }
+
+  &.accent {
+    color: #fff !important; // !important for starlight override only
+    box-shadow: inset 0 1px 0 1px rgba(255, 255, 255, 0.16);
+    background-color: #1488fc;
+    &:hover {
+      background-color: #2793ff;
+    }
+  }
+}

docs/tutorialkit.dev/src/components/Buttons/Button/Button.tsx

@@ -0,0 +1,17 @@
+import type { FC, ReactNode } from 'react';
+import type { ButtonTheme } from '@components/Buttons/Button/ButtonTheme';
+
+import cn from 'classnames';
+import styles from './Button.module.scss';
+
+interface Props {
+  children?: ReactNode;
+  theme?: ButtonTheme;
+  url: string;
+}
+
+export const Button: FC<Props> = ({ children, theme = 'default', url }) => (
+  <a href={url} className={cn(styles.link, { [styles[theme]]: true })}>
+    {children}
+  </a>
+);

docs/tutorialkit.dev/src/components/Buttons/Button/ButtonTheme.ts

@@ -0,0 +1 @@
+export type ButtonTheme = 'default' | 'accent';

docs/tutorialkit.dev/src/components/Layout/Head.astro

@@ -0,0 +1,17 @@
+---
+import type { Props } from '@astrojs/starlight/props';
+import Default from '@astrojs/starlight/components/Head.astro';
+---
+
+<Default {...Astro.props}><slot /></Default>
+
+{/* Google Tag Manager */}
+<script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-64MFE82HG5"></script>
+<script is:inline>
+  window.dataLayer = window.dataLayer || [];
+  function gtag() {
+    dataLayer.push(arguments);
+  }
+  gtag('js', new Date());
+  gtag('config', 'G-64MFE82HG5');
+</script>

docs/tutorialkit.dev/src/components/PropertyTable.astro

@@ -0,0 +1,33 @@
+---
+interface Props {
+  required?: boolean;
+  inherited?: boolean;
+  values?: string;
+  type?: string;
+}
+
+const { required = false, inherited = false, values, type } = Astro.props;
+---
+
+<table>
+  <thead>
+    <tr>
+      <th>Required</th>
+      <th>{values ? 'Values' : 'Type'}</th>
+      <th>Inherited</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>{required ? 'yes' : 'no'}</td>
+      <td>{values ? values : type}</td>
+      <td>{inherited ? 'yes' : 'no'}</td>
+    </tr>
+  </tbody>
+</table>
+
+<style>
+  td {
+    text-align: center;
+  }
+</style>

docs/tutorialkit.dev/src/components/Tabs/PackageManagerTabs.astro

@@ -0,0 +1,15 @@
+---
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+---
+
+<Tabs syncKey="package-managers">
+  <TabItem label="npm">
+    <slot name="npm" />
+  </TabItem>
+  <TabItem label="pnpm">
+    <slot name="pnpm" />
+  </TabItem>
+  <TabItem label="Yarn">
+    <slot name="yarn" />
+  </TabItem>
+</Tabs>

docs/tutorialkit.dev/src/components/UI/UI.astro

@@ -0,0 +1,41 @@
+<!-- WIP -->
+<main>
+  <nav>
+    <div class="logo">TutorialKit</div>
+  </nav>
+
+  <section class="left">
+    <nav>
+      <a
+        ><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+          ><path
+            fill="currentColor"
+            d="m7.85 13l2.85 2.85q.3.3.288.7t-.288.7q-.3.3-.712.313t-.713-.288L4.7 12.7q-.3-.3-.3-.7t.3-.7l4.575-4.575q.3-.3.713-.287t.712.312q.275.3.288.7t-.288.7L7.85 11H19q.425 0 .713.288T20 12t-.288.713T19 13z"
+          ></path></svg
+        ></a
+      >
+      <div class="breadcrumbs">Basics / The first chapter in part 1 / Welcome to TutorialKit</div>
+      <a
+        ><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
+          ><path
+            fill="currentColor"
+            d="M16.15 13H5q-.425 0-.712-.288T4 12t.288-.712T5 11h11.15L13.3 8.15q-.3-.3-.288-.7t.288-.7q.3-.3.713-.312t.712.287L19.3 11.3q.15.15.213.325t.062.375t-.062.375t-.213.325l-4.575 4.575q-.3.3-.712.288t-.713-.313q-.275-.3-.288-.7t.288-.7z"
+          ></path></svg
+        ></a
+      >
+    </nav>
+
+    <div class="content">
+      <h1>Hello world</h1>
+      <p>Welcome to our first lesson!</p>
+    </div>
+  </section>
+
+  <section class="right"></section>
+</main>
+
+<style>
+  .logo {
+    font-weight: bold;
+  }
+</style>

docs/tutorialkit.dev/src/content/config.ts

@@ -0,0 +1,6 @@
+import { defineCollection } from 'astro:content';
+import { docsSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+  docs: defineCollection({ schema: docsSchema() }),
+};