mirror of
https://github.com/youwen5/site.git
synced 2024-11-24 17:33:51 -08:00
feat: add initial site navigation and formatting
This commit is contained in:
parent
a37c39734d
commit
2d7171eeb8
GPG key ID:
865658ED1FE61EC3
15 changed files with 535 additions and 67 deletions
17
README.md
17
README.md
|
|
@ -1,3 +1,18 @@
|
|||
# coredump
|
||||
|
||||
My personal website and its associated blog. Written in SvelteKit with components from `shadcn`.
|
||||
My personal website and its associated blog. Written in [SvelteKit](https://kit.svelte.dev) and [TailwindCSS](https://tailwindcss.com/).
|
||||
|
||||
## Running locally
|
||||
|
||||
Install [bun](https://bun.sh), clone and `cd` into the repository, then run:
|
||||
|
||||
```bash
|
||||
bun install
|
||||
|
||||
# for development:
|
||||
bun dev
|
||||
|
||||
# for production:
|
||||
bun build
|
||||
bun start
|
||||
```
|
||||
|
|
|
|||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -4,7 +4,7 @@
|
|||
"tailwind": {
|
||||
"config": "tailwind.config.js",
|
||||
"css": "src/lib/app.css",
|
||||
"baseColor": "slate"
|
||||
"baseColor": "zinc"
|
||||
},
|
||||
"aliases": {
|
||||
"components": "$lib/components",
|
||||
|
|
|
|||
|
|
@ -39,7 +39,13 @@
|
|||
"svelte-preprocess"
|
||||
],
|
||||
"dependencies": {
|
||||
"@faker-js/faker": "^8.4.1",
|
||||
"@fontsource/geist-mono": "^5.0.2",
|
||||
"@fontsource/geist-sans": "^5.0.2",
|
||||
"bits-ui": "^0.21.2",
|
||||
"clsx": "^2.1.0",
|
||||
"mode-watcher": "^0.3.0",
|
||||
"svelte-radix": "^1.1.0",
|
||||
"tailwind-merge": "^2.2.2",
|
||||
"tailwind-variants": "^0.2.1"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,66 +5,66 @@
|
|||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
--foreground: 240 10% 3.9%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--muted: 240 4.8% 95.9%;
|
||||
--muted-foreground: 240 3.8% 46.1%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--popover-foreground: 240 10% 3.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--card-foreground: 240 10% 3.9%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--border: 240 5.9% 90%;
|
||||
--input: 240 5.9% 90%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--primary: 240 5.9% 10%;
|
||||
--primary-foreground: 0 0% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 240 4.8% 95.9%;
|
||||
--secondary-foreground: 240 5.9% 10%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--accent: 240 4.8% 95.9%;
|
||||
--accent-foreground: 240 5.9% 10%;
|
||||
|
||||
--destructive: 0 72.2% 50.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--ring: 240 10% 3.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--background: 240 10% 3.9%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--muted: 240 3.7% 15.9%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--popover: 240 10% 3.9%;
|
||||
--popover-foreground: 0 0% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--card: 240 10% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--primary: 0 0% 98%;
|
||||
--primary-foreground: 240 5.9% 10%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--accent: 240 3.7% 15.9%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--destructive-foreground: 0 0% 98%;
|
||||
|
||||
--ring: hsl(212.7,26.8%,83.9);
|
||||
--ring: 240 4.9% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
275
src/lib/assets/Name.svelte
Normal file
275
src/lib/assets/Name.svelte
Normal file
|
|
@ -0,0 +1,275 @@
|
|||
<script lang="ts">
|
||||
export let height = '192';
|
||||
export let width = 'auto';
|
||||
export let href: string;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
viewBox="0 0 2104 416"
|
||||
class="diagram select-none"
|
||||
text-anchor="middle"
|
||||
font-family="monospace"
|
||||
font-size="13px"
|
||||
stroke-linecap="round"
|
||||
fill="currentColor"
|
||||
{height}
|
||||
{width}
|
||||
>
|
||||
<a {href}>
|
||||
<path d="M 112,352 L 232,112" fill="none" stroke="black" />
|
||||
<path d="M 160,352 L 280,112" fill="none" stroke="black" />
|
||||
<circle cx="680" cy="144" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="680" cy="160" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="680" cy="176" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="680" cy="192" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="680" cy="208" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="680" cy="224" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="680" cy="240" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="680" cy="256" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="688" cy="128" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="688" cy="272" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="696" cy="128" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="696" cy="272" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="704" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="704" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="712" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="712" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="720" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="720" cy="176" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="720" cy="192" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="720" cy="208" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="720" cy="224" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="720" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="728" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="728" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="736" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="736" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="744" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="744" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="752" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="752" cy="160" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="752" cy="240" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="752" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="760" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="760" cy="160" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="760" cy="240" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="760" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="768" cy="176" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="768" cy="192" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="768" cy="208" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="768" cy="224" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="776" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="776" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="784" cy="112" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="784" cy="288" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="792" cy="128" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="792" cy="272" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="800" cy="128" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="800" cy="272" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<circle cx="808" cy="256" r="6" class="opendot" fill="none" stroke="currentColor" />
|
||||
<g class="text">
|
||||
<text x="256" y="116">/////</text>
|
||||
<text x="504" y="116">yyyyyyy</text>
|
||||
<text x="648" y="116">yyyyyyy</text>
|
||||
<text x="768" y="116">o</text>
|
||||
<text x="836" y="116">uuuuuu</text>
|
||||
<text x="916" y="116">uuuuuu</text>
|
||||
<text x="984" y="116">wwwwwww</text>
|
||||
<text x="1120" y="116">wwwww</text>
|
||||
<text x="1256" y="116">wwwwwww</text>
|
||||
<text x="1364" y="116">eeeeeeeeeeee</text>
|
||||
<text x="1460" y="116">nnnn</text>
|
||||
<text x="1524" y="116">nnnnnnnn</text>
|
||||
<text x="1656" y="116">wwwwwww</text>
|
||||
<text x="1792" y="116">wwwww</text>
|
||||
<text x="1952" y="116">wwwwwwwuuuuuu</text>
|
||||
<text x="2060" y="116">uuuuuu</text>
|
||||
<text x="80" y="132"><<<<<<<</text>
|
||||
<text x="248" y="132">:::::</text>
|
||||
<text x="312" y="132">>>>>>>></text>
|
||||
<text x="512" y="132">y:::::y</text>
|
||||
<text x="640" y="132">y:::::y</text>
|
||||
<text x="744" y="132">:::::::::::</text>
|
||||
<text x="836" y="132">u::::u</text>
|
||||
<text x="916" y="132">u::::u</text>
|
||||
<text x="992" y="132">w:::::w</text>
|
||||
<text x="1120" y="132">w:::::w</text>
|
||||
<text x="1248" y="132">w:::::w</text>
|
||||
<text x="1364" y="132">ee::::::::::::ee</text>
|
||||
<text x="1508" y="132">n:::nn::::::::nn</text>
|
||||
<text x="1664" y="132">w:::::w</text>
|
||||
<text x="1792" y="132">w:::::w</text>
|
||||
<text x="1948" y="132">w:::::w u::::u</text>
|
||||
<text x="2060" y="132">u::::u</text>
|
||||
<text x="72" y="148"><:::::<</text>
|
||||
<text x="240" y="148">:::::</text>
|
||||
<text x="320" y="148">>:::::></text>
|
||||
<text x="520" y="148">y:::::y</text>
|
||||
<text x="632" y="148">y:::::y</text>
|
||||
<text x="772" y="148">:::::::::::::::ou::::u</text>
|
||||
<text x="916" y="148">u::::u</text>
|
||||
<text x="1000" y="148">w:::::w</text>
|
||||
<text x="1120" y="148">w:::::::w</text>
|
||||
<text x="1240" y="148">w:::::w</text>
|
||||
<text x="1436" y="148">e::::::eeeee:::::een::::::::::::::nn</text>
|
||||
<text x="1672" y="148">w:::::w</text>
|
||||
<text x="1792" y="148">w:::::::w</text>
|
||||
<text x="1912" y="148">w:::::w</text>
|
||||
<text x="1980" y="148">u::::u</text>
|
||||
<text x="2060" y="148">u::::u</text>
|
||||
<text x="64" y="164"><:::::<</text>
|
||||
<text x="232" y="164">:::::</text>
|
||||
<text x="328" y="164">>:::::></text>
|
||||
<text x="528" y="164">y:::::y</text>
|
||||
<text x="624" y="164">y:::::y</text>
|
||||
<text x="716" y="164">:::::ooo</text>
|
||||
<text x="812" y="164">:::::ou::::u</text>
|
||||
<text x="916" y="164">u::::u</text>
|
||||
<text x="1008" y="164">w:::::w</text>
|
||||
<text x="1120" y="164">w:::::::::w</text>
|
||||
<text x="1232" y="164">w:::::w</text>
|
||||
<text x="1316" y="164">e::::::e</text>
|
||||
<text x="1488" y="164">e:::::enn:::::::::::::::n</text>
|
||||
<text x="1680" y="164">w:::::w</text>
|
||||
<text x="1792" y="164">w:::::::::w</text>
|
||||
<text x="1904" y="164">w:::::w</text>
|
||||
<text x="1980" y="164">u::::u</text>
|
||||
<text x="2060" y="164">u::::u</text>
|
||||
<text x="56" y="180"><:::::<</text>
|
||||
<text x="224" y="180">:::::</text>
|
||||
<text x="336" y="180">>:::::></text>
|
||||
<text x="536" y="180">y:::::y</text>
|
||||
<text x="616" y="180">y:::::y</text>
|
||||
<text x="700" y="180">::::</text>
|
||||
<text x="816" y="180">::::ou::::u</text>
|
||||
<text x="916" y="180">u::::u</text>
|
||||
<text x="1016" y="180">w:::::w</text>
|
||||
<text x="1120" y="180">w:::::w:::::w</text>
|
||||
<text x="1224" y="180">w:::::w</text>
|
||||
<text x="1364" y="180">e:::::::eeeee::::::e</text>
|
||||
<text x="1524" y="180">n:::::nnnn:::::n</text>
|
||||
<text x="1688" y="180">w:::::w</text>
|
||||
<text x="1792" y="180">w:::::w:::::w</text>
|
||||
<text x="1896" y="180">w:::::w</text>
|
||||
<text x="1980" y="180">u::::u</text>
|
||||
<text x="2060" y="180">u::::u</text>
|
||||
<text x="48" y="196"><:::::<</text>
|
||||
<text x="216" y="196">:::::</text>
|
||||
<text x="344" y="196">>:::::></text>
|
||||
<text x="576" y="196">y:::::y y:::::y</text>
|
||||
<text x="700" y="196">::::</text>
|
||||
<text x="816" y="196">::::ou::::u</text>
|
||||
<text x="916" y="196">u::::u</text>
|
||||
<text x="1120" y="196">w:::::w w:::::w w:::::w w:::::w</text>
|
||||
<text x="1360" y="196">e:::::::::::::::::e</text>
|
||||
<text x="1484" y="196">n::::n</text>
|
||||
<text x="1564" y="196">n::::n</text>
|
||||
<text x="1792" y="196">w:::::w w:::::w w:::::w w:::::w</text>
|
||||
<text x="1980" y="196">u::::u</text>
|
||||
<text x="2060" y="196">u::::u</text>
|
||||
<text x="40" y="212"><:::::<</text>
|
||||
<text x="208" y="212">:::::</text>
|
||||
<text x="352" y="212">>:::::></text>
|
||||
<text x="576" y="212">y:::::y:::::y</text>
|
||||
<text x="700" y="212">::::</text>
|
||||
<text x="816" y="212">::::ou::::u</text>
|
||||
<text x="916" y="212">u::::u</text>
|
||||
<text x="1056" y="212">w:::::w:::::w</text>
|
||||
<text x="1184" y="212">w:::::w:::::w</text>
|
||||
<text x="1356" y="212">e::::::eeeeeeeeeee</text>
|
||||
<text x="1484" y="212">n::::n</text>
|
||||
<text x="1564" y="212">n::::n</text>
|
||||
<text x="1728" y="212">w:::::w:::::w</text>
|
||||
<text x="1856" y="212">w:::::w:::::w</text>
|
||||
<text x="1980" y="212">u::::u</text>
|
||||
<text x="2060" y="212">u::::u</text>
|
||||
<text x="32" y="228"><:::::<</text>
|
||||
<text x="200" y="228">:::::</text>
|
||||
<text x="360" y="228">>:::::></text>
|
||||
<text x="576" y="228">y:::::::::y</text>
|
||||
<text x="700" y="228">::::</text>
|
||||
<text x="856" y="228">::::ou:::::uuuu:::::u</text>
|
||||
<text x="1056" y="228">w:::::::::w</text>
|
||||
<text x="1184" y="228">w:::::::::w</text>
|
||||
<text x="1320" y="228">e:::::::e</text>
|
||||
<text x="1484" y="228">n::::n</text>
|
||||
<text x="1564" y="228">n::::n</text>
|
||||
<text x="1728" y="228">w:::::::::w</text>
|
||||
<text x="1856" y="228">w:::::::::w</text>
|
||||
<text x="2020" y="228">u:::::uuuu:::::u</text>
|
||||
<text x="40" y="244"><:::::<</text>
|
||||
<text x="192" y="244">:::::</text>
|
||||
<text x="352" y="244">>:::::></text>
|
||||
<text x="576" y="244">y:::::::y</text>
|
||||
<text x="716" y="244">:::::ooo</text>
|
||||
<text x="860" y="244">:::::ou:::::::::::::::uu</text>
|
||||
<text x="1056" y="244">w:::::::w</text>
|
||||
<text x="1184" y="244">w:::::::w</text>
|
||||
<text x="1324" y="244">e::::::::e</text>
|
||||
<text x="1484" y="244">n::::n</text>
|
||||
<text x="1564" y="244">n::::n</text>
|
||||
<text x="1728" y="244">w:::::::w</text>
|
||||
<text x="1856" y="244">w:::::::w</text>
|
||||
<text x="2028" y="244">u:::::::::::::::uu</text>
|
||||
<text x="48" y="260"><:::::<</text>
|
||||
<text x="184" y="260">:::::</text>
|
||||
<text x="344" y="260">>:::::></text>
|
||||
<text x="576" y="260">y:::::y</text>
|
||||
<text x="744" y="260">:::::::::::::::</text>
|
||||
<text x="888" y="260">u:::::::::::::::u</text>
|
||||
<text x="1056" y="260">w:::::w</text>
|
||||
<text x="1184" y="260">w:::::w</text>
|
||||
<text x="1360" y="260">e::::::::eeeeeeee</text>
|
||||
<text x="1484" y="260">n::::n</text>
|
||||
<text x="1564" y="260">n::::n</text>
|
||||
<text x="1728" y="260">w:::::w</text>
|
||||
<text x="1856" y="260">w:::::w</text>
|
||||
<text x="2032" y="260">u:::::::::::::::u</text>
|
||||
<text x="56" y="276"><:::::<</text>
|
||||
<text x="176" y="276">:::::</text>
|
||||
<text x="336" y="276">>:::::></text>
|
||||
<text x="568" y="276">y:::::y</text>
|
||||
<text x="744" y="276">:::::::::::</text>
|
||||
<text x="892" y="276">uu::::::::uu:::u</text>
|
||||
<text x="1056" y="276">w:::w</text>
|
||||
<text x="1184" y="276">w:::w</text>
|
||||
<text x="1364" y="276">ee:::::::::::::e</text>
|
||||
<text x="1484" y="276">n::::n</text>
|
||||
<text x="1564" y="276">n::::n</text>
|
||||
<text x="1728" y="276">w:::w</text>
|
||||
<text x="1856" y="276">w:::w</text>
|
||||
<text x="2036" y="276">uu::::::::uu:::u</text>
|
||||
<text x="64" y="292"><:::::<</text>
|
||||
<text x="168" y="292">:::::</text>
|
||||
<text x="328" y="292">>:::::></text>
|
||||
<text x="560" y="292">y:::::y</text>
|
||||
<text x="768" y="292">o</text>
|
||||
<text x="876" y="292">uuuuuuuu</text>
|
||||
<text x="940" y="292">uuuu</text>
|
||||
<text x="1056" y="292">www</text>
|
||||
<text x="1184" y="292">www</text>
|
||||
<text x="1372" y="292">eeeeeeeeeeeeee</text>
|
||||
<text x="1484" y="292">nnnnnn</text>
|
||||
<text x="1564" y="292">nnnnnn</text>
|
||||
<text x="1728" y="292">www</text>
|
||||
<text x="1856" y="292">www</text>
|
||||
<text x="2020" y="292">uuuuuuuu</text>
|
||||
<text x="2084" y="292">uuuu</text>
|
||||
<text x="72" y="308"><:::::<</text>
|
||||
<text x="160" y="308">:::::</text>
|
||||
<text x="320" y="308">>:::::></text>
|
||||
<text x="552" y="308">y:::::y</text>
|
||||
<text x="80" y="324"><<<<<<<</text>
|
||||
<text x="152" y="324">:::::</text>
|
||||
<text x="312" y="324">>>>>>>></text>
|
||||
<text x="544" y="324">y:::::y</text>
|
||||
<text x="144" y="340">:::::</text>
|
||||
<text x="536" y="340">y:::::y</text>
|
||||
<text x="136" y="356">/////</text>
|
||||
<text x="528" y="356">y:::::y</text>
|
||||
<text x="512" y="372">yyyyyyy</text>
|
||||
</g>
|
||||
</a>
|
||||
</svg>
|
||||
19
src/lib/components/Footer.svelte
Normal file
19
src/lib/components/Footer.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
import { GithubLogo } from 'svelte-radix';
|
||||
</script>
|
||||
|
||||
<footer class="h-24 px-2 mb-4 text-sm md:text-md xl:text-lg">
|
||||
<hr class="my-4" />
|
||||
<div class="flex justify-center flex-col gap-4">
|
||||
<div class="flex justify-around gap-4 brightness-75 hover:brightness-100">
|
||||
<a href="https://github.com/couscousdude" target="_blank"><GithubLogo /></a>
|
||||
</div>
|
||||
<p class="text-zinc-400 dark:text-zinc-700 text-center">
|
||||
© Youwen Wu 2024 | Built with <strong>SvelteKit</strong> and
|
||||
<strong>shad-cn</strong> |
|
||||
<a href="https://github.com/couscousdude/coredump" target="_blank" class="hover:underline"
|
||||
>View the source</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
63
src/lib/components/Navbar/Navbar.svelte
Normal file
63
src/lib/components/Navbar/Navbar.svelte
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
<script lang="ts">
|
||||
import { Sun, Moon } from 'svelte-radix';
|
||||
import Button from '../ui/button/button.svelte';
|
||||
import { toggleMode } from 'mode-watcher';
|
||||
import Name from '$lib/assets/Name.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { navigating } from '$app/stores';
|
||||
|
||||
let current: 'blog' | 'about' | 'home' | string;
|
||||
|
||||
const updateCurrent = () => {
|
||||
const path = window.location.pathname;
|
||||
if (path === '/') {
|
||||
current = 'home';
|
||||
} else {
|
||||
const segments = path.split('/');
|
||||
current = segments[1] || 'home';
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
return navigating.subscribe(updateCurrent);
|
||||
});
|
||||
</script>
|
||||
|
||||
<nav class="h-20 bg-background bg-opacity-50 backdrop-blur-md fixed w-full">
|
||||
<div class="container mx-auto flex justify-between items-center h-full">
|
||||
<Name height="90%" href="/" />
|
||||
<div class="flex gap-14 justify-around align-middle">
|
||||
<a
|
||||
href="/"
|
||||
class="text-xl font-medium dark:text-zinc-50 text-zinc-700 px-4 py-1 rounded-3xl hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200"
|
||||
class:selected={current === 'home'}>Home</a
|
||||
>
|
||||
<a
|
||||
href="/about"
|
||||
class="text-xl font-medium dark:text-zinc-50 text-zinc-700 px-4 py-1 rounded-3xl hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200"
|
||||
class:selected={current === 'about'}>About</a
|
||||
>
|
||||
<a
|
||||
href="/blog"
|
||||
class="text-xl font-medium dark:text-zinc-50 text-zinc-700 px-4 py-1 rounded-3xl hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors duration-200"
|
||||
class:selected={current === 'blog'}>Blog</a
|
||||
>
|
||||
<Button on:click={toggleMode} variant="outline" size="icon">
|
||||
<Sun
|
||||
class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
|
||||
/>
|
||||
<Moon
|
||||
class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
|
||||
/>
|
||||
<span class="sr-only">Toggle theme</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<hr />
|
||||
</nav>
|
||||
|
||||
<style lang="postcss">
|
||||
.selected {
|
||||
@apply bg-zinc-300 dark:bg-zinc-600;
|
||||
}
|
||||
</style>
|
||||
25
src/lib/components/ui/button/button.svelte
Normal file
25
src/lib/components/ui/button/button.svelte
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
<script lang="ts">
|
||||
import { Button as ButtonPrimitive } from "bits-ui";
|
||||
import { type Events, type Props, buttonVariants } from "./index.js";
|
||||
import { cn } from "$lib/utils.js";
|
||||
|
||||
type $$Props = Props;
|
||||
type $$Events = Events;
|
||||
|
||||
let className: $$Props["class"] = undefined;
|
||||
export let variant: $$Props["variant"] = "default";
|
||||
export let size: $$Props["size"] = "default";
|
||||
export let builders: $$Props["builders"] = [];
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<ButtonPrimitive.Root
|
||||
{builders}
|
||||
class={cn(buttonVariants({ variant, size, className }))}
|
||||
type="button"
|
||||
{...$$restProps}
|
||||
on:click
|
||||
on:keydown
|
||||
>
|
||||
<slot />
|
||||
</ButtonPrimitive.Root>
|
||||
50
src/lib/components/ui/button/index.ts
Normal file
50
src/lib/components/ui/button/index.ts
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
import type { Button as ButtonPrimitive } from "bits-ui";
|
||||
import { type VariantProps, tv } from "tailwind-variants";
|
||||
import Root from "./button.svelte";
|
||||
|
||||
const buttonVariants = tv({
|
||||
base: "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||
outline:
|
||||
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
});
|
||||
|
||||
type Variant = VariantProps<typeof buttonVariants>["variant"];
|
||||
type Size = VariantProps<typeof buttonVariants>["size"];
|
||||
|
||||
type Props = ButtonPrimitive.Props & {
|
||||
variant?: Variant;
|
||||
size?: Size;
|
||||
};
|
||||
|
||||
type Events = ButtonPrimitive.Events;
|
||||
|
||||
export {
|
||||
Root,
|
||||
type Props,
|
||||
type Events,
|
||||
//
|
||||
Root as Button,
|
||||
type Props as ButtonProps,
|
||||
type Events as ButtonEvents,
|
||||
buttonVariants,
|
||||
};
|
||||
|
|
@ -1,5 +1,16 @@
|
|||
<script lang="ts">
|
||||
import '$lib/app.css';
|
||||
import Navbar from '$lib/components/Navbar/Navbar.svelte';
|
||||
import { ModeWatcher } from 'mode-watcher';
|
||||
import '@fontsource/geist-sans/latin.css';
|
||||
import '@fontsource/geist-mono/latin.css';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
<ModeWatcher />
|
||||
<Navbar />
|
||||
<div class="pb-24 px-4 pt-24">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -1,2 +1,7 @@
|
|||
<script>
|
||||
import { faker } from '@faker-js/faker';
|
||||
</script>
|
||||
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
{faker.word.words(2000)}
|
||||
|
|
|
|||
0
src/routes/about/+page.svelte
Normal file
0
src/routes/about/+page.svelte
Normal file
0
src/routes/blog/+page.svelte
Normal file
0
src/routes/blog/+page.svelte
Normal file
|
|
@ -1,64 +1,63 @@
|
|||
import { fontFamily } from "tailwindcss/defaultTheme";
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
const config = {
|
||||
darkMode: ["class"],
|
||||
content: ["./src/**/*.{html,js,svelte,ts}"],
|
||||
safelist: ["dark"],
|
||||
darkMode: ['class'],
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
safelist: ['dark'],
|
||||
theme: {
|
||||
container: {
|
||||
center: true,
|
||||
padding: "2rem",
|
||||
padding: '2rem',
|
||||
screens: {
|
||||
"2xl": "1400px"
|
||||
'2xl': '1400px'
|
||||
}
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(var(--border) / <alpha-value>)",
|
||||
input: "hsl(var(--input) / <alpha-value>)",
|
||||
ring: "hsl(var(--ring) / <alpha-value>)",
|
||||
background: "hsl(var(--background) / <alpha-value>)",
|
||||
foreground: "hsl(var(--foreground) / <alpha-value>)",
|
||||
border: 'hsl(var(--border) / <alpha-value>)',
|
||||
input: 'hsl(var(--input) / <alpha-value>)',
|
||||
ring: 'hsl(var(--ring) / <alpha-value>)',
|
||||
background: 'hsl(var(--background) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--foreground) / <alpha-value>)',
|
||||
primary: {
|
||||
DEFAULT: "hsl(var(--primary) / <alpha-value>)",
|
||||
foreground: "hsl(var(--primary-foreground) / <alpha-value>)"
|
||||
DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(var(--secondary) / <alpha-value>)",
|
||||
foreground: "hsl(var(--secondary-foreground) / <alpha-value>)"
|
||||
DEFAULT: 'hsl(var(--secondary) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--secondary-foreground) / <alpha-value>)'
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(var(--destructive) / <alpha-value>)",
|
||||
foreground: "hsl(var(--destructive-foreground) / <alpha-value>)"
|
||||
DEFAULT: 'hsl(var(--destructive) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--destructive-foreground) / <alpha-value>)'
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(var(--muted) / <alpha-value>)",
|
||||
foreground: "hsl(var(--muted-foreground) / <alpha-value>)"
|
||||
DEFAULT: 'hsl(var(--muted) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--muted-foreground) / <alpha-value>)'
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(var(--accent) / <alpha-value>)",
|
||||
foreground: "hsl(var(--accent-foreground) / <alpha-value>)"
|
||||
DEFAULT: 'hsl(var(--accent) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--accent-foreground) / <alpha-value>)'
|
||||
},
|
||||
popover: {
|
||||
DEFAULT: "hsl(var(--popover) / <alpha-value>)",
|
||||
foreground: "hsl(var(--popover-foreground) / <alpha-value>)"
|
||||
DEFAULT: 'hsl(var(--popover) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--popover-foreground) / <alpha-value>)'
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(var(--card) / <alpha-value>)",
|
||||
foreground: "hsl(var(--card-foreground) / <alpha-value>)"
|
||||
DEFAULT: 'hsl(var(--card) / <alpha-value>)',
|
||||
foreground: 'hsl(var(--card-foreground) / <alpha-value>)'
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
lg: "var(--radius)",
|
||||
md: "calc(var(--radius) - 2px)",
|
||||
sm: "calc(var(--radius) - 4px)"
|
||||
lg: 'var(--radius)',
|
||||
md: 'calc(var(--radius) - 2px)',
|
||||
sm: 'calc(var(--radius) - 4px)'
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [...fontFamily.sans]
|
||||
sans: ['Geist Sans', 'sans-serif'],
|
||||
mono: ['Geist Mono', 'monospace']
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
|
|||
Loading…
Reference in a new issue