diff --git a/README.md b/README.md new file mode 100644 index 0000000..0e2c21a --- /dev/null +++ b/README.md @@ -0,0 +1,51 @@ +# panblog + +panblog is a simple, minimal bash and pandoc-based static site generator. It takes a flat file directory of markdown files and can build a website inside a folder, or you can add just a new post to an existing panblog. + +panblog makes use of Pandoc, and specifically the template feature which allows the creation of html templates that include custom header and footer. + +## Installing + +Git clone or download this directory to your computer. + +## Usage + +Two ways to use: + +### Build entire site + +``` +./build.sh +``` + +Looks for all markdown files in the directory, then builds a folder site/ (or change name in template/build.sh) with each post by default in its own sub-folder so you can have a clean URLs. + +e.g. + +``` +site/ +- index.md +- index.html +-----/post1/ +-------index.html +-----/post2/ +-------index.html +``` + +### Create a single post and add to site + +``` +./post.sh postname.md +``` + +Takes a single specified file and adds it to the site/ folder (or change in template/post.sh) with each post by default in its own sub-folder. + +## Themes + +panblog comes with several theme options. A theme should be specified in your templates files. + +## License + +cc0 Public Domain + +Issues / pull requests considered. diff --git a/build.sh b/build.sh new file mode 100755 index 0000000..e660c43 --- /dev/null +++ b/build.sh @@ -0,0 +1,35 @@ +#!/bin/bash + +# change if you'd like a different destination directory +site_folder=site + +# templates folder location +templates=templates + +# make site folder if doesn't exist +mkdir -p $site_folder + +# copy over themes +mkdir -p "$site_folder"/css +cp -r themes/*.css "$site_folder"/css + + +for file in *.md +do + post_name=$file + + # uncomment this section if you prefer flat hierarchy postname.md -> postname.html in single folder + # pandoc --standalone --template templates/template.html $1 -o $site_folder/"${file.md}.html" + + # uncomment this section if you prefer posts to be in their own subfolder so permalinks are website.com/postname/ + mkdir -p $site_folder/$post_name + pandoc --standalone --template $templates/post_template.html $file -o $site_folder/$post_name/index.html + + # build site index + touch $site_folder/index.md + echo "[$post_name]($post_name/)">>$site_folder/index.md + echo "" + +done + +pandoc --standalone --template $templates/site_template.html $site_folder/index.md -o $site_folder/index.html diff --git a/post.sh b/post.sh new file mode 100755 index 0000000..06f72db --- /dev/null +++ b/post.sh @@ -0,0 +1,28 @@ +#!/bin/bash + +# change if you'd like a different destination directory +site_folder=site + +# templates folder location +templates=templates + +# make site folder if doesn't exist +mkdir -p $site_folder + +# copy over themes +mkdir -p "$site_folder"/css +cp -r themes/*.css "$site_folder"/css + +# uncomment this section if you prefer flat hierarchy postname.md -> postname.html in single folder +# pandoc --standalone --template template.html $1 -o $site_folder/"${1%.md}.html" + +# uncomment this section if you prefer posts to be in their own subfolder so permalinks are website.com/postname/ +post_name="${1%.md}" +mkdir -p $site_folder/$post_name +pandoc --standalone --template $templates/post_template.html $1 -o $site_folder/$post_name/index.html + +# build site index +touch $site_folder/index.md +echo "[$post_name]($post_name/)">>$site_folder/index.md +echo "" +pandoc --standalone --template $templates/site_template.html $site_folder/index.md -o $site_folder/index.html diff --git a/templates/post_template.html b/templates/post_template.html new file mode 100644 index 0000000..7f93156 --- /dev/null +++ b/templates/post_template.html @@ -0,0 +1,15 @@ + + + + + + $title$ + + + +

../

+

Date: $date$

+

$title$

+$body$ + + diff --git a/templates/site_template.html b/templates/site_template.html new file mode 100644 index 0000000..585f991 --- /dev/null +++ b/templates/site_template.html @@ -0,0 +1,13 @@ + + + + + My Blog + + + +

My Blog

+

Posts

+$body$ + + diff --git a/themes/gmi.css b/themes/gmi.css new file mode 100644 index 0000000..5d845e1 --- /dev/null +++ b/themes/gmi.css @@ -0,0 +1,187 @@ +:root { + --body-width: 48rem; + --serif: georgia, times, serif; + --sans-serif: avenir, helvetica, arial, sans-serif; + --mono: consolas, monaco, monospace; + --foreground: black; + --background: Honeydew; + + --a-decoration: none; + --a-style: normal; + --a-prefix: "⇒"; + --ul-bullet: "*"; + --p-indent: 0rem; + --quote-style: italic; + + --p-size: 1.25rem; + --a-size: var(--p-size); + --pre-size: 1rem; + --h1-size: 3rem; + --h2-size: 2.25rem; + --h3-size: 1.5rem; + --ul-size: var(--p-size); + --quote-size: var(--p-size); + + --p-line-height: 1.5; + --a-line-height: 1.5; + --pre-line-height: 1; + --h-line-height: 1.25; + --ul-line-height: 1.25; + --quote-line-height: 1.25; +} + +body { + max-width: var(--body-width); + padding: 0.5rem; + margin: 0 auto; +} + +p, +a, +pre, +h1, +h2, +h3, +ul, +blockquote, +img, +audio, +video { + display: block; + max-width: 100%; + margin: 0; + padding: 0; + overflow-wrap: anywhere; +} + +h1, +h2, +h3 { + font-family: var(--sans-serif); + line-height: var(--h-line-height); +} + +p { + font-size: var(--p-size); + font-family: var(--serif); + text-indent: var(--p-indent); + line-height: var(--p-line-height); + margin: 1.5vmin; +} + +a::before { + font-size: var(--a-size); + font-family: var(--mono); + content: var(--a-prefix); + line-height: var(--a-line-height); + padding-right: 0.25rem; + vertical-align: middle; +} + +a { + font-size: var(--a-size); + font-style: var(--a-style); + font-family: var(--serif); + text-decoration: var(--a-decoration); +} + +pre { + font-size: var(--pre-size); + font-family: var(--mono); + line-height: var(--pre-line-height); + padding: 1.25rem; + overflow-y: auto; +} + +h1 { + font-size: var(--h1-size); +} + +h2 { + font-size: var(--h2-size); +} + +h3 { + font-size: var(--h3-size); +} + +ul { + font-size: var(--ul-size); + font-family: var(--serif); + line-height: var(--ul-line-height); + list-style-type: none; +} + +li::before { + font-size: var(--ul-size); + font-family: var(--mono); + content: var(--ul-bullet); + vertical-align: middle; + padding-right: 0.5rem; +} + +blockquote { + font-size: var(--quote-size); + font-family: var(--serif); + font-style: var(--quote-style); + line-height: var(--quote-line-height); + padding-left: 0.75rem; +} + +pre + blockquote { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +/* foreground and background colors */ +html, +body, +h1, +h2, +h3, +p, +a, +ul, +blockquote, +pre::selection { + color: var(--foreground); + background-color: var(--background); +} + +blockquote { + border-left: 0.5rem solid var(--foreground); +} + +pre, +::selection, +a:hover { + color: var(--background); + background-color: var(--foreground); +} + +@media (prefers-color-scheme: dark) { + html, + body, + h1, + h2, + h3, + p, + a, + ul, + blockquote, + pre::selection { + color: var(--background); + background-color: var(--foreground); + } + + blockquote { + border-left: 0.5rem solid var(--background); + } + + pre, + ::selection, + a:hover { + color: var(--foreground); + background-color: var(--background); + } +} diff --git a/themes/now.css b/themes/now.css new file mode 100644 index 0000000..c39cd61 --- /dev/null +++ b/themes/now.css @@ -0,0 +1,197 @@ +html { + background-color: #ccffee; +} + +body { + border: 2px dotted #0533FE; + font: normal 12pt/14pt, sans-serif; + background: White; + color: #111; + width: 85vw; + margin-top: 7%; + margin-bottom: 7%; + padding: 2%; + max-width: 1060px !important; + margin-left:auto; + margin-right:auto; +} + +h1 { + margin-top: 10px; + background-color: white; + margin-bottom: 10px; + display: block; + color: White; + background: #9c9; + border-bottom: 3px solid black; + text-decoration: none !important; + text-shadow: 2px 2px 1px #9c9; +} + +u { + font-size: 140%; + color: black; + background: #9c9; +} + +strong { + display: inline; + font-style: normal; + color: BLACK; + background: #9c9; + color: WHITE; + background: silver; + text-shadow: 1px 1px 0px black; + text-shadow: 1px 1px 0px #DDDDDD; + text-shadow: 2px 0px 1px WHITE; + text-shadow: none; + font-weight: bold; + padding: 3px; + margin: 3px; +} + + +em { + display: inline; + font-style: italic; + font-weight: bold; +} + +em:hover { + color: blue !important; +} + + +strong em u { + opacity: 0.85; + letter-spacing: 7px; + font-size: 190%; + padding: 7px; + line-height: 140%; +} + +a:hover { + text-decoration: none; + border-bottom: 1px dotted; +} +/************* (strikethrough) ***********/ +s { + line-height: 0px !important; + font-size: 0 !important; +} + +/************* (link) ***********/ + +a:link { + color: #00AACC; +} + +a:visited { + color: #009c9C; + color: #00AACC; + font-style: italic; +} + +a:hover { + font-weight: bold; +} + + +/****** TITLES *********/ + +strong em u { + font-size: 150%; + text-shadow: 2px 1px 1px #333; +} + +h1 { + color: black; + background: white ; +} + +u { + font-size: 155%; + color: white !important; + background: #333; + color: black !important; + background: white; +} + +strong { + background: white; + color: black !important; + background: #333; + color: white !important; + color: black !important; + background: #EEE; + opacity: 0.8; + margin: 2px; + padding: 1px; + margin: 2px; + padding: 1px; +} + +em { + color: black !important; + display: inline; + font-style: normal; + font-style: italic; +} + +strong em u { + background: #333 !important; + color: white !important; + + background: white !important; + color: black !important; + + letter-spacing: 6px; + font-size: 180%; + opacity: 0.7; + padding: 4px; +} + +em u { + line-height: 130%; + background: none !important; + font-style: none !important; + text-decoration: none !important; + font-size: 140%; +} + +h2, h3 { + margin-top: 10px; + background-color: white; + /* border-bottom: 2px solid; */ +} + + +code { + background-color: lightgrey; +} + +img { + max-width: 400px; + width: 100%; + height: auto; + margin-bottom: 15px; + margin-bottom: 15px; + display: block; +} + p { + font-size: 1.25em; + } + + /* OVERRIDE BOOTSTRAP MAX WIDTH WITH THESE MEDIA QUERIES */ + /* THIS IS A HACK - Idea from stackoverflow here: https://stackoverflow.com/questions/22996429/override-bootstrap-container-width#22996746 */ +@media (min-width: 768px){ + .container{ + max-width:100%; + } +} + +@media (min-width: 992px){ + .container{ + max-width:100%; + } +} diff --git a/themes/slime.css b/themes/slime.css new file mode 100644 index 0000000..6ff17e0 --- /dev/null +++ b/themes/slime.css @@ -0,0 +1,34 @@ +body { + background-color: #c7fcd6; +} + +h1 { + color: #a369ef; +} + +h2 { + color: #ef69ba; +} + +h3 { + color: #f4295f; +} + +a { + color: #A020F0; +} + +p { + color: #04000c; +} + +blockquote { + color: #666699; +} + +code, pre { + color: #ff1493; +} +ul, ol, li { + color: #04000c; +}