diff --git a/nuxt.config.ts b/nuxt.config.ts index 564a90b..69574d1 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -1,4 +1,6 @@ export default defineNuxtConfig({ + extends: ['@nuxt-themes/typography'], + srcDir: 'src', build: { diff --git a/package.json b/package.json index 98b1c36..f43a9a5 100644 --- 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", diff --git a/src/app.config.ts b/src/app.config.ts index d9471ac..f5ff9cc 100644 --- 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: { diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss index 751d8ee..d7b539f 100644 --- 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 -} diff --git a/src/components/header/Logo.vue b/src/components/header/Logo.vue index 9348421..afe896f 100644 --- a/src/components/header/Logo.vue +++ b/src/components/header/Logo.vue @@ -1,15 +1,16 @@ diff --git a/src/components/header/NavBar.vue b/src/components/header/NavBar.vue index 68b2e25..85df1cf 100644 --- a/src/components/header/NavBar.vue +++ b/src/components/header/NavBar.vue @@ -16,19 +16,19 @@ const items = [ + + diff --git a/src/content/uses.md b/src/content/uses.md index e7f98b1..7bf2ca8 100644 --- 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. ::: :: diff --git a/src/content/writing/example.md b/src/content/writing/example.md new file mode 100644 index 0000000..01f4681 --- /dev/null +++ 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 `` 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`). + +### `` + +```md [Code] +[Link](/api/components/prose) +```` + +[Link](/api/components/prose) + +### `` + +```md [Code] +> Block quote +```` + +> Block quote + +### `` + +```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. + +### `` + +```md [Code] +`code inline`. + +`const codeInline: string = 'highlighted code inline'`{lang="ts"} +``` + +`code inline`. + +`const codeInline: string = 'highlighted code inline'`{lang="ts"} + +### `` + + +# H1 Heading + +```md [Code] +# H1 Heading +``` + +### `` + +```md [Code] +## H2 Heading +``` + + ## H2 Heading + +### `` + +```md [Code] +### H3 Heading +``` + +### H3 Heading + +### `` + +```md [Code] +#### H4 Heading +``` + +#### H4 Heading + +### `` + +```md [Code] +##### H5 Heading +``` + +##### H5 Heading + +### `` + +```md [Code] +###### H6 Heading +``` + +###### H6 Heading + +### `` + +```md [Code] +--- +``` + +--- + +### `` + +```md [Code] +![A Cool Image](/preview.jpg) +``` + +![A Cool Image](/preview.jpg) + +### `` + +```md [Code] +- Just +- An +- Unordered +- List +``` + +- Just +- An +- Unordered +- List + +It also include the `` component. + +### `` + +```md [Code] +1. Foo +2. Bar +3. Baz +``` + +1. Foo +2. Bar +3. Baz + +It also include the `` component. + +### `` + +```md [Code] +Just a paragraph. +``` + +Just a paragraph. + +### `` + +```md [Code] +**Just a strong paragraph.** +``` + +**Just a strong paragraph.** + +### `` + +```md [Code] +_Just an italic paragraph._ +``` + +_Just an italic paragraph._ + +### `` + +```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: +- `` +- `` +- `` +- `` +- `` diff --git a/src/content/writing/how-i-start.md b/src/content/writing/how-i-start.md index e2dc66b..115af14 100644 --- 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? diff --git a/src/pages/writing/[slug].vue b/src/pages/writing/[slug].vue index fd3becb..d90007d 100644 --- a/src/pages/writing/[slug].vue +++ b/src/pages/writing/[slug].vue @@ -85,8 +85,7 @@ async function handleLike() {