feat: dynamic translation cards

feat: implemented code to use with jinja
2025-04-16 15:57:17 +02:00 · 2025-04-16 15:56:34 +02:00 · 2025-04-16 15:45:06 +02:00
4 changed files with 120 additions and 138 deletions
--- a/src/templates/article.html
+++ b/src/templates/article.html
@ -1,9 +1,9 @@
 <!DOCTYPE html>
-<html lang="{article_language_code}">
+<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{article_language_flag} {article_title}</title>
+    <title>{{meta.slug}}</title>
    <link rel="stylesheet" href="/static/bulma.min.css" />
  </head>
  <body>
@ -14,21 +14,40 @@
      aria-label="main navigation"
    >
      <div class="navbar-brand">
-        <a class="navbar-item" href="{article_overview_url}">
-          <strong>{article_language_flag} {article_title}</strong>
-          <time datetime="{article_datetime_iso}">{article_datetime}</time>
+        <a class="navbar-item" href="#">
+          <strong>Static Translated Site Generator</strong>
        </a>
      </div>
    </nav>

-    <!-- Main Content -->
    <section class="section">
-      <div class="content">
-        {article_content}
+      <div class="container content">
+        <div class="column is-half is-offset-one-quarter">
+          <h1>Translations</h1>
+        </div>
+        <div class="column is-half is-offset-one-quarter">
+          {% for t in translations %}
+            <div class="card mb-4" lang="{[t.language.code]}">
+              <a href="{{t.url}}" hreflang="{[t.language.code]}" class="card mb-4" style="color: inherit; text-decoration: none;">
+                  <div class="card-content">
+                      <p class="title">{{t.language.flag}} {{t.title}} </p>
+                      <p class="content">
+                          {{t.preview}}
+                          <br />
+                          <time datetime="{{meta.iso_date}}">{{meta.date}}</time>
+                      </p>
+                  </div>
+              </a>
+          </div>
+        {% endfor %}
+        </div>
+      </div>

-        <h1>Further Reading</h1>
-
-        <div class="row">
+      <div class="container content">
+        <div class="column is-half is-offset-one-quarter">
+          <h1>Child Articles</h1>
+        </div>
+        <div class="column is-half is-offset-one-quarter">
          {article_children_cards}
        </div>
      </div>
@ -41,4 +60,23 @@
      </div>
    </footer>
  </body>
+
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+        const userLang = navigator.language || navigator.userLanguage;
+
+        // Normalize and check if the language is not English or German
+        if (!["en", "de", "de-DE"].includes(userLang)) {
+            // Try to find a matching card by language attribute
+            const cardToMove =
+                document.querySelector(`.card[lang^="${userLang.replace("_", "-").toLowerCase()}"]`) ||
+                document.querySelector(`.card[lang^="${userLang.split("-")[0]}"]`);
+
+            if (cardToMove) {
+                const container = cardToMove.parentNode;
+                container.insertBefore(cardToMove, container.firstChild);
+            }
+        }
+    });
+  </script>
 </html>
--- a/src/templates/article_translation.html
+++ b/src/templates/article_translation.html
@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="{article_language_code}">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{article_language_flag} {article_title}</title>
+    <link rel="stylesheet" href="/static/bulma.min.css" />
+  </head>
+  <body>
+    <!-- Header (Navbar) -->
+    <nav
+      class="navbar is-primary"
+      role="navigation"
+      aria-label="main navigation"
+    >
+      <div class="navbar-brand">
+        <a class="navbar-item" href="{article_overview_url}">
+          <strong>{article_language_flag} {article_title}</strong>
+          <time datetime="{article_datetime_iso}">{article_datetime}</time>
+        </a>
+      </div>
+    </nav>
+
+    <!-- Main Content -->
+    <section class="section">
+      <div class="content">
+        {article_content}
+
+        <h1>Further Reading</h1>
+
+        <div class="row">
+          {article_children_cards}
+        </div>
+      </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+      <div class="content has-text-centered">
+        <p><strong>STSG</strong> by Hazel. &copy; 2025</p>
+      </div>
+    </footer>
+  </body>
+</html>
--- a/src/templates/overview.html
+++ b/src/templates/overview.html
@ -1,69 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>{article_title}</title>
-    <link rel="stylesheet" href="/static/bulma.min.css" />
-  </head>
-  <body>
-    <!-- Header (Navbar) -->
-    <nav
-      class="navbar is-primary"
-      role="navigation"
-      aria-label="main navigation"
-    >
-      <div class="navbar-brand">
-        <a class="navbar-item" href="#">
-          <strong>Static Translated Site Generator</strong>
-        </a>
-      </div>
-    </nav>
-
-    <section class="section">
-      <div class="container content">
-        <div class="column is-half is-offset-one-quarter">
-          <h1>Translations</h1>
-        </div>
-        <div class="column is-half is-offset-one-quarter">
-          {article_translation_cards}
-        </div>
-      </div>
-
-      <div class="container content">
-        <div class="column is-half is-offset-one-quarter">
-          <h1>Child Articles</h1>
-        </div>
-        <div class="column is-half is-offset-one-quarter">
-          {article_children_cards}
-        </div>
-      </div>
-    </section>
-
-    <!-- Footer -->
-    <footer class="footer">
-      <div class="content has-text-centered">
-        <p><strong>STSG</strong> by Hazel. &copy; 2025</p>
-      </div>
-    </footer>
-  </body>
-
-  <script>
-    document.addEventListener("DOMContentLoaded", function () {
-        const userLang = navigator.language || navigator.userLanguage;
-
-        // Normalize and check if the language is not English or German
-        if (!["en", "de", "de-DE"].includes(userLang)) {
-            // Try to find a matching card by language attribute
-            const cardToMove =
-                document.querySelector(`.card[lang^="${userLang.replace("_", "-").toLowerCase()}"]`) ||
-                document.querySelector(`.card[lang^="${userLang.split("-")[0]}"]`);
-
-            if (cardToMove) {
-                const container = cardToMove.parentNode;
-                container.insertBefore(cardToMove, container.firstChild);
-            }
-        }
-    });
-  </script>
-</html>
--- a/stsg/build.py
+++ b/stsg/build.py
@ -9,6 +9,7 @@ from bs4 import BeautifulSoup
 from collections import defaultdict
 import toml
 from datetime import datetime
+import jinja2

 from . import config

@ -82,6 +83,24 @@ def stem_to_language_code(stem: str) -> str:
    exit(1)


+
+class TemplateDict(dict):
+    def __init__(self, folder: Path):
+        self.folder = folder
+        super().__init__()
+
+    def __missing__(self, name: str) -> jinja2.Template:
+        f = self.folder / (name + ".html")
+        if not f.exists():
+            logger.error("no template with the name %s exists", name)
+            exit(1)
+
+        t = jinja2.Template(f.read_text())
+        self[name] = t
+        return t
+
+TEMPLATE: Dict[str, jinja2.Template] = TemplateDict(Path(config.setup.source_directory, "templates"))
+
 class LanguageDict(dict):
    def __missing__(self, key: str):
        if key not in config.languages:
@ -99,15 +118,6 @@ class LanguageDict(dict):

 LANGUAGES = LanguageDict()

-class Template:
-    def __init__(self, folder: Path):
-        self.folder = folder
-
-        self.article: str = (self.folder / "article.html").read_text()
-        self.overview: str = (self.folder / "overview.html").read_text()
-        self.translation_card: str = (self.folder / "translation_card.html").read_text()
-        self.article_card: str = (self.folder / "article_card.html").read_text()
-

 class ArticleTranslation:
    def __init__(self, file: Path, article: Article):
@ -143,6 +153,7 @@ class ArticleTranslation:
        if self.file.suffix == ".md":
            html_content = markdown.markdown(html_content)

+        self.context["title"] = get_first_header_content(html_content, fallback=LANGUAGES[self.language_code]["native_name"])
        self.context["content"] = html_content
        self.context["preview"] = shorten_text_and_clean(html_string=html_content)

@ -150,35 +161,7 @@ class ArticleTranslation:
        self.dist_path.mkdir(parents=True, exist_ok=True)

        with Path(self.dist_path, "index.html").open("w") as f:
-            f.write(self.get_article())
-
-    def _get_values(self, return_foreign_articles: bool = True) -> Dict[str, str]:
-        r = {
-            "article_content": self.article_content,
-            "article_preview": self.article_preview,
-            "article_title": self.title,
-        }
-
-        if return_foreign_articles:
-            r.update(ARTICLE_REFERENCE_VALUES[self.language_code])
-        
-        return r
-
-    def get_article_values(self) -> Dict[str, str]:
-        res = {}
-        for key, value in self._get_values(return_foreign_articles=False).items():
-            res[key + ":" + self.article.slug] = value
-
-        return res
-
-    def get_article(self) -> str:
-        return replace_values(TEMPLATE.article, self._get_values())
-
-    def get_translation_card(self) -> str:
-        return replace_values(TEMPLATE.translation_card, self._get_values())
-    
-    def get_article_card(self) -> str:
-        return replace_values(TEMPLATE.article_card, self._get_values())
+            f.write(TEMPLATE["article_translation"].render(self.context))


 class Article:
@ -228,10 +211,6 @@ class Article:

        logger.info("found %s at %s with the translations %s", self.slug, ".".join(list(self.location_in_tree)), ",".join(self.article_translations_map.keys()))

-        # the tree is built
-        self.translation_cards = "\n".join(a.get_translation_card() for a in self.article_translations_list)
-        self.article_cards = "\n".join(c.get_article_card() for c in self.child_articles)
-
    def __init_context__(self):
        self.context["url"] = self.url
        self.context_meta["slug"] = self.slug
@ -257,20 +236,17 @@ class Article:
        for a in self.child_articles:
            a.__init_context__()

-
-
-
    def build(self):
-        # builds the tree structure to the dist directory
        self.dist_path.mkdir(parents=True, exist_ok=True)
+        
        with Path(self.dist_path, "index.html").open("w") as f:
-            f.write(self.get_overview())
+            f.write(TEMPLATE["article"].render(self.context))

        for at in self.article_translations_list:
            at.build()

-        for ca in self.child_articles:
-            ca.build()
+        for ac in self.child_articles:
+            ac.build()

    def _get_values(self, return_foreign_articles: bool = True) -> Dict[str, str]:
        r = {
@ -301,7 +277,6 @@ class Article:

 # GLOBALS
 logger = logging.getLogger("stsg.build")
-TEMPLATE = Template(Path(config.setup.source_directory, "templates"))
 ARTICLE_LAKE: Dict[str, Article] = {}
 ARTICLE_REFERENCE_VALUES: DefaultDict[str, Dict[str, str]] = defaultdict(dict)

@ -323,11 +298,5 @@ def build():
    with Path("context.json").open("w") as f:
        json.dump(tree.context, f, indent=4)

-    # build article reverence values
-    for article_overview in ARTICLE_LAKE.values():
-        ARTICLE_REFERENCE_VALUES[""].update(article_overview.get_article_values())
-        for language_code, at in article_overview.article_translations_map.items():
-            ARTICLE_REFERENCE_VALUES[language_code].update(at.get_article_values())
-
-    logger.info("writing page tree...")
-    # tree.build()
+    logger.info("dumping page tree...")
+    tree.build()
Author	SHA1	Message	Date
Lars Noack	b50833f19f	feat: dynamic translation cards	2025-04-16 15:57:17 +02:00
Lars Noack	f5cccc30dc	feat: dynamic translation cards	2025-04-16 15:56:34 +02:00
Lars Noack	8a8f02c5bd	feat: implemented code to use with jinja	2025-04-16 15:45:06 +02:00