updated a bit
This commit is contained in:
parent
2db39c15a4
commit
cb24d0bac1
6 changed files with 336 additions and 375 deletions
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -1 +1,2 @@
|
||||||
_site
|
_site
|
||||||
|
src/archive.org
|
||||||
|
|
BIN
.project.el.gpg
BIN
.project.el.gpg
Binary file not shown.
|
@ -1,8 +0,0 @@
|
||||||
#+TITLE: Blog Posts
|
|
||||||
#+AUTHOR: Yann Esposito
|
|
||||||
#+EMAIL: yann@esposito.host
|
|
||||||
|
|
||||||
#+begin_archive
|
|
||||||
@@html:<li>@@ @@html:<span class="archive-item"><span class="archive-date">@@ 2019-08-13: @@html:</span>@@ [[file:posts/project-el/index.org][Autoload Script by project]] @@html:</span>@@ @@html:</li>@@
|
|
||||||
@@html:<li>@@ @@html:<span class="archive-item"><span class="archive-date">@@ 2019-07-15: @@html:</span>@@ [[file:posts/2019-07-04-static-org-publish.org][Static blog with org-mode]] @@html:</span>@@ @@html:</li>@@
|
|
||||||
#+end_archive
|
|
|
@ -190,17 +190,22 @@ navigation > a {
|
||||||
}
|
}
|
||||||
#preamble {
|
#preamble {
|
||||||
border-bottom: solid 1px;
|
border-bottom: solid 1px;
|
||||||
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
#preamble h1, #preamble h2 {
|
#preamble h1, #preamble h2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
#preamble h2 {
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
#postamble {
|
#postamble {
|
||||||
border-top: solid 1px;
|
border-top: solid 1px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
#content,.content {
|
#content,.content {
|
||||||
max-width: 50em;
|
max-width: 50em;
|
||||||
margin: 0 auto;
|
margin: 0 1em;
|
||||||
padding: 1px;
|
padding: 1px;
|
||||||
}
|
}
|
||||||
#content *:first-child {
|
#content *:first-child {
|
||||||
|
@ -267,6 +272,13 @@ navigation > a {
|
||||||
--soft-foreground: var(--base01);
|
--soft-foreground: var(--base01);
|
||||||
--border-color: var(--base02);
|
--border-color: var(--base02);
|
||||||
--todo-txt: #000;
|
--todo-txt: #000;
|
||||||
|
--color-h1: var(--magenta);
|
||||||
|
--color-h2: var(--violet);
|
||||||
|
--color-h3: var(--blue);
|
||||||
|
--color-h4: var(--cyan);
|
||||||
|
--color-h5: var(--green);
|
||||||
|
--color-h6: var(--yellow);
|
||||||
|
--color-link: var(--yellow);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* org colors */
|
/* org colors */
|
||||||
|
@ -290,7 +302,9 @@ navigation > a {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
input#light, input#dark { display:none; }
|
|
||||||
|
body > input { display:none; }
|
||||||
|
|
||||||
input#light:checked ~ .main {
|
input#light:checked ~ .main {
|
||||||
--main-background: #fefaf0; /* 0.5 lighter than #fdf6e3 */
|
--main-background: #fefaf0; /* 0.5 lighter than #fdf6e3 */
|
||||||
--main-foreground: var(--base01);
|
--main-foreground: var(--base01);
|
||||||
|
@ -300,6 +314,11 @@ input#light:checked ~ .main {
|
||||||
--border-color: var(--base2);
|
--border-color: var(--base2);
|
||||||
--todo-txt: #FFF;
|
--todo-txt: #FFF;
|
||||||
}
|
}
|
||||||
|
input#light:checked ~ #labels {
|
||||||
|
background: #fefaf0;
|
||||||
|
color: var(--base00);
|
||||||
|
}
|
||||||
|
|
||||||
input#dark:checked ~ .main {
|
input#dark:checked ~ .main {
|
||||||
--main-background: var(--base03); /* 0.5 darker than #002b36; */
|
--main-background: var(--base03); /* 0.5 darker than #002b36; */
|
||||||
--main-foreground: var(--base1);
|
--main-foreground: var(--base1);
|
||||||
|
@ -309,14 +328,33 @@ input#dark:checked ~ .main {
|
||||||
--border-color: var(--base02);
|
--border-color: var(--base02);
|
||||||
--todo-txt: #000;
|
--todo-txt: #000;
|
||||||
}
|
}
|
||||||
input#light:checked ~ #labels {
|
|
||||||
background: #fefaf0;
|
|
||||||
color: var(--base00);
|
|
||||||
}
|
|
||||||
input#dark:checked ~ #labels {
|
input#dark:checked ~ #labels {
|
||||||
background: var(--base03);
|
background: var(--base03);
|
||||||
color: var(--base0);
|
color: var(--base0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input#raw:checked ~ .main {
|
||||||
|
--main-background: #fff;
|
||||||
|
--main-foreground: #000;
|
||||||
|
--second-foreground: #000;
|
||||||
|
--reveal-background: #fff;
|
||||||
|
--soft-foreground: #000;
|
||||||
|
--border-color: #000;
|
||||||
|
--todo-txt: #000;
|
||||||
|
--color-h1: #000;
|
||||||
|
--color-h2: #000;
|
||||||
|
--color-h3: #000;
|
||||||
|
--color-h4: #000;
|
||||||
|
--color-h5: #000;
|
||||||
|
--color-h6: #000;
|
||||||
|
--color-link: #33d;
|
||||||
|
}
|
||||||
|
input#raw:checked ~ #labels {
|
||||||
|
background: #fff;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
body,.main {
|
body,.main {
|
||||||
background: var(--main-background);
|
background: var(--main-background);
|
||||||
color: var(--main-foreground);
|
color: var(--main-foreground);
|
||||||
|
@ -337,7 +375,7 @@ pre::after,pre::before,hr:after,
|
||||||
}
|
}
|
||||||
a:hover, a:active, a:focus,
|
a:hover, a:active, a:focus,
|
||||||
.main a:hover,.main a:active,.main a:focus {
|
.main a:hover,.main a:active,.main a:focus {
|
||||||
color: var(--yellow);
|
color: var(--color-link);
|
||||||
}
|
}
|
||||||
navigation a, navigation a:visited,
|
navigation a, navigation a:visited,
|
||||||
.main navigation a,.main navigation a:visited {
|
.main navigation a,.main navigation a:visited {
|
||||||
|
@ -345,7 +383,7 @@ navigation a, navigation a:visited,
|
||||||
}
|
}
|
||||||
navigation a:focus, navigation a:hover,
|
navigation a:focus, navigation a:hover,
|
||||||
.main navigation a:focus,.main navigation a:hover {
|
.main navigation a:focus,.main navigation a:hover {
|
||||||
color: var(--yellow);
|
color: var(--color-link);
|
||||||
}
|
}
|
||||||
thead,
|
thead,
|
||||||
.main thead {
|
.main thead {
|
||||||
|
@ -357,22 +395,25 @@ tr:hover,
|
||||||
background-color: var(--reveal-background);
|
background-color: var(--reveal-background);
|
||||||
}
|
}
|
||||||
h1, .main h1 {
|
h1, .main h1 {
|
||||||
color: var(--magenta);
|
color: var(--color-h1);
|
||||||
|
}
|
||||||
|
#preamble h2, .main #preamble h2 {
|
||||||
|
color: var(--color-h4);
|
||||||
}
|
}
|
||||||
h2, .main h2 {
|
h2, .main h2 {
|
||||||
color: var(--violet);
|
color: var(--color-h2);
|
||||||
}
|
}
|
||||||
h3, .main h3 {
|
h3, .main h3 {
|
||||||
color: var(--blue);
|
color: var(--color-h3);
|
||||||
}
|
}
|
||||||
h4, .main h4 {
|
h4, .main h4 {
|
||||||
color: var(--cyan);
|
color: var(--color-h4);
|
||||||
}
|
}
|
||||||
h5, .main h5 {
|
h5, .main h5 {
|
||||||
color: var(--green);
|
color: var(--color-h5);
|
||||||
}
|
}
|
||||||
h6, .main h6 {
|
h6, .main h6 {
|
||||||
color: var(--green);
|
color: var(--color-h6);
|
||||||
}
|
}
|
||||||
table, td, th,
|
table, td, th,
|
||||||
.main table,.main td,.main th {
|
.main table,.main td,.main th {
|
||||||
|
|
|
@ -8,12 +8,24 @@
|
||||||
#+OPTIONS: H:5
|
#+OPTIONS: H:5
|
||||||
#+STARTUP: showeverything
|
#+STARTUP: showeverything
|
||||||
|
|
||||||
Welcome!
|
Welcome to my personal website.
|
||||||
|
|
||||||
#+begin_notes
|
Here I will talk mostly about the life of a software developer.
|
||||||
This website is dark by default, but it support user preferred theme.
|
So programming, functional programming in particular.
|
||||||
For example on Mac OS X > 10.14, if you have selected a light theme, the website
|
|
||||||
will be light.
|
|
||||||
#+end_notes
|
|
||||||
|
|
||||||
- [[./archive.html][articles]]
|
That website was created with the following constraints in mind by order of
|
||||||
|
priority:
|
||||||
|
|
||||||
|
1. /Respect Privacy/; no tracker of any sort (no google ads, no referrer for all external links,
|
||||||
|
etc...)
|
||||||
|
2. /javascript free/; no js at all, yes even the theme changer
|
||||||
|
3. /disability friendly/; should be easy to read on a text browser so people
|
||||||
|
with disabilities could easily consume it
|
||||||
|
4. /nerdy/; should feel mostly like markdown text in a terminal and source code
|
||||||
|
should be syntax higlighted.
|
||||||
|
5. /org-mode friendly/; I should write my post in [[https://orgmode.org][org mode]]
|
||||||
|
6. /user friendly/; support your preferred light/dark theme by default but you
|
||||||
|
can change it if you want.
|
||||||
|
7. /frugal/; try to minize the resources needed to visit my website; no
|
||||||
|
javascript, no webfont, not too much CSS magic, not much images or really
|
||||||
|
compressed one.
|
||||||
|
|
|
@ -1,212 +1,86 @@
|
||||||
#+TITLE: Static blog with org-mode
|
#+TITLE: Blogging with org-mode
|
||||||
|
#+SUBTITLE: Meta post about this blog
|
||||||
#+AUTHOR: Yann Esposito
|
#+AUTHOR: Yann Esposito
|
||||||
#+EMAIL: yann@esposito.host
|
#+EMAIL: yann@esposito.host
|
||||||
#+DATE: 2019-07-27
|
#+DATE: 2019-07-27
|
||||||
#+KEYWORDS: programming, blog, org-mode
|
#+KEYWORDS: programming, blog, org-mode, meta
|
||||||
#+OPTIONS: auto-id:t
|
#+OPTIONS: auto-id:t
|
||||||
|
|
||||||
#+begin_quote
|
#+begin_quote
|
||||||
/tl;dr/: [[#current-solution][Full code for the impatient↓]].
|
/tl;dr/: [[#full-solution][Go to the full solution]] for the impatients.
|
||||||
Read the full blog post to have all the details.
|
|
||||||
#+end_quote
|
#+end_quote
|
||||||
|
|
||||||
This is the first article using my new blog system.
|
As the first article of my new blogging system, let's have a meta blog post.
|
||||||
|
|
||||||
|
Once in a while, I like to change how I blog.
|
||||||
|
A long time ago, I used PHP for my first website using my personal space at my
|
||||||
|
university.
|
||||||
|
And as of today, a clond of my university website still exists:
|
||||||
|
http://yann.esposito.free.fr It contains all details about my old research
|
||||||
|
activities and teaching resources for my students.
|
||||||
|
|
||||||
Once in a while, I create a new personal website.
|
|
||||||
A long time ago, I used PHP for my first website.
|
|
||||||
I used include and took care of XHTML pages validation.
|
|
||||||
Then I used [[http://nanoc.ws][nanoc]], a ruby static website generator.
|
Then I used [[http://nanoc.ws][nanoc]], a ruby static website generator.
|
||||||
Then I switched to [[https://jaspervdj.be/hakyll/][hakyll]] because I wanted to switch to a Haskell's written
|
Then I switched to [[https://jaspervdj.be/hakyll/][hakyll]] because I wanted to switch to a Haskell's written
|
||||||
tool.
|
tool.
|
||||||
Now I'll try to use [[http://orgmode.org][org-mode]] directly with [[https://orgmode.org/worg/org-tutorials/org-publish-html-tutorial.html][org-publish]].
|
|
||||||
I am became a quite extensive emacs user now. So using org-mode and org-publish
|
|
||||||
is a bit like not having to install any 3rd party software.
|
|
||||||
|
|
||||||
* Why?
|
This time I'll try to use [[http://orgmode.org][org-mode]] directly with [[https://orgmode.org/worg/org-tutorials/org-publish-html-tutorial.html][org-publish]].
|
||||||
:PROPERTIES:
|
I used vim a lot, but recently I switched to emacs.
|
||||||
:CUSTOM_ID: why--8eb9
|
The main reason were:
|
||||||
:END:
|
|
||||||
|
|
||||||
Everything started when I was hired in a place where I was given a terrible
|
1. You use LISP as plugin language while for Vim it is vimscript which is a
|
||||||
keyboard.
|
quite terrible language.
|
||||||
After a few weeks I started to feel a lot of pain in both my wrists.
|
2. Many comment on the Internet about people telling that [[https://github.com/emacs-evil/evil][evil]] (vim keybdings in
|
||||||
So I started to go from classical IDE to being able to use vim
|
emacs) was really really good. And I can confirm it is.
|
||||||
correctly[fn:vim].
|
3. The [[http://spacemacs.org][spacemacs]] project made it easier to handle the emacs configuratin
|
||||||
|
complexity for a newbie.
|
||||||
|
|
||||||
Then I started to work in Clojure and I heard that emacs might certainly be a
|
And by doing the switch, I discovered a lot of great emacs packages.
|
||||||
better fit for LISP dialiects.
|
Now I really do not regret the switch.
|
||||||
But, I couldn't switch to an editor without vim keybindings support because they
|
In particular, [[http://orgmode.org][org-mode]] has been a game changer.
|
||||||
are so great once you're used to them.
|
I used to write markdown before.
|
||||||
By chance it was about the same time that [[http://spacemacs.org][spacemacs]] appeared and I switched.
|
But now I use the org format.
|
||||||
Is is really impressive how well the vim keybindings are supported.
|
It is superior for my usage(s).
|
||||||
Even most of the advanced vim features I used to use worked like a charm.
|
|
||||||
|
|
||||||
The first benefit of emacs is you can configure emacs with elisp.
|
|
||||||
Which unlike vimscript looks like a correct language to work with.
|
|
||||||
|
|
||||||
One unexpected benefit of emacs was [[http://orgmode.org][org-mode]].
|
|
||||||
I always heard good things about it but it took me a while to really get it and
|
|
||||||
to understand why it is so great.
|
|
||||||
|
|
||||||
If you don't know anything about org-mode, it is many things.
|
|
||||||
First imagine a Markdown but more TODO list oriented.
|
|
||||||
But along with this, emacs has a lot of helper functions to work with those
|
|
||||||
org-mode files.
|
|
||||||
|
|
||||||
One real game changer is ~org-capture~.
|
|
||||||
You can add a task quite easily while doing other work in emacs.
|
|
||||||
|
|
||||||
[fn:vim] I wrote this article to help people use vim: [[http://yannesposito.com/Scratch/en/blog/Learn-Vim-Progressively/][learn vim progressively]]
|
|
||||||
|
|
||||||
* How?
|
* How?
|
||||||
:PROPERTIES:
|
:PROPERTIES:
|
||||||
:CUSTOM_ID: how--831e
|
:CUSTOM_ID: how
|
||||||
:END:
|
:END:
|
||||||
|
|
||||||
You can easily follow the org-mode doc to make your own website.
|
You can easily follow the org-mode doc to make your own website.
|
||||||
But I have added a few "goodies".
|
But I have added a few niceties.
|
||||||
|
First, the code to export is provided in a local file.
|
||||||
|
I've got a system to auto-load elisp file when entering in a new project.
|
||||||
|
It is quite safe as it uses PGP and check if I trust the person who encrypted
|
||||||
|
the file.
|
||||||
|
See [[file:project-el/index.org][my other post about it]].
|
||||||
|
|
||||||
- attempt to obfuscate contact email,
|
|
||||||
|
|
||||||
** Basic Blog
|
** Configuration variables
|
||||||
:PROPERTIES:
|
:PROPERTIES:
|
||||||
:CUSTOM_ID: basic-blog-a1fc
|
:CUSTOM_ID: configuration-variables
|
||||||
:END:
|
|
||||||
|
|
||||||
I put the need minimal code in a =.project.el.gpg= file of my blog repository.
|
|
||||||
Inspired by this [[https://francismurillo.github.io/2017-02-15-Project-Script-Loader/][blog post]] I enhanced this version to be both more user friendly
|
|
||||||
and secure (see [[./autoload-emacs-script-by-project.org][Autoload Emacs Script by Project]]).
|
|
||||||
|
|
||||||
But even before that, I simply put the code in has an elisp code block of my
|
|
||||||
=index.org= that I exectued with =C-c C-c=.
|
|
||||||
|
|
||||||
I have a code block in my =index.org= page that I do not export containing the
|
|
||||||
elisp code I use to load all the information needed by =org-publish=.
|
|
||||||
Do not export an org-mode subtree you can simply tag it with =:noexport:=.
|
|
||||||
|
|
||||||
=org-publish= suppose that you'll export one html page per org file.
|
|
||||||
You need to provide a minimum set of information:
|
|
||||||
|
|
||||||
- base directory that should contain your org files
|
|
||||||
- publish directory, where you will export the html from the org files
|
|
||||||
|
|
||||||
A very basic publish rule would be:
|
|
||||||
|
|
||||||
#+begin_src org
|
|
||||||
,* Magic Script :noexport:
|
|
||||||
,#+begin_src elisp :results none
|
|
||||||
(setq org-publish-project-alist
|
|
||||||
'(("orgfiles"
|
|
||||||
:base-directory "/users/me/blog/src"
|
|
||||||
:publishing-directory "/users/me/blog/_site"
|
|
||||||
:recursive t)))
|
|
||||||
,#+end_src
|
|
||||||
#+end_src
|
|
||||||
|
|
||||||
So now, if you put org files in the base directory it will copy
|
|
||||||
recursively the tree in that base directory and will copy it to
|
|
||||||
the publishing directory exporting all org files to html files.
|
|
||||||
|
|
||||||
Nice.
|
|
||||||
|
|
||||||
If you are not familiar with emacs or orgmode, orgpublish.
|
|
||||||
This block of code set the variable named ~org-publish-project-alist~.
|
|
||||||
The ~alist~ in the end is for "associative list".
|
|
||||||
|
|
||||||
#+begin_quote
|
|
||||||
/☞/ So when you'll execute the command =org-publish= in emacs.
|
|
||||||
You will get prompted to enter the name of what to publish.
|
|
||||||
You should see a single proposition named =orgfiles=.
|
|
||||||
Once selected the export and publish will occurs.
|
|
||||||
Notice, org-publish does what you expect and do not re-export all files
|
|
||||||
each time but only the one that have changed.
|
|
||||||
#+end_quote
|
|
||||||
|
|
||||||
** Relative Paths
|
|
||||||
:PROPERTIES:
|
|
||||||
:CUSTOM_ID: relative-paths-d145
|
|
||||||
:END:
|
|
||||||
|
|
||||||
A first issue with this is that I don't want to put that in my emacs
|
|
||||||
preferences.
|
|
||||||
I would like to be able to publish my website for anyone that could clone my git
|
|
||||||
repository.
|
|
||||||
So I will use emacs projectile to find the root directory of the current
|
|
||||||
project.
|
|
||||||
|
|
||||||
#+begin_src elisp
|
|
||||||
(setq base-dir (concat (projectile-project-root) "src"))
|
|
||||||
(setq publish-dir (concat (projectile-project-root) "_site"))
|
|
||||||
(setq org-publish-project-alist
|
|
||||||
`(("orgfiles"
|
|
||||||
:base-directory ,base-dir
|
|
||||||
:publishing-directory ,publish-dir
|
|
||||||
:recursive t
|
|
||||||
:base-extension "org")))
|
|
||||||
#+end_src
|
|
||||||
|
|
||||||
That's better.
|
|
||||||
Now anyone can clone the repository.
|
|
||||||
Open my =index.org= file, and execute the code in it by =C-e C-e= and then will
|
|
||||||
be able to publish the website locally in the =_site= directory.
|
|
||||||
|
|
||||||
** Assets
|
|
||||||
:PROPERTIES:
|
|
||||||
:CUSTOM_ID: assets-cf7d
|
|
||||||
:END:
|
|
||||||
|
|
||||||
Generally you want a bit more features than that for publishing a blog.
|
|
||||||
Typically you would like to have a common template, an header, some CSS.
|
|
||||||
|
|
||||||
For that you need to work a bit more.
|
|
||||||
First, important thing, add an org publish section to publish your assets (CSS,
|
|
||||||
images, etc...)
|
|
||||||
|
|
||||||
#+begin_src elisp
|
|
||||||
(setq base-dir (concat (projectile-project-root) "src"))
|
|
||||||
(setq publish-dir (concat (projectile-project-root) "_site"))
|
|
||||||
(setq assets-dir (concat base-dir "/assets"))
|
|
||||||
(setq publish-assets-dir (concat publish-dir "/assets"))
|
|
||||||
(setq org-publish-project-alist
|
|
||||||
`(("orgfiles"
|
|
||||||
:base-directory ,base-dir
|
|
||||||
:publishing-directory ,publish-dir
|
|
||||||
:recursive t
|
|
||||||
:base-extension "org"
|
|
||||||
:exclude ".*drafts/.*")
|
|
||||||
|
|
||||||
("assets"
|
|
||||||
:base-directory ,assets-dir
|
|
||||||
:base-extension ".*"
|
|
||||||
:publishing-directory ,publish-assets-dir
|
|
||||||
:publishing-function org-publish-attachment
|
|
||||||
:recursive t)
|
|
||||||
|
|
||||||
("blog" :components ("orgfiles" "assets"))))
|
|
||||||
#+end_src
|
|
||||||
|
|
||||||
With that you will copy the assets and export org file to html.
|
|
||||||
You can do both by selecting `blog` when doing an `org-publish`.
|
|
||||||
|
|
||||||
That's better. But for a blog you also generally want to have your own CSS.
|
|
||||||
|
|
||||||
* Current Solution
|
|
||||||
:PROPERTIES:
|
|
||||||
:CUSTOM_ID: current-solution
|
|
||||||
:END:
|
:END:
|
||||||
|
|
||||||
#+begin_src elisp
|
#+begin_src elisp
|
||||||
;; Global variables
|
;; CONFIGURATION VARIABLES
|
||||||
(setq domainname "https://her.esy.fun")
|
(setq domainname "https://her.esy.fun")
|
||||||
(setq base-dir (concat (projectile-project-root) "src"))
|
(setq base-dir (concat (projectile-project-root) "src"))
|
||||||
(setq publish-dir (concat (projectile-project-root) "_site"))
|
(setq publish-dir (concat (projectile-project-root) "_site"))
|
||||||
(setq assets-dir (concat base-dir "/assets"))
|
(setq assets-dir (concat base-dir "/"))
|
||||||
(setq publish-assets-dir (concat publish-dir "/assets"))
|
(setq publish-assets-dir (concat publish-dir "/"))
|
||||||
(setq rss-dir base-dir)
|
(setq rss-dir base-dir)
|
||||||
|
(setq rss-title "Subscribe to articles")
|
||||||
(setq publish-rss-dir publish-dir)
|
(setq publish-rss-dir publish-dir)
|
||||||
(setq css-name "minimalist.css")
|
(setq css-path "/css/minimalist.css")
|
||||||
(setq author-name "Yann Esposito")
|
(setq author-name "Yann Esposito")
|
||||||
(setq author-email "yann@esposito.host")
|
(setq author-email "yann@esposito.host")
|
||||||
|
#+end_src
|
||||||
|
|
||||||
|
* Full Solution
|
||||||
|
:PROPERTIES:
|
||||||
|
:CUSTOM_ID: full-solution
|
||||||
|
:END:
|
||||||
|
|
||||||
|
#+begin_src elisp
|
||||||
|
|
||||||
(require 'org)
|
(require 'org)
|
||||||
(require 'ox-publish)
|
(require 'ox-publish)
|
||||||
|
@ -214,6 +88,8 @@ That's better. But for a blog you also generally want to have your own CSS.
|
||||||
(require 'org-element)
|
(require 'org-element)
|
||||||
(require 'ox-rss)
|
(require 'ox-rss)
|
||||||
|
|
||||||
|
(setq org-link-file-path-type 'relative)
|
||||||
|
|
||||||
(defun org-blog-prepare (project-plist)
|
(defun org-blog-prepare (project-plist)
|
||||||
"With help from `https://github.com/howardabrams/dot-files'.
|
"With help from `https://github.com/howardabrams/dot-files'.
|
||||||
Touch `index.org' to rebuilt it.
|
Touch `index.org' to rebuilt it.
|
||||||
|
@ -226,23 +102,25 @@ That's better. But for a blog you also generally want to have your own CSS.
|
||||||
|
|
||||||
(defvar org-blog-head
|
(defvar org-blog-head
|
||||||
(concat
|
(concat
|
||||||
"<link rel=\"stylesheet\" type=\"text/css\" href=\"/assets/css/" css-name "\"/>"
|
"<link rel=\"stylesheet\" type=\"text/css\" href=\"" css-path "\"/>"
|
||||||
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
|
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
|
||||||
"<link rel=\"alternative\" type=\"application/rss+xml\" title=\"Subscribe to articles\" href=\"/archives.xml\" />"
|
"<link rel=\"alternative\" type=\"application/rss+xml\" title=\"" rss-title "\" href=\"/archives.xml\" />"
|
||||||
"<link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/assets/img/favicon.ico\">"))
|
"<link rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/favicon.ico\">"))
|
||||||
|
|
||||||
(defun menu (lst)
|
(defun menu (lst)
|
||||||
"Blog menu"
|
"Blog menu"
|
||||||
(concat
|
(concat
|
||||||
"<navigation class=\"menu\">"
|
"<navigation>"
|
||||||
(mapconcat 'identity
|
(mapconcat 'identity
|
||||||
(append
|
(append
|
||||||
'("<a href=\"/index.html\">Home</a>"
|
'("<a href=\"/index.html\">Home</a>"
|
||||||
"<a href=\"/archive.html\">Posts</a>")
|
"<a href=\"/archive.html\">Posts</a>"
|
||||||
|
"<a href=\"/about-me.html\">About</a>")
|
||||||
lst)
|
lst)
|
||||||
" | ")
|
" | ")
|
||||||
"</navigation>"))
|
"</navigation>"))
|
||||||
|
|
||||||
|
|
||||||
(defun str-time-to-year-float (date-str)
|
(defun str-time-to-year-float (date-str)
|
||||||
(/ (float-time
|
(/ (float-time
|
||||||
(apply 'encode-time
|
(apply 'encode-time
|
||||||
|
@ -252,7 +130,7 @@ That's better. But for a blog you also generally want to have your own CSS.
|
||||||
|
|
||||||
(defvar blog-creation-date "2019-07-01")
|
(defvar blog-creation-date "2019-07-01")
|
||||||
|
|
||||||
(defun delta-date (date-str)
|
(defun y-date (date-str)
|
||||||
"Number of year since the begining of this blog"
|
"Number of year since the begining of this blog"
|
||||||
(let ((y (- (str-time-to-year-float date-str)
|
(let ((y (- (str-time-to-year-float date-str)
|
||||||
(str-time-to-year-float blog-creation-date))))
|
(str-time-to-year-float blog-creation-date))))
|
||||||
|
@ -264,10 +142,12 @@ That's better. But for a blog you also generally want to have your own CSS.
|
||||||
"<div class=\"content\">"
|
"<div class=\"content\">"
|
||||||
(menu '("<a href=\"#postamble\">↓ bottom ↓</a>"))
|
(menu '("<a href=\"#postamble\">↓ bottom ↓</a>"))
|
||||||
"<h1>"
|
"<h1>"
|
||||||
(format "%s" (plist-get info :title))
|
(format "%s" (car (plist-get info :title)))
|
||||||
(when-let ((date (get-from-info info :date)))
|
|
||||||
(format " - <span class=\"article-date\">%s</span>" date))
|
|
||||||
"</h1>"
|
"</h1>"
|
||||||
|
(when-let ((date (get-from-info info :date)))
|
||||||
|
(format "<span class=\"article-date\">%s</span>" date))
|
||||||
|
(when-let ((subtitle (car (plist-get info :subtitle))))
|
||||||
|
(format "<h2>%s</h2>" subtitle))
|
||||||
"</div>"))
|
"</div>"))
|
||||||
|
|
||||||
(defun get-from-info (info k)
|
(defun get-from-info (info k)
|
||||||
|
@ -277,8 +157,8 @@ That's better. But for a blog you also generally want to have your own CSS.
|
||||||
|
|
||||||
(defun rand-obfs (c)
|
(defun rand-obfs (c)
|
||||||
(let ((r (% (random) 20)))
|
(let ((r (% (random) 20)))
|
||||||
(cond ((eq 0 r) (format "%c" c))
|
(cond ;; ((eq 0 r) (format "%c" c))
|
||||||
((< 0 r 10) (format "&#%d;" c))
|
((<= 0 r 10) (format "&#%d;" c))
|
||||||
(t (format "&#x%X;" c)))))
|
(t (format "&#x%X;" c)))))
|
||||||
|
|
||||||
(defun obfuscate-html (txt)
|
(defun obfuscate-html (txt)
|
||||||
|
@ -289,16 +169,26 @@ That's better. But for a blog you also generally want to have your own CSS.
|
||||||
"Post-amble for whole blog."
|
"Post-amble for whole blog."
|
||||||
(concat
|
(concat
|
||||||
"<div class=\"content\">"
|
"<div class=\"content\">"
|
||||||
|
;; TODO install a comment system
|
||||||
|
;; (let ((url (format "%s%s" domainname (replace-regexp-in-string base-dir "" (plist-get info :input-file)))))
|
||||||
|
;; (format "<a href=\"https://comments.esy.fun/slug/%s\">comment</a>"
|
||||||
|
;; (url-hexify-string url)))
|
||||||
"<footer>"
|
"<footer>"
|
||||||
(when-let ((author (get-from-info info :author)))
|
(when-let ((author (get-from-info info :author)))
|
||||||
(if-let ((email (plist-get info :email)))
|
(if-let ((email (plist-get info :email)))
|
||||||
(format "<div class=\"author\">Author: <a href=\"%s%s\">%s</a></div>"
|
(let* ((obfs-email (obfuscate-html email))
|
||||||
|
(obfs-author (obfuscate-html author))
|
||||||
|
(obfs-title (obfuscate-html (get-from-info info :title)))
|
||||||
|
(full-email (format "%s <%s>" obfs-author obfs-email)))
|
||||||
|
(format "<div class=\"author\">Author: <a href=\"%s%s%s%s\">%s</a></div>"
|
||||||
(obfuscate-html "mailto:")
|
(obfuscate-html "mailto:")
|
||||||
(obfuscate-html email)
|
full-email
|
||||||
(obfuscate-html author))
|
(obfuscate-html "?subject=yblog: ")
|
||||||
|
obfs-title
|
||||||
|
full-email))
|
||||||
(format "<div class=\"author\">Author: %s</div>" author)))
|
(format "<div class=\"author\">Author: %s</div>" author)))
|
||||||
(when-let ((date (get-from-info info :date)))
|
(when-let ((date (get-from-info info :date)))
|
||||||
(format "<div class=\"date\">Created: %s (%s)</div>" date (delta-date date)))
|
(format "<div class=\"date\">Created: %s (%s)</div>" date (y-date date)))
|
||||||
(when-let ((keywords (plist-get info :keywords)))
|
(when-let ((keywords (plist-get info :keywords)))
|
||||||
(format "<div class=\"keywords\">Keywords: <code>%s</code></div>" keywords))
|
(format "<div class=\"keywords\">Keywords: <code>%s</code></div>" keywords))
|
||||||
(format "<div class=\"date\">Generated: %s</div>"
|
(format "<div class=\"date\">Generated: %s</div>"
|
||||||
|
@ -334,17 +224,41 @@ That's better. But for a blog you also generally want to have your own CSS.
|
||||||
"\n")
|
"\n")
|
||||||
"\n#+end_archive\n"))
|
"\n#+end_archive\n"))
|
||||||
|
|
||||||
|
(defun org-blog-publish-to-html (plist filename pub-dir)
|
||||||
|
"Same as `org-html-publish-to-html' but modifies html before finishing."
|
||||||
|
(let ((file-path (org-html-publish-to-html plist filename pub-dir)))
|
||||||
|
(with-current-buffer (find-file-noselect file-path)
|
||||||
|
(goto-char (point-min))
|
||||||
|
(search-forward "<body>")
|
||||||
|
(insert (mapconcat 'identity
|
||||||
|
'("<input type=\"radio\" id=\"light\" name=\"theme\"/>"
|
||||||
|
"<input type=\"radio\" id=\"dark\" name=\"theme\"/>"
|
||||||
|
"<div id=\"labels\">"
|
||||||
|
"<div class=\"content\">"
|
||||||
|
"<label for=\"light\">Light Theme</label>"
|
||||||
|
" / "
|
||||||
|
"<label for=\"dark\">Dark Theme</label>"
|
||||||
|
"</div>"
|
||||||
|
"</div>"
|
||||||
|
"<div class=\"main\">")
|
||||||
|
"\n"))
|
||||||
|
(goto-char (point-max))
|
||||||
|
(search-backward "</body>")
|
||||||
|
(insert "\n</div>\n")
|
||||||
|
(save-buffer)
|
||||||
|
(kill-buffer))
|
||||||
|
file-path))
|
||||||
|
|
||||||
(setq org-publish-project-alist
|
(setq org-publish-project-alist
|
||||||
`(("orgfiles"
|
`(("orgfiles"
|
||||||
:base-directory ,base-dir
|
:base-directory ,base-dir
|
||||||
:exclude ".*drafts/.*"
|
:exclude ".*drafts/.*"
|
||||||
:base-extension "org"
|
:base-extension "org"
|
||||||
|
|
||||||
:publishing-directory ,publish-dir
|
:publishing-directory ,publish-dir
|
||||||
|
|
||||||
:recursive t
|
:recursive t
|
||||||
:preparation-function org-blog-prepare
|
:preparation-function org-blog-prepare
|
||||||
:publishing-function org-html-publish-to-html
|
:publishing-function org-blog-publish-to-html
|
||||||
|
|
||||||
:with-toc nil
|
:with-toc nil
|
||||||
:with-title nil
|
:with-title nil
|
||||||
|
@ -370,6 +284,7 @@ That's better. But for a blog you also generally want to have your own CSS.
|
||||||
("assets"
|
("assets"
|
||||||
:base-directory ,assets-dir
|
:base-directory ,assets-dir
|
||||||
:base-extension ".*"
|
:base-extension ".*"
|
||||||
|
:exclude ".*\.org$"
|
||||||
:publishing-directory ,publish-assets-dir
|
:publishing-directory ,publish-assets-dir
|
||||||
:publishing-function org-publish-attachment
|
:publishing-function org-publish-attachment
|
||||||
:recursive t)
|
:recursive t)
|
||||||
|
|
Loading…
Reference in a new issue