diff --git a/convert.sh b/convert.sh index 805446f..07c8536 100755 --- a/convert.sh +++ b/convert.sh @@ -62,7 +62,6 @@ wait mkdir -p ./_site/css mkdir -p ./_site/js mkdir -p ./_site/fonts -cp ./css/base.css ./_site/css/base.css -cp ./js/main.js ./_site/js/main.js -cp ./favicon.ico ./_site/favicon.ico +sed -e "s:{{SITE_ROOT}}:$SITE_ROOT:g" ./css/base.css > ./_site/css/base.css +sed -e "s:{{SITE_ROOT}}:$SITE_ROOT:g" ./js/main.js > ./_site/js/main.js cp ./fonts/* ./_site/fonts/ || true diff --git a/css/base.css b/css/base.css index c50dccd..d21693e 100644 --- a/css/base.css +++ b/css/base.css @@ -1,7 +1,7 @@ @font-face { font-family: "bagnardregular"; - src: url("/blog/fonts/bagnard-webfont.woff2") format("woff2"), - url("/blog/fonts/bagnard-webfont.woff") format("woff"); + src: url("{{SITE_ROOT}}/fonts/bagnard-webfont.woff2") format("woff2"), + url("{{SITE_ROOT}}/fonts/bagnard-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } @@ -36,6 +36,16 @@ code { font-family: "Ubuntu Mono", monospace; } +blockquote { + background-color: #cecece; + border-left: 4px solid grey; + margin: 0; +} + +blockquote p { + padding: 0.5em 1em 0.5em 1em; +} + nav { border-bottom: 1px solid black; } @@ -62,6 +72,11 @@ nav { display: none; } +footer { + text-align: right; + border-top: 1px solid black; +} + @media (prefers-color-scheme: dark) { html { color: gainsboro; @@ -74,6 +89,11 @@ nav { color: #404040; } + blockquote { + background-color: #3a3a3a; + border-color: gainsboro; + } + a { color: #94cdff; } @@ -89,6 +109,10 @@ nav { .crumb a::after { color: gainsboro; } + + footer { + border-top-color: gainsboro; + } } @media screen and (max-width: 980px) { diff --git a/env b/env index 011abb6..d2f5dc3 100644 --- a/env +++ b/env @@ -1,3 +1,5 @@ -export SITE_ROOT="/blog" -export SITE_TITLE="Perfect5th 2.0" -export CRUMBS="YES" +[ -z "$SITE_ROOT" ] && export SITE_ROOT="/blog" +[ -z "$SITE_TITLE" ] && export SITE_TITLE="Perfect5th 2.0" +[ -z "$CRUMBS" ] && export CRUMBS="YES" + +[ "$SITE_ROOT" = "/" ] && export SITE_ROOT="" diff --git a/markdown/index.md b/markdown/index.md index c901e8a..f2c4e1f 100644 --- a/markdown/index.md +++ b/markdown/index.md @@ -11,6 +11,7 @@ Feeling cute, might add RSS one day, here's an index of top-level pages that I'v personal wiki I used to maintain. - [An AoC Intro to Haskell](haskell-aoc) + - [Simple Site](simple-site.html) [1]: https://mitchellburton.ca [2]: https://github.com/perfect5th/simple-site "Simple Site GitHub Repo" diff --git a/markdown/simple-site.md b/markdown/simple-site.md new file mode 100644 index 0000000..a0fa11b --- /dev/null +++ b/markdown/simple-site.md @@ -0,0 +1,54 @@ +# Simple Site + +*Created 2024-01-22* + +A couple days ago, my friend [tendermario][1] sent me a message: + +> I honestly want to make a md file sorta layout that gets converted into html and just static serve +> on github pages + +Now I know there are a lot of ways to accomplish this, but _I_ didn't create any of those, so by +the doctrine of not-invented-here, I made [Simple Site][2]. The name probably already clashes with +something existing, and I'm open to changing it as soon as a better idea comes along. + +The main concept was to see if I could produce a static site generator in less than 100 lines of +shell script. Obviously there is some cheating involved: it uses [markdown][3] to produce the actual +html that is inserted into the html files, but I've built a few niceties around that, and it comes +with a GitHub workflow that publishes it to GitHub Pages. + +Here's a non-exhaustive feature list: + + - configurable `SITE_ROOT` if you want to host it at different URLs + - optional navigation breadcrumbs + - support for a single CSS file, a single JS file, and font files + - generated titles for pages (from first-line `h1` of markdown file) + +That's about it, for now. I don't think I'll add much more. The site you're currently reading this +on was generated using this project. Maybe I'll add a footer. + +Using it is very simple, and that's kind of the point. The `README` might explain it more but here's +the gist: + + 1. Clone the repo + 1. Write whatever CSS you want or need in `./css/base.css` + 1. Write whatever content you want in `./markdown/` (make sure to include) `index.md` files if you + want `index.html` files in each directory. + 1. Write whatever JS you want or need in `./js/main.js` + 1. Add whatever font files you need to `./fonts/` + 1. Edit `./env` to set `SITE_ROOT`, `SITE_TITLE`, and `CRUMBS` + 1. Install `markdown` + 1. Run `./convert.sh` + 1. Server your resulting `./_site/` from wherever you feel like + +When I test it locally I do this: + + 1. `SITE_ROOT="/" ./convert.sh` + 1. `cd ./_site/ && python3 -m http.server` + +Oh, and it's GPLv3 licensed, so feel free to do with that what you will. + +— Mitch + + [1]: https://github.com/tendermario "tendermario's GitHub" + [2]: https://github.com/Perfect5th/simple-site/ "Simple Site GitHub Repository" + [3]: https://daringfireball.net/projects/markdown/ "Daring Fireball's Markdown Project Page" diff --git a/templates/close.html b/templates/close.html index 39a14ab..9a89dcd 100644 --- a/templates/close.html +++ b/templates/close.html @@ -1,3 +1,9 @@ +