Add posts (#223)

This PR doesn't contain the public footer that I'll be working on next

app.vue

@@ -11,6 +11,11 @@ import '@gouvfr/dsfr/dist/dsfr.css'
 import '@gouvfr/dsfr/dist/utility/utility.css'
 import '@datagouv/components/dist/style.css'
 import '~/assets/css/overrides.css'
+import { setupI18nWithExistingInstance } from '@datagouv/components'
+
+const app = useNuxtApp()
+
+setupI18nWithExistingInstance({ global: app.$i18n })
 
 useHead({
   titleTemplate: (titleChunk) => {

assets/css/fonts.css

@@ -1,3 +1,12 @@
+@font-face {
+  font-weight: 800;
+  font-family: "Marianne";
+  src: url("../fonts/Marianne-ExtraBold.woff2") format("woff2"),
+    url("../fonts/Marianne-ExtraBold.woff") format("woff");
+
+  font-display: swap;
+}
+
 @font-face {
   font-weight: 600;
   font-family: Spectral;

components/Breadcrumb/Breadcrumb.vue

@@ -2,7 +2,7 @@
   <nav
     rol="navigation"
     :aria-label="$t(`You're here:`)"
-    class="fr-breadcrumb fr-mb-5v"
+    class="fr-breadcrumb !mb-5"
   >
     <ol class="fr-breadcrumb__list">
       <slot />

components/MarkdownEditor/InternalEditor.vue

@@ -90,14 +90,7 @@
     </div>
     <div class="p-1">
       <Milkdown
-        class="prose prose-neutral max-w-none prose-h1:text-xl prose-h1:leading-6 prose-h1:font-extrabold"
-        :class="[
-          proseTable,
-          proseHeading,
-          proseList,
-          proseCode,
-          proseOthers,
-        ]"
+        :class="markdownClasses"
       />
     </div>
   </div>
@@ -185,12 +178,6 @@ const gfmPlugins = [
   tableSelectorPlugin(widgetViewFactory),
 ].flat()
 
-const proseTable = 'prose-table:bg-neutral-200 prose-table:!overflow-visible first-of-type:prose-tr:!bg-neutral-200 first-of-type:prose-tr:border-b-2 first-of-type:prose-tr:border-black odd:prose-tr:bg-neutral-300 *:prose-th:m-0 *:prose-td:m-0 prose-th:p-4 prose-td:p-4'
-const proseHeading = 'prose-h1:text-xl prose-h1:leading-6 prose-h2:text-base prose-h3:text-sm prose-h3:leading-6 prose-headings:font-extrabold'
-const proseList = 'prose-ul:list-disc'
-const proseCode = 'prose-pre:font-mono prose-pre:bg-neutral-200 prose-pre:text-neutral-600'
-const proseOthers = 'prose-blockquote:border-neutral-800 prose-a:no-underline prose-li:p-0 *:prose-li:m-0'
-
 const editor = useEditor(root =>
   Editor.make()
     .config((ctx) => {

components/MarkdownViewer/MarkdownViewer.vue

@@ -0,0 +1,16 @@
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <div
+    :class="markdownClasses"
+    v-html="formatMarkdown(content, minHeading)"
+  />
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+  content: string
+  minHeading?: 1 | 2 | 3 | 4 | 5 | 6
+}>(), {
+  minHeading: 3,
+})
+</script>

components/Post/card.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="max-w-[38rem] hover:bg-neutral-200 fr-enlarge-link">
+    <div v-if="post.image">
+      <img :src="post.image">
+    </div>
+    <div class="p-4">
+      <p class="text-lg mb-2.5 font-bold">
+        <NuxtLinkLocale
+          :to="`/posts/${post.slug}/`"
+        >
+          {{ post.name }}
+        </NuxtLinkLocale>
+      </p>
+      <p
+        v-if="post.published"
+        class="mb-0 text-gray-medium"
+      >
+        {{ $t('Published the {date}', { date: formatDate(post.published) }) }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formatDate } from '@datagouv/components'
+import type { Post } from '~/types/posts'
+
+defineProps<{
+  post: Post
+}>()
+</script>

components/SiteHeader/SiteHeader.vue

@@ -414,7 +414,7 @@ const menu = [
     { label: t('How to use data?'), link: '/pages/onboarding/reutilisateurs/', external: true },
     { label: t('{site} guides', { site: config.public.title }), link: config.public.guidesUrl, external: true },
   ], external: true },
-  { label: t('News'), link: '/posts/', external: true },
+  { label: t('News'), link: '/posts/' },
   { label: t('Contact us'), link: 'https://support.data.gouv.fr/', external: true },
 ]
 

lang/en-US.json

@@ -765,5 +765,6 @@
   "No organizations": "No organizations",
   "{n} posts": "{n} posts | {n} post | {n} posts",
   "Published the {date}": "Published the {date}",
+  "Posts": "Posts",
   "": ""
 }

lang/es-ES.json

@@ -758,5 +758,6 @@
   "No organizations": "No organizations",
   "{n} posts": "{n} posts | {n} post | {n} posts",
   "Published the {date}": "Published the {date}",
+  "Posts": "Posts",
   "": ""
 }

lang/fr-FR.json

@@ -786,5 +786,6 @@
   "No organizations": "Pas d'organizations",
   "{n} posts": "{n} articles | {n} article | {n} articles",
   "Published the {date}": "Publié le {date}",
+  "Posts": "Articles",
   "": ""
 }