diff options
author | Thomas Letan <lthms@soap.coffee> | 2020-02-27 09:22:57 +0100 |
---|---|---|
committer | Thomas Letan <lthms@soap.coffee> | 2020-02-27 09:27:50 +0100 |
commit | 1a9268f141ac4234b2836d0207b1e87009821dd7 (patch) | |
tree | 849a707022a09fb5e62c25eb6931ccc5af876c2a /site/cleopatra | |
parent | Make a generation process prebuild depends on its tangled file (diff) |
Theme reloading
Diffstat (limited to 'site/cleopatra')
-rw-r--r-- | site/cleopatra/Bootstrap.org | 32 | ||||
-rw-r--r-- | site/cleopatra/Contents/Coq.org | 21 | ||||
-rw-r--r-- | site/cleopatra/Contents/Org.org | 24 | ||||
-rw-r--r-- | site/cleopatra/Soupault.org | 3 | ||||
-rw-r--r-- | site/cleopatra/Theme.org | 269 |
5 files changed, 194 insertions, 155 deletions
diff --git a/site/cleopatra/Bootstrap.org b/site/cleopatra/Bootstrap.org index 3d954e6..b1a76ff 100644 --- a/site/cleopatra/Bootstrap.org +++ b/site/cleopatra/Bootstrap.org @@ -56,17 +56,8 @@ In a nutshell, - ~ROOT~ :: Tell Emacs where the root of your website sources is, so that tangled output filenames can be given relative to it rather than the org files. So for - instance, the ~BLOCK_SRC~ headers for ~Makefile~ looks like - - #+BEGIN_SRC org -#+BEGIN_SRC makefile :tangle Makefile :noweb yes - #+END_SRC - - instead of, /e.g./, - - #+BEGIN_SRC org -#+BEGIN_SRC makefile :tangle ../../Makefile :noweb yes - #+END_SRC + instance, the ~BLOCK_SRC~ tangle parameter for ~Makefile~ looks like ~:tangle + Makefile~, instead of ~:tangle ../../Makefile~. - ~CLEODIR~ :: Tell *~cleopatra~* where its sources live. If you place it inside the ~site/~ directory (as it is intended), and you enable the use of ~org~ files to author @@ -76,7 +67,7 @@ In a nutshell, For this website, these constants are defined as follows. -#+BEGIN_SRC makefile :tangle Makefile :noweb tangle +#+BEGIN_SRC makefile :tangle Makefile :noweb no-export ROOT := $(shell pwd) CLEODIR := site/cleopatra #+END_SRC @@ -92,7 +83,7 @@ and providing rules to remove them. Long-term artifacts whose generation can be time consuming. They will only be removed by ~make cleanall~. -#+BEGIN_SRC makefile :tangle Makefile :noweb tangle +#+BEGIN_SRC makefile :tangle Makefile ARTIFACTS := build.log CONFIGURE := #+END_SRC @@ -128,7 +119,7 @@ restore it using ~git~. We define variables that ensure that the ~ROOT~ environment variable is set and ~tangle-org.el~ is loaded when using Emacs. -#+BEGIN_SRC makefile :tangle Makefile :noweb tangle +#+BEGIN_SRC makefile :tangle Makefile EMACSBIN := emacs EMACS := ROOT="${ROOT}" ${EMACSBIN} TANGLE := --batch \ @@ -140,7 +131,7 @@ Finally, we introduce a [[https://www.gnu.org/software/make/manual/html_node/Canned-Recipes.html#Canned-Recipes][canned recipe]] to seamlessly tangle a given file. -#+BEGIN_SRC makefile :tangle Makefile :noweb tangle +#+BEGIN_SRC makefile :tangle Makefile define emacs-tangle = echo " tangle $<" ${EMACS} $< ${TANGLE} @@ -155,7 +146,7 @@ processes. This chain is divided into three stages: ~prebuild~, ~build~, and This translates as follows in ~Makefile~. -#+BEGIN_SRC makefile :tangle Makefile :noweb tangle +#+BEGIN_SRC makefile :tangle Makefile default : postbuild ignore init : @@ -306,7 +297,7 @@ Eventually, the second step will be automated, but in the meantime this customization is mandatory. #+END_TODO -#+BEGIN_SRC makefile :tangle bootstrap.mk :noweb tangle :exports none +#+BEGIN_SRC makefile :tangle bootstrap.mk :noweb yes :exports none <<extends(IN="Theme.org", PROC="theme", AUX="templates/main.html site/style/main.sass")>> #+END_SRC @@ -329,7 +320,7 @@ Eventually, generation processes shall be allowed to produce specific ~soupault~ widgets to be integrated into ~soupault.conf~. #+END_TODO -#+BEGIN_SRC makefile :tangle bootstrap.mk :noweb tangle :exports none +#+BEGIN_SRC makefile :tangle bootstrap.mk :noweb yes :exports none <<extends(IN="Soupault.org", PROC="soupault", AUX="soupault.conf plugins/urls-rewriting.lua plugins/external-urls.lua site/style/plugins.sass scripts/history.sh templates/history.html package.json scripts/katex.js")>> #+END_SRC @@ -355,7 +346,7 @@ In the present website, contents can be written in the following format: [[./Contents/Org.org][Learn more about the generation process for Org documents]] -#+BEGIN_SRC makefile :tangle bootstrap.mk :noweb tangle :exports none +#+BEGIN_SRC makefile :tangle bootstrap.mk :noweb yes :exports none <<extends(IN="Contents/Coq.org", PROC="coq", AUX="site/style/coq.sass")>> <<extends(IN="Contents/Org.org", PROC="org", AUX="scripts/packages.el scripts/export-org.el site/style/org.sass")>> #+END_SRC @@ -367,8 +358,7 @@ In the present website, contents can be written in the following format: stages. #+END_TODO -#+BEGIN_SRC bash :tangle scripts/update-gitignore.sh :tangle-mode (identity #o755) -#!/bin/bash +#+BEGIN_SRC bash :tangle scripts/update-gitignore.sh :shebang "#+/bin/bash" BEGIN_MARKER="# begin generated files" END_MARKER="# begin generated files" diff --git a/site/cleopatra/Contents/Coq.org b/site/cleopatra/Contents/Coq.org index a792ef9..937467e 100644 --- a/site/cleopatra/Contents/Coq.org +++ b/site/cleopatra/Contents/Coq.org @@ -30,13 +30,22 @@ COQDOCARG := --no-index --charset utf8 --short \ #+BEGIN_SRC sass :tangle site/style/coq.sass div.code white-space: nowrap - overflow-x: auto - scrollbar-width: thin -pre - padding: .3em 0 .3em 0 - overflow-x: auto - scrollbar-width: thin +.doc + @include padding-centered + margin-top : 1em + margin-bottom : 1em + +.code + @include padding-centered + @include code-block + +.inlinecode + @include code-font + +h1, h2, h3, h4, h5, h6 + .inlinecode + font-size: 100% .code a[href] text-decoration: none diff --git a/site/cleopatra/Contents/Org.org b/site/cleopatra/Contents/Org.org index 8320ca1..2eac322 100644 --- a/site/cleopatra/Contents/Org.org +++ b/site/cleopatra/Contents/Org.org @@ -119,6 +119,17 @@ INIT := --batch --load="${ROOT}/scripts/packages.el" \ #+END_SRC #+BEGIN_SRC sass :tangle site/style/org.sass +.org-src-container + @include code-block + padding-top : .1rem + padding-bottom : .1rem + +.org-src-tangled-to, .org-src-name + @include padding-centered(4rem) + +.footdef + @include padding-centered + .footpara display: inline margin-left: .2em @@ -132,11 +143,6 @@ INIT := --batch --load="${ROOT}/scripts/packages.el" \ .section-number-6 display: none -.org-src-container - width: 100% - overflow-x: auto - scrollbar-width: thin - dl dt font-weight: bold @@ -144,17 +150,17 @@ dl margin-top: 0 .org-literate-programming + padding-top : 1rem + padding-bottom : 1rem .org-src-name - font-family: 'Fira Code', monospace + @include code-font font-weight: bold - font-size: 80% .org-src-tangled-to:before content: "той" .org-src-tangled-to - font-family: 'Fira Code', monospace + @include code-font font-weight: bold - font-size: 80% text-align: right #+END_SRC diff --git a/site/cleopatra/Soupault.org b/site/cleopatra/Soupault.org index a5703be..6b1ed58 100644 --- a/site/cleopatra/Soupault.org +++ b/site/cleopatra/Soupault.org @@ -9,7 +9,7 @@ soupault-build : @echo " run soupault" @soupault -serve : build +serve : soupault-prebuild @echo " start a python server" @cd build; python -m http.server 2>/dev/null @@ -419,6 +419,7 @@ main "$(cat)" "${1}" #+BEGIN_SRC sass :tangle site/style/plugins.sass #history table + @include margin-centered(2rem) border-top: 2px solid $primary-color border-bottom: 2px solid $primary-color border-collapse: collapse; diff --git a/site/cleopatra/Theme.org b/site/cleopatra/Theme.org index afe0934..0d7c5e8 100644 --- a/site/cleopatra/Theme.org +++ b/site/cleopatra/Theme.org @@ -17,19 +17,64 @@ ARTIFACTS += ${CSS} ${SASS} * Main HTML Template -#+NAME: js_lazyloading +#+BEGIN_SRC html :tangle templates/main.html :noweb no-export +<html lang="en"> + <<head>> + <<body>> +</html> +#+END_SRC + +** ~<head>~ + +#+NAME: head +#+BEGIN_SRC html :noweb no-export +<head> + <<encoding>> + <<viewport>> + <title></title> + <<syncloading_html>> + <<asyncloading_html>> +</head> +#+END_SRC + +*** Encoding + +#+NAME: encoding +#+BEGIN_SRC html +<meta charset="utf-8"> +#+END_SRC + +*** Viewport + +#+NAME: viewport +#+BEGIN_SRC html +<meta name="viewport" + content="width=device-width, initial-scale=1.0"> +#+END_SRC + +*** Assets Loading + +#+NAME: syncloading_html +#+BEGIN_SRC html +<link rel="stylesheet" href="/style/main.css"> +<link rel="icon" type="image/ico" href="/img/merida.webp"> +#+END_SRC + +#+NAME: asyncloading_js #+BEGIN_SRC js -let noscript = document.getElementById('lazyloading'); +let noscript = document.getElementById('asyncloading'); let resources = noscript.innerText.split('\n'); for (var ix in resources) { noscript.insertAdjacentHTML('beforebegin', resources[ix]); } + +noscript.parentNode.removeChild(noscript); #+END_SRC -#+NAME: html_lazyloading +#+NAME: asyncloading_html #+BEGIN_SRC html -<noscript id="lazyloading"> +<noscript id="asyncloading"> <link rel="stylesheet" href="/vendors/fira-code.2+swap/font.css"> <link rel="stylesheet" href="/vendors/et-book+swap/font.css"> <link rel="stylesheet" href="/vendors/katex.0.11.1+swap/katex.css"> @@ -38,38 +83,30 @@ for (var ix in resources) { </nolink> #+END_SRC -#+BEGIN_SRC html :tangle templates/main.html :noweb tangle -<html lang="en"> - <head> - <meta charset="utf-8"> - <title> <!-- set automatically, see soupault.conf --> </title> - <meta name="viewport" - content="width=device-width, initial-scale=1.0"> - <link rel="stylesheet" href="/style/main.css"> - <link rel="icon" type="image/ico" href="/img/merida.webp"> - <<html_lazyloading>> - </head> - <body id="default"> - <nav> - <ul> - <li> <a href="/news">News</a></li> - <li> <a href="/posts">Write-ups</a></li> - <li> <a href="/">About</a></li> - </ul> - </nav> - <header> - <img src="/img/merida.webp" - alt="Merida in the movie Ralph 2.0" /> - </header> - <main> - <!-- your page content will be inserted here, - see the content_selector option in soupault.conf --> - </main> - <script> - <<js_lazyloading>> - </script> - </body> -</html> +** ~body~ + +#+NAME: body +#+BEGIN_SRC html :noweb no-export +<body id="default"> + <nav> + <ul> + <li> <a href="/news">News</a></li> + <li> <a href="/posts">Write-ups</a></li> + <li> <a href="/">About</a></li> + </ul> + </nav> + <header> + <img src="/img/merida.webp" + alt="Merida in the movie Ralph 2.0" /> + </header> + <main> + <!-- your page content will be inserted here, + see the content_selector option in soupault.conf --> + </main> + <script> + <<asyncloading_js>> + </script> +</body> #+END_SRC * Main SASS File @@ -84,57 +121,72 @@ $todo-fg: #494130 $remark-bg: #c5dbe2 $remark-fg: #4d575e -* - box-sizing: border-box +$sans-serif : sans-serif -body, html - width: 100% - height: 100% - padding: 0 - margin: 0 - font-size: 100% +$document-width : 33rem + +@mixin padding-centered($inc: 0rem) + padding-left : calc(50% - #{$document-width} / 2 - #{$inc}) + padding-right : calc(50% - #{$document-width} / 2 - #{$inc}) + +@mixin margin-centered($inc: 0rem) + margin-left : calc(50% - #{$document-width} / 2 - #{$inc}) + margin-right : calc(50% - #{$document-width} / 2 - #{$inc}) + +@mixin text-font + font-family : et-book, serif + +@mixin code-font($size : .9rem) + font-family: 'Fira Code', monospace + font-size: $size + +@mixin code-block + @include padding-centered + @include code-font background: $bg-color - color: $text-fg-color - font-family: 'et-book', serif + color: $code-fg-color -h1, h2, h3, h4, h5, a[href] - color: $primary-color +* + box-sizing: border-box -h1, h2, h3, h4, h5 - font-family: sans-serif +html, body + margin : 0 + padding : 0 + width : 100% + height : 100% + font-size : 120% + @include text-font -h1 - text-align: center +code, tt + @include code-font -/* default */ +pre + @include code-font body#default - overflow-x: hidden - nav - padding-top: 1em - padding-bottom: 1em - width: 100% + @include margin-centered + padding-top : 1rem + padding-bottom : 1rem ul - padding: 0 - margin: 0 - width: 100% - display: flex - flex-direction: row - justify-content: center - list-style-type: none - - li - padding-left: .5em - padding-right: .5em - text-transform: uppercase - font-family: sans-serif - font-size: 130% - font-weight: bold - - a - text-decoration: none + padding : 0 + margin : 0 + width : 100% + display : flex + flex-direction : row + justify-content : center + list-style-type : none + + li + padding-left: .5em + padding-right: .5em + text-transform: uppercase + font-family: sans-serif + font-weight: bold + + a + text-decoration: none header text-align: center @@ -142,42 +194,39 @@ body#default img text-align: center border-radius: 50% - width: 125px + width: 150px main - max-width: 30em - margin: auto - padding: 0em 1em 1em 1em - font-size: 130% + h1 + text-align: center -body#default main .code, code, pre, .inlinecode, tt - font-family: 'Fira Code', monospace - color: $code-fg-color - font-size: 75% + h1, h2, h3, h4, h5, h6 + font-family : $sans-serif + code, tt + font-size: 100% -body#default - main - summary - color: $primary-color - font-weight: bold + h1, h2, h3, h4, h5, h6, p, summary + @include padding-centered + + dl, ul, ol + @include margin-centered @import coq, org - .TODO - background: $todo-bg - color: $todo-fg - .REMARK - background: $remark-bg - color: $remark-fg +.index + dt + font-weight : bold + color : $primary-color - .TODO, .REMARK - padding: 1em 1em 1em 1em + dd + margin-left : 0 + margin-bottom : 1em + + ol + margin-top: 0.3em - p - margin: 0 - p:not(:list-child) - margin-bottom: 1em +@import plugins /* VCARD (index.html) */ body#vcard @@ -208,20 +257,4 @@ body#vcard a color: $primary-color - -/* indexes */ - -.index - dt - font-weight: bold - color: $primary-color - - dd - margin-left: 0 - margin-bottom: 1em - - ol - margin-top: 0.3em - -@import plugins #+END_SRC |