Skip to content

Commit 3db8a1e

Browse files
NemikolhNemikolh
authored
Merge branch 'main' into joan/order-from-config
2 parents 7226e75 + 4c39cc6 commit 3db8a1e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+2797
-148
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,5 @@ dist-ssr
2020
.pnpm-store
2121
/tutorialkit/template
2222
tsconfig.tsbuildinfo
23+
tsconfig.build.tsbuildinfo
2324
.tmp

‎.prettierignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
pnpm-lock.yaml
2+
.astro
23
**/*.md
4+
**/*.mdx

‎docs/tutorialkit.dev/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# generated types
2+
.astro
3+
4+
# environment variables
5+
.env
6+
.env.production

‎docs/tutorialkit.dev/README.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# [TutorialKit.dev](https://www.tutorialkit.dev)
2+
3+
## Local Development
4+
5+
### Prerequisites
6+
7+
- Install [Node.js](https://nodejs.org/en) v18.18 or above.
8+
- Install [pnpm](https://pnpm.io/).
9+
10+
### Set up
11+
12+
Clone this repository and navigate into the cloned directory.
13+
14+
```
15+
git clone [email protected]:stackblitz/tutorialkit.git
16+
cd tutorialkit
17+
```
18+
19+
TutorialKit uses [pnpm workspaces](https://pnpm.io/workspaces). Just run the install command in the root of the project.
20+
21+
```
22+
pnpm install
23+
```
24+
25+
You can now start the documentation website by running:
26+
27+
```
28+
pnpm run docs
29+
```

‎docs/tutorialkit.dev/astro.config.ts

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { defineConfig } from 'astro/config';
2+
import react from '@astrojs/react';
3+
import starlight from '@astrojs/starlight';
4+
import starlightLinksValidator from 'starlight-links-validator';
5+
6+
// https://astro.build/config
7+
export default defineConfig({
8+
site: 'https://tutorialkit.dev',
9+
integrations: [
10+
react(),
11+
starlight({
12+
title: 'Create interactive coding tutorials',
13+
components: {
14+
Head: './src/components/Layout/Head.astro',
15+
},
16+
customCss: ['./src/styles/custom.scss'],
17+
logo: {
18+
dark: './src/assets/brand/tutorialkit-logo-dark.svg',
19+
light: './src/assets/brand/tutorialkit-logo-light.svg',
20+
replacesTitle: true,
21+
},
22+
plugins: [starlightLinksValidator()],
23+
sidebar: [
24+
{
25+
label: 'Guides',
26+
items: [
27+
// Each item here is one entry in the navigation menu.
28+
{
29+
label: 'About',
30+
link: '/guides/about/',
31+
},
32+
{
33+
label: 'Installation',
34+
link: '/guides/installation/',
35+
},
36+
{
37+
label: 'Creating a Lesson',
38+
link: '/guides/creating-content/',
39+
},
40+
{
41+
label: 'Configuration',
42+
link: '/guides/configuration/',
43+
},
44+
{
45+
label: 'Deployment',
46+
link: '/guides/deployment/',
47+
},
48+
{
49+
label: 'User Interface Reference',
50+
link: '/guides/ui/',
51+
},
52+
],
53+
},
54+
],
55+
// social: {
56+
// github: 'https://github.com/withastro/starlight',
57+
// },
58+
tableOfContents: {
59+
maxHeadingLevel: 5,
60+
},
61+
}),
62+
],
63+
});

‎docs/tutorialkit.dev/package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "tutorialkit.dev",
3+
"type": "module",
4+
"version": "0.0.1",
5+
"private": true,
6+
"scripts": {
7+
"dev": "astro dev",
8+
"start": "astro dev",
9+
"build": "astro check && astro build",
10+
"preview": "astro preview",
11+
"astro": "astro"
12+
},
13+
"dependencies": {
14+
"@astrojs/check": "^0.7.0",
15+
"@astrojs/react": "^3.4.0",
16+
"@astrojs/starlight": "^0.23.2",
17+
"@types/react": "^18.3.3",
18+
"@types/react-dom": "^18.3.0",
19+
"astro": "^4.8.6",
20+
"classnames": "^2.5.1",
21+
"react": "^18.3.1",
22+
"react-dom": "^18.3.1",
23+
"sass": "^1.77.3",
24+
"sharp": "^0.32.5",
25+
"starlight-links-validator": "^0.9.0",
26+
"typescript": "^5.4.5"
27+
},
28+
"devDependencies": {
29+
"@types/gtag.js": "^0.0.20"
30+
}
31+
}

‎docs/tutorialkit.dev/public/favicon.svg

Lines changed: 4 additions & 0 deletions
Loading

‎docs/tutorialkit.dev/src/assets/brand/tutorialkit-logo-dark.svg

Lines changed: 4 additions & 0 deletions
Loading

‎docs/tutorialkit.dev/src/assets/brand/tutorialkit-logo-light.svg

Lines changed: 4 additions & 0 deletions
Loading

‎docs/tutorialkit.dev/src/assets/houston.webp

96.2 KB
Binary file not shown.

‎docs/tutorialkit.dev/src/assets/tutorialkit-themes.png

96.7 KB
Loading

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
@import '../../../styles/variables.scss';
2+
3+
.link {
4+
--outline-color-hsl: 0, 0%, 100%;
5+
--outline-opacity: 0.08;
6+
display: flex;
7+
align-items: center;
8+
justify-content: center;
9+
height: 52px;
10+
// width: fit-content;
11+
padding: 1px 40px 0;
12+
border-radius: 26px;
13+
color: var(--custom-color-text-strong);
14+
font-size: 15px;
15+
font-weight: 500;
16+
text-align: center;
17+
text-decoration: none;
18+
box-shadow: inset 0 0 0 1px hsla(var(--outline-color-hsl), var(--outline-opacity));
19+
background-color: hsla(224, 32%, 28%, 0.24);
20+
backdrop-filter: blur(8px);
21+
transition: var(--transition-fast);
22+
transition-property: background-color, box-shadow, color;
23+
[data-theme='light'] & {
24+
--outline-color-hsl: 0, 0%, 0%;
25+
background-color: hsla(224, 32%, 28%, 0.08);
26+
}
27+
&:hover {
28+
--outline-opacity: 0.1;
29+
color: var(--custom-color-text-strong) !important; // !important for starlight override only
30+
background-color: hsla(224, 32%, 28%, 0.54);
31+
[data-theme='light'] & {
32+
--outline-opacity: 0.16;
33+
background-color: hsla(224, 32%, 28%, 0.04);
34+
}
35+
}
36+
37+
&.accent {
38+
color: #fff !important; // !important for starlight override only
39+
box-shadow: inset 0 1px 0 1px rgba(255, 255, 255, 0.16);
40+
background-color: #1488fc;
41+
&:hover {
42+
background-color: #2793ff;
43+
}
44+
}
45+
}

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import type { FC, ReactNode } from 'react';
2+
import type { ButtonTheme } from '@components/Buttons/Button/ButtonTheme';
3+
4+
import cn from 'classnames';
5+
import styles from './Button.module.scss';
6+
7+
interface Props {
8+
children?: ReactNode;
9+
theme?: ButtonTheme;
10+
url: string;
11+
}
12+
13+
export const Button: FC<Props> = ({ children, theme = 'default', url }) => (
14+
<a href={url} className={cn(styles.link, { [styles[theme]]: true })}>
15+
{children}
16+
</a>
17+
);

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export type ButtonTheme = 'default' | 'accent';

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
import type { Props } from '@astrojs/starlight/props';
3+
import Default from '@astrojs/starlight/components/Head.astro';
4+
---
5+
6+
<Default {...Astro.props}><slot /></Default>
7+
8+
{/* Google Tag Manager */}
9+
<script is:inline async src="https://www.googletagmanager.com/gtag/js?id=G-64MFE82HG5"></script>
10+
<script is:inline>
11+
window.dataLayer = window.dataLayer || [];
12+
function gtag() {
13+
dataLayer.push(arguments);
14+
}
15+
gtag('js', new Date());
16+
gtag('config', 'G-64MFE82HG5');
17+
</script>

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
interface Props {
3+
required?: boolean;
4+
inherited?: boolean;
5+
values?: string;
6+
type?: string;
7+
}
8+
9+
const { required = false, inherited = false, values, type } = Astro.props;
10+
---
11+
12+
<table>
13+
<thead>
14+
<tr>
15+
<th>Required</th>
16+
<th>{values ? 'Values' : 'Type'}</th>
17+
<th>Inherited</th>
18+
</tr>
19+
</thead>
20+
<tbody>
21+
<tr>
22+
<td>{required ? 'yes' : 'no'}</td>
23+
<td>{values ? values : type}</td>
24+
<td>{inherited ? 'yes' : 'no'}</td>
25+
</tr>
26+
</tbody>
27+
</table>
28+
29+
<style>
30+
td {
31+
text-align: center;
32+
}
33+
</style>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
import { Tabs, TabItem } from '@astrojs/starlight/components';
3+
---
4+
5+
<Tabs syncKey="package-managers">
6+
<TabItem label="npm">
7+
<slot name="npm" />
8+
</TabItem>
9+
<TabItem label="pnpm">
10+
<slot name="pnpm" />
11+
</TabItem>
12+
<TabItem label="Yarn">
13+
<slot name="yarn" />
14+
</TabItem>
15+
</Tabs>

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!-- WIP -->
2+
<main>
3+
<nav>
4+
<div class="logo">TutorialKit</div>
5+
</nav>
6+
7+
<section class="left">
8+
<nav>
9+
<a
10+
><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
11+
><path
12+
fill="currentColor"
13+
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"
14+
></path></svg
15+
></a
16+
>
17+
<div class="breadcrumbs">Basics / The first chapter in part 1 / Welcome to TutorialKit</div>
18+
<a
19+
><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"
20+
><path
21+
fill="currentColor"
22+
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"
23+
></path></svg
24+
></a
25+
>
26+
</nav>
27+
28+
<div class="content">
29+
<h1>Hello world</h1>
30+
<p>Welcome to our first lesson!</p>
31+
</div>
32+
</section>
33+
34+
<section class="right"></section>
35+
</main>
36+
37+
<style>
38+
.logo {
39+
font-weight: bold;
40+
}
41+
</style>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { defineCollection } from 'astro:content';
2+
import { docsSchema } from '@astrojs/starlight/schema';
3+
4+
export const collections = {
5+
docs: defineCollection({ schema: docsSchema() }),
6+
};

0 commit comments

Comments
 (0)