diff --git a/src/content/writing/example.md b/src/content/writing/example.md deleted file mode 100644 index 01f4681..0000000 --- a/src/content/writing/example.md +++ /dev/null @@ -1,293 +0,0 @@ ---- -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 115af14..64f4204 100644 --- a/src/content/writing/how-i-start.md +++ b/src/content/writing/how-i-start.md @@ -2,7 +2,7 @@ slug: how-i-start title: 'How do I start programming?' description: 'Description de test' -publishedAt: '01/02/2023' +publishedAt: '01/09/2021' readingMins: 5 --- diff --git a/src/content/writing/how-my-website-works.md b/src/content/writing/how-my-website-works.md new file mode 100644 index 0000000..8830681 --- /dev/null +++ b/src/content/writing/how-my-website-works.md @@ -0,0 +1,7 @@ +--- +slug: how-my-website-works +title: 'How my website works?' +description: 'My new website is using a fantastical stack and I am explaining how my playground works' +publishedAt: '10/12/2023' +readingMins: 7 +--- diff --git a/src/content/writing/my-future-my-objectives.md b/src/content/writing/my-future-my-objectives.md new file mode 100644 index 0000000..0953e4b --- /dev/null +++ b/src/content/writing/my-future-my-objectives.md @@ -0,0 +1,7 @@ +--- +slug: my-future-my-objectives +title: 'What do I plan for my future? What are my objectives?' +description: 'I am currently in a decisive year of my life where I have to choose my future' +publishedAt: '11/15/2023' +readingMins: 7 +--- diff --git a/src/content/writing/new-website.md b/src/content/writing/new-website.md deleted file mode 100644 index 3de7b36..0000000 --- a/src/content/writing/new-website.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -slug: 'new-website' -title: 'New version for my portfolio' -description: 'Description de test' -publishedAt: '09/09/2021' -readingMins: 5 ---- - -## Presentation - -After long months of development, I have the honor to present you with a brand new version of my site. -What's new? What techniques were used? Everything will be detailed in this article. - -### Summary: -- Why a new version? -- Why was it so long? -- What does this new version offer? -- What technologies are used? -- Conclusion - -## 1. Why a new version? -a -You should know that I have discovered lots of new technologies concerning web development. -Indeed, it is an area that I have always wanted to discover. So I started a year ago to release my site, its first version. -Being new to this field, the code quickly became complicated to maintain and is not flexible at all. -These constraints meant that I could not update it often and when I wanted. -In addition, having more experience in this field, I wanted to improve the design of my site by making it more -editable and improving the code. - -## 2. Why was it so long? - -I am currently in Terminale gΓ©nΓ©rale, which is why I have a lot of homework that takes time -staff that I prefer to devote rather than to development. I am often under pressure because of this new -Baccalaureate, where all marks count towards the final Baccalaureate mark. -I don't have a creative mind, so I try to be as satisfied as possible with the result of the -design of my site. I also discovered new technologies, yes again, which took a while to learn before rushing headlong into the code. I tried to be more organized in the code, -to save time, as I had little. - -## 3. What does this new version offer? - -This new version offers many more features than the previous version: - -- Better mobile rendering πŸ“± -- A day module 🌞 and a night module 🌚 -- A multi-language site 🌍 -- A dynamization of the content βš™ -- A blog βœ’ -- A portfolio πŸŽ“ -- A personal CV βœ‰ -- A better point of contact πŸ“Œ - -## 4. What technologies are used? - -In this version, I used several technologies: - -- NuxtJs for server-side rendering -- VueJs for user interface -- TailwindCss & Sass for style -- NuxtJs / Content for all content - -## 5. Conclusion - -To conclude, I am very satisfied with the result of this new version, with its features. -I'll let you visit the rest of the site and give me your opinion! - diff --git a/src/tokens.config.ts b/src/tokens.config.ts deleted file mode 100644 index ea04290..0000000 --- a/src/tokens.config.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { defineTheme } from 'pinceau' - -export default defineTheme({ - -})