untrack content dir

.gitignore

@@ -56,3 +56,5 @@ Icon
 /vendor
 
 /node_modules
+
+/content

assets/css/src/article.css

@@ -0,0 +1,3 @@
+main.article {
+  margin-top: 0;
+}

assets/css/src/articles.css

@@ -1,31 +0,0 @@
-#articles {
-  margin: 0 var(--unit--horizontal);
-}
-#organize {
-  margin-bottom: calc(var(--unit--vertical));
-}
-.article {
-  position: relative;
-  margin-bottom: calc(var(--unit--vertical) * 2);
-  box-sizing: border-box;
-}
-
-.article__infos,
-.article__labels {
-  transform: translateY(calc(0rem - (var(--unit--vertical) * 0.1)));
-}
-
-.article__infos {
-  display: flex;
-}
-
-.article__labels {
-  display: flex;
-}
-
-.article .label {
-  margin-right: var(--unit--horizontal);
-  text-decoration: underline;
-  text-decoration-style: dotted;
-  text-underline-offset: 6px;
-}

assets/css/src/footer.css

@@ -1,5 +1,8 @@
 #main-footer {
-  position: absolute;
+  position: fixed;
   left: 0;
   bottom: 0;
+  width: calc(18 * var(--unit--horizontal));
+  padding: var(--unit--horizontal);
+  padding-top: var();
 }

assets/css/src/generic.css

@@ -64,3 +64,11 @@
 .flex.column {
   flex-direction: column;
 }
+
+/* ================= COLORS ================= */
+.color {
+  color: var(--color);
+}
+.opacity {
+  opacity: var(--opacity);
+}

assets/css/src/home.css

@@ -0,0 +1,3 @@
+main#home .toggle-btns {
+  margin-top: calc(var(--unit--vertical) * 6);
+}

assets/css/src/html.css

@@ -26,6 +26,10 @@ html {
   scroll-behavior: smooth;
 }
 
+main {
+  margin-top: calc(6 * var(--unit--vertical));
+}
+
 /* Works on Firefox */
 
 * {

assets/css/src/tabs.css

@@ -1,3 +1,6 @@
+.toggle-btns {
+  position: sticky;
+}
 button.toggle.open {
   font-weight: bold;
 }
@@ -22,6 +25,9 @@ button.toggle.right.open::before {
   content: "-";
 }
 
-.content {
+.active-tab {
-  margin-top: calc(var(--unit--vertical) * 2);
+  margin-top: calc(var(--unit--vertical) * 0.5);
+  overflow: auto;
+  max-height: calc(100vh - 7.5 * var(--unit--vertical));
+  margin-bottom: calc(2 * var(--unit--vertical));
 }

assets/css/src/texts.css

@@ -12,11 +12,16 @@
   font-family: "Switzer-Variable", sans-serif;
 }
 
-h1 {
+#logo * {
   font-size: 25vw;
   line-height: 4rem;
   transform: translate(-2px, -13px);
-  font-weight: 550;
+  font-weight: var(--font-weight-extra-bold);
+}
+
+h3 {
+  font-size: var(--font-size-l);
+  font-weight: var(--font-weight-bold);
 }
 
 p,
@@ -27,6 +32,18 @@ button,
   font-size: var(--font-size-m);
   line-height: calc(var(--unit--vertical));
 }
+
+.fs-xl {
+  font-size: var(--font-size-xl);
+}
+
+.title-center {
+  font-size: var(--font-size-m);
+  font-weight: var(--font-weight-light);
+  text-align: center;
+  width: 100%;
+}
+
 p,
 li,
 button,
@@ -34,6 +51,20 @@ button,
   font-weight: var(--font-weight-light);
 }
 
+.fw-bold {
+  font-weight: var(--font-weight-bold);
+}
+
+.fw-extra-bold {
+  font-weight: var(--font-weight-extra-bold);
+}
+
+.f-inherit {
+  font-size: inherit;
+  line-height: inherit;
+  font-weight: inherit;
+}
+
 .ta-center {
   text-align: center;
 }

assets/css/src/variables.css

@@ -7,9 +7,14 @@
   --color-secondary--x-light: rgb(119, 177, 157, 0.15);
 
   --unit--horizontal: 5vw;
-  --unit--vertical: 1.3rem;
+  --unit--vertical: 1.7rem;
 
+  --font-size-s: 0.8rem;
   --font-size-m: 1.2rem;
+  --font-size-l: 1.5rem;
+  --font-size-xl: 3.7rem;
 
   --font-weight-light: 200;
+  --font-weight-bold: 400;
+  --font-weight-extra-bold: 550;
 }

assets/css/style.css

@@ -5,4 +5,6 @@
 @import url("src/texts.css");
 @import url("src/header.css");
 @import url("src/tabs.css");
+@import url("src/home.css");
+@import url("src/articles.css");
 @import url("src/footer.css");

assets/js/script.js

@@ -1,13 +1,21 @@
 const remFactor = 16;
 const verticalUnit = 1.3 * remFactor;
 
-function openTab(data, tab) {
+function toggleTab(data, tab) {
-  data.activeTab === tab ? (data.activeTab = "") : (data.activeTab = tab);
+  if (data.activeTab === tab) {
+    scrollToElem("body");
+    setTimeout(() => {
+      data.activeTab = "";
+    }, 200);
+  } else {
+    data.activeTab = tab;
+    scrollToElem(".active-tab");
+  }
 }
 
 function scrollToElem(selector) {
   setTimeout(() => {
-    const yOffset = -9 * verticalUnit;
+    const yOffset = -7 * verticalUnit;
     const elem = document.querySelector(selector);
     const top = elem.getBoundingClientRect().top;
     window.scrollTo({

content/articles/1_1988/year.txt

@@ -1,5 +0,0 @@
-Title: 1988
-
-----
-
-Uuid: QSTPXlaDnnN5uITb

content/articles/articles.txt

@@ -1,9 +0,0 @@
-Title: Articles
-
-----
-
-Categories: objet, texte, image, film, scène
-
-----
-
-Uuid: IBp23Db7518Sg0V1

content/error/error.txt

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

content/home/home.txt

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

content/site.txt

@@ -1,9 +0,0 @@
-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>
-
-----
-
-Categories: texte, scène, image, film, objet

site/blueprints/pages/article.yml

@@ -1,36 +0,0 @@
-title: Article
-image:
-  back: black
-
-tabs:
-  contentTab:
-    label: Contenu
-    sections:
-      bodySection:
-        label: Corps
-        type: fields
-        fields:
-          body:
-            label: Corps
-            type: textarea
-  metaTab:
-    label: Métadonnées
-    sections:
-      metadata:
-        type: fields
-        fields:
-          published:
-            label: Date de publication
-            type: date
-            default: today
-            width: 1/3
-          category:
-            label: Catégorie
-            type: select
-            options: query
-            query: site.categories.split
-            width: 1/3
-          author:
-            label: Auteur
-            type: users
-            width: 1/3

site/blueprints/pages/articles.yml

@@ -11,3 +11,4 @@ columns:
         label: Années
         type: pages
         template: year
+        sortBy: title desc

site/blueprints/pages/blocks.yml

@@ -0,0 +1,17 @@
+title: Blocs
+image:
+  back: black
+icon: bars
+
+tabs:
+  contentTab:
+    label: Contenu
+    sections:
+      bodySection:
+        label: Corps
+        type: fields
+        fields:
+          body:
+            label: Corps
+            type: layout
+  metaTab: tabs/meta

site/blueprints/pages/linear.yml

@@ -0,0 +1,20 @@
+title: Linéaire
+image:
+  back: black
+icon: bars
+create:
+  fields:
+    - category
+
+tabs:
+  contentTab:
+    label: Contenu
+    sections:
+      bodySection:
+        label: Corps
+        type: fields
+        fields:
+          body:
+            label: Corps
+            type: writer
+  metaTab: tabs/meta

site/blueprints/pages/year.yml

@@ -8,8 +8,10 @@ columns:
     sections:
       articles:
         type: pages
-        template: article
+        templates:
+          - linear
+          - blocks
   - width: 2/3
     fields:
       edito:
-        type: textarea
+        type: writer

site/blueprints/site.yml

@@ -3,15 +3,7 @@ title: Site
 tabs:
   contentTab:
     label: Contenu
-    columns:
+    fields:
-      - width: 1/3
+      edito:
-        sections:
+        label: Éditorial
-          informativePages:
+        type: writer
-            label: Pages d'informations
-            type: pages
-            template: static
-      - width: 2/3
-        fields:
-          edito:
-            label: Éditorial
-            type: writer

site/blueprints/tabs/meta.yml

@@ -0,0 +1,20 @@
+label: Métadonnées
+sections:
+  metadata:
+    type: fields
+    fields:
+      published:
+        label: Date de publication
+        type: date
+        default: today
+        width: 1/3
+      category:
+        label: Catégorie
+        type: select
+        options: query
+        query: site.categories.split
+        width: 1/3
+      author:
+        label: Auteur
+        type: users
+        width: 1/3

site/blueprints/users/admin.yml

@@ -1,4 +1,4 @@
-title: Adminitrateur
+title: Adminitrateurs
 description: Un administrateur a tous les droits.
 image:
   icon: star-filled

site/blueprints/users/author.yml

@@ -0,0 +1,30 @@
+title: Auteurs
+description: Un auteur a tous les droits.
+image:
+  icon: pen
+
+permissions:
+  access:
+    *: false
+  files:
+    *: false
+  languages:
+    *: false
+  pages:
+    *: false
+  site:
+    *: false
+  user:
+    *: false
+  users:
+    *: false
+
+columns:
+  - width: 1/2
+    fields:
+      link:
+        label: Lien
+  - width: 1/2
+    fields:
+      presentation:
+        type: writer

site/collections/articles.php

@@ -1,5 +0,0 @@
-<?php
-
-return function ($site) {
-    return $site->index();
-};

site/collections/years.php

@@ -0,0 +1,5 @@
+<?php
+
+return function ($site) {
+    return $site->find('articles')->children();
+};

site/config/config.php

@@ -12,7 +12,7 @@ return [
         }
       ],
       'articles' => [
-        'icon' => 'folder',
+        'icon' => 'pen',
         'label' => 'Articles',
         'link' => 'pages/articles',
         'current' => function ($current) {
@@ -21,6 +21,25 @@ return [
         }
       ],
       '-',
+      'infos' => [
+        'icon' => 'question',
+        'label' => 'À propos',
+        'link' => 'pages/a-propos',
+        'current' => function ($current) {
+          $path = Kirby::instance()->request()->path()->toString();
+          return Str::contains($path, 'pages/a-propos');
+        }
+      ],
+      'newsletter' => [
+        'icon' => 'email',
+        'label' => 'Lettre',
+        'link' => 'pages/lettre',
+        'current' => function ($current) {
+          $path = Kirby::instance()->request()->path()->toString();
+          return Str::contains($path, 'pages/lettre');
+        }
+      ],
+      '-',
       'users',
       'system'
     ]

site/plugins/panel-text-comments/.editorconfig

@@ -0,0 +1,20 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.php]
+indent_size = 4
+
+[*.md,*.txt]
+trim_trailing_whitespace = false
+insert_final_newline = false
+
+[composer.json]
+indent_size = 4

site/plugins/panel-text-comments/.gitattributes

@@ -0,0 +1,11 @@
+# Note: You need to uncomment the lines you want to use; the other lines can be deleted
+
+# Git
+# .gitattributes export-ignore
+# .gitignore export-ignore
+
+# Tests
+# /.coveralls.yml export-ignore
+# /.travis.yml export-ignore
+# /phpunit.xml.dist export-ignore
+# /tests/ export-ignore

site/plugins/panel-text-comments/.gitignore

@@ -0,0 +1,14 @@
+# OS files
+.DS_Store
+
+# npm modules
+/node_modules
+
+# Parcel cache folder
+.cache
+
+# Composer files
+/vendor
+
+# kirbyup temp development entry
+/index.dev.mjs

site/plugins/panel-text-comments/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) <Year> <Your Name>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

site/plugins/panel-text-comments/README.md

@@ -0,0 +1,117 @@
+# Kirby Pluginkit: Example plugin for Kirby
+
+> Variant "Panel plugin setup"
+
+This is a boilerplate for a Kirby Panel plugin that can be installed via all three [supported installation methods](https://getkirby.com/docs/guide/plugins/plugin-setup-basic#the-three-plugin-installation-methods).
+
+You can find a list of Pluginkit variants on the [`master` branch](https://github.com/getkirby/pluginkit/tree/master).
+
+****
+
+## How to use the Pluginkit
+
+1. Fork this repository
+2. Change the plugin name and description in the `composer.json`
+3. Change the plugin name in the `index.php` and `src/index.js`
+4. Change the license if you don't want to publish under MIT
+5. Add your plugin code to the `index.php` and `src/index.js`
+6. Update this `README` with instructions for your plugin
+
+### Install the development and build setup
+
+We use [kirbyup](https://github.com/johannschopplich/kirbyup) for the development and build setup.
+
+You can start developing directly. kirbyup will be fetched remotely with your first `npm run` command, which may take a short amount of time.
+
+### Development
+
+You can start the dev process with:
+
+```bash
+npm run dev
+```
+
+This will automatically update the `index.js` and `index.css` of your plugin as soon as you make changes.
+Reload the Panel to see your code changes reflected.
+
+With kirbyup 2.0.0+ and Kirby 3.7.4+ you can alternatively use hot module reloading (HMR):
+
+```bash
+npm run serve
+```
+
+This will start a development server that updates the page as soon as you make changes. Some updates are instant, like CSS or Vue template changes, others require a reload of the page, which happens automatically.
+
+> [!NOTE]
+> The live reload functionality requires top level await, [which is only supported in modern browsers](https://caniuse.com/mdn-javascript_operators_await_top_level). If you're developing in older browsers, use `npm run dev` and reload the page manually to see changes.
+
+### Production
+
+As soon as you are happy with your plugin, you should build the final version with:
+
+```bash
+npm run build
+```
+
+This will automatically create a minified and optimized version of your `index.js` and `index.css`
+which you can ship with your plugin.
+
+We have a tutorial on how to build your own plugin based on the Pluginkit [in the Kirby documentation](https://getkirby.com/docs/guide/plugins/plugin-setup-basic).
+
+### Build reproducibility
+
+While kirbyup will stay backwards compatible, exact build reproducibility may be of importance to you. If so, we recommend to target a specific package version, rather than using npx:
+
+```json
+{
+  "scripts": {
+    "dev": "kirbyup src/index.js --watch",
+    "build": "kirbyup src/index.js"
+  },
+  "devDependencies": {
+    "kirbyup": "^3.1.0"
+  }
+}
+```
+
+What follows is an example README for your plugin.
+
+****
+
+## Installation
+
+### Download
+
+Download and copy this repository to `/site/plugins/{{ plugin-name }}`.
+
+### Git submodule
+
+```bash
+git submodule add https://github.com/{{ your-name }}/{{ plugin-name }}.git site/plugins/{{ plugin-name }}
+```
+
+### Composer
+
+```bash
+composer require {{ your-name }}/{{ plugin-name }}
+```
+
+## Setup
+
+*Additional instructions on how to configure the plugin (e.g. blueprint setup, config options, etc.)*
+
+## Options
+
+*Document the options and APIs that this plugin offers*
+
+## Development
+
+*Add instructions on how to help working on the plugin (e.g. npm setup, Composer dev dependencies, etc.)*
+
+## License
+
+MIT
+
+## Credits
+
+- [Your Name](https://github.com/ghost)

site/plugins/panel-text-comments/SECURITY.md

@@ -0,0 +1,18 @@
+# Security Policy
+
+## Supported Versions
+
+*Use this section to tell people about which versions of your project are currently being supported with security updates.*
+
+| Version | Supported          |
+| ------- | ------------------ |
+| 5.1.x   | :white_check_mark: |
+| 5.0.x   | :x:                |
+| 4.0.x   | :white_check_mark: |
+| < 4.0   | :x:                |
+
+## Reporting a Vulnerability
+
+*Use this section to tell people how to report a vulnerability.*
+
+*Tell them where to go, how often they can expect to get an update on a reported vulnerability, what to expect if the vulnerability is accepted or declined, etc.*

site/plugins/panel-text-comments/composer.json

@@ -0,0 +1,21 @@
+{
+	"name": "getkirby/pluginkit",
+	"description": "Kirby Example Plugin",
+	"license": "MIT",
+	"type": "kirby-plugin",
+	"version": "1.0.0",
+	"authors": [
+		{
+			"name": "Your Name",
+			"email": "you@example.com"
+		}
+	],
+	"require": {
+		"getkirby/composer-installer": "^1.1"
+	},
+	"config": {
+		"allow-plugins": {
+			"getkirby/composer-installer": true
+		}
+	}
+}

site/plugins/panel-text-comments/composer.lock

@@ -0,0 +1,66 @@
+{
+    "_readme": [
+        "This file locks the dependencies of your project to a known state",
+        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
+        "This file is @generated automatically"
+    ],
+    "content-hash": "37a8e61308b9b6f49cb9835f477f0c64",
+    "packages": [
+        {
+            "name": "getkirby/composer-installer",
+            "version": "1.2.1",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/getkirby/composer-installer.git",
+                "reference": "c98ece30bfba45be7ce457e1102d1b169d922f3d"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/getkirby/composer-installer/zipball/c98ece30bfba45be7ce457e1102d1b169d922f3d",
+                "reference": "c98ece30bfba45be7ce457e1102d1b169d922f3d",
+                "shasum": ""
+            },
+            "require": {
+                "composer-plugin-api": "^1.0 || ^2.0"
+            },
+            "require-dev": {
+                "composer/composer": "^1.8 || ^2.0"
+            },
+            "type": "composer-plugin",
+            "extra": {
+                "class": "Kirby\\ComposerInstaller\\Plugin"
+            },
+            "autoload": {
+                "psr-4": {
+                    "Kirby\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "description": "Kirby's custom Composer installer for the Kirby CMS and for Kirby plugins",
+            "homepage": "https://getkirby.com",
+            "support": {
+                "issues": "https://github.com/getkirby/composer-installer/issues",
+                "source": "https://github.com/getkirby/composer-installer/tree/1.2.1"
+            },
+            "funding": [
+                {
+                    "url": "https://getkirby.com/buy",
+                    "type": "custom"
+                }
+            ],
+            "time": "2020-12-28T12:54:39+00:00"
+        }
+    ],
+    "packages-dev": [],
+    "aliases": [],
+    "minimum-stability": "stable",
+    "stability-flags": [],
+    "prefer-stable": false,
+    "prefer-lowest": false,
+    "platform": [],
+    "platform-dev": [],
+    "plugin-api-version": "2.6.0"
+}

site/plugins/panel-text-comments/index.css

@@ -0,0 +1,2 @@
+
+/** Put your CSS here **/

site/plugins/panel-text-comments/index.js

@@ -0,0 +1,15 @@
+(function () {
+  "use strict";
+  window.panel.plugin("adrienpayet/panel-text-comments", {
+    textareaButtons: {
+      highlight: {
+        label: "Highlight",
+        icon: "wand",
+        click: function () {
+          this.command("toggle", "<mark>", "</mark>");
+        },
+        shortcut: "m",
+      },
+    },
+  });
+})();

site/plugins/panel-text-comments/index.php

@@ -0,0 +1,3 @@
+<?php
+
+Kirby::plugin('adrienpayet/panel-text-comments', []);

site/plugins/panel-text-comments/package.json

@@ -0,0 +1,7 @@
+{
+  "scripts": {
+    "dev": "npx -y kirbyup src/index.js --watch",
+    "serve": "npx -y kirbyup serve src/index.js",
+    "build": "npx -y kirbyup src/index.js"
+  }
+}

site/plugins/panel-text-comments/src/index.js

@@ -0,0 +1,12 @@
+window.panel.plugin("adrienpayet/panel-text-comments", {
+  textareaButtons: {
+    highlight: {
+      label: "Highlight",
+      icon: "wand",
+      click: function () {
+        this.command("toggle", "<mark>", "</mark>");
+      },
+      shortcut: "m",
+    },
+  },
+});

site/snippets/footer.php

@@ -1,10 +1,4 @@
-<footer id="main-footer" class="| width padding left right bottom top" style="
+<footer id="main-footer">
-  --width:18;
-  --left:1;
-  --right:1;
-  --bottom:1;
-  --top:1;
-">
   <ul id="links" class="| flex full-width" style="
     --content: center;
     --gap: 1;

site/snippets/header.php

@@ -4,17 +4,9 @@
     <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/css/style.css" />
+    <link rel="stylesheet" href="<?= url('assets') ?>/css/style.css" />
-    <script src="assets/js/script.js" defer></script>
+    <script src="<?= url('assets') ?>/js/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="/" class="no-line">
-          <h1 id="actuel">actuel</h1>
-          <h1 id="inactuel">inactuel</h1>
-        </a>
-      </div>
-    </header>

site/snippets/tabs.php

@@ -0,0 +1,57 @@
+<?php 
+$left['slug'] = Str::slug($left['label']);
+?>
+
+<div id="tabs" x-data="{
+    activeTab: ''
+  }">
+    <div class="toggle-btns | flex space-between" style="
+    --content:space-between;
+    ">
+      <button
+        class="toggle left"
+        :class="activeTab === '<?=$left['slug'] ?>' ? 'open' : 'close'"
+        @click="toggleTab($data, '<?=$left['slug'] ?>')"
+      ><?= $left['label'] ?></button>
+      <button
+        class="toggle right"
+        :class="activeTab === 'articles' ? 'open' : 'close'"
+        @click="toggleTab($data, 'articles')"
+      >articles</button>
+    </div>
+    <div class="active-tab">
+      <section 
+      x-show="activeTab === '<?=$left['slug'] ?>'" 
+      x-transition.opacity 
+      x-transition.duration.500ms>
+        <?= $left['content'] ?>
+      </section>
+      <ul 
+      x-show="activeTab === 'articles'" 
+      x-transition.opacity 
+      x-transition.duration.500ms>
+      <?php foreach($kirby->collection('years') as $year): ?>
+          <div class="article__year | full-width flex  bottom" style="--content: center;--bottom:2">
+            <h3 class="fs-xl color" style="--color:var(--color-secondary)"><?= $year->title() ?></h3>
+          </div>
+        <?php foreach($year->children() as $article): ?>
+          <li class="article | bottom" style="--bottom:3">
+            <a href="<?= $article->url() ?>" class="article__title no-line">
+              <h3><?= $article->title() ?></h3>
+            </a>
+            <div class="article__infos">
+              <p>
+                <span class="opacity" style="--opacity:.5">Par</span>
+                <a class="author no-line" href="#"><?= $article->author()->toUser()->name() ?></a>,
+                <span class="opacity" style="--opacity:.5">le</span> <?= $article->published()->toDate('d/m/Y') ?>
+              </p>
+            </div>
+            <!-- <div class="article__labels">
+              <button class="label label--category">[ <?= $article->category() ?> ]</button>
+            </div> -->
+          </li>
+        <?php endforeach ?>
+      <?php endforeach ?>
+      </ul>
+    </div>
+  </div>

site/templates/home.php

@@ -1,44 +1,23 @@
 <?php snippet('header') ?>
-<main class="top bottom" style="
+<header id="header">
-  --top:6;
+  <div id="logo">
-  --bottom: 3;
+    <a href="/" class="no-line">
-">
+      <h1 id="actuel">actuel</h1>
-  <h2 class="| fs-m fw-light ta-center full-width flex" style="
+      <h1 id="inactuel">inactuel</h1>
-    --content:center;
+    </a>
-  ">
-    critique des arts<br />
-    et des techniques
-  </h2>
-  <div id="tabs" x-data="{
-    activeTab: ''
-  }">
-    <div class="toggle-btns | top flex space-between" style="
-    --top:10;
-    --content:space-between;
-    ">
-      <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'">
-      <?php foreach($site->collections('articles') as $article): ?>
-        <li class="article">
-          <?= var_dump($article) ?>
-        </li>
-      <?php endforeach ?>
-      </ul>
-    </div>
   </div>
+</header>
+
+<main id="<?= $page->template() ?>">
+  <h3 class="title-center">
+    critique des arts<br />
+    et des techniques<br>
+  </h3>
+  <?php snippet('tabs', [
+    'left' => [
+      'label' => 'édito',
+      'content' => $site->edito()
+    ]
+  ]) ?>
 </main>
 <?php snippet('footer') ?>

site/templates/linear.php

@@ -0,0 +1,20 @@
+<?php snippet('header') ?>
+<header id="header" class="minimized">
+  <div id="logo" >
+    <a href="/" class="no-line">
+      <h2 id="actuel">actuel</h2>
+      <h2 id="inactuel">inactuel</h2>
+    </a>
+  </div>
+</header>
+<main id="<?= $page->template() ?>">
+  <?php snippet('tabs', [
+    'left' => [
+      'label' => 'Édito ' . $page->parent()->title(),
+      'content' => $page->parent()->edito()
+    ]
+  ]) ?>
+  <h1 class="title-center"><?= $page->title() ?></h1>
+</main>
+
+<?php snippet('footer') ?>