Better storybook setup

Author: garronej

.github/release.yaml

@@ -13,5 +13,5 @@ module.exports = {
     "core": {
         "builder": "webpack5"
     },
-    "staticDirs": ["./static"]
+    "staticDirs": ["../dist", "./static"]
 };

.storybook/main.js

@@ -1,94 +1,113 @@
-<link rel="apple-touch-icon" href="favicon/apple-touch-icon.png" />
-<link rel="icon" href="favicon/favicon.svg" type="image/svg+xml" />
-<link rel="shortcut icon" href="favicon/favicon.ico" type="image/x-icon" />
-<link rel="manifest" href="favicon/manifest.webmanifest" crossorigin="use-credentials" />
+<link rel="apple-touch-icon" href="/dsfr/favicon/apple-touch-icon.png" />
+<link rel="icon" href="/dsfr/favicon/favicon.svg" type="image/svg+xml" />
+<link rel="shortcut icon" href="/dsfr/favicon/favicon.ico" type="image/x-icon" />
+<link rel="manifest" href="/dsfr/favicon/manifest.webmanifest" crossorigin="use-credentials" />
 
-<style>
+<!-- Meta tags generated by metatags.io -->
+<!-- Primary Meta Tags -->
+<title>react-dsfr components</title>
+<meta name="title" content="react-dsfr components">
+<meta name="description" content="@codegouvfr/react-dsfr components playground and showcase">
+
+
+<!-- Facebook Meta Tags -->
+<meta property="og:url" content="https://www.keycloakify.dev">
+<meta property="og:type" content="website">
+<meta property="og:title" content="react-dsfr components">
+<meta property="og:description" content="@codegouvfr/react-dsfr components playground and showcase">
+<meta property="og:image" content="https://react-dsfr-components.etalab.studio/repo-card.png">
 
+<!-- Twitter Meta Tags -->
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:title" content="react-dsfr components">
+<meta name="twitter:description" content="@codegouvfr/react-dsfr components playground and showcase">
+<meta name="twitter:image" content="https://react-dsfr-components.etalab.studio/repo-card.png">
+
+<style>
 	.sidebar-item[data-nodetype="document"] svg {
 		display: none;
 	}
 
 	[id^="hidden"],
-  		[data-parent-id^="hidden"] {
+	[data-parent-id^="hidden"] {
 		display: none !important;
-  	}
+	}
 
 	@font-face {
 		font-family: Marianne;
-		src: url("fonts/Marianne-Light.woff2") format("woff2"), url("fonts/Marianne-Light.woff") format("woff");
+		src: url("/dsfr/fonts/Marianne-Light.woff2") format("woff2"), url("/dsfr/fonts/Marianne-Light.woff") format("woff");
 		font-weight: 300;
 		font-style: normal;
 		font-display: swap;
 	}
 
 	@font-face {
 		font-family: Marianne;
-		src: url("fonts/Marianne-Light_Italic.woff2") format("woff2"), url("fonts/Marianne-Light_Italic.woff") format("woff");
+		src: url("/dsfr/fonts/Marianne-Light_Italic.woff2") format("woff2"), url("/dsfr/fonts/Marianne-Light_Italic.woff") format("woff");
 		font-weight: 300;
 		font-style: italic;
 		font-display: swap;
 	}
 
 	@font-face {
 		font-family: Marianne;
-		src: url("fonts/Marianne-Regular.woff2") format("woff2"), url("fonts/Marianne-Regular.woff") format("woff");
+		src: url("/dsfr/fonts/Marianne-Regular.woff2") format("woff2"), url("/dsfr/fonts/Marianne-Regular.woff") format("woff");
 		font-weight: 400;
 		font-style: normal;
 		font-display: swap;
 	}
 
 	@font-face {
 		font-family: Marianne;
-		src: url("fonts/Marianne-Regular_Italic.woff2") format("woff2"), url("fonts/Marianne-Regular_Italic.woff") format("woff");
+		src: url("/dsfr/fonts/Marianne-Regular_Italic.woff2") format("woff2"), url("/dsfr/fonts/Marianne-Regular_Italic.woff") format("woff");
 		font-weight: 400;
 		font-style: italic;
 		font-display: swap;
 	}
 
 	@font-face {
 		font-family: Marianne;
-		src: url("fonts/Marianne-Medium.woff2") format("woff2"), url("fonts/Marianne-Medium.woff") format("woff");
+		src: url("/dsfr/fonts/Marianne-Medium.woff2") format("woff2"), url("/dsfr/fonts/Marianne-Medium.woff") format("woff");
 		font-weight: 500;
 		font-style: normal;
 		font-display: swap;
 	}
 
 	@font-face {
 		font-family: Marianne;
-		src: url("fonts/Marianne-Medium_Italic.woff2") format("woff2"), url("fonts/Marianne-Medium_Italic.woff") format("woff");
+		src: url("/dsfr/fonts/Marianne-Medium_Italic.woff2") format("woff2"), url("/dsfr/fonts/Marianne-Medium_Italic.woff") format("woff");
 		font-weight: 500;
 		font-style: italic;
 		font-display: swap;
 	}
 
 	@font-face {
 		font-family: Marianne;
-		src: url("fonts/Marianne-Bold.woff2") format("woff2"), url("fonts/Marianne-Bold.woff") format("woff");
+		src: url("/dsfr/fonts/Marianne-Bold.woff2") format("woff2"), url("/dsfr/fonts/Marianne-Bold.woff") format("woff");
 		font-weight: 700;
 		font-style: normal;
 		font-display: swap;
 	}
 
 	@font-face {
 		font-family: Marianne;
-		src: url("fonts/Marianne-Bold_Italic.woff2") format("woff2"), url("fonts/Marianne-Bold_Italic.woff") format("woff");
+		src: url("/dsfr/fonts/Marianne-Bold_Italic.woff2") format("woff2"), url("/dsfr/fonts/Marianne-Bold_Italic.woff") format("woff");
 		font-weight: 700;
 		font-style: italic;
 		font-display: swap;
 	}
 
 	@font-face {
 		font-family: Spectral;
-		src: url("fonts/Spectral-Regular.woff2") format("woff2"), url("fonts/Spectral-Regular.woff") format("woff");
+		src: url("/dsfr/fonts/Spectral-Regular.woff2") format("woff2"), url("/dsfr/fonts/Spectral-Regular.woff") format("woff");
 		font-weight: 400;
 		font-style: normal;
 		font-display: swap;
 	}
 
 	@font-face {
 		font-family: Spectral;
-		src: url("fonts/Spectral-ExtraBold.woff2") format("woff2"), url("fonts/Spectral-ExtraBold.woff") format("woff");
+		src: url("/dsfr/fonts/Spectral-ExtraBold.woff2") format("woff2"), url("/dsfr/fonts/Spectral-ExtraBold.woff") format("woff");
 		font-weight: 900;
 		font-style: normal;
 		font-display: swap;