mirror of
https://github.com/ArthurDanjou/website.git
synced 2026-01-31 04:07:54 +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
|
slug: how-i-start
|
||||||
title: 'How do I start programming?'
|
title: 'How do I start programming?'
|
||||||
description: 'Description de test'
|
description: 'Description de test'
|
||||||
publishedAt: '01/02/2023'
|
publishedAt: '01/09/2021'
|
||||||
readingMins: 5
|
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