Skip to content

Commit 3190eca

Browse files
quantuminformationquantuminformation
committed
Add news-tagged blog post
1 parent 27551b3 commit 3190eca

File tree

3 files changed

+102
-0
lines changed

3 files changed

+102
-0
lines changed

‎blog/5-breaking-news/index.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Vanilla JS Patterns Release News</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta property="og:title" content="Vanilla JS Patterns Release News">
8+
<meta property="og:description" content="This brief news update highlights recent changes in the Vanilla JS Patterns project.">
9+
<meta property="og:image" content="/img/nikos.jpg">
10+
<meta property="og:url" content="/blog/5-breaking-news">
11+
<meta property="twitter:title" content="Vanilla JS Patterns Release News">
12+
<meta property="twitter:description" content="This brief news update highlights recent changes in the Vanilla JS Patterns project.">
13+
<meta property="twitter:image" content="/img/nikos.jpg">
14+
<meta property="twitter:url" content="/blog/5-breaking-news">
15+
<meta name="twitter:card" content="summary_large_image">
16+
<link rel="icon" href="data:,">
17+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/2.0.0/modern-normalize.min.css">
18+
<link rel="stylesheet" href="/css/reset.css">
19+
<link rel="stylesheet" href="/css/utility.css">
20+
<link rel="stylesheet" href="/css/common.css">
21+
<link rel="stylesheet" href="/css/form.css">
22+
<link rel="stylesheet" href="/css/button-badge.css">
23+
<link rel="stylesheet" href="/css/typography.css">
24+
<link rel="stylesheet" href="/css/light.css" media="(prefers-color-scheme: light)">
25+
<link rel="stylesheet" href="/css/dark.css" media="(prefers-color-scheme: dark)">
26+
<script src="/js/store.js" defer type="module"></script>
27+
<script src="/js/componentLoader.js" defer type="module"></script>
28+
</head>
29+
<body class="flex flex-col">
30+
<div class="site-container flex flex-col" style="flex: 1">
31+
<nav data-component="nav" data-header-bar="true" data-burger-px="400"></nav>
32+
<main data-component="router" style="padding: 1rem; width: 100%; flex: 1">
33+
34+
<h1 class="blog-title">Vanilla JS Patterns Release News</h1>
35+
<p class="minor">Nikos Katsikanis - May 1, 2025</p>
36+
<div class="preview">
37+
<p>This brief news update highlights recent changes in the Vanilla JS Patterns project.</p>
38+
</div>
39+
<p>More details will follow as the project evolves and new features are introduced.</p>
40+
<div data-component="discuss"></div>
41+
42+
</main>
43+
<div class="flex justify-center">
44+
<a href="https://github.com/quantuminformation/vanillajs-patterns" target="_blank">
45+
Fork me on GitHub
46+
</a>
47+
</div>
48+
</div>
49+
<footer>
50+
<span>Copyright Nikos Katsikanis LTD</span>
51+
<div data-component="theme-switcher"></div>
52+
</footer>
53+
</body>
54+
</html>

‎js/routes/blog/5-breaking-news.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { NEWS } from './tags.js';
2+
import postNav from '../../components/post-nav.js';
3+
import blogSubscribe from '../../components/blog-subscribe.js';
4+
import shareButtons from '../../components/share-buttons.js';
5+
import updateMeta from '../../components/update-meta.js';
6+
import canonicalUrl from '../../utils/canonicalUrl.js';
7+
8+
export const date = new Date('2025-05-01');
9+
export const dateText = date.toLocaleDateString(undefined, {
10+
year: 'numeric',
11+
month: 'long',
12+
day: 'numeric',
13+
});
14+
export const author = 'Nikos Katsikanis';
15+
export const tags = [NEWS];
16+
17+
export const content = `
18+
<h1 class="blog-title">Vanilla JS Patterns Release News</h1>
19+
<p class="minor">${author} - ${dateText}</p>
20+
<div class="preview">
21+
<p>This brief news update highlights recent changes in the Vanilla JS Patterns project.</p>
22+
</div>
23+
<p>More details will follow as the project evolves and new features are introduced.</p>
24+
<div data-component="discuss"></div>
25+
`;
26+
27+
export default (hostComponent) => {
28+
hostComponent.innerHTML = content;
29+
const discuss = hostComponent.querySelector('div[data-component="discuss"]');
30+
hostComponent.insertBefore(shareButtons('Vanilla JS Patterns Release News'), discuss);
31+
hostComponent.insertBefore(postNav('/blog/5-breaking-news'), discuss);
32+
blogSubscribe(hostComponent);
33+
const firstImg = hostComponent.querySelector('img')?.src || new URL('/img/nikos.jpg', location.origin).href;
34+
const previewText =
35+
hostComponent.querySelector('.preview')?.textContent.trim().split(/\s+/).slice(0, 30).join(' ') || '';
36+
updateMeta({
37+
title: 'Vanilla JS Patterns Release News',
38+
description: previewText,
39+
image: firstImg,
40+
url: canonicalUrl(),
41+
author,
42+
});
43+
};

‎js/routes/blog/posts.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,9 @@ export const POSTS = [
1919
url: '/blog/4-adipiscing',
2020
author: 'Nikos Katsikanis',
2121
},
22+
{
23+
title: 'Vanilla JS Patterns Release News',
24+
url: '/blog/5-breaking-news',
25+
author: 'Nikos Katsikanis',
26+
},
2227
];

0 commit comments

Comments
 (0)