Merge branch 'env-and-templates' into 'main'

Env and templates

See merge request gaiety/pronoun-monster!1
This commit is contained in:
Angela Quinton 2023-03-12 21:52:32 +00:00
commit 260aa73561
8 changed files with 79 additions and 13 deletions

1
.tool-versions Normal file
View file

@ -0,0 +1 @@
nodejs 19.7.0

10
app.js
View file

@ -14,8 +14,11 @@ app.set('views', './src/views')
app.use(express.static('dist')) app.use(express.static('dist'))
const siteName = "Pronoun Site"
app.get('/', () => { app.get('/', () => {
res.render('home') const pageTitle = siteName;
res.render('home', { siteName, pageTitle } )
}) })
app.get('/:nominative/:accusative/:predicative_possessive/:reflexive', (req, res) => { app.get('/:nominative/:accusative/:predicative_possessive/:reflexive', (req, res) => {
@ -38,8 +41,11 @@ app.get('/:nominative/:accusative/:pronominal_possessive/:predicative_possessive
predicative_possessive: predicativePossessive, predicative_possessive: predicativePossessive,
reflexive, reflexive,
} = req.params } = req.params
const pageTitle = [nominative, accusative, pronominalPossessive, predicativePossessive, reflexive].join("/") + " - " + siteName;
res.render('individual', { res.render('individual', {
nominative, accusative, pronominalPossessive, predicativePossessive, reflexive siteName, pageTitle, nominative, accusative, pronominalPossessive, predicativePossessive, reflexive
}) })
}) })

View file

@ -1,3 +1,35 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
:root {
--background: #F8FAF9; /* Sage/Light/2 */
--callout: #ECEFED; /* Sage/Light/4 */
--stroke: #D7DCDA; /* Sage/Light/7 */
--text-shout: #164430; /* Green/Dark/6 */
--text-murmur: #113123; /* Green/Dark/4 */
}
body {
background-color: var(--background);
color: var(--text-murmur);
font-family: Manrope, 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 500;
}
h1, h2, h3, h4 {
color: var(--text-shout);
font-weight: 700;
}
h1 {
font-family: "Redaction", Georgia, 'Times New Roman', Times, serif;
}
h2 {
font-family: "Redaction 10", Georgia, 'Times New Roman', Times, serif;
}
footer {
border-color: var(--stroke);
}

View file

@ -1,4 +1,3 @@
<div class="container mx-auto my-8"> <h1 class="text-3xl">This is going to be such a cool site!</h1>
<h1 class="text-3xl">This is going to be such a cool site!</h1> <p>Check the readme!</p>
<p>Check the readme!</p>
</div>

View file

@ -1,4 +1 @@
<div class="container mx-auto my-8"> <h1 class="text-5xl lg:text-6xl">{{nominative}}/&#8203;{{accusative}}/&#8203;{{pronominalPossessive}}/&#8203;{{predicativePossessive}}/&#8203;{{reflexive}}</h1>
<h1 class="text-3xl">Individual</h1>
{{nominative}}/{{accusative}}/{{pronominalPossessive}}/{{predicativePossessive}}/{{reflexive}}
</div>

View file

@ -2,10 +2,20 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Example App</title> <title>{{{pageTitle}}}</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.cdnfonts.com/css/redaction">
<link rel="stylesheet" href="/app.css"> <link rel="stylesheet" href="/app.css">
</head> </head>
<body> <body class="min-h-screen flex flex-col">
{{> header siteName=siteName }}
<div class="mx-10 mt-10 mb-[60px] lg:mx-[90px] lg:mt-[90px] xl:mx-[120px] xl:mt-[120px] grow flex flex-col">
<div class="grow flex flex-col">
{{{body}}} {{{body}}}
</div>
{{> footer }}
</div>
</body> </body>
</html> </html>

View file

@ -0,0 +1,18 @@
<footer class="flex-end border-t mt-10 pt-10 lg:flex lg:flex-row lg:justify-between lg:gap-6">
<div>
<h3 class="leading-9 mb-2">Made by monsters</h3>
<ul class="mb-10">
<li><a href="#" class="font-bold">Gaiety</a> who uses fae/faer, she/her</li>
<li><a href="#" class="font-bold">Angela</a> who uses it/its, she/her</li>
<li><a href="#" class="font-bold">Rizzo</a> who uses he/him, they/them, xier/xies</li>
</ul>
</div>
<div class="space-y-2 lg:text-right">
<p>This site has a license of some sort, and that's linked <a href="#" class="font-bold">here.</a></p>
<p>Thanks for visiting!</p>
</div>
</footer>

View file

@ -0,0 +1,3 @@
<div class="p-10 lg:px-[60px]">
<h2 class="text-xl"><a href="/">{{{siteName}}}</a></h2>
</div>