update site

5 files changed, 412 insertions, 6 deletions

diff --git a/.gitignore b/.gitignore
index 583b6362..4c8fd64f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ outdate.list
 outdate.error
 /website/public/
 /website/md2html.sh
+/public/
diff --git a/buildsite.sh b/buildsite.sh
index 1a1e75e6..6e24206d 100755
--- a/buildsite.sh
+++ b/buildsite.sh
@@ -3,6 +3,172 @@
 rm -rf public
 mkdir -p public
 
+html_escape() {
+	sed 's/\&/\&amp;/g;s/</\&lt;/g;s/>/\&gt;/g;s/"/\&quot;/g'
+}
+
+port_version() {
+	grep '^version=' "$1/abuild" | cut -d = -f2- || true
+}
+
+port_release() {
+	grep '^release=' "$1/abuild" | cut -d = -f2- || true
+}
+
+port_depends() {
+	[ -f "$1/depends" ] || return 0
+	grep -Ev '^(#|$)' "$1/depends" | tr '\n' ' ' | sed 's/[[:space:]]*$//' || true
+}
+
+generate_ports_page() {
+	{
+		sed "s/@TITLE@/ports/g" files/header
+		cat << 'EOF'
+<style>
+.ports-toolbar {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	margin-bottom: 12px;
+}
+.ports-toolbar button,
+.ports-toolbar input {
+	font: inherit;
+	color: #fefefe;
+	background: transparent;
+	border: 0;
+	border-bottom: 1px solid rgba(231, 232, 235, 0.35);
+	padding: 6px 0;
+}
+.ports-toolbar button {
+	cursor: pointer;
+}
+.ports-toolbar button.active {
+	color: #90cbf9;
+	border-bottom-color: #90cbf9;
+}
+.ports-toolbar input {
+	flex: 1 1 18em;
+	min-width: 0;
+}
+.ports-count {
+	margin-bottom: 12px;
+}
+#ports-table th,
+#ports-table td {
+	border: 0;
+	border-bottom: 1px solid rgba(231, 232, 235, 0.28);
+	padding: 6px 4px;
+}
+#ports-table {
+	border: 0;
+	table-layout: auto;
+}
+#ports-table thead th {
+	border-bottom-color: rgba(231, 232, 235, 0.55);
+}
+#ports-table th:nth-child(1),
+#ports-table td:nth-child(1) {
+	width: 5em;
+}
+#ports-table th:nth-child(2),
+#ports-table td:nth-child(2) {
+	width: 16em;
+}
+#ports-table th:nth-child(3),
+#ports-table td:nth-child(3) {
+	white-space: nowrap;
+	width: 1%;
+}
+#ports-table th:nth-child(4),
+#ports-table td:nth-child(4) {
+	width: 100%;
+}
+#ports-table tbody tr:last-child td {
+	border-bottom: 0;
+}
+EOF
+		echo "</style>"
+		echo "<p>Package ports generated from <code>repos/core</code>, <code>repos/extra</code>, and <code>repos/community</code>.</p>"
+		echo "<div class=\"ports-toolbar\">"
+		echo "<button type=\"button\" class=\"active\" data-repo=\"all\">all</button>"
+		echo "<button type=\"button\" data-repo=\"core\">core</button>"
+		echo "<button type=\"button\" data-repo=\"extra\">extra</button>"
+		echo "<button type=\"button\" data-repo=\"community\">community</button>"
+		echo "<input id=\"ports-search\" type=\"search\" placeholder=\"filter ports\" autocomplete=\"off\">"
+		echo "</div>"
+		echo "<div class=\"ports-count\"><span id=\"ports-visible\">0</span> / <span id=\"ports-total\">0</span> ports</div>"
+		echo "<table id=\"ports-table\">"
+		echo "<thead><tr><th>repo</th><th>name</th><th>version</th><th>dependencies</th></tr></thead>"
+		echo "<tbody>"
+
+		for repo in core extra community; do
+			for port in repos/$repo/*; do
+				[ -f "$port/abuild" ] || continue
+				name=${port##*/}
+				version=$(port_version "$port")
+				release=$(port_release "$port")
+				depends=$(port_depends "$port")
+				[ "$release" ] && version=$version-$release
+				printf '<tr data-repo="%s"><td>%s</td><td><a href="https://codeberg.org/emmett1/alicelinux/src/branch/main/repos/%s/%s">%s</a></td><td>%s</td><td>%s</td></tr>\n' \
+					"$(printf '%s' "$repo" | html_escape)" \
+					"$(printf '%s' "$repo" | html_escape)" \
+					"$(printf '%s' "$repo" | html_escape)" \
+					"$(printf '%s' "$name" | html_escape)" \
+					"$(printf '%s' "$name" | html_escape)" \
+					"$(printf '%s' "$version" | html_escape)" \
+					"$(printf '%s' "$depends" | html_escape)"
+			done
+		done
+
+		echo "</tbody>"
+		echo "</table>"
+		cat << 'EOF'
+<script>
+(function () {
+	var table = document.getElementById('ports-table');
+	var rows = Array.prototype.slice.call(table.querySelectorAll('tbody tr'));
+	var search = document.getElementById('ports-search');
+	var visible = document.getElementById('ports-visible');
+	var total = document.getElementById('ports-total');
+	var buttons = Array.prototype.slice.call(document.querySelectorAll('.ports-toolbar button'));
+	var repo = 'all';
+
+	total.textContent = rows.length;
+
+	function filterPorts() {
+		var query = search.value.trim().toLowerCase();
+		var count = 0;
+
+		rows.forEach(function (row) {
+			var repoMatch = repo === 'all' || row.dataset.repo === repo;
+			var textMatch = !query || row.textContent.toLowerCase().indexOf(query) !== -1;
+			var show = repoMatch && textMatch;
+			row.style.display = show ? '' : 'none';
+			if (show) count++;
+		});
+
+		visible.textContent = count;
+	}
+
+	buttons.forEach(function (button) {
+		button.addEventListener('click', function () {
+			repo = button.dataset.repo;
+			buttons.forEach(function (b) { b.classList.remove('active'); });
+			button.classList.add('active');
+			filterPorts();
+		});
+	});
+
+	search.addEventListener('input', filterPorts);
+	filterPorts();
+}());
+</script>
+EOF
+		cat files/footer
+	} > public/ports.html
+}
+
 for i in $(find . -type f -name "*.html" | sed 's|^\./||'); do
 	dir=${i%/*}
 	file=${i##*/}
@@ -19,6 +185,8 @@ for i in $(find . -type f -name "*.html" | sed 's|^\./||'); do
 	} > public/$dir/$file
 done
 
+generate_ports_page
+
 # docs
 cat docs/readme.md > docs/index.md
 for f in docs/*.md; do
diff --git a/docs/networking.md b/docs/networking.md
new file mode 100644
index 00000000..186ddfe0
--- /dev/null
+++ b/docs/networking.md
@@ -0,0 +1,211 @@
+Networking
+==========
+
+This document describes how to configure networking on **Alice Linux** using `eiwd`/`wpa_supplicant` + `udhcpc`/`dhcpcd`.
+
+---
+
+Overview
+--------
+
+Alice Linux uses simple, modular networking tools:
+
+**Link (connection)**
+
+* LAN: automatic (cable)
+* Wi-Fi: `eiwd` or `wpa_supplicant`
+
+**IP configuration**
+
+* `udhcpc` - BusyBox DHCP client
+* `dhcpcd` - DHCP client
+
+---
+
+Establish Network Link
+----------------------
+
+Wired (LAN)
+---------------
+
+Bring interface up:
+
+```
+ip link set eth0 up
+```
+
+A physical cable connection is usually sufficient.
+
+> runit service enabled later will automatically bring up the interface.
+
+Wi-Fi
+-------
+
+Bring interface up first:
+
+```
+ip link set wlan0 up
+```
+
+> runit service enabled later will automatically bring up the interface.
+
+Then choose ONE method:
+
+---
+
+**Option A: eiwd**
+
+Install `eiwd` and `resolvconf`
+
+```
+# apkg -I eiwd resolvconf
+```
+
+To prevent iwd from scanning continuously while not connected, add the following lines to `/etc/iwd/main.conf`:
+```
+[Scan]
+DisablePeriodicScan=true
+```
+
+To prevent iwd from destroying / recreating wireless interfaces at startup, add the following line to `[General]`;
+```
+UseDefaultInterface=true
+```
+
+Add network configuration.
+```
+# printf 'password\n' | iwd_passphrase ssid > /var/lib/iwd/<ssid>.psk
+```
+> The iwd daemon monitors /var/lib/iwd and automatically loads new network configurations.
+
+Enable `eiwd` service:
+```
+# ln -s /etc/eiwd /var/service
+```
+
+---
+
+**Option B: wpa_supplicant**
+
+Install `wpa_supplicant` package.
+```
+# apkg -I wpa_supplicant
+```
+
+Configure `wpa_supplicant.conf`:
+```
+wpa_passphrase "SSID_NAME" "PASSWORD" > /etc/wpa_supplicant.conf
+```
+
+Enable `wpa_supplicant` service:
+```
+# ln -s /etc/wpa_supplicant /var/service
+```
+
+---
+
+Obtain IP Address (DHCP)
+------------------------
+
+Once the interface is connected (LAN or Wi-Fi), obtain an IP address.
+
+> This step is identical for both LAN and Wi-Fi.
+
+---
+
+**Option A: udhcpc (BusyBox)**
+
+Enable `udhcpc` service:
+```
+# ln -s /etc/sv/udhcpc /var/service
+```
+> Interface and DNS settings can be adjusted in /etc/sv/udhcpc/conf.
+
+---
+
+**Option B: dhcpcd**
+
+Install `dhcpcd` first:
+```
+# apkg -I dhcpcd
+```
+
+Enable `dhcpcd` service:
+```
+# ln -s /etc/sv/dhcpcd /var/service
+```
+
+---
+
+Static Network Configuration
+-----------------------------
+
+To use a static configuration instead of DHCP:
+
+```
+# vi /etc/sv/net-static/conf
+```
+
+Set the following variables:
+
+* IFACE
+* IP
+* NETMASK
+* GATEWAY
+
+```
+# ln -s /etc/sv/net-static /var/service
+```
+
+---
+
+Troubleshooting
+---------------
+
+Check interfaces:
+
+```
+ip addr
+```
+
+Test connectivity:
+
+```
+ping -c 3 8.8.8.8
+```
+
+Test DNS:
+
+```
+ping -c 3 google.com
+```
+
+---
+
+Quick Reference
+---------------
+
+LAN (DHCP)
+
+```
+# ip link set eth0 up
+# ln -s /etc/sv/udhcpc /var/service
+```
+
+Wi-Fi (iwd + DHCP)
+
+```
+# ip link set wlan0 up
+# printf 'password\n' | iwd_passphrase ssid > /var/lib/iwd/<ssid>.psk
+# ln -s /etc/sv/eiwd /var/service
+# ln -s /etc/sv/udhcpc /var/service
+```
+
+Wi-Fi (wpa_supplicant + DHCP)
+
+```
+# ip link set wlan0 up
+# wpa_passphrase "SSID" "PASS" > /etc/wpa_supplicant.conf
+# ln -s /etc/sv/wpa_supplicant /var/service
+# ln -s /etc/sv/udhcpc /var/service
+```
diff --git a/docs/readme.md b/docs/readme.md
index 39b5b35e..fb4ef6b6 100644
--- a/docs/readme.md
+++ b/docs/readme.md
@@ -1,3 +1,6 @@
-Here lies documentation for **Alice Linux**.
+Documentation
+=============
+
+This section covers the main parts of **Alice Linux**: installation, package
+management, networking, service supervision, etc.
 
-If you found any typo or error in docs, or even want to contribute, feel free to [open issue](https://codeberg.org/emmett1/alicelinux/issues) :D
diff --git a/files/header b/files/header
index 62c3186f..5faa51d9 100644
--- a/files/header
+++ b/files/header
@@ -5,18 +5,30 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>Alice Linux - @TITLE@</title>
 	<style>
+	:root {
+		color-scheme: dark;
+	}
 	body {
 		font-family: monospace;
 		font-size: 14px;
 		line-height: 1.25;
-		max-width: 60em;
+		max-width: 92ch;
 		margin-left: auto;
 		margin-right: auto;
-		padding-left: 1em;
-		padding-right: 1em;
+		padding: 1em;
 		background-color: #242424;
 		color: #fefefe;
 	}
+	h1 {
+		margin: 0 0 0.35em;
+		font-size: 2rem;
+		line-height: 1.1;
+	}
+	h2, h3, h4 {
+		line-height: 1.2;
+		margin-top: 1.4em;
+		margin-bottom: 0.5em;
+	}
 	pre {
 		background-color: #2b2b2b;
 		border-radius: 3px;
@@ -38,16 +50,21 @@
 	table {
 		width: 100%;
 		border-collapse: collapse;
+		margin: 0.75rem 0;
 	}
 	th, td {
 		padding: 4px;
 	}
 	th {
 		background-color: #221e1f;
+		text-align: left;
 	}
 	table, th, td {
 		border: 1px dashed #e7e8eb;
 	}
+	table thead th {
+		border-bottom-color: #e7e8eb;
+	}
 	a {
 		color: #90cbf9;
 		text-decoration: none
@@ -56,10 +73,16 @@
 		color: #869edc;
 		text-decoration: underline
 	}
+	blockquote {
+		margin: 1rem 0;
+		padding-left: 1rem;
+		border-left: 2px solid rgba(254, 254, 254, 0.18);
+		color: #d0d0d0;
+	}
 	</style>
 </head>
 <body>
 <div class="centered-wrapper">
 	<h1>@TITLE@</h1>
-	<a href="/">home</a> / <a href="/docs">docs</a> / <a href="https://codeberg.org/emmett1/alicelinux">development</a> / <a href="https://sourceforge.net/projects/alice-linux/files/">download</a> / <a href="/community.html">community</a> / <a href="/donate.html">donate</a>
+	<a href="/">home</a> / <a href="/docs">docs</a> / <a href="/ports.html">ports</a> / <a href="https://codeberg.org/emmett1/alicelinux">development</a> / <a href="https://sourceforge.net/projects/alice-linux/files/">download</a> / <a href="/community.html">community</a> / <a href="/donate.html">donate</a>
 	<hr>