Gotta start somewhere!

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">&#9776;</label>
+#+HTML:   <input type="checkbox" id="hamburger"/>
+#+INCLUDE: topnav-items.org :lines "3-"
+#+HTML: </nav>