diff --git a/assets/css/style.scss b/assets/css/style.scss index 4fb7b50..e7aa43f 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -10,3 +10,11 @@ img, svg { * { @apply select-none outline-none; } + +.nuxt-content-editor { + @apply dark:bg-dark-200 border dark:border-white border-black border-solid; +} + +.nuxt-content { + @apply dark:text-dark-700; +} diff --git a/components/Header.vue b/components/Header.vue index 9e95c4b..279e9a4 100644 --- a/components/Header.vue +++ b/components/Header.vue @@ -121,9 +121,6 @@ export default { }, changeLanguage(lang) { this.$i18n.setLocale(lang) - if (this.$router.currentRoute.fullPath.includes('blog')) { - this.$fetch() - } }, }, mounted() { diff --git a/content/articles/fr/new-version-new-website.md b/content/articles/fr/new-version-new-website.md new file mode 100644 index 0000000..2af10f3 --- /dev/null +++ b/content/articles/fr/new-version-new-website.md @@ -0,0 +1,77 @@ +--- +slug: new-version-new-website +title: Ouverture de la nouvelle version de mon site ! +description: Après de long mois de développement, voici la version 2 de mon site ! +reading_time: 2 +tags: ["tags.dev"] +cover: 'default' +date: 13-12-2020 +background: false +--- + +Todo: + +- Parler de pourquoi une nouvelle version +- Pourquoi si long +- Technologies utilisées +- Ce que ca propose (blog etc) +- Conclusion +- Informations supplémentaires + +## Présentation + +Après de long mois de développement, j'ai l'honneur de vous présenter la toute nouvelle version de mon site. +Quelles sont les nouveautés ? Quelles sont les techniques utilisées ? Tout sera détaillé dans cet article. + +### Sommaire : +- Pourquoi une nouvelle version ? +- Pourquoi c'était si long ? +- Que propose cette nouvelle version ? +- Quelles sont les technologies utilisées ? +- Conclusion +- Informations supplémentaires + +## 1. Pourquoi une nouvelle version ? + +Il faut savoir que j'ai découvert pleins de nouvelles technologies concernant le développement web. +En effet, c'est un domaine que j'ai toujours voulu découvrir. Je me suis donc lancé il y a un an pour sortir mon site, sa première version. +Étant nouveau dans ce domaine, le code est vite devenu compliqué à maintenir et n'est pas du tout modulable. +Ces contraintes font que je ne pouvais pas le mettre à jour souvent et quand je voulais. +De plus, ayant plus d'expérience dans ce domaine, j'ai voulu améliorer le design de mon site en le rendant plus +modifiable et en améliorant le code. + +## 2. Pourquoi c'était si long ? + +Je suis actuellement en classe de Terminale générale, c'est donc pourquoi j'ai beaucoup de devoirs qui me demandent du temps +personnel que je préfère consacrer plutôt qu'au développement. Je suis souvent sous pression à cause de ce nouveau +Baccalauréat, où toutes les notes comptent pour la note finale du Baccalauréat. +Je n'ai pas réellement un esprit créatif, je cherche donc à être le plus satisfait possible du résultat final du +design de mon site. J'ai également découvert de nouvelles technologies, encore oui, qui m'ont demandées un temps +d'apprentissage avant de foncer tête baissée dans le code. J'ai cherché à être plus organisé dans le code, +pour gagner du temps, comme je n'en n'avait peu. + +## 3. Que propose cette nouvelle version ? + +Cette nouvelle version propose beaucoup plus de fonctionnalités que la version précédente : + +- Un meilleur rendu mobile 📱 +- Un module jour 🌞 et un module nuit 🌚 +- Un site multi-langage 🌍 +- Une dynamisation du contenu ⚙ +- Un blog ✒ +- Un portfolio 🎓 +- Un Cv personnel ✉ +- Un meilleur point de contact 📌 + +## 4. Quelles sont les technologies utilisées ? + +Dans cette version, j'ai utilisé plusieurs technologies : + +- NuxtJs pour le rendu côté serveur +- VueJs pour l'interface de l'utilisateur +- TailwindCss & Sass pour le style +- NuxtJs/Content pour tout le contenu + +## 5. Conclusion + +Pour conclure, je diff --git a/content/articles/fr/test-1.md b/content/articles/fr/test-1.md index 0eaacb8..fd1deb1 100644 --- a/content/articles/fr/test-1.md +++ b/content/articles/fr/test-1.md @@ -1,21 +1,32 @@ --- slug: test-1 -title: Mon premier Article -description: C'est un article écrit pour tester mon super système -reading_time: 15 -tags: ["tags.dev", "tags.life"] +title: Ouverture de la nouvelle version de mon site ! +description: Après de long mois de développement, voici la version 2 de mon site ! +reading_time: 0 +tags: ["tags.dev"] cover: 'default' date: 12-04-2020 background: false --- -Hey bro -Whats'up -I'am fine +- Informations suplémentaires -## hey bro +```java +public void main (String[] args) { + System.out.println("New test here !"); +} +``` -# Hey +`test` test -Faut bien test hein +> Test +Test de lien [Twitter](https://twitter.com/ArthurDanj) + +--- + +Hey +**Hey** +__hey__ + +~~Hey~~ diff --git a/pages/blog/_slug.vue b/pages/blog/_slug.vue index 661215d..9f94edc 100644 --- a/pages/blog/_slug.vue +++ b/pages/blog/_slug.vue @@ -40,12 +40,9 @@ Cover Img -

- -

{{ $t('blog.read.thanks') }} @@ -64,11 +61,17 @@ Twitter logo - + + + + +

-
+

- {{ $t('home.banner.hello') }}
+ {{ $t('home.banner.hello') }}
Arthur Danjou 👋

{{ $t('home.banner.role') }}

- {{ $t('home.banner.description', { age: age }) }} + {{ $t('home.banner.description', {age: age}) }}

@@ -25,9 +25,11 @@ description="part.about_description" color="orange" link="/about" - > - - + > + + - - + +
@@ -48,8 +52,10 @@ color="blue" link="/work" > - - + + - - - + + +
@@ -80,7 +89,7 @@ export default Vue.extend({ title: 'Arthur Danjou - Web & Software Developer' } }, - async asyncData({ $content }) { + async asyncData({$content}) { const infos = await $content('infos').fetch() return { age: infos.age diff --git a/tailwind.config.js b/tailwind.config.js index 7ed7668..363f9f1 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -11,6 +11,78 @@ module.exports = { presets: [], darkMode: 'class', theme: { + extend: { + typography: (theme) => ({ + dark: { + css: [ + { + color: theme('colors.dark.900'), + h1: { + color: theme('colors.white'), + }, + h2: { + color: theme('colors.white'), + }, + h3: { + color: theme('colors.white'), + }, + h4: { + color: theme('colors.white'), + }, + h5: { + color: theme('colors.white'), + }, + h6: { + color: theme('colors.white'), + }, + a: { + color: theme('color.dark.900'), + }, + strong: { + color: theme('color.dark.900'), + }, + blockquote: { + color: theme('color.dark.900'), + borderLeftColor: theme('colors.white'), + }, + code: { + color: theme('color.dark.900'), + }, + pre: { + backgroundColor: theme('colors.gray.900'), + color: theme('colors.dark.900'), + }, + thead: { + color: theme('colors.dark.900'), + borderBottomColor: theme('colors.dark.700'), + }, + 'tbody tr': { + borderBottomColor: theme('colors.dark.700'), + }, + 'ol > li::before': { + color: theme('colors.dark.700'), + }, + 'ul > li::before': { + backgroundColor: theme('colors.dark.700'), + }, + maxWidth: '65ch', + '[class~="lead"]': { + color: theme('colors.dark.700'), + }, + hr: { + borderColor: theme('colors.white'), + }, + 'figure figcaption': { + color: theme('colors.dark.700'), + }, + 'a code': { + color: theme('colors.dark.900'), + } + } + ] + } + }) + }, screens: { sm: '640px', md: '768px', @@ -831,7 +903,6 @@ module.exports = { placeholderOpacity: ['responsive', 'focus'], pointerEvents: ['responsive'], position: ['responsive'], - prose: ['dark'], resize: ['responsive'], ringColor: ['responsive', 'dark', 'focus-within', 'focus'], ringOffsetColor: ['responsive', 'dark', 'focus-within', 'focus'], @@ -858,6 +929,7 @@ module.exports = { transitionProperty: ['responsive'], transitionTimingFunction: ['responsive'], translate: ['responsive', 'hover', 'focus'], + typography: ['dark'], userSelect: ['responsive'], verticalAlign: ['responsive'], visibility: ['responsive'],