wokring on article and logo

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>`