Mirrors/queerallyear
2
0
Fork 0
mirror of https://github.com/lenaschimmel/queerallyear synced 2024-11-10 05:54:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

Modularize website as semi-dynamic

Browse source
This commit is contained in:
Lena Schimmel 2019-06-17 22:32:56 +02:00
parent bec65c0010
commit 1ae9cf96d2
8 changed files with 245 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
node/server/pages.js Normal file
View file

@ -0,0 +1,14 @@
exports.pages = [
{
"name" : "index",
"title" : "Startseite",
"cardtitle" : "Gay for one Day? Queer all Year!",
"description" : "Wir sind nicht nur gay, sondern auch lesbisch, bi, pan, asexuell, trans, polyamor, oder auch einfach: queer. Wir haben nicht immer Grund, fröhlich zu sein. Wir kämpfen nach wie vor um Sichtbarkeit, Anerkennung, Aufklärung und körperliche Selbstbestimmung.",
},
{
"name" : "impressum",
"title" : "Impressum / Datenschutz",
"cardtitle" : "Wer steckt hinter 'Queer all Year'?",
"description" : "Lies unser Impressum und unsere Datenschutzerklärung.",
},
];

60
node/server/server.js
View file

@ -2,16 +2,62 @@
var express = require('express');
var fs = require('fs');
var app = express();
var { pages } = require('./pages.js');
var logo = fs.readFileSync("../../web/img/logo.svg").toString();
logo = logo.substring(logo.indexOf("?>") + 2).replace('id="Ebene_1"', 'id="mainlogo"');
var index = fs.readFileSync("../../web/index.html").toString();
var logo = fs.readFileSync("../../web/img/logo.svg").toString();
logo = logo.substring(logo.indexOf("?>")+2).replace('id="Ebene_1"', 'id="mainlogo"');
var output = index.replace('<img id="mainlogo" src="img/logo.svg" alt="Queer all year">', logo);
var fragments = {};
app.get('/', function (req, res) {
res.send(output);
});
function getNavi(activeName) {
var navi = "";
for (const key in pages) {
if (pages.hasOwnProperty(key)) {
const page = pages[key];
if (page.name == activeName)
navi += '<li><a href="/' + page.name + '.html" class="active">' + page.title + '</a></li>';
else
navi += '<li><a href="/' + page.name + '.html">' + page.title + '</a></li>';
}
}
return navi;
}
function getPageOutput(page) {
const content = fragment(page.name);
const output =
fragment('head')
.replace("$NAVI", getNavi(page.name))
.replace("$TITLE", "Queer All Year - " + page.title)
.replace("$CARDTITLE", page.cardtitle)
.replace("$DESCRIPTION", page.description)
+ content
.replace("$MAINLOGO", logo)
+ fragment('foot');
return output;
}
function fragment(name) {
//if (!fragments[name]) {
fragments[name] = fs.readFileSync("../../web/contents/" + name + ".fragment").toString();
//}
return fragments[name];
}
for (const key in pages) {
if (pages.hasOwnProperty(key)) {
const page = pages[key];
const output = getPageOutput(page)
app.get('/' + page.name + ".html", function (req, res) {
res.send(output);
});
if(page.name == "index") {
app.get('/', function (req, res) {
res.send(output);
});
}
}
}
app.use(express.static('../../web/'));

9
web/contents/foot.fragment Normal file
View file

@ -0,0 +1,9 @@
<script src="js/vendor/modernizr-3.7.1.min.js"></script>
<script src="js/vendor/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="js/plugins.js"></script>
<script src="js/modules.js"></script>
</body>
</html>

36
web/contents/head.fragment Normal file
View file

@ -0,0 +1,36 @@
<!doctype html>
<html class="no-js" lang="" style="background-color: #badbff;">
<head>
<meta charset="utf-8">
<title>$TITLE</title>
<meta name="description" content="Wir sind nicht nur gay for one day, wir sind queer all year!">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@LenaSchimmel">
<meta name="twitter:title" content="$CARDTITLE">
<meta name="twitter:description" content="$DESCRIPTION">
<meta name="twitter:image" content="http://queerallyear.de/img/preview.jpg">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link rel="shortcut icon" type="image/png" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/fonts.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<div id="topbar">
<ul>
$NAVI
</ul>
</div>

38
web/contents/impressum.fragment Normal file
View file

@ -0,0 +1,38 @@
<div class="pagebox">
<div class="innerbox">
<div class="innerinnerbox">
<h1>Datenschutz&shy;erklärung</h1>
<p>Die Nutzung unserer Webseite ist in der Regel ohne Angabe personenbezogener Daten möglich, insbesondere wenn sie diese Seite nur lesen.</p>
<p>Wir weisen darauf hin, dass die Datenübertragung im Internet (z.B. bei der Kommunikation per E-Mail) Sicherheitslücken aufweisen kann. Ein lückenloser Schutz der Daten vor dem Zugriff durch Dritte ist nicht möglich.</p>
<p>Der Nutzung von im Rahmen der Impressumspflicht veröffentlichten Kontaktdaten durch Dritte zur Übersendung von nicht ausdrücklich angeforderter Werbung und Informationsmaterialien wird hiermit ausdrücklich widersprochen. Die Betreiber der Seiten behalten sich ausdrücklich rechtliche Schritte im Falle der unverlangten Zusendung von Werbeinformationen, etwa durch Spam-Mails, vor.</p>
</div>
</div>
<div class="innerbox">
<div class="innerinnerbox">
<h1>Impressum</h1>
<h2>Angaben gemäß § 5 TMG und Verantwortliche für den Inhalt nach § 55 Abs. 2 RStV:</h2>
<ul>
<li>Lena Schimmel</li>
<li>Chemnitzstr. 7</li>
<li>38118 Braunschweig</li>
<li>E-Mail: mail@lenaschimmel.de</li>
</ul>
<h2>Haftung für Inhalte</h2>
<p>Die Inhalte meiner Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann ich jedoch keine Gewähr übernehmen. Als Diensteanbieter bin ich gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG bin ich als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen. Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werde ich diese Inhalte umgehend entfernen.</p>
<h2>Haftung für Links</h2>
<p>Mein Angebot enthält Links zu externen Webseiten Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar. Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werde ich derartige Links umgehend entfernen.</p>
<h2>Urheberrecht</h2>
<p>Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.</p>
</div>
</div>
</div>

40
web/contents/index.fragment Normal file
View file

@ -0,0 +1,40 @@
<div class="screenbox">
<!-- The next line will be replaced with the inlined SVG-file, but don't change it! -->
<img id="shadow" src="img/logo_shadow.svg" alt="Queer all year">
$MAINLOGO
<div id="identity">(Gay)</div>
<div id="arrow"><a href="#" onclick="queer.scrollDown(); return false;">⇣</a></div>
</div>
<div class="screenbox">
<div class="innerbox">
<div class="innerinnerbox">
<h1 id="firstHeading">Wir sind nicht nur gay for one day,<br>wir sind queer all year!</h1>
<p>
Das Sommerlochfestival ist der Braunschweiger <acronym title="Christopher Street Day">CSD</acronym> und findet
jedes Jahr unter
einem anderen Motto statt.
</p>
<p>
Im Jahr 2019 lautet es "Gay for one Day". <a
href="https://www.csd-braunschweig.de/mach-mit/sei-gay-for-one-day/">Die CSD-Orga sagt selbst</a>:
</p>
<p class="moneyquote">
„Über unser Motto lässt sich streiten. Und genau das möchten wir.“
</p>
<p>
Wir nehmen diese Einladung gerne an.
</p>
<p>
Denn wir sind nicht nur gay, sondern auch lesbisch, bi, pan, asexuell,
trans, polyamor, oder auch einfach: queer.
</p>
<p>
Wir haben nicht immer Grund, fröhlich zu sein. Wir kämpfen nach wie vor um Sichtbarkeit, Anerkennung,
Aufklärung und körperliche Selbstbestimmung.
</p>
<p>
An jedem einzelnen Tag. Das ganze Jahr.
</p>
</div>
</div>
</div>

55
web/css/main.css
View file

@ -204,13 +204,25 @@ textarea {
.screenbox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100%;
width: 100%;
}
.pagebox {
margin-top: 5em;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.innerbox {
display: block;
width: 42em;
max-width: 75%;
background-color: #D2E8FF;
@ -249,11 +261,54 @@ textarea {
font-size: 1.6em;
}
#topbar {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
#topbar ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #D2E8FF;
}
#topbar li {
float: left;
}
#topbar li a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
color: black;
}
#topbar li a:visited {
color: black;
}
#topbar li a.active {
font-weight: 600;
background-color: #badbff;
background-image: url(../img/back.jpg);
}
#topbar li a:hover {
background-color: white;
}
#arrow a {
text-decoration: none;
}
#arrow a:visited {
color: black;
}

78
web/index.html
View file

@ -1,78 +0,0 @@
<!doctype html>
<html class="no-js" lang="" style="background-color: #badbff;">
<head>
<meta charset="utf-8">
<title>Queer all year</title>
<meta name="description" content="Wir sind nicht nur gay for one day, wir sind queer all year!">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@LenaSchimmel">
<meta name="twitter:title" content="Gay for one Day? Queer all Year!">
<meta name="twitter:description" content="Wir sind nicht nur gay, sondern auch lesbisch, bi, pan, asexuell, trans, polyamor, oder auch einfach: queer. Wir haben nicht immer Grund, fröhlich zu sein. Wir kämpfen nach wie vor um Sichtbarkeit, Anerkennung, Aufklärung und körperliche Selbstbestimmung.">
<meta name="twitter:image" content="http://queerallyear.de/img/preview.jpg">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<link rel="shortcut icon" type="image/png" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/fonts.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--[if IE]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<div class="screenbox">
<!-- The next line will be replaced with the inlined SVG-file, but don't change it! -->
<img id="shadow" src="img/logo_shadow.svg" alt="Queer all year">
<img id="mainlogo" src="img/logo.svg" alt="Queer all year">
<div id="identity">(Gay)</div>
<div id="arrow"><a href="#" onclick="queer.scrollDown(); return false;">⇣</a></div>
</div>
<div class="screenbox">
<div class="innerbox">
<div class="innerinnerbox">
<h1 id="firstHeading">Wir sind nicht nur gay for one day,<br>wir sind queer all year!</h1>
<p>
Das Sommerlochfestival ist der Braunschweiger <acronym title="Christopher Street Day">CSD</acronym> und findet jedes Jahr unter
einem anderen Motto statt.
</p>
<p>
Im Jahr 2019 lautet es "Gay for one Day". <a
href="https://www.csd-braunschweig.de/mach-mit/sei-gay-for-one-day/">Die CSD-Orga sagt selbst</a>:
</p>
<p class="moneyquote">
„Über unser Motto lässt sich streiten. Und genau das möchten wir.“
</p>
<p>
Wir nehmen diese Einladung gerne an.
</p>
<p>
Denn wir sind nicht nur gay, sondern auch lesbisch, bi, pan, asexuell,
trans, polyamor, oder auch einfach: queer.
</p>
<p>
Wir haben nicht immer Grund, fröhlich zu sein. Wir kämpfen nach wie vor um Sichtbarkeit, Anerkennung,
Aufklärung und körperliche Selbstbestimmung.
</p>
<p>
An jedem einzelnen Tag.
</p>
</div>
</div>
</div>
<script src="js/vendor/modernizr-3.7.1.min.js"></script>
<script src="js/vendor/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="js/plugins.js"></script>
<script src="js/modules.js"></script>
</body>
</html>