fix(v2): use remark-admonitions separately in each plugin instead of in preset only (#2642)

* fix(v2): use remark-admonitions separately in each plugin instead of in preset only

* Update types.d.ts

* Update types.d.ts

* Address fixes from review

Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>

packages/docusaurus-plugin-content-blog/package.json

@@ -21,7 +21,8 @@
     "globby": "^10.0.1",
     "loader-utils": "^1.2.3",
     "lodash.kebabcase": "^4.1.1",
-    "reading-time": "^1.2.0"
+    "reading-time": "^1.2.0",
+    "remark-admonitions": "^1.2.1"
   },
   "peerDependencies": {
     "@docusaurus/core": "^2.0.0",

packages/docusaurus-plugin-content-blog/src/index.ts

@@ -8,6 +8,7 @@
 import fs from 'fs-extra';
 import kebabCase from 'lodash.kebabcase';
 import path from 'path';
+import admonitions from 'remark-admonitions';
 import {normalizeUrl, docuHash, aliasedSitePath} from '@docusaurus/utils';
 
 import {
@@ -45,6 +46,7 @@ const DEFAULT_OPTIONS: PluginOptions = {
   rehypePlugins: [],
   editUrl: undefined,
   truncateMarker: /<!--\s*(truncate)\s*-->/, // Regex.
+  admonitions: {},
 };
 
 function assertFeedTypes(val: any): asserts val is FeedType {
@@ -72,6 +74,13 @@ export default function pluginContentBlog(
   opts: Partial<PluginOptions>,
 ): Plugin<BlogContent | null> {
   const options: PluginOptions = {...DEFAULT_OPTIONS, ...opts};
+
+  if (options.admonitions) {
+    options.remarkPlugins = options.remarkPlugins.concat([
+      [admonitions, opts.admonitions || {}],
+    ]);
+  }
+
   const {siteDir, generatedFilesDir} = context;
   const contentPath = path.resolve(siteDir, options.path);
   const dataDir = path.join(
@@ -89,6 +98,16 @@ export default function pluginContentBlog(
       return [...globPattern];
     },
 
+    getClientModules() {
+      const modules = [];
+
+      if (options.admonitions) {
+        modules.push('remark-admonitions/styles/infima.css');
+      }
+
+      return modules;
+    },
+
     // Fetches blog contents and returns metadata for the necessary routes.
     async loadContent() {
       const {postsPerPage, routeBasePath} = options;

packages/docusaurus-plugin-content-blog/src/types.ts

@@ -28,7 +28,7 @@ export interface PluginOptions {
   blogPostComponent: string;
   blogTagsListComponent: string;
   blogTagsPostsComponent: string;
-  remarkPlugins: string[];
+  remarkPlugins: ([Function, object] | Function)[];
   rehypePlugins: string[];
   truncateMarker: RegExp;
   showReadingTime: boolean;
@@ -40,6 +40,7 @@ export interface PluginOptions {
     language?: string;
   };
   editUrl?: string;
+  admonitions: any;
 }
 
 export interface BlogTags {

packages/docusaurus-plugin-content-blog/types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+
+declare module 'remark-admonitions' {
+  type Options = any;
+
+  const plugin: (options?: Options) => void;
+  export = plugin;
+}

packages/docusaurus-plugin-content-docs/package.json

@@ -27,6 +27,7 @@
     "lodash.groupby": "^4.6.0",
     "lodash.pick": "^4.4.0",
     "lodash.pickby": "^4.6.0",
+    "remark-admonitions": "^1.2.1",
     "shelljs": "^0.8.3"
   },
   "peerDependencies": {

packages/docusaurus-plugin-content-docs/src/index.ts

@@ -11,6 +11,7 @@ import pickBy from 'lodash.pickby';
 import globby from 'globby';
 import fs from 'fs-extra';
 import path from 'path';
+import admonitions from 'remark-admonitions';
 import {
   normalizeUrl,
   docuHash,
@@ -57,6 +58,7 @@ const DEFAULT_OPTIONS: PluginOptions = {
   rehypePlugins: [],
   showLastUpdateTime: false,
   showLastUpdateAuthor: false,
+  admonitions: {},
 };
 
 export default function pluginContentDocs(
@@ -64,6 +66,13 @@ export default function pluginContentDocs(
   opts: Partial<PluginOptions>,
 ): Plugin<LoadedContent | null> {
   const options = {...DEFAULT_OPTIONS, ...opts};
+
+  if (options.admonitions) {
+    options.remarkPlugins = options.remarkPlugins.concat([
+      [admonitions, options.admonitions],
+    ]);
+  }
+
   const {siteDir, generatedFilesDir, baseUrl} = context;
   const docsDir = path.resolve(siteDir, options.path);
   const sourceToPermalink: SourceToPermalink = {};
@@ -119,6 +128,16 @@ export default function pluginContentDocs(
       return [...globPattern, options.sidebarPath];
     },
 
+    getClientModules() {
+      const modules = [];
+
+      if (options.admonitions) {
+        modules.push('remark-admonitions/styles/infima.css');
+      }
+
+      return modules;
+    },
+
     // Fetches blog contents and returns metadata for the contents.
     async loadContent() {
       const {include, sidebarPath} = options;

packages/docusaurus-plugin-content-docs/src/types.ts

@@ -21,8 +21,9 @@ export interface PluginOptions extends MetadataOptions, PathOptions {
   include: string[];
   docLayoutComponent: string;
   docItemComponent: string;
-  remarkPlugins: string[];
+  remarkPlugins: ([Function, object] | Function)[];
   rehypePlugins: string[];
+  admonitions: any;
 }
 
 export type SidebarItemDoc = {

packages/docusaurus-plugin-content-docs/types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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.
+ */
+
+declare module 'remark-admonitions' {
+  type Options = any;
+
+  const plugin: (options?: Options) => void;
+  export = plugin;
+}

packages/docusaurus-preset-classic/package.json

@@ -15,8 +15,7 @@
     "@docusaurus/plugin-google-gtag": "^2.0.0-alpha.50",
     "@docusaurus/plugin-sitemap": "^2.0.0-alpha.50",
     "@docusaurus/theme-classic": "^2.0.0-alpha.50",
-    "@docusaurus/theme-search-algolia": "^2.0.0-alpha.50",
-    "remark-admonitions": "^1.2.1"
+    "@docusaurus/theme-search-algolia": "^2.0.0-alpha.50"
   },
   "peerDependencies": {
     "@docusaurus/core": "^2.0.0"

packages/docusaurus-preset-classic/src/index.js

@@ -5,40 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const admonitions = require('remark-admonitions');
-
-const addAdmonitions = (pluginOptions) => {
-  if (pluginOptions == null) {
-    return {
-      remarkPlugins: [admonitions],
-    };
-  }
-
-  if (pluginOptions.admonitions === false) {
-    return pluginOptions;
-  }
-
-  const admonitionsOptions = {
-    remarkPlugins: (pluginOptions.remarkPlugins || []).concat([
-      [admonitions, pluginOptions.admonitions || {}],
-    ]),
-  };
-
-  return {
-    ...pluginOptions,
-    ...admonitionsOptions,
-  };
-};
-
 module.exports = function preset(context, opts = {}) {
   const {siteConfig = {}} = context;
   const {themeConfig} = siteConfig;
   const {algolia, googleAnalytics, gtag} = themeConfig;
-
-  const docs = addAdmonitions(opts.docs);
-  const blog = addAdmonitions(opts.blog);
-
   const isProd = process.env.NODE_ENV === 'production';
+
   return {
     themes: [
       ['@docusaurus/theme-classic', opts.theme],
@@ -46,8 +18,8 @@ module.exports = function preset(context, opts = {}) {
       algolia && '@docusaurus/theme-search-algolia',
     ],
     plugins: [
-      ['@docusaurus/plugin-content-docs', docs],
-      ['@docusaurus/plugin-content-blog', blog],
+      ['@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',

packages/docusaurus-theme-classic/src/index.js

@@ -58,7 +58,6 @@ module.exports = function (context, options) {
     getClientModules() {
       return [
         'infima/dist/css/default/default.css',
-        'remark-admonitions/styles/infima.css',
         customCss,
         path.resolve(__dirname, './prism-include-languages'),
       ];