GitLab Commit is coming up on August 3-4. Learn how to innovate together using GitLab, the DevOps platform. Register for free: gitlabcommitvirtual2021.com

Commit c323d755 authored by Diego Vicente's avatar Diego Vicente
Browse files

Add local Reveal.js version

parent f8725a6a
Pipeline #21142682 passed with stage
in 2 minutes and 16 seconds
[submodule "org/reveal.js"]
path = org/reveal.js
url = https://github.com/hakimel/reveal.js.git
Subproject commit a2e69a4b42f9e968406f62073d1c4bf0ea2d3361
/**
* diego.codes theme for reveal.js
* Author: Diego Vicente
* Inspired in Solarized by Achim Staebler
*/
@import url('https://fonts.googleapis.com/css?family=Nunito|Quicksand|Roboto+Mono');
/**
* Solarized colors by Ethan Schoonover
*/
html * {
color-profile: sRGB;
rendering-intent: auto; }
/*********************************************
* GLOBAL STYLES
*********************************************/
body {
background: #fffff8;
background-color: #fffff8; }
.reveal {
font-family: "Nunito", sans-serif;
font-size: 40px;
font-weight: normal;
color: #657b83; }
::selection {
color: #fff;
background: #d33682;
text-shadow: none; }
::-moz-selection {
color: #fff;
background: #d33682;
text-shadow: none; }
.reveal .slides > section,
.reveal .slides > section > section {
line-height: 1.3;
font-weight: inherit; }
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: 0 0 20px 0;
color: #586e75;
font-family: "Quicksand", Impact, sans-serif;
font-weight: normal;
line-height: 1.2;
letter-spacing: normal;
text-transform: none;
text-shadow: none;
word-wrap: break-word; }
.reveal h1 {
font-size: 3.5em; }
.reveal h2 {
font-size: 1.3em; }
.reveal h3 {
font-size: 1.1em; }
.reveal h4 {
font-size: 1em; }
.reveal h1 {
text-shadow: none; }
#sec-title-slide {
text-align: right;
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
text-align: left;
margin: 20px 0;
line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%; }
.reveal strong,
.reveal b {
font-weight: bold; }
.reveal em {
font-style: italic; }
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em; }
.reveal ol {
list-style-type: decimal; }
.reveal ul {
list-style-type: disc; }
.reveal ul ul {
list-style-type: square; }
.reveal ul ul ul {
list-style-type: circle; }
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px; }
.reveal dt {
font-weight: bold; }
.reveal dd {
margin-left: 40px; }
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: 20px auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block; }
.reveal q {
font-style: italic; }
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: 20px auto;
text-align: left;
font-size: 0.55em;
font-family: "Roboto Mono", monospace;
background: #fdf6e3;
line-height: 1.2em;
word-wrap: break-word;
padding: 20px;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
.reveal code {
font-family: "Roboto Mono", monospace;
background: #fdf6e3;
text-transform: none; }
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal; }
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0; }
.reveal table th {
font-weight: bold; }
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; }
.reveal table th[align="center"],
.reveal table td[align="center"] {
text-align: center; }
.reveal table th[align="right"],
.reveal table td[align="right"] {
text-align: right; }
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; }
.reveal sup {
vertical-align: super; }
.reveal sub {
vertical-align: sub; }
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top; }
.reveal small * {
vertical-align: top; }
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: #268bd2;
text-decoration: none;
-webkit-transition: color .15s ease;
-moz-transition: color .15s ease;
transition: color .15s ease; }
.reveal a:hover {
color: #78b9e6;
text-shadow: none;
border: none; }
.reveal .roll span:after {
color: #fff;
background: #1a6091; }
/*********************************************
* IMAGES
*********************************************/
.reveal section img {
margin: 15px 0px;
background: rgba(255, 255, 255, 0.12);
border: 4px solid #657b83;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
.reveal section img.plain {
border: 0;
box-shadow: none; }
.reveal a img {
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear; }
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
border-color: #268bd2;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: #268bd2; }
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0, 0, 0, 0.2);
color: #268bd2; }
.reveal .progress span {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
......@@ -234,9 +234,6 @@ code {
padding: 2px;
border-radius: 0.3em;
}
span.MathJax_Display {
background-color: red;
}
a {
text-decoration: none;
color: #3f8f8f;
......
......@@ -178,8 +178,8 @@
.org-svg { width: 90%; }
/*]]>*/-->
</style>
<link rel="stylesheet" type="text/css" href="../css/fontawesome-all.css" />
<link rel="stylesheet" type="text/css" href="../org-css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="../../css/fontawesome-all.css" />
<link rel="stylesheet" type="text/css" href="../../org-css/stylesheet.css" />
<script type="text/javascript">
/*
@licstart The following is the entire license notice for the
......@@ -239,7 +239,207 @@ for the JavaScript code in this tag.
<br />
<span class="subtitle">Published on April 15, 2018</span>
</h1>
<div id="table-of-contents">
<h2>Table of Contents</h2>
<div id="text-table-of-contents">
<ul>
<li><a href="#orgde7f089">Publish configuration</a>
<ul>
<li><a href="#org792499b"><code>org-publish</code> configuration</a></li>
<li><a href="#org8f84320">Styles using CSS</a></li>
<li><a href="#orgcb79655">Short and clean links: my pet peeve</a></li>
</ul>
</li>
<li><a href="#org794f4f4">&#x2026; And privacy for all</a></li>
<li><a href="#org00ea107">The results</a></li>
</ul>
</div>
</div>
<p>
Some time ago I <a href="../first-post/">wrote about my blogging workflow</a>: I basically used the almighty
<code>org-mode</code> in Emacs to write the posts, and afterwards let <code>hugo</code> generate the
static website. <code>hugo</code> is a great tool, and the results are generally good.
However, <code>hugo</code> and I seem to make different assumptions on how org should be
written. I am one of those 79-characters-wide-text hooligans, so my org code is
hard-wrapped. This seems to produce all kinds of export errors in lists,
footnotes, and other artifacts that seem to not expect a line break <sup><a id="fnr.1" class="footref" href="#fn.1">1</a></sup>.
Furthermore, I am not that savvy in Go, so I cannot really hack with it and
modify it.
</p>
<p>
On the other hand, org was always on point exporting how things are done: no
errors, ever, and as easy as 4 keystrokes when I am in a buffer. I used it for
my work planning, for my agenda, my notes, my assignments&#x2026; I knew how to
tinker with it properly, but I only used it for Latex export. A few weeks ago,
I decided to export a file to HTML, and I saw pretty much understood what was
going on: what elements in org were mapped to in HTML, what elements could be
enabled and disabled&#x2026; And I also noticed that small section in the export
menu: "publish". After reading a bit about it, I decided to take the shot: I
was going to migrate my blogging workflow to <code>org-publish</code>.
</p>
<div id="outline-container-orgde7f089" class="outline-2">
<h2 id="orgde7f089">Publish configuration</h2>
<div class="outline-text-2" id="text-orgde7f089">
</div>
<div id="outline-container-org792499b" class="outline-3">
<h3 id="org792499b"><code>org-publish</code> configuration</h3>
<div class="outline-text-3" id="text-org792499b">
<p>
<code>org-publish</code> is based in <b>projects</b>: projects are policies defined for a set
of files on how they should be exported when that project is executed. You can
define as many projects as you wish, even composing them! And that is exactly
what my current setup is: I have a project to export posts and other org
content (<code>"blog-notes"</code>), a project for static files that should not be
manipulated (<code>"blog-static"</code>) and a parent project that ensures that both of
them are executed (<code>"blog"</code>). Therefore, we just need to set the list
<code>org-publish-alist</code> to include the projects. These are defined using property
lists where we set all the important variables for each of them:
</p>
<ul class="org-ul">
<li><code>base-directory</code> is the folder where your org files (or other static content)
will be hosted. Think of it as your actual workspace.</li>
<li><code>publishing-directory</code> is the folder where the exported files will be
generated to. This directory replicates <code>base-directory</code>'s structure. If we
set things properly, you should never need to actually touch these files
directly!</li>
<li><code>base-extension</code> is a regex that will match against all the files that you
want to be associated with this project.</li>
<li><code>publishing-function</code> is the function that will be used to export the files
contained in a project.</li>
<li><code>html-preamble</code> and <code>html-postamble</code> are strings that will be added before
and after the exported body in HTML. I use these variables to include a
header and a footer for the website.</li>
<li><code>components</code> can be used to declare a list of projects to be run together.</li>
</ul>
<p>
There are a lot of variables that you can set, and you can check out a list of
them in the <a href="https://orgmode.org/manual/Publishing-options.html#Publishing-options">org documentation</a>. Here you can see as a example the code for the
blog posts and other org content:
</p>
<div class="org-src-container">
<pre class="src src-emacs-lisp"><span style="color: #2aa198;">(</span><span style="color: #859900; font-weight: bold;">setq</span> org-publish-project-alist
'<span style="color: #b58900;">(</span><span style="color: #268bd2;">(</span><span style="color: #2aa198;">"blog-notes"</span>
<span style="color: #657b83; font-weight: bold;">:base-directory</span> <span style="color: #2aa198;">"~/Projects/blog/org"</span>
<span style="color: #657b83; font-weight: bold;">:base-extension</span> <span style="color: #2aa198;">"org"</span>
<span style="color: #657b83; font-weight: bold;">:publishing-directory</span> <span style="color: #2aa198;">"~/Projects/blog/public"</span>
<span style="color: #657b83; font-weight: bold;">:recursive</span> t
<span style="color: #657b83; font-weight: bold;">:publishing-function</span> org-html-publish-to-html
<span style="color: #657b83; font-weight: bold;">:headline-levels</span> 4
<span style="color: #657b83; font-weight: bold;">:section-numbers</span> nil
<span style="color: #657b83; font-weight: bold;">:html-head</span> nil
<span style="color: #657b83; font-weight: bold;">:html-head-include-default-style</span> nil
<span style="color: #657b83; font-weight: bold;">:html-head-include-scripts</span> nil
<span style="color: #657b83; font-weight: bold;">:html-preamble</span> my-blog-header
<span style="color: #657b83; font-weight: bold;">:html-postamble</span> my-blog-footer<span style="color: #268bd2;">)</span>
<span style="color: #93a1a1;">;; </span><span style="color: #93a1a1;">Define any other projects here...</span>
<span style="color: #b58900;">)</span><span style="color: #2aa198;">)</span>
</pre>
</div>
</div>
</div>
<div id="outline-container-org8f84320" class="outline-3">
<h3 id="org8f84320">Styles using CSS</h3>
</div>
<div id="outline-container-orgcb79655" class="outline-3">
<h3 id="orgcb79655">Short and clean links: my pet peeve</h3>
<div class="outline-text-3" id="text-orgcb79655">
<pre class="example">
~/Projects/blog/org $ tree post/
post/
├── first-post
│   └── index.org
├── [...]
└── som-tsp
├── index.org
├── italy.png
├── uruguay.gif
└── uruguay.png
</pre>
</div>
</div>
</div>
<div id="outline-container-org794f4f4" class="outline-2">
<h2 id="org794f4f4">&#x2026; And privacy for all</h2>
<div class="outline-text-2" id="text-org794f4f4">
<p>
Even before migrating, I noticed some things that made even more self conscious
of how small was the control I had over my blog: as someone that is actively
dedicated on pursuing privacy, I realized I was doing a terrible job for my
readers. Even though my blog was a static site, it had several trackers
included that were related to different services I used. While migrating I
realized that was even worse: some of the third party petitions where
completely unnecessary and if someone was blocking from loading them (which is
an entirely reasonable thing to do in a blog) it was probably finding some
breaking errors. I just intended to share some of the things I learned, so I
found most of these services not needed or easy enough to substitute. Here is
the full list of sacrifices and improved services in this migration.
</p>
<p>
Using <b>Google Analytics</b> was simply a not well-thought decision. My <code>hugo</code>
theme offered a simple way to include a Google Analytics token, so I chipped in
just to try. What I found was an ubiquitous and thorough analysis of the
visitors to my page: the perfect ego-trip tool. I never really though that it
would include also giving Google tons of information about my readers in
exchange for a few chart pies that are not of much use to me. That's why I
decided to simply discard this service: if I need it in the future I will
simply look for a better alternative.
</p>
<p>
The worst decision was to use <b>Disqus</b>. One day, while checking one of my posts
on my phone, I discovered that Disqus was not only loading a lot of resources,
but also was injecting ads into my posts. It was also miserably failing at its
only purpose: centralising the discussion of the post. Instead, the discussion
was scattered across Reddit, Lobsters, HackerNews and some other aggregators.
Disqus asks to create an account to leave a comment, which is enough to
dissuade most users to even try to do it. It is also owned by Zeta Global, a
marketing agency that is most likely tracking their users across the internet
a la Google. Therefore, I decided to simply not include a comment section any
more, and let the readers join the discussion they prefer.
</p>
<p>
Other corners I decided to polish was random third-party requests. Instead of
requesting a different server for Fontawesome, Google Fonts, MathJax or other
resources, I decided to choose a <b>self-hosted</b> approach: all the resources are
loaded from GitLab Pages and therefore from <a href="https://diego.codes">https://diego.codes</a>. This makes me
have more control on the services and ensures that no funny business in
happening on a third-party request.I actually decided to use GitLab instead of
GitHub because it allows for HTTPS on custom domains, while <a href="https://github.com/isaacs/github/issues/156">GitHub Pages has
been seems to be in a 4 year old struggle to achieve it</a>. In my humble opinion,
the compromise of ensuring my readers the best privacy option by default is the
least I can do to be grateful for their time reading my posts.
</p>
</div>
</div>
<div id="outline-container-org00ea107" class="outline-2">
<h2 id="org00ea107">The results</h2>
</div>
<div id="footnotes">
<h2 class="footnotes">Footnotes: </h2>
<div id="text-footnotes">
<div class="footdef"><sup><a id="fn.1" class="footnum" href="#fnr.1">1</a></sup> <div class="footpara"><p class="footpara">
As <a href="https://www.reddit.com/user/kaushalmodi">u/kaushalmodi</a> pointed out in <a href="https://www.reddit.com/r/emacs/">r/emacs</a>, the easiest way to solve these
problems are using the package <a href="https://github.com/kaushalmodi/ox-hugo"><code>ox-hugo</code></a> to solve this problems while
maintaining the speed and taxonomies, as well as adding some flexibility.
However, we are not here to talk about the easy mode. Also, my blog is tiny, so
speed is not a deal breaker for me.
</p></div></div>
</div>
</div></div>
<div id="postamble" class="status">
<footer id="footer" class="color color-secondary short">
<div class="container">
......
/* Default Print Stylesheet Template
by Rob Glazebrook of CSSnewbie.com
Last Updated: June 4, 2008
Feel free (nay, compelled) to edit, append, and
manipulate this file as you see fit. */
@media print {
/* SECTION 1: Set default width, margin, float, and
background. This prevents elements from extending
beyond the edge of the printed page, and prevents
unnecessary background images from printing */
html {
background: #fff;
width: auto;
height: auto;
overflow: visible;
}
body {
background: #fff;
font-size: 20pt;
width: auto;
height: auto;
border: 0;
margin: 0 5%;
padding: 0;
overflow: visible;
float: none !important;
}
/* SECTION 2: Remove any elements not needed in print.
This would include navigation, ads, sidebars, etc. */
.nestedarrow,
.controls,
.fork-reveal,
.share-reveal,
.state-background,
.reveal .progress,
.reveal .backgrounds,
.reveal .slide-number {
display: none !important;
}
/* SECTION 3: Set body font face, size, and color.
Consider using a serif font for readability. */
body, p, td, li, div {
font-size: 20pt!important;
font-family: Georgia, "Times New Roman", Times, serif !important;
color: #000;
}
/* SECTION 4: Set heading font face, sizes, and color.
Differentiate your headings from your body text.
Perhaps use a large sans-serif for distinction. */
h1,h2,h3,h4,h5,h6 {
color: #000!important;
height: auto;
line-height: normal;
font-family: Georgia, "Times New Roman", Times, serif !important;
text-shadow: 0 0 0 #000 !important;
text-align: left;
letter-spacing: normal;
}
/* Need to reduce the size of the fonts for printing */
h1 { font-size: 28pt !important; }
h2 { font-size: 24pt !important; }
h3 { font-size: 22pt !important; }
h4 { font-size: 22pt !important; font-variant: small-caps; }
h5 { font-size: 21pt !important; }
h6 { font-size: 20pt !important; font-style: italic; }
/* SECTION 5: Make hyperlinks more usable.
Ensure links are underlined, and consider appending
the URL to the end of the link for usability. */
a:link,
a:visited {
color: #000