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,12 +91,14 @@ describe('normalizeShowcasePluginOptions', () => {
     const userOptions = {
       tags: [
         {
-          label: 'foo',
+          foo: {
-          description: {
+            label: 'foo',
-            message: 'bar',
+            description: {
-            id: 'baz',
+              message: 'bar',
+              id: 'baz',
+            },
+            color: 'red',
           },
-          color: 'red',
         },
       ],
     };

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

@@ -31,33 +31,23 @@ export function getContentPathList(
   return [contentPaths.contentPathLocalized, contentPaths.contentPath];
 }
 
-async function getTagsDefinition(
+async function getTagsList(filePath: string | TagOption[]): Promise<string[]> {
-  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);
+  const unsafeYaml = Yaml.load(rawYaml);
-  console.log('unsafeYaml:', unsafeYaml);
+  const safeYaml = tagSchema.validate(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);
 
   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,12 +9,14 @@ declare module '@docusaurus/plugin-content-showcase' {
   import type {LoadContext, Plugin} from '@docusaurus/types';
 
   export type TagOption = {
-    label: string;
+    [key: string]: {
-    description: {
+      label: string;
-      message: string;
+      description: {
-      id: string;
+        message: string;
+        id: string;
+      };
+      color: string;
     };
-    color: string;
   };
 
   export type PluginOptions = {

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