-
Notifications
You must be signed in to change notification settings - Fork 0
/
hello_world.html
206 lines (192 loc) · 11.2 KB
/
hello_world.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<meta name="dcterms.date" content="2019-01-01" />
<title>Hello World</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#d64937">
<meta name="msapplication-TileColor" content="#d64937">
<meta name="theme-color" content="#ffffff">
<style>
@font-face {
font-family: 'Quando';
font-style: normal;
font-weight: 400;
src: local('Quando-Regular'), url(https://fonts.gstatic.com/s/quando/v5/PH1InQe0rvp_yN3TzIuyyQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v8/6xKtdSZaM9iE8KbpRA_hK1QN.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
span.underline{text-decoration: underline;}
div.column{display: inline-block; vertical-align: top; width: 50%;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
color: #aaaaaa;
}
pre.numberSource { margin-left: 3em; border-left: 1px solid #aaaaaa; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
</style>
<link rel="stylesheet" href="style.css" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
<a name="top"></a>
<!--
__ .__ .__ .___
_/ |_________ ____ | | _|__| __| _/
\ __\___ // __ \| |/ / |/ __ |
| | / __/\ ___/| <| / /_/ |
|__| /_____ \\___ >__|_ \__\____ |
\/ \/ \/ \/
`Giant ascii art embedded in every page of your site is how you
show other people that YOU CARE.` - aerotwist
You looked at the source. No matter who you are, I like you now.
No matter what you do, keep up the good work :)
Much <3'z
kid
-->
<div class="container">
<nav class="nav">
<input type="checkbox" id="nav" class="hidden">
<label for="nav" class="nav-btn">
<i></i>
<i></i>
<i></i>
</label>
<div class="logo">
<!-- <a href="/"><{ tzekid }></a> -->
<a href="/"><{ x }></a>
</div>
<div class="nav-wrapper">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/resume.pdf">Resume</a></li>
</ul>
</div>
</nav>
</div>
<article>
<header id="title-block-header">
<h1 class="title">Hello World</h1>
<p class="date">1 January 2019</p>
</header>
<nav id="TOC" role="doc-toc">
<ul>
<li><a href="#the-website">The website</a>
<ul>
<li><a href="#goals">Goals</a></li>
<li><a href="#implementation">Implementation</a></li>
</ul></li>
<li><a href="#lessons-learned">Lessons learned</a></li>
</ul>
</nav>
<p><strong>TL;DR</strong> Short rant about the website.</p>
<h2 id="the-website">The website</h2>
<p>With free time on my hands these holidays I’ve decided that it was about time to revamp my website. Learning to use an off the shelf <a href="https://www.staticgen.com/">static site generator</a> looked daunting, so I’ve decided to <a href="https://en.wikipedia.org/wiki/Reinventing_the_wheel">build my own</a>™.</p>
<h3 id="goals">Goals</h3>
<p>The main goals of this website was to put myself out there and learn to write for an audience.</p>
<p>The main design choice for the website was: steal as much as possible from other people, and hope you have stolen enough so that people won’t pinpoint the source at first glance.</p>
<h3 id="implementation">Implementation</h3>
<p>After I’ve look at how other’s built their websites, I decided to follow <a href="https://en.wikipedia.org/wiki/KISS_principle">K.I.S.S.</a> and mainly use <a href="https://pandoc.org/demos.html"><code>pandoc</code></a>’s markdown to html generation as a starting point. And it was awesome.</p>
<p>Pandoc will simply take in some text file and turn it into anything you could possibly want. It even has embedded syntax highlighting out of the box! That right there made me happy that I wouldn’t have to depend on an external JS library for that functionality.</p>
<p>With the website slowly evolving I needed some way to glue all the things together, and there came bash scripting into action. I ended up writing small scripts which did specific tasks, from glueing the navigation to each html file to recognising custom syntax and replacing these lines with a html for checkboxes that I really, really wanted to have.</p>
<h2 id="lessons-learned">Lessons learned</h2>
<p>I should definetly learn to use grep/sed/awk for text search and manipulation. Second lesson, which may be even more important is <a href="https://youtu.be/bkgeFi4PwOg">streams</a> in bash scripts. The time ‘compiling’ the whole site went from over 10 seconds to just about a second.</p>
<!-- ```{.bash .numberLines startFrom="100"} -->
<div class="sourceCode" id="cb1"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb1-1"><a href="#cb1-1"></a><span class="co"># a sample line from `scripts/process.sh` </span></span>
<span id="cb1-2"><a href="#cb1-2"></a><span class="ex">scripts/add_checkboxes.sh</span> <span class="va">$1</span> <span class="kw">|</span> <span class="ex">pandoc</span> -s --toc -c style.css --katex <span class="kw">|</span><span class="ex">\ </span> </span>
<span id="cb1-3"><a href="#cb1-3"></a><span class="ex">scripts/refine.sh</span> <span class="op">></span> <span class="va">$new_file</span> </span></code></pre></div>
<p>The next thing I discovered was <a href="http://eradman.com/entrproject/">entr</a>. It’s a tool that watches for file changes and performs commands you give it when one occurs.</p>
<!-- ```{.bash .numberLines startFrom="100"} -->
<div class="sourceCode" id="cb2"><pre class="sourceCode bash"><code class="sourceCode bash"><span id="cb2-1"><a href="#cb2-1"></a><span class="co"># automagically compile when a file in `src/` changes </span></span>
<span id="cb2-2"><a href="#cb2-2"></a><span class="fu">ls</span> src/* <span class="kw">|</span> <span class="ex">entr</span> -p ./compile.sh </span></code></pre></div>
<p>A goal on the todo list is only compiling the files that were changed, or react to edge cases when two or more files need changing.</p>
<p>Lastly, something that’s in the works™ is automatically including the reading time of each article after the title. While implementing that I found <a href="https://en.wikipedia.org/wiki/Wc_(Unix)"><code>wc</code></a>, a tool that prints character, word, line &c. count. Small things like this make your life easier.</p>
<hr />
<p>Thanks for reading so far and I hope you’ve found something useful here!</p>
<!--
### Topics I _may_ cover in the future
- society. a term misunderstood and misused.
- anger. why it is healthy and we need to learn to channel it.
- parallelism and functional programming. how to get started?
- stoicism. a self report -->
<a class='up-btn' href='#top'><{ ⇡ }></a>
</article>
</body>
</html>