Skip to content

Commit 59d17e6

Browse files
unionalunional
committed
chore: intrim for astro
1 parent 75c7e9e commit 59d17e6

File tree

7 files changed

+144
-4
lines changed

7 files changed

+144
-4
lines changed

‎page/public/svgs/bright-light-bulb.svg

+66
Loading

‎page/public/svgs/readme-svgrepo-com.svg

+3
Loading

‎page/src/components/Header.tsx

+16-4
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { GitHubBadge } from './GitHubBadge'
33

44
const queryClient = new QueryClient()
55

6-
export function Header() {
6+
export function Header({ active }: { active?: 'blog' | 'guidelines' }) {
77
return (
88
<QueryClientProvider client={queryClient}>
9-
<header>
9+
<header className="bg-green-300">
1010
<nav className="flex gap-1 p-2 items-center">
1111
<div className="flex pr-4">
1212
<a aria-label="home" href="/" className="hover:outline rounded-sm py-1 px-2 outline-sky-700">
@@ -18,8 +18,20 @@ export function Header() {
1818
</div>
1919
</a>
2020
</div>
21-
<a className="rounded-sm hover:bg-slate-300 py-1 px-2">Blog</a>
22-
<a className="rounded-sm hover:bg-slate-300 py-1 px-2">Guidelines</a>
21+
<a
22+
className={`rounded-sm hover:bg-slate-300 py-1 px-2 ${active === 'blog' ? 'underline' : ''}`}
23+
href="/blogs"
24+
>
25+
Blog
26+
</a>
27+
<a
28+
className={`rounded-sm hover:bg-slate-300 py-1 px-2 ${
29+
active === 'guidelines' ? 'underline' : ''
30+
}`}
31+
href="/guidelines"
32+
>
33+
Guidelines
34+
</a>
2335
<div className="flex py-1 flex-grow justify-end">
2436
<GitHubBadge />
2537
</div>

‎page/src/layouts/DocLayout.astro

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
export interface Props {
3+
title: string
4+
}
5+
6+
const { title } = Astro.props
7+
---
8+
9+
<!DOCTYPE html>
10+
<html lang="en">
11+
<head>
12+
<meta charset="UTF-8" />
13+
<meta name="viewport" content="width=device-width" />
14+
<link rel="icon" href="/svgs/ts-guidelines.svg" />
15+
<meta name="generator" content={Astro.generator} />
16+
<title>{title}</title>
17+
</head>
18+
<body>
19+
<slot name="header" />
20+
<div class="flex min-h-screen bg-yellow-400">
21+
<nav class="bg-slate-500">
22+
<slot name="docList">
23+
<div class="">docList</div>
24+
</slot>
25+
</nav>
26+
<main class="bg-red-300 w-full">
27+
<slot name="content">content</slot>
28+
</main>
29+
</div>
30+
</body>
31+
</html>
32+
<style is:global>
33+
html {
34+
font-family: system-ui, sans-serif;
35+
background-color: #f6f6f6;
36+
}
37+
code {
38+
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
39+
Courier New, monospace;
40+
}
41+
</style>

‎page/src/pages/blogs.astro

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
import { Header } from '../components/Header'
3+
import Layout from '../layouts/DocLayout.astro'
4+
---
5+
6+
<Layout title="TypeScript Guidelines">
7+
<Header slot="header" client:load active="blog" />
8+
</Layout>

‎page/src/pages/guidelines.astro

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
import { Header } from '../components/Header'
3+
import Layout from '../layouts/Layout.astro'
4+
---
5+
6+
<Layout title="TypeScript Guidelines">
7+
<Header client:load active="guidelines" />
8+
</Layout>

‎slides/ts.module-resolution.slides.md

+2
Original file line numberDiff line numberDiff line change
@@ -75,3 +75,5 @@ autoPlayMedia: true
7575
- Case by case {.fragment .fade-left}
7676
- Can you switch?
7777
- Eventually `Node16` {.fragment .fade-left}
78+
- with `module: ES*`, need dynamic import
79+

0 commit comments

Comments
 (0)