Refactor project structure and add new components

- Updated import paths in `projects.astro` for consistency.
- Created `about-experience-item.astro` for displaying experience details.
- Added `post-item.astro` for rendering individual posts with links and formatted dates.
- Introduced `project-item.astro` for showcasing project details with images and links.
- Developed `footer.astro` for consistent footer layout across pages.
- Implemented `header.astro` for navigation with responsive design.
- Added `logo.astro` for branding in the header.
- Created `page-heading.astro` for standardized page headings.
- Developed `related-posts.astro` for displaying related articles.
- Implemented `toc.astro` for table of contents in posts.
- Added UI components: `button.astro`, `formatted-date.astro`, `separator.astro`, `square-line.astro`, `square-lines.astro`, and `square.astro` for consistent styling.
- Created `math-equation.mdx` for writing LaTeX math equations with KaTeX support.

Author: Robert-Stackflow

.vscode/extensions.json

@@ -1,4 +1,4 @@
 {
-	"recommendations": ["astro-build.astro-vscode"],
-	"unwantedRecommendations": []
+  "recommendations": ["astro-build.astro-vscode", "unifiedjs.vscode-mdx"],
+  "unwantedRecommendations": []
 }

src/components/home/posts.astro

@@ -1,10 +1,29 @@
 ---
-import PostItem from "../post-item.astro";
-import Button from "../button.astro";
+import PostItem from "@/components/item/post-item.astro";
+import Button from "@/components/ui/button.astro";
 import { get_feed_posts } from "@/utils/feed";
+import { USE_FEED } from "@/consts";
+import { getCollection } from "astro:content";
 
-const posts = await get_feed_posts();
-var feedUrl = "/rss.xml";
+const allPosts = await getCollection("post");
+
+const { count } = Astro.props;
+
+const sortedPosts = allPosts
+  .map((post) => ({
+    ...post,
+    date: post.data.pubDate,
+  }))
+  .sort((a, b) => b.date.getTime() - a.date.getTime());
+
+const posts = USE_FEED
+  ? await get_feed_posts(3)
+  : sortedPosts.slice(0, count).map((post) => {
+      return {
+        ...(post.data || {}),
+        link: `/post/${post.id}`,
+      };
+    });
 ---
 
 <section class="max-w-5xl mx-auto px-7 lg:px-0">

src/components/home/projects.astro

@@ -1,7 +1,7 @@
 ---
 import projects from "../../collections/projects.json";
-import Button from "../button.astro";
-import Project from "../project.astro";
+import Button from "@/components/ui/button.astro";
+import Project from "@/components/item/project-item.astro";
 ---
 
 <section class="max-w-5xl mx-auto px-7 lg:px-0">

src/components/about-experience.astro …ponents/item/about-experience-item.astrosrc/components/about-experience.astro renamed to src/components/item/about-experience-item.astro src/components/about-experience.astro renamed to src/components/item/about-experience-item.astro

@@ -1,5 +1,5 @@
 ---
-import Logo from "../components/logo.astro";
+import Logo from "@/components/layout/logo.astro";
 ---
 
 <section

src/components/post-item.astro src/components/item/post-item.astrosrc/components/post-item.astro renamed to src/components/item/post-item.astro

@@ -1,6 +1,6 @@
 ---
-import menus from "../collections/menu.json";
-import Logo from "../components/logo.astro";
+import menus from "@/collections/menu.json";
+import Logo from "@/components/layout/logo.astro";
 ---
 
 <!-- This is an invisible div with relative position so that it takes up the height of the menu (because menu is absolute/fixed) -->