Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: showcase #9967

Draft
wants to merge 87 commits into
base: main
Choose a base branch
from
Draft

feat: showcase #9967

wants to merge 87 commits into from

Conversation

OzakIOne
Copy link
Contributor

@OzakIOne OzakIOne commented Mar 20, 2024

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • 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

  • a page per site
    • a site = 1 yaml or markdown file in a folder for images
      • add support for linking local images
  • 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

  • add tests
    • add more test and cover more cases

Test links

Deploy preview & tests

showcaseAll

Related issues/PRs

#6882

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Mar 20, 2024
Copy link

netlify bot commented Mar 20, 2024

[V2]

Name Link
🔨 Latest commit dee675c
🔍 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...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

github-actions bot commented Mar 20, 2024

⚡️ 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

Copy link

github-actions bot commented Mar 20, 2024

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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

packages/docusaurus-plugin-showcase/README.md Outdated Show resolved Hide resolved
packages/docusaurus-plugin-showcase/package.json Outdated Show resolved Hide resolved
packages/docusaurus-plugin-showcase/src/options.ts Outdated Show resolved Hide resolved
packages/docusaurus-plugin-showcase/src/options.ts Outdated Show resolved Hide resolved
packages/docusaurus-theme-common/src/internal.ts Outdated Show resolved Hide resolved
packages/docusaurus-theme-common/src/contexts/showcase.tsx Outdated Show resolved Hide resolved
packages/docusaurus-theme-common/src/contexts/showcase.tsx Outdated Show resolved Hide resolved
packages/docusaurus-theme-common/src/contexts/showcase.tsx Outdated Show resolved Hide resolved
packages/docusaurus-theme-common/src/contexts/showcase.tsx Outdated Show resolved Hide resolved
project-words.txt Outdated Show resolved Hide resolved
Comment on lines +44 to +52
const Tags = useShowcaseTags();
const TagList = Object.keys(Tags) as TagType[];

const tagObjects = tags.map((tag) => ({tag, ...Tags[tag]}));

// Keep same order for all tags
const tagObjectsSorted = sortBy(tagObjects, (tagObject) =>
TagList.indexOf(tagObject.tag),
);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The plugin should probably short the site tags on the nodejs side, this way the theme receives already-sorted tags and we don't need to run any extra runtime logic

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants