diff --git a/packages/docusaurus-plugin-content-pages/src/__tests__/__fixtures__/website/src/pages/typescript.tsx b/packages/docusaurus-plugin-content-pages/src/__tests__/__fixtures__/website/src/pages/typescript.tsx new file mode 100644 index 000000000000..055fb7c483a0 --- /dev/null +++ b/packages/docusaurus-plugin-content-pages/src/__tests__/__fixtures__/website/src/pages/typescript.tsx @@ -0,0 +1,22 @@ +/** + * 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 Head from '@docusaurus/Head'; + +export default class Home extends React.Component { + render() { + return ( +
+ + Hello + +
TypeScript...
+
+ ); + } +} diff --git a/packages/docusaurus-plugin-content-pages/src/__tests__/index.test.ts b/packages/docusaurus-plugin-content-pages/src/__tests__/index.test.ts index 68c3473b4ef1..f79fa915246a 100644 --- a/packages/docusaurus-plugin-content-pages/src/__tests__/index.test.ts +++ b/packages/docusaurus-plugin-content-pages/src/__tests__/index.test.ts @@ -33,6 +33,10 @@ describe('docusaurus-plugin-content-pages', () => { permalink: '/', source: path.join('@site', pluginPath, 'index.js'), }, + { + permalink: '/typescript', + source: path.join('@site', pluginPath, 'typescript.tsx'), + }, { permalink: '/hello/world', source: path.join('@site', pluginPath, 'hello', 'world.js'), diff --git a/packages/docusaurus-utils/src/index.ts b/packages/docusaurus-utils/src/index.ts index f42f0385c010..a8a457ab1fc7 100644 --- a/packages/docusaurus-utils/src/index.ts +++ b/packages/docusaurus-utils/src/index.ts @@ -61,7 +61,7 @@ export function objectWithKeySorted(obj: Object) { } const indexRE = /(^|.*\/)index\.(md|js|jsx|ts|tsx)$/i; -const extRE = /\.(md|js)$/; +const extRE = /\.(md|js|tsx)$/; /** * Convert filepath to url path. diff --git a/website/docs/creating-pages.md b/website/docs/creating-pages.md index e8dbc01d2590..2d9e97961a78 100644 --- a/website/docs/creating-pages.md +++ b/website/docs/creating-pages.md @@ -41,6 +41,12 @@ Once you save the file, the development server will automatically reload the cha Each page doesn't come with any styling. You will need to import the `Layout` component from `@theme/Layout` and wrap your contents within that component if you want the navbar and/or footer to appear. +:::tip + +You can also create a page in TypeScript, in which case the its file name should use the `.tsx` extension, eg. `hello.tsx`. + +::: + ## Routing If you are familiar with other static site generators like Jekyll and Next, this routing approach will feel familiar to you. Any JavaScript file you create under `/src/pages/` directory will be automatically converted to a website page, following the `/src/pages/` directory hierarchy. For example: