Merge pull request #36 from ita-design-system/develop

Upgrade to v0.10.0

Author: olivier3lanc

.eleventy.js

@@ -3,6 +3,7 @@ import eleventyNavigationPlugin             from "@11ty/eleventy-navigation";
 import { InputPathToUrlTransformPlugin }    from "@11ty/eleventy";
 import { eleventyImageTransformPlugin }     from "@11ty/eleventy-img";
 import { EleventyHtmlBasePlugin }           from "@11ty/eleventy";
+import pluginRss                            from "@11ty/eleventy-plugin-rss";
 // END 11TY imports
 
 // START LibDoc imports
@@ -16,6 +17,7 @@ export default function(eleventyConfig) {
     eleventyConfig.addPlugin(InputPathToUrlTransformPlugin);
     eleventyConfig.addPlugin(eleventyNavigationPlugin);
     eleventyConfig.addPlugin(eleventyImageTransformPlugin, libdocFunctions.pluginsParameters.eleventyImageTransform());
+    eleventyConfig.addPlugin(pluginRss);
     // END PLUGINS
 
     // START FILTERS

README.md

@@ -39,6 +39,7 @@ Eleventy LibDoc is an easy to use and content focused starter project for [Eleve
 * **Light and dark modes** <br>LibDoc’s interface is available with both light and dark mode color schemes.
 * **Slick code highlighting** <br>Display your code in a nice style and adjust which code languages you really use.
 * **Sandboxes** <br>Showcase small demos or full HTML pages into a responsive dual pane.
+* **Atom feed** <br>The Atom feed allows visitors to subscribe to post blog content.
 
 ## Documentation
 

_data/libdocConfig.js

@@ -42,6 +42,7 @@ export default {
     ],
     roundedImagesCorners: userConfig.roundedImagesCorners ?? true,
     editThisPageRootUrl: userConfig.editThisPageRootUrl ?? false,
-    imgBgColorLightMode: userConfig.imgBgColorLightMode ?? 'transparent',
-    imgBgColorDarkMode: userConfig.imgBgColorDarkMode ?? 'transparent'
+    imgBgColorLightMode: userConfig.imgBgColorLightMode ?? "transparent",
+    imgBgColorDarkMode: userConfig.imgBgColorDarkMode ?? "transparent",
+    productionUrl: userConfig.productionUrl ?? ""
 };

_data/libdocMessages.json

@@ -129,6 +129,11 @@
 		"fr": "Ouvrir dans un nouvel onglet",
 		"it": "Apri in una nuova scheda"
 	},
+	"otherCustomLinks": {
+		"en": "Other custom links",
+		"fr": "Autres liens personnalisés",
+		"it": "Altri collegamenti personalizzati"
+	},
 	"page": {
 		"en": "Page",
 		"fr": "Page",

_includes/libdoc_page.liquid

@@ -226,17 +226,17 @@
                         </li>
                     {% endif %}
                     {% if libdocConfig.customLinks.size > 0 %}
-                        <li class="d-flex ai-center fw-wrap gap-7 rgap-1 | pb-3 pl-5">
+                        <li id="custom_links"
+                            class="d-flex ai-center rgap-1 | pos-relative | pb-3 pl-5 o-auto">
                             {% for item in libdocConfig.customLinks %}
                                 <a  href="{{ item.url }}"
                                     class="
                                     d-flex ai-center gap-1
-                                    pt-2 pb-2
-                                    fvs-wght-600 fs-2 lsp-3 lh-1 tt-uppercase td-none
+                                    pt-2 pb-2 pr-5
+                                    fvs-wght-700 fs-2 lsp-3 lh-1 tt-uppercase td-none ws-nowrap
                                     c-primary-600"
                                     target="_blank">
                                     {{ item.text }}
-                                    <span class=""><span class="icon-arrow-square-out | pos-absolute t-tY-50"></span></span>
                                 </a>
                             {% endfor %}
                         </li>

core/assets/css/ds__colors.css

@@ -165,16 +165,9 @@ main table td code {
     color: var(--ita-colors-primary-900);
 }
 /* QUOTES */
-main blockquote {
-    background: var(--ita-colors-neutral-100);
-    color: var(--ita-colors-primary-900);
-    border-color: var(--ita-colors-primary-300);
-}
 main blockquote::before {
-    color: var(--ita-colors-primary-300);
-}
-main blockquote::after {
-    color: var(--ita-colors-primary-300);
+    border-color: var(--ita-colors-primary-200);
+    background-color: var(--ita-colors-neutral-100);
 }
 /* DEFINITION LISTS */
 main dl dt {

core/assets/css/ds__defaults.css

@@ -487,32 +487,35 @@ main blockquote {
     position: relative;
     margin-top: var(--ita-spacings-10);
     margin-bottom: var(--ita-spacings-10);
-    padding: var(--ita-spacings-5) var(--ita-spacings-9);
-    max-width: var(--libdoc-container-width);
-    border-bottom-left-radius: 3em;
-    border-top-right-radius: 3em;
-    border-width: 3px;
-    border-style: double;
+    padding: 2em 4em;
     font-family: var(--libdoc-font-family);
     font-size: var(--ita-fontSizes-7);
-    border-radius: 12px;
-    box-shadow: var(--libdoc-soft-shadow);
+}
+main blockquote > *:first-child {
+    margin-top: 0;
+}
+main blockquote > *:last-child {
+    margin-bottom: 0;
 }
 main blockquote::before {
     content: "❝";
     position: absolute;
-    left: 0;
+    left: var(--ita-spacings-9);
     font-size: 4em;
-    transform: translateY(-60%);
-}
-main blockquote::after {
-    content: "❞";
-    position: absolute;
-    font-size: 4em;
-    transform: translateY(-20%);
-    right: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    max-width: calc(100% - 2 * var(--ita-spacings-9));
+    line-height: 0;
+    text-indent: var(--ita-spacings-5);
+    border-bottom-left-radius: 3em;
+    border-top-right-radius: 3em;
+    border-width: 3px;
+    border-style: double;
+    border-radius: 12px;
 }
 main blockquote * {
+    position: relative;
     font-variation-settings: "slnt" -15, "CASL" 1, "CRSV" 1;
     letter-spacing: -0.01em;
 }
@@ -971,8 +974,12 @@ input[type="radio"] ~ label::before {
         max-width: calc(calc(var(--ita-widths-content) + 2 * var(--ita-spacings-5)));
     }
     main blockquote {
-        font-size: var(--ita-fontSizes-6);
-        padding: var(--ita-spacings-5) var(--ita-spacings-7);
+        padding: 2em 3em;
+        font-size: var(--ita-fontSizes-5);
+    }
+    main blockquote::before {
+        left: var(--ita-spacings-5);
+        max-width: calc(100% - 2 * var(--ita-spacings-5));
     }
     #floating_toc_container {
         box-shadow: var(--libdoc-soft-shadow);

core/assets/fonts/icomoon/demo.html

@@ -9,10 +9,24 @@
     <link rel="stylesheet" href="style.css"></head>
 <body>
     <div class="bgc1 clearfix">
-        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;39)</small></h1>
+        <h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;40)</small></h1>
     </div>
     <div class="clearfix mhl ptl">
         <h1 class="mvm mtn fgc1">Grid Size: Unknown</h1>
+        <div class="glyph fs1">
+            <div class="clearfix bshadow0 pbs">
+                <span class="icon-rss"></span>
+                <span class="mls"> icon-rss</span>
+            </div>
+            <fieldset class="fs0 size1of1 clearfix hidden-false">
+                <input type="text" readonly value="e927" class="unit size1of2" />
+                <input type="text" maxlength="1" readonly value="&#xe927;" class="unitRight size1of2 talign-right" />
+            </fieldset>
+            <div class="fs0 bshadow0 clearfix hidden-true">
+                <span class="unit pvs fgc1">liga: </span>
+                <input type="text" readonly value="" class="liga unitRight" />
+            </div>
+        </div>
         <div class="glyph fs1">
             <div class="clearfix bshadow0 pbs">
                 <span class="icon-star"></span>