feat: WIP tags feature

olivier3lanc · olivier3lanc · commit f9f38b8ef25e · 2025-04-01T17:05:46.000+02:00
diff --git a/_data/config.json b/_data/config.json
@@ -6,12 +6,16 @@
     "ogImageUrl": "",
     "customLinks": [
         {
-            "url": "#github",
+            "url": "#",
             "text": "GitHub"
         },
         {
-            "url": "#codepen",
-            "text": "Codepen"
+            "url": "#",
+            "text": "CodePen"
+        },
+        {
+            "url": "#",
+            "text": "LinkedIn"
         }
     ]
 }
diff --git a/_includes/simple_page.liquid b/_includes/simple_page.liquid
@@ -1,4 +1,5 @@
 {%- assign breadcrumbMarkup = '' -%}
+{%- assign pageUrlStart = page.url | slice: 0,6 -%}
 {%- assign tocMarkup = content | toc -%}
 {%- assign pageLang = language | default: config.lang -%}
 {%- assign pageTitle = title | default: tag | default: page.inputPath -%}
@@ -129,6 +130,7 @@
                 data-opened-state-class="d-flex fd-column | maxh-sidebar | bc-neutral-100 bwidth-1 bstyle-dashed bcolor-neutral-500">
                 <menu id="nav_primary_header"
                     class="d-flex fd-column | pos-sticky top-0 z-1 | m-0 p-0 {% if config.customLinks.size == 0 %}pb-7{% endif %} | ls-none bc-neutral-100 bbwidth-1 bbstyle-dashed bcolor-neutral-500"
+                    gap-5="md"
                     bradtl-3="md"
                     bradtr-3="md">
                     <li class="d-flex ai-center">
@@ -147,7 +149,7 @@
                             <input  id="searchInput"
                                     type="search"
                                     name="search"
-                                    class="pl-5 pr-5 pt-3 pb-3 | fs-3 | bc-neutral-100 brad-4 bwidth-1 bstyle-dashed bcolor-neutral-500"
+                                    class="pl-5 pr-5 pt-4 pb-4 | fs-3 | bc-neutral-100 brad-4 bwidth-1 bstyle-dashed bcolor-neutral-500"
                                     placeholder="{{ messages.searchPlaceholder[pageLang] }}"
                                     value="">
                             <div class="d-flex ai-center | pos-absolute top-0 right-0 | h-100 mr-5">
@@ -166,18 +168,30 @@
                         </form>
                     </li>
                     {% if config.customLinks.size > 0 %}
-                        <li class="d-flex ai-center gap-5 | pl-5 pr-5">
+                        <li class="d-flex ai-center fw-wrap">
                             {% for item in config.customLinks %}
                                 <a  href="{{ item.url }}"
-                                    class="d-flex ai-center gap-1 | pt-5 pb-5 | fvs-wght-400 fs-2 lh-1 tt-uppercase td-none | c-neutral-900"
+                                    class="
+                                    d-flex fg-1 {% if config.customLinks.size > 1 %}jc-center{% endif %} ai-center gap-1
+                                    pt-5 pb-5 {% if config.customLinks.size == 1 %}pl-5 pr-5{% else %}pl-2 pr-2{% endif %}
+                                    fvs-wght-600 fs-1 lsp-3 lh-1 tt-uppercase td-none
+                                    c-primary-500
+                                    btwidth-1 btstyle-dashed bcolor-neutral-300
+                                    {% if forloop.last == false %}brwidth-1 brstyle-dashed bcolor-neutral-300{% endif %}"
                                     target="_blank">
-                                    <span class="td-underline">{{ item.text }}</span>
-                                    <span class="icon-arrow-square-out"></span>
+                                    {{ item.text }}
+                                    <span class="icon-arrow-square-out c-primary-300"></span>
                                 </a>
                             {% endfor %}
                         </li>
                     {% endif %}
                 </menu>
+                {% if collections.myTags.size > 0 %}
+                    <a  href="/tags/"
+                        class="d-flex fg-1 | pos-relative | w-100 pt-4 pb-4 pl-5 pr-5 | fs-4 td-none lh-5 tws-balance fvs-wght-500 | c-neutral-900 bbwidth-1 bbstyle-dashed bcolor-neutral-500">
+                        Tags list
+                    </a>
+                {% endif %}
                 {% assign menu = collections.all | eleventyNavigation | eleventyNavigationToHtml: site.navigationOptions %}
                 {% assign currentPageHrefAttribute = '<a href="' | append: page.url | append: '"' %}
                 {% capture currentPageReplacementAttribute %}{{ currentPageHrefAttribute }} aria-current="page"{% endcapture %}
@@ -199,7 +213,7 @@
             w-100-minus-sidebar="md"
             w-100="xs,sm">
             {% block content %}
-                <header class="d-flex fd-column | pt-5 pb-7">
+                <header class="d-flex fd-column | pt-5 {% if pageUrlStart != '/tags/' %}pb-7{% endif %}">
                     {{ breadcrumbMarkup }}
                     <h1 class="mt-3 mb-0 | lsp-5 fvs-wght-700 tws-balance"
                         fs-10="md"
@@ -216,14 +230,30 @@
                         </p>
                     {% endif %}
                     {% if page.url != '/search/' %}
+                        {% if tags.size > 0 %}
+                            <nav id="page_tags"
+                                class="d-flex gap-2 fw-wrap | pl-5 pt-3 pb-3 | blwidth-1 blstyle-dashed bcolor-neutral-500">
+                                {% for tagName in tags %}
+                                    <a  href="/tags/{{ tagName }}/"
+                                        class="
+                                        d-flex ai-center gap-1
+                                        pl-2 pr-3 pt-1 pb-1
+                                        fs-2 lsp-2 td-none
+                                        bc-primary-200 bwidth-1 bstyle-solid bcolor-primary-400 brad-1 bradtl-3 bradbl-3">
+                                        <span class="icon-tag-simple"></span>
+                                        <span class="page_tag">{{ tagName }}</span>
+                                    </a>
+                                {% endfor %}
+                            </nav>
+                        {% endif %}
                         <div class="d-flex ai-center | m-0 | blwidth-1 blstyle-dashed bcolor-neutral-500">
                             <div class="pl-5 | bbwidth-1 bbstyle-dashed bcolor-neutral-500"></div>
                             <p  class="d-flex ai-center gap-2 | m-0 pr-2 | fvs-wght-400 fs-3 lsp-3 lh-3 | c-neutral-700"
                                 fs-2="xs">
                                 <span class="icon-calendar-dots fs-6"></span>
                                 <span ws-nowrap="sm,md">
                                     <span class="ws-nowrap">{{ messages.lastModified[pageLang] }}</span>
-                                    {{ date | default: site.buildDate }}
+                                    {{ page.date|dateString }}
                                 </span>
                             </p>
                             <div class="pl-5 w-100 | bbwidth-1 bbstyle-dashed bcolor-neutral-500"></div>
diff --git a/_includes/tags_list.liquid b/_includes/tags_list.liquid
@@ -0,0 +1,25 @@
+{% if collections.myTags.size > 0 %}
+    <nav>
+        <ul class="m-0 pl-5 pb-5 | lh-1 | ls-none bwidth-1 bstyle-dashed bcolor-neutral-500 btwidth-0 brwidth-0"
+            d-flex="xs,sm"
+            gap-3="xs,sm"
+            fw-wrap="xs,sm"
+            columns-3="md"
+            columns-2="sm">
+            {% for tagName in collections.myTags %}
+                <li class="d-flex" mb-2="md">
+                    <a  href="/tags/{{ tagName }}/"
+                        class="
+                        d-flex ai-center gap-2
+                        pl-2 pr-3 pt-1 pb-1
+                        fs-3 lsp-2 td-none
+                        bc-primary-200 bwidth-1 bstyle-solid bcolor-primary-400 brad-1 bradtl-3 bradbl-3
+                        {% if tag == tagName %}opa-5{% endif %}">
+                        <span class="icon-tag-simple"></span>
+                        <span>{{ tagName }}</span>
+                    </a>
+                </li>
+            {% endfor %}
+        </ul>
+    </nav>
+{% endif %}
diff --git a/assets/css/ds__defaults.css b/assets/css/ds__defaults.css
@@ -549,16 +549,23 @@ main .__search-occurrence {
     top: calc(50% - 4px);
     left: -4px;
 }
+#nav_primary li:has([href="/tags/"]) {
+    display: none;
+}
 
 /* MAIN TABLE OF CONTENT */
-#toc_main[open] > summary {
+#toc_main[open] > summary,
+#tags_list[open] > summary {
     border-bottom: none;
 }
 #toc_main[open] > summary .icon-plus-circle,
-#toc_main:not([open]) > summary .icon-minus-circle {
+#toc_main:not([open]) > summary .icon-minus-circle,
+#tags_list[open] > summary .icon-plus-circle,
+#tags_list:not([open]) > summary .icon-minus-circle {
     display: none;
 }
-#toc_main li {
+#toc_main li,
+#tags_list li {
     break-inside: avoid;
 }
 
diff --git a/assets/js/ui.js b/assets/js/ui.js
@@ -261,7 +261,7 @@ const libdocUi = {
                 if (location.pathname == '/search/') {
                     document.title += ` “${textQuery}“`;
                     history.replaceState(null, '', `?search=${textQuery}`);
-                } else {
+                } else if (location.pathname.indexOf("/tags/") !== 0) {
                     libdocUi.searchContent(textQuery);
                 }
                 libdocUi.el.searchInputs.forEach(function(elInput) {
@@ -658,7 +658,7 @@ const libdocUi = {
             libdocUi._so.els = [];
             const queryLC = query.toLowerCase();
             // Every child of main excepting pre, aside and header
-            document.querySelectorAll('main>*:not(pre):not(aside):not(header), main>*:not(pre):not(aside):not(header) *').forEach(function(el) {
+            document.querySelectorAll('main>*:not(pre):not(aside):not(header), main>*:not(pre):not(aside):not(header) *, .page_tag').forEach(function(el) {
                 const textContentWoChildren = libdocUi.getTextContentWithoutChildNodes(el);
                 if (textContentWoChildren.toLowerCase().includes(queryLC)) {
                     libdocUi._so.els.push(el);
diff --git a/content/examples/index.md b/content/examples/index.md
@@ -2,11 +2,22 @@
 # title: Mon titre
 description: Usage examples of Eleventy LibDoc
 layout: simple_page.liquid
-lang: fr
-date: "2020-01-01"
 tags:
-    - tag2
-    - tag1
+    - cool
+    - first
+    - sqdkl
+    - qskdj
+    - zeiorz zr
+    - cToggle
+    - met
+    - en
+    - relation
+    - des
+    - éléments
+    - de à
+    - DOM
+    - déclencheurs
+
 eleventyNavigation:
   key: Documentation examples
   parent: Sandbox from file
diff --git a/content/index.md b/content/index.md
@@ -3,9 +3,7 @@ title: Eleventy LibDoc
 description: Just and Eleventy SSG starter project to create documentation website
 layout: simple_page.liquid
 permalink: index.html
-tags:
-    - tag1
-    - tag2
+
 ---
 {{ site.name | json }}
 ## Headers
diff --git a/content/samples/bricss.md b/content/samples/bricss.md
@@ -1,8 +1,7 @@
 ---
 # title: Mon titre
 layout: simple_page.liquid
-tags: 
-  - cool
+tags: DOM
 eleventyNavigation:
   key: BRiCSS Documentation
   parent: Samples
diff --git a/content/samples/front-matter.md b/content/samples/front-matter.md
@@ -1,9 +1,6 @@
 ---
 # title: Mon titre
 layout: simple_page.liquid
-tags:
-    - tag2
-    - tag1
 eleventyNavigation:
   key: Front Matter
   parent: Samples
diff --git a/content/samples/frontend-links-2.md b/content/samples/frontend-links-2.md
@@ -2,9 +2,6 @@
 # title: Mon titre
 description: A second copy of my own bookmarks, curated list of useful front-end tools, libraries, etc.
 layout: simple_page.liquid
-tags:
-    - tag2
-    - tag1
 eleventyNavigation:
   key: Frontend links 2
   parent: Samples
diff --git a/content/samples/frontend-links.md b/content/samples/frontend-links.md
@@ -2,9 +2,6 @@
 # title: Mon titre
 description: A copy of my own bookmarks, curated list of useful front-end tools, libraries, etc.
 layout: simple_page.liquid
-tags:
-    - tag2
-    - tag1
 eleventyNavigation:
   key: Frontend links
   parent: Samples
diff --git a/content/samples/sandbox-file-based.md b/content/samples/sandbox-file-based.md
@@ -5,7 +5,6 @@ layout: simple_page.liquid
 eleventyNavigation:
     key: Sandbox from file
     parent: Samples
-tags: first
 ---
 ```liquid
 {% raw %}{% render 'sandbox', path: '/path/to/file/index.html' %}{% endraw %}
diff --git a/content/samples/sandbox-srcdoc-based.md b/content/samples/sandbox-srcdoc-based.md
@@ -5,7 +5,6 @@ layout: simple_page.liquid
 eleventyNavigation:
     key: Sandbox from srcdoc
     parent: Samples
-tags: first
 ---
 ```liquid
 {% raw %}{% sandbox %}
diff --git a/core/search.html b/core/search.html
@@ -13,7 +13,7 @@
     <input  id="searchInputAlt"
             type="search"
             name="search"
-            class="maxw-100 pl-5 pr-5 pt-3 pb-3 | fs-3 | bc-neutral-100 brad-4 bwidth-1 bstyle-dashed bcolor-neutral-500"
+            class="maxw-100 pl-5 pr-5 pt-4 pb-4 | fs-3 | bc-neutral-100 brad-4 bwidth-1 bstyle-dashed bcolor-neutral-500"
             placeholder="{{ messages.searchPlaceholder[pageLang] }}"
             value="">
     <div class="d-flex ai-center | pos-absolute top-0 right-0 | h-100 mr-5">
diff --git a/core/search_index.liquid b/core/search_index.liquid
@@ -14,11 +14,23 @@ eleventyExcludeFromCollections: true
     {% endif %}
     {% if collections.all.size > 0 %}
         {% for post in collections.all %}
-            {
-                "url": "{{ post.url }}",
-                "title": "{% if post.data.eleventyNavigation.key %}{{ post.data.eleventyNavigation.key }}{% else %}{{ post.data.title | default: post.inputPath }}{% endif %}",
-                "content": "{{ post.data.description | strip_newlines | strip_html }}{{ post.content | strip_newlines | strip_html }}"
-            }{% if forloop.last == false %},{% endif %}
+            {%- assign pageUrlStart = post.url | slice: 0,6 -%}
+            {% if pageUrlStart != '/tags/' %}
+                {
+                    "url": "{{ post.url }}",
+                    "title": "{% if post.data.eleventyNavigation.key %}{{ post.data.eleventyNavigation.key }}{% else %}{{ post.data.title | default: post.inputPath }}{% endif %}",
+                    "content": "{{ post.data.description | strip_newlines | strip_html }} {{ post.data.tags | join: ' ' }} {{ post.content | strip_newlines | strip_html }}"
+                }{% if forloop.last == false %},{% endif %}
+            {% endif %}
         {% endfor %}
+        {% if collections.myTags.size > 0 %},
+            {% for tagName in collections.myTags %}
+                {
+                    "url": "/tags/{{ tagName }}",
+                    "title": "Tag",
+                    "content": " {{ tagName }} "
+                }{% if forloop.last == false %},{% endif %}
+            {% endfor %}
+        {% endif %}
     {% endif %}
 ]
diff --git a/core/tag.liquid b/core/tag.liquid
diff --git a/core/tags.liquid b/core/tags.liquid

Original file line number	Diff line number	Diff line change
`@@ -6,12 +6,16 @@`
`6`	`6`	`"ogImageUrl": "",`
`7`	`7`	`"customLinks": [`
`8`	`8`	`{`
`9`		`- "url": "#github",`
	`9`	`+ "url": "#",`
`10`	`10`	`"text": "GitHub"`
`11`	`11`	`},`
`12`	`12`	`{`
`13`		`- "url": "#codepen",`
`14`		`- "text": "Codepen"`
	`13`	`+ "url": "#",`
	`14`	`+ "text": "CodePen"`
	`15`	`+ },`
	`16`	`+ {`
	`17`	`+ "url": "#",`
	`18`	`+ "text": "LinkedIn"`
`15`	`19`	`}`
`16`	`20`	`]`
`17`	`21`	`}`