qwik/qwik-site
qwik/qwik-site
2
1
Fork 1
Code Issues Pull Requests Releases Activity

Please comply XHTML uwu

Browse Source
This commit is contained in:
kiw-q 2022-08-13 17:16:25 +02:00
parent 88f8e86bb0
commit 62b7b698b9
14 changed files with 80 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/article.css
View File

@ -5,12 +5,12 @@ article {
grid-template-rows: repeat(3, auto); grid-template-rows: repeat(3, auto);
} }
article > header { article > #header {
grid-area: header; grid-area: header;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
article > header > i { article > #header > i {
color: var(--accent); color: var(--accent);
display: block; display: block;
font-size: 1rem; font-size: 1rem;

20
assets/css/landing.css
View File

@ -2,24 +2,24 @@ body {
width: min(95vw, 52rem); width: min(95vw, 52rem);
} }
header > img { #header > img {
height: 15vh; height: 15vh;
margin: .5rem auto; margin: .5rem auto;
box-shadow: none; box-shadow: none;
} }
header > h1, #header > h1,
header > p { #header > p {
margin-top: 0; margin-top: 0;
font-family: 'Manrope XLight'; font-family: 'Manrope XLight';
color: var(--text); color: var(--text);
} }
header > h1 > span { #header > h1 > span {
font: inherit; font: inherit;
} }
nav { #nav {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
@ -28,7 +28,7 @@ nav {
width: 100%; width: 100%;
} }
nav > a { #nav > a {
color: var(--text); color: var(--text);
border-bottom: .05rem solid var(--text); border-bottom: .05rem solid var(--text);
@ -41,7 +41,7 @@ nav > a {
transition: color .3s, border-bottom .3s, padding .3s; transition: color .3s, border-bottom .3s, padding .3s;
} }
nav > a:hover { #nav > a:hover {
color: var(--primary); color: var(--primary);
border-bottom: .05rem solid var(--primary); border-bottom: .05rem solid var(--primary);
} }
@ -177,7 +177,7 @@ nav > a:hover {
color: var(--accent); color: var(--accent);
} }
footer { #footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -190,8 +190,8 @@ footer {
border-top: .1rem solid var(--accent); border-top: .1rem solid var(--accent);
} }
footer > p, #footer > p,
footer > p > a { #footer > p > a {
font-size: .65rem; font-size: .65rem;
} }

2
assets/css/theme.css
View File

@ -26,7 +26,7 @@ body {
color: var(--text); color: var(--text);
} }
header { #header {
color: var(--primary); color: var(--primary);
font-size: 3rem; font-size: 3rem;
text-align: center; text-align: center;

10
content/pages/articles.njk
View File

@ -1,14 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
<head> <head>
{% include "templates/defaultTags.njk" %} {% include "templates/defaultTags.njk" %}
<link rel="stylesheet" type="text/css" href="/assets/css/sitemap.css"> <link rel="stylesheet" type="text/css" href="/assets/css/sitemap.css" />
<title>Site Map</title> <title>Site Map</title>
</head> </head>
<body> <body>
<header> <div id="header">
All Articles All Articles
</header> </div>
<p class="centered"> <p class="centered">
Here's a list of all articles: Here's a list of all articles:
</p> </p>

4
content/pages/articles/graphical-profile/colours.njk
View File

@ -3,12 +3,12 @@
{% import "components/color.njk" as color with context %} {% import "components/color.njk" as color with context %}
{% block head %} {% block head %}
<link rel="stylesheet" type="text/css" href="/assets/css/graphical-profile.css"> <link rel="stylesheet" type="text/css" href="/assets/css/graphical-profile.css" />
<title>qwik - colours</title> <title>qwik - colours</title>
{% endblock %} {% endblock %}
{% block header %} {% block header %}
<img src="/assets/images/design-colors-showcase.svg" alt="A promotional image for our colour scheme."> <img src="/assets/images/design-colors-showcase.svg" alt="A promotional image for our colour scheme." />
Colours Colours
<i>Last updated 10th August 2021</i> <i>Last updated 10th August 2021</i>
{% endblock %} {% endblock %}

2
content/pages/articles/graphical-profile/intro.njk
View File

@ -6,7 +6,7 @@
{% endblock %} {% endblock %}
{% block header %} {% block header %}
<img src="/assets/images/design-res-promo.svg" alt="A promotional image for our graphical resources."> <img src="/assets/images/design-res-promo.svg" alt="A promotional image for our graphical resources." />
Graphical Resources Graphical Resources
<i>Last updated 10th August 2021</i> <i>Last updated 10th August 2021</i>
{% endblock %} {% endblock %}

38
content/pages/index.njk
View File

@ -1,8 +1,8 @@
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
<head> <head>
{% include "templates/defaultTags.njk" %} {% include "templates/defaultTags.njk" %}
<link rel="stylesheet" type="text/css" href="/assets/css/landing.css"> <link rel="stylesheet" type="text/css" href="/assets/css/landing.css" />
<title>qwik</title> <title>qwik</title>
</head> </head>
<body> <body>
@ -27,24 +27,26 @@
</p> </p>
</div> #} </div> #}
<header> <div id="header">
<img class="logo" src="/assets/images/logo.svg" alt="qwik logo"> <img class="logo" src="/assets/images/logo.svg" alt="qwik logo" />
<h1> <h1>
Welcome to <span style="color: var(--primary)">qwik</span><span style="color: var(--accent)">.</span><span style="color: var(--primary)">space</span>! Welcome to <span style="color: var(--primary)">qwik</span><span style="color: var(--accent)">.</span><span style="color: var(--primary)">space</span>!
</h1> </h1>
<p> <p>
"A comfy little corner of the internet..." "A comfy little corner of the internet..."
</p> </p>
<nav> <div id="nav">
<a href="#toolbox">TOOLBOX</a> <a href="#toolbox">TOOLBOX</a>
<a href="#services">SERVICES</a> <a href="#services">SERVICES</a>
<a href="#contact">CONTACT</a> <a href="#contact">CONTACT</a>
</nav> </div>
</header> </div>
<a name="toolbox"></a>
<div class="box"> <div class="box">
<h1>TOOLBOX</h1> <h1>
<a id="toolbox"></a>
TOOLBOX
</h1>
<div class="card"> <div class="card">
<h2>Nitter</h2> <h2>Nitter</h2>
@ -81,9 +83,11 @@
<div class="separator"></div> <div class="separator"></div>
<a name="services"></a>
<div class="box"> <div class="box">
<h1>SERVICES</h1> <h1>
<a id="services"></a>
SERVICES
</h1>
<p> <p>
These services requires an account, which you can create <a href="https://qam.qwik.space">here</a>. These services requires an account, which you can create <a href="https://qam.qwik.space">here</a>.
</p> </p>
@ -132,9 +136,11 @@
<div class="separator"></div> <div class="separator"></div>
<a name="contact"></a>
<div class="box"> <div class="box">
<h1>CONTACT</h1> <h1>
<a id="contact"></a>
CONTACT
</h1>
<p> <p>
If you have any questions, feedback, ideas, or anything else, feel free to contact us. If you have any questions, feedback, ideas, or anything else, feel free to contact us.
</p> </p>
@ -156,7 +162,7 @@
</div> </div>
</div> </div>
<footer> <div id="footer">
<p class="love"> <p class="love">
Made with <span class="heart">&nbsp; &lt;3 &nbsp;</span> by team qwik! Made with <span class="heart">&nbsp; &lt;3 &nbsp;</span> by team qwik!
</p> </p>
@ -188,6 +194,6 @@
<p> <p>
Coming soon... Coming soon...
</p> </p>
</footer> </div>
</body> </body>
</html> </html>

12
content/templates/article.njk
View File

@ -1,18 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
<head> <head>
{% include "./defaultTags.njk" %} {% include "./defaultTags.njk" %}
<link rel="stylesheet" href="/assets/css/article.css"> <link rel="stylesheet" href="/assets/css/article.css" />
<link rel="stylesheet" href="/assets/css/syntax.css"> <link rel="stylesheet" href="/assets/css/syntax.css" />
{% block head %} {% block head %}
<title>{{ serverName }}</title> <title>{{ serverName }}</title>
{% endblock %} {% endblock %}
</head> </head>
<body> <body>
<article> <article>
<header> <div id="header">
{% block header %}{% endblock %} {% block header %}{% endblock %}
</header> </div>
<div class="toc-container"> <div class="toc-container">
<div class="toc"> <div class="toc">

12
content/templates/article_md.njk
View File

@ -1,18 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
<head> <head>
{% include "./defaultTags.njk" %} {% include "./defaultTags.njk" %}
<link rel="stylesheet" href="/assets/css/article.css"> <link rel="stylesheet" href="/assets/css/article.css" />
<link rel="stylesheet" href="/assets/css/syntax.css"> <link rel="stylesheet" href="/assets/css/syntax.css" />
{% block head %} {% block head %}
<title>{{ serverName }}</title> <title>{{ serverName }}</title>
{% endblock %} {% endblock %}
</head> </head>
<body> <body>
<article> <article>
<header> <div id="header">
{% block header %}{% endblock %} {% block header %}{% endblock %}
</header> </div>
<div class="toc-container"> <div class="toc-container">
<div class="toc"> <div class="toc">

30
content/templates/defaultTags.njk
View File

@ -1,17 +1,17 @@
<meta charset="UTF-8"> <meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png" />
<link rel="manifest" href="/assets/favicons/site.webmanifest"> <link rel="manifest" href="/assets/favicons/site.webmanifest" />
<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#3ddf89"> <link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#3ddf89" />
<link rel="shortcut icon" href="/assets/favicons/favicon.ico"> <link rel="shortcut icon" href="/assets/favicons/favicon.ico" />
<meta name="msapplication-TileColor" content="#181833"> <meta name="msapplication-TileColor" content="#181833" />
<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml"> <meta name="msapplication-config" content="/assets/favicons/browserconfig.xml" />
<meta name="theme-color" content="#3ddf89"> <meta name="theme-color" content="#3ddf89" />
<link rel="stylesheet" type="text/css" href="/assets/css/scaling.css"> <link rel="stylesheet" type="text/css" href="/assets/css/scaling.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/colors.css"> <link rel="stylesheet" type="text/css" href="/assets/css/colors.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/fonts.css"> <link rel="stylesheet" type="text/css" href="/assets/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/assets/css/theme.css"> <link rel="stylesheet" type="text/css" href="/assets/css/theme.css" />

12
content/templates/external_md.njk
View File

@ -1,17 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xml:lang="en">
<head> <head>
{% include "templates/defaultTags.njk" %} {% include "templates/defaultTags.njk" %}
<link rel="stylesheet" href="/assets/css/article.css"> <link rel="stylesheet" href="/assets/css/article.css" />
<link rel="stylesheet" href="/assets/css/syntax.css"> <link rel="stylesheet" href="/assets/css/syntax.css" />
<title>{{ externalMeta.title if externalMeta.title else serverName }}</title> <title>{{ externalMeta.title if externalMeta.title else serverName }}</title>
</head> </head>
<body> <body>
<article> <article>
<header> <div id="header">
{{ externalMeta.header }} {{ externalMeta.header }}
<i>{{ externalMeta.date }}</i> <i>{{ externalMeta.date }}</i>
</header> </div>
<div class="toc-container"> <div class="toc-container">
<div class="toc"> <div class="toc">

2
libs/generateContext.js
View File

@ -11,7 +11,7 @@ function generateToc(dom) {
// Generate links to lead to those anvhors. // Generate links to lead to those anvhors.
let tocLinks = [] let tocLinks = []
tocAnchors.forEach(anchor => tocLinks.push(`<a href="#${anchor.name}" class="${anchor.classList[1].replace("-anchor", "")}">${anchor.getAttribute('data-orig-text')}</a>`)) tocAnchors.forEach(anchor => tocLinks.push(`<a href="#${anchor.id}" class="${anchor.classList[1].replace("-anchor", "")}">${anchor.getAttribute('data-orig-text')}</a>`))
return tocLinks return tocLinks
} }

2
libs/markedRenderer.js
View File

@ -4,7 +4,7 @@ export const markedRenderer = {
// Rendering of headings (add an anchor above all headings). // Rendering of headings (add an anchor above all headings).
heading(text, level) { heading(text, level) {
return ` return `
<a name="${text.replace(/\s/g, "-")}" data-orig-text="${text}" class="toc-anchor toc-anchor-h${level}"></a> <a id="${text.replace(/\s/g, "-")}" data-orig-text="${text}" class="toc-anchor toc-anchor-h${level}"></a>
<h${level}> <h${level}>
${text} ${text}
</h${level}> </h${level}>

3
libs/nunjucksConfig.js
View File

@ -23,7 +23,8 @@ export function nunjacksConfig(njk, express, Config) {
// Configure marked (markdown parser) // Configure marked (markdown parser)
marked.use({ marked.use({
gfm: true, // Use GitHub formatting? gfm: true, // Use GitHub formatting?
renderer: markedRenderer // Use my own custom rendering for som tags renderer: markedRenderer, // Use my own custom rendering for som tags
xhtml: true // Use XHTML for extra GAINZ!
}) })
// Let nunjucks use markdown. // Let nunjucks use markdown.