blog: use date-slug url format

[gapry]

No description provided.

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request refactors the blog's URL structure to include the full date (year, month, day) for each post, enhancing URL specificity. This change necessitated updates across the build process to correctly parse and organize post data, modifications to the client-side routing logic to handle the new URL format, and adjustments to how post links are generated throughout the application.

Highlights

• URL Structure Update: Blog post URLs now incorporate the full date (year, month, day) in addition to the slug, changing the format from /year/slug.html to /year/month/day/slug.html.
• Build Process Adjustment: The build.js script was modified to parse individual date components (year, month, day) from markdown filenames and to create nested directories reflecting this new date-based structure for generated post files.
• Client-Side Routing Adaptation: The client-side application (src/App.jsx) was updated to correctly interpret and route based on the new four-part URL structure (year, month, day, slug) when fetching and displaying blog posts.
• Link Generation Modification: The home page (src/Home.jsx) now generates blog post links using the updated year/month/day/slug URL format, ensuring consistency with the new routing.

Changelog

• build.js
  • Refactored date parsing logic to extract year, month, and day into separate properties for each post.
  • Updated the allPosts object to store month and day properties alongside year and slug.
  • Modified the target directory creation for generated posts to include month and day for a more granular file structure.
• src/App.jsx
  • Adjusted the URL path parsing logic to expect four segments (year, month, day, slug) for blog post routes.
  • Updated the post lookup mechanism to match posts based on year, month, day, and slug from the URL.
• src/Home.jsx
  • Modified the href attribute for blog post links to reflect the new year/month/day/slug URL format.
  • Added inline styling to the pagination navigation for improved layout.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[amazon-q-developer]

This PR successfully updates the URL format from /:year/:slug to /:year/:month/:day/:slug. The changes are consistent across all three files (build.js, App.jsx, and Home.jsx).

Critical Issue Found:

• build.js: Missing validation before accessing array indices could cause crashes with malformed filenames

The URL format change is implemented correctly, but the build script needs defensive validation to handle edge cases with improperly named markdown files.

---

You can now have the agent implement changes and create commits directly on your pull request's source branch. Simply comment with /q followed by your request in natural language to ask the agent to make changes.

[amazon-q-developer]

🛑 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;
	}

[gemini-code-assist]

Code Review

This pull request updates the blog's URL structure to a more descriptive date-based format (/YYYY/MM/DD/slug), correctly modifying the build script and React components to handle the new routing. A significant concern is a path traversal vulnerability in the build.js script, which blindly trusts filenames from public/posts and could allow files to be written outside the intended distribution directory. Furthermore, consider adding validation in the build script for malformed post filenames, refactoring for cleaner code, and avoiding inline styles in React components for better maintainability.

[gemini-code-assist]

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('-');

[gemini-code-assist]

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.