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" + /> { - + @@ -21,6 +25,7 @@ const toggle = () => { name="dark-toggle" type="checkbox" ref="darkToggleEl" + aria-label="Toggle dark mode" @click="toggle" /> diff --git a/components/CommitStatBox.vue b/components/CommitStatBox.vue index dfef00d..b313bf5 100644 --- a/components/CommitStatBox.vue +++ b/components/CommitStatBox.vue @@ -27,7 +27,12 @@ onMounted(async () => { title="Latest commit" :clearstyles="true" > - + @@ -34,12 +43,13 @@ const getSvgIcon = async (name: string) => { :src="`/nav/${item.title.toLowerCase()}.svg`" class="m-0" preload="auto" + :alt="`${item.title} logo`" /> {{ item.title }} - + - + 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 @@ + + + + + + {{ s }} + + + + + 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 }>(); - Eggworld + Oeufs? - + {{ item.title }} diff --git a/components/PostPreviewCard.vue b/components/PostPreviewCard.vue index 1cfdbf4..b3c10a9 100644 --- a/components/PostPreviewCard.vue +++ b/components/PostPreviewCard.vue @@ -1,9 +1,11 @@ - - + + + + + · {{ descText }} - - {{ tag }} - + + + No excerpt available. - - - diff --git a/components/ProjectCard.vue b/components/ProjectCard.vue index 3e7f03b..0b682fe 100644 --- a/components/ProjectCard.vue +++ b/components/ProjectCard.vue @@ -17,13 +17,14 @@ const imgUrl = props.project.img - {{ project.name }} + {{ project.name }} - + {{ props.name }} @@ -44,12 +44,12 @@ a.broken::before { content: "PANQUIA IS ON FIRE"; position: absolute; color: red; - transform: rotate(-45deg); + transform: rotate(-40deg); font-size: 1.5rem; text-align: center; z-index: 2; - top: 40%; - left: -12.5%; + top: 32.5%; + left: -8%; width: 125%; font-family: "Roboto", sans-serif; font-weight: bold; diff --git a/components/StoryStatBox.vue b/components/StoryStatBox.vue index 6e0b049..38a05a0 100644 --- a/components/StoryStatBox.vue +++ b/components/StoryStatBox.vue @@ -1,5 +1,5 @@ - - - + + + {{ name }} + + + {{ name }} + + diff --git a/components/content/image.vue b/components/content/ProseImg.vue similarity index 53% rename from components/content/image.vue rename to components/content/ProseImg.vue index 91051a9..0e4db9d 100644 --- a/components/content/image.vue +++ b/components/content/ProseImg.vue @@ -1,5 +1,7 @@ @@ -10,7 +10,7 @@ useHead({ title: "Eggworld" });
· {{ descText }}