Some tweak on UI and handle JavaScript (through JSOO)

xvw · Nov 19, 2024 · 8e49cef · 8e49cef
1 parent 1fb5732
commit 8e49cef
Show file tree

Hide file tree

Showing 21 changed files with 1,615 additions and 15 deletions.
diff --git a/assets/css/capsule.css b/assets/css/capsule.css
@@ -95,7 +95,7 @@ body {
 }
 
 #main-content {
-    margin-bottom: 8rem;
+    margin-bottom: 3rem;
     font-family: var(--font-serif);
 
     .publication-date {
@@ -153,16 +153,6 @@ body {
     & > article {
         margin-top: 2rem;
 
-        & h1,
-        & h2,
-        & h3,
-        & h4,
-        & h5,
-        & h6 {
-            font-family: var(--font-sans-serif);
-            font-weight: 700;
-        }
-
         & h1 {
             font-size: 220%;
             margin: 4.5rem 0 2.2rem 0;
@@ -221,6 +211,10 @@ body {
             }
         }
     }
+
+    & > article:empty {
+        display: none;
+    }
 }
 
 
@@ -294,6 +288,66 @@ body {
     }
 }
 
+section.indexes {
+
+    --top-padding: 1.8rem;
+
+    margin: 5rem 0;
+    border-top: 1px solid var(--middle-light-color);
+    padding-top: var(--top-padding);
+
+    & > div {
+        border-bottom: 1px solid var(--middle-light-color);
+        padding: var(--top-padding) 0;
+        margin-bottom: 1rem;
+
+        & > h2 {
+            margin-bottom: 1.2rem;
+        }
+
+        & > p {
+            margin-bottom: 1.4rem;
+        }
+
+        & > nav > ul {
+            display: block;
+            padding: 0;
+            list-style: none;
+            font-family: var(--font-serif);
+
+            & > li {
+                display: inline-block;
+                margin-bottom: 0.3rem;
+            }
+
+            & > li:not(:last-child)::after {
+                content: '/';
+                margin: 0 0.5rem;
+            }
+
+            & li:first-child {
+                margin-right: 0;
+            }
+        }
+    }
+
+    & > div:last-child {
+        margin-bottom: 0;
+        border-style: none;
+    }
+
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--font-sans-serif);
+    font-weight: 700;
+}
+
 .set {
 
     & > * {

diff --git a/assets/css/hl.css b/assets/css/hl.css
@@ -0,0 +1,27 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#333;background:#fff}.hljs-comment,.hljs-quote{color:#777;font-style:italic}.hljs-keyword,.hljs-selector-tag,.hljs-subst{color:#333;font-weight:700}.hljs-literal,.hljs-number{color:#777}.hljs-doctag,.hljs-formula,.hljs-string{color:#333;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAJ0lEQVQIW2O8e/fufwYGBgZBQUEQxcCIIfDu3Tuwivfv30NUoAsAALHpFMMLqZlPAAAAAElFTkSuQmCC)}.hljs-section,.hljs-selector-id,.hljs-title{color:#000;font-weight:700}.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-name,.hljs-title.class_,.hljs-type{color:#333;font-weight:700}.hljs-tag{color:#333}.hljs-regexp{color:#333;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAN37979r6yszIgujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQDexSef15DBCwAAAABJRU5ErkJggg==)}.hljs-bullet,.hljs-link,.hljs-symbol{color:#000;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAKElEQVQIW2NkQAO7d+/+z4gsBhJwdXVlhAvCBECKwIIwAbhKZBUwBQA6hBpm5efZsgAAAABJRU5ErkJggg==)}.hljs-built_in{color:#000;text-decoration:underline}.hljs-meta{color:#999;font-weight:700}.hljs-deletion{color:#fff;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAADCAYAAABS3WWCAAAAE0lEQVQIW2MMDQ39zzhz5kwIAQAyxweWgUHd1AAAAABJRU5ErkJggg==)}.hljs-addition{color:#000;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAALUlEQVQYV2N89+7dfwYk8P79ewZBQUFkIQZGOiu6e/cuiptQHAPl0NtNxAQBAM97Oejj3Dg7AAAAAElFTkSuQmCC)}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
+
+/* Hook */
+
+.hljs-symbol {
+    background-image: none;
+    font-weight: 300;
+}
+
+.hljs-string {
+    background-image: none;
+    font-weight: 400;
+    color: #a0a0a0;
+}
+
+.hljs-built_in {
+    text-decoration: none;
+}
+
+.hljs-keyword {
+    font-weight: 900;
+    color: #000000;
+}
+
+.hljs-type {
+    font-weight: 700;
+}
diff --git a/assets/templates/index.html b/assets/templates/index.html
@@ -2,4 +2,30 @@
 {{ yocaml_body }}
 {%- endautoescape -%}
 
-Here is the index
+{%- if has_indexes -%}
+<section class="indexes">
+  {%- for index in indexes -%}
+  <div id="index-{{ index.id }}">
+    <h2>{{ index.name }}</h2>
+    {%- if index.has_synopsis -%}
+    <p>
+      {%- autoescape false -%}
+      {{ index.synopsis }}
+      {%- endautoescape -%}
+    </p>
+    {%- endif -%}
+    {%- if index.has_links -%}
+    <nav>
+      <ul>
+        {%- for link in index.links -%}
+        <li>
+          <a href="{{ link.url.url }}">{{ link.title }}</a>
+        </li>
+        {%- endfor -%}
+      </ul>
+    </nav>
+    {%- endif -%}
+  </div>
+  {%- endfor -%}
+</section>
+{%- endif -%}
diff --git a/assets/templates/layout.html b/assets/templates/layout.html
@@ -23,6 +23,8 @@
     <link rel="manifest" href="/site.webmanifest">
     <link rel="canonical" href="{{ build_info.canonical_url.url }}">
     <title>{{ layout_title }}</title>
+    <script src="/js/hell.js"></script>
+    <script src="/js/capsule_js.bc.js"></script>
   </head>
   <body>
     <header>
@@ -141,5 +143,11 @@ <h3>Flux</h3>
         </div>
       </div>
     </footer>
+    <script>
+      nightmare_js.suspend(function () {
+          capsule_hljs.run();
+      });
+      nightmare_js.mount();
+    </script>
   </body>
 </html>
diff --git a/capsule.opam b/capsule.opam
@@ -21,6 +21,10 @@ depends: [
   "yocaml_yaml" {>= "2.0.0"}
   "yocaml_otoml" {>= "2.0.0"}
   "yocaml_runtime" {>= "2.0.0"}
+  "nightmare"
+  "nightmare-tyxml"
+  "nightmare_js"
+  "nightmare_js-vdom"
   "cmarkit"
   "mdx"
   "ppx_expect"
@@ -46,3 +50,10 @@ build: [
   ]
 ]
 dev-repo: "git+https://github.com/xvw/capsule.git"
+pin-depends: [
+  ["nightmare.dev" "git+https://github.com/funkywork/nightmare.git"]
+  ["nightmare-dream.dev" "git+https://github.com/funkywork/nightmare.git"]
+  ["nightmare-tyxml.dev" "git+https://github.com/funkywork/nightmare.git"]
+  ["nightmare_js.dev" "git+https://github.com/funkywork/nightmare.git"]
+  ["nightmare_js-vdom.dev" "git+https://github.com/funkywork/nightmare.git"]
+]
diff --git a/capsule.opam.template b/capsule.opam.template
@@ -0,0 +1,7 @@
+pin-depends: [
+  ["nightmare.dev" "git+https://github.com/funkywork/nightmare.git"]
+  ["nightmare-dream.dev" "git+https://github.com/funkywork/nightmare.git"]
+  ["nightmare-tyxml.dev" "git+https://github.com/funkywork/nightmare.git"]
+  ["nightmare_js.dev" "git+https://github.com/funkywork/nightmare.git"]
+  ["nightmare_js-vdom.dev" "git+https://github.com/funkywork/nightmare.git"]
+]
diff --git a/content/indexes/games.md b/content/indexes/games.md
@@ -0,0 +1,23 @@
+---
+page_title: Jeux vidéo
+description: 
+  Articles relatifs aux jeux vidéo, conception, développement et mécaniques
+synopsis:
+  Même si, depuis 2007, je joue largement moins aux jeux vidéo qu'à l'aube de mon
+  adolescence, je maintiens un intérêt tout particulier pour leur conception et
+  leur analyse. Ces expériences de conception se matérialisant souvent par des
+  embryons de projets destinés à rester à l'état de fœtus, j'ai décidé _d'essayer_
+  de leur donner un peu plus de consistance en les transformant en 
+  _notes ou articles_.
+breadcrumb:
+  - title: Technologies
+    url: /#index-technologies
+toc: false
+indexes:
+  - name: Mécaniques de jeux
+    synopsis: 
+      Articles décrivant (ou critiquant) des mécaniques de jeux.
+    links:
+      - title: L'infernal Tetra Master dans Final Fantasy 9
+        url: /pages/tetra-master.html
+---
diff --git a/content/indexes/index.md b/content/indexes/index.md
@@ -1,7 +1,32 @@
 ---
 page_title: Index
-description: Content
-synopsis: Synopsis
+description: Accueil du site xvw.lol
+synopsis: 
+  Bonjour, je m'appelle **Xavier Van de Woestyne**, et vous êtes sur
+  l'index de mon _site personnel_ (mais qui ne parle pas trop de 
+  _choses personnelles_, donc ça va). L'objectif de ce site est de proposer
+  une collection de pages, notes et indexes _discutablement organisés_
+  sur des sujets qui m'intéressent. Peut-être qu'un jour, elle sera
+  descriptible comme **une encyclopédie maladroite et _capharnaümesque_**
+  de ce que je sais (mais c'est probablement fantasmer sur ma fréquence 
+  d'écriture).
+indexes:
+  - name: Technologies
+    synopsis: 
+        Notes et projets _plus-ou-moins_ organisés relatifs à la technologie — 
+        incluant la programmation. Depuis plusieurs années, la programmation 
+        (idéalement **fonctionnelle et statiquement typée**) est mon activité 
+        principale. Cette section sera donc, probablement, la plus souvent 
+        mise à jour.
+    links:
+        - title: Programmation
+          url: https://xvw.lol/programming.html
+        - title: Jeux vidéo
+          url: /games.html
+toc: false
 ---
 
-Hello, I am an Index
+Vous me trouverez sur [Mastodon](https://merveilles.town/@xvw), sur
+[Github](https://github.com/xvw) et sur
+[X/Twitter](https://twitter.com/vdwxv) et, dans la _vrai vie_, à
+**Nantes**, parfois à **Bruxelles** et de temps en temps à **Paris**.
diff --git a/dune-project b/dune-project
@@ -34,6 +34,12 @@
   (yocaml_otoml (>= 2.0.0))
   (yocaml_runtime (>= 2.0.0))
 
+  ;; Nightmare dependencies
+  nightmare
+  nightmare-tyxml
+  nightmare_js
+  nightmare_js-vdom
+
   ;; Generator dependencies
   cmarkit
 

diff --git a/hell/README.md b/hell/README.md
@@ -0,0 +1,4 @@
+# Hell
+
+Compose with third-party libraries in the JavaScript
+ecosystem... hell!