@gouvfr/dsfr-roller 1.0.0

package/src/style/main/components/_dsfr-doc-anatomy.scss

@@ -0,0 +1,54 @@
+.dsfr-doc-anatomy {
+  margin-bottom: 2rem;
+
+  &__image {
+    margin-bottom: 0.75rem;
+  }
+
+  &__content {
+    position: relative;
+    padding-left: 2rem;
+  }
+
+  &__pin {
+    padding-bottom: 0.5rem;
+
+    &::marker {
+      content: none;
+    }
+
+    &::before {
+      content: counter(li-counter);
+      position: absolute;
+      left: 0;
+      font-size: 0.75rem;
+      border-radius: 1.5rem;
+      width: 1.5rem;
+      height: 1.5rem;
+      border: 1px solid var(--background-action-high-pink-tuile);
+      color: var(--text-action-high-pink-tuile);
+      margin-right: 0.25rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-weight: bold;
+    }
+
+    &--required {
+      &::before {
+        background-color: var(--background-action-high-pink-tuile);
+        color: var(--text-inverted-pink-tuile);
+      }
+    }
+  }
+
+  &__title {
+    font-weight: bold;
+  }
+
+  &__description {
+    &::before {
+      content: ' — ';
+    }
+  }
+}

package/src/style/main/components/_dsfr-doc-code-snippet.scss

@@ -0,0 +1,9 @@
+.code-snippet {
+  position: relative;
+
+  &--copy {
+    position: absolute;
+    bottom: 0.5rem;
+    right: 0.5rem;
+  }
+}

package/src/style/main/components/_dsfr-doc-figma-leaf.scss

@@ -0,0 +1,6 @@
+.dsfr-doc-figma-leaf {
+    iframe {
+        min-height: 400px;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+    }
+}

package/src/style/main/components/_dsfr-doc-guideline.scss

@@ -0,0 +1,58 @@
+.dsfr-doc-guideline {
+  &__img {
+    width: 100%;
+    border: 1px solid;
+    margin-bottom: 1rem;
+  }
+
+  &__title {
+    margin-bottom: 0.5rem;
+    font-weight: 700;
+    text-transform: uppercase;
+
+    &::before {
+      --icon-size: 1.5rem;
+      margin-right: 0.5rem;
+      flex: 0 0 auto;
+      display: inline-block;
+      vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+      background-color: currentColor;
+      width: var(--icon-size);
+      height: var(--icon-size);
+      -webkit-mask-size: 100% 100%;
+      mask-size: 100% 100%;
+      content: "";
+    }
+  }
+
+
+  &--do {
+    .dsfr-doc-guideline__img {
+      border-color: var(--border-action-high-success);
+    }
+
+    .dsfr-doc-guideline__title {
+      color: var(--text-default-success);
+
+      &::before {
+        -webkit-mask-image: url("../dist/icons/system/fr--success-fill.svg");
+        mask-image: url("../dist/icons/system/fr--success-fill.svg");
+      }
+    }
+  }
+
+  &--dont {
+    .dsfr-doc-guideline__img {
+      border-color: var(--border-action-high-error);
+    }
+
+    .dsfr-doc-guideline__title {
+      color: var(--text-default-error);
+
+      &::before {
+        -webkit-mask-image: url("../dist/icons/system/fr--error-fill.svg");
+        mask-image: url("../dist/icons/system/fr--error-fill.svg");
+      }
+    }
+  }
+}

package/src/style/main/components/_dsfr-doc-tab-navigation.scss

@@ -0,0 +1,99 @@
+.dsfr-doc-tab-navigation {
+    margin-bottom: 2rem;
+    padding-top: 1rem;
+
+    .fr-sidemenu {
+        padding-right: 0;
+    }
+
+    ul {
+        padding-top: 1rem;
+    }
+
+    &__tab {
+        display: block;
+        text-align: left;
+        width: 100%;
+        padding: 0.75rem 0.5rem;
+        text-decoration: none;
+        color: var(--text-default-grey);
+        font-weight: 700;
+        font-size: 1rem;
+        line-height: 1.5;
+        border: 0;
+        background-repeat: no-repeat;
+        background-image: linear-gradient(
+            0deg,
+            var(--border-default-grey),
+            var(--border-default-grey)
+        );
+        background-size: 100% 1px;
+        background-position: 0 100%;
+
+        &[aria-selected='true'] {
+            display: none;
+            color: var(--text-active-blue-france);
+        }
+    }
+
+    @media (min-width: 48em) {
+        padding-top: 2rem;
+
+        .fr-sidemenu__inner {
+            box-shadow: none;
+            padding: 0;
+        }
+
+        ul {
+            display: flex;
+            flex-direction: row;
+            padding-top: 0;
+            background-image: linear-gradient(
+                0deg,
+                var(--border-default-grey),
+                var(--border-default-grey)
+            );
+            background-size: 100% 2px;
+            background-position: 0 100%;
+            background-repeat: no-repeat;
+        }
+
+        &__tab {
+            font-size: 14px;
+            font-weight: 400;
+            padding: 0.75rem;
+            background-repeat: no-repeat;
+            background-image: linear-gradient(
+                0deg,
+                var(--border-default-grey),
+                var(--border-default-grey)
+            );
+            background-size: 100% 2px;
+            background-position: 0 100%;
+
+            &:hover:not([aria-selected='true']) {
+                background-color: var(
+                    --background-default-grey-hover
+                ) !important;
+                background-image: linear-gradient(
+                    0deg,
+                    var(--border-contrast-grey),
+                    var(--border-contrast-grey)
+                );
+                background-size: 100% 2px;
+                background-position: 0 100%;
+            }
+
+            &[aria-selected='true'] {
+                display: block;
+                background-image: linear-gradient(
+                    0deg,
+                    var(--border-active-blue-france),
+                    var(--border-active-blue-france)
+                );
+                background-size: 100% 2px;
+                background-position: 0 100%;
+            }
+        }
+    }
+}

package/src/style/main/components/_dsfr-doc-version.scss

@@ -0,0 +1,154 @@
+@charset "UTF-8";
+.fr-header .fr-header__menu-links .dsfr-doc-version {
+  margin-left: -.5rem;
+  margin-right: -.5rem;
+
+  &__btn {
+    padding-left: .5rem;
+    padding-right: .5rem;
+  }
+}
+
+.dsfr-doc-version {
+  --rows: 8;
+  position: relative;
+}
+
+.dsfr-doc-version .dsfr-doc-version__btn {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  padding: 0.5rem 1rem;
+  overflow: initial;
+  max-width: 100%;
+  max-height: none;
+  font-weight: 500;
+  min-height: 3rem;
+  width: 100%;
+}
+
+.dsfr-doc-version .dsfr-doc-version__btn::before {
+  --icon-size: 1rem;
+  margin-left: -0.125rem;
+  margin-right: 0.5rem;
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-image: url("../static/icons/code-s-slash-line.svg");
+  mask-image: url("../static/icons/code-s-slash-line.svg");
+  content: "";
+}
+
+.dsfr-doc-version .dsfr-doc-version__btn::after {
+  transition: transform 0.3s;
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-image: url("../dist/icons/system/arrow-down-s-line.svg");
+  mask-image: url("../dist/icons/system/arrow-down-s-line.svg");
+  --icon-size: 1rem;
+  content: "";
+  margin-left: auto;
+}
+
+.dsfr-doc-version .dsfr-doc-version__btn[aria-expanded=true]::after {
+  transform: rotate(-180deg);
+}
+
+.dsfr-doc-version__version {
+  white-space: nowrap;
+}
+
+.dsfr-doc-version__version[aria-current]:not([aria-current=false]) {
+  display: none;
+}
+
+.dsfr-doc-version__menu {
+  margin: 0;
+}
+
+.dsfr-doc-version .fr-nav__item::before {
+  content: none;
+}
+
+.dsfr-doc-version .fr-menu__list {
+  width: auto;
+  padding: 0;
+}
+
+.dsfr-doc-version .dsfr-doc-version__btn[aria-expanded=true] {
+  color: var(--text-active-blue-france);
+  background-color: var(--background-open-blue-france);
+
+  --idle: transparent;
+  --hover: var(--background-open-blue-france-hover);
+  --active: var(--background-open-blue-france-active);
+}
+
+.dsfr-doc-version .dsfr-doc-version__btn[aria-expanded=true]:hover {
+  background-color: var(--hover-tint);
+}
+
+.dsfr-doc-version .dsfr-doc-version__btn[aria-expanded=true]:active {
+  background-color: var(--active-tint);
+}
+
+.dsfr-doc-version__menu .dsfr-doc-version__version {
+  box-shadow: none;
+}
+
+@media (min-width: 62em) {
+  .dsfr-doc-version .dsfr-doc-version__btn {
+    min-height: auto;
+    width: auto;
+    font-size: 0.875rem;
+    line-height: 1.5rem;
+    padding: 0.25rem 0.75rem;
+  }
+
+  .dsfr-doc-version .dsfr-doc-version__btn::after {
+    margin-left: 0.25rem;
+    margin-right: -0.25rem;
+  }
+
+  .dsfr-doc-version .dsfr-doc-version__btn::before {
+    --icon-size: 1rem;
+  }
+
+  .dsfr-doc-version__version[aria-current]:not([aria-current=false]) {
+    display: inline-flex;
+  }
+
+  .dsfr-doc-version__menu {
+    margin: -0.25rem -1rem 0;
+  }
+
+  .dsfr-doc-version .fr-menu__list {
+    display: grid;
+    grid-template-rows: repeat(var(--rows), auto);
+    grid-auto-flow: column;
+  }
+
+  .fr-btns-group .dsfr-doc-version__menu {
+    margin: -1.25rem -0.75rem 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsfr-doc-version .dsfr-doc-version__btn::after {
+    transition: none;
+  }
+
+  .dsfr-doc-version__menu {
+    transition: none;
+  }
+}

package/src/style/main/components/_index.scss

@@ -0,0 +1,6 @@
+@use 'dsfr-doc-figma-leaf';
+@use 'dsfr-doc-tab-navigation';
+@use 'dsfr-doc-version';
+@use 'dsfr-doc-code-snippet';
+@use 'dsfr-doc-guideline';
+@use 'dsfr-doc-anatomy';

package/src/style/main/index.scss

@@ -0,0 +1,3 @@
+@use 'utility';
+@use 'components';
+@use 'third-party';

package/src/style/main/third-party/_highlight.scss

@@ -0,0 +1,227 @@
+@use '@gouvfr/dsfr-publisher/src/module/color/variable/options';
+@use 'sass:map';
+@use 'sass:list';
+
+@function get-color($name) {
+  @return list.nth(map.get(options.$values, $name), 1);
+}
+
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+  font-family: JetBrains Mono, Spectral, courrier, monospace;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+}
+code.hljs {
+  padding: 3px 5px
+}
+
+:root[data-fr-theme="light"] {
+  .hljs {
+    color: get-color(grey-100);
+    background: get-color(grey-975);
+    border: #{get-color(grey-900)} solid 1px;
+  }
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: get-color(error-425);
+  }
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: get-color(purple-glycine-sun-319)
+  }
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-variable,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: get-color(info-425)
+  }
+  .hljs-regexp,
+  .hljs-string,
+  .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: get-color(blue-ecume-sun-247)
+  }
+  .hljs-built_in,
+  .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: get-color(warning-425)
+  }
+  .hljs-comment,
+  .hljs-code,
+  .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: get-color(grey-425)
+  }
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: get-color(success-425)
+  }
+  .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: get-color(info-100)
+  }
+  .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: get-color(green-menthe-sun-373);
+    font-weight: bold
+  }
+  .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: get-color(yellow-moutarde-sun-348)
+  }
+  .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: get-color(info-100);
+    font-style: italic
+  }
+  .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: get-color(info-100);
+    font-weight: bold
+  }
+  .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: get-color(success-425);
+    background-color: get-color(success-975)
+  }
+  .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: get-color(error-425);
+    background-color: get-color(error-975)
+  }
+  .hljs-char.escape_,
+  .hljs-link,
+  .hljs-params,
+  .hljs-property,
+  .hljs-punctuation,
+  .hljs-tag {
+    /* purposely ignored */
+
+  }
+}
+
+:root[data-fr-theme="dark"] {
+  .hljs {
+    color: get-color(grey-950);
+    background: get-color(grey-75);
+    border: #{get-color(grey-150)} solid 1px;
+  }
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: get-color(error-625);
+  }
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: get-color(purple-glycine-moon-630)
+  }
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-variable,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: get-color(info-625)
+  }
+  .hljs-regexp,
+  .hljs-string,
+  .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: get-color(blue-ecume-moon-675)
+  }
+  .hljs-built_in,
+  .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: get-color(warning-625)
+  }
+  .hljs-comment,
+  .hljs-code,
+  .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: get-color(grey-625)
+  }
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: get-color(success-625)
+  }
+  .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: get-color(info-950)
+  }
+  .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: get-color(green-menthe-moon-652);
+    font-weight: bold
+  }
+  .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: get-color(yellow-moutarde-moon-860)
+  }
+  .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: get-color(info-950);
+    font-style: italic
+  }
+  .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: get-color(info-950);
+    font-weight: bold
+  }
+  .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: get-color(success-625);
+    background-color: get-color(success-75)
+  }
+  .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: get-color(error-625);
+    background-color: get-color(error-75)
+  }
+  .hljs-char.escape_,
+  .hljs-link,
+  .hljs-params,
+  .hljs-property,
+  .hljs-punctuation,
+  .hljs-tag {
+    /* purposely ignored */
+
+  }
+}

package/src/style/main/third-party/_index.scss

@@ -0,0 +1 @@
+@use 'highlight';

package/src/style/main/utility/_dsfr-doc-code.scss

@@ -0,0 +1,9 @@
+.dsfr-doc-inline-code {
+  font-family: JetBrains Mono, Spectral, courrier, monospace;
+  font-size: 0.75rem;
+  padding: 0 0.25rem;
+  background-color: var(--background-alt-grey);
+  border: var(--border-default-grey) solid 1px;
+  border-radius: 0.25rem;
+  color: var(--text-default-warning);
+}

package/src/style/main/utility/_font.scss

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../static/fonts/JetBrainsMono/JetBrainsMono-Regular.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../static/fonts/JetBrainsMono/JetBrainsMono-Italic.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../static/fonts/JetBrainsMono/JetBrainsMono-Bold.woff2) format('woff2');
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../static/fonts/JetBrainsMono/JetBrainsMono-BoldItalic.woff2) format('woff2');
+}

package/src/style/main/utility/_icon.scss

@@ -0,0 +1,4 @@
+.fr-icon-spam-2-line::before {
+  -webkit-mask-image: url(../static/icons/spam-2-line.svg);
+  mask-image: url(../static/icons/spam-2-line.svg);
+}

package/src/style/main/utility/_index.scss

@@ -0,0 +1,3 @@
+@use 'font';
+@use 'dsfr-doc-code';
+@use 'icon';

package/src/template/template-factory.js

@@ -0,0 +1,16 @@
+import { HomeTemplate } from './templates/home-template.js';
+import { EditorialTemplate } from './templates/editorial-template.js';
+import { SearchTemplate } from './templates/search-template.js'
+
+const TEMPLATES = [
+  EditorialTemplate,
+  HomeTemplate,
+  SearchTemplate
+];
+
+const templatesMap = new Map(TEMPLATES.map((Template) => [Template.NAME, Template]));
+
+export const templateFactory = (data) => {
+  const Template = templatesMap.get(data.template) ?? TEMPLATES[0];
+  return new Template(data);
+};