fix(v2): swizzle should receive correct load context (#1844)

* fix(v2): swizzle should receive correct load context

* new prettier version

* niits

CHANGELOG-2.x.md

@@ -3,6 +3,7 @@
 ## 2.0.0-alpha.28
 - Further reduce memory usage to avoid heap memory allocation failure.
 - Fix `keywords` frontmatter for SEO not working properly.
+- Fix `swizzle` command not passing context properly to theme packages.
 - Add `extendCli` api for plugins. This will allow plugin to further extend Docusaurus CLI.
 
 ## 2.0.0-alpha.27

package.json

@@ -55,14 +55,14 @@
     "front-matter": "^2.3.0",
     "glob-promise": "^3.3.0",
     "husky": "^1.3.1",
-    "jest": "^24.6.0",
+    "jest": "^24.9.0",
     "lerna": "^3.14.1",
     "lint-staged": "^7.2.0",
-    "prettier": "^1.13.7",
+    "prettier": "^1.18.2",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "rimraf": "^2.6.3",
-    "typescript": "^3.5.3"
+    "typescript": "^3.6.4"
   },
   "lint-staged": {
     "linters": {

packages/docusaurus-1.x/examples/basics/core/Footer.js

@@ -83,9 +83,7 @@ class Footer extends React.Component {
             {this.props.config.twitterUsername && (
               <div className="social">
                 <a
-                  href={`https://twitter.com/${
+                  href={`https://twitter.com/${this.props.config.twitterUsername}`}
-                    this.props.config.twitterUsername
-                  }`}
                   className="twitter-follow-button">
                   Follow @{this.props.config.twitterUsername}
                 </a>

packages/docusaurus-1.x/examples/versions/pages/en/versions.js

@@ -18,9 +18,7 @@ const versions = require(`${CWD}/versions.json`);
 function Versions(props) {
   const {config: siteConfig} = props;
   const latestVersion = versions[0];
-  const repoUrl = `https://github.com/${siteConfig.organizationName}/${
+  const repoUrl = `https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`;
-    siteConfig.projectName
-  }`;
   return (
     <div className="docMainWrapper wrapper">
       <Container className="mainContainer versionsContainer">

packages/docusaurus-1.x/lib/core/BlogPost.js

@@ -44,9 +44,7 @@ class BlogPost extends React.Component {
     }`;
     if (post.authorFBID || post.authorImageURL) {
       const authorImageURL = post.authorFBID
-        ? `https://graph.facebook.com/${
+        ? `https://graph.facebook.com/${post.authorFBID}/picture/?height=200&width=200`
-            post.authorFBID
-          }/picture/?height=200&width=200`
         : post.authorImageURL;
       return (
         <div className={className}>

packages/docusaurus-1.x/lib/core/Doc.js

@@ -225,9 +225,7 @@ class Doc extends React.Component {
       editLink = (
         <a
           className="edit-page-link button"
-          href={`${this.props.config.translationRecruitingLink}/${
+          href={`${this.props.config.translationRecruitingLink}/${this.props.language}`}
-            this.props.language
-          }`}
           target="_blank"
           rel="noreferrer noopener">
           {translateThisDoc}

packages/docusaurus-1.x/lib/core/Head.js

@@ -22,9 +22,7 @@ class Head extends React.Component {
     // Use user-provided themeUrl if it exists, else construct one from version and theme.
     const highlightThemeURL = highlight.themeUrl
       ? highlight.themeUrl
-      : `//cdnjs.cloudflare.com/ajax/libs/highlight.js/${
+      : `//cdnjs.cloudflare.com/ajax/libs/highlight.js/${highlight.version}/styles/${highlight.theme}.min.css`;
-          highlight.version
-        }/styles/${highlight.theme}.min.css`;
 
     // ensure the siteUrl variable ends with a single slash
     const siteUrl = `${(
@@ -99,9 +97,7 @@ class Head extends React.Component {
         {this.props.config.gaTrackingId && this.props.config.gaGtag && (
           <script
             async
-            src={`https://www.googletagmanager.com/gtag/js?id=${
+            src={`https://www.googletagmanager.com/gtag/js?id=${this.props.config.gaTrackingId}`}
-              this.props.config.gaTrackingId
-            }`}
           />
         )}
         {this.props.config.gaTrackingId && this.props.config.gaGtag && (

packages/docusaurus-1.x/lib/core/Site.js

@@ -93,9 +93,7 @@ class Site extends React.Component {
           {this.props.config.facebookAppId && (
             <script
               dangerouslySetInnerHTML={{
-                __html: `window.fbAsyncInit = function() {FB.init({appId:'${
+                __html: `window.fbAsyncInit = function() {FB.init({appId:'${this.props.config.facebookAppId}',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
-                  this.props.config.facebookAppId
-                }',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
                 `,
               }}
             />

packages/docusaurus-1.x/lib/core/anchors.js

@@ -19,9 +19,7 @@ function anchors(md) {
     if (textToken.content) {
       const anchor = toSlug(textToken.content, env);
 
-      return `<h${
+      return `<h${tokens[idx].hLevel}><a class="anchor" aria-hidden="true" id="${anchor}"></a><a href="#${anchor}" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>`;
-        tokens[idx].hLevel
-      }><a class="anchor" aria-hidden="true" id="${anchor}"></a><a href="#${anchor}" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>`;
     }
 
     return originalRender(tokens, idx, options, env);

packages/docusaurus-1.x/lib/core/nav/HeaderNav.js

@@ -174,9 +174,7 @@ class HeaderNav extends React.Component {
           : '';
       const id = langPart + versionPart + link.doc;
       if (!Metadata[id]) {
-        let errorStr = `Processing the following \`doc\` field in \`headerLinks\` within \`siteConfig.js\`: '${
+        let errorStr = `Processing the following \`doc\` field in \`headerLinks\` within \`siteConfig.js\`: '${link.doc}'`;
-          link.doc
-        }'`;
         if (id === link.doc) {
           errorStr +=
             ' It looks like there is no document with that id that exists in your docs directory. Please double check the spelling of your `doc` field and the `id` fields of your docs.';

packages/docusaurus-1.x/lib/server/feed.js

@@ -35,9 +35,7 @@ module.exports = function(type) {
 
   const feed = new Feed({
     title: `${siteConfig.title} Blog`,
-    description: `The best place to stay up-to-date with the latest ${
+    description: `The best place to stay up-to-date with the latest ${siteConfig.title} news and events.`,
-      siteConfig.title
-    } news and events.`,
     id: blogRootURL,
     link: blogRootURL,
     image: siteImageURL,

packages/docusaurus-1.x/lib/server/readMetadata.js

@@ -175,9 +175,7 @@ function processMetadata(file, refDir) {
     versionPart = 'next/';
   }
 
-  metadata.permalink = `${docsPart}${langPart}${versionPart}${
+  metadata.permalink = `${docsPart}${langPart}${versionPart}${metadata.id}.html`;
-    metadata.id
-  }.html`;
 
   // change ids previous, next
   metadata.localized_id = metadata.id;

packages/docusaurus-1.x/lib/server/versionFallback.js

@@ -191,13 +191,9 @@ function processVersionMetadata(file, version, useVersion, language) {
   const docsPart = `${siteConfig.docsUrl ? `${siteConfig.docsUrl}/` : ''}`;
   const versionPart = `${version !== latestVersion ? `${version}/` : ''}`;
   if (!ENABLE_TRANSLATION && !siteConfig.useEnglishUrl) {
-    metadata.permalink = `${docsPart}${versionPart}${
+    metadata.permalink = `${docsPart}${versionPart}${metadata.original_id}.html`;
-      metadata.original_id
-    }.html`;
   } else {
-    metadata.permalink = `${docsPart}${language}/${versionPart}${
+    metadata.permalink = `${docsPart}${language}/${versionPart}${metadata.original_id}.html`;
-      metadata.original_id
-    }.html`;
   }
   metadata.id = metadata.id.replace(
     `version-${useVersion}-`,

packages/docusaurus-init/bin/index.js

@@ -18,9 +18,7 @@ if (!semver.satisfies(process.version, requiredVersion)) {
   console.log(
     chalk.red(`\nMinimum node version not met :)`) +
       chalk.yellow(
-        `\nYou are using Node ${
+        `\nYou are using Node ${process.version}, Requirement: Node ${requiredVersion}.\n`,
-          process.version
-        }, Requirement: Node ${requiredVersion}.\n`,
       ),
   );
   process.exit(1);

packages/docusaurus/bin/docusaurus.js

@@ -18,9 +18,7 @@ if (!semver.satisfies(process.version, requiredVersion)) {
   console.log(
     chalk.red(`\nMinimum node version not met :)`) +
       chalk.yellow(
-        `\nYou are using Node ${
+        `\nYou are using Node ${process.version}, Requirement: Node ${requiredVersion}.\n`,
-          process.version
-        }, Requirement: Node ${requiredVersion}.\n`,
       ),
   );
   process.exit(1);

packages/docusaurus/src/commands/swizzle.ts

@@ -11,6 +11,7 @@ import importFresh from 'import-fresh';
 import path from 'path';
 
 import {THEME_PATH} from '../constants';
+import {loadContext} from '../server';
 
 export async function swizzle(
   siteDir: string,
@@ -18,7 +19,8 @@ export async function swizzle(
   componentName?: string,
 ): Promise<void> {
   const plugin: any = importFresh(themeName);
-  const pluginInstance = plugin({siteDir});
+  const context = loadContext(siteDir);
+  const pluginInstance = plugin(context);
   let fromPath = pluginInstance.getThemePath();
 
   if (fromPath) {

website-1.x/core/Footer.js

@@ -9,9 +9,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 
 function SocialFooter(props) {
-  const repoUrl = `https://github.com/${props.config.organizationName}/${
+  const repoUrl = `https://github.com/${props.config.organizationName}/${props.config.projectName}`;
-    props.config.projectName
-  }`;
   return (
     <div className="footerSection">
       <h5>Social</h5>
@@ -67,9 +65,7 @@ class Footer extends React.Component {
           {this.props.config.footerIcon && (
             <a href={this.props.config.baseUrl} className="nav-home">
               <img
-                src={`${this.props.config.baseUrl}${
+                src={`${this.props.config.baseUrl}${this.props.config.footerIcon}`}
-                  this.props.config.footerIcon
-                }`}
                 alt={this.props.config.title}
                 width="66"
                 height="58"
@@ -80,30 +76,22 @@ class Footer extends React.Component {
             <h5>Docs</h5>
             <a
               href={`
-                ${this.props.config.baseUrl}${docsPart}${
+                ${this.props.config.baseUrl}${docsPart}${this.props.language}/installation`}>
-                this.props.language
-              }/installation`}>
               Getting Started
             </a>
             <a
               href={`
-                ${this.props.config.baseUrl}${docsPart}${
+                ${this.props.config.baseUrl}${docsPart}${this.props.language}/versioning`}>
-                this.props.language
-              }/versioning`}>
               Versioning
             </a>
             <a
               href={`
-                ${this.props.config.baseUrl}${docsPart}${
+                ${this.props.config.baseUrl}${docsPart}${this.props.language}/translation`}>
-                this.props.language
-              }/translation`}>
               Localization
             </a>
             <a
               href={`
-                ${this.props.config.baseUrl}${docsPart}${
+                ${this.props.config.baseUrl}${docsPart}${this.props.language}/search`}>
-                this.props.language
-              }/search`}>
               Adding Search
             </a>
           </div>
@@ -117,9 +105,7 @@ class Footer extends React.Component {
               User Showcase
             </a>
             <a
-              href={`${this.props.config.baseUrl}${
+              href={`${this.props.config.baseUrl}${this.props.language}/about-slash`}>
-                this.props.language
-              }/about-slash`}>
               About
             </a>
           </div>

website-1.x/pages/en/index.js

@@ -77,9 +77,7 @@ class Index extends React.Component {
               contents={[
                 {
                   content: `Save time and focus on your project's documentation. Simply
-                    write docs and blog posts with [Markdown](${
+                    write docs and blog posts with [Markdown](${siteConfig.baseUrl}docs/${this.props.language}/doc-markdown)
-                      siteConfig.baseUrl
-                    }docs/${this.props.language}/doc-markdown)
                     and Docusaurus will publish a set of static html files ready
                     to serve.`,
                   image: `${siteConfig.baseUrl}img/undraw_typewriter.svg`,
@@ -88,9 +86,7 @@ class Index extends React.Component {
                   title: <translate>Powered by Markdown</translate>,
                 },
                 {
-                  content: `[Extend or customize](${siteConfig.baseUrl}docs/${
+                  content: `[Extend or customize](${siteConfig.baseUrl}docs/${this.props.language}/api-pages)
-                    this.props.language
-                  }/api-pages)
                     your project's layout by reusing React. Docusaurus can be
                     extended while reusing the same header and footer.`,
                   image: `${siteConfig.baseUrl}img/undraw_react.svg`,
@@ -99,9 +95,7 @@ class Index extends React.Component {
                   title: <translate>Built Using React</translate>,
                 },
                 {
-                  content: `[Localization](${siteConfig.baseUrl}docs/${
+                  content: `[Localization](${siteConfig.baseUrl}docs/${this.props.language}/translation)
-                    this.props.language
-                  }/translation)
                     comes pre-configured. Use [Crowdin](https://crowdin.com/) to translate your docs
                     into over 70 languages.`,
                   image: `${siteConfig.baseUrl}img/undraw_around_the_world.svg`,
@@ -119,9 +113,7 @@ class Index extends React.Component {
               contents={[
                 {
                   content: `Support users on all versions of your project. Document
-                    [versioning](${siteConfig.baseUrl}docs/${
+                    [versioning](${siteConfig.baseUrl}docs/${this.props.language}/versioning)
-                    this.props.language
-                  }/versioning)
                     helps you keep documentation in sync with project releases.`,
                   image: `${siteConfig.baseUrl}img/undraw_version_control.svg`,
                   imageAlign: 'top',
@@ -129,11 +121,7 @@ class Index extends React.Component {
                   title: <translate>Document Versioning</translate>,
                 },
                 {
-                  content: `Make it easy for your community to [find](${
+                  content: `Make it easy for your community to [find](${siteConfig.baseUrl}docs/${this.props.language}/search) what they need in your documentation.
-                    siteConfig.baseUrl
-                  }docs/${
-                    this.props.language
-                  }/search) what they need in your documentation.
                     We proudly support [Algolia documentation search](https://www.algolia.com/).`,
                   image: `${siteConfig.baseUrl}img/undraw_algolia.svg`,
                   imageAlign: 'top',
@@ -148,9 +136,7 @@ class Index extends React.Component {
             <GridBlock
               contents={[
                 {
-                  content: `Get [up and running](${siteConfig.baseUrl}docs/${
+                  content: `Get [up and running](${siteConfig.baseUrl}docs/${this.props.language}/site-creation)
-                    this.props.language
-                  }/site-creation)
                     quickly without having to worry about site design.`,
                   imageAlign: 'right',
                   image: `${siteConfig.baseUrl}img/undraw_setup_wizard.svg`,
@@ -166,12 +152,8 @@ class Index extends React.Component {
               contents={[
                 {
                   content: `Make design and documentation changes by using the included
-                    [live server](${siteConfig.baseUrl}docs/${
+                    [live server](${siteConfig.baseUrl}docs/${this.props.language}/site-preparation#verifying-installation).
-                    this.props.language
+                    [Publish](${siteConfig.baseUrl}docs/${this.props.language}/publishing)
-                  }/site-preparation#verifying-installation).
-                    [Publish](${siteConfig.baseUrl}docs/${
-                    this.props.language
-                  }/publishing)
                     your site to GitHub pages or other static file hosts
                     manually, using a script, or with continuous integration
                     like CircleCI.`,
@@ -189,24 +171,14 @@ class Index extends React.Component {
               contents={[
                 {
                   content: `Docusaurus currently provides support to help your website
-                    use [translations](${siteConfig.baseUrl}docs/${
+                    use [translations](${siteConfig.baseUrl}docs/${this.props.language}/translation),
-                    this.props.language
+                    [search](${siteConfig.baseUrl}docs/${this.props.language}/search),
-                  }/translation),
+                    and [versioning](${siteConfig.baseUrl}docs/${this.props.language}/versioning),
-                    [search](${siteConfig.baseUrl}docs/${
+                    along with some other special [documentation markdown features](${siteConfig.baseUrl}docs/${this.props.language}/doc-markdown).
-                    this.props.language
-                  }/search),
-                    and [versioning](${siteConfig.baseUrl}docs/${
-                    this.props.language
-                  }/versioning),
-                    along with some other special [documentation markdown features](${
-                      siteConfig.baseUrl
-                    }docs/${this.props.language}/doc-markdown).
                     If you have ideas for useful features, feel free to
                     contribute on [GitHub](https://github.com/facebook/docusaurus)!`,
                   imageAlign: 'right',
-                  image: `${
+                  image: `${siteConfig.baseUrl}img/undraw_features_overview.svg`,
-                    siteConfig.baseUrl
-                  }img/undraw_features_overview.svg`,
                   imageAlt: 'Monochromatic Docusaurus',
                   title: <translate>Website Features</translate>,
                 },

website-1.x/pages/en/versions.js

@@ -18,9 +18,7 @@ const versions = require(`${CWD}/versions.json`);
 function Versions(props) {
   const {config: siteConfig} = props;
   const latestVersion = versions[0];
-  const repoUrl = `https://github.com/${siteConfig.organizationName}/${
+  const repoUrl = `https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`;
-    siteConfig.projectName
-  }`;
   return (
     <div className="docMainWrapper wrapper">
       <Container className="mainContainer versionsContainer">
@@ -36,9 +34,7 @@ function Versions(props) {
                 <th>{latestVersion}</th>
                 <td>
                   <a
-                    href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${
+                    href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${props.language}/installation`}>
-                      props.language
-                    }/installation`}>
                     Documentation
                   </a>
                 </td>
@@ -58,9 +54,7 @@ function Versions(props) {
                 <th>master</th>
                 <td>
                   <a
-                    href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${
+                    href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${props.language}/next/installation`}>
-                      props.language
-                    }/next/installation`}>
                     Documentation
                   </a>
                 </td>
@@ -86,9 +80,7 @@ function Versions(props) {
                       </th>
                       <td>
                         <a
-                          href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${
+                          href={`${siteConfig.baseUrl}${siteConfig.docsUrl}/${props.language}/${version}/installation`}>
-                            props.language
-                          }/${version}/installation`}>
                           Documentation
                         </a>
                       </td>

website/docs/migrating-from-v1-to-v2.md

@@ -462,6 +462,8 @@ yarn start
 
 In Docusaurus 1, all the build artifacts are located within `website/build/<PROJECT_NAME>`. However, in Docusaurus 2, it is now moved to just `website/build`. Make sure that you update your deployment configuration to read the generated files from the correct `build` directory.
 
+If you are deploying to GitHub pages, make sure to run `yarn deploy` instead of `yarn publish-gh-pages` script.
+
 ## Example migration PRs
 
 You might want to refer to our migration PRs for [Create React App](https://github.com/facebook/create-react-app/pull/7785) and [Flux](https://github.com/facebook/flux/pull/471) as examples of how a migration for a basic Docusaurus v1 site can be done.