Add pagefond

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
@@ -173,8 +188,11 @@ main,
 
 @media screen and (max-width:50em) {
 
-  header,
-  main {
+  header {
+    grid-column-end: 4;
+  }
+
+  main, #search {
     grid-column-end: 7
   }
 }

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" %}

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>

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>

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" %}

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>

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 %}

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>
-