Skip to content

Commit 1eee825

Browse files
quantuminformationquantuminformation
committed
feat: add blog section with build script
1 parent 6d72bdc commit 1eee825

File tree

23 files changed

+996
-1
lines changed

23 files changed

+996
-1
lines changed

‎blog/1-lorem-ipsum/index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Understanding Lorem Ipsum</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta property="og:title" content="Understanding Lorem Ipsum" />
8+
<meta
9+
property="og:description"
10+
content="Lorem ipsum is placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content." />
11+
<meta property="og:image" content="/img/nikos.jpg" />
12+
<meta property="og:url" content="/blog/1-lorem-ipsum" />
13+
<meta property="twitter:title" content="Understanding Lorem Ipsum" />
14+
<meta
15+
property="twitter:description"
16+
content="Lorem ipsum is placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content." />
17+
<meta property="twitter:image" content="/img/nikos.jpg" />
18+
<meta property="twitter:url" content="/blog/1-lorem-ipsum" />
19+
<meta name="twitter:card" content="summary_large_image" />
20+
<link rel="icon" href="data:," />
21+
<link
22+
rel="stylesheet"
23+
href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css" />
24+
<link rel="stylesheet" href="/css/reset.css" />
25+
<link rel="stylesheet" href="/css/utility.css" />
26+
<link rel="stylesheet" href="/css/common.css" />
27+
<link rel="stylesheet" href="/css/form.css" />
28+
<link rel="stylesheet" href="/css/button-badge.css" />
29+
<link rel="stylesheet" href="/css/typography.css" />
30+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)" />
31+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)" />
32+
<script src="/js/store.js" defer type="module"></script>
33+
<script src="/js/componentLoader.js" defer type="module"></script>
34+
</head>
35+
<body class="flex flex-col">
36+
<div class="site-container flex flex-col" style="flex: 1">
37+
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
38+
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
39+
<h1 class="blog-title">Understanding Lorem Ipsum</h1>
40+
<p class="minor">Nikos Katsikanis - January 1, 2025</p>
41+
<div class="preview">
42+
<p>
43+
Lorem ipsum is placeholder text commonly used to demonstrate the visual form of a document without
44+
relying on meaningful content.
45+
</p>
46+
</div>
47+
<p>This article explores the history of lorem ipsum and why designers rely on it.</p>
48+
<div data-component="discuss"></div>
49+
</main>
50+
<div class="flex justify-center">
51+
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
52+
Fork me on GitHub
53+
</a>
54+
</div>
55+
</div>
56+
<footer>
57+
<span>Copyright Nikos Katsikanis LTD</span>
58+
<div data-component="theme-switcher"></div>
59+
</footer>
60+
</body>
61+
</html>

‎blog/2-dolor-sit/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Dolor Sit Amet Explained</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta property="og:title" content="Dolor Sit Amet Explained" />
8+
<meta
9+
property="og:description"
10+
content="Dolor sit amet is a familiar phrase that keeps attention on layout rather than meaning." />
11+
<meta property="og:image" content="/img/nikos.jpg" />
12+
<meta property="og:url" content="/blog/2-dolor-sit" />
13+
<meta property="twitter:title" content="Dolor Sit Amet Explained" />
14+
<meta
15+
property="twitter:description"
16+
content="Dolor sit amet is a familiar phrase that keeps attention on layout rather than meaning." />
17+
<meta property="twitter:image" content="/img/nikos.jpg" />
18+
<meta property="twitter:url" content="/blog/2-dolor-sit" />
19+
<meta name="twitter:card" content="summary_large_image" />
20+
<link rel="icon" href="data:," />
21+
<link
22+
rel="stylesheet"
23+
href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css" />
24+
<link rel="stylesheet" href="/css/reset.css" />
25+
<link rel="stylesheet" href="/css/utility.css" />
26+
<link rel="stylesheet" href="/css/common.css" />
27+
<link rel="stylesheet" href="/css/form.css" />
28+
<link rel="stylesheet" href="/css/button-badge.css" />
29+
<link rel="stylesheet" href="/css/typography.css" />
30+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)" />
31+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)" />
32+
<script src="/js/store.js" defer type="module"></script>
33+
<script src="/js/componentLoader.js" defer type="module"></script>
34+
</head>
35+
<body class="flex flex-col">
36+
<div class="site-container flex flex-col" style="flex: 1">
37+
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
38+
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
39+
<h1 class="blog-title">Dolor Sit Amet Explained</h1>
40+
<p class="minor">Nikos Katsikanis - January 2, 2025</p>
41+
<div class="preview">
42+
<p>Dolor sit amet is a familiar phrase that keeps attention on layout rather than meaning.</p>
43+
</div>
44+
<p>Using neutral words lets readers focus on typography, spacing, and overall design.</p>
45+
<div data-component="discuss"></div>
46+
</main>
47+
<div class="flex justify-center">
48+
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
49+
Fork me on GitHub
50+
</a>
51+
</div>
52+
</div>
53+
<footer>
54+
<span>Copyright Nikos Katsikanis LTD</span>
55+
<div data-component="theme-switcher"></div>
56+
</footer>
57+
</body>
58+
</html>

‎blog/3-consectetur/index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Consectetur Adipiscing Tips</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta property="og:title" content="Consectetur Adipiscing Tips" />
8+
<meta
9+
property="og:description"
10+
content="Consectetur adipiscing demonstrates how paragraphs wrap and align within a column." />
11+
<meta property="og:image" content="/img/nikos.jpg" />
12+
<meta property="og:url" content="/blog/3-consectetur" />
13+
<meta property="twitter:title" content="Consectetur Adipiscing Tips" />
14+
<meta
15+
property="twitter:description"
16+
content="Consectetur adipiscing demonstrates how paragraphs wrap and align within a column." />
17+
<meta property="twitter:image" content="/img/nikos.jpg" />
18+
<meta property="twitter:url" content="/blog/3-consectetur" />
19+
<meta name="twitter:card" content="summary_large_image" />
20+
<link rel="icon" href="data:," />
21+
<link
22+
rel="stylesheet"
23+
href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css" />
24+
<link rel="stylesheet" href="/css/reset.css" />
25+
<link rel="stylesheet" href="/css/utility.css" />
26+
<link rel="stylesheet" href="/css/common.css" />
27+
<link rel="stylesheet" href="/css/form.css" />
28+
<link rel="stylesheet" href="/css/button-badge.css" />
29+
<link rel="stylesheet" href="/css/typography.css" />
30+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)" />
31+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)" />
32+
<script src="/js/store.js" defer type="module"></script>
33+
<script src="/js/componentLoader.js" defer type="module"></script>
34+
</head>
35+
<body class="flex flex-col">
36+
<div class="site-container flex flex-col" style="flex: 1">
37+
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
38+
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
39+
<h1 class="blog-title">Consectetur Adipiscing Tips</h1>
40+
<p class="minor">Nikos Katsikanis - January 3, 2025</p>
41+
<div class="preview">
42+
<p>Consectetur adipiscing demonstrates how paragraphs wrap and align within a column.</p>
43+
</div>
44+
<p>Adjust the width of your browser to see how the text responds to different spaces.</p>
45+
<div data-component="discuss"></div>
46+
</main>
47+
<div class="flex justify-center">
48+
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
49+
Fork me on GitHub
50+
</a>
51+
</div>
52+
</div>
53+
<footer>
54+
<span>Copyright Nikos Katsikanis LTD</span>
55+
<div data-component="theme-switcher"></div>
56+
</footer>
57+
</body>
58+
</html>

‎blog/4-adipiscing/index.html‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Sed Do Eiusmod Insights</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta property="og:title" content="Sed Do Eiusmod Insights" />
8+
<meta
9+
property="og:description"
10+
content="Sed do eiusmod tempor incididunt shows how longer phrases feel in a block of text." />
11+
<meta property="og:image" content="/img/nikos.jpg" />
12+
<meta property="og:url" content="/blog/4-adipiscing" />
13+
<meta property="twitter:title" content="Sed Do Eiusmod Insights" />
14+
<meta
15+
property="twitter:description"
16+
content="Sed do eiusmod tempor incididunt shows how longer phrases feel in a block of text." />
17+
<meta property="twitter:image" content="/img/nikos.jpg" />
18+
<meta property="twitter:url" content="/blog/4-adipiscing" />
19+
<meta name="twitter:card" content="summary_large_image" />
20+
<link rel="icon" href="data:," />
21+
<link
22+
rel="stylesheet"
23+
href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css" />
24+
<link rel="stylesheet" href="/css/reset.css" />
25+
<link rel="stylesheet" href="/css/utility.css" />
26+
<link rel="stylesheet" href="/css/common.css" />
27+
<link rel="stylesheet" href="/css/form.css" />
28+
<link rel="stylesheet" href="/css/button-badge.css" />
29+
<link rel="stylesheet" href="/css/typography.css" />
30+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)" />
31+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)" />
32+
<script src="/js/store.js" defer type="module"></script>
33+
<script src="/js/componentLoader.js" defer type="module"></script>
34+
</head>
35+
<body class="flex flex-col">
36+
<div class="site-container flex flex-col" style="flex: 1">
37+
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
38+
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
39+
<h1 class="blog-title">Sed Do Eiusmod Insights</h1>
40+
<p class="minor">Nikos Katsikanis - January 4, 2025</p>
41+
<div class="preview">
42+
<p>Sed do eiusmod tempor incididunt shows how longer phrases feel in a block of text.</p>
43+
</div>
44+
<p>
45+
These sentences are intentionally plain so that emphasis stays on styling rather than narrative.
46+
</p>
47+
<div data-component="discuss"></div>
48+
</main>
49+
<div class="flex justify-center">
50+
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
51+
Fork me on GitHub
52+
</a>
53+
</div>
54+
</div>
55+
<footer>
56+
<span>Copyright Nikos Katsikanis LTD</span>
57+
<div data-component="theme-switcher"></div>
58+
</footer>
59+
</body>
60+
</html>

‎blog/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Blog</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta property="og:title" content="Blog" />
8+
<meta property="og:description" content="Latest posts" />
9+
<meta property="og:image" content="" />
10+
<meta property="og:url" content="/blog" />
11+
<meta property="twitter:title" content="Blog" />
12+
<meta property="twitter:description" content="Latest posts" />
13+
<meta property="twitter:image" content="" />
14+
<meta property="twitter:url" content="/blog" />
15+
<meta name="twitter:card" content="summary" />
16+
<link rel="icon" href="data:," />
17+
<link
18+
rel="stylesheet"
19+
href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css" />
20+
<link rel="stylesheet" href="/css/reset.css" />
21+
<link rel="stylesheet" href="/css/utility.css" />
22+
<link rel="stylesheet" href="/css/common.css" />
23+
<link rel="stylesheet" href="/css/form.css" />
24+
<link rel="stylesheet" href="/css/button-badge.css" />
25+
<link rel="stylesheet" href="/css/typography.css" />
26+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)" />
27+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)" />
28+
<script src="/js/store.js" defer type="module"></script>
29+
<script src="/js/componentLoader.js" defer type="module"></script>
30+
</head>
31+
<body class="flex flex-col">
32+
<div class="site-container flex flex-col" style="flex: 1">
33+
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
34+
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
35+
<div data-component="blog-list"></div>
36+
</main>
37+
<div class="flex justify-center">
38+
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
39+
Fork me on GitHub
40+
</a>
41+
</div>
42+
</div>
43+
<footer>
44+
<span>Copyright Nikos Katsikanis LTD</span>
45+
<div data-component="theme-switcher"></div>
46+
</footer>
47+
</body>
48+
</html>

‎js/assets/socialIconData.js‎

Lines changed: 20 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)