Agg. Devlogs, Home; Lavoro tema WM

2022-08-29 15:41:44 +02:00 · 2022-08-29 15:41:44 +02:00 · 878825774b
parent a8e94cbd44
commit 878825774b
9 changed files with 233 additions and 103 deletions
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@ -0,0 +1,32 @@
+name: Build and Deploy with staticoso
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+  workflow_dispatch:
+
+jobs:
+  page_build:
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+
+    - name: Build
+      run: |
+        sudo apt update
+        sudo apt install software-properties-common
+        sudo add-apt-repository ppa:deadsnakes/ppa
+        sudo apt install python3.10 curl git
+        curl -sS https://bootstrap.pypa.io/get-pip.py | sudo python3.10
+        sudo pip3 install lxml
+        git clone --depth 1 https://gitlab.com/octtspacc/staticoso
+        python3.10 ./staticoso/Source/Build.py
+
+    - name: Deploy
+      uses: JamesIves/github-pages-deploy-action@v4
+      with:
+        folder: public
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -1,25 +1,25 @@
 image: alpine:latest

-before_script:
-  - apk update
-  - apk add python3 py3-pip npm go git
-  - pip3 install requests lxml
-  - npm install -g pug-cli
+before_script: |
+  apk update
+  apk add python3 py3-pip npm go git
+  pip3 install requests lxml
+  npm install -g pug-cli

 pages:
  stage: deploy
-  script:
-  - git clone --depth 1 https://github.com/LukeEmmet/html2gmi
-  - cd html2gmi
-  - go get github.com/LukeEmmet/html2gmi
-  - echo "#!/bin/sh" > ./html2gmi
-  - echo "cd $PWD; go run ." >> ./html2gmi
-  - chmod +x ./html2gmi
-  - PATH=$PATH:$PWD
-  - cd ..
-  - git clone --depth 1 https://gitlab.com/octtspacc/staticoso
-  - ./Scripts/Deploy.GitLab.sh
-  - ./Scripts/Deploy.Gemini.sh
+  script: |
+    git clone --depth 1 https://github.com/LukeEmmet/html2gmi
+    cd html2gmi
+    go get github.com/LukeEmmet/html2gmi
+    echo "#!/bin/sh" > ./html2gmi
+    echo "cd $PWD; go run ." >> ./html2gmi
+    chmod +x ./html2gmi
+    PATH=$PATH:$PWD
+    cd ..
+    git clone --depth 1 https://gitlab.com/octtspacc/staticoso
+    ./Scripts/Deploy.GitLab.sh
+    ./Scripts/Deploy.Gemini.sh
  artifacts:
    paths:
    - public
--- a/Assets/Assets/Pages/index.css
+++ b/Assets/Assets/Pages/index.css
@ -0,0 +1,41 @@
+.BlinkA {
+	Animation: BlinkerA 0.25s Step-Start Infinite;
+}
+@keyframes BlinkerA {
+	0% {Position: Absolute; Visibility: Hidden;}
+	50% {Position: Static; Visibility: Visible;}
+	100% {Position: Absolute; Visibility: Hidden;}
+}
+.BlinkO {
+	Animation: BlinkerO 0.25s Step-Start Infinite;
+}
+@keyframes BlinkerO {
+	0% {Position: Static; Visibility: Visible;}
+	50% {Position: Absolute; Visibility: Hidden;}
+	100% {Position: Static; Visibility: Visible;}
+}
+
+/*---   Credits: https://codepen.io/jh3y/pen/WNrXqYz   ---*/
+.WavyText {
+	Text-Align: Center;
+	Position: Absolute;
+	Left: 50%;
+	White-Space: NoWrap;
+	Transform: Translate(-50%, -50%) Translate(Calc(Var(--x, 0) * 1%), Calc(Var(--y, 0) * 1%));
+	font-variation-settings: 'wght' Var(--lower);
+	Margin: 0;
+}
+.WavyText Span {
+	Color: HSLA(300, 100%, 20%, Var(--alpha-l));
+	Animation: Rise 2.25s infinite ease-in-out;
+	Animation-Delay: Calc((Var(--index) - 6) * 0.225s);
+	Display: Inline-Block;
+}
+@keyframes Rise {
+	50% {
+		font-variation-settings: 'wght' Var(--upper);
+		Color: HSLA(300, 100%, 30%, Var(--alpha-u));
+		Transform: Translate(0, -15%);
+	}
+}
+/*---   --------------------------------------------   ---*/
--- a/Assets/Assets/WM.css
+++ b/Assets/Assets/WM.css
@ -6,7 +6,7 @@
 	--WindowPadding: 4px;
 	--WindowBorderSize: 4px;

-	--TitleBarHeight: 28px;
+	--TitleBarHeight: 32px;
 	--TitleBarForeground: #FFFFFF;
 	--TitleBarBackground: #2A0A3A;

@ -23,8 +23,10 @@ Body {
 	Margin: 0;
 	Padding: 0;
 	Overflow-Y: Hidden;
-	Background-Image: url(/home/octt/Dev/sitoctt-assets/public/Media/Backgrounds/Circles-Purple.png);
-	Background-Repeat: Repeat;
+}
+
+.NoDisplay {
+	Display: None;
 }

 /*--------------------------------------------------------*/
@ -42,8 +44,8 @@ Body {
 	Background: #EEE0FF;
 }
 .WindowContent {
-	Min-Width: Calc(100% + Var(--WindowPadding) + Var(--WindowPadding) + Var(--WindowBorderSize) + Var(--WindowBorderSize));
-	Padding: Var(--WindowPadding);
+	Min-Width: Calc(100% + Var(--WindowPadding)*2 + Var(--WindowBorderSize)*2);
+	Padding: Calc(Var(--WindowPadding)*2);
 	Overflow-Y: Auto;
 	Margin-Left: Calc(0px - Var(--WindowPadding) - Var(--WindowBorderSize));
 	Margin-Top: Var(--WindowBorderSize);
@ -59,14 +61,17 @@ Body {
 	Padding: Var(--WindowPadding);
 	Color: Var(--TitleBarForeground);
 	Background: Var(--TitleBarBackground);
-	Text-Align: Center;
 	Vertical-Align: Top;
 	Max-Height: Var(--TitleBarHeight);
 }
-.TitleBar > span:nth-child(1) {
+.TitleBarContent {
+	Text-Align: Center;
+}
+
+.TitleBarContent > Span:Nth-Child(1) {
 	Float: Left;
 }
-.TitleBar > span:nth-child(4) {
+.TitleBarContent > Span:Nth-Child(3) {
 	Float: Right;
 }

@ -85,15 +90,38 @@ Body {
 	Position: Fixed;
 	Left: 0px;
 	Bottom: Var(--TaskBarHeight);
-	Padding: Var(--WindowPadding);
+	Padding: Calc(Var(--WindowPadding)*2);
 	Color: Var(--TaskBarForeground);
 	Background: Var(--TaskBarBackground);
+	Max-Height: Calc(90vh - Var(--TaskBarHeight));
+	Overflow-Y: Scroll;
+}
+.TaskBarMenu A {
+	Color: #DDCCFF !Important;
 }
 .MenuButton {
 	Display: Inline-Block;
 	Height: 100%;
 }

+/*---   "Shade window" button   --------------------------*/
+.CheckToggle {
+	Position: Fixed;
+	Opacity: 0;
+	Visibility: Hidden;
+}
+.CheckLabel:Before {
+	Content: '🔼';
+}
+:Checked ~ .TitleBarContent > Span > .CheckLabel:Before {
+	Content: '🔽' !Important;
+}
+:Checked ~ .ToggleBox {
+	Display: None;
+	Visibility: Hidden;
+}
+/****   --------------------------------------------   ****/
+
 /*--------------------------------------------------------*/


@ -102,25 +130,9 @@ Body {
 *    Fritto Misto - Andrebbe ordinato                    *
 *--------------------------------------------------------*/

-.CheckLabel:Before {
-	Content: '🔼';
-}
-#MainWindowCheck {
-	Position: Fixed;
-	Opacity: 0;
-}
-
-:Checked ~ Span > .CheckLabel:Before {
-	Content: '🔽' !Important;
-}
-:Checked ~ .ToggleBox {
-	Display: None;
-	Visibility: Hidden;
-}
-
 /* No selezione */
 .NoSelect,
-.TitleBar,
+.TitleBarContent,
 .TaskBar,
 #TitlesWindow {
 	-webkit-touch-callout: none;
@ -139,7 +151,7 @@ Body {
 	Max-Height: 90vh;
 	Z-Index: 16;
 }
-#MainWindow > .WindowContent {
+#MainWindow .WindowContent {
 	Max-Height: Calc(90vh - Calc(Var(--TitleBarHeight) * 2) - Var(--WindowPadding));
 }

@ -151,7 +163,7 @@ Body {
 	Max-Height: 60vh;
 	Z-Index: 8;
 }
-#TitlesWindow > .WindowContent {
+#TitlesWindow .WindowContent {
 	Max-Height: Calc(60vh - Calc(Var(--TitleBarHeight) * 2) - Var(--WindowPadding));
 }

--- a/Assets/Assets/sitoctt.css
+++ b/Assets/Assets/sitoctt.css
@ -32,6 +32,13 @@ Body {
 	Overflow-Wrap: Break-Word;
 }

+.NoDisplay {
+	Display: None;
+}
+.NoCol {
+	Color: Transparent !Important;
+}
+
 /*--------------------------------------------------------*/


@ -55,12 +62,6 @@ Summary > H1, Summary > H2, Summary > H3, Summary > H4, Summary > H5, Summary >
 	Display: Inline;
 }

-.NoDisplay {
-	Display: None;
-}
-.NoCol {
-	Color: Transparent !Important;
-}
 A {
 	Color: #D000D0;
 }
@ -96,16 +97,16 @@ Pre.Code, .CodeScroll {
 	Padding-Bottom: 16px;
 }

-#MainBox A:not(
+#MainBox A:Not(
 	.NoLinkLink, .NoLinkLink A,
 	.SectionLink A,
 	#StatCounter A,
-	#RingsDiv A,
-	.SectionTitle > A
-)::Before {
+	#RingsDiv A
+):Before {
 	Content: '🔗 ';
 }

+/* Clickable link at the left of every section title */
 .SectionTitle:Target {
 	Color: #EEDDFF !Important;
 	Background: #700070 !Important;
@ -407,29 +408,4 @@ H1, H2, H3, A, Img, Video, Summary {
 	100% {Position: Static; Visibility: Visible;}
 }

-/*---   Credits: https://codepen.io/jh3y/pen/WNrXqYz   ---*/
-.WavyText {
-	Text-Align: Center;
-	Position: Absolute;
-	Left: 50%;
-	White-Space: NoWrap;
-	Transform: Translate(-50%, -50%) Translate(Calc(Var(--x, 0) * 1%), Calc(Var(--y, 0) * 1%));
-	font-variation-settings: 'wght' Var(--lower);
-	Margin: 0;
-}
-.WavyText Span {
-	Color: HSLA(300, 100%, 20%, Var(--alpha-l));
-	Animation: Rise 2.25s infinite ease-in-out;
-	Animation-Delay: Calc((Var(--index) - 6) * 0.225s);
-	Display: Inline-Block;
-}
-@keyframes Rise {
-	50% {
-		font-variation-settings: 'wght' Var(--upper);
-		Color: HSLA(300, 100%, 30%, Var(--alpha-u));
-		Transform: Translate(0, -15%);
-	}
-}
-/*---   --------------------------------------------   ---*/
-
 /*--------------------------------------------------------*/
--- a/Pages/Devlogs.md
+++ b/Pages/Devlogs.md
@ -18,6 +18,65 @@ _Ovviamente, scriverò soltanto la roba interessante, non tutto quello che facci

 <div markdown="1" class="BorderBoxContainer">

+<details markdown="1"><summary>
+#### [2022-08-29] Titoli delle sezioni, ma ancora meglio </summary>
+-> #staticoso #sitoctt
+
+Soprattutto a causa della necessità di rendere **staticoso** leggermente più adatto alla creazione di siti di documentazione, oltre che di blog e cose così, ho sentito di dover apportare **qualche miglioramento** alla generazione dei _✨magici✨_ **titoli delle sezioni**.
+
+Ispirandomi parzialmente a cosa fa [mdBook](https://rust-lang.github.io/mdBook){[:MdTgtBlank:]}, ho aggiunto un **target ancora** (`<a>`) al fianco di ogni heading nel testo.  
+mdBook rende ogni titolo un link in sé; soluzione elegante ed intuitiva per copiare un link alla sezione all'istante, ma che può dare (da) problemi grossi in certi casi. Ad esempio, le sezioni `<details>`, _che io tanto amo_, diventerebbero difficili da aprire, perché gran parte della loro hitbox sarebbe coperta da quella di un link.  
+Dovevo inventarmi qualcos'altro.
+
+A livello di **HTML**, allora, staticoso genera per ogni titolo la seguente struttura: elemento heading, che contiene prima un elemento span racchiudente l'ancora, a sua volta contenente il semplice testo `»`, e poi un altro span (con id univoco) che ha il titolo in sé.  
+Facendo un esempio pratico, questo è cosa esce fuori:  
+<pre class="CodeScroll"><code>
+&lt;h1 class="SectionHeading">
+	&lt;span class="SectionLink">
+		&lt;a href="#-Titolo-di-esempio">
+			&lt;span>»&lt;/span>
+		&lt;/a>
+	&lt;/span>
+	&lt;span class="SectionTitle" id="-Titolo-di-esempio">
+		Titolo di esempio
+	&lt;/span>
+&lt;/h1>
+</code></pre>
+
+Senza CSS, i titoli sulla pagina renderizzata si vedono come al solito, eccetto per il fatto che hanno un carattere `»` cliccabile alla loro sinistra. Andrebbe bene già così, ma ovviamente io avevo la **personalizzazione** in mente da subito.  
+Sul tema principale del **sitoctt**, infatti, ho personalizzato la cosa in modo da avere:
+
+- L'emoji della catena (`🔗`) come carattere per il link;
+- Il posizionamento un po' a sinistra del tastino, per far rimanere i titoli in linea con il testo normale;
+- Opacità del carattere molto ridotta, e un po' meno ridotta quando il mouse/dito ci passa sopra;
+- Evidenziazione e sottolineatura di un heading attivato.
+
+In codice **CSS**, la mia visione si è tradotta in queste righe:  
+<pre class="CodeScroll"><code>
+.SectionTitle:Target {
+	Color: #EEDDFF !Important;
+	Background: #700070 !Important;
+	Text-Decoration: Underline;
+}
+.SectionLink {
+	Position: Absolute;
+	Left: -1.5em;
+	Opacity: 0.08;
+}
+.SectionLink:Hover {
+	Opacity: 0.8;
+}
+.SectionLink > A::Before {
+	Content: '🔗';
+}
+.SectionLink > A > Span {
+	Font-Size: 0;
+}
+</code></pre>
+
+In tutta onestà, lo ripeto: forse per il sitoctt questa cosa non serviva; ma, per la [**documentazione di staticoso**](https://gitlab.com/octtspacc/staticoso-docs){[:MdTgtBlank:]}, credo **sarà utilissima**.
+</details>
+
 <details markdown="1"><summary>
 #### [2022-08-24] Titoli delle sezioni - ora ovunque </summary>
 -> #sitoctt
--- a/Pages/index.pug
+++ b/Pages/index.pug
@ -1,5 +1,7 @@
 // % Title = 🏠 ~Home~
 // % HTMLTitle = <span class="twa twa-house"><span>🏠</span></span> ~Home~
+// // % Template = WM.html
+// % Style = @import "[staticoso:Site:RelativeRoot]Assets/Pages/index.css";
 // % Index = True
 // % Order = 10
 // % Image = [staticoso:Folder:*:AbsoluteRoot]/sitoctt-assets/RichPreview/index.png
@ -14,7 +16,7 @@ p
 	|  nel...

 // Credits: https://codepen.io/jh3y/pen/WNrXqYz
-div
+div(style='Position:Relative;')
 	br
 	h1(class='NoTitle WavyText' style='--x: 6; --y: -6;')
 		for letter, index in '✨sitoctt✨'.split('')
@ -48,18 +50,23 @@ p
 	| Gli aggiornamenti al sito sono di diverso tipo: la pubblicazione di nuovi articoli di blog succede, boh, 3 volte al mese, è una buona idea usare i #[a(href='#-Feed-e-notifiche') feed] che metto a disposizione; le modifiche per pagine normali sono continue e avvengono a caso, quindi dovresti controllare magari ogni settimana quelle che ti interessano, se ti aspetti novità.

 p
-	| Ah, non so se hai notato, ma (da Web) negli angoli in alto dello schermo ci sono dei tastini. Lo sto scrivendo perché ho paura non si capisca, che devo fare... Vabbe, se premi lì puoi accedere ai menu ad albero, rispettivamente delle pagine del sito a sinistra (<big class='twa twa-books'><span>📚</span></big>),
-	| e delle sezioni della pagina a destra (<big class='twa twa-bookmark-tabs'><span>📑</span></big>).
-	| Quello di sinistra soprattutto è importante per navigare il sito.
+	| #[b Da tenere a mente] (da Web): quando ci sono per lo schermo i seguenti tastini, è perché possono nascondere menu collassabili.
+	| Possono stare in posizioni diverse su pagine diverse, perché mi piace sperimentare con diversi temi; però cerco di mantenere il loro significato coerente ovunque.
+	br
+	| Un'icona con l'emoji di una pila di libri (<big class='twa twa-books'><span>📚</span></big>) segnala il menu principale del sito, fondamentale per poterlo navigare saltando tra pagine completamente diverse e non collegate.
+	| Invece, l'icona con l'emoji di un foglio con un segnalibro (<big class='twa twa-bookmark-tabs'><span>📑</span></big>) indica l'elenco delle sezioni della pagina corrente - non è essenziale, ma può tornare utile per saltare tra parti diverse di un lungo testo.

 p
-	| A tal proposito, per la migliore esperienza #[span(style='Color:#d00000;') DEVI] usare un browser con supporto almeno a CSS3 e alle immagini in formato AVIF. Se usi un browser antico ti garantisco che troverai troppa roba rotta (ma comunque il sito sarà navigabile lo stesso).
+	| A tal proposito, per la migliore esperienza #[span(style='Color:#d00000;') DEVI] usare un browser con supporto almeno a CSS3 e alle immagini in formato AVIF (quest'ultima cosina, almeno finché non riesco a far funzionare il polyfill).
+	| Se usi un browser antico ti garantisco che troverai tanta, tanta roba rotta (ma comunque il sito dovrebbe essere navigabile lo stesso).
 	br
 	| Essendo che questo sito contiene immagini AVIF, assicurati che il tuo browser sia aggiornato e decente. Safari di Apple, per esempio, mi dicono che non supporta AVIF, quindi #[span(style='Color:#d00000;') buttalo via].
 	br
-	| Preferibilmente non usare Chromium, che ha degli strani memory leak su pagine con animazioni complesse, oltre ad andare a scatti. Firefox non ha questo problema, ma usa molto di più la CPU.
+	| Preferibilmente #[i non] usare Chromium, che ha degli strani memory leak su pagine con animazioni complesse, e ha qualche #[i glitch particolare]. #[b Firefox] non ha questo problema, ma usa molto di più la CPU.
 	br
 	| Direi che la scelta non è tra il migliore ma tra il meno peggio..
+	br
+	i Nota: se scegli Firefox, non usare la versione ESR! È per sua natura vecchia, fossilizzata, e manca sempre di funzionalità moderne - per esempio, al giorno d'oggi ancora non supporta AVIF.

 h3 Script client-side

--- a/Site.ini
+++ b/Site.ini
@ -4,7 +4,6 @@ BlogName = blogoctt
 Template = sitoctt.html
 Lang = it
 Minify = True
-# AutoCategories = False

 [Markdown]
 Exts = ('attr_list', 'def_list', 'footnotes', 'markdown_del_ins', 'md_in_html', 'mdx_subscript', 'mdx_superscript', 'tables')
--- a/Templates/WM.html
+++ b/Templates/WM.html
@ -3,8 +3,8 @@
 <head>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<!-- <link rel="stylesheet" href="[staticoso:Site:RelativeRoot]Assets/WM.css"> -->
-	<link rel="stylesheet" href="../Assets/Assets/WM.css">
+	<link rel="stylesheet" href="[staticoso:Site:RelativeRoot]Assets/WM.css">
+	<!-- <link rel="stylesheet" href="../Assets/Assets/WM.css"> -->
 	<link href="[staticoso:Folder:*:AbsoluteRoot]/sitoctt-assets/Fonts/SpaceMono/Style.css" rel="stylesheet">
 	<link rel="alternate" type="application/atom+xml" title="Feed Atom" href="[staticoso:Site:RelativeRoot]feed/atom.xml">
 	<link rel="alternate" type="application/rss+xml" title="Feed RSS" href="[staticoso:Site:RelativeRoot]feed/rss.xml">
@ -18,8 +18,12 @@
 	<meta property="og:image" content="[staticoso:Page:Image]">
 	<style>
 		[staticoso:Page:Style]
+		Body {
+			Background: url([staticoso:Folder:*:AbsoluteRoot]/sitoctt-assets/Media/Backgrounds/Circles-Purple.png), #5C00CA;
+			Background-Repeat: Repeat;
+		}
 	</style>
-	<!-- [staticoso:DynamicPart:*/Head] -->
+	[staticoso:DynamicPart:*/Head]
 	<script src="[staticoso:Site:RelativeRoot]Assets/AVIF-Polyfill/index.js"></script>
 </head>
 <!-- TitleBar: <span> - ❌ </span> <span> [staticoso:Page:Title] </span> <span> 🔺 🔼 ⬜ 🔷 </span> -->
@ -27,31 +31,31 @@
 <div class="TaskBar">
 	<details>
 		<summary><span class="MenuButton"><big><b>[<span class="twa twa-books"><span>📚</span></span>] Menu</b></big></span><br><br></summary>
-		<div>
+		<div class="TaskBarMenu">
 			[staticoso:Site:Menu]
 		</div>
 	</details>
 </div>
 <div class="Window" id="MainWindow">
 	<div class="TitleBar">
-		<input type="checkbox" id="MainWindowCheck">
-		<span> <label class="CheckLabel" id="MainWindowCheckLabel" for="MainWindowCheck"></label> </span> &nbsp; <span> <b>[staticoso:Page:Title]</b> </span> &nbsp; <span> <span class="twa twa-pencil"><span>✏️</span></span> </span>
-		<div class="WindowContent ToggleBox" id="MainWindowContent">
+		<input type="checkbox" class="CheckToggle" id="MainWindowCheck">
+		<div class="TitleBarContent">
+			<span> <label class="CheckLabel" id="MainWindowCheckLabel" for="MainWindowCheck"></label> </span> &nbsp;&nbsp; <span> <b>[staticoso:Page:Title]</b> </span> &nbsp;&nbsp; <span> <span class="twa twa-pencil"><span>✏️</span></span> </span>
+		</div>
+		<div class="WindowContent ToggleBox">
 			[staticoso:Page:Content]
 		</div>
 	</div>
-<!--
-	<div class="WindowContent ToggleBox" id="MainWindowContent">
-		[staticoso:Page:Content]
-	</div>
-->
 </div>
 <div class="Window" id="TitlesWindow">
 	<div class="TitleBar">
-		<span> 🔼 </span> &nbsp; <span> <b>Sezioni</b> </span> &nbsp; <span> <span class="twa twa-bookmark-tabs"><span>📑</span></span> </span>
-	</div>
-	<div class="WindowContent" id="MainWindowContent">
-		[staticoso:Page:Chapters]
+		<input type="checkbox" class="CheckToggle" id="TitlesWindowCheck">
+		<div class="TitleBarContent">
+			<span> <label class="CheckLabel" id="TitlesWindowCheckLabel" for="TitlesWindowCheck"></label> </span> &nbsp;&nbsp; <span> <b>Sezioni</b> </span> &nbsp;&nbsp; <span> <span class="twa twa-bookmark-tabs"><span>📑</span></span> </span>
+		</div>
+		<div class="WindowContent ToggleBox">
+			[staticoso:Page:Chapters]
+		</div>
 	</div>
 </div>
 </div>