added blog and minor fixes

Author: Xeven777

bun.lockb

@@ -12,10 +12,10 @@
     "format": "prettier . --write"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.5",
+    "@astrojs/mdx": "3.1.7",
     "@astrojs/react": "^3.6.2",
     "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/tailwind": "^5.1.0",
+    "@astrojs/tailwind": "5.1.1",
     "@fontsource-variable/bricolage-grotesque": "^5.0.7",
     "@fontsource-variable/inter": "^5.0.20",
     "@iconify-json/bx": "^1.2.0",
@@ -26,7 +26,7 @@
     "@tailwindcss/typography": "^0.5.15",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "astro": "^4.15.2",
+    "astro": "4.15.8",
     "astro-icon": "^1.1.1",
     "astro-navbar": "^2.3.3",
     "astro-seo": "^0.8.4",

package.json

@@ -193,62 +193,64 @@ const SoftwareListing = ({ softwareEntries }: { softwareEntries: any[] }) => {
           </div>
         </div>
       </div>
-      <ul className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-10 mx-auto px-4">
+      <div className="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-10 mx-auto px-4">
         {filteredEntries.map((toolName: any, index: number) => (
-          <Card
-            key={toolName.id}
-            className="h-full hover:shadow-md group shadow transition-all duration-300 mb-1 overflow-hidden">
-            <img
-              src={toolName.data.Images[0]}
-              alt={toolName.data.Name}
-              sizes="(max-width: 800px) 100vw, 800px"
-              width={800}
-              height={300}
-              loading={index <= 2 ? "eager" : "lazy"}
-              decoding={index <= 2 ? "sync" : "async"}
-              className="w-full h-52 rounded-md group-hover:scale-105 transition-all duration-300 object-cover object-center bg-white"
-            />
-            <CardContent className="mt-4">
-              <div className="flex justify-between">
-                <span className="text-blue-600 dark:text-blue-500 bg-blue-100 dark:bg-blue-500/15 py-1 px-3 rounded-full text-sm">
-                  {toolName.data.Category}
-                </span>
-                <span
-                  className={cn(
-                    "py-1 px-3 rounded-full text-sm",
-                    toolName.data.pricing === "Free"
-                      ? "text-green-600 bg-green-100/70 dark:bg-green-900/25"
-                      : toolName.data.pricing === "Paid plans"
-                        ? "text-red-600 bg-red-100/70 dark:bg-red-900/25"
-                        : "text-yellow-600 bg-yellow-100/70 dark:bg-yellow-900/25",
-                  )}>
-                  {toolName.data.pricing}
-                </span>
-              </div>
-              <h2 className="text-3xl font-semibold leading-snug tracking-tight mt-1">
-                {toolName.data.Name}
-              </h2>
+          <a href={"/software/" + toolName.id}>
+            <Card
+              key={toolName.id}
+              className="h-full flex flex-col hover:shadow-md group shadow transition-all duration-300 mb-1 overflow-hidden">
+              <img
+                src={toolName.data.Images[0]}
+                alt={toolName.data.Name}
+                sizes="(max-width: 800px) 100vw, 800px"
+                width={800}
+                height={300}
+                loading={index <= 2 ? "eager" : "lazy"}
+                decoding={index <= 2 ? "sync" : "async"}
+                className="w-full h-52 rounded-md group-hover:scale-105 transition-all duration-300 object-cover object-center bg-white"
+              />
+              <CardContent className="mt-4 flex-1">
+                <div className="flex justify-between">
+                  <span className="text-blue-600 dark:text-blue-500 bg-blue-100 dark:bg-blue-500/15 py-1 px-3 rounded-full text-sm">
+                    {toolName.data.Category}
+                  </span>
+                  <span
+                    className={cn(
+                      "py-1 px-3 rounded-full text-sm",
+                      toolName.data.pricing === "Free"
+                        ? "text-green-600 bg-green-100/70 dark:bg-green-900/25"
+                        : toolName.data.pricing === "Paid plans"
+                          ? "text-red-600 bg-red-100/70 dark:bg-red-900/25"
+                          : "text-yellow-600 bg-yellow-100/70 dark:bg-yellow-900/25",
+                    )}>
+                    {toolName.data.pricing}
+                  </span>
+                </div>
+                <h2 className="text-3xl font-semibold leading-snug tracking-tight mt-1">
+                  {toolName.data.Name}
+                </h2>
 
-              <span className="text-muted-foreground line-clamp-3">
-                {toolName.data.Description}
-              </span>
+                <span className="text-muted-foreground line-clamp-3">
+                  {toolName.data.Description}
+                </span>
 
-              <ul className="flex gap-3 flex-wrap mt-4 mb-2">
-                {toolName.data.Tags.map((tag: string) => (
-                  <li key={tag} className="text-xs text-muted-foreground/75">
-                    #{tag}
-                  </li>
-                ))}
-              </ul>
-            </CardContent>
-            <CardFooter className="flex justify-between">
-              <Button asChild>
-                <a href={`/software/${toolName.id}`}>More Details</a>
-              </Button>
-            </CardFooter>
-          </Card>
+                <ul className="flex gap-3 flex-wrap mt-4 mb-2">
+                  {toolName.data.Tags.map((tag: string) => (
+                    <li key={tag} className="text-xs text-muted-foreground/75">
+                      #{tag}
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+              <CardFooter className="flex">
+                <Button asChild>
+                  <a href={`/software/${toolName.id}`}>More Details</a>
+                </Button>
+              </CardFooter>
+            </Card>
+          </a>
         ))}
-      </ul>
+      </div>
     </main>
   );
 };

src/components/SoftwareListing.tsx

@@ -25,8 +25,8 @@ const menuitems = [
     path: "/about",
   },
   {
-    title: "Guest Posts",
-    path: "/guestposts",
+    title: "Blogs",
+    path: "/blogs",
   },
 ];
 ---

src/components/navbar/navbar.astro

@@ -0,0 +1,89 @@
+---
+title: How to Do Developer Marketing
+description: How to Developer Marketing
+pubDate: "2024-09-18T00:00:00+05:30"
+heroImage: "/opengraph.png"
+author: "Anish"
+---
+
+# How to Develop a Marketing Strategy
+
+Developing a marketing strategy is crucial for any business seeking to reach and engage its target audience, drive sales, and ultimately achieve its goals. A well-crafted marketing strategy helps you understand your customers, differentiate your brand, and make informed decisions about resource allocation.
+
+### I. Identify Your Target Audience
+
+Understanding your ideal customer is the foundation of an effective marketing strategy.
+
+#### 1. Conduct Market Research
+
+- Analyze demographics, needs, preferences, and pain points
+- Use surveys, focus groups, and online analytics tools
+
+#### 2. Create Buyer Personas
+
+- Develop detailed profiles of your ideal customers
+- Outline their goals, challenges, and behaviors
+
+### II. Define Your Unique Value Proposition (UVP)
+
+Clearly articulate your brand's unique benefits and differentiators.
+
+#### 1. Identify Key Competitors
+
+- Research their strengths, weaknesses, and market positioning
+
+#### 2. Craft Your UVP Statement
+
+- Concise, compelling, and differentiated messaging
+
+### III. Set Marketing Objectives
+
+Establish specific, measurable, achievable, relevant, and time-bound (SMART) goals.
+
+#### 1. Define Key Performance Indicators (KPIs)
+
+- Website traffic, social media engagement, lead generation, conversion rates
+
+#### 2. Align Objectives with Business Goals
+
+- Revenue growth, market share increase, brand awareness
+
+### IV. Choose Marketing Channels
+
+Select the most effective channels to reach your target audience.
+
+#### 1. Digital Marketing
+
+- Social media, email, search engine optimization (SEO), paid advertising
+
+#### 2. Traditional Marketing
+
+- Print, radio, television, event marketing
+
+### V. Develop a Content Strategy
+
+Create valuable, relevant, and consistent content.
+
+#### 1. Content Types
+
+- Blog posts, videos, podcasts, infographics, eBooks
+
+#### 2. Content Calendar
+
+- Plan and schedule content in advance
+
+### VI. Measure and Optimize
+
+Continuously monitor and improve your marketing strategy.
+
+#### 1. Track KPIs
+
+- Use analytics tools to monitor performance
+
+#### 2. Adjust and Refine
+
+- Based on data-driven insights and customer feedback
+
+### Conclusion
+
+Developing a marketing strategy requires ongoing effort and refinement. By following these steps, you'll be well on your way to creating a tailored plan that drives business success.

src/content/blogs/developer-marketing.md

@@ -1,7 +1,5 @@
-// 1. Import utilities from `astro:content`
 import { z, defineCollection } from "astro:content";
 
-// 2. Define your collection(s)
 const softwareCollection = defineCollection({
   type: "data",
   schema: z.object({
@@ -33,19 +31,32 @@ const softwareCollection = defineCollection({
   }),
 });
 
+const blogCollection = defineCollection({
+  type: "content",
+  schema: z.object({
+    title: z.string(),
+    description: z.string(),
+    author: z.string(),
+    pubDate: z.coerce.date(),
+    heroImage: z.string(),
+  }),
+});
+
 const teamCollection = defineCollection({
+  type: "content",
   schema: z.object({
     name: z.string(),
     link: z.string().url(),
     title: z.string(),
     avatar: z.object({
       src: z.string(),
       alt: z.string(),
-    })
+    }),
   }),
 });
 
 export const collections = {
   software: softwareCollection,
   team: teamCollection,
+  blog: blogCollection,
 };

src/content/config.ts

@@ -0,0 +1,23 @@
+---
+import { getCollection } from "astro:content";
+import Layout from "@layouts/Layout.astro";
+import Container from "@components/container.astro";
+
+export async function getStaticPaths() {
+  const blogEntries = await getCollection("blogs");
+  return blogEntries.map((entry: any) => ({
+    params: { slug: entry.slug },
+    props: { entry },
+  }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await entry.render();
+console.log(entry);
+---
+
+<Layout title={entry.data.title}>
+  <Container>
+    <Content />
+  </Container>
+</Layout>