Improve HTML generation

author: Marc Vertes <mvertes@free.fr> 2025-06-23 22:41:02 +0200
committer: Marc Vertes <mvertes@free.fr> 2025-06-23 22:41:02 +0200
commit: bf8297543935fbcf3e608d38246e5435b3afbc77 (patch)
tree: ad266e90674aa704eb2dba87361964e49413739c
parent: 0b09eab4f26d3fdb4f210156640be6e8dfcc238f (diff)
13 files changed, 89 insertions, 123 deletions
diff --git a/Makefile b/Makefile
index 4041406..4814667 100644
--- a/Makefile
+++ b/Makefile
@@ -3,10 +3,10 @@ build:
 	./build.sh
 	./genrss.sh > feed.xml
 
-# Launch a local web server.
+# Launch a local web server for validation.
 server:
 	yaegi -e 'http.ListenAndServe(":8080", http.FileServer(http.Dir(".")))'
 
-# Publish on github pages.
+# Publish on my smartphone g7p
 publish:
-	git push
+	rsync -av --exclude=.git . g7p:www/dot.vertes.org/
diff --git a/build.sh b/build.sh
index 166eeba..be30116 100755
--- a/build.sh
+++ b/build.sh
@@ -1,36 +1,10 @@
 #!/bin/sh
 
-header='<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<style>
-  body {
-	  max-width: 45rem;
-	  margin: auto;
-	  padding: 0.5em;
-	  text-align: justify;
-  }
-  h1 { text-align: center }
-  pre {
-	padding: 1ch;
-	background-color: #f5f5f5;
-	overflow: auto;
-  }
-  img {
-  	display: block;
-	margin: auto;
-  }
-  .footer {
-    text-align: center;
-    font-size: 0.8em;
-  }
-</style>
-'
-
 md2html() {
 # Usage:
 # 	md2html file.md > file.html
 # Options: -v esc=false to not escape html
-awk '
+	awk '
 	function newblock(nblock) {
 		if (text)
 			print "<" block ">" text "</" block ">"
@@ -192,44 +166,55 @@ awk '
 		newblock()
 		while (nl > 0)
 			print "</" list[nl--] ">"
-	}' "$1"
+	}' "$@"
 }
 
 genhtml() (
 	cd "$1" || return
 
-    . ./meta.sh
+    . ./meta
 
 	exec 1>index.html
 
 	# Header
-	echo "<!DOCTYPE html>"
-	echo "<!-- generated by build.sh. DO NOT EDIT. -->"
-	echo "<html lang=\"${lang:-en}\">"
-	echo "<title>$title</title>"
-	[ "$description" ] && echo "<meta name=\"description\" content=\"$description\">"
-	echo "$header"
-	[ "$1" != . ] && echo "<a href=\"..\">$blog_title</a><hr>"
+	cat <<- EOT
+		<!doctype html>
+		<html lang="${lang:-en}">
+		<title>$title</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width">
+		<link rel="stylesheet" href="/style.css">
+	EOT
 
 	# Body
+	[ "$1" != . ] && echo "<a href=\"..\">$blog_title</a><hr>"
 	# pandoc *.md
-	for f in *.md; do
-		[ -f "$f" ] && md2html "$f"
-	done
+	md2html *.md
 
 	# Footer
-	[ "$1" != . ] && echo "<hr>From: $author, $date"
+	[ "$1" = . ] && return
+	echo "<hr>From: $author, $date. <a href=\"mailto:marc@vertes.org?subject=$(urlenc "Re: $link")\">Feedback</a>"
 )
 
+urlenc() {
+    while [ -n "$1" ]; do
+        set -- "${1#?}" "${1%${1#?}}"
+        case $2 in
+        ([-._~0-9A-Za-z]) printf %c "$2" ;;
+        (*)               printf %%%02x "'$2" ;;
+        esac
+    done
+    echo
+}
+
 for d in *; do
 	[ -d "$d" ] && genhtml "$d"
 done
 genhtml .
 
-# Fix for mastodon.
-sed '/mstdn/s/href=/rel="me" href=/' index.html >xx && mv xx index.html
 # Put a license in index footer.
-echo '<hr><div class="footer">
+echo '<footer>
+<hr>
 <a href="feed.xml">RSS feed</a>. &emsp; &emsp; Licensed under
 <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
-</div>' >>index.html
+</footer>' >>index.html
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000..320fe47
--- /dev/null
+++ b/favicon.ico
diff --git a/favicon.png b/favicon.png
deleted file mode 100644
index d7cb86d..0000000
--- a/favicon.png
+++ /dev/null
diff --git a/feed.xml b/feed.xml
index f973500..41f1383 100644
--- a/feed.xml
+++ b/feed.xml
@@ -5,21 +5,21 @@
 <link>https://dot.vertes.org/</link>
 <description>An experimental website on a solar phone</description>
 <managingEditor>marc@vertes.org (Marc Vertes)</managingEditor>
-<pubDate>Fri, 20 Jun 2025 16:58:13 +0200</pubDate>
+<pubDate>Mon, 23 Jun 2025 18:37:03 +0200</pubDate>
 <item>
-<guid isPermaLink="true">https://dot.vertes.org/this-server/</guid>
+<guid isPermaLink="true">dot.server.org/this-server/this-server/</guid>
 <title>A web server on a solar phone</title>
-<link>https://dot.vertes.org/this-server/</link>
+<link>dot.server.org/this-server/this-server/</link>
 <description>Hosting a web server on a solar powered phone</description>
 <author>marc@vertes.org (Marc Vertes)</author>
 <pubDate>Fri, 20 June 2025 12:00:00 +0200</pubDate>
 <content:encoded>
 <![CDATA[<h1> A web server on a solar phone</h1>
 <p>I have this old low-cost phone which was the first one offered to my kid when he was 15 (he is now 21), before he moved to a more fashionable model. I noticed that without a SIM card, only on WIFI, the phone needed to be recharged not after 1 or 2 days, but only after 2 weeks! So this small device, plugged to a small solar panel, could be the perfect always-on personal web server. The site that you are browsing right now is hosted on it.</p>
-<p><img src="https://dot.vertes.org/this-server/server.jpeg" alt="The server with its solar panel, and a cat"></p>
+<p><img src="dot.server.org/this-server/this-server/server.jpeg" alt="The server with its solar panel, and a cat"></p>
 <h2> Hardware</h2>
-<p>The phone is an entry-level Motorola G7 Play, purchased in 2019 for 120€ or so, worth nothing today. It was used by my son for less than 2 years, then dormant since. The display is slighly shattered, but it doesn't matter, as I use it headless.</p>
-<p>I bought a small solar panel on Amazon, 10W produced by 2 plates of 17x17 cm. Cost: 28€. I could probably get something less expensive.</p>
+<p>The phone is an entry-level Motorola G7 Play, purchased in 2019, worth nothing today. It was used by my son for less than 2 years, then dormant since. The display is slighly shattered, but it doesn't matter, as I use it headless.</p>
+<p>I bought a small solar panel on Amazon, 10W produced by 2 plates of 17x17 cm.</p>
 <p>And that's it. The solar panel is just suspended vertically at a south window. The phone sits below, connected to the panel by a USB cable, in the shadow (do not put the phone directly under the sun, or closed without fresh air).</p>
 <h2> Software</h2>
 <p>The single purpose of this device is now to run a small standalone static web server. By using termux on top of Android, I can run a ssh server for remote access and Nginx, an efficient web server. I do not need to root the phone, as port redirection from my internet router compensate for the restriction of not using a port number below 1024.</p>
@@ -30,7 +30,7 @@
 <h2> Operation</h2>
 <p>It's too early to say. Lets see how it goes over time (a few months), and if a relatively old phone can find a second life and be used as an autonomous web server, running solely on free photons and electrons.</p>
 <p>But for now, we are in june and the battery level is almost always at 100%.</p>
-<hr>From: Marc Vertes, 20 june 2025]]>
+<hr>From: Marc Vertes, 20 june 2025. <a href="dot.server.org/this-server/this-server/mailto:marc@vertes.org?subject=Re%3a%20dot.server.org%2fthis-server">Feedback</a>]]>
 </content:encoded>
 </item>
 </channel>
diff --git a/genrss.sh b/genrss.sh
index f92c1ac..5d2b1dc 100755
--- a/genrss.sh
+++ b/genrss.sh
@@ -13,7 +13,8 @@ fixhtml() {
 	' "$2"
 }
 
-. ./meta.sh
+. ./meta
+
 cat <<- EOT
 	<?xml version="1.0" encoding="UTF-8"?>
 	<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/">
@@ -28,7 +29,7 @@ EOT
 for d in *; do
 	[ -d "$d" ] || continue
 	cd $d
-	. ./meta.sh
+	. ./meta
 	cat <<- EOT
 		<item>
 		<guid isPermaLink="true">$link/$d/</guid>
diff --git a/index.html b/index.html
index 7029132..56631a2 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,24 @@
-<!DOCTYPE html>
-<!-- generated by build.sh. DO NOT EDIT. -->
+<!doctype html>
 <html lang="en">
 <title>Marc's Notes</title>
-<meta name="description" content="An experimental website on a solar phone">
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<style>
-  body {
-	  max-width: 45rem;
-	  margin: auto;
-	  padding: 0.5em;
-	  text-align: justify;
-  }
-  h1 { text-align: center }
-  pre {
-	padding: 1ch;
-	background-color: #f5f5f5;
-	overflow: auto;
-  }
-  img {
-  	display: block;
-	margin: auto;
-  }
-  .footer {
-    text-align: center;
-    font-size: 0.8em;
-  }
-</style>
-
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<link rel="stylesheet" href="/style.css">
 <h1> Marc's Notes</h1>
 <p>A blog about programming and other stories.</p>
 <h2> Posts</h2>
 <ul>
-<li><a href="this-server">About this server</a> june 2025</li>
+<li>2025-06-20: <a href="this-server">About this server</a></li>
 </ul>
 <p>  A web server on an old smartphone, solar powered.</p>
 <h2> Contact</h2>
 <ul>
 <li>Email: marc@vertes.org</li>
 <li>Github: <a href="https://github.com/mvertes">@mvertes</a></li>
-<li>Mastodon: <a rel="me" href="https://mstdn.fr/@mvertes">@mvertes</a></li>
+<li>Mastodon: <a href="https://mstdn.fr/@mvertes">@mvertes</a></li>
 </ul>
-<hr><div class="footer">
+<footer>
+<hr>
 <a href="feed.xml">RSS feed</a>. &emsp; &emsp; Licensed under
 <a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.
-</div>
+</footer>
diff --git a/meta.sh b/meta
index e6d75fe..15128ac 100644
--- a/meta.sh
+++ b/meta
@@ -3,4 +3,4 @@ author="Marc Vertes"
 email="marc@vertes.org"
 description="An experimental website on a solar phone"
 link="https://dot.vertes.org"
-date="20 th of June 2025"
+date="2025-06-20"
diff --git a/readme.md b/readme.md
index 81a4acf..efdec65 100644
--- a/readme.md
+++ b/readme.md
@@ -4,7 +4,7 @@ A blog about programming and other stories.
 
 ## Posts
 
-- [About this server](this-server) june 2025
+- 2025-06-20: [About this server](this-server)
 
   A web server on an old smartphone, solar powered.
 
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..0f06d75
--- /dev/null
+++ b/style.css
@@ -0,0 +1,27 @@
+body {
+  max-width: 45rem;
+  margin: auto;
+  padding: 0.5em;
+  text-align: justify;
+  font-family: "Times New Roman", serif;
+}
+h1, h2, h3, h4 {
+  font-family: arial, sans;
+}
+h1 {
+  text-align: center;
+}
+pre {
+  padding: 1ch;
+  background-color: #f5f5f5;
+  overflow: auto;
+}
+img {
+  	display: block;
+	margin: auto;
+	max-width: 100%;
+}
+footer {
+  text-align: center;
+  font-size: 0.8em;
+}
diff --git a/this-server/a_web_server_on_a_solar_phone.md b/this-server/a_web_server_on_a_solar_phone.md
index ad2757b..45dabba 100644
--- a/this-server/a_web_server_on_a_solar_phone.md
+++ b/this-server/a_web_server_on_a_solar_phone.md
@@ -11,13 +11,12 @@ site that you are browsing right now is hosted on it.
 
 ## Hardware
 
-The phone is an entry-level Motorola G7 Play, purchased in 2019 for 120€ or so,
+The phone is an entry-level Motorola G7 Play, purchased in 2019,
 worth nothing today. It was used by my son for less than 2 years, then dormant
 since. The display is slighly shattered, but it doesn't matter, as I use it
 headless.
 
 I bought a small solar panel on Amazon, 10W produced by 2 plates of 17x17 cm.
-Cost: 28€. I could probably get something less expensive.
 
 And that's it. The solar panel is just suspended vertically at a south window.
 The phone sits below, connected to the panel by a USB cable, in the shadow
diff --git a/this-server/index.html b/this-server/index.html
index 019b7db..3478cd4 100644
--- a/this-server/index.html
+++ b/this-server/index.html
@@ -1,40 +1,16 @@
-<!DOCTYPE html>
-<!-- generated by build.sh. DO NOT EDIT. -->
+<!doctype html>
 <html lang="en">
 <title>A web server on a solar phone</title>
-<meta name="description" content="Hosting a web server on a solar powered phone">
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<style>
-  body {
-	  max-width: 45rem;
-	  margin: auto;
-	  padding: 0.5em;
-	  text-align: justify;
-  }
-  h1 { text-align: center }
-  pre {
-	padding: 1ch;
-	background-color: #f5f5f5;
-	overflow: auto;
-  }
-  img {
-  	display: block;
-	margin: auto;
-  }
-  .footer {
-    text-align: center;
-    font-size: 0.8em;
-  }
-</style>
-
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<link rel="stylesheet" href="/style.css">
 <a href="..">Marc's Notes</a><hr>
 <h1> A web server on a solar phone</h1>
 <p>I have this old low-cost phone which was the first one offered to my kid when he was 15 (he is now 21), before he moved to a more fashionable model. I noticed that without a SIM card, only on WIFI, the phone needed to be recharged not after 1 or 2 days, but only after 2 weeks! So this small device, plugged to a small solar panel, could be the perfect always-on personal web server. The site that you are browsing right now is hosted on it.</p>
 <p><img src="server.jpeg" alt="The server with its solar panel, and a cat"></p>
 <h2> Hardware</h2>
-<p>The phone is an entry-level Motorola G7 Play, purchased in 2019 for 120€ or so, worth nothing today. It was used by my son for less than 2 years, then dormant since. The display is slighly shattered, but it doesn't matter, as I use it headless.</p>
-<p>I bought a small solar panel on Amazon, 10W produced by 2 plates of 17x17 cm. Cost: 28€. I could probably get something less expensive.</p>
+<p>The phone is an entry-level Motorola G7 Play, purchased in 2019, worth nothing today. It was used by my son for less than 2 years, then dormant since. The display is slighly shattered, but it doesn't matter, as I use it headless.</p>
+<p>I bought a small solar panel on Amazon, 10W produced by 2 plates of 17x17 cm.</p>
 <p>And that's it. The solar panel is just suspended vertically at a south window. The phone sits below, connected to the panel by a USB cable, in the shadow (do not put the phone directly under the sun, or closed without fresh air).</p>
 <h2> Software</h2>
 <p>The single purpose of this device is now to run a small standalone static web server. By using termux on top of Android, I can run a ssh server for remote access and Nginx, an efficient web server. I do not need to root the phone, as port redirection from my internet router compensate for the restriction of not using a port number below 1024.</p>
@@ -45,4 +21,4 @@
 <h2> Operation</h2>
 <p>It's too early to say. Lets see how it goes over time (a few months), and if a relatively old phone can find a second life and be used as an autonomous web server, running solely on free photons and electrons.</p>
 <p>But for now, we are in june and the battery level is almost always at 100%.</p>
-<hr>From: Marc Vertes, 20 june 2025
+<hr>From: Marc Vertes, 20 june 2025. <a href="mailto:marc@vertes.org?subject=Re%3a%20dot.server.org%2fthis-server">Feedback</a>
diff --git a/this-server/meta.sh b/this-server/meta
index 60682cc..0fce4ff 100644
--- a/this-server/meta.sh
+++ b/this-server/meta
@@ -2,5 +2,6 @@ blog_title="Marc's Notes"
 title="A web server on a solar phone"
 author="Marc Vertes"
 description="Hosting a web server on a solar powered phone"
+link="dot.server.org/this-server"
 date="20 june 2025"
 date_rfc2822="Fri, 20 June 2025 12:00:00 +0200"
author	Marc Vertes <mvertes@free.fr>	2025-06-23 22:41:02 +0200
committer	Marc Vertes <mvertes@free.fr>	2025-06-23 22:41:02 +0200
commit	bf8297543935fbcf3e608d38246e5435b3afbc77 (patch)
tree	ad266e90674aa704eb2dba87361964e49413739c
parent	0b09eab4f26d3fdb4f210156640be6e8dfcc238f (diff)