13 design frontend

[MicRaj]

No description provided.

[Copilot]

Pull Request Overview

This PR implements a redesigned frontend for the blog application, transitioning from a simple editor-focused interface to a modern, multi-section layout with enhanced navigation and styling. The changes include new routing structure, improved component organization, and updated API endpoints.

• Replaces the simple post editor interface with a comprehensive home page featuring welcome, projects, and about sections
• Introduces new routing structure with individual post pages and dedicated editor page
• Updates API endpoints from localhost URLs to relative paths and adds slug-based post retrieval

Reviewed Changes

Copilot reviewed 12 out of 16 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
frontend/svelte.config.js	Refactors export structure for better maintainability
frontend/src/routes/posts/[slug]/+page.svelte	Adds individual post view page with slug-based routing
frontend/src/routes/post-editor/+page.svelte	Creates dedicated post editor page
frontend/src/routes/old/+page.svelte	Preserves old design implementation
frontend/src/routes/+page.svelte	Implements new home page with animated sections
frontend/src/lib/components/SideBar.svelte	Adds navigation sidebar with section tracking
frontend/src/lib/components/PostList.svelte	Updates API endpoint to relative path
frontend/src/lib/components/PostGrid.svelte	Creates new post grid component for projects section
frontend/src/lib/components/PostEditor.svelte	Updates API endpoint to relative path
frontend/src/app.html	Adds Google Fonts import for Space Grotesk
frontend/package.json	Updates SvelteJS dependencies
backend/app/api/data.py	Adds slug-based post retrieval endpoint

Files not reviewed (1)

• frontend/package-lock.json: Language not supported

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The CSS calc expression is missing spaces around the operator. It should be calc(100% - 2px) to be valid CSS.

Suggested change

	width: calc(100% -2px);
	width: calc(100% - 2px);

[Copilot]

The CSS calc expression is missing spaces around the operator. It should be calc(100% - 2px) to be valid CSS.

Suggested change

	width: calc(100% -2px);
	width: calc(100% - 2px);

[Copilot]

The blogs1 array contains extensive duplicated data with only the 'Macropad' and 'Self-hosted website' entries repeated multiple times. This should be replaced with a more maintainable approach, such as generating the array programmatically or using actual dynamic data.