mirror of
https://github.com/ArthurDanjou/website.git
synced 2026-01-14 12:14:42 +01:00
Rewrite articles
This commit is contained in:
@@ -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 `<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]
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
### `<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>`
|
||||
@@ -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
|
||||
---
|
||||
|
||||
|
||||
7
src/content/writing/how-my-website-works.md
Normal file
7
src/content/writing/how-my-website-works.md
Normal file
@@ -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
|
||||
---
|
||||
7
src/content/writing/my-future-my-objectives.md
Normal file
7
src/content/writing/my-future-my-objectives.md
Normal file
@@ -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
|
||||
---
|
||||
@@ -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!
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
import { defineTheme } from 'pinceau'
|
||||
|
||||
export default defineTheme({
|
||||
|
||||
})
|
||||
Reference in New Issue
Block a user