Merge pull request #12 from Vortex-Linux/Navbar

Website V2

astro.config.mjs

@@ -7,5 +7,12 @@ import sitemap from "@astrojs/sitemap";
 // https://astro.build/config
 export default defineConfig({
   site: "https://vortexlinux.org",
-  integrations: [icon()],
+  integrations: [
+    icon({
+      include: {
+        mdi: ["*"],
+      },
+    }),
+    sitemap(),
+  ],
 });

package.json

@@ -16,6 +16,7 @@
     "@iconify-json/mdi": "^1.2.1",
     "astro": "^4.15.11",
     "astro-icon": "^1.1.1",
+    "signal-exit": "^4.1.0",
     "solid-js": "^1.8.21"
   }
 }

src/components/BlogPostCard.astro

@@ -0,0 +1,29 @@
+---
+import { Image } from "astro:assets";
+import FormattedDate from "./FormattedDate.astro";
+
+const { post } = Astro.props;
+---
+
+<article class="blog-card">
+  <a href={`/blog/${post.slug}/`}>
+    <div class="blog-card-image">
+      <Image
+        src={post.data.heroImage}
+        alt={post.data.title}
+        width={400}
+        height={250}
+        format="webp"
+        quality={80}
+        class="w-full h-[250px] object-cover"
+      />
+    </div>
+    <div class="blog-card-content">
+      <h3>{post.data.title}</h3>
+      <p class="date">
+        <FormattedDate date={post.data.pubDate} />
+      </p>
+      <p class="description">{post.data.description}</p>
+    </div>
+  </a>
+</article>

src/components/BlogSlider.astro

@@ -1,23 +1,35 @@
 ---
-import { getCollection } from 'astro:content';
-import FormattedDate from '../components/FormattedDate.astro';
-import '../styles/BlogSlider.css';
+import { getCollection } from "astro:content";
+import FormattedDate from "../components/FormattedDate.astro";
+import "../styles/BlogSlider.css";
 
-const posts = (await getCollection('blog'))
+const posts = (await getCollection("blog"))
   .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
-  .slice(0, 4);
+  .slice(0, 2);
 ---
 
-<section class="blog-preview-section">
-  <h2>Latest Blog Posts</h2>
-  <div class="blog-cards">
-    {posts.map((post) => (
-      <div class="blog-card">
-        <p class="blog-date"><FormattedDate date={post.data.pubDate} /> </p>
-        <a href={`/blog/${post.slug}/`} class="read-more"> 
-          <h3 class="blog-title">{post.data.title}</h3>
-          Read More</a>
-      </div>
-    ))}
+<section class="latest-blogs">
+  <h2>Latest Blogs</h2>
+  <div class="blog-grid">
+    {
+      posts.map((post) => (
+        <div class="blog-card">
+          <div class="blog-image-container">
+            {post.data.heroImage && (
+              <img src={post.data.heroImage} alt={post.data.title} />
+            )}
+          </div>
+          <div class="blog-content">
+            <h3 class="blog-title">{post.data.title}</h3>
+            <p class="blog-date">
+              <FormattedDate date={post.data.pubDate} />
+            </p>
+            <a href={`/blog/${post.slug}/`} class="read-more">
+              Read More
+            </a>
+          </div>
+        </div>
+      ))
+    }
   </div>
 </section>

src/components/CallToAction.astro

@@ -1,13 +1,15 @@
 ---
-import '../styles/CallToAction.css';
+import "../styles/CallToAction.css";
 ---
 
-<section class="cta-section">
-    <div class="cta-content">
-        <h2>Are you ready?</h2>
-        <div class="cta-buttons">
-            <a href="/download" class="cta-button download-button">Download</a>
-            <a href="/blog/get-involved" class="cta-button involved-button">Get Involved</a>
-        </div>
+<section class="cta">
+  <div class="cta-content">
+    <h2>Are you ready? Let's get started!</h2>
+    <div class="cta-buttons">
+      <a href="/download" class="cta-button download">Download</a>
+      <a href="/blog/get-involved" class="cta-button get-involved"
+        >Get Involved</a
+      >
     </div>
+  </div>
 </section>

src/components/CommunityLinks.astro

@@ -1,12 +1,24 @@
 ---
-import { socialLinks } from '../content/data/community-links';
-import '../styles/IconLinks.css';
+import { communityLinks } from "../content/data/community-links";
+import "../styles/IconLinks.css";
+import { Icon } from "astro-icon/components";
 ---
+
 <div class="social-links">
-  {socialLinks.map((link) => (
-    <a href={link.url} target="_blank" rel="noopener noreferrer">
-      <span class="sr-only">{link.srText}</span>
-      <img class="social-link" src={link.svgPath} alt={link.srText} height={32} width={32}/>
-    </a>
-  ))}
+  {
+    communityLinks.map((link) => {
+      const iconName = link.icon || "default-icon"; // Replace "default-icon" with a valid default icon name
+      return (
+        <a
+          href={link.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="social-icon"
+          aria-label={link.name}
+        >
+          <Icon name={iconName} />
+        </a>
+      );
+    })
+  }
 </div>

src/components/ContributorSection.astro

@@ -0,0 +1,30 @@
+---
+import { Icon } from "astro-icon/components";
+import { communityLinks } from "../content/data/community-links";
+import "../styles/Contributor.css";
+---
+
+<section class="contributor-section">
+  <h2>We are actively looking for contributors</h2>
+  <div class="link-container">
+    {
+      communityLinks.map((link) => (
+        <a href={link.url} class="link-item">
+          <Icon name={link.icon} />
+          <span>{link.name}</span>
+        </a>
+      ))
+    }
+  </div>
+
+  <div class="about">
+    <h1>Welcome to Vortex Linux</h1>
+    <p>
+      Vortex Linux is a groundbreaking Linux distribution designed for maximum
+      security, flexibility, and stability. By seamlessly integrating containers
+      and virtual machines (VMs), Vortex Linux offers a unique, immutable, and
+      atomic operating system that caters to the needs of both novice and
+      advanced users.
+    </p>
+  </div>
+</section>