Skip to content

blog: use date-slug url format #40

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gapry merged 1 commit into from
Mar 5, 2026
Merged

blog: use date-slug url format #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 10 additions & 5 deletions build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +14,20 @@ years.forEach(year => {
if (file.endsWith('.md')) {
const fileName = file.replace('.md', '');
const parts = fileName.split('-');
const date = parts.slice(0, 3).join('-');

const y = parts[0];
const m = parts[1];
const d = parts[2];
const slug = parts.slice(3).join('-');
Comment on lines +18 to 21
Copy link

@amazon-q-developer amazon-q-developer bot Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛑 Logic Error: Accessing array indices without validation will crash when filename format is invalid. If a markdown file doesn't follow the expected YYYY-MM-DD-slug.md format (e.g., incomplete.md or 2024-01.md), accessing parts[0], parts[1], or parts[2] will return undefined, causing the build to produce invalid data or fail.

Suggested change
const y = parts[0];
const m = parts[1];
const d = parts[2];
const slug = parts.slice(3).join('-');
const y = parts[0];
const m = parts[1];
const d = parts[2];
const slug = parts.slice(3).join('-');
if (!y || !m || !d || !slug) {
console.warn(`⚠️ Skipping invalid file format: ${file}`);
return;
}

Comment on lines 16 to 21
Copy link

@gemini-code-assist gemini-code-assist bot Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

The current implementation is vulnerable to malformed filenames (e.g., without a date or slug), which could lead to undefined values and break the build. It's good practice to validate the filename format to make the script more robust. Additionally, you can use array destructuring with a rest parameter to make parsing the filename parts cleaner and more readable.

        const parts = fileName.split('-');

        if (parts.length < 4) {
          console.warn(`[!] Skipping post with invalid filename format: ${file}`);
          return;
        }

        const [y, m, d, ...slugParts] = parts;
        const slug = slugParts.join('-');


allPosts.push({
year,
date,
year: y,
month: m,
day: d,
slug,
originalName: fileName,
title: slug.replace(/-/g, ' ')
title: slug.replace(/-/g, ' '),
date: `${y}-${m}-${d}`
});
}
});
Expand All @@ -38,7 +43,7 @@ if (fs.existsSync(path.join(distDir, 'index.html'))) {
fs.writeFileSync(path.join(distDir, 'posts.json'), postsData);

allPosts.forEach(post => {
const targetDir = path.join(distDir, post.year);
const targetDir = path.join(distDir, post.year, post.month, post.day);
if (!fs.existsSync(targetDir)) {
fs.mkdirSync(targetDir, { recursive: true });
}
Expand Down
14 changes: 10 additions & 4 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function App() {
.then(res => res.json())
.then(data => {
setPosts(data);

const pathClean = currentPath.replace(/\.html$/, '');
const parts = pathClean.split('/').filter(Boolean);

Expand All @@ -31,9 +31,15 @@ export default function App() {
return;
}

if (parts.length === 2) {
const [year, slug] = parts;
const found = data.find(p => p.year === year && p.slug === slug);
if (parts.length === 4) {
const [year, month, day, slug] = parts;

const found = data.find(p =>
p.year === year &&
p.month === month &&
p.day === day &&
p.slug === slug
);

if (found) {
fetch(`/posts/${year}/${found.originalName}.md`)
Expand Down
4 changes: 2 additions & 2 deletions src/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ export default function Home({ posts }) {
{currentPosts.map(post => (
<li key={post.originalName} className="post-item">
<span className="post-date">{post.date}</span>
<a href={`/${post.year}/${post.slug}.html`} className="post-link">
<a href={`/${post.year}/${post.month}/${post.day}/${post.slug}.html`} className="post-link">
{post.title}
</a>
</li>
))}
</ul>

<nav className="pagination">
<nav className="pagination" style={{ display: 'flex', gap: '10px', marginTop: '20px' }}>
Copy link

@gemini-code-assist gemini-code-assist bot Mar 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

It's generally better to avoid inline styles for maintainability and separation of concerns. Since you are using CSS classes elsewhere in the component, it would be more consistent to move these styles to a CSS class in your stylesheet.

{hasPrev && (
<button onClick={() => setCurrentPage(p => p - 1)}>← Newer</button>
)}
Expand Down
Loading