feat: add single taxonomy for tags

Signed-off-by: Henrik Gerdes <henrik.gerdes@ares-consulting.de>
hegerdes · Aug 28, 2024 · 7f6e86f · 7f6e86f
1 parent 913ff51
commit 7f6e86f
Show file tree

Hide file tree

Showing 11 changed files with 182 additions and 23 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -1,4 +1,4 @@
-name: lint and test build
+name: Lint and Test build
 
 on:
   push:
@@ -25,8 +25,5 @@ jobs:
       - name: Run linter 👀
         run: npm run lint --if-present
 
-      - name: Run Build 🛠️
-        run: npm run lint --if-present
-
       - name: Run Build 🛠️
         run: npm run generate
diff --git a/sass/_404.scss b/sass/_404.scss
@@ -4,8 +4,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background-color: #282c34;
-    color: #61dafb;
+    background-color: $sec;
+    color: $blue-light;
     font-family: "Courier New", Courier, monospace;
 }
 
@@ -14,15 +14,15 @@
     text-align: center;
     max-width: 600px;
     padding: 20px;
-    background: #20232a;
+    background: $main-404;
     border-radius: 10px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+    box-shadow: 0 4px 8px $black
 }
 
 .error-code {
     font-size: 8rem;
     font-weight: 700;
-    color: #ff5555;
+    color: $red;
 }
 
 .error-message {
@@ -32,32 +32,33 @@
 
 .error-description {
     margin-bottom: 30px;
-    color: #dcdcdc;
+    color: $grey;
 }
 
 .error-emoji {
     font-size: 4rem;
-    margin-bottom: 20px;
+    margin-bottom: 1rem;
 }
 
 .code-snippet {
-    background-color: #1c1e22;
-    padding: 15px;
+    background-color: $main;
+    padding: .5rem;
     border-radius: 5px;
     text-align: left;
-    color: #abb2bf;
+    color: $grey;
 }
 
 .btn-home {
-    margin-top: 20px;
-    background-color: #61dafb;
-    color: #282c34;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    background-color: $blue;
+    color: $main;
+    font-weight: bold;
     border: none;
     padding: 10px 20px;
     border-radius: 5px;
-    transition: background-color 0.3s ease;
 }
 
 .btn-home:hover {
-    background-color: #21a1f1;
+    background-color: $blue-dark;
 }
diff --git a/sass/_navbar.scss b/sass/_navbar.scss
@@ -24,7 +24,7 @@
     button {
         width: 40px;
         height: 40px;
-        background-color: #007BFF;
+        background-color: $blue;
         border: none;
         border-radius: 50%;
         justify-content: center;

diff --git a/sass/_taxonomies.scss b/sass/_taxonomies.scss
@@ -0,0 +1,48 @@
+.tag-card {
+    max-width: $lg;
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+    background-color: $grey-light !important;
+
+    a,
+    img {
+        max-width: 250px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    a {
+        text-decoration: none;
+
+    }
+
+    h1,
+    h2 {
+        padding: 0;
+    }
+}
+
+
+@media (max-width: $lg) {
+
+    .tag-card {
+        margin-right: 2rem !important;
+        margin-left: 2rem !important;
+        padding-top: 2rem !important;
+        padding-bottom: 2rem !important;
+        padding-left: 1rem !important;
+        padding-right: 1rem !important;
+
+        h1,
+        h2 {
+            font-size: larger;
+        }
+
+        img {
+            width: 150px;
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+
+}
diff --git a/sass/_vars.scss b/sass/_vars.scss
@@ -8,7 +8,15 @@ $xxl: 1400px;
 $cut: $md;
 
 // Color
+$black: #000;
+$red: #ff5555;
+$blue: #007BFF;
+$grey-light: #e7e5e591;
+$grey: #abb2bf;
+$blue-light: #61dafb;
+$blue-dark: #3c51be;
 $main: #1a222c;
-$sec: #4B5664;
+$main-404: #20232a;
+$sec: #282c34;
 $thd: #555;
 $purple: #54516A;
diff --git a/sass/main.scss b/sass/main.scss
@@ -17,6 +17,7 @@
 @import 'base';
 @import 'code';
 @import '404';
+@import 'taxonomies';
 @import 'blog';
 @import 'animation';
 @import 'header';

diff --git a/templates/404.html b/templates/404.html
@@ -17,8 +17,7 @@
     throw new Error("Page not found!");
 } else {
     <a href="/">return toHomepage();</a>
-}
-        </pre>
+}</pre>
         </div>
         <a href="/" class="btn btn-home">Return to Homepage</a>
     </div>

diff --git a/templates/categories/list.html b/templates/categories/list.html
diff --git a/templates/categories/single.html b/templates/categories/single.html
diff --git a/templates/tags/list.html b/templates/tags/list.html
@@ -0,0 +1,29 @@
+{% extends "base.html" %}
+
+{% import "macros/shared.html" as shared %}
+{% import "macros/navbar.html" as nav %}
+{% import "macros/footer.html" as foot %}
+
+
+{% block body %}
+
+<body>
+    {{ nav::navbar() }}
+
+    {% block content %}
+    <div class="flex items-center flex-col mt-10 px-4">
+        <h1 class="text-2xl text-bold">
+            Tags
+        </h1>
+        <p class="text-bold text-xl mt-4">{{ terms | length }} tags</p>
+        <div class="flex flex-wrap sm:flex-row flex-col sm:gap-x-7 gap-y-5 mt-6">
+            {% for tag in terms %}
+            <a href="{{ tag.permalink | safe }}" class="flex items-center space-x-2">
+                <span class="text-bold">{{tag.name}} <sup>{{ tag.pages | length }}</sup></span>
+            </a>
+            {% endfor %}
+        </div>
+        {% endblock content %}
+        {{ foot::footer() }}
+</body>
+{% endblock body %}
diff --git a/templates/tags/single.html b/templates/tags/single.html
@@ -0,0 +1,76 @@
+{% extends "base.html" %}
+
+{% import "macros/shared.html" as shared %}
+{% import "macros/navbar.html" as nav %}
+{% import "macros/footer.html" as foot %}
+
+
+{% block body %}
+
+<body>
+    {{ nav::navbar() }}
+
+    {% block content %}
+    <div class="container">
+        <h1 class="text-center">
+            Tag : {{ term.name }}
+        </h1>
+        <div class=" flex-col">
+            {% set pages = term.pages %}
+
+            {% for page in pages %}
+            <div class="card border border-4 border-gray-200 p-5 my-4 mx-auto tag-card text-dark bg-light">
+                <div class="row">
+                    <div class="col-md-4 d-flex align-items-center ">
+                        <a href="{{ page.permalink }}">
+                            <img src='{{ get_url(path=page.extra.pic | default(value="/img/image-not-found-fallback-2.jpeg") | safe) }}'
+                                class="img-fluid rounded-start" alt="...">
+                        </a>
+                    </div>
+                    <div class="col-md-8">
+                        <div class="card-body">
+                            <h2><a href='{{ page.permalink }}'>{{ page.title }}</a></h2>
+                            <p>{{ page.description }}</p>
+                            <!-- Read time and word count -->
+                            <div class="post-info">
+                                <p style="text-align: right;">
+                                    <i class="fas fa-pen"></i> {% if page.date %}Published: {{ page.date |
+                                    date(format='%B %d, %Y')
+                                    }} {%endif %}<br>
+                                    <i class="fab fa-readme"></i> {{ page.reading_time }} minute read
+                                </p>
+                            </div>
+
+
+                            <div>
+                                <a href="{{ page.permalink }}" class="btn btn-primary">Read More</a>
+                            </div>
+
+                            <!-- Categories and Tags -->
+                            <div>
+                                {% if page.taxonomies.tags %}
+                                <p>
+                                    Tags:
+                                    {% for tag in page.taxonomies.tags %}
+                                    <a href="{{ get_taxonomy_url(kind='tags', name=tag)}}">
+                                        <button type="button" class="btn rounded-pill btn-sm my-1 btn-primary">
+                                            {{ tag }} <span class="badge text-bg-secondary"></span>
+                                        </button>
+                                    </a>
+                                    {% endfor %}
+                                </p>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </div>
+
+    {% endblock content %}
+    {{ foot::footer() }}
+</body>
+
+{% endblock body %}