Custom HTML preprocessor; New banner; Team page
This commit is contained in:
parent
9ed16ac4a5
commit
7de82616ba
16 changed files with 263 additions and 50 deletions
38
Readme.md
Normal file
38
Readme.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
# KarlOS Landing Page
|
||||
|
||||
This is the source code for the public [KarlOS](https://karlsruhe-os.de) landing page.
|
||||
It is a static HTML website.
|
||||
To reduce duplication, the source code is preprocessed by a set of POSIX shell + awk scripts
|
||||
which allow you to set and insert variables, and to execute arbitrary shell commands (spicy!).
|
||||
To build the website, simply run `build.sh`.
|
||||
If you have SSH access to the server machine, you can run `deploy-to-server.sh`
|
||||
to push your local state to the production web page.
|
||||
|
||||
## The Preprocessor Syntax
|
||||
|
||||
Lines starting with two percent signs are considered comments and ignored:
|
||||
```html
|
||||
%% This line won't show up in the resulting HTML
|
||||
```
|
||||
|
||||
Lines starting with a percent sign and a tilde can execute shell commands:
|
||||
```html
|
||||
%~ date # Inserts the current date at the time the build script is run
|
||||
```
|
||||
In addition to regular shell commands, the following additional commands are also provided:
|
||||
- `include <filename>`: Inserts the contents of the given file, recursively preprocessing it too.
|
||||
- `include_raw <filename>`: Inserts the contents of the given file without any processing.
|
||||
- `include_md <filename>`: Treats the given file as a markdown file, converting it to HTML and inserting it.
|
||||
- `die <reason>`: Throw an error and stop building the website.
|
||||
All commands are executed in the root directory of this repository.
|
||||
|
||||
Lines of the form `%VARIABLE:VALUE` can be used to store a string in a variable:
|
||||
```html
|
||||
%PAGE_TITLE:Hello, World!
|
||||
```
|
||||
|
||||
Within any line that isn't one of the above directives, patterns of the form `%[VARIABLE]` are replaced by the string that is stored in the variable:
|
||||
```
|
||||
<title>%[PAGE_TITLE]</title>
|
||||
```
|
||||
|
||||
9
build.sh
9
build.sh
|
|
@ -1,5 +1,10 @@
|
|||
#!/bin/sh
|
||||
|
||||
set -e
|
||||
|
||||
rm -rf www
|
||||
mkdir -p www
|
||||
cp -rf src/assets www/
|
||||
cp -f src/*.html www/
|
||||
|
||||
cp -rf src/assets www
|
||||
|
||||
exec preproc/buildall.sh
|
||||
|
|
|
|||
10
preproc/buildall.sh
Executable file
10
preproc/buildall.sh
Executable file
|
|
@ -0,0 +1,10 @@
|
|||
#!/bin/sh
|
||||
|
||||
set -e
|
||||
|
||||
preproc/buildpage.sh src/style.css
|
||||
|
||||
find src -name "*.html" | while read f; do
|
||||
preproc/buildpage.sh "$f"
|
||||
done
|
||||
|
||||
5
preproc/buildpage.sh
Executable file
5
preproc/buildpage.sh
Executable file
|
|
@ -0,0 +1,5 @@
|
|||
#!/bin/sh
|
||||
|
||||
OUT="www/${1##src/}"
|
||||
|
||||
awk -Pf preproc/interp.awk "$1" | sh > "$OUT"
|
||||
46
preproc/interp.awk
Normal file
46
preproc/interp.awk
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
function translate_var_refs(str, _out, _name) {
|
||||
_out = ""
|
||||
while (match(str, /%\[[a-zA-Z0-9_]+\]/)) {
|
||||
_out = _out substr(str, 1, RSTART-1)
|
||||
_name = substr(str, RSTART+2, RLENGTH-3)
|
||||
_out = _out sprintf("${DATA_%s-%[%s]}", _name, _name)
|
||||
str = substr(str, RSTART + RLENGTH)
|
||||
}
|
||||
_out = _out str
|
||||
return _out
|
||||
}
|
||||
|
||||
function escape_shell(str) {
|
||||
gsub(/\\/, "\\\\", str)
|
||||
gsub(/'/, "\\'", str)
|
||||
gsub(/"/, "\\\"", str)
|
||||
gsub(/\$/, "\\$", str)
|
||||
return str
|
||||
}
|
||||
|
||||
BEGIN {
|
||||
begin=0
|
||||
}
|
||||
|
||||
{
|
||||
if (!begin) {
|
||||
printf "export FILENAME='%s'\n", FILENAME
|
||||
printf ". preproc/lib.sh\n"
|
||||
begin=1
|
||||
}
|
||||
}
|
||||
|
||||
/^%~/ {
|
||||
print substr($0, 3)
|
||||
}
|
||||
|
||||
/^%[a-zA-Z0-9_]+:/ {
|
||||
_split = index($0, ":")
|
||||
_name = substr($0, 2, _split-2)
|
||||
_value = substr($0, _split+1)
|
||||
printf "export DATA_%s='%s'\n", _name, escape_shell(_value)
|
||||
}
|
||||
|
||||
!/^%%|^%~|^%[a-zA-Z0-9_]+:/ {
|
||||
printf "printf '%%s\\n' \"%s\"\n", translate_var_refs(escape_shell($0))
|
||||
}
|
||||
27
preproc/lib.sh
Normal file
27
preproc/lib.sh
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
set -e
|
||||
|
||||
die() {
|
||||
printf "%s: error: %s\n" "$FILENAME" "$1" >&2
|
||||
exit 1
|
||||
}
|
||||
|
||||
include() {
|
||||
if [ ! -f "$1" ]; then
|
||||
die "Can't include '$1'."
|
||||
fi
|
||||
awk -Pf preproc/interp.awk $1 | sh
|
||||
}
|
||||
|
||||
include_raw() {
|
||||
if [ ! -f "$1" ]; then
|
||||
die "Can't include '$1'."
|
||||
fi
|
||||
cat "$1"
|
||||
}
|
||||
|
||||
include_md() {
|
||||
if [ ! -f "$1" ]; then
|
||||
die "Can't include '$1'."
|
||||
fi
|
||||
lowdown -thtml "$1"
|
||||
}
|
||||
11
preproc/nointerp.awk
Normal file
11
preproc/nointerp.awk
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
function escape_shell(str) {
|
||||
gsub(/\\/, "\\\\", str)
|
||||
gsub(/'/, "\\\'", str)
|
||||
gsub(/"/, "\\\"", str)
|
||||
gsub(/\$/, "\\$", str)
|
||||
return str
|
||||
}
|
||||
|
||||
{
|
||||
printf "printf '%%s\\n' \"%s\"\n", escape_shell($0)
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 210 KiB After Width: | Height: | Size: 101 KiB |
12
src/footer.inc
Normal file
12
src/footer.inc
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
%% vim: ft=html
|
||||
<div class="footer">
|
||||
<pre class="impressum">
|
||||
<b>Impressum</b>
|
||||
Angaben gemäß § 5 DDG
|
||||
Lennart Friebel
|
||||
Kapellenstraße 70
|
||||
76131 Karlsruhe
|
||||
</pre>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
29
src/header.inc
Normal file
29
src/header.inc
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
%% vim: ft=html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>%[PAGE_TITLE]</title>
|
||||
<link rel="stylesheet" href="/style.css"/>
|
||||
<link rel="icon" type="image/x-icon" href="/assets/favicon.png"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="navbutton">
|
||||
<div class="logo">
|
||||
<img src="assets/logo.png" alt="logo"/>
|
||||
</div>
|
||||
Karl<strong>OS</strong>
|
||||
</div>
|
||||
|
||||
<div class="navbutton">
|
||||
<a href="/index.html#contact">Contact</a>
|
||||
</div>
|
||||
|
||||
<div class="navbutton">
|
||||
<a href="https://docmost.karlsruhe-os.de/share/ec4wruvza2/p/karl-os-jnaBwGMoVx">Docs</a>
|
||||
</div>
|
||||
|
||||
<div class="navbutton">
|
||||
<a href="/code/">Code</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,31 +1,5 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Welcome to KarlOS!</title>
|
||||
<link rel="stylesheet" href="assets/style.css"/>
|
||||
<link rel="icon" type="image/x-icon" href="assets/favicon.png"/>
|
||||
</head>
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="navbutton">
|
||||
<div class="logo">
|
||||
<img src="assets/logo.png" alt="logo"/>
|
||||
</div>
|
||||
Karl<strong>OS</strong>
|
||||
</div>
|
||||
|
||||
<div class="navbutton">
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
|
||||
<div class="navbutton">
|
||||
<a href="https://docmost.karlsruhe-os.de/share/ec4wruvza2/p/karl-os-jnaBwGMoVx">Docs</a>
|
||||
</div>
|
||||
|
||||
<div class="navbutton">
|
||||
<a href="/code/">Code</a>
|
||||
</div>
|
||||
</div>
|
||||
%PAGE_TITLE:Welcome to KarlOS!
|
||||
%~ include src/header.inc
|
||||
<div class="banner">
|
||||
<h1>Hobby OS Dev @ KIT</h1>
|
||||
</div>
|
||||
|
|
@ -52,14 +26,4 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<pre class="impressum">
|
||||
<b>Impressum</b>
|
||||
Angaben gemäß § 5 DDG
|
||||
Lennart Friebel
|
||||
Kapellenstraße 70
|
||||
76131 Karlsruhe
|
||||
</pre>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
%~ include src/footer.inc
|
||||
|
|
|
|||
28
src/releases.html
Normal file
28
src/releases.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
%PAGE_TITLE:KarlOS - Releases
|
||||
%~ include src/header.inc
|
||||
<div class="content">
|
||||
<div class="softpage">
|
||||
<h1>Releases</h1>
|
||||
<table class="listing">
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Release</th>
|
||||
<th>Checksum</th>
|
||||
<th>Signature</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-10-18</td>
|
||||
<td><a href="">KarlOS Preview Snapshot #1 Live Image</a></td>
|
||||
<td><a href="">sha256</a></td>
|
||||
<td><a href="">minisign</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2025-12-24</td>
|
||||
<td><a href="">KarlOS Christmas Special Edition</a></td>
|
||||
<td><a href="">sha256</a></td>
|
||||
<td><a href="">minisign</a></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
%~ include src/footer.inc
|
||||
|
|
@ -1,5 +1,13 @@
|
|||
%COLOR_BACKGROUND:rgb(28, 27, 34)
|
||||
%COLOR_TEXT:white
|
||||
%COLOR_SPECIAL:rgb(0, 150, 110)
|
||||
%COLOR_NAVBAR:black
|
||||
%COLOR_SHADOW:#222222
|
||||
%COLOR_BLOCK:rgb(20, 19, 25)
|
||||
%COLOR_BLOCK_ALT:rgb(35, 36, 42)
|
||||
|
||||
html {
|
||||
color-scheme: light dark;
|
||||
color-scheme: dark;
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
body {
|
||||
|
|
@ -9,15 +17,18 @@ body {
|
|||
|
||||
font-family: Tahoma, Verdana, Arial, sans-serif;
|
||||
font-size: 20px;
|
||||
|
||||
background-color: %[COLOR_BACKGROUND];
|
||||
color: %[COLOR_TEXT];
|
||||
}
|
||||
a {
|
||||
color: rgb(0, 150, 110);
|
||||
color: %[COLOR_SPECIAL];
|
||||
}
|
||||
.navbar {
|
||||
width: 100%;
|
||||
padding-top: 0.6em;
|
||||
padding-bottom: 0.6em;
|
||||
background-color: black;
|
||||
background-color: %[COLOR_NAVBAR];
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
|
@ -35,7 +46,7 @@ a {
|
|||
text-align: center;
|
||||
padding-top: 1em;
|
||||
padding-bottom: 2em;
|
||||
background-color: #222222;
|
||||
background-color: %[COLOR_BLOCK];
|
||||
}
|
||||
.content {
|
||||
max-width: 40em;
|
||||
|
|
@ -51,23 +62,23 @@ a {
|
|||
padding-bottom: 5em;
|
||||
margin-bottom: 4em;
|
||||
|
||||
color: white;
|
||||
color: %[COLOR_TEXT];
|
||||
text-align: center;
|
||||
|
||||
background-image: url("banner.jpg");
|
||||
background-image: url("/assets/banner.jpg");
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
box-shadow: inset 0em -2em 5em #222222;
|
||||
box-shadow: inset 0em -2em 5em %[COLOR_SHADOW];
|
||||
}
|
||||
.banner h1 {
|
||||
text-shadow: 2px 2px #222222;
|
||||
text-shadow: 4px 4px %[COLOR_SHADOW];
|
||||
letter-spacing: 0.25em;
|
||||
font-family: 'Courier New', monospace;
|
||||
}
|
||||
.banner h3 {
|
||||
text-shadow: 1px 1px #222222;
|
||||
text-shadow: 1px 1px %[COLOR_SHADOW];
|
||||
}
|
||||
h2 {
|
||||
font-size: 50px;
|
||||
|
|
@ -92,3 +103,12 @@ h2 {
|
|||
text-align: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.listing td {
|
||||
padding: 0 1em;
|
||||
}
|
||||
.listing {
|
||||
background-color: %[COLOR_BLOCK];
|
||||
}
|
||||
.listing tr:nth-child(even) {
|
||||
background-color: %[COLOR_BLOCK_ALT];
|
||||
}
|
||||
9
src/team.html
Normal file
9
src/team.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
%PAGE_TITLE:KarlOS - Our Team
|
||||
%~ include src/header.inc
|
||||
<div class="banner">
|
||||
<h1>Our Team</h1>
|
||||
</div>
|
||||
<div class="content">
|
||||
%~ for member in src/team/*; do printf "<div class=\"softpage\">\n"; include_md "$member"; printf "</div>\n"; done
|
||||
</div>
|
||||
%~ include src/footer.inc
|
||||
2
src/team/000_yaloalo.md
Normal file
2
src/team/000_yaloalo.md
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
## @yaloalo
|
||||
### Lennart Friebel
|
||||
7
src/team/010_tomolt.md
Normal file
7
src/team/010_tomolt.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
## @tomolt
|
||||
### Thomas Oltmann
|
||||
|
||||
Hi there! I'm a computer science master student at KIT specializing in operating systems design.
|
||||
Together with **@yaloalo**, I am one of the founding members of KarlOS.
|
||||
Before we started KarlOS, I was working on my own hobbyist OS *dabble*.
|
||||
I also maintain our website and online services.
|
||||
Loading…
Add table
Reference in a new issue