feat: showcase

[OzakIOne]

Pre-flight checklist

• [x] I have read the Contributing Guidelines on pull requests.
• [x] If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• [x] If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

• [x] a page per site
  • [x] a site = 1 yaml or markdown file in a folder for images
    • [ ] add support for linking local images
• [x] file tags.yaml
• [ ] custom attributes in yaml / frontmatter
• [ ] good plugin code / file structure (take example on docs/blog)
• [ ] pluginId ?
• [ ] i18n support
• [ ] merge https://github.com/facebook/docusaurus/tree/ozaki/showcaseSites

Test Plan

• [x] add tests
  • [ ] add more test and cover more cases

Test links

Deploy preview & tests

showcaseAll

Related issues/PRs

#6882

[netlify[bot]]

✅ [V2]

Name	Link
🔨 Latest commit	dee675c82b516804a05302041712690c36fa289d
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6645e8f7173b9900088acec4
😎 Deploy Preview	https://deploy-preview-9967--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions[bot]]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 68	🟢 98	🟢 96	🟢 100	🟠 88	Report
/docs/installation	🟠 57	🟢 96	🟢 100	🟢 100	🟠 88	Report
/docs/category/getting-started	🟠 76	🟢 100	🟢 100	🟢 90	🟠 88	Report
/blog	🟠 66	🟢 100	🟢 100	🟢 90	🟠 88	Report
/blog/preparing-your-site-for-docusaurus-v3	🟠 63	🟢 96	🟢 100	🟢 100	🟠 88	Report
/blog/tags/release	🟠 70	🟢 100	🟢 100	🟠 80	🟠 88	Report
/blog/tags	🟠 75	🟢 100	🟢 100	🟢 90	🟠 88	Report

[github-actions[bot]]

Size Change: +4.94 kB (+0.29%)

Total Size: 1.72 MB

Filename	Size	Change
website/.docusaurus/docusaurus.config.mjs	27 kB	+95 B (+0.35%)
website/.docusaurus/globalData.json	107 kB	+203 B (+0.19%)
website/.docusaurus/registry.js	277 kB	+1.14 kB (+0.41%)
website/.docusaurus/routes.js	179 kB	+398 B (+0.22%)
website/.docusaurus/routesChunkNames.json	120 kB	+290 B (+0.24%)
website/.docusaurus/site-metadata.json	2.33 kB	+154 B (+7.09%)	🔍
website/build/assets/css/styles.********.css	114 kB	+1.36 kB (+1.21%)
website/build/assets/js/main.********.js	855 kB	+1.3 kB (+0.15%)

ℹ️ View Unchanged

Filename	Size	Change
website/.docusaurus/codeTranslations.json	2 B	0 B
website/.docusaurus/i18n.json	930 B	0 B
website/build/index.html	38.1 kB	+1 B (0%)

_{compressed-size-action}

[OzakIOne]

Been trying to process markdown showcase page however I don't understand the logic looking at plugin page, loadContent returns

return {
	type: 'mdx',
	permalink,
	source: aliasedSourcePath,
	title: frontMatter.title ?? contentTitle,
	description: frontMatter.description ?? excerpt,
	frontMatter,
	unlisted,
};

and contentLoaded does this :

      await Promise.all(
        content.map(async (metadata) => {
          const {permalink, source} = metadata;
          const routeMetadata = createPageRouteMetadata(metadata);
          if (metadata.type === 'mdx') {
            await createData( // ozaki: why dont we store this value in a const and then pass it to addRoute modules.content ?
              // Note that this created data path must be in sync with
              // metadataPath provided to mdx-loader.
              `${docuHash(metadata.source)}.json`,
              JSON.stringify(metadata, null, 2),
            );
            addRoute({
              path: permalink,
              component: options.mdxPageComponent, // ozaki: how does the content is rendered in the component ? 
              exact: true,
              metadata: routeMetadata,
              modules: {
                content: source, // ozaki: how does the content is a aliasedPath ?
              },
            });
          } else {
		// process things that are not mdx
          }
        }),
      );
      ```

[OzakIOne]

Trying to implement image insertion, let's say we have this file structure :

website/
	src/
		showcase/
			site/
				site.yml
				preview.jpg

I wonder how to resolve the image path when rendering to the component, I've made it work with the assets folder but I think its better to let preview images aside .yml files