fix broken urls and featured links

Author: philsturgeon

src/components/ExternalArticle.tsx

@@ -54,15 +54,19 @@ const ExternalArticle: React.FC<FeaturedArticle> = (props) => {
         </div>
         <div className="group relative">
           <h3 className="mt-3 text-lg leading-6 font-semibold text-gray-900 group-hover:text-gray-600">
-            <Link
-              href={url}
-              className="absolute inset-0 font-medium no-underline"
-              toolSlug={toolSlug}
-              linkType="featured_article"
-              linkPlacementDescription="featured-article-card"
-            >
-              {title}
-            </Link>
+            {url ? (
+              <Link
+                href={url}
+                className="font-medium no-underline after:absolute after:inset-0"
+                toolSlug={toolSlug}
+                linkType="featured_article"
+                linkPlacementDescription="featured-article-card"
+              >
+                {title}
+              </Link>
+            ) : (
+              <span className="font-medium">{title}</span>
+            )}
           </h3>
           <p className="mt-5 line-clamp-3 text-sm leading-6 text-gray-600">
             {description}

src/pages/categories/[...slug].astro

@@ -23,23 +23,22 @@ import { isModern } from '@/utils/versionFilters';
 export const getStaticPaths: GetStaticPaths = async () => {
   const categories = await getCollection('categories');
   return categories.map((category) => ({
-    params: { slug: category.id },
+    params: { slug: category.id.replace(/\.md$/, '') },
     props: { category },
   }));
 };
 
 // 2. For your template, you can get the entry directly from the prop
-const { slug } = Astro.params;
-const category = await getEntry('categories', slug as string);
+const { category } = Astro.props;
 
 if (!category) {
-  throw new Error(`No category found for slug ${slug}`);
+  throw new Error(`No category found for slug ${Astro.params.slug}`);
 }
 
 const { Content } = await render(category);
 
-// Note: category.id includes .md extension, but tool category references don't
-const categoryIdWithoutExt = category.id.replace(/\.md$/, '');
+const slug = category.id.replace(/\.md$/, '');
+const categorySlug = slug; // For comparing with tool category references
 
 // Track if there are legacy tools in this category
 let hasLegacyTools = false;
@@ -55,7 +54,7 @@ const allTools = (await getCollection('tools')).filter((tool) => {
   const categories = tool.data.categories;
   // Check if tool belongs to this category
   const isInCategory = categories.some(
-    (cat) => cat.id === categoryIdWithoutExt
+    (cat) => cat.id === categorySlug
   );
 
   if (!isInCategory) {
@@ -92,7 +91,7 @@ const tools = [...sponsoredTools, ...nonSponsoredTools];
 const toolsData = tools.map((tool) => ({
   category: category.data,
   tool: tool.data,
-  slug: tool.id,
+  slug: tool.id.replace(/\.md$/, ''),
 }));
 ---
 
@@ -130,7 +129,7 @@ const toolsData = tools.map((tool) => ({
           url: `https://openapi.tools/categories/${slug}`,
           tools: tools.map((t) => ({
             name: t.data.name,
-            url: `https://openapi.tools/tools/${t.id}`,
+            url: `https://openapi.tools/tools/${t.id.replace(/\.md$/, '')}`,
           })),
         })
       )}

src/pages/collections/[...slug].astro

@@ -77,21 +77,22 @@ function filterTools(
 export const getStaticPaths: GetStaticPaths = async () => {
   const curatedCollections = await getCollection('curated-collections');
   return curatedCollections.map((collection) => ({
-    params: { slug: collection.id },
+    params: { slug: collection.id.replace(/\.md$/, '') },
     props: { collection },
   }));
 };
 
 // 2. Get the collection from props
-const { slug } = Astro.params;
-const collection = await getEntry('curated-collections', slug as string);
+const { collection } = Astro.props;
 
 if (!collection) {
-  throw new Error(`No collection found for slug ${slug}`);
+  throw new Error(`No collection found for slug ${Astro.params.slug}`);
 }
 
 const { Content } = await render(collection);
 
+const slug = collection.id.replace(/\.md$/, '');
+
 // 3. Get all tools and filter them based on collection filters
 const allTools = await getCollection('tools');
 const filteredTools = filterTools(allTools, collection.data.filters);
@@ -107,9 +108,9 @@ type CategoryWithTools = {
 
 const categoriesWithTools: CategoryWithTools[] = allCategories
   .map((category) => {
-    const categoryIdWithoutExt = category.id.replace(/\.md$/, '');
+    const categorySlug = category.id.replace(/\.md$/, '');
     const toolsInCategory = filteredTools.filter((tool) =>
-      tool.data.categories?.some((cat) => cat.id === categoryIdWithoutExt)
+      tool.data.categories?.some((cat) => cat.id === categorySlug)
     );
     return {
       category,
@@ -130,7 +131,7 @@ const categoryGroups = categoriesWithTools.map(({ category, tools }) => ({
   description: category.data.description,
   tools: tools.map((tool) => ({
     tool: tool.data,
-    slug: tool.id,
+    slug: tool.id.replace(/\.md$/, ''),
     category: category.data,
   })),
 }));
@@ -170,7 +171,7 @@ const categoryGroups = categoriesWithTools.map(({ category, tools }) => ({
           url: `https://openapi.tools/collections/${slug}`,
           tools: filteredTools.slice(0, 10).map((tool) => ({
             name: tool.data.name,
-            url: `https://openapi.tools/tools/${tool.id}`,
+            url: `https://openapi.tools/tools/${tool.id.replace(/\.md$/, '')}`,
           })),
         })
       )}

src/pages/index.astro

@@ -35,7 +35,7 @@ const sortedCategories = allCategories.sort((a, b) =>
       {
         sortedCategories.map((category) => (
           <QuickLink
-            href={`/categories/${category.id}`}
+            href={`/categories/${category.id.replace(/\.md$/, '')}`}
             title={category.data.name}
             body={category.data.description}
           />

src/pages/legacy.astro

@@ -37,11 +37,11 @@ const sortedCategories = allCategories.sort((a, b) =>
 const toolsByCategory = new Map<string, typeof legacyTools>();
 
 for (const category of sortedCategories) {
-  const categoryIdWithoutExt = category.id.replace(/\.md$/, '');
+  const categorySlug = category.id.replace(/\.md$/, '');
   const categoryTools = legacyTools
     .filter((tool) => {
       const categories = tool.data.categories;
-      return categories.some((cat) => cat.id === categoryIdWithoutExt);
+      return categories.some((cat) => cat.id === categorySlug);
     })
     // Sort by active sponsors first, then alphabetically
     .sort((a, b) => {
@@ -90,7 +90,7 @@ for (const category of sortedCategories) {
           url: 'https://openapi.tools/legacy',
           tools: legacyTools.slice(0, 10).map((t) => ({
             name: t.data.name,
-            url: `https://openapi.tools/tools/${t.id}`,
+            url: `https://openapi.tools/tools/${t.id.replace(/\.md$/, '')}`,
           })),
         })
       )}
@@ -150,7 +150,7 @@ for (const category of sortedCategories) {
           const toolsData = tools.map((tool) => ({
             category: category.data,
             tool: tool.data,
-            slug: tool.id,
+            slug: tool.id.replace(/\.md$/, ''),
           }));
 
           return (

src/pages/sponsor/index.astro

@@ -113,7 +113,7 @@ const uniqueSponsors = activeSponsors.filter((tool) => {
           <ul>
             {uniqueSponsors.map((tool) => (
               <li>
-                <Link href={`/tools/${tool.id}`}>{tool.data.name}</Link>
+                <Link href={`/tools/${tool.id.replace(/\.md$/, '')}`}>{tool.data.name}</Link>
                 {tool.data.description && ` - ${tool.data.description}`}
               </li>
             ))}

src/pages/tools/[...slug].astro

@@ -24,19 +24,21 @@ import {
 // 1. Generate a new path for every collection entry
 export const getStaticPaths: GetStaticPaths = async () => {
   const tools = await getCollection('tools');
-  return tools.map((category) => ({
-    params: { slug: category.id },
+  return tools.map((tool) => ({
+    params: { slug: tool.id.replace(/\.md$/, '') },
+    props: { tool },
   }));
 };
 
 // 2. For your template, you can get the entry directly from the prop
-const { slug } = Astro.params;
-const tool = await getEntry('tools', slug as string);
+const { tool } = Astro.props;
 
 if (!tool) {
-  throw new Error(`No category found for slug ${slug}`);
+  throw new Error(`No tool found for slug ${Astro.params.slug}`);
 }
 
+const slug = tool.id.replace(/\.md$/, '');
+
 const languages: Record<string, boolean> = tool.data?.languages || {};
 
 const { Content } = await render(tool);
@@ -112,7 +114,7 @@ const toolBadges = tool.data.badges
               Visit Website
             </Button>
           ) : (
-            <p>No Website</p>
+            ''
           )
         }
         {
@@ -173,7 +175,7 @@ const toolBadges = tool.data.badges
                     (category) =>
                       category && (
                         <Link
-                          href={`/categories/${category.id}`}
+                          href={`/categories/${category.id.replace(/\.md$/, '')}`}
                           className="no-underline"
                         >
                           <Badge variant="blue">{category.data.name}</Badge>
@@ -240,7 +242,13 @@ const toolBadges = tool.data.badges
 
             <section class="md-grid-cols-2 grid gap-4 lg:grid-cols-3">
               {enrichedFeaturedArticles.map((article) => (
-                <ExternalArticle {...article.og} toolSlug={slug as string} />
+                <ExternalArticle
+                  {...article.og}
+                  url={article.url}
+                  title={article.title}
+                  date={article.date}
+                  toolSlug={slug as string}
+                />
               ))}
             </section>
           </>

src/pages/tools/index.astro

@@ -36,7 +36,7 @@ const nonSponsoredTools = modernTools
 const tools = [...sponsoredTools, ...nonSponsoredTools];
 const toolsData = tools.map((tool) => ({
   tool: tool.data,
-  slug: tool.id,
+  slug: tool.id.replace(/\.md$/, ''),
 }));
 
 const title = 'All Tools';
@@ -67,7 +67,7 @@ const description = 'Browse all OpenAPI tools that support modern OpenAPI.';
           url: 'https://openapi.tools/tools',
           tools: tools.map((t) => ({
             name: t.data.name,
-            url: `https://openapi.tools/tools/${t.id}`,
+            url: `https://openapi.tools/tools/${t.id.replace(/\.md$/, '')}`,
           })),
         })
       )}