wokring on article and logo

2026-01-14 12:14:42 +01:00 · 2023-10-29 22:35:26 +01:00
parent 036c5ef5b2
commit 0141962293
13 changed files with 944 additions and 73 deletions
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,4 +1,6 @@
 export default defineNuxtConfig({
+  extends: ['@nuxt-themes/typography'],
+
  srcDir: 'src',

  build: {
--- a/package.json
+++ b/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",
--- a/src/app.config.ts
+++ b/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: {
--- a/src/assets/css/main.scss
+++ b/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
-}
--- a/src/components/header/Logo.vue
+++ b/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
-    class="flex items-center"
-    variant="ghost"
-    to="/"
-    :class="getColor"
-  >
-    ArthurDanj
-  </UButton>
+  <NuxtLink to="/" class="flex gap-1 items-center p-2 rounded-xl group text-xl !bg-transparent !dark:bg-transparent">
+    <span :class="getTextColor" class="font-black group-hover:text-black dark:group-hover:text-white duration-300">Arthur</span>
+    <span :class="getGroupColor()" class="font-bold text-gray-300 dark:text-neutral-600 duration-300">/</span>
+    <span :class="getTextColor" class="font-black group-hover:text-black dark:group-hover:text-white duration-300">Danjou</span>
+  </NuxtLink>
 </template>
--- a/src/components/header/NavBar.vue
+++ b/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>
--- a/src/content/uses.md
+++ b/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.
  :::

 ::
--- a/src/content/writing/example.md
+++ b/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>`
--- a/src/content/writing/how-i-start.md
+++ b/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.
-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.
+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.

 ## 3. What training did I take?

--- a/src/pages/writing/[slug].vue
+++ b/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
-                 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"
+                class="mt-12"
                :value="postContent"
              />
              <template #fallback>
--- a/src/tokens.config.ts
+++ b/src/tokens.config.ts
@@ -0,0 +1,5 @@
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+
+})
--- a/tailwind.config.ts
+++ b/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>
--- a/yarn.lock
+++ b/yarn.lock