[Org] Repository for my personal website.
Gotta start somewhere!
Changed files
.gitignore
@@ -0,0 +1,8 @@
1
Added:
# .gitignore for mlnp.fr
2
Added:
3
Added:
# All HTML and CSS should be generated from Org files, NO EXCEPTIONS.
4
Added:
*.html
5
Added:
*.css
6
Added:
7
Added:
# Topnav items are generated upon export by the Org publish sitemap.
8
Added:
resources/topnav-items.org
README.org
@@ -0,0 +1,32 @@
1
Added:
#+TITLE: README
2
Added:
#+SUBTITLE: README for this blog.
3
Added:
#+AUTHOR: Marius Peter
4
Added:
#+DATE: <2022-01-23 Sun>
5
Added:
#+OPTIONS: num:nil toc:nil
6
Added:
7
Added:
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="resources/mlnp.css" />
8
Added:
#+INCLUDE: resources/topnav.org
9
Added:
#+TOC: headlines 3
10
Added:
11
Added:
12
Added:
* TODOs
13
Added:
14
Added:
** TODO Fix =make= process
15
Added:
16
Added:
Makefile should call =publish.el= which contains necessary org-publish
17
Added:
definitions.
18
Added:
19
Added:
20
Added:
* Website structure
21
Added:
22
Added:
The website's structure is described in the following sections.
23
Added:
24
Added:
** =index.org=
25
Added:
26
Added:
** =static/=
27
Added:
28
Added:
*** =css/=
29
Added:
30
Added:
*** =images/=
31
Added:
32
Added:
** =README.org=
about.org
@@ -0,0 +1,19 @@
1
Added:
#+TITLE: About
2
Added:
#+SUBTITLE: About this website.
3
Added:
#+AUTHOR: Marius Peter
4
Added:
#+DATE: <2022-01-28 Fri>
5
Added:
#+OPTIONS: num:nil toc:nil
6
Added:
7
Added:
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="resources/mlnp.css" />
8
Added:
#+INCLUDE: resources/topnav.org
9
Added:
10
Added:
11
Added:
* About
12
Added:
13
Added:
** This blog
14
Added:
15
Added:
This blog serves
16
Added:
17
Added:
** The author
18
Added:
19
Added:
I'm a junior aerospace systems engineer currently working in France.
index.org
@@ -0,0 +1,38 @@
1
Added:
# -*- mode: org; -*-
2
Added:
3
Added:
#+TITLE: Home
4
Added:
#+SUBTITLE: A personal blog written in [[https://orgmode.org/][Org mode]].
5
Added:
#+AUTHOR: Marius Peter
6
Added:
#+DATE: <2022-01-23 Sun> Updated <2022-01-31 Mon>
7
Added:
#+EMAIL: mlnp@tuta.io
8
Added:
#+OPTIONS: num:nil toc:nil
9
Added:
10
Added:
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="resources/mlnp.css" />
11
Added:
#+INCLUDE: resources/topnav.org
12
Added:
13
Added:
14
Added:
* Recent posts
15
Added:
16
Added:
- This is a list
17
Added:
- Foobar
18
Added:
- Third item
19
Added:
20
Added:
21
Added:
* Projects
22
Added:
23
Added:
24
Added:
* Publishing this website
25
Added:
26
Added:
This entire website is built with [[https://orgmode.org/][Org mode]], an Emacs mode designed for
27
Added:
literate programming among other things. Using Org mode for designing,
28
Added:
building and publishing a website brings the following benefits:
29
Added:
30
Added:
- Work within Emacs :: This advantage concerns existing Emacs users.
31
Added:
- Literate programming :: Org files contain a mix of plain text
32
Added:
associated with documentation, and code that can be executed. A
33
Added:
documentation-centered workflow encourages us to describe our
34
Added:
thought process as we write a program, this increases the likelihood
35
Added:
of remembering why a particular piece of code was written.
36
Added:
37
Added:
The entire website publication flow is described here:
38
Added:
[[file:publish-mlnp.org]].
posts/test-post.org
@@ -0,0 +1,10 @@
1
Added:
# -*- mode: org; -*-
2
Added:
3
Added:
#+TITLE: First post
4
Added:
#+AUTHOR: Marius Peter
5
Added:
#+DATE: <2022-01-27 Thu>
6
Added:
7
Added:
8
Added:
* First section
9
Added:
10
Added:
First body.
publish-mlnp.org
@@ -0,0 +1,146 @@
1
Added:
# -*- mode: org; -*-
2
Added:
3
Added:
#+TITLE: Publish
4
Added:
#+SUBTITLE: Publishing this very website.
5
Added:
#+AUTHOR: Marius Peter
6
Added:
#+DATE: <2022-01-26 Wed>
7
Added:
#+OPTIONS: toc:nil
8
Added:
9
Added:
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="resources/mlnp.css" />
10
Added:
#+INCLUDE: resources/topnav.org
11
Added:
#+TOC: headlines 3
12
Added:
13
Added:
14
Added:
#+begin_abstract
15
Added:
In the spirit of [[https://en.wikipedia.org/wiki/Literate_programming][literate programming]] encouraged by Org mode, this
16
Added:
entire website's build process is documented on this very page. When
17
Added:
Emacs builds this website, it parses and executes the code blocks
18
Added:
contained on this page. By mixing behavior with the behavior's
19
Added:
documentation, we can future-proof our understanding of the build
20
Added:
logic, making it possible to efficiently revisit this website at a
21
Added:
later date in order to bring improvements.
22
Added:
#+end_abstract
23
Added:
24
Added:
25
Added:
* Publishing targets
26
Added:
27
Added:
This first section lays out the interactive prompts used to bind
28
Added:
export-related symbols with the following publishing targets:
29
Added:
30
Added:
- location :: Where should the website be published?
31
Added:
- components :: What parts of the website should be built?
32
Added:
33
Added:
34
Added:
** Location
35
Added:
36
Added:
Two possible publishing locations are considered:
37
Added:
38
Added:
- Local :: The website would be built on the local machine.
39
Added:
- Remote :: The website would be built on a remote server, after
40
Added:
uploading the selected files via ssh.
41
Added:
42
Added:
#+NAME: org-publish-location
43
Added:
#+BEGIN_SRC elisp
44
Added:
(setq org-publish-location
45
Added:
(read-answer
46
Added:
"Should the website be built on the local or remote target? "
47
Added:
'(("~/tmp-mlnp.fr/"
48
Added:
?l "build website on the local machine")
49
Added:
("/ssh:root@192.162.71.223:/var/www/html/mlnp.fr/"
50
Added:
?r "build website on the remote machine"))))
51
Added:
#+END_SRC
52
Added:
53
Added:
54
Added:
** Components
55
Added:
56
Added:
#+NAME: org-publish-components
57
Added:
#+begin_src elisp
58
Added:
(setq org-publish-components
59
Added:
(read-answer
60
Added:
"Which `org-publish-project-alist' component should be built? "
61
Added:
'(("content"
62
Added:
?c "build content (html) website components")
63
Added:
("all"
64
Added:
?a "build all website components"))))
65
Added:
#+end_src
66
Added:
67
Added:
68
Added:
69
Added:
* Resources
70
Added:
71
Added:
This section explores the =.css= and (maybe later) =.js= resources
72
Added:
available on the website.
73
Added:
74
Added:
75
Added:
** CSS
76
Added:
77
Added:
The main CSS file is located at [[file:resources/css.org]].
78
Added:
79
Added:
80
Added:
* Project components
81
Added:
82
Added:
The ~org-publish-project-alist~ variable is used by ~org-publish~ to
83
Added:
identify website components and their properties upon export.
84
Added:
85
Added:
#+NAME: org-publish-project-alist
86
Added:
#+BEGIN_SRC elisp
87
Added:
(require 'ox-publish)
88
Added:
(setq org-publish-project-alist
89
Added:
`(("site"
90
Added:
:base-directory "./"
91
Added:
:base-extension "org"
92
Added:
:publishing-directory ,org-publish-location
93
Added:
:recursive nil ; Top-level pages are all in top-level org directory.
94
Added:
:publishing-function org-html-publish-to-html
95
Added:
:auto-sitemap t
96
Added:
:sitemap-filename "resources/topnav-items.org"
97
Added:
:sitemap-title "Top-level site links")
98
Added:
("posts"
99
Added:
:base-directory "posts/"
100
Added:
:base-extension "org"
101
Added:
:publishing-directory ,(concat org-publish-location "posts/")
102
Added:
:recursive t
103
Added:
:publishing-function org-html-publish-to-html)
104
Added:
("styles"
105
Added:
:base-directory "resources/"
106
Added:
:base-extension "css"
107
Added:
:publishing-directory ,(concat org-publish-location "resources/")
108
Added:
:publishing-function org-publish-attachment)
109
Added:
("images"
110
Added:
:base-directory "images/"
111
Added:
:base-extension "jpg\\|gif\\|png\\|svg"
112
Added:
:publishing-directory ,(concat org-publish-location "images/")
113
Added:
:recursive t
114
Added:
:publishing-function org-publish-attachment)
115
Added:
("content"
116
Added:
:components ("site"
117
Added:
"posts"))
118
Added:
("all"
119
Added:
:components ("content"
120
Added:
"styles"
121
Added:
"images"))))
122
Added:
#+END_SRC
123
Added:
124
Added:
125
Added:
* Main publishing logic
126
Added:
127
Added:
This is the main publishing logic. Execute the following source block
128
Added:
to build the entire website.
129
Added:
130
Added:
#+NAME: main
131
Added:
#+BEGIN_SRC elisp :noweb no-export
132
Added:
<<org-publish-location>>
133
Added:
<<org-publish-components>>
134
Added:
<<org-publish-html-preamble>>
135
Added:
136
Added:
<<org-publish-project-alist>>
137
Added:
138
Added:
(org-babel-tangle-file "resources/css.org")
139
Added:
140
Added:
(org-publish-remove-all-timestamps)
141
Added:
(org-publish org-publish-components)
142
Added:
#+END_SRC
143
Added:
144
Added:
Open the website.
145
Added:
146
Added:
[[file:~/tmp-mlnp.fr/index.html]]
resources/css.org
@@ -0,0 +1,256 @@
1
Added:
# -*- mode: org; -*-
2
Added:
3
Added:
#+TITLE: Global CSS file
4
Added:
#+SUBTITLE: Site-wide styling informations.
5
Added:
#+AUTHOR: Marius Peter
6
Added:
#+DATE: <2022-01-30 Sun>
7
Added:
#+OPTIONS: toc:nil
8
Added:
#+PROPERTY: header-args :tangle mlnp.css
9
Added:
10
Added:
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="mlnp.css" />
11
Added:
#+INCLUDE: topnav.org
12
Added:
#+TOC: headlines 3
13
Added:
14
Added:
15
Added:
* Global appearance
16
Added:
17
Added:
These styles apply across the entire =mlnp.fr= website, to every
18
Added:
element.
19
Added:
20
Added:
#+BEGIN_SRC css
21
Added:
body {
22
Added:
font-family: "Public Sans", sans-serif;
23
Added:
background: linear-gradient(0deg, white 0%, gray 70%);
24
Added:
background-attachment: fixed;
25
Added:
margin: 0;
26
Added:
}
27
Added:
#+END_SRC
28
Added:
29
Added:
30
Added:
** Colors
31
Added:
32
Added:
These colors can be accessed anywhere in the rest of the stylesheet.
33
Added:
34
Added:
#+NAME: colors
35
Added:
#+BEGIN_SRC css
36
Added:
:root {
37
Added:
--topnav: cornflowerblue;
38
Added:
--topnav-menu: royalblue;
39
Added:
}
40
Added:
#+END_SRC
41
Added:
42
Added:
43
Added:
** TODO Fonts
44
Added:
45
Added:
Add @ rules and set
46
Added:
47
Added:
#+NAME: fonts
48
Added:
#+BEGIN_SRC css
49
Added:
code, .src {
50
Added:
font-family: "Hack", sans-serif;
51
Added:
}
52
Added:
#+END_SRC
53
Added:
54
Added:
55
Added:
56
Added:
** Entire content
57
Added:
58
Added:
This rule concerns all content except for the title section and
59
Added:
postamble.
60
Added:
61
Added:
#+BEGIN_SRC css
62
Added:
.outline-2, .abstract {
63
Added:
width: 70%;
64
Added:
margin-right: auto;
65
Added:
margin-left: auto;
66
Added:
}
67
Added:
#+END_SRC
68
Added:
69
Added:
70
Added:
** Title and subtitle
71
Added:
72
Added:
#+BEGIN_SRC css
73
Added:
.title {
74
Added:
background: cornflowerblue;
75
Added:
color: white;
76
Added:
margin-top: 0;
77
Added:
padding-top: 0.5em;
78
Added:
margin-bottom: 0;
79
Added:
padding-bottom: 0;
80
Added:
}
81
Added:
.subtitle {
82
Added:
color: lightgray;
83
Added:
}
84
Added:
#+END_SRC
85
Added:
86
Added:
87
Added:
** Table of contents
88
Added:
89
Added:
#+BEGIN_SRC css
90
Added:
#table-of-contents {
91
Added:
width: 20%;
92
Added:
/* position: sticky; */
93
Added:
top: 5em;
94
Added:
display: inline-block;
95
Added:
vertical-align: top;
96
Added:
}
97
Added:
#text-table-of-contents ul {
98
Added:
list-style-type: none;
99
Added:
padding: 0;
100
Added:
}
101
Added:
#+END_SRC
102
Added:
103
Added:
104
Added:
* Top navigation bar
105
Added:
106
Added:
The HTML preamble contains a single child: the /navigation bar/. This
107
Added:
bar contains a link to the homepage, and links to the other top-level
108
Added:
website pages.
109
Added:
110
Added:
#+NAME: navbar
111
Added:
#+BEGIN_SRC css
112
Added:
#topnav {
113
Added:
background: var(--topnav);
114
Added:
z-index: 100;
115
Added:
position: sticky;
116
Added:
top: 0;
117
Added:
}
118
Added:
#+END_SRC
119
Added:
120
Added:
121
Added:
** Wide screens
122
Added:
123
Added:
#+BEGIN_SRC css
124
Added:
#topnav ul {
125
Added:
display: flex;
126
Added:
list-style-type: none;
127
Added:
justify-content: center;
128
Added:
padding: 0.5em;
129
Added:
margin: 0;
130
Added:
}
131
Added:
#topnav ul a {
132
Added:
/* flex-grow: 1; */
133
Added:
/* flex-basis: 0; */
134
Added:
padding: 0.5em;
135
Added:
color: lightgray;
136
Added:
text-align: center;
137
Added:
}
138
Added:
#topnav a:hover {
139
Added:
background: white;
140
Added:
color: var(--topnav-menu);
141
Added:
}
142
Added:
#+END_SRC
143
Added:
144
Added:
145
Added:
*** Hide home and hamburger icons
146
Added:
147
Added:
When the top navigation bar is wide, the hamburger menu is hidden.
148
Added:
149
Added:
#+NAME: topnav-wide-hidden
150
Added:
#+BEGIN_SRC css
151
Added:
#home { display: none; }
152
Added:
#topnav label, #hamburger { display: none; }
153
Added:
#+END_SRC
154
Added:
155
Added:
156
Added:
** Narrow screens
157
Added:
158
Added:
These styles apply to screens narrower than 500px.
159
Added:
160
Added:
#+BEGIN_SRC css :noweb no-export
161
Added:
@media all and (max-width: 500px) {
162
Added:
<<narrow-topnav>>
163
Added:
<<narrow-home>>
164
Added:
<<narrow-hamburger>>
165
Added:
<<narrow-topnav-links>>
166
Added:
<<narrow-table-of-contents>>
167
Added:
<<narrow-content>>
168
Added:
}
169
Added:
#+END_SRC
170
Added:
171
Added:
172
Added:
*** Narrow top navigation bar
173
Added:
174
Added:
#+NAME: narrow-topnav
175
Added:
#+BEGIN_SRC css :tangle no
176
Added:
#topnav {
177
Added:
padding: 0.5em;
178
Added:
}
179
Added:
#+END_SRC
180
Added:
181
Added:
182
Added:
183
Added:
*** Narrow home link
184
Added:
185
Added:
#+NAME: narrow-home
186
Added:
#+BEGIN_SRC css :tangle no
187
Added:
#home {
188
Added:
display: inline-block;
189
Added:
background: var(--topnav-menu);
190
Added:
color: white;
191
Added:
text-decoration: none;
192
Added:
border-radius: 0 8px 8px 0;
193
Added:
padding: 0.5em;
194
Added:
}
195
Added:
#+END_SRC
196
Added:
197
Added:
198
Added:
*** Narrow hamburger
199
Added:
200
Added:
#+NAME: narrow-hamburger
201
Added:
#+BEGIN_SRC css :tangle no
202
Added:
#topnav label {
203
Added:
display: inline-block;
204
Added:
float: right;
205
Added:
color: white;
206
Added:
padding: 0.5em;
207
Added:
margin: 0;
208
Added:
background: var(--topnav-menu);
209
Added:
border-radius: 8px;
210
Added:
cursor: pointer;
211
Added:
}
212
Added:
#topnav label:hover {
213
Added:
color: var(--topnav-menu);
214
Added:
background: white;
215
Added:
}
216
Added:
#topnav ul { display: none; }
217
Added:
#topnav input:checked ~ ul {
218
Added:
display: block;
219
Added:
width: 100%;
220
Added:
margin: 0;
221
Added:
}
222
Added:
#+END_SRC
223
Added:
224
Added:
225
Added:
*** TODO Narrow top navigation links
226
Added:
227
Added:
#+NAME: narrow-topnav-links
228
Added:
#+BEGIN_SRC css :tangle no
229
Added:
#topnav ul {
230
Added:
padding: 0;
231
Added:
}
232
Added:
#topnav ul a {
233
Added:
box-sizing: border-box;
234
Added:
display: block;
235
Added:
}
236
Added:
#+END_SRC
237
Added:
238
Added:
239
Added:
*** Narrow table of contents
240
Added:
241
Added:
#+NAME: narrow-table-of-contents
242
Added:
#+BEGIN_SRC css :tangle no
243
Added:
/* #table-of-contents { */
244
Added:
/* display: none; */
245
Added:
/* } */
246
Added:
#+END_SRC
247
Added:
248
Added:
249
Added:
*** Narrow content
250
Added:
251
Added:
#+NAME: narrow-content
252
Added:
#+BEGIN_SRC css :tangle no
253
Added:
.outline-2 {
254
Added:
width: 90%;
255
Added:
}
256
Added:
#+END_SRC
resources/topnav.org
@@ -0,0 +1,6 @@
1
Added:
#+HTML: <nav id="topnav">
2
Added:
#+HTML: <a href="index.html" id="home"><code>home</code></a>
3
Added:
#+HTML: <label for="hamburger">☰</label>
4
Added:
#+HTML: <input type="checkbox" id="hamburger"/>
5
Added:
#+INCLUDE: topnav-items.org :lines "3-"
6
Added:
#+HTML: </nav>