diff --git a/.prettierignore b/.prettierignore index 851882ce8d..4f32c3d676 100644 --- a/.prettierignore +++ b/.prettierignore @@ -6,6 +6,7 @@ packages/docusaurus-utils/lib/ packages/docusaurus/lib/ packages/docusaurus-init/lib/ packages/docusaurus-plugin-client-redirects/lib/ +packages/docusaurus-init/templates/**/*.md packages/docusaurus-plugin-content-blog/lib/ packages/docusaurus-plugin-content-docs/lib/ packages/docusaurus-plugin-content-pages/lib/ diff --git a/admin/testing-changes-on-Docusaurus-itself.md b/admin/testing-changes-on-Docusaurus-itself.md index a675521c05..8624bb38f8 100644 --- a/admin/testing-changes-on-Docusaurus-itself.md +++ b/admin/testing-changes-on-Docusaurus-itself.md @@ -30,9 +30,8 @@ Use the following code in VSCode to enable breakpoints. Please ensure you have a "type": "node", "request": "launch", "cwd": "${workspaceFolder}/website", - "runtimeExecutable": "npm", - "runtimeArgs": ["run", "start-debug"], - "port": 9229 + "program": "${workspaceFolder}/website/node_modules/@docusaurus/core/bin/docusaurus.js", + "args": ["start"] } ] } diff --git a/docs/guides-search.md b/docs/guides-search.md index c0b1c3365b..88b9bf10b6 100644 --- a/docs/guides-search.md +++ b/docs/guides-search.md @@ -17,6 +17,7 @@ const siteConfig = { algolia: { apiKey: 'my-api-key', indexName: 'my-index-name', + appId: 'app-id', // Optional, if you run the DocSearch crawler on your own algoliaOptions: {} // Optional, if provided by Algolia }, ... diff --git a/packages/docusaurus-init/templates/bootstrap/docs/doc1.md b/packages/docusaurus-init/templates/bootstrap/docs/doc1.md index 92fa8fbe45..69bc29545b 100644 --- a/packages/docusaurus-init/templates/bootstrap/docs/doc1.md +++ b/packages/docusaurus-init/templates/bootstrap/docs/doc1.md @@ -28,9 +28,9 @@ To serve as an example page when styling markdown based Docusaurus sites. ## Emphasis -Emphasis, aka italics, with _asterisks_ or _underscores_. +Emphasis, aka italics, with *asterisks* or _underscores_. -Strong emphasis, aka bold, with **asterisks** or **underscores**. +Strong emphasis, aka bold, with **asterisks** or __underscores__. Combined emphasis with **asterisks and _underscores_**. @@ -41,27 +41,25 @@ Strikethrough uses two tildes. ~~Scratch this.~~ ## Lists 1. First ordered list item -1. Another item ⋅⋅\* Unordered sub-list. -1. Actual numbers don't matter, just that it's a number ⋅⋅1. Ordered sub-list +1. Another item + - Unordered sub-list. +1. Actual numbers don't matter, just that it's a number + 1. Ordered sub-list 1. And another item. -⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown). +* Unordered list can use asterisks -⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ ⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅ ⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.) +- Or minuses -- Unordered list can use asterisks - -* Or minuses - -- Or pluses ++ Or pluses --- ## Links -[I'm an inline-style link](https://www.google.com) +[I'm an inline-style link](https://www.google.com/) -[I'm an inline-style link with title](https://www.google.com "Google's Homepage") +[I'm an inline-style link with title](https://www.google.com/ "Google's Homepage") [I'm a reference-style link][arbitrary case-insensitive reference text] @@ -71,13 +69,13 @@ Strikethrough uses two tildes. ~~Scratch this.~~ Or leave it empty and use the [link text itself]. -URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or and sometimes example.com (but not on Github, for example). +URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com/ or and sometimes example.com (but not on GitHub, for example). Some text to show that the reference links can follow later. -[arbitrary case-insensitive reference text]: https://www.mozilla.org -[1]: http://slashdot.org -[link text itself]: http://www.reddit.com +[arbitrary case-insensitive reference text]: https://www.mozilla.org/ +[1]: http://slashdot.org/ +[link text itself]: http://www.reddit.com/ --- diff --git a/packages/docusaurus-init/templates/bootstrap/docs/doc2.md b/packages/docusaurus-init/templates/bootstrap/docs/doc2.md index 2462b7f810..16cfce4082 100644 --- a/packages/docusaurus-init/templates/bootstrap/docs/doc2.md +++ b/packages/docusaurus-init/templates/bootstrap/docs/doc2.md @@ -3,4 +3,4 @@ id: doc2 title: Document Number 2 --- -This is a link to [another document.](doc3.md) This is a link to an [external page.](http://www.example.com) +This is a link to [another document.](doc3.md) This is a link to an [external page.](http://www.example.com/) diff --git a/packages/docusaurus-init/templates/bootstrap/docs/mdx.md b/packages/docusaurus-init/templates/bootstrap/docs/mdx.md index 1462851227..f0210fb70d 100644 --- a/packages/docusaurus-init/templates/bootstrap/docs/mdx.md +++ b/packages/docusaurus-init/templates/bootstrap/docs/mdx.md @@ -10,7 +10,7 @@ export const Highlight = ({children, color}) => ( {children} ); + }}>{children} ); Docusaurus green and Facebook blue are my favorite colors. diff --git a/packages/docusaurus-init/templates/bootstrap/static/img/favicon.ico b/packages/docusaurus-init/templates/bootstrap/static/img/favicon.ico index be74abd69a..c01d54bcd3 100644 Binary files a/packages/docusaurus-init/templates/bootstrap/static/img/favicon.ico and b/packages/docusaurus-init/templates/bootstrap/static/img/favicon.ico differ diff --git a/packages/docusaurus-init/templates/classic/docs/doc1.md b/packages/docusaurus-init/templates/classic/docs/doc1.md index 92fa8fbe45..69bc29545b 100644 --- a/packages/docusaurus-init/templates/classic/docs/doc1.md +++ b/packages/docusaurus-init/templates/classic/docs/doc1.md @@ -28,9 +28,9 @@ To serve as an example page when styling markdown based Docusaurus sites. ## Emphasis -Emphasis, aka italics, with _asterisks_ or _underscores_. +Emphasis, aka italics, with *asterisks* or _underscores_. -Strong emphasis, aka bold, with **asterisks** or **underscores**. +Strong emphasis, aka bold, with **asterisks** or __underscores__. Combined emphasis with **asterisks and _underscores_**. @@ -41,27 +41,25 @@ Strikethrough uses two tildes. ~~Scratch this.~~ ## Lists 1. First ordered list item -1. Another item ⋅⋅\* Unordered sub-list. -1. Actual numbers don't matter, just that it's a number ⋅⋅1. Ordered sub-list +1. Another item + - Unordered sub-list. +1. Actual numbers don't matter, just that it's a number + 1. Ordered sub-list 1. And another item. -⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown). +* Unordered list can use asterisks -⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ ⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅ ⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.) +- Or minuses -- Unordered list can use asterisks - -* Or minuses - -- Or pluses ++ Or pluses --- ## Links -[I'm an inline-style link](https://www.google.com) +[I'm an inline-style link](https://www.google.com/) -[I'm an inline-style link with title](https://www.google.com "Google's Homepage") +[I'm an inline-style link with title](https://www.google.com/ "Google's Homepage") [I'm a reference-style link][arbitrary case-insensitive reference text] @@ -71,13 +69,13 @@ Strikethrough uses two tildes. ~~Scratch this.~~ Or leave it empty and use the [link text itself]. -URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or and sometimes example.com (but not on Github, for example). +URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com/ or and sometimes example.com (but not on GitHub, for example). Some text to show that the reference links can follow later. -[arbitrary case-insensitive reference text]: https://www.mozilla.org -[1]: http://slashdot.org -[link text itself]: http://www.reddit.com +[arbitrary case-insensitive reference text]: https://www.mozilla.org/ +[1]: http://slashdot.org/ +[link text itself]: http://www.reddit.com/ --- diff --git a/packages/docusaurus-init/templates/classic/docs/doc2.md b/packages/docusaurus-init/templates/classic/docs/doc2.md index 2462b7f810..16cfce4082 100644 --- a/packages/docusaurus-init/templates/classic/docs/doc2.md +++ b/packages/docusaurus-init/templates/classic/docs/doc2.md @@ -3,4 +3,4 @@ id: doc2 title: Document Number 2 --- -This is a link to [another document.](doc3.md) This is a link to an [external page.](http://www.example.com) +This is a link to [another document.](doc3.md) This is a link to an [external page.](http://www.example.com/) diff --git a/packages/docusaurus-init/templates/classic/docs/mdx.md b/packages/docusaurus-init/templates/classic/docs/mdx.md index 1462851227..f0210fb70d 100644 --- a/packages/docusaurus-init/templates/classic/docs/mdx.md +++ b/packages/docusaurus-init/templates/classic/docs/mdx.md @@ -10,7 +10,7 @@ export const Highlight = ({children, color}) => ( {children} ); + }}>{children} ); Docusaurus green and Facebook blue are my favorite colors. diff --git a/packages/docusaurus-init/templates/classic/static/img/favicon.ico b/packages/docusaurus-init/templates/classic/static/img/favicon.ico index be74abd69a..c01d54bcd3 100644 Binary files a/packages/docusaurus-init/templates/classic/static/img/favicon.ico and b/packages/docusaurus-init/templates/classic/static/img/favicon.ico differ diff --git a/packages/docusaurus-init/templates/facebook/docs/doc1.md b/packages/docusaurus-init/templates/facebook/docs/doc1.md index 98cce3215d..69bc29545b 100644 --- a/packages/docusaurus-init/templates/facebook/docs/doc1.md +++ b/packages/docusaurus-init/templates/facebook/docs/doc1.md @@ -28,9 +28,9 @@ To serve as an example page when styling markdown based Docusaurus sites. ## Emphasis -Emphasis, aka italics, with _asterisks_ or _underscores_. +Emphasis, aka italics, with *asterisks* or _underscores_. -Strong emphasis, aka bold, with **asterisks** or **underscores**. +Strong emphasis, aka bold, with **asterisks** or __underscores__. Combined emphasis with **asterisks and _underscores_**. @@ -41,27 +41,25 @@ Strikethrough uses two tildes. ~~Scratch this.~~ ## Lists 1. First ordered list item -1. Another item ⋅⋅\* Unordered sub-list. -1. Actual numbers don't matter, just that it's a number ⋅⋅1. Ordered sub-list +1. Another item + - Unordered sub-list. +1. Actual numbers don't matter, just that it's a number + 1. Ordered sub-list 1. And another item. -⋅⋅⋅You can have properly indented paragraphs within list items. Notice the blank line above, and the leading spaces (at least one, but we'll use three here to also align the raw Markdown). +* Unordered list can use asterisks -⋅⋅⋅To have a line break without a paragraph, you will need to use two trailing spaces.⋅⋅ ⋅⋅⋅Note that this line is separate, but within the same paragraph.⋅⋅ ⋅⋅⋅(This is contrary to the typical GFM line break behaviour, where trailing spaces are not required.) +- Or minuses -- Unordered list can use asterisks - -* Or minuses - -- Or pluses ++ Or pluses --- ## Links -[I'm an inline-style link](https://www.google.com) +[I'm an inline-style link](https://www.google.com/) -[I'm an inline-style link with title](https://www.google.com "Google's Homepage") +[I'm an inline-style link with title](https://www.google.com/ "Google's Homepage") [I'm a reference-style link][arbitrary case-insensitive reference text] @@ -71,13 +69,13 @@ Strikethrough uses two tildes. ~~Scratch this.~~ Or leave it empty and use the [link text itself]. -URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or and sometimes example.com (but not on Github, for example). +URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com/ or and sometimes example.com (but not on GitHub, for example). Some text to show that the reference links can follow later. -[arbitrary case-insensitive reference text]: https://www.mozilla.org -[1]: http://slashdot.org -[link text itself]: http://www.reddit.com +[arbitrary case-insensitive reference text]: https://www.mozilla.org/ +[1]: http://slashdot.org/ +[link text itself]: http://www.reddit.com/ --- @@ -102,7 +100,7 @@ alert(s); ```python s = "Python syntax highlighting" -print s +print(s) ``` ``` diff --git a/packages/docusaurus-init/templates/facebook/docs/doc2.md b/packages/docusaurus-init/templates/facebook/docs/doc2.md index 2462b7f810..16cfce4082 100644 --- a/packages/docusaurus-init/templates/facebook/docs/doc2.md +++ b/packages/docusaurus-init/templates/facebook/docs/doc2.md @@ -3,4 +3,4 @@ id: doc2 title: Document Number 2 --- -This is a link to [another document.](doc3.md) This is a link to an [external page.](http://www.example.com) +This is a link to [another document.](doc3.md) This is a link to an [external page.](http://www.example.com/) diff --git a/packages/docusaurus-init/templates/facebook/docs/mdx.md b/packages/docusaurus-init/templates/facebook/docs/mdx.md index 1462851227..f0210fb70d 100644 --- a/packages/docusaurus-init/templates/facebook/docs/mdx.md +++ b/packages/docusaurus-init/templates/facebook/docs/mdx.md @@ -10,7 +10,7 @@ export const Highlight = ({children, color}) => ( {children} ); + }}>{children} ); Docusaurus green and Facebook blue are my favorite colors. diff --git a/packages/docusaurus-init/templates/facebook/static/img/favicon.ico b/packages/docusaurus-init/templates/facebook/static/img/favicon.ico index be74abd69a..c01d54bcd3 100644 Binary files a/packages/docusaurus-init/templates/facebook/static/img/favicon.ico and b/packages/docusaurus-init/templates/facebook/static/img/favicon.ico differ diff --git a/packages/docusaurus-mdx-loader/src/index.js b/packages/docusaurus-mdx-loader/src/index.js index d17854083f..851ff6cc0b 100644 --- a/packages/docusaurus-mdx-loader/src/index.js +++ b/packages/docusaurus-mdx-loader/src/index.js @@ -27,10 +27,12 @@ module.exports = async function (fileString) { const options = { ...reqOptions, remarkPlugins: [ + ...(reqOptions.beforeDefaultRemarkPlugins || []), ...DEFAULT_OPTIONS.remarkPlugins, ...(reqOptions.remarkPlugins || []), ], rehypePlugins: [ + ...(reqOptions.beforeDefaultRehypePlugins || []), ...DEFAULT_OPTIONS.rehypePlugins, ...(reqOptions.rehypePlugins || []), ], diff --git a/packages/docusaurus-plugin-content-blog/src/index.ts b/packages/docusaurus-plugin-content-blog/src/index.ts index eda67a9628..17d8c0de1e 100644 --- a/packages/docusaurus-plugin-content-blog/src/index.ts +++ b/packages/docusaurus-plugin-content-blog/src/index.ts @@ -102,7 +102,7 @@ export default function pluginContentBlog( const modules = []; if (options.admonitions) { - modules.push('remark-admonitions/styles/infima.css'); + modules.push(require.resolve('remark-admonitions/styles/infima.css')); } return modules; @@ -396,7 +396,7 @@ export default function pluginContentBlog( getCacheLoader(isServer), getBabelLoader(isServer), { - loader: '@docusaurus/mdx-loader', + loader: require.resolve('@docusaurus/mdx-loader'), options: { remarkPlugins, rehypePlugins, diff --git a/packages/docusaurus-plugin-content-docs/src/index.ts b/packages/docusaurus-plugin-content-docs/src/index.ts index bf00372608..19405bd07d 100644 --- a/packages/docusaurus-plugin-content-docs/src/index.ts +++ b/packages/docusaurus-plugin-content-docs/src/index.ts @@ -142,7 +142,7 @@ export default function pluginContentDocs( const modules = []; if (options.admonitions) { - modules.push('remark-admonitions/styles/infima.css'); + modules.push(require.resolve('remark-admonitions/styles/infima.css')); } return modules; @@ -342,7 +342,7 @@ export default function pluginContentDocs( const versionsRegex = new RegExp(versionsNames.join('|'), 'i'); const routes = await Promise.all( - metadataItems.map(async (metadataItem, i) => { + metadataItems.map(async (metadataItem) => { const isDocsHomePage = metadataItem.id.replace(versionsRegex, '').replace(/^\//, '') === options.homePageId; @@ -353,10 +353,6 @@ export default function pluginContentDocs( ? '' : metadataItem.version!) ?? ''; - // To show the sidebar, get the sidebar key of available sibling item. - metadataItem.sidebar = ( - metadataItems[i - 1] ?? metadataItems[i + 1] - ).sidebar; const docsBaseMetadata = createDocsBaseMetadata( metadataItem.version!, ); @@ -526,7 +522,7 @@ export default function pluginContentDocs( getCacheLoader(isServer), getBabelLoader(isServer), { - loader: '@docusaurus/mdx-loader', + loader: require.resolve('@docusaurus/mdx-loader'), options: { remarkPlugins, rehypePlugins, diff --git a/packages/docusaurus-plugin-ideal-image/src/index.ts b/packages/docusaurus-plugin-ideal-image/src/index.ts index ecc5ecba23..2cec59ac00 100644 --- a/packages/docusaurus-plugin-ideal-image/src/index.ts +++ b/packages/docusaurus-plugin-ideal-image/src/index.ts @@ -27,9 +27,9 @@ export default function (_context: LoadContext, options: PluginOptions) { { test: /\.(png|jpe?g|gif)$/i, use: [ - '@docusaurus/lqip-loader', + require.resolve('@docusaurus/lqip-loader'), { - loader: '@endiliey/responsive-loader', + loader: require.resolve('@endiliey/responsive-loader'), options: { emitFile: !isServer, // don't emit for server-side rendering disable: !isProd, diff --git a/packages/docusaurus-preset-bootstrap/package.json b/packages/docusaurus-preset-bootstrap/package.json index 545c651d9e..69d6d74699 100644 --- a/packages/docusaurus-preset-bootstrap/package.json +++ b/packages/docusaurus-preset-bootstrap/package.json @@ -14,7 +14,9 @@ "@docusaurus/theme-bootstrap": "^2.0.0-alpha.55" }, "peerDependencies": { - "@docusaurus/core": "^2.0.0" + "@docusaurus/core": "^2.0.0", + "react": "^16.8.4", + "react-dom": "^16.8.4" }, "engines": { "node": ">=10.9.0" diff --git a/packages/docusaurus-preset-bootstrap/src/index.js b/packages/docusaurus-preset-bootstrap/src/index.js index 7058e0e962..66f4363b66 100644 --- a/packages/docusaurus-preset-bootstrap/src/index.js +++ b/packages/docusaurus-preset-bootstrap/src/index.js @@ -7,11 +7,11 @@ module.exports = function preset(context, opts = {}) { return { - themes: [['@docusaurus/theme-bootstrap', opts.theme]], + themes: [[require.resolve('@docusaurus/theme-bootstrap'), opts.theme]], plugins: [ - ['@docusaurus/plugin-content-pages', opts.pages], - ['@docusaurus/plugin-content-blog', opts.blog], - ['@docusaurus/plugin-content-docs', opts.docs], + [require.resolve('@docusaurus/plugin-content-pages'), opts.pages], + [require.resolve('@docusaurus/plugin-content-blog'), opts.blog], + [require.resolve('@docusaurus/plugin-content-docs'), opts.docs], ], }; }; diff --git a/packages/docusaurus-preset-classic/package.json b/packages/docusaurus-preset-classic/package.json index 47a3ead7dc..6245056ec4 100644 --- a/packages/docusaurus-preset-classic/package.json +++ b/packages/docusaurus-preset-classic/package.json @@ -18,7 +18,9 @@ "@docusaurus/theme-search-algolia": "^2.0.0-alpha.55" }, "peerDependencies": { - "@docusaurus/core": "^2.0.0" + "@docusaurus/core": "^2.0.0", + "react": "^16.8.4", + "react-dom": "^16.8.4" }, "engines": { "node": ">=10.9.0" diff --git a/packages/docusaurus-preset-classic/src/index.js b/packages/docusaurus-preset-classic/src/index.js index ac74ef9269..2a4d489bcc 100644 --- a/packages/docusaurus-preset-classic/src/index.js +++ b/packages/docusaurus-preset-classic/src/index.js @@ -13,17 +13,19 @@ module.exports = function preset(context, opts = {}) { return { themes: [ - ['@docusaurus/theme-classic', opts.theme], + [require.resolve('@docusaurus/theme-classic'), opts.theme], // Don't add this if algolia config is not defined. - algolia && '@docusaurus/theme-search-algolia', + algolia && require.resolve('@docusaurus/theme-search-algolia'), ], plugins: [ - ['@docusaurus/plugin-content-docs', opts.docs], - ['@docusaurus/plugin-content-blog', opts.blog], - ['@docusaurus/plugin-content-pages', opts.pages], - isProd && googleAnalytics && '@docusaurus/plugin-google-analytics', - isProd && gtag && '@docusaurus/plugin-google-gtag', - isProd && ['@docusaurus/plugin-sitemap', opts.sitemap], + [require.resolve('@docusaurus/plugin-content-docs'), opts.docs], + [require.resolve('@docusaurus/plugin-content-blog'), opts.blog], + [require.resolve('@docusaurus/plugin-content-pages'), opts.pages], + isProd && + googleAnalytics && + require.resolve('@docusaurus/plugin-google-analytics'), + isProd && gtag && require.resolve('@docusaurus/plugin-google-gtag'), + isProd && [require.resolve('@docusaurus/plugin-sitemap'), opts.sitemap], ], }; }; diff --git a/packages/docusaurus-theme-bootstrap/package.json b/packages/docusaurus-theme-bootstrap/package.json index 1d33d05ad4..9d0e3ef1d2 100644 --- a/packages/docusaurus-theme-bootstrap/package.json +++ b/packages/docusaurus-theme-bootstrap/package.json @@ -17,8 +17,7 @@ "peerDependencies": { "@docusaurus/core": "^2.0.0", "react": "^16.8.4", - "react-dom": "^16.8.4", - "webpack": "^4.41.2" + "react-dom": "^16.8.4" }, "engines": { "node": ">=10.9.0" diff --git a/packages/docusaurus-theme-bootstrap/src/index.js b/packages/docusaurus-theme-bootstrap/src/index.js index 81e9229420..65125a85b2 100644 --- a/packages/docusaurus-theme-bootstrap/src/index.js +++ b/packages/docusaurus-theme-bootstrap/src/index.js @@ -14,7 +14,7 @@ module.exports = function () { return path.resolve(__dirname, './theme'); }, getClientModules() { - return ['bootstrap/dist/css/bootstrap.min.css']; + return [require.resolve('bootstrap/dist/css/bootstrap.min.css')]; }, }; }; diff --git a/packages/docusaurus-theme-classic/package.json b/packages/docusaurus-theme-classic/package.json index f7426641da..82fa70ab02 100644 --- a/packages/docusaurus-theme-classic/package.json +++ b/packages/docusaurus-theme-classic/package.json @@ -16,14 +16,14 @@ "parse-numeric-range": "^0.0.2", "prism-react-renderer": "^1.1.0", "prismjs": "^1.20.0", + "prop-types": "^15.7.2", "react-router-dom": "^5.1.2", "react-toggle": "^4.1.1" }, "peerDependencies": { "@docusaurus/core": "^2.0.0", "react": "^16.8.4", - "react-dom": "^16.8.4", - "webpack": "^4.41.2" + "react-dom": "^16.8.4" }, "engines": { "node": ">=10.9.0" diff --git a/packages/docusaurus-theme-classic/src/index.js b/packages/docusaurus-theme-classic/src/index.js index 7cce15b4c5..cbe3e4c914 100644 --- a/packages/docusaurus-theme-classic/src/index.js +++ b/packages/docusaurus-theme-classic/src/index.js @@ -6,7 +6,15 @@ */ const path = require('path'); -const ContextReplacementPlugin = require('webpack/lib/ContextReplacementPlugin'); +const Module = require('module'); + +const createRequire = Module.createRequire || Module.createRequireFromPath; +const requireFromDocusaurusCore = createRequire( + require.resolve('@docusaurus/core/package.json'), +); +const ContextReplacementPlugin = requireFromDocusaurusCore( + 'webpack/lib/ContextReplacementPlugin', +); // Need to be inlined to prevent dark mode FOUC // Make sure that the 'storageKey' is the same as the one in `/theme/hooks/useTheme.js` @@ -57,7 +65,7 @@ module.exports = function (context, options) { getClientModules() { const modules = [ - 'infima/dist/css/default/default.css', + require.resolve('infima/dist/css/default/default.css'), path.resolve(__dirname, './prism-include-languages'), ]; diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js index a1bc0359b3..475aaf51f1 100644 --- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js @@ -5,44 +5,23 @@ * LICENSE file in the root directory of this source tree. */ -import React, {useState, useEffect} from 'react'; +import React from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useAnnouncementBarContext from '@theme/hooks/useAnnouncementBarContext'; import styles from './styles.module.css'; -const STORAGE_DISMISS_KEY = 'docusaurus.announcement.dismiss'; -const STORAGE_ID_KEY = 'docusaurus.announcement.id'; - function AnnouncementBar() { const { siteConfig: {themeConfig: {announcementBar = {}}} = {}, } = useDocusaurusContext(); - const {id, content, backgroundColor, textColor} = announcementBar; - const [isClosed, setClosed] = useState(true); - const handleClose = () => { - localStorage.setItem(STORAGE_DISMISS_KEY, true); - setClosed(true); - }; + const {content, backgroundColor, textColor} = announcementBar; + const { + isAnnouncementBarClosed, + closeAnnouncementBar, + } = useAnnouncementBarContext(); - useEffect(() => { - const viewedId = localStorage.getItem(STORAGE_ID_KEY); - const isNewAnnouncement = id !== viewedId; - - localStorage.setItem(STORAGE_ID_KEY, id); - - if (isNewAnnouncement) { - localStorage.setItem(STORAGE_DISMISS_KEY, false); - } - - if ( - isNewAnnouncement || - localStorage.getItem(STORAGE_DISMISS_KEY) === 'false' - ) { - setClosed(false); - } - }, []); - - if (!content || isClosed) { + if (!content || isAnnouncementBarClosed) { return null; } @@ -59,7 +38,7 @@ function AnnouncementBar() { diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css index 6b4ca286e2..12350cc8ec 100644 --- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css @@ -5,13 +5,24 @@ * LICENSE file in the root directory of this source tree. */ +:root { + --docusaurus-announcement-bar-height: auto; +} + .announcementBar { position: relative; width: 100%; + height: var(--docusaurus-announcement-bar-height); background-color: var(--ifm-color-primary); color: var(--ifm-color-black); } +@media screen and (min-width: 1024px) { + :root { + --docusaurus-announcement-bar-height: 30px; + } +} + .announcementBarClose { position: absolute; right: 0; diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBarContext.js b/packages/docusaurus-theme-classic/src/theme/AnnouncementBarContext.js new file mode 100644 index 0000000000..1d1adbe889 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBarContext.js @@ -0,0 +1,15 @@ +/** + * 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 {createContext} from 'react'; + +const AnnouncementBarContext = createContext({ + isAnnouncementBarClosed: false, + closeAnnouncementBar: () => {}, +}); + +export default AnnouncementBarContext; diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBarProvider/index.js b/packages/docusaurus-theme-classic/src/theme/AnnouncementBarProvider/index.js new file mode 100644 index 0000000000..e35dfdd1db --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBarProvider/index.js @@ -0,0 +1,24 @@ +/** + * 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 AnnouncementBarContext from '@theme/AnnouncementBarContext'; +import useAnnouncementBar from '@theme/hooks/useAnnouncementBar'; + +function AnnouncementBarProvider(props) { + const {isAnnouncementBarClosed, closeAnnouncementBar} = useAnnouncementBar(); + + return ( + + {props.children} + + ); +} + +export default AnnouncementBarProvider; diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css index 5f2d8ce851..cf9e520511 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocItem/styles.module.css @@ -7,14 +7,7 @@ .docTitle { font-size: 3rem; - margin-bottom: 3rem; -} - -@media only screen and (max-width: 996px) { - .docTitle { - font-size: 2rem; - margin-bottom: 2rem; - } + margin-bottom: calc(var(--ifm-leading-desktop) * var(--ifm-leading)); } .docItemContainer { diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js index 623987d949..cad9db38d5 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js @@ -8,8 +8,10 @@ import React, {useState, useCallback} from 'react'; import classnames from 'classnames'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useAnnouncementBarContext from '@theme/hooks/useAnnouncementBarContext'; import useLockBodyScroll from '@theme/hooks/useLockBodyScroll'; import useLogo from '@theme/hooks/useLogo'; +import useScrollPosition from '@theme/hooks/useScrollPosition'; import Link from '@docusaurus/Link'; import isInternalUrl from '@docusaurus/isInternalUrl'; @@ -134,6 +136,8 @@ function DocSidebar(props) { isClient, } = useDocusaurusContext(); const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo(); + const {isAnnouncementBarClosed} = useAnnouncementBarContext(); + const {scrollY} = useScrollPosition(); const { docsSidebars, @@ -163,7 +167,10 @@ function DocSidebar(props) { } return ( -
+
{hideOnScroll && (
diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx index a8a6c082bf..d4b74d2caf 100644 --- a/website/docs/markdown-features.mdx +++ b/website/docs/markdown-features.mdx @@ -140,7 +140,7 @@ One benefit of this approach is that the links to external files will still work ## Embedding React components with MDX -Docusaurus has built-in support for [MDX](https://mdxjs.com), which allows you to write JSX within your Markdown files and render them as React components. +Docusaurus has built-in support for [MDX](https://mdxjs.com/), which allows you to write JSX within your Markdown files and render them as React components. **Note 1:** While both `.md` and `.mdx` files are parsed using MDX, some of the syntax are treated slightly differently. For the most accurate parsing and better editor support, we recommend using the `.mdx` extension for files containing MDX syntax. Let's rename the previous file to `greeting.mdx`. diff --git a/website/docs/migrating-from-v1-to-v2.md b/website/docs/migrating-from-v1-to-v2.md index 09b8feae5f..4b5e23c162 100644 --- a/website/docs/migrating-from-v1-to-v2.md +++ b/website/docs/migrating-from-v1-to-v2.md @@ -456,8 +456,8 @@ Please refer to [creating pages](creating-pages.md) to learn how Docusaurus 2 pa The following code could be helpful for migration of various pages: -- Index page - [Flux](https://github.com/facebook/flux/blob/master/website/src/pages/index.js) (recommended), [Docusaurus 2](https://github.com/facebook/docusaurus/blob/master/website/src/pages/index.js), [Hermes](https://github.com/facebook/hermes/blob/master/website/src/pages/index.js) -- Help/Support page - [Docusaurus 2](https://github.com/facebook/docusaurus/blob/master/website/src/pages/help.js), [Flux](http://facebook.github.io/flux/support) +- Index page - [Flux](https://github.com/facebook/flux/blob/master/website/src/pages/index.js/) (recommended), [Docusaurus 2](https://github.com/facebook/docusaurus/blob/master/website/src/pages/index.js/), [Hermes](https://github.com/facebook/hermes/blob/master/website/src/pages/index.js/) +- Help/Support page - [Docusaurus 2](https://github.com/facebook/docusaurus/blob/master/website/src/pages/help.js/), [Flux](http://facebook.github.io/flux/support) ## Content diff --git a/website/docs/presets.md b/website/docs/presets.md index 872be9dc31..44d07c8fb2 100644 --- a/website/docs/presets.md +++ b/website/docs/presets.md @@ -40,8 +40,11 @@ Presets in some way are a shorthand function to add plugins and themes to your d ```js module.exports = function preset(context, opts = {}) { return { - themes: ['@docusaurus/themes-cool', '@docusaurus/themes-bootstrap'], - plugins: ['@docusaurus/plugin-blog'], + themes: [ + require.resolve('@docusaurus/themes-cool'), + require.resolve('@docusaurus/themes-bootstrap'), + ], + plugins: [require.resolve('@docusaurus/plugin-blog')], }; }; ``` diff --git a/website/docs/resources.md b/website/docs/resources.md index b2da82a2fe..6bda806368 100644 --- a/website/docs/resources.md +++ b/website/docs/resources.md @@ -9,6 +9,10 @@ A curated list of interesting Docusaurus community projects. - [F8 2019: Using Docusaurus to Create Open Source Websites](https://www.youtube.com/watch?v=QcGJsf6mgZE) +## Articles + +- [Live code editing in Docusaurus](https://dev.to/mrmuhammadali/live-code-editing-in-docusaurus-28k) + ## Showcase See the showcase. diff --git a/website/docs/using-plugins.md b/website/docs/using-plugins.md index d516309603..d0621b23d4 100644 --- a/website/docs/using-plugins.md +++ b/website/docs/using-plugins.md @@ -145,36 +145,42 @@ module.exports = { '@docusaurus/plugin-content-blog', { /** - * Path to data on filesystem - * relative to site dir + * Path to data on filesystem relative to site dir. */ path: 'blog', /** - * URL for editing a blog post, example: 'https://github.com/facebook/docusaurus/edit/master/website/blog/' + * URL for editing a blog post. + * Example: 'https://github.com/facebook/docusaurus/edit/master/website/blog/' */ editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/blog/', /** - * URL route for the blog section of your site - * do not include trailing slash + * URL route for the blog section of your site. + * *DO NOT* include a trailing slash. */ routeBasePath: 'blog', include: ['*.md', '*.mdx'], postsPerPage: 10, /** - * Theme components used by the blog pages + * Theme components used by the blog pages. */ blogListComponent: '@theme/BlogListPage', blogPostComponent: '@theme/BlogPostPage', blogTagsListComponent: '@theme/BlogTagsListPage', blogTagsPostsComponent: '@theme/BlogTagsPostsPage', /** - * Remark and Rehype plugins passed to MDX + * Remark and Rehype plugins passed to MDX. */ remarkPlugins: [ /* require('remark-math') */ ], rehypePlugins: [], + /** + * Custom Remark and Rehype plugins passed to MDX before + * the default Docusaurus Remark and Rehype plugins. + */ + beforeDefaultRemarkPlugins: [], + beforeDefaultRehypePlugins: [], /** * Truncate marker, can be a regex or string. */ @@ -184,8 +190,8 @@ module.exports = { */ showReadingTime: true, /** - * Blog feed - * If feedOptions is undefined, no rss feed will be generated + * Blog feed. + * If feedOptions is undefined, no rss feed will be generated. */ feedOptions: { type: '', // required. 'rss' | 'feed' | 'all' @@ -223,17 +229,17 @@ module.exports = { '@docusaurus/plugin-content-docs', { /** - * Path to data on filesystem - * relative to site dir + * Path to data on filesystem relative to site dir. */ path: 'docs', /** - * URL for editing website repo, example: 'https://github.com/facebook/docusaurus/edit/master/website/' + * URL for editing a doc in the website repo. + * Example: 'https://github.com/facebook/docusaurus/edit/master/website/' */ editUrl: 'https://github.com/facebook/docusaurus/edit/master/website/', /** - * URL route for the blog section of your site - * do not include trailing slash + * URL route for the blog section of your site. + * *DO NOT* include a trailing slash. */ routeBasePath: 'docs', homePageId: '_index', // Document id for docs home page. @@ -255,6 +261,12 @@ module.exports = { /* require('remark-math') */ ], rehypePlugins: [], + /** + * Custom Remark and Rehype plugins passed to MDX before + * the default Docusaurus Remark and Rehype plugins. + */ + beforeDefaultRemarkPlugins: [], + beforeDefaultRehypePlugins: [], /** * Whether to display the author who last updated the doc. */ diff --git a/website/package.json b/website/package.json index bb43e441c7..f52087b14f 100644 --- a/website/package.json +++ b/website/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@docusaurus/core": "^2.0.0-alpha.55", + "@docusaurus/theme-live-codeblock": "^2.0.0-alpha.55", "@docusaurus/plugin-ideal-image": "^2.0.0-alpha.55", "@docusaurus/plugin-client-redirects": "^2.0.0-alpha.55", "@docusaurus/preset-classic": "^2.0.0-alpha.55", diff --git a/yarn.lock b/yarn.lock index 8d13f9cfa2..1f5bf261c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13045,6 +13045,13 @@ pngjs@^3.0.0, pngjs@^3.3.3: resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f" integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w== +pnp-webpack-plugin@^1.6.4: + version "1.6.4" + resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149" + integrity sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg== + dependencies: + ts-pnp "^1.1.6" + popper.js@^1.14.4: version "1.16.1" resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" @@ -16973,6 +16980,11 @@ tryer@^1.0.1: resolved "https://registry.yarnpkg.com/tryer/-/tryer-1.0.1.tgz#f2c85406800b9b0f74c9f7465b81eaad241252f8" integrity sha512-c3zayb8/kWWpycWYg87P71E1S1ZL6b6IJxfb5fvsUgsf0S2MVGaDhDXXjDMpdCpfWXqptc+4mXwmiy1ypXqRAA== +ts-pnp@^1.1.6: + version "1.2.0" + resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92" + integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw== + tslib@^1.10.0, tslib@^1.9.0: version "1.11.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"