tagify styling

gawa/blog/data/articles/1.toml

@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""

gawa/blog/data/articles/10.toml

@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""

gawa/blog/data/articles/2.toml

@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""

gawa/blog/data/articles/3.toml

@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""

gawa/blog/data/articles/4.toml

@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""

gawa/blog/data/articles/5.toml

@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""

gawa/blog/data/articles/6.toml

@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""

gawa/blog/data/articles/7.toml

@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""

gawa/blog/data/articles/8.toml

@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""

gawa/blog/data/articles/9.toml

@@ -0,0 +1,23 @@
+date = "2023-10-02 09:59:00.127936"
+update = "2023-10-02 10:59:00.127936"
+keywords = ["bash"]
+category = "Guide"
+featured = true
+public = true
+thumbnail = "img/thumbnails/bash.png"
+
+[lang.en]
+title = "bash arrays"
+subtitle = "how to work with bash arrays"
+desc = """
+bash scripting can be kind of weird.
+This guide explains how they work without any fuzz.
+"""
+
+[lang.de]
+title = "Bash Arrays"
+subtitle = "Wie man mit Bash Arrays arbeitet"
+desc = """
+Bash Skripte sind manchmal etwas seltsam.
+Hier wird erklärt, wie man mit Bash Arrays arbeitet.
+"""

gawa/blog/data/articles/de-bash-arrays.md

@@ -15,6 +15,9 @@ markdown rendering.
 | yes    | super     | important |
 | really | really    | really    |
 
+cool math: $$1+2 \le \frac{1}{2}$$
+cool math: $1+2 \le \frac{1}{2}$
+
 ## Wait, but why?
 
 Writing about Bash is challenging because it's remarkably easy for an article

gawa/blog/data/articles/en-bash-arrays.md

@@ -14,6 +14,9 @@ markdown rendering.
 | yes    | super     | important |
 | really | really    | really    |
 
+cool math: $$1+2 \le \frac{1}{2}$$
+cool math: $1+2 \le \frac{1}{2}$
+
 ## Wait, but why?
 
 Writing about Bash is challenging because it's remarkably easy for an article

gawa/blog/templates/blog/blogpost.html

@@ -11,12 +11,12 @@
 {% block nav %}
     {% include 'nav.html' %}
 {% endblock nav %}
-{% block headscripts %}
+{% block head %}
     <script type="text/javascript"
             id="MathJax-script"
             async
             src="https://cdn.jsdelivr.net/npm/mathjax@3.0.0/es5/tex-mml-chtml.js"></script>
-{% endblock headscripts %}
+{% endblock head %}
 {% block main %}
     <div class="container-xl">
         <article>

gawa/blog/templates/blog/browse.html

@@ -8,12 +8,14 @@
 {% block title %}
     {% translate "cscherr.de" %} - {% translate "Blog" %}
 {% endblock title %}
+{% block blockname %}
+{% endblock blockname %}
 {% block nav %}
     {% include 'nav.html' %}
 {% endblock nav %}
 {% block main %}
     <div class="container">
-        <div class="row">
+        <div class="row pb-5">
             <div class="col">
                 <!-- <div class="position-absolute top-50 start-50 translate-middle"> -->
                 <h1 class="">
@@ -22,19 +24,47 @@
                 </h1>
                 <!-- </div> -->
             </div>
-            <div class="col position-relative">
+            <div class="col">
-                <div class="position-absolute top-50 start-50 translate-middle">
+                <form class="d-flex" role="search" action="" method="GET">
-                    <form class="d-flex" role="search" action="" method="GET">
+                    <div class="container overflow-hidden ">
-                        <input type="search"
+                        <div class="row gy-5">
-                               name="search"
+                            <div class="col position-relative">
-                               class="form-control me-2"
+                                <div class="row">
-                               aria-label="Search"
+                                    <div class="col">
-                               placeholder="{% trans "Search" %}"
+                                        <input type="search"
-                               required=""
+                                               name="search"
-                               id="id_search">
+                                               class="form-control me-2 flex-fill"
-                        <button class="btn bg-primary fw-bold" type="submit">{% trans "Filter" %}</button>
+                                               aria-label="Search"
-                    </form>
+                                               placeholder="{% trans "Search" %}"
-                </div>
+                                               required=""
+                                               id="id_search">
+                                        <div class="col position-relative mt-2">
+                                            <button class="btn bg-primary fw-bold position-absolute top-50 end-0" type="submit">{% trans "Filter" %}</button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col">
+                                <input class="tagify"
+                                       name="keywords"
+                                       placeholder="{% trans "Keywords" %}"
+                                       value='tag1, tag2 autofocus'>
+                            </div>
+                            <!-- <div class="col"> -->
+                            <!--     <input class="tagify" -->
+                            <!--            name="category" -->
+                            <!--            placeholder="{% trans "Category" %}" -->
+                            <!--            value='tag1, tag2 autofocus'> -->
+                            <!-- </div> -->
+                        </div>
+                    </div>
+                    <script>
+                    // The DOM element you wish to replace with Tagify
+                    var input = document.querySelector('input[class=tagify]');
+                    // initialize Tagify on the above input node reference
+                    new Tagify(input)
+                    </script>
+                </form>
             </div>
         </div>
         <div class="row row-cols-6 gap-1">

gawa/start/templates/base.html

@@ -5,14 +5,31 @@
 {% get_current_language as LANGUAGE_CODE %}
 <html lang="{{ LANGUAGE_CODE }}">
     <head>
-        <title>{% block title %}{% endblock title %}</title>
+        <title>
+            {% block title %}
+            {% endblock title %}
+        </title>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         {% compress css %}
-        <link type="text/x-scss" href="/static/bs5/scss/bootstrap.scss" rel="stylesheet" media="screen">
+            <link type="text/x-scss"
-        <link rel="stylesheet" href="/static/bsi1/font/bootstrap-icons.min.css">
+                  href="/static/bs5/scss/bootstrap.scss"
-        <link rel="stylesheet" href="/static/codehighlight.css">
+                  rel="stylesheet"
-        <link rel="stylesheet" href="/static/custom.css">
+                  media="screen">
+            <link rel="stylesheet" href="/static/bsi1/font/bootstrap-icons.min.css">
+            <link rel="stylesheet" href="/static/codehighlight.css">
+            <link rel="stylesheet" href="/static/custom.css">
+            {% block head_compress_css %}
+            {% endblock head_compress_css %}
+            <link href="/static/tagify/dist/tagify.css"
+                  rel="stylesheet"
+                  type="text/css" />
+        {% endcompress %}
+        {% compress js %}
+            <script src="/static/tagify/dist/tagify.min.js"></script>
+            <script src="/static/tagify/dist/tagify.polyfills.min.js"></script>
+            {% block head_compress_js %}
+            {% endblock head_compress_js %}
         {% endcompress %}
         {% block headscripts %}
         {% endblock headscripts %}
@@ -22,7 +39,8 @@
             {% include 'nav.html' %}
         {% endblock nav %}
         <main class="m-5" style="min-height: 80vh;">
-            {% block main %}{% endblock main %}
+            {% block main %}
+            {% endblock main %}
         </main>
         <footer class="text-center text-lg-start bg-dark-subtle text-muted">
             <div class="container overflow-hidden text-center">
@@ -51,45 +69,47 @@
                         <div class="col-md-3 col-lg-4 col-xl-3 mx-auto mb-4">
                             <h6 class="text-uppercase fw-bold mb-4">Information</h6>
                             <p>
-                            {% blocktranslate %}
+                                {% blocktranslate %}
-                            Ich habe diese Website selbst programmiert und gehostet. 
+                            Ich habe diese Website selbst programmiert und gehostet.
-                            Falls Sie einen Fehler belibiger Art finden, würde ich mich freuen, 
+                            Falls Sie einen Fehler belibiger Art finden, würde ich mich freuen,
                             wenn Sie mich darüber benachrichtigen.
                             <br><br>
-                            Die Suche nach Schwachstellen und Fehlern auf dieser Website ist für 
+                            Die Suche nach Schwachstellen und Fehlern auf dieser Website ist für
                             diesen Zweck ausdrücklich erlaubt.
                             {% endblocktranslate %}
-                            <br>
+                                <br>
-                            <a href="mailto:admin@cscherr.de">admin@cscherr.de</a>
+                                <a href="mailto:admin@cscherr.de">admin@cscherr.de</a>
                             </p>
                         </div>
                         <div class="col-md-2 col-lg-2 col-xl-2 mx-auto mb-4">
-                            <h6 class="text-uppercase fw-bold mb-4">
+                            <h6 class="text-uppercase fw-bold mb-4">Links</h6>
-                                Links
-                            </h6>
                             <p>
-                            <a href="{% url 'start:legal' %}" class="text-reset">{% translate "Legal Info" %}</a>
+                                <a href="{% url 'start:legal' %}" class="text-reset">{% translate "Legal Info" %}</a>
                             </p>
                             <p>
-                            <a href="https://github.com/plexsheep" class="text-reset">GitHub</a>
+                                <a href="https://github.com/plexsheep" class="text-reset">GitHub</a>
                             </p>
                             <p>
-                            <a href="https://git.cscherr.de" class="text-reset">Selfhosted Git</a>
+                                <a href="https://git.cscherr.de" class="text-reset">Selfhosted Git</a>
                             </p>
                             <p>
-                            <a href="https://git.cscherr.de/PlexSheep/gawa" class="text-reset">{% trans "Quellcode dieser Website" %}</a>
+                                <a href="https://git.cscherr.de/PlexSheep/gawa" class="text-reset">{% trans "Quellcode dieser Website" %}</a>
                             </p>
                         </div>
                         <div class="col-md-4 col-lg-3 col-xl-3 mx-auto mb-md-0 mb-4">
                             <h6 class="text-uppercase fw-bold mb-4">{% translate "Contact" %}</h6>
                             <p>Christoph Johannes Scherr</p>
-                            <p><i class="fas fa-home me-3 text-secondary">
-                                Leininger Straße 20,<br>
-                                Maxdorf 67133,<br>
-                                {% translate "Deutschland" %}
-                            </i></p>
                             <p>
-                            <a href="mailto:contact@cscherr.de">contact@cscherr.de</a>
+                                <i class="fas fa-home me-3 text-secondary">
+                                    Leininger Straße 20,
+                                    <br>
+                                    Maxdorf 67133,
+                                    <br>
+                                    {% translate "Deutschland" %}
+                                </i>
+                            </p>
+                            <p>
+                                <a href="mailto:contact@cscherr.de">contact@cscherr.de</a>
                             </p>
                         </div>
                     </div>
@@ -102,8 +122,8 @@
             </div>
         </footer>
         {% compress js %}
-        <script src="/static/custom.js"></script>
+            <script src="/static/custom.js"></script>
-        <script src="/static/bs5/dist/js/bootstrap.bundle.min.js"></script>
+            <script src="/static/bs5/dist/js/bootstrap.bundle.min.js"></script>
         {% endcompress %}
     </body>
 </html>

gawa/static/custom.css

@@ -2,6 +2,7 @@
 .codehilite {
   padding: 12px;
 }
+
 .linenodiv {
   padding-right: 4px;
   margin-right: 12px;
@@ -16,5 +17,17 @@ main * {
 	*
 	* The header is typically 59.5px high.
 	*/
-	scroll-margin-top: 60px;
+  scroll-margin-top: 60px;
+}
+
+.tagify {
+  --tags-border-color: var(--bs-light-border-subtle);
+  --placeholder-color: var(--bs-body-color) !important;
+  --placeholder-color-focus: var(--bs-primary) !important;
+  --tag-bg: var(--bs-primary) !important;
+  --tags-border-color: var(--bs-border-color) !important;
+  --tag-border-radius: 0.375rem !important;
+  --tag-text-color: var( 	--bs-body-color) !important;
+  /* border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important; */
+  border-radius: 0.375rem;
 }