Skip to content

Commit fdac953

Browse files
monapdxmonapdx
committed
update
1 parent e185a19 commit fdac953

2 files changed

Lines changed: 85 additions & 23 deletions

File tree

‎src/lib/__tests__/publishTemplates.test.js‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { describe, expect, it } from 'vitest'
2-
import { buildPublishTemplateData, renderPostCardHtml } from '../publishTemplates'
2+
import { buildPublishTemplateData, renderPostCardHtml, renderPostPageHtml } from '../publishTemplates'
33
import { replaceTemplateVars as replaceVars } from '../templateVars'
44
import { tryUpdateIndexWithCard, MARKER_START, MARKER_END } from '../blogIndex'
55

@@ -43,6 +43,24 @@ describe('sample post card', () => {
4343
expect(card).toBe(expected)
4444
})
4545

46+
it('renders a full post page with index shell, stylesheet, and home links', () => {
47+
const data = buildPublishTemplateData({
48+
title: SAMPLE.title,
49+
slug: SAMPLE.slug,
50+
excerpt: SAMPLE.excerpt,
51+
category: SAMPLE.category,
52+
categoryClass: SAMPLE.categoryClass,
53+
content: '<p>Body</p>',
54+
})
55+
const page = renderPostPageHtml(data)
56+
expect(page).toContain('<nav class="nb-nav">')
57+
expect(page).toContain('<footer class="nb-section">')
58+
expect(page).toContain('href="../style.css"')
59+
expect(page).toContain('href="../index.html"')
60+
expect(page).toContain('class="nb-card nb-stack-md blog-post"')
61+
expect(page).toContain('<p>Body</p>')
62+
})
63+
4664
it('updates existing card by data-slug instead of duplicating', () => {
4765
const existingSlug = SAMPLE.slug
4866
const oldCard = `<article class="nb-card nb-stack-sm" data-slug="${existingSlug}"><h3>Old</h3></article>`

‎templates/post-page-template.html‎

Lines changed: 66 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,70 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>{{TITLE}}</title>
7-
<meta name="description" content="{{EXCERPT}}" />
8-
<meta name="blog-editor:title" content="{{TITLE}}" />
9-
<meta name="blog-editor:excerpt" content="{{EXCERPT}}" />
10-
<meta name="blog-editor:category" content="{{CATEGORY}}" />
11-
<link rel="stylesheet" href="{{STYLESHEET}}" />
12-
</head>
13-
<body>
14-
<main class="nb-stack-md">
15-
<article class="nb-card nb-stack-md blog-post" data-slug="{{SLUG}}">
16-
<span class="nb-label {{CATEGORY_CLASS}}">{{CATEGORY}}</span>
17-
<h1>{{TITLE}}</h1>
18-
<p class="post-date">{{DATE}}</p>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>{{TITLE}}</title>
7+
<meta name="description" content="{{EXCERPT}}" />
8+
<meta name="blog-editor:title" content="{{TITLE}}" />
9+
<meta name="blog-editor:excerpt" content="{{EXCERPT}}" />
10+
<meta name="blog-editor:category" content="{{CATEGORY}}" />
11+
<link rel="stylesheet" href="../style.css" />
12+
</head>
13+
<body>
14+
<!-- NAV (same shell as blog/index.html) -->
15+
<nav class="nb-nav">
16+
<div class="nb-nav-inner">
17+
<div class="nb-nav-group">
18+
<div class="nb-logo-stack">
19+
<div class="nb-logo-top">BLOG NAME</div>
20+
<div class="nb-logo-bottom">GOES HERE</div>
21+
</div>
22+
</div>
1923

20-
<div class="post-content nb-stack-sm">
21-
{{CONTENT}}
24+
<div class="nb-nav-group">
25+
<a href="../index.html" class="nb-btn">Home</a>
26+
<a href="" class="nb-btn">About</a>
27+
<a href="../index.html" class="nb-btn nb-btn-pink">Blog</a>
28+
<a href="#alerts" class="nb-btn">Help</a>
29+
</div>
2230
</div>
23-
</article>
24-
</main>
25-
</body>
31+
</nav>
32+
33+
<section class="nb-section">
34+
<div class="nb-container">
35+
<article class="nb-card nb-stack-md blog-post" data-slug="{{SLUG}}">
36+
<span class="nb-label {{CATEGORY_CLASS}}">{{CATEGORY}}</span>
37+
<h1>{{TITLE}}</h1>
38+
<p class="post-date">{{DATE}}</p>
39+
40+
<div class="post-content nb-stack-sm">
41+
{{CONTENT}}
42+
</div>
43+
44+
<p class="nb-mt-md">
45+
<a href="../index.html" class="nb-btn nb-btn-green">← Back to blog</a>
46+
</p>
47+
</article>
48+
</div>
49+
</section>
50+
51+
<!-- FOOTER (same shell as blog/index.html) -->
52+
<footer class="nb-section">
53+
<div class="nb-container">
54+
<div class="nb-panel">
55+
<div class="nb-row-between">
56+
<div class="nb-stack-sm">
57+
<p class="nb-mb-0"></p>
58+
</div>
59+
60+
<div class="nb-row">
61+
<a href="" class="nb-btn">GitHub</a>
62+
<a href="" class="nb-btn nb-btn-yellow">Blog Editor</a>
63+
<a href="" class="nb-btn nb-btn-pink">Templates</a>
64+
</div>
65+
</div>
66+
</div>
67+
</div>
68+
</footer>
69+
</body>
2670
</html>

0 commit comments

Comments
 (0)