diff --git a/README.md b/README.md index 9d63cd0..650826f 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,25 @@ -# Eggworld v3: Nuxt 3 +# Oeufs? -After hand-written HTML and a static site generator comes Nuxt! +Après le HTML manuscrit et le générateur de site statique — c'est Nuxt! -**WARN: Volar 0.40.0 breaks all type-checking and I don't know why — stick with Volar 0.39.5.** +Instructions post-compilation (pendant Nuxt n'a pas le prérendu) -Post-build instructions (while prerendering is bork) +- Compilez `/script.ts` à `/script.js` (`tsc script.ts -m esnext -t esnext --moduleResolution node`) - - Compile `/script.ts` to `/script.js` (`tsc script.ts -m esnext -t esnext --moduleReslution node`) +Lisez la [documentation de Nuxt](https://v3.nuxtjs.org) pour en savoir plus. -Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more. +## Installation -## Setup - -Make sure to install the dependencies: +Assurez-vous d'installer les dépendances: ```bash # yarn yarn install ``` -## Development Server +## Serveur de développement -Start the development server on http://localhost:3000 +Démarrez le serveur de développement sur http://localhost:3000 ```bash yarn dev @@ -29,10 +27,10 @@ yarn dev ## Production -Locally preview production build: +Prévisualisez la production sur votre système local: ```bash yarn preview ``` -Checkout the [deployment documentation](https://v3.nuxtjs.org/guide/deploy/presets) for more information. +Lisez la [documentation de déploiement](https://v3.nuxtjs.org/guide/deploy/presets) pour en savoir plus. diff --git a/assets/css/base.scss b/assets/css/base.scss new file mode 100644 index 0000000..b663392 --- /dev/null +++ b/assets/css/base.scss @@ -0,0 +1,52 @@ +@import url("https://fonts.googleapis.com/css2?family=Bitter:wght@300;400;600;700;800;900&display=swap"); + +@mixin headings { + h1, + h2, + h3, + h4, + h5, + h6 { + @content; + } +} + +* { + box-sizing: border-box; + // for that cool wave dark mode effect + z-index: 1; + position: relative; +} + +html, +body, +div#__nuxt { + height: 100%; +} + +main { + flex-grow: 1; +} + +:root { + --text-color: #243746; + --bg: #f1e7d0; +} + +.dark { + --text-color: #ebf4f1; + --bg: #091a28; +} + +.text-bitter { + font-family: Bitter, ui-sans-serif, system-ui, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Open Sans", "Helvetica Neue", + sans-serif; +} + +.text-article { + font-family: "Source Serif Pro", serif; + line-height: 1.8; + color: #111; + font-size: 1.25rem; +} diff --git a/assets/css/main.scss b/assets/css/main.scss new file mode 100644 index 0000000..66b37ec --- /dev/null +++ b/assets/css/main.scss @@ -0,0 +1,22 @@ +@import "base.scss"; + +.prose article { + @include headings { + & > a:hover, + & > a:active { + text-decoration: underline; + text-decoration-skip-ink: all; + @apply text-blue-700 dark:text-blue-400; + &::before { + content: "#"; + position: absolute; + opacity: 0.5; + left: -2rem; + } + } + } + + a:hover { + @apply hover:text-blue-700 dark:hover:text-blue-400; + } +} diff --git a/assets/images/star.svg b/assets/images/star.svg new file mode 100644 index 0000000..75c19c6 --- /dev/null +++ b/assets/images/star.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/components/BlogStatBox.vue b/components/BlogStatBox.vue index 2fff2e1..fecccd6 100644 --- a/components/BlogStatBox.vue +++ b/components/BlogStatBox.vue @@ -27,9 +27,8 @@ const latest = docs.at(-1) as BlogParsedContent; v-for="(tag, index) in latest.tags" :key="index" :dest="`/tags/blog/${tag}`" - > - {{ tag }} - + :name="tag" + /> { diff --git a/components/HeaderLoop.vue b/components/HeaderLoop.vue new file mode 100644 index 0000000..876424e --- /dev/null +++ b/components/HeaderLoop.vue @@ -0,0 +1,101 @@ + + + + + diff --git a/components/Navbar.vue b/components/Navbar.vue index 2e2c63e..467231c 100644 --- a/components/Navbar.vue +++ b/components/Navbar.vue @@ -8,10 +8,13 @@ const props = defineProps<{ activeItem?: string }>();