From 878825774be6d49bdd4a31ece74e16da7b013d8e Mon Sep 17 00:00:00 2001 From: octospacc Date: Mon, 29 Aug 2022 15:41:44 +0200 Subject: [PATCH] Agg. Devlogs, Home; Lavoro tema WM --- .github/workflows/main.yml | 32 +++++++++++++++++ .gitlab-ci.yml | 34 +++++++++--------- Assets/Assets/Pages/index.css | 41 +++++++++++++++++++++ Assets/Assets/WM.css | 68 ++++++++++++++++++++--------------- Assets/Assets/sitoctt.css | 46 ++++++------------------ Pages/Devlogs.md | 59 ++++++++++++++++++++++++++++++ Pages/index.pug | 19 ++++++---- Site.ini | 1 - Templates/WM.html | 36 ++++++++++--------- 9 files changed, 233 insertions(+), 103 deletions(-) create mode 100644 .github/workflows/main.yml create mode 100644 Assets/Assets/Pages/index.css diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 0000000..949792d --- /dev/null +++ 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 diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 2db9849..b3218ee 100644 --- 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 diff --git a/Assets/Assets/Pages/index.css b/Assets/Assets/Pages/index.css new file mode 100644 index 0000000..c934533 --- /dev/null +++ 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%); + } +} +/*--- -------------------------------------------- ---*/ diff --git a/Assets/Assets/WM.css b/Assets/Assets/WM.css index 305d6ca..d99f0e1 100644 --- 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)); } diff --git a/Assets/Assets/sitoctt.css b/Assets/Assets/sitoctt.css index 21af11f..d3e4c80 100644 --- 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%); - } -} -/*--- -------------------------------------------- ---*/ - /*--------------------------------------------------------*/ diff --git a/Pages/Devlogs.md b/Pages/Devlogs.md index e63a145..fe1b414 100644 --- a/Pages/Devlogs.md +++ b/Pages/Devlogs.md @@ -18,6 +18,65 @@ _Ovviamente, scriverò soltanto la roba interessante, non tutto quello che facci
+
+#### [2022-08-29] Titoli delle sezioni, ma ancora meglio +-> #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** (``) 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 `
`, _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: +

+<h1 class="SectionHeading">
+	<span class="SectionLink">
+		<a href="#-Titolo-di-esempio">
+			<span>»</span>
+		</a>
+	</span>
+	<span class="SectionTitle" id="-Titolo-di-esempio">
+		Titolo di esempio
+	</span>
+</h1>
+
+ +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: +

+.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;
+}
+
+ +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**. +
+
#### [2022-08-24] Titoli delle sezioni - ora ovunque -> #sitoctt diff --git a/Pages/index.pug b/Pages/index.pug index e570a2f..bb6511a 100644 --- a/Pages/index.pug +++ b/Pages/index.pug @@ -1,5 +1,7 @@ // % Title = 🏠 ~Home~ // % HTMLTitle = 🏠 ~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 (📚), - | e delle sezioni della pagina a destra (📑). - | 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 (📚) 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 (📑) 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 diff --git a/Site.ini b/Site.ini index 5523572..0592687 100644 --- 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') diff --git a/Templates/WM.html b/Templates/WM.html index f228c2f..48d6b0f 100644 --- a/Templates/WM.html +++ b/Templates/WM.html @@ -3,8 +3,8 @@ - - + + @@ -18,8 +18,12 @@ - + [staticoso:DynamicPart:*/Head] @@ -27,31 +31,31 @@
[📚] Menu

 -
+
[staticoso:Site:Menu]
- -   [staticoso:Page:Title]   ✏️ -
+ +
+    [staticoso:Page:Title]    ✏️ +
+
[staticoso:Page:Content]
-
- 🔼   Sezioni   📑 -
-
- [staticoso:Page:Chapters] + +
+    Sezioni    📑 +
+
+ [staticoso:Page:Chapters] +