Merge branch 'fiddle-around-with-klingt.net'

build/klingt.net/Makefile

@@ -1,8 +1,18 @@
-all: out out/assets
+all: template
+
+template: out static $(wildcard pages/*.html) template.html
 	@./template.py
 
+serve: template
+	@cd out && python3 -m http.server
+
 out:
 	@mkdir -p out
 
-out/assets: out
+static: out/assets out/favicon.ico
+
+out/assets: assets
 	@cp -r assets out
+
+out/favicon.ico: out favicon.ico
+	@cp favicon.ico $@

build/klingt.net/assets/logo.svg

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="226.772"
+   height="226.774"
+   viewBox="0 0 226.77201 226.77401"
+   enable-background="new 0 0 283.465 283.465"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="1956580_15513895_al_logo_orig.svg"><metadata
+     id="metadata17"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs15" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="1920"
+     inkscape:window-height="1151"
+     id="namedview13"
+     showgrid="false"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:zoom="0.83255429"
+     inkscape:cx="115.78874"
+     inkscape:cy="113.3865"
+     inkscape:window-x="0"
+     inkscape:window-y="26"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" /><g
+     id="g3"
+     transform="translate(-28.346,-28.345)"><path
+       d="m 141.734,28.345 c -62.622,0 -113.388,50.765 -113.388,113.385 0,62.629 50.766,113.389 113.388,113.389 62.624,0 113.384,-50.76 113.384,-113.389 0,-62.62 -50.761,-113.385 -113.384,-113.385 z m -0.001,215.428 c -40.403,0 -75.32,-23.479 -91.855,-57.537 l 10e-4,-0.002 2.675,-5.737 c 0,0 0,0 0,10e-4 0,0 0,0 0,0.001 l 0,-0.002 42.696,-91.542 c 0.659,-1.413 2.474,-2.569 4.033,-2.569 l 15.435,0 c 1.559,0 3.374,1.156 4.033,2.569 l 51.34,110.092 c 0.659,1.413 -0.077,2.569 -1.637,2.569 l -15.517,0 c -1.56,0 -3.375,-1.156 -4.033,-2.569 L 101.134,96.604 c -0.659,-1.413 -1.737,-1.413 -2.396,0 l -42.563,91.277 0,0.001 c 16.462,30.395 48.631,51.093 85.559,51.093 l 0,0 c 19.817,0 38.265,-5.961 53.651,-16.18 1.283,-0.852 2.544,-1.733 3.782,-2.643 1.239,-0.91 2.456,-1.849 3.649,-2.814 2.386,-1.932 4.68,-3.975 6.873,-6.119 l 0,-0.001 6.765,0 -0.001,0.001 c -18.632,20.025 -45.211,32.554 -74.72,32.554 z m 79.79,-42.157 -3.226,0 -12.027,0 c -1.56,0 -4.109,0 -5.67,0 l -15.515,0 c -1.56,0 -3.374,-1.156 -4.032,-2.569 L 129.716,88.955 c -0.658,-1.413 0.078,-2.569 1.637,-2.569 l 15.515,0 c 1.56,0 3.374,1.156 4.032,2.569 l 48.353,103.691 c 0.659,1.414 2.474,2.569 4.033,2.569 l 19.626,0 c 10.151,-15.354 16.066,-33.74 16.066,-53.484 0,-53.62 -43.623,-97.241 -97.245,-97.241 -53.624,0 -97.25,43.621 -97.25,97.241 0,1.767 0.061,3.519 0.155,5.263 0.025,0.465 0.04,0.932 0.071,1.395 0.128,1.88 0.322,3.741 0.556,5.591 0.04,0.315 0.07,0.634 0.113,0.948 0.01,0.071 0.023,0.143 0.033,0.215 0.589,4.241 1.45,8.396 2.569,12.447 l -3.045,6.528 c 0,-0.001 0,-0.001 0,-0.002 -3.402,-10.175 -5.25,-21.065 -5.25,-32.385 0,-56.353 45.691,-102.042 102.049,-102.042 56.357,0 102.044,45.689 102.044,102.042 0,22.375 -7.207,43.065 -19.42,59.884 l -2.835,0 z"
+       id="path5"
+       inkscape:connector-curvature="0"
+       style="fill:#19191a" /><g
+       id="g7"><path
+         d="m 141.735,39.69 c -56.358,0 -102.049,45.689 -102.049,102.042 0,11.32 1.848,22.21 5.25,32.385 0,0.001 0,0.001 0,0.002 l 3.045,-6.528 c -1.119,-4.051 -1.979,-8.206 -2.569,-12.447 -0.01,-0.072 -0.023,-0.144 -0.033,-0.215 -0.043,-0.314 -0.074,-0.633 -0.113,-0.948 -0.234,-1.85 -0.428,-3.711 -0.556,-5.591 -0.032,-0.463 -0.046,-0.93 -0.071,-1.395 -0.094,-1.744 -0.155,-3.496 -0.155,-5.263 0,-53.62 43.626,-97.241 97.25,-97.241 53.622,0 97.245,43.621 97.245,97.241 0,19.744 -5.915,38.13 -16.066,53.484 l -19.626,0 c -1.56,0 -3.374,-1.155 -4.033,-2.569 L 150.9,88.955 c -0.658,-1.413 -2.473,-2.569 -4.032,-2.569 l -15.515,0 c -1.559,0 -2.295,1.156 -1.637,2.569 l 51.337,110.092 c 0.658,1.413 2.473,2.569 4.032,2.569 l 15.515,0 c 1.561,0 4.11,0 5.67,0 l 12.028,0 3.226,0 2.836,0 c 12.213,-16.819 19.42,-37.509 19.42,-59.884 C 243.779,85.379 198.092,39.69 141.735,39.69 Z"
+         id="path9"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff" /><path
+         d="m 209.689,211.219 c -2.193,2.145 -4.487,4.188 -6.873,6.119 -1.193,0.966 -2.41,1.904 -3.649,2.814 -1.238,0.909 -2.499,1.791 -3.782,2.643 -6.731,4.471 -14.049,8.127 -21.811,10.824 -9.979,3.47 -20.693,5.355 -31.841,5.355 l 0,0 c -36.928,0 -69.097,-20.698 -85.559,-51.093 l 0,-0.001 42.563,-91.277 c 0.659,-1.413 1.737,-1.413 2.396,0 l 47.771,102.443 c 0.658,1.413 2.474,2.569 4.033,2.569 l 15.517,0 c 1.56,0 2.296,-1.156 1.637,-2.569 L 118.751,88.954 c -0.659,-1.413 -2.474,-2.569 -4.033,-2.569 l -15.435,0 c -1.559,0 -3.374,1.156 -4.033,2.569 l -42.694,91.542 0,0.002 c 0,-10e-4 0,-10e-4 0,-10e-4 0,-0.001 0,-0.001 0,-0.001 l -2.675,5.737 -10e-4,0.002 c 16.535,34.058 51.452,57.537 91.855,57.537 29.509,0 56.088,-12.529 74.72,-32.555 l 10e-4,-0.001 -6.767,0.003 0,0 z"
+         id="path11"
+         inkscape:connector-curvature="0"
+         style="fill:#ffffff" /></g></g></svg>

build/klingt.net/assets/tiny.css

@@ -18,7 +18,7 @@ a, a:link, a:visited, a:active, a:hover {
 @media (min-width:800px) {
   #content-wrapper {
     margin: 0 auto;
-    width: 60%;
+    width: 32em;
   }
 }
 
@@ -33,4 +33,19 @@ nav ul {
 
 nav ul li {
   margin: 0 0 .333em 0;
-}
+  padding: .15em 0;
+}
+
+.nav-item {
+  text-transform: capitalize;
+}
+
+a.nav-item-deactivated {
+  color: lightseagreen;
+  pointer-events: none;
+}
+
+.logo {
+  width: 3em;
+  margin: 1.5em auto;
+}

build/klingt.net/pages/imprint.html

@@ -1,10 +1,10 @@
-<h2>Information on the service provider according to <a href="https://www.gesetze-im-internet.de/tmg/__5.html">Section 5 TMG (German Telemedia Law)</a></h2>
+<h2>Information on the service provider according to <a href='https://www.gesetze-im-internet.de/tmg/__5.html'>Section 5 TMG (German Telemedia Law)</a></h2>
 
-<p>The best way to get in touch with me is via email: <a href="mailto:admin@klingt.net">admin@klingt.net</a>.</p>
+<p>The best way to get in touch with me is via email: <a href='mailto:admin@klingt.net'>admin@klingt.net</a>.</p>
 
 <address>
-  Andreas Linz<br >
-  Eythraer Straße 26<br >
-  04429 Leipzig<br >
+  Andreas Linz<br>
+  Eythraer Straße 26<br>
+  04229 Leipzig<br>
   Deutschland
 </address>

build/klingt.net/pages/index.html

@@ -1,6 +1,6 @@
 <h2>About</h2>
 
-<p>I am Andreas Linz and this is my part of the internet since 2006.</p>
+<p>I am <a href='https://keybase.io/klingtnet'>Andreas Linz</a> and this is my part of the internet since 2006.</p>
 <p>PGP encrypted mails are welcome, <a href='https://pgp.mit.edu/pks/lookup?op=get&search=0xA57EA37073871146'>here is my public key</a>.</p>
 <p>What does <em>klingt.net</em> mean? It means <em>sounds nice</em> in german.</p>
 <p>You can find my software on <a href='https://github.com/klingtnet/'>github.com/klingtnet</a>.</p>

build/klingt.net/template.html

@@ -1,13 +1,14 @@
 <!doctype html>
-<html lang="en">
+<html lang='en'>
   <head>
     <title>{title}</title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="./assets/tiny.css">
+    <meta charset='UTF-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <link rel='stylesheet' type='text/css' href='./assets/tiny.css'>
   </head>
   <body>
-    <div id="content-wrapper">
+    <div id='content-wrapper'>
+      <img src='assets/logo.svg' class='logo'>
       <header>
         <nav>
           <ul>{nav}</ul>

build/klingt.net/template.py

@@ -8,16 +8,22 @@ def read_template():
 
 
 def title_from_filename(fname: str) -> str:
-    return os.path.splitext(fname)[0].capitalize()
+    return os.path.splitext(fname)[0].replace('-', ' ')
+
+
+def nav_item(page, current_page):
+    nav_item = '<li><a href="{item_href}" class="{classes}" disabled>{item_text}</a></li>'
+    a_classes = ['nav-item']
+    if page == current_page:
+        a_classes.append('nav-item-deactivated')
+    return nav_item.format(item_href=page, item_text=title_from_filename(page), classes=' '.join(a_classes))
 
 
 def template_pages(pages: dict, template: str, dest_path: str):
-    nav_item = '<li><a href="{item_href}">{item_text}</a></li>'
     
     for page, text in pages.items():
         title = title_from_filename(page)
-        other_pages = [ p for p in pages.keys() if p != page ]
-        nav = ''.join([ nav_item.format(item_href=p, item_text=title_from_filename(p)) for p in other_pages ])
+        nav = ''.join([ nav_item(p, page) for p in pages])
         templated_page = template.format(title=title, nav=nav, content=text)
         
         with open(os.path.join(dest_path, page), 'w') as f: