convert home to alpine

assets/script.js

@@ -1,45 +1,31 @@
-function toggleTab(event, tabName) {
-  hideAllTabs(event)
-
-  const button =
-    event.target.tagName === "BUTTON"
-      ? event.target
-      : event.target.closest("button")
-  // const buttonTop = button.offsetTop
-  const icon = button.querySelector(".more-less-icon")
-  const article = document.querySelector("#" + tabName)
-
-  icon.textContent = icon.textContent === "+" ? "-" : "+"
-  button.classList.toggle("open")
-  article.classList.toggle("hidden")
+function openTab(data, tab) {
+  data.activeTab === tab ? (data.activeTab = "") : (data.activeTab = tab);
 }
 
-function hideAllTabs(event) {
-  const tabContainer = event.target.closest("toggle")
-  const buttons = document.querySelectorAll(".toggle-btn")
-  const articles = document.querySelectorAll(".tab")
-
-  buttons.forEach((btn) => {
-    btn.classList.remove("open")
-    btn.querySelector(".more-less-icon").textContent = "+"
-  })
-  articles.forEach((article) => {
-    article.classList.add("hidden")
-  })
+function scrollToElem(selector) {
+  setTimeout(() => {
+    const yOffset = -185;
+    const elem = document.querySelector(selector);
+    const top = elem.getBoundingClientRect().top;
+    window.scrollTo({
+      top: top + window.scrollY + yOffset,
+      behavior: "smooth",
+    });
+  }, 100);
 }
 
 document.addEventListener("DOMContentLoaded", () => {
   function toggleLogoState() {
-    const scrollY = window.scrollY || window.pageYOffset
+    const scrollY = window.scrollY || window.pageYOffset;
 
     if (scrollY > 10) {
-      document.querySelector("#header").classList.add("minimized")
+      document.querySelector("#header").classList.add("minimized");
     } else {
-      document.querySelector("#header").classList.remove("minimized")
+      document.querySelector("#header").classList.remove("minimized");
     }
   }
 
   window.addEventListener("scroll", () => {
-    toggleLogoState()
-  })
-})
+    toggleLogoState();
+  });
+});

assets/style.css

@@ -10,6 +10,11 @@
 }
 
 /* ================= RESET ================= */
+body,
+html {
+  scroll-behavior: smooth;
+}
+
 html,
 body,
 h1,
@@ -166,6 +171,10 @@ button {
   align-items: center;
 }
 
+article p {
+  margin-bottom: var(--unit--vertical);
+}
+
 /* ================= HEADER ================= */
 #header {
   position: fixed;
@@ -351,17 +360,33 @@ h2.left.open::before {
   justify-content: space-between;
 }
 
-#content {
-  margin-top: calc(var(--unit--vertical) * 2);
+button.toggle.open {
+  font-weight: bold;
 }
 
-.toggle-btn--left .more-less-icon {
+button.toggle.left::after {
   margin-left: var(--unit--horizontal);
 }
+button.toggle.left.close::after {
+  content: "+";
+}
+button.toggle.left.open::after {
+  content: "-";
+}
 
-.toggle-btn--right .more-less-icon {
+button.toggle.right::before {
   margin-right: var(--unit--horizontal);
 }
+button.toggle.right.close::before {
+  content: "+";
+}
+button.toggle.right.open::before {
+  content: "-";
+}
+
+.content {
+  margin-top: calc(var(--unit--vertical) * 2);
+}
 
 /* ================= ARTICLES LIST ================= */
 #articles {

content/error/error.txt

@@ -1 +1,5 @@
 Title: Error
+
+----
+
+Uuid: atOcJYYJAw8Buk3z

content/home/home.txt

@@ -1 +1,5 @@
 Title: Home
+
+----
+
+Uuid: Ie9MrbnsQDy1oSUB

content/site.txt

@@ -1 +1,5 @@
-Title: Site Title
+Title: actuel / inactuel
+
+----
+
+Edito: <p>Leo tortor nunc placerat adipiscing diam elementum facilisis nunc elit eget nisl suspendisse accumsan tincidunt nisi urna sit leo arcu suspendisse eu congue eget id.</p><p>Et sollicitudin massa sem commodo elementum phasellus arcu diam purus tempus ex mi condimentum interdum maecenas scelerisque sed elit sem eget elit vel et a.</p><p>Ac rutrum elementum purus cursus quisque aliquam scelerisque scelerisque metus eu bibendum et euismod ac quisque aliquam tortor amet sollicitudin sit lorem portaest adipiscing sollicitudin.</p><p>Commodo morbi magna bibendum ut sem arcu ipsum maecenas vivamus quis tempus lacus urna quis morbi enim tincidunt nisi placerat quisque euismod eget tristique nunc.</p><p>Molestie cursus ex tempus varius gravida phasellus placerat quam varius maecenas nisl nunc facilisis nunc condimentum et mi purus interdum orci quis sollicitudin enim dolor.</p>

site/blueprints/site.yml

@@ -1,5 +1,12 @@
 title: Site
 
+tabs:
+  contentTab:
+    label: Contenu
     sections:
-  pages:
-    type: pages
+      fieldsSection:
+        label: Contenu
+        type: fields
+        fields:
+          edito:
+            type: writer

site/snippets/footer.php

@@ -0,0 +1,2 @@
+</body>
+</html>

site/snippets/header.php

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><?= $site->title() ?><?= e($page->url() !== $site->url(), '-' . $page->title()) ?></title>
+    <link rel="stylesheet" href="assets/style.css" />
+    <script src="assets/script.js" defer></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <meta name="robots" content="noindex">
+  </head>
+  <body class="grid">
+    <header id="header">
+      <div id="logo">
+        <a href="/">
+          <h1 id="actuel">actuel</h1>
+          <h1 id="inactuel">inactuel</h1>
+        </a>
+      </div>
+      <nav class="grid">
+        <div id="logo-nav">
+          <h1 id="actuel-nav">actuel</h1>
+          <h1 id="inactuel-nav">inactuel</h1>
+        </div>
+        <ul id="spaces">
+          <li>
+            <a href="#">accueil</a>
+          </li>
+          <li>
+            <a href="#">proposer une idée / un texte</a>
+          </li>
+          <li><a href="#">équipe</a></li>
+          <li><a href="#">mentions légales</a></li>
+        </ul>
+      </nav>
+    </header>

site/templates/home.php

@@ -0,0 +1,49 @@
+<?php snippet('header') ?>
+<main>
+  <h2 id="baseline">
+    critique des arts<br />
+    et des techniques
+  </h2>
+  <div id="tabs" x-data="{
+    activeTab: ''
+  }">
+    <div class="toggle-btns">
+      <button
+        class="toggle left"
+        :class="activeTab === 'edito' ? 'open' : 'close'"
+        @click="[openTab($data, 'edito'), scrollToElem('.content')]"
+      >éditorial</button>
+      <button
+        class="toggle right"
+        :class="activeTab === 'articles' ? 'open' : 'close'"
+        @click="[openTab($data, 'articles'), scrollToElem('.content')]"
+      >articles</button>
+    </div>
+    <div class="content">
+      <article x-show="activeTab === 'edito'">
+        <?= $site->edito() ?>
+      </article>
+      <ul x-show="activeTab === 'articles'">
+        <li class="article">
+          <a href="/article.html" class="article__title">
+            <strong
+              ><em
+                >Le timbre dans l'<em>Inhumain</em> de Jean-François
+                Lyotard,</em
+              ></strong
+            ><br />
+          </a>
+          <div class="article__infos">
+            <button class="author">Cécile Fournel</button>,&nbsp;
+            <p>16 novembre 2023</p>
+          </div>
+          <div class="article__labels">
+            <button class="label label--year">1987</button>
+            <button class="label label--category">livre</button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</main>
+<?php snippet('footer') ?>