web styles and scripts external files

This commit is contained in:
James Tomasino 2021-05-13 13:32:19 +00:00
parent 14e44475e5
commit 3bd488fb92
9 changed files with 185 additions and 188 deletions

View File

@ -3,6 +3,8 @@
rsync -avzh --delete --include=".description" --exclude=".*" /var/gopher/ /var/cosmic-backup/gopher/
rsync -avzh --delete --exclude=".*" /var/wiki/ /var/cosmic-backup/wiki/
cd /var/cosmic-backup || exit
rm ./gopher/rss.xml # skip archival of rss feed
rm ./gopher/atom.xml # skip archival of atom feed
git add .
git commit -m "backup"
git push origin master

View File

@ -12,16 +12,16 @@ if [ "$run_user" = "gemini" ]; then
# generate index pages
# curl -s gopher://localhost | /var/cosmic/awk/gophermap2gemini.awk > /var/gemini/index.gmi
cp /var/cosmic/templates/geminiintro.tmpl /var/gemini/index.gmi
curl -s gopher://localhost/1/listing.gophermap | head -n 20 | /var/cosmic/awk/gophermap2gemini.awk >> /var/gemini/index.gmi
curl -s gopher://localhost/1/log | /var/cosmic/awk/gophermap2gemini.awk > /var/gemini/log/index.gmi
curl -s gopher://localhost/1/ships | /var/cosmic/awk/gophermap2gemini.awk > /var/gemini/ships/index.gmi
curl -s -N gopher://localhost/1/listing.gophermap | head -n 20 | /var/cosmic/awk/gophermap2gemini.awk >> /var/gemini/index.gmi
curl -s -N gopher://localhost/1/log | /var/cosmic/awk/gophermap2gemini.awk > /var/gemini/log/index.gmi
curl -s -N gopher://localhost/1/ships | /var/cosmic/awk/gophermap2gemini.awk > /var/gemini/ships/index.gmi
sed 's?gopher://cosmic.voyage/0/?gemini://cosmic.voyage/?' /var/gopher/rss.xml | sed 's?<link>gopher://cosmic.voyage?<link>gemini://cosmic.voyage?' > /var/gemini/rss.xml
sed 's?gopher://cosmic.voyage/0/?gemini://cosmic.voyage/?' /var/gopher/atom.xml | sed 's?<link>gopher://cosmic.voyage?<link>gemini://cosmic.voyage?' > /var/gemini/atom.xml
# create ship directories
find "/var/gopher/" -maxdepth 1 ! -path "/var/gopher/" ! -path "/var/gopher/ships" ! -path "/var/gopher/log" -type d | sed 's|/var/gopher/||' | sort | while read -r ship
do
curl -s "gopher://localhost/1/ships/${ship}" | /var/cosmic/awk/gophermap2gemini.awk > "/var/gemini/ships/${ship}/index.gmi"
curl -s -N "gopher://localhost/1/ships/${ship}" | /var/cosmic/awk/gophermap2gemini.awk > "/var/gemini/ships/${ship}/index.gmi"
done
# Let user's know it's done
printf "Gemini and gemini feeds rebuilt successfully.\\n"

14
bin/web
View File

@ -27,7 +27,6 @@ entry_index () {
{
printf " <title>%s</title>\\n" "$title"
printf " <link rel=\"canonical\" href=\"https://cosmic.voyage%s.html\">\\n" "$loghtml"
cat "$web_styles_html"
printf "</head>\\n<body>\\n<div class=\"page-wrapper\"><pre class=\"inner-wrapper\">\\n"
printf "<a href=\"/log\"><span class=\"dim\">&lt;&lt;</span> BACK TO RELAY ONE LOG</a>\\n\\n\\n"
sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g; s/"/\&quot;/g; s/'"'"'/\&#39;/g' "${gopher_dir}${log}"
@ -47,7 +46,6 @@ if [ "$run_user" = "root" ] || [ "$run_user" = "publish" ]; then
root_index_html="${temp_dir}/index.html"
log_html="${temp_dir}/log/index.html"
web_header_html="/etc/templates/webheader.tmpl"
web_styles_html="/etc/templates/webstyles.tmpl"
ships_html="${temp_dir}/ships/index.html"
error_html="${temp_dir}/error.html"
join_html="${temp_dir}/join.html"
@ -74,10 +72,9 @@ if [ "$run_user" = "root" ] || [ "$run_user" = "publish" ]; then
printf "<link rel=\"alternate\" type=\"application/rss+xml\" title=\"Cosmic Voyage\" href=\"/rss.xml\">"
printf "<link rel=\"alternate\" type=\"application/atom+xml\" title=\"Cosmic Voyage\" href=\"/atom.xml\">"
printf "<meta name=\"description\" content=\"Cosmic Voyage is a public-access unix system and 'tilde' community based around a collaborative science-fiction universe. Users write stories as the people aboard ships, colonies, and outposts, using the only remaining free, interconnected network that unites the dispersed peoples of the stars.\">"
cat "$web_styles_html"
printf "</head>"
printf "<body>"
printf "<a rel=\"me\" href=\"https://tilde.zone/@cosmicvoyage\" style=\"display: none; visibility: hidden;\" aria-hidden=\"true\">a link to our mastodon account, to verify it as legitimate</a>"
printf "<a class=\"mastodon\" rel=\"me\" href=\"https://tilde.zone/@cosmicvoyage\" aria-hidden=\"true\">a link to our mastodon account, to verify it as legitimate</a>"
printf "<div class=\"page-wrapper\">"
printf "<pre class=\"inner-wrapper\">"
# Intro text
@ -102,7 +99,6 @@ if [ "$run_user" = "root" ] || [ "$run_user" = "publish" ]; then
{
printf "<title>Cosmic Voyage - Transmission Log</title>"
printf "<link rel=\"canonical\" href=\"https://cosmic.voyage/log\">"
cat "$web_styles_html"
printf "</head>"
printf "<body>"
printf "<div class=\"page-wrapper\">"
@ -165,7 +161,6 @@ if [ "$run_user" = "root" ] || [ "$run_user" = "publish" ]; then
{
printf "<title>Cosmic Voyage - Ships</title>"
printf "<link rel=\"canonical\" href=\"https://cosmic.voyage/ships\">"
cat "$web_styles_html"
printf "</head>"
printf "<body>"
printf "<div class=\"page-wrapper\">"
@ -195,7 +190,6 @@ if [ "$run_user" = "root" ] || [ "$run_user" = "publish" ]; then
{
printf "<title>Cosmic Voyage - %s</title>" "$ship"
printf "<link rel=\"canonical\" href=\"https://cosmic.voyage/ships/%s\">" "$ship"
cat "$web_styles_html"
printf "</head>"
printf "<body>"
printf "<div class=\"page-wrapper\">"
@ -218,7 +212,6 @@ if [ "$run_user" = "root" ] || [ "$run_user" = "publish" ]; then
{
printf "<title>Cosmic Voyage - About %s</title>" "${ship}"
printf "<link rel=\"canonical\" href=\"https://cosmic.voyage/ships/%s/about.html\">" "${ship}"
cat "$web_styles_html"
printf "</head>"
printf "<body>"
printf "<div class=\"page-wrapper\">"
@ -245,7 +238,6 @@ if [ "$run_user" = "root" ] || [ "$run_user" = "publish" ]; then
{
printf "<title>Cosmic Voyage - \"%s\" Author</title>" "${ship}"
printf "<link rel=\"canonical\" href=\"https://cosmic.voyage/ships/%s/author.html\">" "${ship}"
cat "$web_styles_html"
printf "</head>"
printf "<body>"
printf "<div class=\"page-wrapper\">"
@ -281,7 +273,6 @@ if [ "$run_user" = "root" ] || [ "$run_user" = "publish" ]; then
# Print error page
cat "$web_header_html" > "${error_html}"
{
cat "$web_styles_html"
printf "</head><body><div class=\"page-wrapper\"><pre class=\"inner-wrapper\"><a href=\"/\"><span class=\"dim\">&lt;&lt;</span> BACK TO RELAY ONE</a>"
printf "\\n\\n\\nERROR. TRANSMISSION NOT FOUND.</pre></div></body></html>"
} >> "${error_html}"
@ -291,7 +282,6 @@ if [ "$run_user" = "root" ] || [ "$run_user" = "publish" ]; then
{
printf "<title>Cosmic Voyage - How to Join</title>"
printf "<link rel=\"canonical\" href=\"https://cosmic.voyage/join.html\">"
cat "$web_styles_html"
printf "</head>"
printf "<body>"
printf "<div class=\"page-wrapper\">"
@ -308,6 +298,8 @@ if [ "$run_user" = "root" ] || [ "$run_user" = "publish" ]; then
install -m 775 -o publish -g publish "/var/cosmic/files/cosmicbanner.png" "${temp_dir}"
install -m 775 -o publish -g publish "/var/cosmic/files/inconsolata-regular-webfont.woff" "${temp_dir}"
install -m 775 -o publish -g publish "/var/cosmic/files/inconsolata-regular-webfont.woff2" "${temp_dir}"
install -m 775 -o publish -g publish "/var/cosmic/files/styles.css" "${temp_dir}"
install -m 775 -o publish -g publish "/var/cosmic/files/scripts.js" "${temp_dir}"
# generate tilde.json
userlist=$(voyagers | awk '{print "{\"username\":\"" $0 "\"}," }')

31
files/scripts.js Normal file
View File

@ -0,0 +1,31 @@
// I'm sorry you have to see JavaScript on this site, but it's here to
// enable a manual dark mode toggle. When dark mode support improves I
// can probably remove this again.
function setMode(mode, val) {
if (val) document.body.classList.add(mode)
else document.body.classList.remove(mode)
Array.from(document.querySelectorAll('a'))
.filter( el => el.href.indexOf('cosmic.voyage') !== -1)
.map( el => {
var url = el.href
var p = url.indexOf('?') !== -1 ? url.substr(url.indexOf('?')) : ''
var baseURL = url.split('?')[0]
const params = new URLSearchParams(p)
if (val) {
params.append(mode, 1)
} else {
params.delete(mode)
}
p = params.toString()
el.href = baseURL + (p ? '?' + p : '')
})
}
window.addEventListener('DOMContentLoaded', function() {
var params = new URLSearchParams(window.location.search)
if (params.has('dark')) {
setMode('dark', true)
} else if (params.has('light')) {
setMode('light', true)
}
})

141
files/styles.css Normal file
View File

@ -0,0 +1,141 @@
@font-face {
font-family: 'inconsolata';
src: url('/inconsolata-regular-webfont.woff2') format('woff2'),
url('/inconsolata-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
html {
margin: 0;
padding: 0;
}
body {
color: #333;
background-color: #f2f4f4;
background-repeat: repeat;
}
a,
a:visited,
a:hover,
a:active {
color: rgb(62, 231, 123);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.dim {
color: rgb(62, 231, 123, 0.5);
}
.mastodon {
display: none;
}
@media (prefers-color-scheme: dark) {
body {
color: rgb(50, 200, 100);
background-color: #010;
background-image: none;
}
a,
a:visited,
a:hover,
a:active {
color: rgb(62, 231, 123);
}
.dim {
color: rgb(62, 231, 123, 0.5);
}
}
@media (prefers-color-scheme: light) {
body {
color: #333;
background-color: #f2f4f4;
background-repeat: repeat;
}
a,
a:visited,
a:hover,
a:active {
color: #333;
font-weight: bold;
}
.dim {
color: rgba(30, 30, 30, 0.5);
}
}
/* Manually toggled dark class on body */
body.dark {
color: rgb(50, 200, 100);
background-color: #010;
background-image: none;
}
.dark a,
.dark a:visited,
.dark a:hover,
.dark a:active {
color: rgb(62, 231, 123);
}
.dark .dim {
color: rgb(62, 231, 123, 0.5);
}
/* Manually toggled light class on body */
body.light {
color: #333;
background-color: #f2f4f4;
background-repeat: repeat;
}
.light a,
.light a:visited,
.light a:hover,
.light a:active {
color: #333;
font-weight: bold;
}
.light .dim {
color: rgba(30, 30, 30, 0.5);
}
.page-wrapper {
text-align: center;
}
.inner-wrapper {
display: inline-block;
text-align: left;
white-space: pre;
font-family: 'inconsolata', monospace;
margin: 0 auto;
width: auto;
}
ol {
padding: 0;
line-height: 0.5em;
}
@media screen and (min-width: 700px) {
body, html {
font-size: 18px;
}
}
@media screen and (min-width: 900px) {
body, html {
font-size: 24px;
}
}

View File

@ -5,6 +5,7 @@ cosmic.voyage permit_auth_destination
.thunix.cf permit_auth_destination
.thunix.net permit_auth_destination
.tildeverse.org permit_auth_destination
hmm.st permit_auth_destination
aussies.space permit_auth_destination
circumlunar.space permit_auth_destination
ctrl-c.club permit_auth_destination

View File

@ -5,6 +5,7 @@ cosmic.voyage :
.thunix.cf smtp
.thunix.net smtp
.tildeverse.org smtp
hmm.st smtp
aussies.space smtp
circumlunar.space smtp
ctrl-c.club smtp

View File

@ -11,36 +11,5 @@
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#00a300">
<meta name="theme-color" content="#ffffff">
<!-- I'm sorry you have to see JavaScript on this site, but it's here to
enable a manual dark mode toggle. When dark mode support improves I
can probably remove this again. -->
<script type="text/javascript">
function setMode(mode, val) {
if (val) document.body.classList.add(mode)
else document.body.classList.remove(mode)
Array.from(document.querySelectorAll('a'))
.filter( el => el.href.indexOf('cosmic.voyage') !== -1)
.map( el => {
var url = el.href
var p = url.indexOf('?') !== -1 ? url.substr(url.indexOf('?')) : ''
var baseURL = url.split('?')[0]
const params = new URLSearchParams(p)
if (val) {
params.append(mode, 1)
} else {
params.delete(mode)
}
p = params.toString()
el.href = baseURL + (p ? '?' + p : '')
})
}
window.addEventListener('DOMContentLoaded', function() {
var params = new URLSearchParams(window.location.search)
if (params.has('dark')) {
setMode('dark', true)
} else if (params.has('light')) {
setMode('light', true)
}
})
</script>
<script defer type="text/javascript" src="/scripts.js"></script>
<link rel="stylesheet" href="/styles.css">

View File

@ -1,140 +0,0 @@
<style>
@font-face {
font-family: 'inconsolata';
src: url('/inconsolata-regular-webfont.woff2') format('woff2'),
url('/inconsolata-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
html {
margin: 0;
padding: 0;
}
body {
color: #333;
background-color: #f2f4f4;
background-repeat: repeat;
}
a,
a:visited,
a:hover,
a:active {
color: rgb(62, 231, 123);
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.dim {
color: rgb(62, 231, 123, 0.5);
}
@media (prefers-color-scheme: dark) {
body {
color: rgb(50, 200, 100);
background-color: #010;
background-image: none;
}
a,
a:visited,
a:hover,
a:active {
color: rgb(62, 231, 123);
}
.dim {
color: rgb(62, 231, 123, 0.5);
}
}
@media (prefers-color-scheme: light) {
body {
color: #333;
background-color: #f2f4f4;
background-repeat: repeat;
}
a,
a:visited,
a:hover,
a:active {
color: #333;
font-weight: bold;
}
.dim {
color: rgba(30, 30, 30, 0.5);
}
}
/* Manually toggled dark class on body */
body.dark {
color: rgb(50, 200, 100);
background-color: #010;
background-image: none;
}
.dark a,
.dark a:visited,
.dark a:hover,
.dark a:active {
color: rgb(62, 231, 123);
}
.dark .dim {
color: rgb(62, 231, 123, 0.5);
}
/* Manually toggled light class on body */
body.light {
color: #333;
background-color: #f2f4f4;
background-repeat: repeat;
}
.light a,
.light a:visited,
.light a:hover,
.light a:active {
color: #333;
font-weight: bold;
}
.light .dim {
color: rgba(30, 30, 30, 0.5);
}
.page-wrapper {
text-align: center;
}
.inner-wrapper {
display: inline-block;
text-align: left;
white-space: pre;
font-family: 'inconsolata', monospace;
margin: 0 auto;
width: auto;
}
ol {
padding: 0;
line-height: 0.5em;
}
@media screen and (min-width: 700px) {
body, html {
font-size: 18px;
}
}
@media screen and (min-width: 900px) {
body, html {
font-size: 24px;
}
}
</style>