diff options
| -rw-r--r-- | .gitignore | 8 | ||||
| -rw-r--r-- | README.org | 32 | ||||
| -rw-r--r-- | about.org | 19 | ||||
| -rw-r--r-- | index.org | 38 | ||||
| -rw-r--r-- | posts/test-post.org | 10 | ||||
| -rw-r--r-- | publish-mlnp.org | 146 | ||||
| -rw-r--r-- | resources/css.org | 256 | ||||
| -rw-r--r-- | resources/topnav.org | 6 |
8 files changed, 515 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..80d20f5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +# .gitignore for mlnp.fr + +# All HTML and CSS should be generated from Org files, NO EXCEPTIONS. +*.html +*.css + +# Topnav items are generated upon export by the Org publish sitemap. +resources/topnav-items.org
\ No newline at end of file diff --git a/README.org b/README.org new file mode 100644 index 0000000..f4a00ca --- /dev/null +++ b/README.org @@ -0,0 +1,32 @@ +#+TITLE: README +#+SUBTITLE: README for this blog. +#+AUTHOR: Marius Peter +#+DATE: <2022-01-23 Sun> +#+OPTIONS: num:nil toc:nil + +#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="resources/mlnp.css" /> +#+INCLUDE: resources/topnav.org +#+TOC: headlines 3 + + +* TODOs + +** TODO Fix =make= process + +Makefile should call =publish.el= which contains necessary org-publish +definitions. + + +* Website structure + + The website's structure is described in the following sections. + +** =index.org= + +** =static/= + +*** =css/= + +*** =images/= + +** =README.org= diff --git a/about.org b/about.org new file mode 100644 index 0000000..dd1fc23 --- /dev/null +++ b/about.org @@ -0,0 +1,19 @@ +#+TITLE: About +#+SUBTITLE: About this website. +#+AUTHOR: Marius Peter +#+DATE: <2022-01-28 Fri> +#+OPTIONS: num:nil toc:nil + +#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="resources/mlnp.css" /> +#+INCLUDE: resources/topnav.org + + +* About + +** This blog + +This blog serves + +** The author + +I'm a junior aerospace systems engineer currently working in France. diff --git a/index.org b/index.org new file mode 100644 index 0000000..580b88d --- /dev/null +++ b/index.org @@ -0,0 +1,38 @@ +# -*- mode: org; -*- + +#+TITLE: Home +#+SUBTITLE: A personal blog written in [[https://orgmode.org/][Org mode]]. +#+AUTHOR: Marius Peter +#+DATE: <2022-01-23 Sun> Updated <2022-01-31 Mon> +#+EMAIL: mlnp@tuta.io +#+OPTIONS: num:nil toc:nil + +#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="resources/mlnp.css" /> +#+INCLUDE: resources/topnav.org + + +* Recent posts + +- This is a list +- Foobar +- Third item + + +* Projects + + +* Publishing this website + +This entire website is built with [[https://orgmode.org/][Org mode]], an Emacs mode designed for +literate programming among other things. Using Org mode for designing, +building and publishing a website brings the following benefits: + +- Work within Emacs :: This advantage concerns existing Emacs users. +- Literate programming :: Org files contain a mix of plain text + associated with documentation, and code that can be executed. A + documentation-centered workflow encourages us to describe our + thought process as we write a program, this increases the likelihood + of remembering why a particular piece of code was written. + +The entire website publication flow is described here: +[[file:publish-mlnp.org]]. diff --git a/posts/test-post.org b/posts/test-post.org new file mode 100644 index 0000000..39ab9a2 --- /dev/null +++ b/posts/test-post.org @@ -0,0 +1,10 @@ +# -*- mode: org; -*- + +#+TITLE: First post +#+AUTHOR: Marius Peter +#+DATE: <2022-01-27 Thu> + + +* First section + +First body. diff --git a/publish-mlnp.org b/publish-mlnp.org new file mode 100644 index 0000000..2ea510b --- /dev/null +++ b/publish-mlnp.org @@ -0,0 +1,146 @@ +# -*- mode: org; -*- + +#+TITLE: Publish +#+SUBTITLE: Publishing this very website. +#+AUTHOR: Marius Peter +#+DATE: <2022-01-26 Wed> +#+OPTIONS: toc:nil + +#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="resources/mlnp.css" /> +#+INCLUDE: resources/topnav.org +#+TOC: headlines 3 + + +#+begin_abstract +In the spirit of [[https://en.wikipedia.org/wiki/Literate_programming][literate programming]] encouraged by Org mode, this +entire website's build process is documented on this very page. When +Emacs builds this website, it parses and executes the code blocks +contained on this page. By mixing behavior with the behavior's +documentation, we can future-proof our understanding of the build +logic, making it possible to efficiently revisit this website at a +later date in order to bring improvements. +#+end_abstract + + +* Publishing targets + +This first section lays out the interactive prompts used to bind +export-related symbols with the following publishing targets: + +- location :: Where should the website be published? +- components :: What parts of the website should be built? + + +** Location + +Two possible publishing locations are considered: + +- Local :: The website would be built on the local machine. +- Remote :: The website would be built on a remote server, after + uploading the selected files via ssh. + +#+NAME: org-publish-location +#+BEGIN_SRC elisp + (setq org-publish-location + (read-answer + "Should the website be built on the local or remote target? " + '(("~/tmp-mlnp.fr/" + ?l "build website on the local machine") + ("/ssh:root@192.162.71.223:/var/www/html/mlnp.fr/" + ?r "build website on the remote machine")))) +#+END_SRC + + +** Components + +#+NAME: org-publish-components +#+begin_src elisp + (setq org-publish-components + (read-answer + "Which `org-publish-project-alist' component should be built? " + '(("content" + ?c "build content (html) website components") + ("all" + ?a "build all website components")))) +#+end_src + + + +* Resources + +This section explores the =.css= and (maybe later) =.js= resources +available on the website. + + +** CSS + +The main CSS file is located at [[file:resources/css.org]]. + + +* Project components + +The ~org-publish-project-alist~ variable is used by ~org-publish~ to +identify website components and their properties upon export. + +#+NAME: org-publish-project-alist +#+BEGIN_SRC elisp + (require 'ox-publish) + (setq org-publish-project-alist + `(("site" + :base-directory "./" + :base-extension "org" + :publishing-directory ,org-publish-location + :recursive nil ; Top-level pages are all in top-level org directory. + :publishing-function org-html-publish-to-html + :auto-sitemap t + :sitemap-filename "resources/topnav-items.org" + :sitemap-title "Top-level site links") + ("posts" + :base-directory "posts/" + :base-extension "org" + :publishing-directory ,(concat org-publish-location "posts/") + :recursive t + :publishing-function org-html-publish-to-html) + ("styles" + :base-directory "resources/" + :base-extension "css" + :publishing-directory ,(concat org-publish-location "resources/") + :publishing-function org-publish-attachment) + ("images" + :base-directory "images/" + :base-extension "jpg\\|gif\\|png\\|svg" + :publishing-directory ,(concat org-publish-location "images/") + :recursive t + :publishing-function org-publish-attachment) + ("content" + :components ("site" + "posts")) + ("all" + :components ("content" + "styles" + "images")))) +#+END_SRC + + +* Main publishing logic + +This is the main publishing logic. Execute the following source block +to build the entire website. + +#+NAME: main +#+BEGIN_SRC elisp :noweb no-export + <<org-publish-location>> + <<org-publish-components>> + <<org-publish-html-preamble>> + + <<org-publish-project-alist>> + + (org-babel-tangle-file "resources/css.org") + + (org-publish-remove-all-timestamps) + (org-publish org-publish-components) +#+END_SRC + +Open the website. + +[[file:~/tmp-mlnp.fr/index.html]] diff --git a/resources/css.org b/resources/css.org new file mode 100644 index 0000000..2067f02 --- /dev/null +++ b/resources/css.org @@ -0,0 +1,256 @@ +# -*- mode: org; -*- + +#+TITLE: Global CSS file +#+SUBTITLE: Site-wide styling informations. +#+AUTHOR: Marius Peter +#+DATE: <2022-01-30 Sun> +#+OPTIONS: toc:nil +#+PROPERTY: header-args :tangle mlnp.css + +#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="mlnp.css" /> +#+INCLUDE: topnav.org +#+TOC: headlines 3 + + +* Global appearance + +These styles apply across the entire =mlnp.fr= website, to every +element. + +#+BEGIN_SRC css + body { + font-family: "Public Sans", sans-serif; + background: linear-gradient(0deg, white 0%, gray 70%); + background-attachment: fixed; + margin: 0; + } +#+END_SRC + + +** Colors + +These colors can be accessed anywhere in the rest of the stylesheet. + +#+NAME: colors +#+BEGIN_SRC css + :root { + --topnav: cornflowerblue; + --topnav-menu: royalblue; + } +#+END_SRC + + +** TODO Fonts + +Add @ rules and set + +#+NAME: fonts +#+BEGIN_SRC css + code, .src { + font-family: "Hack", sans-serif; + } +#+END_SRC + + + +** Entire content + +This rule concerns all content except for the title section and +postamble. + +#+BEGIN_SRC css + .outline-2, .abstract { + width: 70%; + margin-right: auto; + margin-left: auto; + } +#+END_SRC + + +** Title and subtitle + +#+BEGIN_SRC css + .title { + background: cornflowerblue; + color: white; + margin-top: 0; + padding-top: 0.5em; + margin-bottom: 0; + padding-bottom: 0; + } + .subtitle { + color: lightgray; + } +#+END_SRC + + +** Table of contents + +#+BEGIN_SRC css + #table-of-contents { + width: 20%; + /* position: sticky; */ + top: 5em; + display: inline-block; + vertical-align: top; + } + #text-table-of-contents ul { + list-style-type: none; + padding: 0; + } +#+END_SRC + + +* Top navigation bar + +The HTML preamble contains a single child: the /navigation bar/. This +bar contains a link to the homepage, and links to the other top-level +website pages. + +#+NAME: navbar +#+BEGIN_SRC css + #topnav { + background: var(--topnav); + z-index: 100; + position: sticky; + top: 0; + } +#+END_SRC + + +** Wide screens + +#+BEGIN_SRC css + #topnav ul { + display: flex; + list-style-type: none; + justify-content: center; + padding: 0.5em; + margin: 0; + } + #topnav ul a { + /* flex-grow: 1; */ + /* flex-basis: 0; */ + padding: 0.5em; + color: lightgray; + text-align: center; + } + #topnav a:hover { + background: white; + color: var(--topnav-menu); + } +#+END_SRC + + +*** Hide home and hamburger icons + +When the top navigation bar is wide, the hamburger menu is hidden. + +#+NAME: topnav-wide-hidden +#+BEGIN_SRC css + #home { display: none; } + #topnav label, #hamburger { display: none; } +#+END_SRC + + +** Narrow screens + +These styles apply to screens narrower than 500px. + +#+BEGIN_SRC css :noweb no-export + @media all and (max-width: 500px) { + <<narrow-topnav>> + <<narrow-home>> + <<narrow-hamburger>> + <<narrow-topnav-links>> + <<narrow-table-of-contents>> + <<narrow-content>> + } +#+END_SRC + + +*** Narrow top navigation bar + +#+NAME: narrow-topnav +#+BEGIN_SRC css :tangle no + #topnav { + padding: 0.5em; + } +#+END_SRC + + + +*** Narrow home link + +#+NAME: narrow-home +#+BEGIN_SRC css :tangle no + #home { + display: inline-block; + background: var(--topnav-menu); + color: white; + text-decoration: none; + border-radius: 0 8px 8px 0; + padding: 0.5em; + } +#+END_SRC + + +*** Narrow hamburger + +#+NAME: narrow-hamburger +#+BEGIN_SRC css :tangle no + #topnav label { + display: inline-block; + float: right; + color: white; + padding: 0.5em; + margin: 0; + background: var(--topnav-menu); + border-radius: 8px; + cursor: pointer; + } + #topnav label:hover { + color: var(--topnav-menu); + background: white; + } + #topnav ul { display: none; } + #topnav input:checked ~ ul { + display: block; + width: 100%; + margin: 0; + } +#+END_SRC + + +*** TODO Narrow top navigation links + +#+NAME: narrow-topnav-links +#+BEGIN_SRC css :tangle no + #topnav ul { + padding: 0; + } + #topnav ul a { + box-sizing: border-box; + display: block; + } +#+END_SRC + + +*** Narrow table of contents + +#+NAME: narrow-table-of-contents +#+BEGIN_SRC css :tangle no + /* #table-of-contents { */ + /* display: none; */ + /* } */ +#+END_SRC + + +*** Narrow content + +#+NAME: narrow-content +#+BEGIN_SRC css :tangle no + .outline-2 { + width: 90%; + } +#+END_SRC diff --git a/resources/topnav.org b/resources/topnav.org new file mode 100644 index 0000000..a2c3f6a --- /dev/null +++ b/resources/topnav.org @@ -0,0 +1,6 @@ +#+HTML: <nav id="topnav"> +#+HTML: <a href="index.html" id="home"><code>home</code></a> +#+HTML: <label for="hamburger">☰</label> +#+HTML: <input type="checkbox" id="hamburger"/> +#+INCLUDE: topnav-items.org :lines "3-" +#+HTML: </nav> |