initial commit
This commit is contained in:
parent
0ef10246f3
commit
6be1c4bd8a
|
|
@ -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.
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="date" content='$date-meta$'>
|
||||
<title>$title$</title>
|
||||
<link rel="stylesheet" href='../css/$theme$'>
|
||||
</head>
|
||||
<body>
|
||||
<p><a href="../" alt="..">../</a></p>
|
||||
<p>Date: $date$</p>
|
||||
<h1>$title$</h1>
|
||||
$body$
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>My Blog</title>
|
||||
<link rel="stylesheet" href='css/gmi.css'>
|
||||
</head>
|
||||
<body>
|
||||
<h1>My Blog</h1>
|
||||
<h3>Posts</h3>
|
||||
$body$
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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%;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue