From ae89e1bc02509bbf444b75843cdf00acb3d1c5be Mon Sep 17 00:00:00 2001 From: Bartek Pacia Date: Tue, 2 Apr 2024 13:49:43 +0200 Subject: [PATCH 1/2] use `eval` when calling $MD_RENDERER" --- ssb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ssb b/ssb index e5186b9..4a6cdc5 100755 --- a/ssb +++ b/ssb @@ -304,7 +304,7 @@ make_html_files() # Ignore the suggestion because tempf can be expanded immediately # shellcheck disable=SC2064 trap "rm $tempf" 0 2 3 15 - append_posts_list "$posts" | cat "$md_file" - | "$MD_RENDERER" > "$tempf" + append_posts_list "$posts" | cat "$md_file" - | eval "$MD_RENDERER" > "$tempf" cat "$HEADER_PATH" "$tempf" "$FOOTER_PATH" > "$output_file" done } From ed4e4482ef412422f02b79c1defc0c38644671a0 Mon Sep 17 00:00:00 2001 From: Maciej Ziaja Date: Tue, 21 May 2024 20:04:00 +0200 Subject: [PATCH 2/2] Import themes repo --- README.md | 5 +- themes/.gitignore | 2 + themes/README.md | 9 ++ themes/index.md | 54 +++++++ themes/run_test | 9 ++ themes/simple/styles.css | 308 +++++++++++++++++++++++++++++++++++++++ themes/teal/styles.css | 181 +++++++++++++++++++++++ 7 files changed, 566 insertions(+), 2 deletions(-) create mode 100644 themes/.gitignore create mode 100644 themes/README.md create mode 100644 themes/index.md create mode 100755 themes/run_test create mode 100644 themes/simple/styles.css create mode 100644 themes/teal/styles.css diff --git a/README.md b/README.md index 584407d..cbc5c22 100644 --- a/README.md +++ b/README.md @@ -106,8 +106,9 @@ Credentials: https://github.com/maciejzj/ssb ## Other tips -Stylesheets for theming can be found -[here](https://github.com/maciejzj/ssb-themes). +Stylesheets for theming can be found inside the `themes` directory. The path to +a stylesheet is specified in the header html file, be default it is +`styles.css`. You can grab the following Makefile starter to use ssb in a more comfortable way: diff --git a/themes/.gitignore b/themes/.gitignore new file mode 100644 index 0000000..f4fdd2e --- /dev/null +++ b/themes/.gitignore @@ -0,0 +1,2 @@ +/*.html +/*.css diff --git a/themes/README.md b/themes/README.md new file mode 100644 index 0000000..f0de302 --- /dev/null +++ b/themes/README.md @@ -0,0 +1,9 @@ +# Themes for ssb + +Path to a stylesheet is specified in the ssb html header file. The default one +looks for `styles.css` in the header's directory. + +## Running quick visual tests of the themes + +Use the `run_test` script passing the path to the desired theme as an argument. +This script uses ssb version accessed via PATH. diff --git a/themes/index.md b/themes/index.md new file mode 100644 index 0000000..3fef18f --- /dev/null +++ b/themes/index.md @@ -0,0 +1,54 @@ +# Header 1 +## Header 2 +### Header 3 +#### Header 4 +##### Header 5 + +* Bullet point 1 +* Bulet point 2 +* Bullet point 3 + +1. Ordered list first +2. Ordered list second +3. Ordered list third + +A [link](https://maciejzj.xyz) to a website. + +| Column 1 | Column 2 | +| -------- | -------- | +| Value 1 | Row 1 | +| Value 2 | Row 2 | +| Value 3 | Row 3 | + +> A quote block. + +A piece of *emph* text. + +A piece of **strong** text. + +![An image](https://api.culture.pl/sites/default/files/styles/260_auto_aspect/public/images/imported/sztuki%20wizualne/portrety/Jarema_mari/jerema_mairia_rolke_ag.jpg?itok=K7cmrkcF) + +A ruler separating text. + +--- + +Preformatted code/verbatim: + +``` +git filter-branch --env-filter ' +WRONG_EMAIL="" +NEW_NAME="" +NEW_EMAIL="" + +if [ "$GIT_COMMITTER_EMAIL" = "$WRONG_EMAIL" ] +then + export GIT_COMMITTER_NAME="$NEW_NAME" + export GIT_COMMITTER_EMAIL="$NEW_EMAIL" +fi +if [ "$GIT_AUTHOR_EMAIL" = "$WRONG_EMAIL" ] +then + export GIT_AUTHOR_NAME="$NEW_NAME" + export GIT_AUTHOR_EMAIL="$NEW_EMAIL" +fi +' --tag-name-filter cat -- --branches --tags +``` diff --git a/themes/run_test b/themes/run_test new file mode 100755 index 0000000..dd6248d --- /dev/null +++ b/themes/run_test @@ -0,0 +1,9 @@ +#!/usr/bin/env sh +# Usage: run_test + +set -eu + +rm -f styles.css +ssb -g +ln -fs "$1" styles.css +ssb -d index.md diff --git a/themes/simple/styles.css b/themes/simple/styles.css new file mode 100644 index 0000000..e68fa39 --- /dev/null +++ b/themes/simple/styles.css @@ -0,0 +1,308 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono&display=swap'); + +:root { + --grey: rgb(191, 191, 191); + --dark-grey: rgb(100, 100, 100); + --light-grey: rgb(249, 249, 249); + --blue-interactive: rgb(65, 74, 240); +} + + +body { + font-family: -apple-system, "BlinkMacSystemFont", + "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + + max-width: 40em; + margin: auto; + padding: 1.5em; +} + +header { + font-size: 1.1em; + margin: 2em 0em; +} + + +nav { + margin-bottom: 1.5em; + padding-bottom: 0.5em; +} + +nav a:not(:last-child) { + margin-right: 0.25em; +} + +footer { + margin-top: 1.5em; + text-align: right; +} + +p { + line-height: 1.5em; + text-align: justify; + hyphens: auto; + text-justify: inter-word; + overflow-wrap: break-word; + margin: 0.5em 0 0.5em 0; +} + +a { + color: var(--blue-interactive); + text-decoration-thickness: 0.08em; +} + +li { + line-height: 1.5em; +} + +ul { + padding-left: 3em; +} + +ol { + padding-left: 3em; +} + +dl { + line-height: 1.5em; +} + +dt { + font-weight: bold; +} + +dd { + font-style: italic; +} + +hr { + color: var(--grey); + border: solid 0.05em; + margin: 1.5em 0em; +} + +figure { + color: var(--dark-grey); + margin: 0.5em 0; + padding: 0.5em; +} + +figcaption { + padding-top: 0.5em; + font-style: italic; +} + +table { + max-width: 100%; + overflow-x: auto; + display: block; + border-collapse: collapse; +} + +tr { + background-color: white; +} + +tr:nth-child(2n) { + background-color: var(--light-grey); +} + +th { + font-weight: bold; + border: 0.08em solid var(--grey); + padding: 0.5em 1em; +} + +td { + border: 0.08em solid var(--grey); + padding: 0.5em 1em; +} + +blockquote { + padding: 0 1em; + color: var(--dark-grey); + border-left: 0.25em solid var(--grey); +} + +pre { + background-color: var(--light-grey); + border: 0.1em solid var(--grey); + padding: 0.5em 0.8em; + border-radius: 0.2em; + + max-width: 100%; + overflow-x: auto; +} + +img, +video { + width: 100%; +} + +@media only screen and (max-width: 600px) { + body { + font-size: 0.9em; + } + + nav { + display: flex; + flex-direction: column; + } + + nav a:not(:last-child) { + margin-bottom: 0.5em; + } +} + +code span.al { + color: #ff0000; + font-weight: bold; +} + +/* Annotation */ +code span.an { + color: #60a0b0; + font-weight: bold; + font-style: italic; +} + +/* Attribute */ +code span.at { + color: #7d9029; +} + +/* BaseN */ +code span.bn { + color: #40a070; +} + +/* BuiltIn */ +code span.bu {} + +/* ControlFlow */ +code span.cf { + color: #007020; + font-weight: bold; +} + +/* Char */ +code span.ch { + color: #4070a0; +} + +/* Constant */ +code span.cn { + color: #880000; +} + +/* Comment */ +code span.co { + color: #60a0b0; + font-style: italic; +} + +/* CommentVar */ +code span.cv { + color: #60a0b0; + font-weight: bold; + font-style: italic; +} + +/* Documentation */ +code span.do { + color: #ba2121; + font-style: italic; +} + +/* DataType */ +code span.dt { + color: #902000; +} + +/* DecVal */ +code span.dv { + color: #40a070; +} + +/* Error */ +code span.er { + color: #ff0000; + font-weight: bold; +} + +/* Extension */ +code span.ex {} + +/* Float */ +code span.fl { + color: #40a070; +} + +/* Function */ +code span.fu { + color: #06287e; +} + +/* Import */ +code span.im {} + +/* Information */ +code span.in { + color: #60a0b0; + font-weight: bold; + font-style: italic; +} + +/* Keyword */ +code span.kw { + color: #007020; + font-weight: bold; +} + +/* Operator */ +code span.op { + color: #666666; +} + +/* Other */ +code span.ot { + color: #007020; +} + +/* Preprocessor */ +code span.pp { + color: #bc7a00; +} + +/* SpecialChar */ +code span.sc { + color: #4070a0; +} + +/* SpecialString */ +code span.ss { + color: #bb6688; +} + +/* String */ +code span.st { + color: #4070a0; +} + +/* Variable */ +code span.va { + color: #19177c; +} + +/* VerbatimString */ +code span.vs { + color: #4070a0; +} + +/* Warning */ +code span.wa { + color: #60a0b0; + font-weight: bold; + font-style: italic; +} diff --git a/themes/teal/styles.css b/themes/teal/styles.css new file mode 100644 index 0000000..33f91f0 --- /dev/null +++ b/themes/teal/styles.css @@ -0,0 +1,181 @@ +@import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono&display=swap'); + +:root { + --teal-background: rgb(62, 117, 108); + --teal-foreground: rgb(105, 224, 205); + --teal-pale: rgb(63, 112, 104); + --teal-strong: rgb(10, 65, 50); +} + +body { + background-color: var(--teal-background); + + color: var(--teal-foreground); + font-family: -apple-system, "BlinkMacSystemFont", + "Segoe UI", "Roboto", "Helvetica", "Arial", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + + max-width: 40em; + margin: auto; + padding: 2em; +} + +header { + font-size: 1.1em; + margin: 2em 0em; +} + +header h1 { + font-family: "Times New Roman", Times, serif; + font-size: 3em; + font-weight: normal; + margin: 0.5em 0em; +} + +nav a:not(:last-child) { + margin-right: 0.25em; +} + +footer { + margin-top: 1.5em; + text-align: right; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Times New Roman", Times, serif; + font-weight: normal; +} + +h1 { + font-size: 2.5em; +} + +h2 { + font-size: 2.25em; +} + +h3 { + font-size: 2em; +} + +h4 { + font-size: 1.75em; +} + +h5 { + font-size: 1.5em; +} + +h6 { + font-size: 1.25em; +} + +p { + line-height: 1.25em; + hyphens: auto; + text-justify: inter-word; + overflow-wrap: break-word; + text-align: justify; +} + +a { + color: var(--teal-foreground); +} + +li { + line-height: 1.5em; +} + +ul { + padding-left: 3em; +} + +ol { + padding-left: 3em; +} + +dl { + line-height: 1.5em; +} + +dt { + font-weight: bold; +} + +dd { + font-style: italic; +} + +hr { + border: solid 0.075em var(--teal-strong); + margin: 1.5em 0em; +} + +figure { + color: var(--teal-strong); + margin: 0.5em 0; + padding: 0.5em; +} + +figcaption { + color: var(--teal-strong); + padding-top: 0.5em; + font-style: italic; +} + +table { + max-width: 100%; + overflow-x: auto; + display: block; + border-collapse: collapse; +} + +tr { + background-color: var(--teal-pale); +} + +th { + font-weight: bold; + border: 0.15em solid var(--teal-strong); + padding: 0.5em 1em; +} + +td { + border: 0.15em solid var(--teal-strong); + padding: 0.5em 1em; +} + +blockquote { + padding: 0 1em; + color: var(--teal-strong); + border-left: 0.25em solid var(--teal-strong); +} + +pre { + background-color: var(--teal-pale); + border: 0.2em solid var(--teal-strong); + padding: 0.5em 0.8em; + + max-width: 100%; + overflow-x: auto; +} + +img, video { + width: 100%; +} + +@media only screen and (max-width: 600px) +{ + body { + font-size: 0.9em; + } + + nav { + display: flex; + flex-direction: column; + } + + nav a:not(:last-child) { + margin-bottom: 0.5em; + } +}