From 91235f35cea9a857ef49a3a26e979eccce91c362 Mon Sep 17 00:00:00 2001
From: Digital Studium <digitalstudium001@gmail.com>
Date: Tue, 25 Jul 2023 10:45:30 +0300
Subject: [PATCH] Add pagefond

---
 static/css/style.css                  | 26 ++++++++++++++++++++++----
 templates/base.j2                     |  3 +++
 templates/components/all_languages.j2 |  7 +++----
 templates/components/head.j2          |  4 ++--
 templates/components/header.j2        |  2 +-
 templates/components/post_summary.j2  |  2 +-
 templates/components/search.j2        | 16 ++++++++++++++++
 templates/components/sidebar.j2       |  2 +-
 templates/components/single.j2        |  9 +++++----
 9 files changed, 54 insertions(+), 17 deletions(-)
 create mode 100644 templates/components/search.j2

diff --git a/static/css/style.css b/static/css/style.css
index 03b14d4..4d12c26 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -70,7 +70,9 @@ button {
   width: 30%;
 }
 
-
+p.lang {
+  margin: 0;
+}
 
 /* Блок для правильной вёрстки аудио/видео начало */
 /* Применяем max-width для замещаемых элементов и контролов формы. */
@@ -126,6 +128,11 @@ body {
   grid-template-columns: repeat(6, 1fr);
 }
 
+header {
+  display: grid;
+  align-content: space-between;
+}
+
 header,
 footer,
 main {
@@ -138,6 +145,14 @@ main {
   justify-self: end;
 }
 
+#search {
+  grid-column-start: 4;
+  grid-column-end: 5;
+  justify-self: end;
+  align-self: end;
+  grid-row-end: 2
+}
+
 footer,
 main {
   grid-column-end: 5
@@ -168,13 +183,16 @@ main,
 
   header {
     grid-column-end: 3
-  }  
+  }
 }
 
 @media screen and (max-width:50em) {
 
-  header,
-  main {
+  header {
+    grid-column-end: 4;
+  }
+
+  main, #search {
     grid-column-end: 7
   }
 }
\ No newline at end of file
diff --git a/templates/base.j2 b/templates/base.j2
index 2dda296..afc2b59 100644
--- a/templates/base.j2
+++ b/templates/base.j2
@@ -23,6 +23,9 @@
         {% endif %}
     </main>
     {% include "components/social.j2" %}
+    {% if config.pagefind %}
+    {% include "components/search.j2" %}
+    {% endif %}
     {% include "components/sidebar.j2" %}
     {% include "components/footer.j2" %}
     {% include "components/script.j2" %}
diff --git a/templates/components/all_languages.j2 b/templates/components/all_languages.j2
index 9467ac7..07c1e22 100644
--- a/templates/components/all_languages.j2
+++ b/templates/components/all_languages.j2
@@ -1,13 +1,12 @@
+<p class="lang">
 {% if home %}
-<p>&#127760;
+&#127760;
     {% for key, value in config.languages.items() %}
     {% if key != language %}
     <a href="/{{ key }}">{{ value.language_name }}</a>
     {% endif %}
     {% endfor %}
-</p>
 {% else %}
-<p>
     &#127760;
     {% for key, value in config.languages.items() %}
     {% if key != language %}
@@ -15,5 +14,5 @@
         value.language_name }}</a>
     {% endif %}
     {% endfor %}
-</p>
 {% endif %}
+</p>
diff --git a/templates/components/head.j2 b/templates/components/head.j2
index e6999de..97abd57 100644
--- a/templates/components/head.j2
+++ b/templates/components/head.j2
@@ -4,10 +4,10 @@
     <title>{{ title }}</title>
     <meta name="title" content="{{ title }}" />
     <meta name="description" content="{{ description | striptags }}" />
-    <link href="/css/style.css" rel="stylesheet">
+    <link href="/css/style.css" rel="stylesheet"> 
     {% for include in config['css_includes'] %}
     <link href="/css/{{ include }}" rel="stylesheet">
-    {% endfor %}    
+    {% endfor %}
     {% if config.custom_css %}
     <link href="/css/{{ config.custom_css }}" rel="stylesheet">
     {% endif %}
diff --git a/templates/components/header.j2 b/templates/components/header.j2
index 03316ce..bfc4ab1 100644
--- a/templates/components/header.j2
+++ b/templates/components/header.j2
@@ -1,5 +1,5 @@
 <header>
-    <a href="/{{ language }}">
+    <a href="/{{ language }}/">
         <img src="/logo.svg" alt="{{ config['languages'][language]['title'] }}" />
         <h3>{{ config['languages'][language]['description'] }}</h3>
     </a>
diff --git a/templates/components/post_summary.j2 b/templates/components/post_summary.j2
index acf873d..f4d408f 100644
--- a/templates/components/post_summary.j2
+++ b/templates/components/post_summary.j2
@@ -1,6 +1,6 @@
 <article>
     <h2>
-        <a class="index-title" href="/{{ language }}{{ url }}" rel="permalink" title="{{ post.title }}">{{ post.title }}</a>
+        <a class="index-title" href="/{{ language }}{{ url }}/" rel="permalink" title="{{ post.title }}">{{ post.title }}</a>
     </h2>
     {% include "components/author_and_date.j2" %}
     {% include "components/image.j2" %}
diff --git a/templates/components/search.j2 b/templates/components/search.j2
new file mode 100644
index 0000000..c5d799a
--- /dev/null
+++ b/templates/components/search.j2
@@ -0,0 +1,16 @@
+<div id="search"></div>
+<link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
+<script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
+<script>
+    window.addEventListener('DOMContentLoaded', (event) => {
+        new PagefindUI(
+            {
+                element: "#search",
+                translations: {
+                    "placeholder": "",
+                    "clear_search": ""
+                }
+            }
+        );
+    });
+</script>
\ No newline at end of file
diff --git a/templates/components/sidebar.j2 b/templates/components/sidebar.j2
index 36b38b6..3712eb3 100644
--- a/templates/components/sidebar.j2
+++ b/templates/components/sidebar.j2
@@ -3,7 +3,7 @@
         {% for section, urls in posts[language].items() %}
         {% if section != "/" %}
         <p>
-            <a href="/{{ language}}/{{ section }}">{{ translate(section, language) }} ({{ urls | length }})</a>
+            <a href="/{{ language}}/{{ section }}/">{{ translate(section, language) }} ({{ urls | length }})</a>
         </p>
         {% endif %}
         {% endfor %}
diff --git a/templates/components/single.j2 b/templates/components/single.j2
index 4bae3ad..61cdb72 100644
--- a/templates/components/single.j2
+++ b/templates/components/single.j2
@@ -1,7 +1,8 @@
-<article>
-    <h1>{{ post.title }}</h1>
+<article data-pagefind-body>
+    <header>
+        <h1>{{ post.title }}</h1>
+    </header>
     {% include "components/author_and_date.j2" %}
     {% include "components/image.j2" %}
     {{ post.content }}
-</article>
-
+</article>
\ No newline at end of file