diff options
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | README.txt | 21 | ||||
| -rw-r--r-- | entries/error.html | 23 | ||||
| -rw-r--r-- | entries/index.html | 38 | ||||
| -rwxr-xr-x | make.sh | 5 | ||||
| -rwxr-xr-x | render.sh | 19 | ||||
| -rw-r--r-- | static/favicon.ico (renamed from www/favicon.ico) | bin | 4286 -> 4286 bytes | |||
| -rw-r--r-- | static/index.css | 68 | ||||
| -rw-r--r-- | templates/footer.html | 16 | ||||
| -rw-r--r-- | templates/head-common.html | 8 | ||||
| -rw-r--r-- | templates/nav.html | 13 | ||||
| -rw-r--r-- | www/error.html | 113 | ||||
| -rw-r--r-- | www/index.html | 124 |
13 files changed, 212 insertions, 237 deletions
diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ccbb9df --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +www/ @@ -3,3 +3,24 @@ The Woman In My Eye is a trans blog recounting my journey as a transgender woman. You can find me on Fedi @senders@tech.lgbt if you have any questions. + +== Structure + +The files are structured into the following folders: + +templates/ + These are template files that can be injected by {name} into any HTML document. +entries/ + These are all files that will be rendered into the www/ folder +www/ + These are the production ready files + +static/ + These are static files that will be copied to the www folder based on their existing folder structure + +== Scripts + +./render.sh <file> www/<path> + Renders a given entry into the path destination +./make.sh + Will build the entire website! diff --git a/entries/error.html b/entries/error.html new file mode 100644 index 0000000..fbab7e9 --- /dev/null +++ b/entries/error.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + {head-common} + <title>The Woman in my Eye</title> + <meta name="description" + content="Page request not found"> +</head> +<body> + <header> + <h1>The page requested is not found!</h1> + </header> + {nav} + <main> + <article> + <h2>Oops, someone screwed up?</h2> + <p>The page you've requested does not exist. Sorry about that! Please + <a href="/">return to the homepage</a>.</p> + </article> + </main> + {footer} +</body> +</html> diff --git a/entries/index.html b/entries/index.html new file mode 100644 index 0000000..16f9de7 --- /dev/null +++ b/entries/index.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <title>The Woman in my Eye</title> + {head-common} + <link rel="me" + href="https://tech.lgbt/@senders"> + <meta name="description" + content= + "The woman in your eye is a transgender blog from the perspective of the author. She tries her best to provide information to hopefully help or entertain her readers who may also be struggling with their gender identity"> +</head> +<body> + <header> + <h1>Hello, the Woman in my Eye</h1> + </header> + {nav} + <main> + <article> + <h2>Introduction</h2> + <p>Welcome to my blog. My name is Steph and I am a 30 something + transgender woman. This blog focuses on my journey transitioning and + discovering my gender. I am not a medical professional or an expert on + the subject. I am simply a girl trying to share her story in the hopes it + might actually help someone else find themselves...or entertain; either + works!</p> + </article> + <article> + <h2>Notice: I am barely setup!</h2> + <p>Hey, thanks for visiting my website. I decided to take on this + initiative basically right before I had to leave my house for a few days. + So hopefully I can get this up and running soon after. For posterity I + wrote this on <time datetime="2023-06-22T01:34:00Z">June 21st, + 2023</time>, so when you're seeing this in 2030 we can all laugh.</p> + </article> + </main> + {footer} +</body> +</html> @@ -0,0 +1,5 @@ +./render.sh entries/index.html www/index.html +./render.sh entries/error.html www/error.html + + +cp -r static/* www diff --git a/render.sh b/render.sh new file mode 100755 index 0000000..47cd89d --- /dev/null +++ b/render.sh @@ -0,0 +1,19 @@ +set -ex; +if [ $# -ne 2 ]; then + echo "Usage: ./render.sh <file> www/<path>/<to>/<prod>.html" + exit 1; +fi + +FILE=$1 +DEST=$2 + +mkdir -p $(dirname $DEST) +cp $FILE $DEST + +for tmpl in templates/*.html; do + key=$(basename ${tmpl} .html) + sed -i "/[{]${key}[}]/r ${tmpl}" $DEST + sed -i "s/[{]${key}[}]//g" $DEST +done +./tidy.sh $DEST + diff --git a/www/favicon.ico b/static/favicon.ico Binary files differindex e3b5bab..e3b5bab 100644 --- a/www/favicon.ico +++ b/static/favicon.ico diff --git a/static/index.css b/static/index.css new file mode 100644 index 0000000..961d7df --- /dev/null +++ b/static/index.css @@ -0,0 +1,68 @@ +:root { + --twhite: #fff; + --tblue: #4ac2fe; + --tpink: #ef95ae; + --flagheight: 60px; + --flagwidth: 90px; + --bgcolor: #e4e4ff; + --page-width: 50em; +} +html, body { + margin: 16px; + line-height: 1.5em; + background-color: var(--bgcolor); +} +p { margin: 0; } +header { + text-align: center; +} +nav { + text-align: center; + margin: 32px 0; +} +nav ul { + list-style-type: none; + padding-left: 0; +} +nav ul li { + display: inline-block; + padding: 4px; +} +footer { + display: flex; + justify-content: center; + font-size: 0.9em; +} +article { + background-color: white; + padding: 16px; +} +main article { + margin: auto auto; + max-width: var(--page-width); + border-radius: 8px; + margin-bottom: 32px; +} +main article:last-child { + margin-bottom: none; +} +.transflag { + width: var(--flagwidth); + height: var(--flagheight); + margin: 16px auto; +} +.transflag .blue { + width: 100%; + min-height: calc(var(--flagheight) / 5); + background-color: var(--tblue); +} +.transflag .pink { + width: 100%; + min-height: calc(var(--flagheight) / 5); + background-color: var(--tpink); +} +.transflag .white { + width: 100%; + min-height: calc(var(--flagheight) / 5); + background-color: var(--twhite); +} diff --git a/templates/footer.html b/templates/footer.html new file mode 100644 index 0000000..79074d5 --- /dev/null +++ b/templates/footer.html @@ -0,0 +1,16 @@ +<div class='transflag' + title="A html rendering of the trans flag"> + <div class='blue'></div> + <div class='pink'></div> + <div class='white'></div> + <div class='pink'></div> + <div class='blue'></div> +</div> +<footer> + <p>© 2023 TheWomanInMyEye dot org - + <a id="license" rel="license external noopener noreferrer" + target="_blank" + href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> + unless otherwise noted.</p> +</footer> + diff --git a/templates/head-common.html b/templates/head-common.html new file mode 100644 index 0000000..c06fc18 --- /dev/null +++ b/templates/head-common.html @@ -0,0 +1,8 @@ +<meta charset="utf-8"> +<meta name="viewport" + content="width=device-width, initial-scale=1"> +<link rel="stylesheet" href="/index.css"> +<link rel="license" href="#license"> +<link rel="icon" + href="favicon.ico"> + diff --git a/templates/nav.html b/templates/nav.html new file mode 100644 index 0000000..c21e9cb --- /dev/null +++ b/templates/nav.html @@ -0,0 +1,13 @@ +<nav title="site menu"> + <ul> + <li> + <a href='/resources'>resources</a> + </li> + <li> + <a href='/about'>about</a> + </li> + <li> + <a href='/blog'>blog</a> + </li> + </ul> +</nav> diff --git a/www/error.html b/www/error.html deleted file mode 100644 index f52a51e..0000000 --- a/www/error.html +++ /dev/null @@ -1,113 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="generator" - content="HTML Tidy for HTML5 for Linux version 5.7.45"> - <title>The Woman in my Eye</title> - <link rel="icon" - href="favicon.ico"> - <link rel="license" - href="#license"> - <meta name="viewport" - content="width=device-width, initial-scale=1"> - <meta name="description" - content="Page request not found"> - <style> - :root { - --twhite: #fff; - --tblue: #4ac2fe; - --tpink: #ef95ae; - --flagheight: 60px; - --flagwidth: 90px; - --bgcolor: #e4e4ff; - --page-width: 50em; - } - html, body { - margin: 16px; - line-height: 1.5em; - background-color: var(--bgcolor); - } - p { margin: 0; } - header { - text-align: center; - } - nav { - text-align: center; - margin: 32px 0; - } - nav > a { - padding: 4px; - } - footer { - display: flex; - justify-content: center; - font-size: 0.9em; - } - article { - background-color: white; - padding: 16px; - } - main article { - margin: auto auto; - max-width: var(--page-width); - border-radius: 8px; - margin-bottom: 32px; - } - main article:last-child { - margin-bottom: none; - } - .transflag { - width: var(--flagwidth); - height: var(--flagheight); - margin: 16px auto; - } - .transflag .blue { - width: 100%; - min-height: calc(var(--flagheight) / 5); - background-color: var(--tblue); - } - .transflag .pink { - width: 100%; - min-height: calc(var(--flagheight) / 5); - background-color: var(--tpink); - } - .transflag .white { - width: 100%; - min-height: calc(var(--flagheight) / 5); - background-color: var(--twhite); - } - </style> -</head> -<body> - <header> - <h1>The page requested is not found!</h1> - </header> - <nav> - <a href='/resources'>resources</a> <a href='/about'>about</a> <a href= - '/blogs'>blog</a> - </nav> - <main> - <article> - <h2>Oops, someone screwed up?</h2> - <p>The page you've requested does not exist. Sorry about that! Please - <a href="/">return to the homepage</a>.</p> - </article> - </main> - <div class='transflag' - title="A html rendering of the trans flag"> - <div class='blue'></div> - <div class='pink'></div> - <div class='white'></div> - <div class='pink'></div> - <div class='blue'></div> - </div> - <footer> - <p>© 2023 TheWomanInMyEye dot org - <a id="license" - rel="license external noopener noreferrer" - target="_blank" - href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> - unless otherwise noted.</p> - </footer> -</body> -</html> diff --git a/www/index.html b/www/index.html deleted file mode 100644 index a2b2c84..0000000 --- a/www/index.html +++ /dev/null @@ -1,124 +0,0 @@ -<!DOCTYPE html> -<html lang="en"> -<head> - <meta charset="utf-8"> - <meta name="generator" - content="HTML Tidy for HTML5 for Linux version 5.7.45"> - <title>The Woman in my Eye</title> - <link rel="icon" - href="favicon.ico"> - <link rel="license" - href="#license"> - <link rel="me" - href="https://tech.lgbt/@senders"> - <meta name="viewport" - content="width=device-width, initial-scale=1"> - <meta name="description" - content= - "The woman in your eye is a transgender blog from the perspective of the author. She tries her best to provide information to hopefully help or entertain her readers who may also be struggling with their gender identity"> - - <style> - :root { - --twhite: #fff; - --tblue: #4ac2fe; - --tpink: #ef95ae; - --flagheight: 60px; - --flagwidth: 90px; - --bgcolor: #e4e4ff; - --page-width: 50em; - } - html, body { - margin: 16px; - line-height: 1.5em; - background-color: var(--bgcolor); - } - p { margin: 0; } - header { - text-align: center; - } - nav { - text-align: center; - margin: 32px 0; - } - nav > a { - padding: 4px; - } - footer { - display: flex; - justify-content: center; - font-size: 0.9em; - } - article { - background-color: white; - padding: 16px; - } - main article { - margin: auto auto; - max-width: var(--page-width); - border-radius: 8px; - margin-bottom: 32px; - } - main article:last-child { - margin-bottom: none; - } - .transflag { - width: var(--flagwidth); - height: var(--flagheight); - margin: 16px auto; - } - .transflag .blue { - width: 100%; - min-height: calc(var(--flagheight) / 5); - background-color: var(--tblue); - } - .transflag .pink { - width: 100%; - min-height: calc(var(--flagheight) / 5); - background-color: var(--tpink); - } - .transflag .white { - width: 100%; - min-height: calc(var(--flagheight) / 5); - background-color: var(--twhite); - } - </style> -</head> -<body> - <header> - <h1>Hello, the Woman in my Eye</h1> - </header> - <nav> - <a href='/resources'>resources</a> <a href='/about'>about</a> <a href= - '/blogs'>blog</a> - </nav> - <main> - <article> - <p>Welcome to my blog. My name is Steph and I am a 30 something - transgender woman. This blog focuses on my journey transitioning and - discovering my gender. I am not a medical professional or an expert on - the subject. I am simply a girl trying to share her story in the hopes it - might actually help someone else find themselves...or entertain; either - works!</p> - </article> - <article> - <p>This would be where my first article would be... if I didn't just - start this site! Please look forward to it.</p> - </article> - </main> - <div class='transflag' - title="A html rendering of the trans flag"> - <div class='blue'></div> - <div class='pink'></div> - <div class='white'></div> - <div class='pink'></div> - <div class='blue'></div> - </div> - <footer> - <p>© 2023 TheWomanInMyEye dot org - <a id="license" - rel="license external noopener noreferrer" - target="_blank" - href="https://creativecommons.org/licenses/by/4.0/">CC BY-SA 4.0</a> - unless otherwise noted.</p> - </footer> -</body> -</html> |