mirror of
https://github.com/facebook/docusaurus.git
synced 2025-04-29 18:27:56 +02:00
feat: new init template classic-typescript (#5233)
* Add typescript template Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Update template Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Complete CLI Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Remove d.ts file Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Refactor Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Revert lock file changes Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Regenerate lock Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Add stylelint ignore Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Fix tsconfig Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Attempt to use symlink * More symlinks * Link all markdown * Link source files * Change to relative links Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Fix blogs Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Fix link Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Link config * Documentation Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Add option to index Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Add option Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Fix copying Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Provide suffix Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Always have colored output Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Remove return signature Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Update generate examples Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Update lock Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Fix tsconfig Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Use latest docusaurus Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Update lock Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Add type def Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * init: make classic first in list + mark as recommended + minor refactors * remove types.d.ts * add "yarn typecheck" script * Minor tweaks Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Generate example for TS Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Fix Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Add comment Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * No emit when running tsc Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * FIx generate examples Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Remove compiler options Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * This looks better Signed-off-by: Josh-Cena <sidachen2003@gmail.com> * Use new tsconfig Signed-off-by: Josh-Cena <sidachen2003@gmail.com> Co-authored-by: slorber <lorber.sebastien@gmail.com>
This commit is contained in:
Joshua Chen
GitHub
parent
6b396055f8
commit
28e25992ab
48 changed files with 353 additions and 85 deletions
|
|
@ -16,13 +16,3 @@ packages/docusaurus-*/lib-next/
|
|||
packages/docusaurus-plugin-ideal-image/copyUntypedFiles.js
|
||||
|
||||
packages/docusaurus-init/templates/facebook/.eslintrc.js
|
||||
|
||||
examples/bootstrap/babel.config.js
|
||||
examples/bootstrap/docusaurus.config.js
|
||||
examples/bootstrap/sidebars.js
|
||||
examples/bootstrap/src/pages/index.js
|
||||
examples/classic/babel.config.js
|
||||
examples/classic/docusaurus.config.js
|
||||
examples/classic/sidebars.js
|
||||
examples/classic/src/pages/index.js
|
||||
examples/facebook/.eslintrc.js
|
||||
|
|
|
|||
|
|
@ -126,12 +126,14 @@ module.exports = {
|
|||
overrides: [
|
||||
{
|
||||
files: [
|
||||
'packages/docusaurus-init/templates/bootstrap/**/*.js',
|
||||
'packages/docusaurus-init/templates/classic/**/*.js',
|
||||
'packages/docusaurus-init/templates/**/*.js',
|
||||
'packages/docusaurus-init/templates/**/*.ts',
|
||||
'packages/docusaurus-init/templates/**/*.tsx',
|
||||
],
|
||||
rules: {
|
||||
'header/header': OFF,
|
||||
'global-require': OFF,
|
||||
'@typescript-eslint/no-var-requires': OFF,
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
|||
1
.stylelintignore
Normal file
1
.stylelintignore
Normal file
|
|
@ -0,0 +1 @@
|
|||
packages/docusaurus-init/templates/
|
||||
|
|
@ -20,11 +20,14 @@ function generateTemplateExample(template) {
|
|||
);
|
||||
|
||||
// run the docusaurus script to bootstrap the template in the examples folder
|
||||
const command = template.endsWith('-typescript')
|
||||
? template.replace('-typescript', ' --typescript')
|
||||
: template;
|
||||
execSync(
|
||||
// /!\ we use the published init script on purpose,
|
||||
// because using the local init script is too early and could generate upcoming/unavailable config options
|
||||
// remember CodeSandbox templates will use the published version, not the repo version
|
||||
`npx @docusaurus/init@latest init examples/${template} ${template}`,
|
||||
`npx @docusaurus/init@latest init examples/${template} ${command}`,
|
||||
// `node ./packages/docusaurus-init/bin/index.js init examples/${template} ${template}`,
|
||||
{
|
||||
stdio: 'inherit',
|
||||
|
|
@ -143,6 +146,7 @@ function run() {
|
|||
console.log('-------');
|
||||
console.log('## Removing example folders...');
|
||||
rimraf.sync('./examples/classic');
|
||||
rimraf.sync('./examples/classic-typescript');
|
||||
rimraf.sync('./examples/facebook');
|
||||
rimraf.sync('./examples/bootstrap');
|
||||
console.log('');
|
||||
|
|
|
|||
|
|
@ -42,13 +42,17 @@ program
|
|||
.command('init [siteName] [template] [rootDir]')
|
||||
.option('--use-npm')
|
||||
.option('--skip-install')
|
||||
.option('--typescript')
|
||||
.description('Initialize website.')
|
||||
.action((siteName, template, rootDir = '.', {useNpm, skipInstall}) => {
|
||||
wrapCommand(init)(path.resolve(rootDir), siteName, template, {
|
||||
useNpm,
|
||||
skipInstall,
|
||||
});
|
||||
});
|
||||
.action(
|
||||
(siteName, template, rootDir = '.', {useNpm, skipInstall, typescript}) => {
|
||||
wrapCommand(init)(path.resolve(rootDir), siteName, template, {
|
||||
useNpm,
|
||||
skipInstall,
|
||||
typescript,
|
||||
});
|
||||
},
|
||||
);
|
||||
|
||||
program.arguments('<command>').action((cmd) => {
|
||||
program.outputHelp();
|
||||
|
|
|
|||
|
|
@ -11,9 +11,12 @@ import {execSync} from 'child_process';
|
|||
import prompts, {Choice} from 'prompts';
|
||||
import path from 'path';
|
||||
import shell from 'shelljs';
|
||||
import {kebabCase} from 'lodash';
|
||||
import {kebabCase, sortBy} from 'lodash';
|
||||
|
||||
function hasYarn(): boolean {
|
||||
const RecommendedTemplate = 'classic';
|
||||
const TypeScriptTemplateSuffix = '-typescript';
|
||||
|
||||
function hasYarn() {
|
||||
try {
|
||||
execSync('yarnpkg --version', {stdio: 'ignore'});
|
||||
return true;
|
||||
|
|
@ -22,14 +25,11 @@ function hasYarn(): boolean {
|
|||
}
|
||||
}
|
||||
|
||||
function isValidGitRepoUrl(gitRepoUrl: string): boolean {
|
||||
function isValidGitRepoUrl(gitRepoUrl: string) {
|
||||
return ['https://', 'git@'].some((item) => gitRepoUrl.startsWith(item));
|
||||
}
|
||||
|
||||
async function updatePkg(
|
||||
pkgPath: string,
|
||||
obj: Record<string, unknown>,
|
||||
): Promise<void> {
|
||||
async function updatePkg(pkgPath: string, obj: Record<string, unknown>) {
|
||||
const content = await fs.readFile(pkgPath, 'utf-8');
|
||||
const pkg = JSON.parse(content);
|
||||
const newPkg = Object.assign(pkg, obj);
|
||||
|
|
@ -37,6 +37,33 @@ async function updatePkg(
|
|||
await fs.outputFile(pkgPath, JSON.stringify(newPkg, null, 2));
|
||||
}
|
||||
|
||||
function readTemplates(templatesDir: string) {
|
||||
const templates = fs
|
||||
.readdirSync(templatesDir)
|
||||
.filter(
|
||||
(d) =>
|
||||
!d.startsWith('.') &&
|
||||
!d.startsWith('README') &&
|
||||
!d.endsWith(TypeScriptTemplateSuffix),
|
||||
);
|
||||
|
||||
// Classic should be first in list!
|
||||
return sortBy(templates, (t) => t !== RecommendedTemplate);
|
||||
}
|
||||
|
||||
function createTemplateChoices(templates: string[]) {
|
||||
function makeNameAndValueChoice(value: string): Choice {
|
||||
const title =
|
||||
value === RecommendedTemplate ? `${value} (recommended)` : value;
|
||||
return {title, value};
|
||||
}
|
||||
|
||||
return [
|
||||
...templates.map((template) => makeNameAndValueChoice(template)),
|
||||
makeNameAndValueChoice('Git repository'),
|
||||
];
|
||||
}
|
||||
|
||||
export default async function init(
|
||||
rootDir: string,
|
||||
siteName?: string,
|
||||
|
|
@ -44,23 +71,16 @@ export default async function init(
|
|||
cliOptions: Partial<{
|
||||
useNpm: boolean;
|
||||
skipInstall: boolean;
|
||||
typescript: boolean;
|
||||
}> = {},
|
||||
): Promise<void> {
|
||||
const useYarn = !cliOptions.useNpm ? hasYarn() : false;
|
||||
const templatesDir = path.resolve(__dirname, '../templates');
|
||||
const templates = fs
|
||||
.readdirSync(templatesDir)
|
||||
.filter((d) => !d.startsWith('.') && !d.startsWith('README'));
|
||||
|
||||
function makeNameAndValueChoice(value: string): Choice {
|
||||
return {title: value, value} as Choice;
|
||||
}
|
||||
|
||||
const gitChoice = makeNameAndValueChoice('Git repository');
|
||||
const templateChoices = [
|
||||
...templates.map((template) => makeNameAndValueChoice(template)),
|
||||
gitChoice,
|
||||
];
|
||||
const templates = readTemplates(templatesDir);
|
||||
const hasTS = (templateName: string) =>
|
||||
fs.pathExistsSync(
|
||||
path.resolve(templatesDir, `${templateName}${TypeScriptTemplateSuffix}`),
|
||||
);
|
||||
|
||||
let name = siteName;
|
||||
|
||||
|
|
@ -85,15 +105,26 @@ export default async function init(
|
|||
}
|
||||
|
||||
let template = reqTemplate;
|
||||
let useTS = cliOptions.typescript;
|
||||
// Prompt if template is not provided from CLI.
|
||||
if (!template) {
|
||||
const templatePrompt = await prompts({
|
||||
type: 'select',
|
||||
name: 'template',
|
||||
message: 'Select a template below...',
|
||||
choices: templateChoices,
|
||||
choices: createTemplateChoices(templates),
|
||||
});
|
||||
template = templatePrompt.template;
|
||||
if (template && !useTS && hasTS(template)) {
|
||||
const tsPrompt = await prompts({
|
||||
type: 'confirm',
|
||||
name: 'useTS',
|
||||
message:
|
||||
'This template is available in TypeScript. Do you want to use the TS variant?',
|
||||
initial: false,
|
||||
});
|
||||
useTS = tsPrompt.useTS;
|
||||
}
|
||||
}
|
||||
|
||||
// If user choose Git repository, we'll prompt for the url.
|
||||
|
|
@ -127,8 +158,18 @@ export default async function init(
|
|||
}
|
||||
} else if (template && templates.includes(template)) {
|
||||
// Docusaurus templates.
|
||||
if (useTS) {
|
||||
if (!hasTS(template)) {
|
||||
throw new Error(
|
||||
`Template ${template} doesn't provide the Typescript variant.`,
|
||||
);
|
||||
}
|
||||
template = `${template}${TypeScriptTemplateSuffix}`;
|
||||
}
|
||||
try {
|
||||
await fs.copy(path.resolve(templatesDir, template), dest);
|
||||
await fs.copy(path.resolve(templatesDir, template), dest, {
|
||||
dereference: true,
|
||||
});
|
||||
} catch (err) {
|
||||
console.log(
|
||||
`Copying Docusaurus template ${chalk.cyan(template)} failed!`,
|
||||
|
|
@ -167,7 +208,12 @@ export default async function init(
|
|||
console.log(`Installing dependencies with ${chalk.cyan(pkgManager)}...`);
|
||||
|
||||
try {
|
||||
shell.exec(`cd "${name}" && ${useYarn ? 'yarn' : 'npm install'}`);
|
||||
shell.exec(
|
||||
`cd "${name}" && ${
|
||||
// Force coloring the output, because the command is invoked by shelljs, not in the interative shell
|
||||
useYarn ? 'FORCE_COLOR=true yarn' : 'npm install --color always'
|
||||
}`,
|
||||
);
|
||||
} catch (err) {
|
||||
console.log(chalk.red('Installation failed.'));
|
||||
throw err;
|
||||
|
|
@ -181,27 +227,27 @@ export default async function init(
|
|||
? name
|
||||
: path.relative(process.cwd(), name);
|
||||
|
||||
console.log();
|
||||
console.log(`Successfully created "${chalk.cyan(cdpath)}".`);
|
||||
console.log('Inside that directory, you can run several commands:');
|
||||
console.log();
|
||||
console.log(chalk.cyan(` ${pkgManager} start`));
|
||||
console.log(' Starts the development server.');
|
||||
console.log();
|
||||
console.log(chalk.cyan(` ${pkgManager} ${useYarn ? '' : 'run '}build`));
|
||||
console.log(' Bundles your website into static files for production.');
|
||||
console.log();
|
||||
console.log(chalk.cyan(` ${pkgManager} ${useYarn ? '' : 'run '}serve`));
|
||||
console.log(' Serve the built website locally.');
|
||||
console.log();
|
||||
console.log(chalk.cyan(` ${pkgManager} deploy`));
|
||||
console.log(' Publish the website to GitHub pages.');
|
||||
console.log();
|
||||
console.log('We recommend that you begin by typing:');
|
||||
console.log();
|
||||
console.log(chalk.cyan(' cd'), cdpath);
|
||||
console.log(` ${chalk.cyan(`${pkgManager} start`)}`);
|
||||
console.log(`
|
||||
Successfully created "${chalk.cyan(cdpath)}".
|
||||
Inside that directory, you can run several commands:
|
||||
|
||||
console.log();
|
||||
console.log('Happy building awesome websites!');
|
||||
${chalk.cyan(`${pkgManager} start`)}
|
||||
Starts the development server.
|
||||
|
||||
${chalk.cyan(`${pkgManager} ${useYarn ? '' : 'run '}build`)}
|
||||
Bundles your website into static files for production.
|
||||
|
||||
${chalk.cyan(`${pkgManager} ${useYarn ? '' : 'run '}serve`)}
|
||||
Serves the built website locally.
|
||||
|
||||
${chalk.cyan(`${pkgManager} deploy`)}
|
||||
Publishes the website to GitHub pages.
|
||||
|
||||
We recommend that you begin by typing:
|
||||
|
||||
${chalk.cyan('cd')} ${cdpath}
|
||||
${chalk.cyan(`${pkgManager} start`)}
|
||||
|
||||
Happy building awesome websites!
|
||||
`);
|
||||
}
|
||||
|
|
|
|||
1
packages/docusaurus-init/templates/classic-typescript/README.md
Symbolic link
1
packages/docusaurus-init/templates/classic-typescript/README.md
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../classic/README.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../classic/babel.config.js
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../classic/blog/2019-05-28-hola.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../classic/blog/2019-05-29-hello-world.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../classic/blog/2019-05-30-welcome.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../classic/docs/intro.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/docs/tutorial-basics/_category_.json
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/docs/tutorial-basics/congratulations.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/docs/tutorial-basics/create-a-blog-post.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/docs/tutorial-basics/create-a-document.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/docs/tutorial-basics/create-a-page.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/docs/tutorial-basics/deploy-your-site.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/docs/tutorial-basics/markdown-features.mdx
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/docs/tutorial-extras/_category_.json
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/docs/tutorial-extras/manage-docs-versions.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/docs/tutorial-extras/translate-your-site.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../classic/docusaurus.config.js
|
||||
1
packages/docusaurus-init/templates/classic-typescript/gitignore
Symbolic link
1
packages/docusaurus-init/templates/classic-typescript/gitignore
Symbolic link
|
|
@ -0,0 +1 @@
|
|||
../classic/gitignore
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
{
|
||||
"name": "docusaurus-2-classic-typescript-template",
|
||||
"version": "2.0.0-beta.4",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"docusaurus": "docusaurus",
|
||||
"start": "docusaurus start",
|
||||
"build": "docusaurus build",
|
||||
"swizzle": "docusaurus swizzle",
|
||||
"deploy": "docusaurus deploy",
|
||||
"clear": "docusaurus clear",
|
||||
"serve": "docusaurus serve",
|
||||
"write-translations": "docusaurus write-translations",
|
||||
"write-heading-ids": "docusaurus write-heading-ids",
|
||||
"typecheck": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@docusaurus/core": "2.0.0-beta.4",
|
||||
"@docusaurus/preset-classic": "2.0.0-beta.4",
|
||||
"@mdx-js/react": "^1.6.21",
|
||||
"@svgr/webpack": "^5.5.0",
|
||||
"clsx": "^1.1.1",
|
||||
"file-loader": "^6.2.0",
|
||||
"prism-react-renderer": "^1.2.1",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"url-loader": "^4.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@docusaurus/module-type-aliases": "2.0.0-beta.4",
|
||||
"@tsconfig/docusaurus": "^1.0.3",
|
||||
"@types/react": "^17.0.14",
|
||||
"@types/react-helmet": "^6.1.2",
|
||||
"@types/react-router-dom": "^5.1.8",
|
||||
"typescript": "^4.3.5"
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.5%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
../classic/sidebars.js
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/src/components/HomepageFeatures.module.css
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
/**
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import styles from './HomepageFeatures.module.css';
|
||||
|
||||
type FeatureItem = {
|
||||
title: string;
|
||||
image: string;
|
||||
description: JSX.Element;
|
||||
};
|
||||
|
||||
const FeatureList: FeatureItem[] = [
|
||||
{
|
||||
title: 'Easy to Use',
|
||||
image: '/img/undraw_docusaurus_tree.svg',
|
||||
description: (
|
||||
<>
|
||||
Docusaurus was designed from the ground up to be easily installed and
|
||||
used to get your website up and running quickly.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Focus on What Matters',
|
||||
image: '/img/undraw_docusaurus_tree.svg',
|
||||
description: (
|
||||
<>
|
||||
Docusaurus lets you focus on your docs, and we'll do the chores. Go
|
||||
ahead and move your docs into the <code>docs</code> directory.
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: 'Powered by React',
|
||||
image: '/img/undraw_docusaurus_tree.svg',
|
||||
description: (
|
||||
<>
|
||||
Extend or customize your website layout by reusing React. Docusaurus can
|
||||
be extended while reusing the same header and footer.
|
||||
</>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
function Feature({title, image, description}: FeatureItem) {
|
||||
return (
|
||||
<div className={clsx('col col--4')}>
|
||||
<div className="text--center">
|
||||
<img className={styles.featureSvg} alt={title} src={image} />
|
||||
</div>
|
||||
<div className="text--center padding-horiz--md">
|
||||
<h3>{title}</h3>
|
||||
<p>{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function HomepageFeatures(): JSX.Element {
|
||||
return (
|
||||
<section className={styles.features}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
{FeatureList.map((props, idx) => (
|
||||
<Feature key={idx} {...props} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/src/css/custom.css
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/src/pages/index.module.css
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react';
|
||||
import clsx from 'clsx';
|
||||
import Layout from '@theme/Layout';
|
||||
import Link from '@docusaurus/Link';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import styles from './index.module.css';
|
||||
import HomepageFeatures from '../components/HomepageFeatures';
|
||||
|
||||
function HomepageHeader() {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
return (
|
||||
<header className={clsx('hero hero--primary', styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<h1 className="hero__title">{siteConfig.title}</h1>
|
||||
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className="button button--secondary button--lg"
|
||||
to="/docs/intro">
|
||||
Docusaurus Tutorial - 5min ⏱️
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Home(): JSX.Element {
|
||||
const {siteConfig} = useDocusaurusContext();
|
||||
return (
|
||||
<Layout
|
||||
title={`Hello from ${siteConfig.title}`}
|
||||
description="Description will go into a meta tag in <head />">
|
||||
<HomepageHeader />
|
||||
<main>
|
||||
<HomepageFeatures />
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/src/pages/markdown-page.md
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/static/img/docusaurus.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/static/img/favicon.ico
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/static/img/logo.svg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../../classic/static/img/tutorial/docsVersionDropdown.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../../classic/static/img/tutorial/localeDropdown.png
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/static/img/undraw_docusaurus_mountain.svg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/static/img/undraw_docusaurus_react.svg
|
||||
|
|
@ -0,0 +1 @@
|
|||
../../../classic/static/img/undraw_docusaurus_tree.svg
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
// This file is not used in compilation. It is here just for a nice editor experience.
|
||||
"extends": "@tsconfig/docusaurus/tsconfig.json",
|
||||
"include": ["src/"]
|
||||
}
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
/* stylelint-disable docusaurus/copyright-header */
|
||||
|
||||
.features {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
/* stylelint-disable docusaurus/copyright-header */
|
||||
/**
|
||||
* Any CSS included here will be global. The classic template
|
||||
* bundles Infima by default. Infima is a CSS framework designed to
|
||||
|
|
|
|||
|
|
@ -5,5 +5,7 @@
|
|||
"tsBuildInfoFile": "./lib/.tsbuildinfo",
|
||||
"rootDir": "src",
|
||||
"outDir": "lib"
|
||||
}
|
||||
},
|
||||
"include": ["src/"],
|
||||
"exclude": ["templates/"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,6 +52,12 @@ If you want to skip installing dependencies, use the `--skip-install` option, li
|
|||
npx @docusaurus/init@latest init my-website classic --skip-install
|
||||
```
|
||||
|
||||
You can also use the template's TypeScript variant by passing the `--typescript` flag.
|
||||
|
||||
```bash
|
||||
npx @docusaurus/init@latest init my-website classic --typescript
|
||||
```
|
||||
|
||||
## Project structure {#project-structure}
|
||||
|
||||
Assuming you chose the classic template and named your site `my-website`, you will see the following files generated under a new directory `my-website/`:
|
||||
|
|
|
|||
|
|
@ -3,9 +3,19 @@ id: typescript-support
|
|||
title: TypeScript Support
|
||||
---
|
||||
|
||||
## Initialization {#initialization}
|
||||
|
||||
Docusaurus supports writing and using TypeScript theme components. If the init template provides a Typescript variant, you can directly initialize a site with full TypeScript support by using the `--typescript` flag.
|
||||
|
||||
```bash
|
||||
npx @docusaurus/init@latest init my-website classic --typescript
|
||||
```
|
||||
|
||||
Below are some guides on how to migrate an existing project to TypeScript.
|
||||
|
||||
## Setup {#setup}
|
||||
|
||||
Docusaurus supports writing and using TypeScript theme components. To start using TypeScript, add `@docusaurus/module-type-aliases` and some `@types` dependencies to your project:
|
||||
To start using TypeScript, add `@docusaurus/module-type-aliases` and some `@types` dependencies to your project:
|
||||
|
||||
```bash npm2yarn
|
||||
npm install --save-dev typescript @docusaurus/module-type-aliases @types/react @types/react-router-dom @types/react-helmet @tsconfig/docusaurus
|
||||
|
|
|
|||
37
yarn.lock
37
yarn.lock
|
|
@ -3849,6 +3849,11 @@
|
|||
resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.1.1.tgz#3348564048e7a2d7398c935d466c0414ebb6a669"
|
||||
integrity sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==
|
||||
|
||||
"@tsconfig/docusaurus@^1.0.3":
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/@tsconfig/docusaurus/-/docusaurus-1.0.3.tgz#040582bdceb27336d7abf2301fb0f4c909a9ac2f"
|
||||
integrity sha512-g4X3HvNXbkowvEdPLu759fZjbXoazPjvi2a/fAAITp2yMOGeSKpHuY6N538ZY+1u6Z91Er3QKPtYGdZQ+tqXUA==
|
||||
|
||||
"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
|
||||
version "7.1.14"
|
||||
resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.14.tgz#faaeefc4185ec71c389f4501ee5ec84b170cc402"
|
||||
|
|
@ -4340,10 +4345,10 @@
|
|||
"@types/webpack" "^4"
|
||||
"@types/webpack-dev-server" "*"
|
||||
|
||||
"@types/react-helmet@*", "@types/react-helmet@^6.0.0":
|
||||
version "6.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.1.tgz#4fde22cbcaa1b461642e1d719cc6162d95acb110"
|
||||
integrity sha512-VmSCMz6jp/06DABoY60vQa++h1YFt0PfAI23llxBJHbowqFgLUL0dhS1AQeVPNqYfRp9LAfokrfWACTNeobOrg==
|
||||
"@types/react-helmet@*", "@types/react-helmet@^6.0.0", "@types/react-helmet@^6.1.2":
|
||||
version "6.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.2.tgz#e9d7d16b29e4ec5716711c52c35c3cec45819eac"
|
||||
integrity sha512-dcfAZNlWb5JYFbO9CGfrPWLJAyFcT6UeR3u35eBbv8liY2Rg4K7fM1G5+HnwVgot+C+kVwXAZ8pLEn2jsMfTDg==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
|
|
@ -4364,10 +4369,10 @@
|
|||
"@types/react" "*"
|
||||
"@types/react-router" "*"
|
||||
|
||||
"@types/react-router-dom@*":
|
||||
version "5.1.7"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.7.tgz#a126d9ea76079ffbbdb0d9225073eb5797ab7271"
|
||||
integrity sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==
|
||||
"@types/react-router-dom@*", "@types/react-router-dom@^5.1.8":
|
||||
version "5.1.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.8.tgz#bf3e1c8149b3d62eaa206d58599de82df0241192"
|
||||
integrity sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==
|
||||
dependencies:
|
||||
"@types/history" "*"
|
||||
"@types/react" "*"
|
||||
|
|
@ -4381,10 +4386,10 @@
|
|||
"@types/history" "*"
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react@*", "@types/react@^17.0.2":
|
||||
version "17.0.11"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.11.tgz#67fcd0ddbf5a0b083a0f94e926c7d63f3b836451"
|
||||
integrity sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==
|
||||
"@types/react@*", "@types/react@^17.0.14", "@types/react@^17.0.2":
|
||||
version "17.0.15"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.15.tgz#c7533dc38025677e312606502df7656a6ea626d0"
|
||||
integrity sha512-uTKHDK9STXFHLaKv6IMnwp52fm0hwU+N89w/p9grdUqcFA6WuqDyPhaWopbNyE1k/VhgzmHl8pu1L4wITtmlLw==
|
||||
dependencies:
|
||||
"@types/prop-types" "*"
|
||||
"@types/scheduler" "*"
|
||||
|
|
@ -19489,10 +19494,10 @@ typescript@^3.8.3, typescript@^3.9.7:
|
|||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.9.tgz#e69905c54bc0681d0518bd4d587cc6f2d0b1a674"
|
||||
integrity sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==
|
||||
|
||||
typescript@^4.1.5:
|
||||
version "4.3.2"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805"
|
||||
integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw==
|
||||
typescript@^4.1.5, typescript@^4.3.5:
|
||||
version "4.3.5"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4"
|
||||
integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==
|
||||
|
||||
ua-parser-js@^0.7.18:
|
||||
version "0.7.28"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue