Considerations And Supporting Info

Oct 13, 2025 by pinkandtrash.com 97 views

Introduction

In the midst of the COVID-19 pandemic, ensuring the accuracy and reliability of information on our website is crucial. However, we've encountered a broken link on our homepage, which requires immediate attention. In this article, we'll delve into the issue, explore the necessary steps to resolve it, and provide a comprehensive guide on how to fix the broken link.

Understanding the Issue

Feature Description

We initially decided not to build pages for which there are no resources, specifically for the {resourceType}/{category} template. However, we've since reconsidered and decided to show these pages in certain circumstances. This means we must build pages for all possible routes.

Considerations And Supporting Info

What should we show on these pages?
Do we need to conditionally return a different template or just elements of it?

Acceptance Criteria

To resolve the broken link issue, we need to meet the following acceptance criteria:

Amend the getStaticPaths method in src/pages/[resourceType]/[category]/index.astro to build pages for all combinations as opposed to filtering out those that do not have resources.
Add an H2 that says {{resourceType}} beneath the main H1.
Display a piece of text that says: "We have {{count}} {{resourceType}} on this topic" - it should be more prominent than regular text but not quite a heading.
If we are in a Topic with subtopics, show the subtopics at the top like we do on the /{category} template.
Render out the list of resources without the same sub-headings used in the /{category} template.

Step 1: Amend getStaticPaths Method

To build pages for all combinations, we need to modify the getStaticPaths method in src/pages/[resourceType]/[category]/index.astro. This method is responsible for generating the static paths for our pages. We'll update it to include all possible routes, rather than filtering out those without resources.

import { getStaticPaths } from 'astro:content';

export async function getStaticPaths() {
  const paths = await getStaticPaths({
    // Update the filter to include all possible routes
    filter: ({ resourceType, category }) => true,
  });

  return paths;
}

Step 2: Add H2 with Resource Type

Next, we'll add an H2 that says {{resourceType}} beneath the main H1. This will provide a clear indication of the resource type being displayed.

<h1>COVID-19 Resources</h1>
<h2>{{resourceType}}</h2>

Step 3: Display Count of Resources

We'll then display a piece of text that says: "We have {{count}} {{resourceType}} on this topic". This will provide a prominent display of the count of resources available.

<p>We have {{count}} {{resourceType}} on this topic</p>

Step 4: Show Subtopics (if applicable)

If we are in a Topic with subtopics, we'll show the subtopics at the top like we do on the /{category} template.

<ul>
  {#each subtopics as subtopic}
    <li><a href="{{subtopic.url}}">{{subtopic.name}}</a></li>
  {/each}
</ul>

Step 5: Render List of Resources

Finally, we'll render out the list of resources without the same sub-headings used in the /{category} template.

<ul>
  {#each resources as resource}
    <li>
      <a href="{{resource.url}}">{{resource.name}}</a>
      <p>{{resource.description}}</p>
    </li>
  {/each}
</ul>

Conclusion

Introduction

In our previous article, we explored the issue of the broken link on our homepage and provided a comprehensive guide on how to fix it. However, we understand that some of you may still have questions about the process. In this article, we'll address some of the most frequently asked questions about fixing the broken link on our homepage.

Q&A

Q: What is the cause of the broken link on our homepage?

A: The broken link on our homepage is caused by the fact that we initially decided not to build pages for which there are no resources, specifically for the {resourceType}/{category} template. However, we've since reconsidered and decided to show these pages in certain circumstances.

Q: What are the necessary steps to resolve the broken link issue?

A: To resolve the broken link issue, we need to meet the following acceptance criteria:

Amend the getStaticPaths method in src/pages/[resourceType]/[category]/index.astro to build pages for all combinations as opposed to filtering out those that do not have resources.
Add an H2 that says {{resourceType}} beneath the main H1.
Display a piece of text that says: "We have {{count}} {{resourceType}} on this topic" - it should be more prominent than regular text but not quite a heading.
If we are in a Topic with subtopics, show the subtopics at the top like we do on the /{category} template.
Render out the list of resources without the same sub-headings used in the /{category} template.

Q: How do I amend the getStaticPaths method?

A: To amend the getStaticPaths method, you need to update the filter to include all possible routes. This can be done by modifying the getStaticPaths method in src/pages/[resourceType]/[category]/index.astro as follows:

import { getStaticPaths } from 'astro:content';

export async function getStaticPaths() {
  const paths = await getStaticPaths({
    // Update the filter to include all possible routes
    filter: ({ resourceType, category }) => true,
  });

  return paths;
}

Q: How do I add an H2 with resource type?

A: To add an H2 with resource type, you need to add the following code to your template:

<h1>COVID-19 Resources</h1>
<h2>{{resourceType}}</h2>

Q: How do I display the count of resources?

A: To display the count of resources, you need to add the following code to your template:

<p>We have {{count}} {{resourceType}} on this topic</p>

Q: How do I show subtopics (if applicable)?

A: To show subtopics (if applicable), you need to add the following code to your template:

<ul>
  {#each subtopics as subtopic}
    <li><a href="{{subtopic.url}}">{{subtopic.name}}</a></li>
  {/each}
</ul>

Q: How do I render the list of resources?

A: To render the list of resources, you need to add the following code to your template:

<ul>
  {#each resources as resource}
    <li>
      <a href="{{resource.url}}">{{resource.name}}</a>
      <p>{{resource.description}}</p>
    </li>
  {/each}
</ul>

Conclusion

In this article, we've addressed some of the most frequently asked questions about fixing the broken link on our homepage. We hope that this Q&A guide has provided you with the information you need to resolve the issue and ensure that our website is accurate and reliable. If you have any further questions, please don't hesitate to contact us.