wokring on article and logo

nuxt.config.ts

@@ -1,4 +1,6 @@
 export default defineNuxtConfig({
+  extends: ['@nuxt-themes/typography'],
+
   srcDir: 'src',
 
   build: {

package.json

@@ -7,7 +7,6 @@
     "dev": "nuxt dev --host",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "prisma generate || true && nuxt prepare",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix"
   },
@@ -33,6 +32,7 @@
   "devDependencies": {
     "@antfu/eslint-config": "1.0.0-beta.29",
     "@iconify/json": "2.2.134",
+    "@nuxt-themes/typography": "^1.0.1",
     "@nuxt/devtools": "1.0.0",
     "@nuxthq/studio": "1.0.2",
     "@nuxthq/ui": "2.7.0",

src/app.config.ts

@@ -10,9 +10,6 @@ export default defineAppConfig({
       padding: 'px-4 sm:px-6 lg:px-8',
       constrained: 'max-w-7xl',
     },
-    card: {
-      background: 'bg-white dark:bg-zinc-900',
-    },
     dropdown: {
       background: 'bg-white dark:bg-zinc-800',
       item: {

src/assets/css/main.scss

@@ -2,7 +2,3 @@ body {
   font-family: 'DM Sans', sans-serif;
   @apply flex h-full flex-col bg-zinc-50 dark:bg-black;
 }
-
-.router-link-exact-active {
-  @apply bg-white/60 dark:bg-black
-}

src/components/header/Logo.vue

@@ -1,15 +1,16 @@
 <script lang="ts" setup>
 const appConfig = useAppConfig()
-const getColor = computed(() => `text-${appConfig.ui.primary}-500`)
+const getTextColor = computed(() => `text-${appConfig.ui.primary}-500`)
+
+function getGroupColor() {
+  return `group-hover:text-${appConfig.ui.primary}-500`
+}
 </script>
 
 <template>
-  <UButton
+  <NuxtLink to="/" class="flex gap-1 items-center p-2 rounded-xl group text-xl !bg-transparent !dark:bg-transparent">
-    class="flex items-center"
+    <span :class="getTextColor" class="font-black group-hover:text-black dark:group-hover:text-white duration-300">Arthur</span>
-    variant="ghost"
+    <span :class="getGroupColor()" class="font-bold text-gray-300 dark:text-neutral-600 duration-300">/</span>
-    to="/"
+    <span :class="getTextColor" class="font-black group-hover:text-black dark:group-hover:text-white duration-300">Danjou</span>
-    :class="getColor"
+  </NuxtLink>
-  >
-    ArthurDanj
-  </UButton>
 </template>

src/components/header/NavBar.vue

@@ -16,19 +16,19 @@ const items = [
 <template>
   <nav class="hidden md:block z-50">
     <div class="flex items-center h-10 rounded-md p-1 gap-1 relative bg-black/5 text-sm font-medium text-zinc-700 dark:bg-zinc-800/90 dark:text-zinc-300">
-      <UButton to="/" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path === '/' }">
+      <UButton to="/" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path === '/' }">
         Home
       </UButton>
-      <UButton to="/about" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/about') }">
+      <UButton to="/about" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/about') }">
         About
       </UButton>
-      <UButton to="/writing" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/writing') }">
+      <UButton to="/writing" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/writing') }">
         Articles
       </UButton>
-      <UButton to="/work" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/work') }">
+      <UButton to="/work" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/work') }">
         Projects
       </UButton>
-      <UButton to="/uses" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/uses') }">
+      <UButton to="/uses" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/uses') }">
         Uses
       </UButton>
       <UDropdown mode="hover" :items="items" :popper="{ placement: 'bottom' }">
@@ -36,9 +36,15 @@ const items = [
           Other
         </UButton>
       </UDropdown>
-      <UButton to="/contact" size="sm" variant="ghost" color="white" :class="{ 'router-link-exact-active': route.path.includes('/contact') }">
+      <UButton to="/contact" size="sm" variant="ghost" color="white" :class="{ 'link-active': route.path.includes('/contact') }">
         Contact
       </UButton>
     </div>
   </nav>
 </template>
+
+<style lang="scss">
+.link-active {
+  @apply bg-white/60 dark:bg-black
+}
+</style>

src/content/uses.md

@@ -17,7 +17,7 @@
   :::
 
   :::grid-slot{title="Phone, Sound & Other"}
-    I have the Iphone 14 Pro. For my studies, I use the Ipad Air 64Go Space Gray with the AirPods Pro or the Jabra Elite 85th.
+    I have the Iphone 14 Pro. For my studies, I use the Ipad Air 64Go Space Gray with the AirPods Pro or the Jabra Elite 85h.
   :::
 
 ::

src/content/writing/example.md

@@ -0,0 +1,293 @@
+---
+slug: example
+title: 'This is an example'
+description: 'A Nuxt theme to get a beautiful and customisable typography with a set of prose components for Nuxt Content.'
+publishedAt: '10/29/2023'
+readingMins: 2
+---
+
+Repository is on GitHub: [nuxt-themes/typography](https://github.com/nuxt-themes/typography)
+
+See also the [online playground](https://stackblitz.com/edit/nuxt-theme-typography?file=content/index.md).
+
+Some examples:
+- [Basic example](/example)
+- [Tailwind Typograhy content](/tailwind)
+- [Dynamic GitHub Readme viewer](https://nuxt-typo-readme.vercel.app)
+
+## Installation
+
+```bash[npm]
+npm install --save-dev @nuxt-themes/typography
+```
+
+## Usage
+
+Add it to the `nuxt.config`:
+
+```ts [nuxt.config.ts]
+export default defineNuxtConfig({
+  extends: '@nuxt-themes/typography'
+})
+```
+
+## Configuration
+
+You can change the whole appearance of Prose components via `tokens.config.ts` file.
+
+You can check out all the available keys by looking at the [source of this file](https://github.com/nuxt-themes/typography/tree/main/tokens.config.ts).
+
+Tokens are divided between two keys:
+
+- `typography` rules general style tokens reused in the other category
+- `prose` rules per-component style tokens, that feeds from `typography`
+
+Editing `typography` is more suited if you want to modify or adapt the general appearance of your typography.
+
+Editing `prose` is more suited if you want to modify or adapt the appearance of a specific prose component.
+
+### Configuration example
+
+```ts [tokens.config.ts]
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+  typography: {
+    // This will change the general line-break size
+    letterSpacings: {
+      tight: '-0.035em',
+      wide: '0.035em'
+    },
+  },
+  prose: {
+    // This will change the fontSize of the `<ProseH1>` component
+    h1: {
+      fontSize: '{typography.2xl.fontSize}'
+    }
+  }
+})
+```
+
+### Icons
+
+To customize the icons used in Nuxt Typography, use the `prose` property in your `app.config.ts`:
+
+```ts [app.config.ts]
+export default defineAppConfig({
+  prose: {
+    // Default icon for all headings on hover
+    headings: {
+      icon: 'ph:anchor'
+    },
+    // Icon used for h1 headings
+    h1: {
+      icon: 'ph:link'
+    },
+    // Remove icon on h2 headings
+    h2: {
+      icon: false
+    },
+    // Icon used for the copy button on code blocks
+    copyButton: {
+      iconCopy: 'ph:copy',
+      iconCopied: 'ph:check'
+    }
+  }
+})
+```
+
+Note that under the hood, Nuxt Typography uses [nuxt-icon](https://github.com/nuxt-modules/icon), this mean that you can use a custom component name or any name coming from [icones.js.org](https://icones.js.org).
+
+## Prose Components
+
+Nuxt Typography expose a set of prose components that work seamlessly with [Nuxt Content](https://content.nuxtjs.org).
+
+To overwrite a prose component, create a component with the same name in your project `components/content/` directory (ex: `components/content/ProseA.vue`).
+
+### `<ProseA>`
+
+```md [Code]
+[Link](/api/components/prose)
+````
+
+[Link](/api/components/prose)
+
+### `<ProseBlockquote>`
+
+```md [Code]
+> Block quote
+````
+
+> Block quote
+
+### `<ProseCode>`
+
+```md [Code]
+\```javascript
+export default () => {
+  console.log('Code block')
+}
+\```
+```
+
+```ts
+export default () => {
+  console.log('Code block')
+}
+```
+
+Check out the [highlight options](https://content.nuxtjs.org/api/configuration#highlight) for more about the syntax highlighting.
+
+### `<ProseCodeInline>`
+
+```md [Code]
+`code inline`.
+
+`const codeInline: string = 'highlighted code inline'`{lang="ts"}
+```
+
+`code inline`.
+
+`const codeInline: string = 'highlighted code inline'`{lang="ts"}
+
+### `<ProseH1>`
+
+
+# H1 Heading
+
+```md [Code]
+# H1 Heading
+```
+
+### `<ProseH2>`
+
+```md [Code]
+## H2 Heading
+```
+
+  ## H2 Heading
+
+### `<ProseH3>`
+
+```md [Code]
+### H3 Heading
+```
+
+### H3 Heading
+
+### `<ProseH4>`
+
+```md [Code]
+#### H4 Heading
+```
+  
+#### H4 Heading
+
+### `<ProseH5>`
+
+```md [Code]
+##### H5 Heading
+```
+
+##### H5 Heading
+
+### `<ProseH6>`
+
+```md [Code]
+###### H6 Heading
+```
+
+###### H6 Heading
+
+### `<ProseHr>`
+
+```md [Code]
+---
+```
+
+---
+
+### `<ProseImg>`
+
+```md [Code]
+![A Cool Image](/preview.jpg)
+```
+
+![A Cool Image](/preview.jpg) 
+
+### `<ProseUl>`
+
+```md [Code]
+- Just
+- An
+- Unordered
+- List
+```
+
+- Just
+- An
+- Unordered
+- List
+
+It also include the `<ProseLi>` component.
+
+### `<ProseOl>`
+
+```md [Code]
+1. Foo
+2. Bar
+3. Baz
+```
+
+1. Foo
+2. Bar
+3. Baz
+
+It also include the `<ProseLi>` component.
+
+### `<ProseP>`
+
+```md [Code]
+Just a paragraph.
+```
+
+Just a paragraph.
+
+### `<ProseStrong>`
+
+```md [Code]
+**Just a strong paragraph.**
+```
+
+**Just a strong paragraph.**
+
+### `<ProseEm>`
+
+```md [Code]
+_Just an italic paragraph._
+```
+
+_Just an italic paragraph._
+
+### `<ProseTable>`
+
+```md [Code]
+| Key | Type | Description |
+|-----|------| ------------|
+| 1 | Wonderful | Table with `some long code snippet example` |
+| 2 | Wonderful | Data |
+| 3 | Wonderful | Website |
+```
+
+| Key | Type | Description |
+|-----|------| ------------|
+| 1 | Wonderful | Table with `some long code snippet example` |
+| 2 | Wonderful | Data |
+| 3 | Wonderful | Website |
+
+It also includes:
+- `<ProseTbody>`
+- `<ProseTd>`
+- `<ProseTh>`
+- `<ProseThead>`
+- `<ProseTr>`

src/content/writing/how-i-start.md

@@ -30,8 +30,8 @@ So I installed my first development environment and started with very small proj
 ## 2. And the web in all this?
 
 It was much later that I became aware of the vastness of the web domain. As I got interested in this new field, I learned new programming languages: **JavaScript**, **HTML**, and **CSS**.
-These languages were much easier to learn because I had a good foundation in programming. I trained as much in `Front` as in` Back` development.
+These languages were much easier to learn because I had a good foundation in programming. I trained as much in `Front` as in `Back` development.
-The `Front` results in the interface of the application being visible to a user and the` Back` the part invisible and inaccessible to a user.
+The `Front` results in the interface of the application being visible to a user and the `Back` the part invisible and inaccessible to a user.
 
 ## 3. What training did I take?
 

src/pages/writing/[slug].vue

@@ -85,8 +85,7 @@ async function handleLike() {
             </div>
             <ClientOnly>
               <ContentRenderer
-                class="mt-12 prose leading-6 prose-table:w-full md:prose-table:w-3/4 lg:prose-table:w-2/5 max-w-none
+                class="mt-12"
-                 dark:prose dark:prose-invert dark:leading-6 dark:max-w-none dark:prose-table:w-full dark:md:prose-table:w-3/4 dark:lg:prose-table:w-2/5"
                 :value="postContent"
               />
               <template #fallback>

src/tokens.config.ts

@@ -0,0 +1,5 @@
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+
+})

tailwind.config.ts

@@ -5,7 +5,9 @@ export default {
   safelist: [
     // Theme text colors
     ...Object.values(ColorsTheme).map(color => `text-${color}-500`),
+    ...Object.values(ColorsTheme).map(color => `!text-${color}-500`),
     ...Object.values(ColorsTheme).map(color => `hover:text-${color}-500`),
+    ...Object.values(ColorsTheme).map(color => `group-hover:text-${color}-500`),
     ...'bg-black dark:bg-white dark:text-black text-white'.split(' '),
 
     // Theme background colors
@@ -18,11 +20,4 @@ export default {
     ...Object.values(ColorsTheme).map(color => `hover:border-${color}-500`),
     ...'border-black dark:border-white'.split(' '),
   ],
-  theme: {
-    extend: {
-      boxShadow: {
-        card: '0 0 10px 1px rgba(0,0,0,.1)',
-      },
-    },
-  },
 } satisfies Partial<Config>