wip working tags from yaml

packages/docusaurus-plugin-content-showcase/src/__tests__/index.test.ts

@@ -12,6 +12,9 @@ import {normalizePluginOptions} from '@docusaurus/utils-validation';
 import pluginContentPages from '../index';
 import {validateOptions} from '../options';
 
+// todo add test with tags in config
+// todo add test with tags in yaml
+
 describe('docusaurus-plugin-content-showcase', () => {
   it('loads simple showcase', async () => {
     const siteDir = path.join(__dirname, '__fixtures__', 'website');

packages/docusaurus-plugin-content-showcase/src/__tests__/options.test.ts

@@ -16,6 +16,8 @@ const defaultOptions = {
   id: 'default',
 };
 
+// todo add test that validate and reject tags.yaml file
+
 describe('normalizeShowcasePluginOptions', () => {
   it('returns default options for undefined user options', () => {
     expect(testValidate({})).toEqual(defaultOptions);
@@ -89,6 +91,7 @@ describe('normalizeShowcasePluginOptions', () => {
     const userOptions = {
       tags: [
         {
+          foo: {
             label: 'foo',
             description: {
               message: 'bar',
@@ -96,6 +99,7 @@ describe('normalizeShowcasePluginOptions', () => {
             },
             color: 'red',
           },
+        },
       ],
     };
     expect(testValidate(userOptions)).toEqual({

packages/docusaurus-plugin-content-showcase/src/index.ts

@@ -31,33 +31,23 @@ export function getContentPathList(
   return [contentPaths.contentPathLocalized, contentPaths.contentPath];
 }
 
-async function getTagsDefinition(
-  filePath: string | TagOption[],
-): Promise<string[]> {
+async function getTagsList(filePath: string | TagOption[]): Promise<string[]> {
   if (Array.isArray(filePath)) {
-    return filePath.map((tag) => tag.label);
+    return Object.keys(filePath);
   }
 
   const rawYaml = await fs.readFile(filePath, 'utf-8');
-  const unsafeYaml: any = Yaml.load(rawYaml);
-  console.log('unsafeYaml:', unsafeYaml);
-
-  const transformedData = unsafeYaml.tags.map((item: any) => {
-    const [label] = Object.keys(item); // Extract label from object key
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    const {description, color} = item[label]; // Extract description and color
-    return {label, description, color}; // Create new object with transformed structure
-  });
-  console.log('transformedData:', transformedData);
-
-  const safeYaml = tagSchema.validate(transformedData);
+  const unsafeYaml = Yaml.load(rawYaml);
+  const safeYaml = tagSchema.validate(unsafeYaml);
 
   if (safeYaml.error) {
-    throw new Error(`Invalid tags.yaml file: ${safeYaml.error.message}`);
+    throw new Error(
+      `There was an error extracting tags: ${safeYaml.error.message}`,
+      {cause: safeYaml.error},
+    );
   }
 
-  const tagLabels = safeYaml.value.map((tag: any) => Object.keys(tag)[0]);
+  const tagLabels = Object.keys(safeYaml.value);
   return tagLabels;
 }
 
@@ -132,9 +122,8 @@ export default function pluginContentShowcase(
         'tags.yaml',
       );
 
-      const tagList = await getTagsDefinition(tagFilePath);
+      const tagList = await getTagsList(tagFilePath);
       const createdTagSchema = createTagSchema(tagList);
-      console.log('createdTagSchema:', createdTagSchema.describe());
 
       async function processShowcaseSourceFile(relativeSource: string) {
         // Lookup in localized folder in priority

packages/docusaurus-plugin-content-showcase/src/options.ts

@@ -19,7 +19,8 @@ export const DEFAULT_OPTIONS: PluginOptions = {
   tags: '@site/showcase/tags.yaml',
 };
 
-export const tagSchema = Joi.array().items(
+export const tagSchema = Joi.object().pattern(
+  Joi.string(),
   Joi.object({
     label: Joi.string().required(),
     description: Joi.object({

packages/docusaurus-plugin-content-showcase/src/plugin-content-showcase.d.ts

@@ -9,6 +9,7 @@ declare module '@docusaurus/plugin-content-showcase' {
   import type {LoadContext, Plugin} from '@docusaurus/types';
 
   export type TagOption = {
+    [key: string]: {
       label: string;
       description: {
         message: string;
@@ -16,6 +17,7 @@ declare module '@docusaurus/plugin-content-showcase' {
       };
       color: string;
     };
+  };
 
   export type PluginOptions = {
     id?: string;

website/showcase/dino.yaml

@@ -3,4 +3,4 @@ description: 'Docusaurus dinooooooo'
 preview: https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Grosser_Panda.JPG/2560px-Grosser_Panda.JPG
 website: 'https://agile-ts.org/'
 source: 'https://github.com/agile-ts/documentation'
-tags: ['opensource', 'design']
+tags: ['opensource', 'favorite']

website/showcase/tags.yaml

@@ -1,59 +1,58 @@
-tags:
-  - favorite:
+favorite:
   label: 'Favorite'
   description:
     message: 'Our favorite Docusaurus sites that you must absolutely check out!'
     id: 'showcase.tag.favorite.description'
   color: '#e9669e'
-  - opensource:
+opensource:
   label: 'Open-Source'
   description:
     message: 'Open-Source Docusaurus sites can be useful for inspiration!'
     id: 'showcase.tag.opensource.description'
   color: '#39ca30'
-  - product:
+product:
   label: 'Product'
   description:
     message: 'Docusaurus sites associated to a commercial product!'
     id: 'showcase.tag.product.description'
   color: '#dfd545'
-  - design:
+design:
   label: 'Design'
   description:
     message: 'Beautiful Docusaurus sites, polished and standing out from the initial template!'
     id: 'showcase.tag.design.description'
   color: '#a44fb7'
-  - i18n:
+i18n:
   label: 'I18n'
   description:
     message: 'Translated Docusaurus sites using the internationalization support with more than 1 locale.'
     id: 'showcase.tag.i18n.description'
   color: '#127f82'
-  - versioning:
+versioning:
   label: 'Versioning'
   description:
     message: 'Docusaurus sites using the versioning feature of the docs plugin to manage multiple versions.'
     id: 'showcase.tag.versioning.description'
   color: '#fe6829'
-  - large:
+large:
   label: 'Large'
   description:
     message: 'Very large Docusaurus sites, including many more pages than the average!'
     id: 'showcase.tag.large.description'
   color: '#8c2f00'
-  - meta:
+meta:
   label: 'Meta'
   description:
     message: 'Docusaurus sites of Meta (formerly Facebook) projects'
     id: 'showcase.tag.meta.description'
   color: '#4267b2'
-  - personal:
+personal:
   label: 'Personal'
   description:
     message: 'Personal websites, blogs and digital gardens built with Docusaurus'
     id: 'showcase.tag.personal.description'
   color: '#14cfc3'
-  - rtl:
+rtl:
   label: 'RTL Direction'
   description:
     message: 'Docusaurus sites using the right-to-left reading direction support.'