@stnd/layout 0.2.0 → 0.5.1

package/Encrypted.astro

@@ -1,196 +1,195 @@
 ---
-import "../../styles/standard.scss";
+/**
+ * @component Encrypted
+ * @description A standalone password-gate page layout — not composed with
+ * `<Base>`, renders its own full `<html>`. Shows a password form; on
+ * submit, XORs the decoded `encryptedData` against a SHA-256 hash of the
+ * typed password entirely client-side (no server round-trip) and, if the
+ * result looks like real HTML, replaces the form with it in place. Wrong
+ * guesses are rate-limited to 5 attempts per page load.
+ *
+ * @property {Object} [site] - Site info; only `site.language` is read (sets `<html lang>`, default "en").
+ * @property {string} encryptedData - Base64-encoded, XOR-"encrypted" HTML payload to reveal on success.
+ */
+import "virtual:stnd/styles";
 
 const { site = {}, encryptedData } = Astro.props;
 ---
 
 <!doctype html>
 <html lang={site.language || "en"} class="rhythm" data-theme="system">
-    <head>
-        <meta charset="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Protected Content</title>
-    </head>
-    <body>
-        <main class="prose md">
-            <div class="encrypted-container">
-                <h2>Cette page est protégée par un mot de passe</h2>
-
-                <form id="decrypt-form">
-                    <div class="form-group">
-                        <input
-                            type="password"
-                            id="password"
-                            placeholder="Mot de passe"
-                            required
-                            autocomplete="current-password"
-                        />
-                    </div>
-                    <button type="submit" id="unlock-btn">
-                        <span class="btn-text">Déverrouiller</span>
-                        <span class="btn-loading" style="display: none;"
-                            >Déverrouillage...</span
-                        >
-                    </button>
-                </form>
-
-                <div id="error" class="error">
-                    Mot de passe incorrect. Veuillez réessayer.
-                </div>
-                <div id="loading" class="loading">
-                    Déchiffrement du contenu...
-                </div>
-            </div>
-
-            <div id="encrypted-content" style="display: none;">
-                {encryptedData}
-            </div>
-
-            <script is:inline>
-                const encryptedData =
-                    document.getElementById("encrypted-content").textContent;
-                const maxAttempts = 5;
-                let attempts = 0;
-
-                const form = document.getElementById("decrypt-form");
-                const passwordInput = document.getElementById("password");
-                const unlockBtn = document.getElementById("unlock-btn");
-                const errorDiv = document.getElementById("error");
-                const loadingDiv = document.getElementById("loading");
-                const btnText = unlockBtn.querySelector(".btn-text");
-                const btnLoading = unlockBtn.querySelector(".btn-loading");
-
-                form.addEventListener("submit", async function (e) {
-                    e.preventDefault();
-                    const password = passwordInput.value;
-                    if (!password) return;
-                    await attemptDecryption(password);
-                });
-
-                function setLoading(loading) {
-                    unlockBtn.disabled = loading;
-                    btnText.style.display = loading ? "none" : "inline";
-                    btnLoading.style.display = loading ? "inline" : "none";
-                    loadingDiv.style.display = loading ? "block" : "none";
-                }
-
-                function showError(message) {
-                    errorDiv.textContent = message;
-                    errorDiv.style.display = "block";
-                    errorDiv.style.animation = "shake 0.5s ease-in-out";
-                    setTimeout(() => {
-                        errorDiv.style.animation = "";
-                    }, 500);
-                }
-
-                function hideError() {
-                    errorDiv.style.display = "none";
-                }
-
-                async function decrypt(encryptedData, password) {
-                    try {
-                        const encrypted = Uint8Array.from(
-                            atob(encryptedData),
-                            (c) => c.charCodeAt(0),
-                        );
-                        const encoder = new TextEncoder();
-                        const passwordBytes = encoder.encode(password);
-                        const hashBuffer = await crypto.subtle.digest(
-                            "SHA-256",
-                            passwordBytes,
-                        );
-                        const key = new Uint8Array(hashBuffer);
-
-                        const decrypted = new Uint8Array(encrypted.length);
-                        for (let i = 0; i < encrypted.length; i++) {
-                            decrypted[i] = encrypted[i] ^ key[i % key.length];
-                        }
-
-                        const result = new TextDecoder().decode(decrypted);
-                        return result;
-                    } catch (error) {
-                        throw new Error("Decryption failed");
-                    }
-                }
-
-                function isValidHTML(str) {
-                    const hasHTMLTags = /<[a-z][\s\S]*>/i.test(str);
-                    const hasDoctype = /<!DOCTYPE/i.test(str);
-                    const hasHtmlTag = /<html/i.test(str);
-                    const nonPrintable = str.match(
-                        /[\x00-\x08\x0B-\x0C\x0E-\x1F\x7F-\x9F]/g,
-                    );
-                    const nonPrintableRatio = nonPrintable
-                        ? nonPrintable.length / str.length
-                        : 0;
-                    return (
-                        (hasHTMLTags || hasDoctype || hasHtmlTag) &&
-                        nonPrintableRatio < 0.1
-                    );
-                }
-
-                async function attemptDecryption(password) {
-                    if (attempts >= maxAttempts) {
-                        showError(
-                            "Trop de tentatives. Veuillez rafraîchir la page.",
-                        );
-                        return;
-                    }
-
-                    setLoading(true);
-                    hideError();
-
-                    try {
-                        const decrypted = await decrypt(
-                            encryptedData,
-                            password,
-                        );
-
-                        if (!isValidHTML(decrypted)) {
-                            throw new Error("Invalid decryption result");
-                        }
-
-                        const container = document.querySelector(
-                            ".encrypted-container",
-                        );
-                        container.outerHTML = decrypted;
-                    } catch (error) {
-                        attempts++;
-                        const remaining = maxAttempts - attempts;
-
-                        if (remaining > 0) {
-                            showError(
-                                `Mot de passe incorrect. Veuillez réessayer. (${remaining} tentatives restantes)`,
-                            );
-                        } else {
-                            showError(
-                                "Trop de tentatives. Veuillez rafraîchir la page.",
-                            );
-                            unlockBtn.disabled = true;
-                        }
-
-                        passwordInput.value = "";
-                        passwordInput.focus();
-                    } finally {
-                        setLoading(false);
-                    }
-                }
-
-                const hash = window.location.hash;
-                if (hash && hash.length > 1) {
-                    const passwordFromHash = hash.substring(1);
-                    if (passwordFromHash) {
-                        history.replaceState(
-                            null,
-                            null,
-                            window.location.pathname + window.location.search,
-                        );
-                        attemptDecryption(passwordFromHash);
-                    }
-                } else {
-                    passwordInput.focus();
-                }
-            </script>
-        </main>
-    </body>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Protected Content</title>
+  </head>
+  <body>
+    <main class="prose md">
+      <div class="encrypted-container">
+        <h2>Cette page est protégée par un mot de passe</h2>
+
+        <form id="decrypt-form">
+          <div class="form-group">
+            <input
+              type="password"
+              id="password"
+              placeholder="Mot de passe"
+              required
+              autocomplete="current-password"
+            />
+          </div>
+          <button type="submit" id="unlock-btn">
+            <span class="btn-text">Déverrouiller</span>
+            <span class="btn-loading" style="display: none;"
+              >Déverrouillage...</span
+            >
+          </button>
+        </form>
+
+        <div id="error" class="error">
+          Mot de passe incorrect. Veuillez réessayer.
+        </div>
+        <div id="loading" class="loading">Déchiffrement du contenu...</div>
+      </div>
+
+      <div id="encrypted-content" style="display: none;">
+        {encryptedData}
+      </div>
+
+      <script is:inline>
+        const encryptedData =
+          document.getElementById("encrypted-content").textContent;
+        const maxAttempts = 5;
+        let attempts = 0;
+
+        const form = document.getElementById("decrypt-form");
+        const passwordInput = document.getElementById("password");
+        const unlockBtn = document.getElementById("unlock-btn");
+        const errorDiv = document.getElementById("error");
+        const loadingDiv = document.getElementById("loading");
+        const btnText = unlockBtn.querySelector(".btn-text");
+        const btnLoading = unlockBtn.querySelector(".btn-loading");
+
+        form.addEventListener("submit", async function (e) {
+          e.preventDefault();
+          const password = passwordInput.value;
+          if (!password) return;
+          await attemptDecryption(password);
+        });
+
+        function setLoading(loading) {
+          unlockBtn.disabled = loading;
+          btnText.style.display = loading ? "none" : "inline";
+          btnLoading.style.display = loading ? "inline" : "none";
+          loadingDiv.style.display = loading ? "block" : "none";
+        }
+
+        function showError(message) {
+          errorDiv.textContent = message;
+          errorDiv.style.display = "block";
+          errorDiv.style.animation = "shake 0.5s ease-in-out";
+          setTimeout(() => {
+            errorDiv.style.animation = "";
+          }, 500);
+        }
+
+        function hideError() {
+          errorDiv.style.display = "none";
+        }
+
+        async function decrypt(encryptedData, password) {
+          try {
+            const encrypted = Uint8Array.from(atob(encryptedData), (c) =>
+              c.charCodeAt(0),
+            );
+            const encoder = new TextEncoder();
+            const passwordBytes = encoder.encode(password);
+            const hashBuffer = await crypto.subtle.digest(
+              "SHA-256",
+              passwordBytes,
+            );
+            const key = new Uint8Array(hashBuffer);
+
+            const decrypted = new Uint8Array(encrypted.length);
+            for (let i = 0; i < encrypted.length; i++) {
+              decrypted[i] = encrypted[i] ^ key[i % key.length];
+            }
+
+            const result = new TextDecoder().decode(decrypted);
+            return result;
+          } catch (error) {
+            throw new Error("Decryption failed");
+          }
+        }
+
+        function isValidHTML(str) {
+          const hasHTMLTags = /<[a-z][\s\S]*>/i.test(str);
+          const hasDoctype = /<!DOCTYPE/i.test(str);
+          const hasHtmlTag = /<html/i.test(str);
+          const nonPrintable = str.match(
+            /[\x00-\x08\x0B-\x0C\x0E-\x1F\x7F-\x9F]/g,
+          );
+          const nonPrintableRatio = nonPrintable
+            ? nonPrintable.length / str.length
+            : 0;
+          return (
+            (hasHTMLTags || hasDoctype || hasHtmlTag) && nonPrintableRatio < 0.1
+          );
+        }
+
+        async function attemptDecryption(password) {
+          if (attempts >= maxAttempts) {
+            showError("Trop de tentatives. Veuillez rafraîchir la page.");
+            return;
+          }
+
+          setLoading(true);
+          hideError();
+
+          try {
+            const decrypted = await decrypt(encryptedData, password);
+
+            if (!isValidHTML(decrypted)) {
+              throw new Error("Invalid decryption result");
+            }
+
+            const container = document.querySelector(".encrypted-container");
+            container.outerHTML = decrypted;
+          } catch (error) {
+            attempts++;
+            const remaining = maxAttempts - attempts;
+
+            if (remaining > 0) {
+              showError(
+                `Mot de passe incorrect. Veuillez réessayer. (${remaining} tentatives restantes)`,
+              );
+            } else {
+              showError("Trop de tentatives. Veuillez rafraîchir la page.");
+              unlockBtn.disabled = true;
+            }
+
+            passwordInput.value = "";
+            passwordInput.focus();
+          } finally {
+            setLoading(false);
+          }
+        }
+
+        const hash = window.location.hash;
+        if (hash && hash.length > 1) {
+          const passwordFromHash = hash.substring(1);
+          if (passwordFromHash) {
+            history.replaceState(
+              null,
+              null,
+              window.location.pathname + window.location.search,
+            );
+            attemptDecryption(passwordFromHash);
+          }
+        } else {
+          passwordInput.focus();
+        }
+      </script>
+    </main>
+  </body>
 </html>

package/Footer.astro

@@ -0,0 +1,192 @@
+---
+/**
+ * @component Footer
+ * @description Generic, flexible site footer. Reads defaults from
+ * `virtual:stnd/config` (title, navigation) so it works with zero props;
+ * a `grid-8` layout (3 columns brand/info, 5 for custom link columns),
+ * responsive out of the box. Slots: `brand`, `description`, `copyright`,
+ * `bottom-left`, `bottom-right`, and default (extra link columns).
+ *
+ * @example astro
+ * <Footer />
+ * <Footer title="My Garden">
+ *   <div class="col-1">
+ *     <h4>Section</h4>
+ *     <ul><li><a href="/">Home</a></li></ul>
+ *   </div>
+ * </Footer>
+ */
+import config from "virtual:stnd/config";
+
+interface Props {
+  /** Brand name — defaults to the site config's own title, then "Home". */
+  title?: string;
+  class?: string;
+  hideBrand?: boolean;
+  /** Hide the nav column entirely (built from `config.nav.footer` / `config.nav.header`). */
+  hideNav?: boolean;
+}
+
+const {
+  title = config.title || "Home",
+  class: className,
+  hideBrand = false,
+  hideNav = false,
+} = Astro.props;
+
+const footerNav =
+  config.nav?.footer ??
+  config.nav?.header ??
+  (Array.isArray(config.nav) ? config.nav : []);
+const year = new Date().getFullYear();
+---
+
+<footer class:list={["stnd-footer", "compact", className]}>
+  <div class="grid-8 sm:grid-1">
+    <!-- Column 1: Brand & Info -->
+    {
+      !hideBrand && (
+        <div class="col-2 sm:col-1">
+          <h4 class="footer-title mb-2">
+            <a href={config.url} class="no-decoration">{title}</a>
+          </h4>
+
+          {
+            footerNav.length > 0 && !hideNav && (
+                <ul class="no-bullet">
+                  {footerNav.map((item: any) => (
+                    <li>
+                      <a href={item.url}>{item.title}</a>
+                    </li>
+                  ))}
+                </ul>
+            )
+          }
+
+          {
+            config.description && (
+              <p class="text-2xs mt-half compact">{config.description}</p>
+            )
+          }
+
+          <p class="text-2xs mt-half">&copy; {year}.</p>
+        </div>
+      )
+    }
+
+    <!-- Column 2: Navigation -->
+    {/*
+      footerNav.length > 0 && (
+        <div class="col-1">
+          <h4>Navigation</h4>
+          <ul class="no-bullet">
+            {footerNav.map((item: any) => (
+              <li>
+                <a href={item.url}>{item.title}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )
+    */}
+
+    <!-- Column 3, 4, etc. -->
+    <slot />
+  </div>
+
+  {/* Bottom Bar (Optional) */}
+  {
+    (Astro.slots.has("bottom-left") || Astro.slots.has("bottom-right")) && (
+      <div class="footer-bottom  flex-far justify-between items-center no-decoration sm:flex-col sm:items-start text-2xs">
+        <div class="footer-bottom-left">
+          <slot name="bottom-left" />
+        </div>
+        <div class="footer-bottom-right flex">
+          <slot name="bottom-right" />
+        </div>
+      </div>
+    )
+  }
+</footer>
+
+<style is:global>
+  .stnd-footer {
+    font-family: var(--font-interface);
+    color: var(--color-subtle);
+    border-top: var(--border);
+    margin-top: calc(var(--space) * 12);
+    padding-block-start: var(--gap-footer) !important;
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      font-size: var(--size-base);
+      font-family: var(--font-interface);
+      margin-block-end: var(--space-half) !important;
+      font-weight: var(--font-header-weight);
+      margin-top: 0 !important;
+    }
+    h4 {
+      font-size: var(--size-sm);
+    }
+    li {
+      margin-block-end: var(--leading) !important;
+    }
+
+    /* Styling for link lists inside footer */
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 !important;
+    }
+
+    ul li {
+      font-size: var(--size-2xs);
+      margin-bottom: var(--space-2);
+      padding-inline-start: 0;
+      margin-top: 0 !important;
+    }
+
+    ul li a {
+      color: inherit;
+      text-decoration: none;
+    }
+
+    ul li::before {
+      display: none;
+    }
+  }
+
+  .footer-title {
+    font-family: var(--font-heading);
+    font-size: var(--size-base);
+    font-weight: var(--font-header-weight);
+    color: var(--color-foreground);
+    margin: 0;
+  }
+
+  .stnd-footer a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .stnd-footer a:hover {
+    color: var(--color-accent, var(--color-foreground));
+    opacity: 1;
+  }
+
+  .footer-bottom {
+    margin-top: calc(var(--space) * 6);
+    margin-bottom: calc((var(--gap-footer) * -1));
+    padding-bottom: var(--space);
+
+    strong {
+      color: inherit;
+    }
+    em {
+      color: inherit;
+    }
+  }
+</style>