feat: recategorize references. (#433)

## Why?

![Screenshot 2025-01-15 at 22 27
54](https://github.com/user-attachments/assets/5a8b0a75-d2e7-476e-9a9e-a3b50c7ff0bc)

## Contribution checklist?

- [x] The commit messages are detailed
- [x] The `build` command runs locally
- [x] Assets or static content are linked and stored in the project
- [x] Document filename is named after the slug
- [x] You've reviewed spelling using a grammar checker
- [x] For documentation, guides or references, you've tested the
commands and steps
- [x] You've done enough research before writing

## Security checklist?

- [x] Sensitive data has been identified and is being protected properly
- [x] Injection has been prevented (parameterized queries, no eval or
system calls)
- [x] The Components are escaping output (to prevent XSS)

Services/Search/Indexer/indexMarkdownFiles.ts

@@ -24,7 +24,7 @@ export enum ContentDirByName {
   'templates' = `${contentBasePath}/templates`,
   'legal' = `${contentBasePath}/legal`,
   'guides' = `${contentBasePath}/guides`,
-  'references' = `${contentBasePath}/references`,
+  'common_issues' = `${contentBasePath}/issues`,
 }
 
 export type ContentName = keyof typeof ContentDirByName;

package.json

@@ -21,24 +21,24 @@
     "check:json": "./scripts/validate-json.ts",
     "check:markdown": "./scripts/check-markdown.ts",
     "search:serve": "npm run clear:meili_data && ./Services/Search/dev.bash",
-    "search:index_all": "npm run search:index_blog && npm run search:index_docs && npm run search:index_guides && npm run search:index_references && npm run search:index_changelog",
+    "search:index_all": "npm run search:index_blog && npm run search:index_docs && npm run search:index_guides && npm run search:index_common_issues && npm run search:index_changelog",
     "search:index_blog": "./Services/Search/Indexer/indexation.ts \"blog\" \"fleekxyz_website_blog\"",
     "search:index_docs": "./Services/Search/Indexer/indexation.ts \"docs\" \"fleekxyz_website_docs\"",
     "search:index_guides": "./Services/Search/Indexer/indexation.ts \"guides\" \"fleekxyz_website_guides\"",
-    "search:index_references": "./Services/Search/Indexer/indexation.ts \"references\" \"fleekxyz_website_references\"",
+    "search:index_common_issues": "./Services/Search/Indexer/indexation.ts \"common_issues\" \"fleekxyz_website_common_issues\"",
     "search:index_changelog": "./Services/Search/Indexer/indexation.ts \"changelog\" \"fleekxyz_website_changelog\"",
     "search:index_all_prod_debug": "npm run search:index_warn && npx dotenvx run -f .env.production -- npm run search:index_all",
     "search:index_blog_prod_debug": "npm run search:index_warn && npx dotenvx run -f .env.production -- npm run search:index_blog",
     "search:index_docs_prod_debug": "npm run search:index_warn && npx dotenvx run -f .env.production -- npm run search:index_docs",
     "search:index_guides_prod_debug": "npm run search:index_warn && npx dotenvx run -f .env.production -- npm run search:index_guides",
-    "search:index_references_prod_debug": "npm run search:index_warn && npx dotenvx run -f .env.production -- npm run search:index_references",
+    "search:index_common_issues_prod_debug": "npm run search:index_warn && npx dotenvx run -f .env.production -- npm run search:index_common_issues",
     "search:index_changelog_prod_debug": "npm run search:index_warn && npx dotenvx run -f .env.production -- npm run search:index_changelog",
     "search:index_warn": "echo \"⚠️ For debugging production indexation based on local .env.production file!\" && sleep 3",
-    "search:delete_indexes": "npm run search:delete_index_blog && npm run search:delete_index_docs && npm run search:delete_index_guides && npm run search:delete_index_references && npm run search:delete_index_guides && npm run search:delete_index_references",
+    "search:delete_indexes": "npm run search:delete_index_blog && npm run search:delete_index_docs && npm run search:delete_index_guides && npm run search:delete_index_common_issues && npm run search:delete_index_guides && npm run search:delete_index_common_issues",
     "search:delete_index_blog": "./Services/Search/Indexer/indexDelete.ts \"fleekxyz_website_blog\"",
     "search:delete_index_docs": "./Services/Search/Indexer/indexDelete.ts \"fleekxyz_website_docs\"",
     "search:delete_index_guides": "./Services/Search/Indexer/indexDelete.ts \"fleekxyz_website_guides\"",
-    "search:delete_index_references": "./Services/Search/Indexer/indexDelete.ts \"fleekxyz_website_references\"",
+    "search:delete_index_common_issues": "./Services/Search/Indexer/indexDelete.ts \"fleekxyz_website_common_issues\"",
     "search:delete_index_changelog": "./Services/Search/Indexer/indexDelete.ts \"fleekxyz_website_changelog\"",
     "support:local_api": "npx bun ./Services/ZenDesk/api.ts",
     "clear": "npm run clear:meili_data",

src/components/BlogHeader.astro

@@ -12,9 +12,11 @@ const categories = await getPathSubDirsSorted({
   extend: [ROOT],
 });
 
-const hasCategoryHeader = ['/blog/', '/references/'];
+const hasCategoryHeader = ['/blog', '/issues'];
 
-const isWithCategoryHeader = hasCategoryHeader.includes(Astro.url.pathname);
+const isWithCategoryHeader = hasCategoryHeader.some((path) =>
+  Astro.url.pathname.startsWith(path),
+);
 ---
 
 <div
@@ -23,7 +25,9 @@ const isWithCategoryHeader = hasCategoryHeader.includes(Astro.url.pathname);
   <div
     class="align-center flex items-center gap-20 md:gap-40 lg:gap-20 xl:gap-40"
   >
-    <h1 class="lg:text-27 xl:text-32">{title}</h1>
+    <h1 class="lg:text-27 xl:text-32">
+      {title === 'issues' ? 'Common issues' : title}
+    </h1>
     <div class="align-center flex flex-col gap-10 md:flex-row">
       <div class="group relative lg:hidden">
         <button

src/components/Support/config.ts

@@ -1,9 +1,9 @@
 export const categoryCardItems = [
   {
     id: '1',
-    link: '/references/',
+    link: '/issues/',
     image: '/images/troubleshooting.png',
-    title: 'References',
+    title: 'Common issues',
   },
   {
     id: '2',
@@ -23,7 +23,7 @@ export const singleArticleCardItems = [
   {
     id: '1',
     title: 'Node engine errors',
-    link: '/references/faq/node-engine-errors/',
+    link: '/issues/faq/node-engine-errors/',
     description:
       "If you are getting node engine mismatch errors, don't worry. It only means the docker image you selected does not have the required node version. However, you can use any docker image published on dockerhub, you don't need to use the ones we provide if...",
   },
@@ -43,7 +43,7 @@ export const singleArticleCardItems = [
   },
   {
     id: '4',
-    link: '/references/faq/my-links-arent-resolving/',
+    link: '/issues/faq/my-links-arent-resolving/',
     title: "My links aren't resolving",
     description:
       "Explore Fleek's method for resolving IPFS link issues. This in-depth tutorial steers you through the essential steps, from creating a new Next.js App to adding a custom domain, and finally optimizing y...",

src/content/config.ts

@@ -37,7 +37,7 @@ const guidesCollection = createCollection('content', z.object({}));
 
 const templatesCollection = createCollection('content', z.object({}));
 
-const referencesCollection = createCollection('content', z.object({}));
+const commonIssuesCollection = createCollection('content', z.object({}));
 
 const legalCollection = createCollection('content', z.object({}));
 
@@ -49,7 +49,7 @@ export const collections = {
   blog: blogCollection,
   guides: guidesCollection,
   templates: templatesCollection,
-  references: referencesCollection,
+  issues: commonIssuesCollection,
   legal: legalCollection,
   changelog: changelogCollection,
 };

src/pages/references.astro → src/pages/issues.astro

@@ -7,25 +7,26 @@ import settings from '@base/settings.json';
 
 import type { CollectionEntry } from 'astro:content';
 
-const indexNameReferences = import.meta.env.PUBLIC_MEILISEARCH_INDEX_REFERENCES;
+const indexNameCommonIssues = import.meta.env
+  .PUBLIC_MEILISEARCH_INDEX_COMMON_ISSUES;
 
-const collection = 'references';
+const collection = 'issues';
 
-const allPosts: CollectionEntry<'references'>[] = (
-  await getCollection('references')
+const allPosts: CollectionEntry<'issues'>[] = (
+  await getCollection('issues')
 ).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 ---
 
 <Layout
-  title={settings.site.metadata.references.title}
-  image={settings.site.metadata.references.image}
-  slug={settings.site.metadata.references.slug}
-  description={settings.site.metadata.references.description}
+  title={settings.site.metadata.commonIssues.title}
+  image={settings.site.metadata.commonIssues.image}
+  slug={settings.site.metadata.commonIssues.slug}
+  description={settings.site.metadata.commonIssues.description}
 >
   <main class="container min-h-container">
     <BlogHeader
-      title={settings.site.metadata.references.title}
-      indexName={indexNameReferences}
+      title={settings.site.metadata.commonIssues.title}
+      indexName={indexNameCommonIssues}
     />
     <BlogPosts allPosts={allPosts} collection={collection} />
   </main>

src/pages/references/[...slug].astro → src/pages/issues/[...slug].astro

@@ -11,7 +11,7 @@ import { Image } from 'astro:assets';
 import { loadDynamicImage } from '@utils/dynamicLoadImage';
 
 export async function getStaticPaths() {
-  const docsEntries = await getCollection('references');
+  const docsEntries = await getCollection('issues');
   return docsEntries.map((entry) => ({
     params: { slug: entry.slug },
     props: { entry },
@@ -30,7 +30,7 @@ const githubEditUrlPathname = generateGitHubEditLink({
 });
 
 const fullSlug = generateFullSlug({
-  basePath: settings.site.metadata.references.slug,
+  basePath: settings.site.metadata.commonIssues.slug,
   slug,
 });
 

src/pages/references/[category].astro → src/pages/issues/[category].astro

@@ -14,11 +14,11 @@ type CategoryDetails = {
   description: string;
 };
 
-type ReferencesCustomCategoryMetadata = Record<string, CategoryDetails>;
+type CommonIssuesCustomCategoryMetadata = Record<string, CategoryDetails>;
 
 export async function getStaticPaths() {
   const blogCats = await listSubDirectories({
-    path: './src/content/references',
+    path: './src/content/issues',
   });
   const params = blogCats.map((category) => ({
     params: {
@@ -29,40 +29,40 @@ export async function getStaticPaths() {
   return [...params];
 }
 
-const indexNameReferences = import.meta.env.PUBLIC_MEILISEARCH_INDEX_REFERENCES;
+const indexNameCommonIssues = import.meta.env
+  .PUBLIC_MEILISEARCH_INDEX_COMMON_ISSUES;
 
 const { category } = Astro.params;
 
-const referencesSettings = settings.site.metadata.references
-  .category as ReferencesCustomCategoryMetadata;
+const commonIssuesSettings = settings.site.metadata.commonIssues
+  .category as CommonIssuesCustomCategoryMetadata;
 
-const referencesTitle = settings.site.metadata.references.title;
-const catTitle = referencesSettings[category].title;
-const title = catTitle ? `${referencesTitle} - ${catTitle}` : referencesTitle;
+const commonIssuesTitle = settings.site.metadata.commonIssues.title;
+const catTitle = commonIssuesSettings[category].title;
+const title = catTitle
+  ? `${commonIssuesTitle} - ${catTitle}`
+  : commonIssuesTitle;
 const description =
-  referencesSettings[category].description ||
-  settings.site.metadata.references.description;
+  commonIssuesSettings[category].description ||
+  settings.site.metadata.commonIssues.description;
 
-const collection = 'references';
-const image = settings.site.metadata.references.image;
+const collection = 'issues';
+const image = settings.site.metadata.commonIssues.image;
 const slug = generateFullSlug({
-  basePath: settings.site.metadata.references.slug,
+  basePath: settings.site.metadata.commonIssues.slug,
   slug: category,
 });
 
-const allPosts: CollectionEntry<'references'>[] = (
-  await getCollection(
-    'references',
-    ({ slug }) => slug.split('/')[0] === category,
-  )
+const allPosts: CollectionEntry<'issues'>[] = (
+  await getCollection('issues', ({ slug }) => slug.split('/')[0] === category)
 ).sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf());
 ---
 
 <Layout title={title} description={description} image={image} slug={slug}>
   <main class="container min-h-container">
     <BlogHeader
-      title={referencesTitle}
-      indexName={indexNameReferences}
+      title={commonIssuesTitle}
+      indexName={indexNameCommonIssues}
       category={category}
     />
     <BlogPosts allPosts={allPosts} collection={collection} />

src/settings.json

@@ -96,14 +96,14 @@
         "description": "Visit the Fleek Support Center for detailed FAQs, troubleshooting guides, and documentation. Quickly report issues or submit support requests to get the help you need.",
         "image": "/images/fleek-meta-image.png?202406061658"
       },
-      "references": {
-        "title": "References",
-        "slug": "references",
-        "description": "Explore the Fleek References page for troubleshooting guides designed to address common errors when using Fleek.",
+      "commonIssues": {
+        "title": "issues",
+        "slug": "common-issues",
+        "description": "Explore the Fleek common issues page for troubleshooting guides designed to address common errors when using Fleek.",
         "image": "/images/fleek-meta-image.png?202406061658",
         "category": {
-          "common-issues": {
-            "title": "Common issues",
+          "hosting": {
+            "title": "Hosting",
             "description": "Stay informed with the latest announcements from Fleek. Get insights on new features, updates, and company developments."
           },
           "faq": {
@@ -438,8 +438,8 @@
 
       {
         "id": 2,
-        "path": "/references/",
-        "title": "References"
+        "path": "/issues/",
+        "title": "Common issues"
       },
       {
         "id": 3,