refactor(init): share common files between templates

[Josh-Cena]

Motivation

1. NPM doesn't support packaging symlinks, so the classic-typescript template doesn't work.
2. Share more resources between templates to deduplicate & unify content.

FS structure:

Before

After

. ├── README.MD ├── bootstrap │ ├── README.md │ ├── babel.config.js │ ├── blog │ │ ├── 2019-05-28-hola.md │ │ ├── 2019-05-29-hello-world.md │ │ ├── 2019-05-30-welcome.md │ │ ├── 2020-04-14-blog-plugin.md │ │ └── 2020-04-14-large-blog-post.md │ ├── docs │ │ ├── doc1.md │ │ ├── doc2.md │ │ ├── doc3.md │ │ └── interactiveDoc.mdx │ ├── docusaurus.config.js │ ├── package.json │ ├── sidebars.js │ ├── src │ │ └── pages │ │ ├── index.js │ │ ├── markdown-page.md │ │ └── styles.module.css │ └── static │ └── img │ ├── favicon.ico │ ├── logo.svg │ ├── undraw_docusaurus_mountain.svg │ ├── undraw_docusaurus_react.svg │ └── undraw_docusaurus_tree.svg ├── classic │ ├── README.md │ ├── babel.config.js │ ├── blog │ │ ├── 2019-05-28-hola.md │ │ ├── 2019-05-29-hello-world.md │ │ └── 2019-05-30-welcome.md │ ├── docs │ │ ├── intro.md │ │ ├── tutorial-basics │ │ │ ├── _category_.json │ │ │ ├── congratulations.md │ │ │ ├── create-a-blog-post.md │ │ │ ├── create-a-document.md │ │ │ ├── create-a-page.md │ │ │ ├── deploy-your-site.md │ │ │ └── markdown-features.mdx │ │ └── tutorial-extras │ │ ├── _category_.json │ │ ├── manage-docs-versions.md │ │ └── translate-your-site.md │ ├── docusaurus.config.js │ ├── gitignore │ ├── package.json │ ├── sidebars.js │ ├── src │ │ ├── components │ │ │ ├── HomepageFeatures.js │ │ │ └── HomepageFeatures.module.css │ │ ├── css │ │ │ └── custom.css │ │ └── pages │ │ ├── index.js │ │ ├── index.module.css │ │ └── markdown-page.md │ └── static │ └── img │ ├── docusaurus.png │ ├── favicon.ico │ ├── logo.svg │ ├── tutorial │ │ ├── docsVersionDropdown.png │ │ └── localeDropdown.png │ ├── undraw_docusaurus_mountain.svg │ ├── undraw_docusaurus_react.svg │ └── undraw_docusaurus_tree.svg ├── classic-typescript │ ├── README.md (link) │ ├── babel.config.js (link) │ ├── blog │ │ ├── 2019-05-28-hola.md (link) │ │ ├── 2019-05-29-hello-world.md (link) │ │ └── 2019-05-30-welcome.md (link) │ ├── docs │ │ ├── intro.md (link) │ │ ├── tutorial-basics │ │ │ ├── _category_.json (link) │ │ │ ├── congratulations.md (link) │ │ │ ├── create-a-blog-post.md (link) │ │ │ ├── create-a-document.md (link) │ │ │ ├── create-a-page.md (link) │ │ │ ├── deploy-your-site.md (link) │ │ │ └── markdown-features.mdx (link) │ │ └── tutorial-extras │ │ ├── _category_.json (link) │ │ ├── manage-docs-versions.md (link) │ │ └── translate-your-site.md (link) │ ├── docusaurus.config.js (link) │ ├── gitignore (link) │ ├── package.json │ ├── sidebars.js (link) │ ├── src │ │ ├── components │ │ │ ├── HomepageFeatures.module.css (link) │ │ │ └── HomepageFeatures.tsx │ │ ├── css │ │ │ └── custom.css (link) │ │ └── pages │ │ ├── index.module.css (link) │ │ ├── index.tsx │ │ └── markdown-page.md (link) │ ├── static │ │ └── img │ │ ├── docusaurus.png (link) │ │ ├── favicon.ico (link) │ │ ├── logo.svg (link) │ │ ├── tutorial │ │ │ ├── docsVersionDropdown.png (link) │ │ │ └── localeDropdown.png (link) │ │ ├── undraw_docusaurus_mountain.svg (link) │ │ ├── undraw_docusaurus_react.svg (link) │ │ └── undraw_docusaurus_tree.svg (link) │ └── tsconfig.json └── facebook ├── README.md ├── babel.config.js ├── blog │ ├── 2019-05-28-hola.md │ ├── 2019-05-29-hello-world.md │ └── 2019-05-30-welcome.md ├── docs │ ├── doc1.md │ ├── doc2.md │ ├── doc3.md │ └── interactiveDoc.mdx ├── docusaurus.config.js ├── gitignore ├── package.json ├── sidebars.js ├── src │ ├── css │ │ └── custom.css │ └── pages │ ├── index.js │ ├── markdown-page.md │ └── styles.module.css └── static └── img ├── favicon.ico ├── logo.svg ├── oss_logo.png ├── undraw_docusaurus_mountain.svg ├── undraw_docusaurus_react.svg └── undraw_docusaurus_tree.svg

. ├── README.MD ├── bootstrap │ ├── docusaurus.config.js │ ├── package.json │ └── src │ └── pages │ ├── index.js │ └── styles.module.css ├── classic │ ├── docusaurus.config.js │ ├── package.json │ └── src │ ├── components │ │ ├── HomepageFeatures.js │ │ └── HomepageFeatures.module.css │ ├── css │ │ └── custom.css │ └── pages │ ├── index.js │ └── index.module.css ├── classic-typescript │ ├── package.json │ ├── src │ │ ├── components │ │ │ ├── HomepageFeatures.module.css (link) │ │ │ └── HomepageFeatures.tsx │ │ └── pages │ │ ├── index.module.css (link) │ │ └── index.tsx │ └── tsconfig.json ├── facebook │ ├── README.md │ ├── babel.config.js │ ├── docusaurus.config.js │ ├── gitignore │ ├── package.json │ ├── sidebars.js │ └── src │ ├── css │ │ └── custom.css │ └── pages │ ├── index.js │ └── styles.module.css └── shared ├── README.md ├── babel.config.js ├── blog │ ├── 2019-05-28-hola.md │ ├── 2019-05-29-hello-world.md │ └── 2019-05-30-welcome.md ├── docs │ ├── intro.md │ ├── tutorial-basics │ │ ├── _category_.json │ │ ├── congratulations.md │ │ ├── create-a-blog-post.md │ │ ├── create-a-document.md │ │ ├── create-a-page.md │ │ ├── deploy-your-site.md │ │ └── markdown-features.mdx │ └── tutorial-extras │ ├── _category_.json │ ├── manage-docs-versions.md │ └── translate-your-site.md ├── gitignore ├── sidebars.js ├── src │ └── pages │ └── markdown-page.md └── static └── img ├── docusaurus.png ├── favicon.ico ├── logo.svg ├── tutorial │ ├── docsVersionDropdown.png │ └── localeDropdown.png ├── undraw_docusaurus_mountain.svg ├── undraw_docusaurus_react.svg └── undraw_docusaurus_tree.svg

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

$ yarn docusaurus-init init test-website classic --typescript --skip-install

Related PRs

Followup of #5233.

Considerations

This may lead to more confusions for potential contributors. Should we symlink all the files still, so that contributors can edit the files in the most straightforward location?

[netlify]

✔️ [V2]

🔨 Explore the source changes: 524357c

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/611289da9655350007574b60

😎 Browse the preview: https://deploy-preview-5315--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟢 Performance	96
🟢 Accessibility	98
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-5315--docusaurus-2.netlify.app/

[slorber]

Thanks, that looks fine.

You should also share the static folder because FB template can't run without some images used in the tutorial:

[slorber]

hmm, looks like another thing we could add to the base config 🤪

Opened a PR here: tsconfig/bases#71

[Josh-Cena]

Sure, let's hold on till that's merged

[slorber]

Thanks 👍 Going to merge this.

I think we'll want in the future t only have a TS classic template folder, and maybe generate the JS template automatically with TSC targeting esnext? (like we do for the theme js/ts swizzling). That feels a bit odd to have to maintain the js/ts homepage separately. Not a priority though.

[Josh-Cena]

Errr—Shouldn't we wait for the new TS base config?

[slorber]

@Josh-Cena no worry we'll make another PR if needed. We'll need to update our website's ts config too anyway

[Josh-Cena]

I think we'll want in the future t only have a TS classic template folder, and maybe generate the JS template automatically with TSC targeting esnext? (like we do for the theme js/ts swizzling).

I thought about that as well. Don't know exactly how Sam did it back then, but definitely worth looking into

One thing to consider: the JS template right now is not simply TS with all the types stripped. For example, they have different approaches to how feature images are imported (partly because I don't know how to type the require('.svg').default result)

[slorber]

I thought about that as well. Don't know exactly how Sam did it back then, but definitely worth looking into

We transpile the theme with 2 different babel configs (check babel.config.js), leading to 2 distinct output folders used as sources for swizzled comps:

One thing to consider: the JS template right now is not simply TS with all the types stripped. For example, they have different approaches to how feature images are imported (partly because I don't know how to type the require('.svg').default result)

Oh yeah didn't notice. That type should be React.ComponentType<React.ComponentProps<'svg'>>