init commit

13 files changed, 572 insertions, 0 deletions

diff --git a/www/.gitignore b/www/.gitignore
new file mode 100644
index 0000000..364fdec
--- /dev/null
+++ b/www/.gitignore
@@ -0,0 +1 @@
+public/
diff --git a/www/Makefile b/www/Makefile
new file mode 100644
index 0000000..80b9d47
--- /dev/null
+++ b/www/Makefile
@@ -0,0 +1,14 @@
+.ONESHELL:
+ROOT_DIR := $(dir $(realpath $(lastword $(MAKEFILE_LIST))))
+
+# build html files for public/
+build:
+        @input_dir=~/log/posts \
+        output_dir=/srv/http \
+        assets_dir=$(ROOT_DIR)assets \
+        template_dir=$(ROOT_DIR)templates \
+        $(ROOT_DIR)scripts/build.sh
+
+# Migrage frontmatter from '---' to HTML comment '<!-- -->'
+frontmatter:
+        find content -type f -name '*.md' | xargs sed -i ':frontmatter { 1s/^---/<!--/; 1!s/^---/-->/; 1!b}; /^---/ {1b frontmatter}'
diff --git a/www/assets/favicon.ico b/www/assets/favicon.ico
new file mode 100644
index 0000000..5af1857
--- /dev/null
+++ b/www/assets/favicon.ico
diff --git a/www/assets/gpg.asc b/www/assets/gpg.asc
new file mode 100644
index 0000000..f33181e
--- /dev/null
+++ b/www/assets/gpg.asc
@@ -0,0 +1,84 @@
+-----BEGIN PGP PUBLIC KEY BLOCK-----
+
+mQGNBGAzCdIBDACvt2iu+FTg+p3Q5p/J8Q7643g61n3kgIgDt9a5JU06nwAGDmX+
+hIrVy5OxsTntJzRkvV+nr0cR9Suvkci9RfJ9TixjMca+Eld3pPLhdPGmtPofjCaj
+LpKMkPdHg+VU4B7BANwsd/on7VYLq5Ko6dj1HKrp3KJappP5njK1u39DQHjLPEjK
+976nyErOdKNVjswIWdLFJgWhC46mH3zW4aOtkw8UIn32fbCmpZyuVU8ooJTbIl6+
+YvU9BsYRgEhSjQbi+RXQZAyUqsQlZnS8/81pwanKs6NFqBSTFaryHVfbC1McXHNY
+V3+Y/rGEmUIn2FXhHWWHb8b5oBroZQLbHVpjWV3DZgkTN0c8g+K3hQ1iLFAdWuQg
+wxBuzkq/5AMiqJ/0gUjkT4uW12fIEQR30wvveVDq/BMWdhC4tgy+ft5QcBjA3xj2
+xC813/r3cvgfWaJvB5/mUH4QPv1gESG9QdjAVOBMt/TTnKJFes5iuq1q0+ZdnG0S
+KZ1aFlfbGgZWcW8AEQEAAbQvdHlwZWJyb29rIDx0eXBlYnJvb2tAZ21haWwuY29t
+PiAoR21haWwgQWNjb3VudCmJAdQEEwEIAD4WIQQSgUZMDGWhjNgJ9OxmRzq+mhjP
+LQUCYEnKDgIbAwUJA8JnAAULCQgHAgYVCgkICwIEFgIDAQIeAQIXgAAKCRBmRzq+
+mhjPLe7zC/9/6O4+icJc74Y/d/VhJv4k/Zc3b2ZlMrdGq/FDQTYSISPPo2k6hgcS
+IQw2SPNb0hRkoaj7Dj3tMFzumSrGMyfGNXHThYWh3UABSTkTnYIXMNhd+on7VpfZ
+FqkBrIfgv+Im7Gops66L7x9b3BT16yxb373uG9bhe+w/Kzk8Mix6f57M9f21f/MI
+trOKbA50HG6scpmytJ5YHiu7qZVihhVewJDX32e9W9fpMu3Kos+SCDOzxIrLl8An
+/8WrSTqAMh/RGYKaxL6A+JjZyhDMXjWMZfvCPfzFrfF60D3ppcDtatqYvMk76i+c
+QW8Oiyv8CRWEK9CzSXptz/MsDwzVKn4UV4QFyoCmB4EGLB7+lbSbnNdtZeluoElG
++HKIwayJ9s09m3AItTIoyaejjLp7+NgivoUWueW8c2z4KHSY9uJYij0+3k9VASfx
+Njs7DdiWcgezi4BIHS0dC7sRLmJ2U5Bt0oHyRzoDa67trumCLKc/b8xAEaZZCO8z
+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
+RWr5Ni7wyLHOaHhoDLK9i+Fz
+=DNGE
+-----END PGP PUBLIC KEY BLOCK-----
diff --git a/www/assets/robots.txt b/www/assets/robots.txt
new file mode 100644
index 0000000..41f82c4
--- /dev/null
+++ b/www/assets/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://topo.tw/sitemap.xml
diff --git a/www/assets/style.css b/www/assets/style.css
new file mode 100644
index 0000000..2752323
--- /dev/null
+++ b/www/assets/style.css
@@ -0,0 +1,213 @@
+header {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+}
+
+footer * {
+  display: inline;
+}
+
+blockquote {
+  color: gray;
+  font-size: 1.2rem;
+  font-style: italic;
+
+  text-align: center;
+}
+
+p code {
+  margin-inline: 0.2rem;
+  padding-inline: 6px;
+}
+
+/* Neat CSS: https://neat.joeldare.com */
+* {
+    box-sizing: border-box;
+}
+
+:root {
+    color-scheme: light dark;
+    --light: #fff;
+    /* --light: #f7f7f7; */
+    --lesslight: #efefef;
+    --dark: #404040;
+    --moredark: #000;
+    /*--link: royalblue; */
+    --link: #850000;
+    --link-highlight-color: #ffdcda;
+    /* border-top: 5px solid var(--dark); */
+    line-height: 1.5em;
+    font-family: system-ui, sans-serif;
+    font-size: 16px;
+    color: var(--dark);
+}
+
+h1 {
+    line-height: 1em;
+}
+
+button, input {
+    font-size: 1em; /* Override browser default font shrinking*/
+}
+
+input {
+    border: 1px solid var(--dark);
+    background-color: var(--lesslight);
+    border-radius: .25em;
+    padding: .5em;
+}
+
+pre {
+    background-color: var(--lesslight);
+    margin: 0.5em 0 0.5em 0;
+    padding: 0.5em;
+    overflow: auto;
+}
+
+code {
+    background-color: var(--lesslight);
+}
+
+body {
+    background-color: var(--light);
+    margin: 0;
+    max-width: 800px;
+    padding: 0 20px 20px 20px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+a {
+    outline: none;
+    text-decoration: underline 2px var(--link-highlight-color);
+    color: var(--link);
+}
+
+a:hover {
+    background: var(--link-highlight-color);
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+button, .button, input[type=submit] {
+    display: inline-block;
+    background-color: var(--dark);
+    color: var(--light);
+    text-align: center;
+    padding: .5em;
+    border-radius: .25em;
+    text-decoration: none;
+    border: none;
+    cursor: pointer;
+}
+
+button:hover, .button:hover, input[type=submit]:hover {
+    color: var(--lesslight);
+    background-color: var(--moredark);
+}
+
+/* Add a margin between side-by-side buttons */
+button + button, .button + .button, input[type=submit] + input[type=submit] {
+    margin-left: 1em;
+}
+
+.center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+.bordered {
+    border: 3px solid;
+}
+
+.home {
+    display: inline-block;
+    background-color: var(--dark);
+    color: var(--light);
+    margin-top: 20px;
+    padding: 5px 10px 5px 10px;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+
+/* Desktop sizes */
+@media (min-width: 600px) {
+    ol.twocol {
+        column-count: 2;
+    }
+
+    .row {
+        display: flex;
+        flex-direction: row;
+        padding: 0;
+        width: 100%;
+    }
+
+    /* Make everything in a row a column */
+    .row > * {
+        display: block;
+        flex: 1 1 auto;
+        max-width: 100%;
+        width: 100%;
+    }
+
+    .row > *:not(:last-child) {
+        margin-right: 10px;
+    }
+}
+
+/* Dark mode overrides (confusingly inverse) */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --light: #222;
+        --lesslight: #333;
+        --dark: #eee;
+        --moredark: #fefefe;
+    }
+    /* This fixes an odd blue then white shadow on FF in dark mode */
+    *:focus {
+        outline: var(--light);
+        box-shadow: 0 0 0 .25em var(--link);
+    }
+}
+
+/* Printing */
+@media print {
+    .home {
+        display: none;
+    }
+}
+
+[data-tooltip]{
+  display: inline-block;
+  position: relative;
+
+  &::after {
+    display: block;
+    position: absolute;
+    content: attr(data-tooltip);
+    background: var(--dark);
+    color: var(--lesslight);
+    padding: .25em;
+    cursor: default;
+    user-select: text;
+
+    transition:
+      visibility .3s ease-out,
+      opacity .3s ease-out;
+    visibility: hidden;
+    opacity: 0;
+  }
+
+  &:hover::after {
+    opacity: 1;
+    visibility: visible;
+  }
+}
diff --git a/www/assets/wp-admin.php b/www/assets/wp-admin.php
new file mode 100644
index 0000000..b774c98
--- /dev/null
+++ b/www/assets/wp-admin.php
@@ -0,0 +1 @@
+Got you!
diff --git a/www/scripts/add-graph.py b/www/scripts/add-graph.py
new file mode 100755
index 0000000..455b45a
--- /dev/null
+++ b/www/scripts/add-graph.py
@@ -0,0 +1,35 @@
+#! /bin/python3
+
+import sys, subprocess
+from datetime import date
+from bs4 import BeautifulSoup
+
+def handle(html):
+    soup = BeautifulSoup(html, 'html.parser')
+    for graph in soup.select('pre.language-graph'):
+        print()
+        print(date.today().strftime("%H:%M:%S"))
+        print('before:')
+        print(graph.string)
+
+        process = subprocess.Popen(
+            ["/usr/bin/vendor_perl/graph-easy", "--boxart"], 
+            stdin=subprocess.PIPE, 
+            stdout=subprocess.PIPE, 
+            stderr=subprocess.PIPE
+        )
+        output, error = process.communicate(input=graph.get_text().encode())
+        graph.string = output.decode()
+
+        print('After:')
+        print(graph.string)
+        print('Error:')
+        print(error.decode())
+    return str(soup)
+
+for line in sys.stdin:
+    file = line.rstrip("\n")
+    with open(file, 'r') as html:
+        new_content = handle(html)
+    with open(file, 'w') as html:
+        html.write(new_content)
diff --git a/www/scripts/build.sh b/www/scripts/build.sh
new file mode 100755
index 0000000..9b95c99
--- /dev/null
+++ b/www/scripts/build.sh
@@ -0,0 +1,188 @@
+#! /bin/bash
+
+set -e
+
+# Executable command for markdown
+markdown_bin="markdown -f fencedcode,autolink,alphalist,autolink,footnote"
+
+# Directory for input/output
+input_dir=${input_dir:?ENV \"input_dir\" is not set}
+output_dir=${output_dir:?ENV \"output_dir\" is not set}
+assets_dir=${assets_dir:?ENV \"assets_dir\" is not set}
+template_dir=${template_dir:?ENV \"template_dir\" is not set}
+
+# functions {{{
+
+# add indent for each line except <pre>
+indent() {
+  indent="$(printf "%${1}s")"
+  sed "s/^/${indent}/; /<pre>/!b; :pre; N; /<\/pre>/!b pre"
+}
+
+# use heredoc to generate html from .md file and templates
+html() {
+  <<-END_OF_HTML sed '1d;$d'
+
+        <!DOCTYPE html>
+        <html lang="en">
+        ${head}
+        <body>
+        ${header}
+          <hr><br>
+          <main>
+        $(${markdown_bin} | indent 4)
+          </main>
+          <br><hr>
+        ${footer}
+        </body>
+        </html>
+
+        END_OF_HTML
+}
+
+# list of latest posts in markdown format
+latest_posts() {
+  (IFS=$'\n'; echo "${index_list[*]}") | sort -r | head -20 | while read date path title; do
+    echo "- <time datetime="$date">$date</time> [$title](/$path)"
+  done
+}
+
+# print frontmatter from markdown file with format: "<key> <value>"
+get_frontmatter() {
+  sed -n '1 {/<!--/ !q; n}; /-->/q; s/"//g; s/://p'
+}
+
+# process frontmatter
+add_index() {
+  unset title public index date draft
+
+  # define local variables for frontmatter
+  while read key value; do
+    local -r $key="$value"
+  done <<<"$(get_frontmatter)"
+
+  # don't process draft after function call
+  test "$draft" != ""           && return 1
+
+  # skip making index in some cases
+  test "$public" = false        && return 0
+  test "$index"  = false        && return 0
+  test "$type"   = demo         && return 0
+  test "$title"  = ""           && return 0
+  iso8601=$(date --iso --date "${date:-NULL}" 2>/dev/null)
+  test "$iso8601"   = ""        && return 0
+
+  # put frontmatter info into variable "index" if title and date are valid
+  index_list+=("$iso8601 $path $title")
+}
+
+# remove SGML comments but keep the top one as frontmatter
+ignore_comment() {
+  sed '1 !{ /^<!--$/,/^-->$/ d }'
+}
+
+# Generate the feed file
+make_rss() {
+  echo -n "Making RSS "
+
+  rssfile=$blog_feed.$RANDOM
+  while [[ -f $rssfile ]]; do rssfile=$blog_feed.$RANDOM; done
+
+  {
+        pubdate=$(LC_ALL=C date +"$date_format_full")
+        cat <<-EOF
+                <?xml version="1.0" encoding="UTF-8" ?>'
+                <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">'
+                <channel><title>Dummy Website</title><link>https://topo.tw/index.xml</link>"
+                <description>$global_description</description><language>en</language>"
+                <lastBuildDate>$pubdate</lastBuildDate>"
+                <pubDate>$pubdate</pubDate>"
+                <atom:link href="$global_url/$blog_feed" rel="self" type="application/rss+xml" />"
+        EOF
+
+        n=0
+        while IFS='' read -r i; do
+          is_boilerplate_file "$i" && continue
+          ((n >= number_of_feed_articles)) && break # max 10 items
+          echo -n "." 1>&3
+          echo '<item><title>'
+          get_post_title "$i"
+          echo '</title><description><![CDATA['
+          get_html_file_content 'text' 'entry' $cut_do <"$i"
+          echo "]]></description><link>$global_url/${i#./}</link>"
+          echo "<guid>$global_url/$i</guid>"
+          echo "<dc:creator>$(get_post_author "$i")</dc:creator>"
+          echo "<pubDate>$(LC_ALL=C date -r "$i" +"$date_format_full")</pubDate></item>"
+
+          n=$(( n + 1 ))
+        done < <(ls -t ./*.html)
+
+        echo '</channel></rss>'
+  } 3>&1 >"$rssfile"
+  echo ""
+
+  mv "$rssfile" "$blog_feed"
+  chmod 644 "$blog_feed"
+}
+
+# }}}
+# prepare directory for outputs {{{
+
+mkdir -p $output_dir/
+rm -rf $output_dir/**
+ln -s $assets_dir/* $output_dir/
+
+# }}}
+# content of templates {{{
+
+head="$(cat $template_dir/head.html)"
+header="$(cat $template_dir/header.html | indent 2)"
+footer="$(cat $template_dir/footer.html | indent 2)"
+index_list=()
+index_template="$(cat $template_dir/index.md)"
+
+# }}}
+# for each markdown file {{{
+
+files="$(find "$input_dir" -type f -name '*md')"
+total=$(wc -l <<<"$files")
+declare -i counter
+for file in $files; do
+  # set variables
+  path=$(<<<"$file" sed "s#^${input_dir}/##; s/\.md$//").html; mkdir -p $(dirname $output_dir/$path)
+  content="$(cat ${file} | ignore_comment)"
+
+  # use frontmatter to decide making html file or not
+  <<<"$content" add_index || continue
+
+  # log
+  echo -e "\033[1K\r$((counter+=1))/$total \t\t processing $path"
+
+  # make html file for draft
+  h1="$(<<<"$content" get_frontmatter | sed -n 's/^title *//p')"
+  echo "$content" \
+  | tee $output_dir/${file#${input_dir}/} \
+  | { [ -n "$h1" ] && echo "# $h1"; cat; } \
+  | html >$output_dir/$path
+done
+echo
+
+# }}}
+# make index.html {{{
+
+{
+  echo "${index_template}"
+  echo -e '<br><br>\n\n'
+  latest_posts
+} \
+| tee $output_dir/index.md \
+| html >$output_dir/index.html
+
+echo -e index.html "\t" generated
+
+# }}}
+# make index.xml {{{
+
+
+
+# }}}
diff --git a/www/templates/footer.html b/www/templates/footer.html
new file mode 100644
index 0000000..9e87e02
--- /dev/null
+++ b/www/templates/footer.html
@@ -0,0 +1,4 @@
+<footer>
+  <address><a href="mailto:info@topo.tw">info@topo.tw</a></address> |
+  <a href="http://creativecommons.org/publicdomain/zero/1.0" rel="license noopener noreferrer">CC0 1.0</a>
+</footer>
diff --git a/www/templates/head.html b/www/templates/head.html
new file mode 100644
index 0000000..ede99c9
--- /dev/null
+++ b/www/templates/head.html
@@ -0,0 +1,10 @@
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+  <title>Dummy Site</title>
+
+  <link rel="stylesheet" href="/style.css">
+  <link rel="icon" href="/favicon.ico" type="image/x-icon">
+</head>
diff --git a/www/templates/header.html b/www/templates/header.html
new file mode 100644
index 0000000..a77079a
--- /dev/null
+++ b/www/templates/header.html
@@ -0,0 +1,17 @@
+<header>
+  <nav class="left">
+    <a href="/">Home</a> |
+    <a href="/about.html" data-tooltip="About this site">About</a> |
+    <a href="/posts/">Posts</a> |
+    <a href="/projects.html" data-tooltip="Not valid now...">Projects</a> |
+    <!--
+    <a href="/links.html" data-tooltip="Cool sites you might be interested">Links</a>
+    -->
+    <a href="/links.html" data-tooltip="Not valid now...">Links</a>
+  </nav>
+  <nav class="right">
+    <a href="/rss.xml" data-tooltip="Not valid now...">RSS</a> |
+    <a href="https://git.topo.tw" data-tooltip="Public Git Repos">Code</a> |
+    <a href="/gpg.asc">GPG</a>
+  </nav>
+</header>
diff --git a/www/templates/index.md b/www/templates/index.md
new file mode 100644
index 0000000..5743a19
--- /dev/null
+++ b/www/templates/index.md
@@ -0,0 +1 @@
+> There should be a intro for this site, but I cannot came up with any idea about this...