feat(v2): minify html #2116

endiliey · 2019-12-11T11:57:04Z

Motivation

This is sort of continuation from #2115, but with several differences. Thank you @lex111

1. We minify the HTML instead of only the inlined JavaScript
Smaller size of HTML

2. The minifier is based on Terser, not babel-preset-minify
As mentioned, Terser is the standard now and babel-preset-minify is no longer maintained and seems to have lot of problems (breaking code)

3. No babel syntax transform, just pure minifying
See this comment #2115 (comment) and also consider this scenario: What if user purposefully use es modules in the injected html ? we dont want to transform that with babel. Example:

<script type="module">let foo = “test”;</script>

<script nomodule>var foo = “test”<script>

The moment we babel transform inlined (injected HTML) script in core and mention “Hey, you can use ES6 syntax+ for the inlined script, we will transform and minify it for you”. People will start abusing it. And we will start seeing GitHub issue/ questions like “Inline script does not transform optional chaining”, “how do we add new babel plugin for the inlined script transform ?”, “why the inlined script cant work with dynamic import”. and so on.

But if we shift this responsibility to plugin itself and only allow the very low level API of injecting html tags in core, we dont have this problem. (minimal API)

TL;DR we should only minify (which doesnt change syntax and result in shorter string length)

3. No extra dependencies added
Since html-webpack-plugin already depends on html-minifier-terser, technically there is no new dependency added.

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

Netlify should work
Before

<!DOCTYPE html>
<html lang="en" data-theme="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus">
<link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Docusaurus Blog RSS Feed">
<link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Docusaurus Blog Atom Feed">
<link rel="preconnect" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://www.googletagmanager.com">
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141789564-1"></script>
<script>
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'UA-141789564-1');</script>
<script type="text/javascript">/*<![CDATA[*/window.__chunkMapping={"17896441":["/17896441.f70f0c2a.js"],"25683143":["/25683143.cc8f5279.js"],"30684255":["/30684255.15cc0786.js"],"96915913":["/96915913.982e1d6c.js"],"main":["/main.f9490be7.js"],"01a85c17":["/01a85c17.17c571f7.js"],"01aa8842":["/01aa8842.95d01d8a.js"],"0204cd54":["/0204cd54.9c54f5f9.js"],"02b7a95f":["/02b7a95f.a941693b.js"],"08870b30":["/08870b30.0afa7faf.js"],"09fdfc28":["/09fdfc28.79dbe523.js"],"0a84b5e7":["/0a84b5e7.df7d6335.js"],"140d3c4a":["/140d3c4a.26f6b752.js"],"154499b4":["/154499b4.bb42ab90.js"],"1784aa17":["/1784aa17.86a59841.js"],"18b93cb3":["/18b93cb3.74b69c56.js"],"18f8ea4b":["/18f8ea4b.94783cfa.js"],"19ff1be6":["/19ff1be6.490b22ec.js"],"1a20bc57":["/1a20bc57.b49f4894.js"],"1be78505":["/1be78505.de901925.js"],"1d24f1d9":["/1d24f1d9.eb12a255.js"],"20ac7829":["/20ac7829.b31db096.js"],"2225f94a":["/2225f94a.5b51e404.js"],"261bea38":["/261bea38.ad33fa78.js"],"267e2cba":["/267e2cba.37f37f60.js"],"287db794":["/287db794.ff4df4b7.js"],"2a64589e":["/2a64589e.a551cca5.js"],"2adc8078":["/2adc8078.e95fdbcd.js"],"2c9c6297":["/2c9c6297.d86024fd.js"],"2ca5379d":["/2ca5379d.c9f33a98.js"],"2ce6f382":["/2ce6f382.b62fdaf4.js"],"2e896479":["/2e896479.339764b8.js"],"37f7e0da":["/37f7e0da.6269155a.js"],"3b8c55ea":["/3b8c55ea.f3668c0c.js"],"3d5cecac":["/3d5cecac.bb72b74f.js"],"3dc50dc3":["/3dc50dc3.aeb60376.js"],"3fb5e15e":["/3fb5e15e.8df05cd2.js"],"402c4dcb":["/402c4dcb.cc1777e3.js"],"4668dc89":["/4668dc89.47d54daa.js"],"46afcded":["/46afcded.1105cd71.js"],"46dd3c7f":["/46dd3c7f.463b0e21.js"],"49b186d8":["/49b186d8.c8b0726e.js"],"4c002a09":["/4c002a09.f725b325.js"],"4d1a6d5c":["/4d1a6d5c.2bcd3867.js"],"4d54d076":["/4d54d076.bafb4a56.js"],"4f90d9b2":["/4f90d9b2.a309be6e.js"],"50afac87":["/50afac87.959183b2.js"],"51d93073":["/51d93073.eee55de4.js"],"54697b1e":["/54697b1e.2a25a190.js"],"58ed1737":["/58ed1737.5b1f7b03.js"],"5af500d8":["/5af500d8.6d2dddfc.js"],"5bb12f4a":["/5bb12f4a.024109b2.js"],"5bcb8133":["/5bcb8133.e7464034.js"],"5dd9790b":["/5dd9790b.98e92fe6.js"],"5e710efa":["/5e710efa.0fd91bbe.js"],"5eb39304":["/5eb39304.281c20b1.js"],"5f0f9abc":["/5f0f9abc.6efb4eb3.js"],"5fff0c8f":["/5fff0c8f.ac60d5d0.js"],"62b13d4e":["/62b13d4e.f8726406.js"],"63a6d71c":["/63a6d71c.bbfb5cd7.js"],"67d623e3":["/67d623e3.50cac91d.js"],"67f5e2aa":["/67f5e2aa.f4e634cf.js"],"6875c492":["/6875c492.7277d6bf.js"],"6aabb347":["/6aabb347.c6608302.js"],"6aeafcc5":["/6aeafcc5.9d2e3af9.js"],"6b3b3b2c":["/6b3b3b2c.a338d67a.js"],"6c4644c6":["/6c4644c6.0bc3edcd.js"],"6f90047c":["/6f90047c.f4a94df7.js"],"74ed68aa":["/74ed68aa.6e0c2ad9.js"],"74ef3a35":["/74ef3a35.d4ffe17f.js"],"764b1c8f":["/764b1c8f.925ca63f.js"],"767b51bd":["/767b51bd.105a1534.js"],"76dd9293":["/76dd9293.06bfbb27.js"],"770170c0":["/770170c0.e526aae4.js"],"77790bc7":["/77790bc7.1edfbecf.js"],"77b8b134":["/77b8b134.d734dfcb.js"],"783102e9":["/783102e9.9976f4c0.js"],"7914ae29":["/7914ae29.1a408cd5.js"],"7c87d865":["/7c87d865.09c53357.js"],"7e37206e":["/7e37206e.a958affb.js"],"7fbdf69b":["/7fbdf69b.588c6ec3.js"],"7fcf40e5":["/7fcf40e5.8f895385.js"],"81e8a344":["/81e8a344.61e20635.js"],"822b5d24":["/822b5d24.dd7e1055.js"],"837709f9":["/837709f9.89b4a3bf.js"],"83dd578c":["/83dd578c.e93317fd.js"],"87625b22":["/87625b22.34a3b052.js"],"89d3d5c2":["/89d3d5c2.0f3e0ea8.js"],"89e751fc":["/89e751fc.6ed8e36a.js"],"8be5b89e":["/8be5b89e.4f52d9f9.js"],"8c505b87":["/8c505b87.95cc3424.js"],"8c5f4d87":["/8c5f4d87.1b048ea5.js"],"8e563735":["/8e563735.e7791035.js"],"971a8848":["/971a8848.0028e26d.js"],"9e01782d":["/9e01782d.b86f9912.js"],"9e62b5d6":["/9e62b5d6.53ecf11b.js"],"9ed00105":["/9ed00105.5f9adb15.js"],"a09c2993":["/a09c2993.efa0ed0a.js"],"a3713279":["/a3713279.02e4ab4f.js"],"a3bbd5c8":["/a3bbd5c8.2707045d.js"],"a480b4be":["/a480b4be.ee44d327.js"],"a6aa9e1f":["/a6aa9e1f.de89b5aa.js"],"a75a6561":["/a75a6561.f12a1ab9.js"],"aa2f0156":["/aa2f0156.d07c4008.js"],"aaef5a53":["/aaef5a53.e0464c23.js"],"afa1a069":["/afa1a069.55a8dbdb.js"],"b2c8684d":["/b2c8684d.ff92c4cd.js"],"b42ce09d":["/b42ce09d.2983ed49.js"],"b67ea082":["/b67ea082.6db3a50d.js"],"b7fbb5f1":["/b7fbb5f1.bc7a6efc.js"],"b96a31b4":["/b96a31b4.d2b4db27.js"],"bb3a118c":["/bb3a118c.ec398ccd.js"],"bbb4ffb5":["/bbb4ffb5.9257be24.js"],"bed7d7c8":["/bed7d7c8.7c3e09b5.js"],"c4f5d8e4":["/c4f5d8e4.e9427931.js"],"c58a0043":["/c58a0043.2527a4e8.js"],"c5c79833":["/c5c79833.f4282503.js"],"c5fa4f72":["/c5fa4f72.3e9126ff.js"],"c6c6e257":["/c6c6e257.4441d1a1.js"],"c9fb863b":["/c9fb863b.787dde98.js"],"ccc49370":["/ccc49370.aeb530c2.js"],"cdce3312":["/cdce3312.87e425e8.js"],"cf2596d5":["/cf2596d5.2ed1e163.js"],"d001b2a7":["/d001b2a7.4815c2b4.js"],"d0dd2e11":["/d0dd2e11.dbcdb8b6.js"],"d14fd625":["/d14fd625.4f9f35f3.js"],"d15ac538":["/d15ac538.92f3a87c.js"],"d16294ef":["/d16294ef.89962015.js"],"d45865fa":["/d45865fa.ef72ac16.js"],"d53256a5":["/d53256a5.97af4b57.js"],"d6561e67":["/d6561e67.afdb96de.js"],"db6ad023":["/db6ad023.344e447f.js"],"e085537a":["/e085537a.219ed894.js"],"e1b93747":["/e1b93747.65911287.js"],"e5e3e6a4":["/e5e3e6a4.0b615567.js"],"e695068e":["/e695068e.9c734c16.js"],"ea12838a":["/ea12838a.45744a4e.js"],"ee343238":["/ee343238.01c88ab3.js"],"ee967ccb":["/ee967ccb.4484213a.js"],"efc06d10":["/efc06d10.696b55d2.js"],"f53c2c57":["/f53c2c57.9929490a.js"],"f56332ee":["/f56332ee.baace2da.js"],"f68d5d34":["/f68d5d34.cfd7e373.js"],"f6d3c13e":["/f6d3c13e.dc0fdcf1.js"],"f76827dd":["/f76827dd.105c9e23.js"],"f8502f87":["/f8502f87.d171844f.js"],"f94b994a":["/f94b994a.6dc43bf7.js"],"f9a2b964":["/f9a2b964.437fbea7.js"],"fadb1678":["/fadb1678.e8efc608.js"],"fd3cc6cb":["/fd3cc6cb.8946ada6.js"]};/*]]>*/</script>

<title data-react-helmet="true">Writing Plugins</title>

<meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"/><meta data-react-helmet="true" property="og:title" content="Docusaurus · Build optimized websites quickly, focus on your content"/><meta data-react-helmet="true" name="docsearch:version" content="2.0.0-alpha.36"/><meta data-react-helmet="true" property="og:image" content="https://v2.docusaurus.io/img/docusaurus.png"/><meta data-react-helmet="true" property="twitter:image" content="https://v2.docusaurus.io/img/docusaurus.png"/><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Docusaurus · Build optimized websites quickly, focus on your content"/><meta data-react-helmet="true" name="twitter:card" content="summary"/><meta data-react-helmet="true" name="description" content="In this doc, we talk about the design intention of plugins and how you may write your own plugins."/><meta data-react-helmet="true" property="og:description" content="In this doc, we talk about the design intention of plugins and how you may write your own plugins."/><meta data-react-helmet="true" property="og:url" content="https://v2.docusaurus.io/docs/2.0.0-alpha.36/advanced-plugins"/>

<link data-react-helmet="true" rel="shortcut icon" href="/img/docusaurus.ico"/>


<link rel="stylesheet" type="text/css" href="/styles.3b2f3c6c.css" />

</head>
<body >
<script type="text/javascript">(function() {
  function setDataThemeAttribute(theme) {
    document.querySelector('html').setAttribute('data-theme', theme);
  }
  
  var preferDarkQuery = '(prefers-color-scheme: dark)';
  var mql = window.matchMedia(preferDarkQuery);
  var supportsColorSchemeQuery = mql.media === preferDarkQuery;
  var localStorageTheme = null;
  try {
    localStorageTheme = localStorage.getItem('theme');
  } catch (err) {}
  var localStorageExists = localStorageTheme !== null;

  if (localStorageExists) {
    setDataThemeAttribute(localStorageTheme);
  } else if (supportsColorSchemeQuery && mql.matches) {
    setDataThemeAttribute('dark');
  }
})();</script>
<div id="__docusaurus">
<nav class="navbar navbar--light navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/docusaurus.svg" alt="Docusaurus Logo"/><strong class="">Docusaurus</strong></a><a class="navbar__item navbar__link" style="white-space:nowrap;padding:0.25rem 0.5rem 0.2rem 0.25rem;font-size:calc(0.9 * var(--ifm-font-size-base));text-decoration:underline" href="/versions">2.0.0-alpha.39</a><a class="navbar__item navbar__link" href="/docs/introduction">Docs</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a class="navbar__item navbar__link" href="/showcase">Showcase</a><a class="navbar__item navbar__link" href="/feedback">Feedback</a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_23B8"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_3N95 moon_3dgQ"></span></div><div class="react-toggle-track-x"><span class="toggle_3N95 sun_3jj_"></span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"/></div><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"/></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/docusaurus.svg" alt="Docusaurus Logo"/><strong>Docusaurus</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" style="white-space:nowrap;padding:0.25rem 0.5rem 0.2rem 0.25rem;font-size:calc(0.9 * var(--ifm-font-size-base));text-decoration:underline" href="/versions">2.0.0-alpha.39</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/introduction">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a class="menu__link" href="/showcase">Showcase</a></li><li class="menu__list-item"><a class="menu__link" href="/feedback">Feedback</a></li><li class="menu__list-item"><a class="menu__link" target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_3o6D"><div class="docSidebarContainer_CIZL"><div class="sidebar_38Ic"><div class="menu menu--responsive"><button aria-label="Open Menu" class="button button--secondary button--sm menu__button" type="button"><svg class="sidebarMenuIcon_16PA" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Docusaurus</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/introduction">Introduction</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/design-principles">Design Principles</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/configuration">Configuration</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/creating-pages">Creating Pages</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/styling-layout">Styling and Layout</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/static-assets">Static Assets</a></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Docs</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/markdown-features">Markdown Features</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/sidebar">Sidebar</a></li></ul></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/blog">Blog</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/analytics">Analytics</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/seo">SEO</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/search">Search</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/migrating-from-v1-to-v2">Migrating from v1 to v2</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Advanced Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Plugins</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/using-plugins">Introduction</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/2.0.0-alpha.36/advanced-plugins">Writing Plugins</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Themes</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/using-themes">Introduction</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/advanced-themes">Writing Themes</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/theme-classic">Classic Theme Configuration</a></li></ul></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/presets">Presets</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API Reference</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/cli">CLI</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/docusaurus-core">Docusaurus Client API</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/docusaurus.config.js">docusaurus.config.js</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/lifecycle-apis">Lifecycle APIs</a></li></ul></li></ul></div></div></div><main class="docMainContainer_zx5a"><div class="padding-vert--lg"><div class="container"><div class="row"><div class="col"><div class="docItemContainer_2PJJ"><article><span style="vertical-align:top" class="badge badge--info">Version: <!-- -->2.0.0-alpha.36</span><header><h1 class="docTitle_2znT">Writing Plugins</h1></header><div class="markdown"><p>In this doc, we talk about the design intention of plugins and how you may write your own plugins.</p><p>Docusaurus Plugins are very similar to <a href="https://www.gatsbyjs.org/plugins/">Gatsby Plugins</a> and <a href="https://v1.vuepress.vuejs.org/plugin/">VuePress Plugins</a>. The main difference here is that Docusaurus plugins don&#x27;t allow plugins to include another plugin. Docusaurus provides <a href="/docs/2.0.0-alpha.36/presets">presets</a> to bundle plugins that are meant to work together.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="plugins-design"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#plugins-design" title="Direct link to heading">#</a>Plugins design</h2><p>Docusaurus&#x27; implementation of the plugins system provides us with a convenient way to hook into the website&#x27;s lifecycle to modify what goes on during development/build, which involves (but not limited to) extending the webpack config, modifying the data being loaded and creating new components to be used in a page.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="creating-plugins"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#creating-plugins" title="Direct link to heading">#</a>Creating plugins</h2><p>A plugin is a module which exports a function that takes two parameters and returns an object when executed.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="module-definition"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#module-definition" title="Direct link to heading">#</a>Module definition</h3><p>The exported modules for plugins are called with two parameters: <code>context</code> and <code>options</code> and returns a JavaScript object with defining the <a href="/docs/2.0.0-alpha.36/lifecycle-apis">lifecycle APIs</a>.</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Example contents of a Docusaurus plugin.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method-variable function-variable method function property-access" style="color:rgb(130, 170, 255)">exports</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">function</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter">context</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token parameter"> options</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// ...</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    name</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;my-docusaurus-plugin&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">loadContent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> </span><span class="token spread operator" style="color:rgb(137, 221, 255)">...</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">contentLoaded</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token parameter">content</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token parameter"> actions</span><span class="token parameter punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"> </span><span class="token spread operator" style="color:rgb(137, 221, 255)">...</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">/* other lifecycle api */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="context"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#context" title="Direct link to heading">#</a><code>context</code></h4><p><code>context</code> is plugin-agnostic and the same object will be passed into all plugins used for a Docusaurus website. The <code>context</code> object contains the following fields:</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">interface</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">LoadContext</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  siteDir</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  generatedFilesDir</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  siteConfig</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token maybe-class-name">DocusaurusConfig</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  outDir</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  baseUrl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> string</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="options"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#options" title="Direct link to heading">#</a><code>options</code></h4><p><code>options</code> are the <a href="/docs/2.0.0-alpha.36/using-plugins#configuring-plugins">second optional parameter when the plugins are used</a>. <code>options</code> are plugin-specific and are specified by users when they use them in <code>docusaurus.config.js</code>. Alternatively, if preset contains the plugin, the preset will then be in charge of passing the correct options into the plugin. It is up to individual plugin to define what options it takes.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="return-value"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#return-value" title="Direct link to heading">#</a>Return value</h4><p>The returned object value should implement the <a href="/docs/2.0.0-alpha.36/lifecycle-apis">lifecycle APIs</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="official-plugins"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#official-plugins" title="Direct link to heading">#</a>Official plugins</h2><p>Find the list of official Docusaurus plugins <a href="https://github.com/facebook/docusaurus/tree/master/packages">here</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-content-blog"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-content-blog" title="Direct link to heading">#</a><code>@docusaurus/plugin-content-blog</code></h3><p>Provides the <a href="/docs/2.0.0-alpha.36/blog">Blog</a> feature and is the default blog plugin for Docusaurus. The classic template ships with this plugin with default configurations.</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// docusaurus.config.js</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  plugins</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@docusaurus/plugin-content-blog&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Path to data on filesystem</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * relative to site dir</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blog&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * URL route for the blog section of your site</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * do not include trailing slash</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        routeBasePath</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;blog&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        include</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;*.md&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;*.mdx&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        postsPerPage</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Theme components used by the blog pages</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blogListComponent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@theme/BlogListPage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blogPostComponent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@theme/BlogPostPage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blogTagsListComponent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@theme/BlogTagsListPage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blogTagsPostsComponent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@theme/BlogTagsPostsPage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Remark and Rehype plugins passed to MDX</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        remarkPlugins</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        rehypePlugins</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Truncate marker, can be a regex or string.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        truncateMarker</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token regex">/&lt;!--\s*(truncate)\s*--&gt;/</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Blog feed</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * If feedOptions is undefined, no rss feed will be generated</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        feedOptions</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          type</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// required. &#x27;rss&#x27; | &#x27;feed&#x27; | &#x27;all&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          title</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// default to siteConfig.title</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          description</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// default to  `${siteConfig.title} Blog`</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          copyright</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          language</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token keyword nil" style="font-style:italic">undefined</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-content-docs"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-content-docs" title="Direct link to heading">#</a><code>@docusaurus/plugin-content-docs</code></h3><p>Provides the <a href="/docs/2.0.0-alpha.36/markdown-features">Docs</a> functionality and is the default docs plugin for Docusaurus. The classic template ships with this plugin with default configurations.</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// docusaurus.config.js</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  plugins</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@docusaurus/plugin-content-docs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Path to data on filesystem</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * relative to site dir</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;docs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * URL for editing website repo, example: &#x27;https://github.com/facebook/docusaurus/edit/master/website/&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        editUrl</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;https://github.com/facebook/docusaurus/edit/master/website/&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * URL route for the blog section of your site</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * do not include trailing slash</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        routeBasePath</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;docs&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        include</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;**/*.md&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;**/*.mdx&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// Extensions to include.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Path to sidebar configuration for showing a list of markdown pages.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Warning: will change</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        sidebarPath</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Theme components used by the docs pages</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        docLayoutComponent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@theme/DocPage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        docItemComponent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@theme/DocItem&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Remark and Rehype plugins passed to MDX</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        remarkPlugins</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        rehypePlugins</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Whether to display the author who last updated the doc.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        showLastUpdateAuthor</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">false</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Whether to display the last date the doc was updated.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        showLastUpdateTime</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token boolean" style="color:rgb(255, 88, 116)">false</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-content-pages"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-content-pages" title="Direct link to heading">#</a><code>@docusaurus/plugin-content-pages</code></h3><p>The default pages plugin for Docusaurus. The classic template ships with this plugin with default configurations. This plugin provides <a href="/docs/2.0.0-alpha.36/creating-pages">creating pages</a> functionality.</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// docusaurus.config.js</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  plugins</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@docuaurus/plugin-content-pages&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * Path to data on filesystem</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * relative to site dir</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * components in this directory will be automatically converted to pages</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;src/pages&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * URL route for the blog section of your site</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         * do not include trailing slash</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:rgb(105, 112, 152);font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        routeBasePath</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        include</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;**/*.{js,jsx}&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-google-analytics"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-google-analytics" title="Direct link to heading">#</a><code>@docusaurus/plugin-google-analytics</code></h3><p>The default <a href="https://developers.google.com/analytics/devguides/collection/analyticsjs/">Google Analytics</a> plugin.</p><p><strong>Installation</strong></p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-shell codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ </span><span class="token function" style="color:rgb(130, 170, 255)">npm</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> --save @docusaurus/plugin-google-analytics</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><p><strong>Configuration</strong></p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// docusaurus.config.js</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  plugins</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@docusaurus/plugin-google-analytics&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  themeConfig</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    googleAnalytics</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      trackingID</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;UA-141789564-1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-google-gtag"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-google-gtag" title="Direct link to heading">#</a><code>@docusaurus/plugin-google-gtag</code></h3><p>The default <a href="https://developers.google.com/analytics/devguides/collection/gtagjs/">Global Site Tag (gtag.js)</a> plugin.</p><p><strong>Installation</strong></p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-shell codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ </span><span class="token function" style="color:rgb(130, 170, 255)">npm</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> --save @docusaurus/plugin-google-gtag</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><p><strong>Configuration</strong></p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// docusaurus.config.js</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  plugins</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@docusaurus/plugin-google-gtag&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  themeConfig</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    gtag</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      trackingID</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;UA-141789564-1&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-sitemap"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-sitemap" title="Direct link to heading">#</a><code>@docusaurus/plugin-sitemap</code></h3><p>The classic template ships with this plugin. This plugin creates sitemap for your site so that search engine crawlers can crawl your site more accurately.</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// docusaurus.config.js</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  plugins</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@docusaurus/plugin-sitemap&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      cacheTime</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">600</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">*</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">1000</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// 600 sec - cache purge period</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      changefreq</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;weekly&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      priority</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0.5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:rgb(199, 146, 234)">]</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-ideal-image"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-ideal-image" title="Direct link to heading">#</a><code>@docusaurus/plugin-ideal-image</code></h3><p>Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder)</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-sh codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">npm install --save @docusaurus/plugin-ideal-image</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><p>Modify your <code>docusaurus.config.js</code></p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-diff codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">module.exports = {</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token unchanged">  ...</span></div><div class="token-line" style="color:#bfc7d5"><span class="token unchanged"></span><span class="token inserted-sign inserted">+ plugins: [&#x27;@docusaurus/plugin-ideal-image&#x27;],</span></div><div class="token-line" style="color:#bfc7d5"><span class="token inserted-sign inserted"></span><span class="token unchanged">  ...</span></div><div class="token-line" style="color:#bfc7d5"><span class="token unchanged"></span><span class="token plain">}</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="usage"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#usage" title="Direct link to heading">#</a>Usage</h2><p>This plugin supports png, gif and jpg only</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-jsx codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Image </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;@theme/IdealImage&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> thumbnail </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">&#x27;./path/to/img.png&#x27;</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// your react code</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 203, 107)">Image</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">img</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript" style="color:rgb(255, 85, 114)">thumbnail</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">// or</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">&lt;</span><span class="token tag class-name" style="color:rgb(255, 203, 107)">Image</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag attr-name" style="color:rgb(255, 203, 107)">img</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:rgb(199, 146, 234)">=</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token tag script language-javascript function" style="color:rgb(130, 170, 255)">require</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token tag script language-javascript string" style="color:rgb(195, 232, 141)">&#x27;./path/to/img.png&#x27;</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token tag script language-javascript punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token tag" style="color:rgb(255, 85, 114)"> </span><span class="token tag punctuation" style="color:rgb(199, 146, 234)">/&gt;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="options-1"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#options-1" title="Direct link to heading">#</a>Options</h3><table><thead><tr><th>Option</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td><code>ideal-img/[name].[hash:hex:7].[width].[ext]</code></td><td>Filename template for output files.</td></tr><tr><td><code>sizes</code></td><td><code>array</code></td><td><em>original size</em></td><td>Specify all widths you want to use. If a specified size exceeds the original image&#x27;s width, the latter will be used (i.e. images won&#x27;t be scaled up). You may also declare a default <code>sizes</code> array in the loader options in your <code>webpack.config.js</code>.</td></tr><tr><td><code>size</code></td><td><code>integer</code></td><td><em>original size</em></td><td>Specify one width you want to use; if the specified size exceeds the original image&#x27;s width, the latter will be used (i.e. images won&#x27;t be scaled up)</td></tr><tr><td><code>min</code></td><td><code>integer</code></td><td></td><td>As an alternative to manually specifying <code>sizes</code>, you can specify <code>min</code>, <code>max</code> and <code>steps</code>, and the sizes will be generated for you.</td></tr><tr><td><code>max</code></td><td><code>integer</code></td><td></td><td>See <code>min</code> above</td></tr><tr><td><code>steps</code></td><td><code>integer</code></td><td><code>4</code></td><td>Configure the number of images generated between <code>min</code> and <code>max</code> (inclusive)</td></tr><tr><td><code>quality</code></td><td><code>integer</code></td><td><code>85</code></td><td>JPEG compression quality</td></tr></tbody></table></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/docusaurus/edit/master/website/versioned_docs/version-2.0.0-alpha.36/advanced-plugins.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small>Last updated<!-- --> <!-- -->on<!-- --> <time dateTime="2019-11-24T02:13:16.000Z" class="docLastUpdatedAt_3e77">11/24/2019</time> <!-- -->by <strong>Endi</strong></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/2.0.0-alpha.36/using-plugins"><h5 class="pagination-nav__link--sublabel">Previous</h5><h4 class="pagination-nav__link--label">« <!-- -->Plugins</h4></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/2.0.0-alpha.36/using-themes"><h5 class="pagination-nav__link--sublabel">Next</h5><h4 class="pagination-nav__link--label">Themes<!-- --> »</h4></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3VES"><ul class="contents contents__left-border"><li><a href="#plugins-design" class="contents__link">Plugins design</a></li><li><a href="#creating-plugins" class="contents__link">Creating plugins</a><ul class=""><li><a href="#module-definition" class="contents__link">Module definition</a></li></ul></li><li><a href="#official-plugins" class="contents__link">Official plugins</a><ul class=""><li><a href="#docusaurusplugin-content-blog" class="contents__link"><code>@docusaurus/plugin-content-blog</code></a></li><li><a href="#docusaurusplugin-content-docs" class="contents__link"><code>@docusaurus/plugin-content-docs</code></a></li><li><a href="#docusaurusplugin-content-pages" class="contents__link"><code>@docusaurus/plugin-content-pages</code></a></li><li><a href="#docusaurusplugin-google-analytics" class="contents__link"><code>@docusaurus/plugin-google-analytics</code></a></li><li><a href="#docusaurusplugin-google-gtag" class="contents__link"><code>@docusaurus/plugin-google-gtag</code></a></li><li><a href="#docusaurusplugin-sitemap" class="contents__link"><code>@docusaurus/plugin-sitemap</code></a></li><li><a href="#docusaurusplugin-ideal-image" class="contents__link"><code>@docusaurus/plugin-ideal-image</code></a></li></ul></li><li><a href="#usage" class="contents__link">Usage</a><ul class=""><li><a href="#options-1" class="contents__link">Options</a></li></ul></li></ul></div></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/introduction">Introduction</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/installation">Installation</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/migrating-from-v1-to-v2">Migration from v1 to v2</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/questions/tagged/docusaurus">Stack Overflow</a></li><li class="footer__item"><a class="footer__link-item" href="/feedback">Feedback</a></li><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://discordapp.com/invite/docusaurus">Discord</a></li><li class="footer__item"><a class="footer__link-item" href="/help">Help</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Social</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a></li><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://twitter.com/docusaurus">Twitter</a></li></ul></div></div><div class="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com/" target="_blank" rel="noopener noreferrer" class="footerLogoLink_Yf0T"><img class="footer__logo" alt="Facebook Open Source Logo" src="https://docusaurus.io/img/oss_logo.png"/></a></div>Copyright © 2019 Facebook, Inc.</div></div></footer>
</div>

<script type="text/javascript" src="/styles.180ec355.js"></script>

<script type="text/javascript" src="/runtime~main.d6457b58.js"></script>

<script type="text/javascript" src="/main.f9490be7.js"></script>

<script type="text/javascript" src="/1.0c116af7.js"></script>

<script type="text/javascript" src="/2.6c2b4dd3.js"></script>

<script type="text/javascript" src="/1be78505.de901925.js"></script>

<script type="text/javascript" src="/6c4644c6.0bc3edcd.js"></script>

<script type="text/javascript" src="/17896441.f70f0c2a.js"></script>

<script type="text/javascript" src="/e5e3e6a4.0b615567.js"></script>


</body>
</html>

After

<!doctype html><html lang="en" data-theme=""><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width"><meta name="generator" content="Docusaurus"><link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Docusaurus Blog RSS Feed"><link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Docusaurus Blog Atom Feed"><link rel="preconnect" href="https://www.google-analytics.com"><link rel="preconnect" href="https://www.googletagmanager.com"><script async src="https://www.googletagmanager.com/gtag/js?id=UA-141789564-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-141789564-1")</script><script>window.__chunkMapping={17896441:["/17896441.9b71ef06.js"],25683143:["/25683143.4f861140.js"],30684255:["/30684255.15cc0786.js"],96915913:["/96915913.776e9c45.js"],main:["/main.2675bdb8.js"],"01a85c17":["/01a85c17.be5e8b3d.js"],"01aa8842":["/01aa8842.3130f3fe.js"],"0204cd54":["/0204cd54.c2b59590.js"],"02b7a95f":["/02b7a95f.510a00ae.js"],"08870b30":["/08870b30.cd23b7cc.js"],"09fdfc28":["/09fdfc28.5b5532e7.js"],"0a84b5e7":["/0a84b5e7.c8e35c7a.js"],"140d3c4a":["/140d3c4a.bea0b2a2.js"],"154499b4":["/154499b4.612857a1.js"],"1784aa17":["/1784aa17.4c68b1c9.js"],"18b93cb3":["/18b93cb3.0c3686dd.js"],"18f8ea4b":["/18f8ea4b.c885ab8a.js"],"19ff1be6":["/19ff1be6.c46da626.js"],"1a20bc57":["/1a20bc57.bc042527.js"],"1be78505":["/1be78505.82999a45.js"],"1d24f1d9":["/1d24f1d9.016d29c8.js"],"20ac7829":["/20ac7829.b31db096.js"],"2225f94a":["/2225f94a.946552a3.js"],"261bea38":["/261bea38.206fecf8.js"],"267e2cba":["/267e2cba.c0fe8e37.js"],"287db794":["/287db794.026ee3c9.js"],"2a64589e":["/2a64589e.8730abec.js"],"2adc8078":["/2adc8078.b305e5d0.js"],"2c9c6297":["/2c9c6297.df6b2c7e.js"],"2ca5379d":["/2ca5379d.60a39ed4.js"],"2ce6f382":["/2ce6f382.add6244e.js"],"2e896479":["/2e896479.67342f95.js"],"37f7e0da":["/37f7e0da.9b536f0d.js"],"3b8c55ea":["/3b8c55ea.3a6207d4.js"],"3d5cecac":["/3d5cecac.4e3f7315.js"],"3dc50dc3":["/3dc50dc3.921feb94.js"],"3fb5e15e":["/3fb5e15e.5f80fdff.js"],"402c4dcb":["/402c4dcb.3e3ffaff.js"],"4668dc89":["/4668dc89.2dbb4f94.js"],"46afcded":["/46afcded.4fd64b73.js"],"46dd3c7f":["/46dd3c7f.5f7508e7.js"],"49b186d8":["/49b186d8.99b1ac60.js"],"4c002a09":["/4c002a09.e0863d3d.js"],"4d1a6d5c":["/4d1a6d5c.01f94809.js"],"4d54d076":["/4d54d076.ff18248f.js"],"4f90d9b2":["/4f90d9b2.3444ee4d.js"],"50afac87":["/50afac87.959183b2.js"],"51d93073":["/51d93073.e5e2bac3.js"],"54697b1e":["/54697b1e.3629c77f.js"],"58ed1737":["/58ed1737.d5fab3ef.js"],"5af500d8":["/5af500d8.80944dc6.js"],"5bb12f4a":["/5bb12f4a.d2a37095.js"],"5bcb8133":["/5bcb8133.1845e69e.js"],"5dd9790b":["/5dd9790b.a3ff5aac.js"],"5e710efa":["/5e710efa.dfc6da2c.js"],"5eb39304":["/5eb39304.ca4b6f1d.js"],"5f0f9abc":["/5f0f9abc.6efb4eb3.js"],"5fff0c8f":["/5fff0c8f.89afa180.js"],"62b13d4e":["/62b13d4e.509da852.js"],"63a6d71c":["/63a6d71c.9e0fa5f3.js"],"67d623e3":["/67d623e3.b7e73105.js"],"67f5e2aa":["/67f5e2aa.6dd8fcb2.js"],"6875c492":["/6875c492.b8ff9d85.js"],"6aabb347":["/6aabb347.02233002.js"],"6aeafcc5":["/6aeafcc5.9d2e3af9.js"],"6b3b3b2c":["/6b3b3b2c.5773120b.js"],"6c4644c6":["/6c4644c6.0bc3edcd.js"],"6f90047c":["/6f90047c.ceaabcad.js"],"74ed68aa":["/74ed68aa.c382d825.js"],"74ef3a35":["/74ef3a35.ad120114.js"],"764b1c8f":["/764b1c8f.a2e6074b.js"],"767b51bd":["/767b51bd.991160ea.js"],"76dd9293":["/76dd9293.7dd3323f.js"],"770170c0":["/770170c0.e526aae4.js"],"77790bc7":["/77790bc7.2ed0e6bc.js"],"77b8b134":["/77b8b134.825d9d62.js"],"783102e9":["/783102e9.ce9195f6.js"],"7914ae29":["/7914ae29.90c0235e.js"],"7c87d865":["/7c87d865.7f5f9de9.js"],"7e37206e":["/7e37206e.fcb1ce1a.js"],"7fbdf69b":["/7fbdf69b.30261034.js"],"7fcf40e5":["/7fcf40e5.cb9c4dd0.js"],"81e8a344":["/81e8a344.381f0d59.js"],"822b5d24":["/822b5d24.fae095d3.js"],"837709f9":["/837709f9.d7c6331e.js"],"83dd578c":["/83dd578c.39fa96cb.js"],"87625b22":["/87625b22.1e0d1805.js"],"89d3d5c2":["/89d3d5c2.2fb464ac.js"],"89e751fc":["/89e751fc.52ae13d9.js"],"8be5b89e":["/8be5b89e.4f52d9f9.js"],"8c505b87":["/8c505b87.ae09ae07.js"],"8c5f4d87":["/8c5f4d87.63cbdc55.js"],"8e563735":["/8e563735.9b697329.js"],"971a8848":["/971a8848.ba1736a1.js"],"9e01782d":["/9e01782d.c7fe6a3a.js"],"9e62b5d6":["/9e62b5d6.6f24c3a1.js"],"9ed00105":["/9ed00105.80038b62.js"],a09c2993:["/a09c2993.bdb64ac1.js"],a3713279:["/a3713279.b6ed0ac0.js"],a3bbd5c8:["/a3bbd5c8.7e4ff957.js"],a480b4be:["/a480b4be.ce70dad0.js"],a6aa9e1f:["/a6aa9e1f.399cf77e.js"],a75a6561:["/a75a6561.233e38dc.js"],aa2f0156:["/aa2f0156.80f1d334.js"],aaef5a53:["/aaef5a53.3a8caad9.js"],afa1a069:["/afa1a069.c0aec46f.js"],b2c8684d:["/b2c8684d.5454a010.js"],b42ce09d:["/b42ce09d.2715ff8c.js"],b67ea082:["/b67ea082.db67b953.js"],b7fbb5f1:["/b7fbb5f1.8cde895e.js"],b96a31b4:["/b96a31b4.18662fb5.js"],bb3a118c:["/bb3a118c.8877f476.js"],bbb4ffb5:["/bbb4ffb5.9257be24.js"],bed7d7c8:["/bed7d7c8.059ff807.js"],c4f5d8e4:["/c4f5d8e4.3ad9f55a.js"],c58a0043:["/c58a0043.4d34f16f.js"],c5c79833:["/c5c79833.44932830.js"],c5fa4f72:["/c5fa4f72.22188542.js"],c6c6e257:["/c6c6e257.4441d1a1.js"],c9fb863b:["/c9fb863b.4082b635.js"],ccc49370:["/ccc49370.a3e600e7.js"],cdce3312:["/cdce3312.20269092.js"],cf2596d5:["/cf2596d5.0c2b8ea1.js"],d001b2a7:["/d001b2a7.7bcedcf3.js"],d0dd2e11:["/d0dd2e11.b85e7dd2.js"],d14fd625:["/d14fd625.fe410669.js"],d15ac538:["/d15ac538.cfdcdb64.js"],d16294ef:["/d16294ef.8bcb8e11.js"],d45865fa:["/d45865fa.eaea9f91.js"],d53256a5:["/d53256a5.6a09555b.js"],d6561e67:["/d6561e67.c0bdc38a.js"],db6ad023:["/db6ad023.7e140466.js"],e085537a:["/e085537a.219ed894.js"],e1b93747:["/e1b93747.b431c049.js"],e5e3e6a4:["/e5e3e6a4.265251b8.js"],e695068e:["/e695068e.418f3e96.js"],ea12838a:["/ea12838a.d16fa60c.js"],ee343238:["/ee343238.2c79e7c5.js"],ee967ccb:["/ee967ccb.26245e4a.js"],efc06d10:["/efc06d10.f430a9bd.js"],f53c2c57:["/f53c2c57.58a3768f.js"],f56332ee:["/f56332ee.d463becd.js"],f68d5d34:["/f68d5d34.121d5a7b.js"],f6d3c13e:["/f6d3c13e.26d1ffb3.js"],f76827dd:["/f76827dd.9ba5a9d6.js"],f8502f87:["/f8502f87.cb9904b1.js"],f94b994a:["/f94b994a.80a46ac4.js"],f9a2b964:["/f9a2b964.ff709fe7.js"],fadb1678:["/fadb1678.14adcf70.js"],fd3cc6cb:["/fd3cc6cb.8946ada6.js"]}</script><title data-react-helmet="true">Writing Plugins</title><meta data-react-helmet="true" http-equiv="x-ua-compatible" content="ie=edge"><meta data-react-helmet="true" property="og:title" content="Docusaurus · Build optimized websites quickly, focus on your content"><meta data-react-helmet="true" name="docsearch:version" content="2.0.0-alpha.36"><meta data-react-helmet="true" property="og:image" content="https://v2.docusaurus.io/img/docusaurus.png"><meta data-react-helmet="true" property="twitter:image" content="https://v2.docusaurus.io/img/docusaurus.png"><meta data-react-helmet="true" name="twitter:image:alt" content="Image for Docusaurus · Build optimized websites quickly, focus on your content"><meta data-react-helmet="true" name="twitter:card" content="summary"><meta data-react-helmet="true" name="description" content="In this doc, we talk about the design intention of plugins and how you may write your own plugins."><meta data-react-helmet="true" property="og:description" content="In this doc, we talk about the design intention of plugins and how you may write your own plugins."><meta data-react-helmet="true" property="og:url" content="https://v2.docusaurus.io/docs/2.0.0-alpha.36/advanced-plugins"><link data-react-helmet="true" rel="shortcut icon" href="/img/docusaurus.ico"><link rel="stylesheet" href="/styles.493fd30d.css"></head><body><script>!function(){function e(e){document.querySelector("html").setAttribute("data-theme",e)}var t=window.matchMedia("(prefers-color-scheme: dark)"),r="(prefers-color-scheme: dark)"===t.media,a=null;try{a=localStorage.getItem("theme")}catch(e){}null!==a?e(a):r&&t.matches&&e("dark")}()</script><div id="__docusaurus"><nav class="navbar navbar--light navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><div aria-label="Navigation bar toggle" class="navbar__toggle" role="button" tabindex="0"><svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></div><a aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/docusaurus.svg" alt="Docusaurus Logo"><strong class="">Docusaurus</strong></a><a class="navbar__item navbar__link" style="white-space:nowrap;padding:.25rem .5rem .2rem .25rem;font-size:calc(.9 * var(--ifm-font-size-base));text-decoration:underline" href="/versions">2.0.0-alpha.39</a><a class="navbar__item navbar__link" href="/docs/introduction">Docs</a><a class="navbar__item navbar__link" href="/blog">Blog</a><a class="navbar__item navbar__link" href="/showcase">Showcase</a><a class="navbar__item navbar__link" href="/feedback">Feedback</a></div><div class="navbar__items navbar__items--right"><a class="navbar__item navbar__link" target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a><div class="react-toggle react-toggle--disabled displayOnlyInLargeViewport_23B8"><div class="react-toggle-track"><div class="react-toggle-track-check"><span class="toggle_3N95 moon_3dgQ"></span></div><div class="react-toggle-track-x"><span class="toggle_3N95 sun_3jj_"></span></div></div><div class="react-toggle-thumb"></div><input type="checkbox" disabled="" aria-label="Dark mode toggle" class="react-toggle-screenreader-only"></div><div class="navbar__search"><span aria-label="expand searchbar" role="button" class="search-icon" tabindex="0"></span><input type="search" id="search_input_react" placeholder="Search" aria-label="Search" class="navbar__search-input search-bar"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div><div class="navbar-sidebar"><div class="navbar-sidebar__brand"><a aria-current="page" class="navbar__brand active" href="/"><img class="navbar__logo" src="/img/docusaurus.svg" alt="Docusaurus Logo"><strong>Docusaurus</strong></a></div><div class="navbar-sidebar__items"><div class="menu"><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" style="white-space:nowrap;padding:.25rem .5rem .2rem .25rem;font-size:calc(.9 * var(--ifm-font-size-base));text-decoration:underline" href="/versions">2.0.0-alpha.39</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/introduction">Docs</a></li><li class="menu__list-item"><a class="menu__link" href="/blog">Blog</a></li><li class="menu__list-item"><a class="menu__link" href="/showcase">Showcase</a></li><li class="menu__list-item"><a class="menu__link" href="/feedback">Feedback</a></li><li class="menu__list-item"><a class="menu__link" target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a></li></ul></div></div></div></nav><div class="main-wrapper"><div class="docPage_3o6D"><div class="docSidebarContainer_CIZL"><div class="sidebar_38Ic"><div class="menu menu--responsive"><button aria-label="Open Menu" class="button button--secondary button--sm menu__button" type="button"><svg class="sidebarMenuIcon_16PA" xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 32 32" role="img" focusable="false"><title>Menu</title><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><ul class="menu__list"><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Docusaurus</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/introduction">Introduction</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/design-principles">Design Principles</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/contributing">Contributing</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Getting Started</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/installation">Installation</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/configuration">Configuration</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/creating-pages">Creating Pages</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/styling-layout">Styling and Layout</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/static-assets">Static Assets</a></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Docs</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/markdown-features">Markdown Features</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/sidebar">Sidebar</a></li></ul></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/blog">Blog</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/analytics">Analytics</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/seo">SEO</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/search">Search</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/deployment">Deployment</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/migrating-from-v1-to-v2">Migrating from v1 to v2</a></li></ul></li><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Advanced Guides</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link menu__link--sublist menu__link--active" href="#!">Plugins</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/using-plugins">Introduction</a></li><li class="menu__list-item"><a aria-current="page" class="menu__link menu__link--active" href="/docs/2.0.0-alpha.36/advanced-plugins">Writing Plugins</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">Themes</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/using-themes">Introduction</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/advanced-themes">Writing Themes</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/theme-classic">Classic Theme Configuration</a></li></ul></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/presets">Presets</a></li></ul></li><li class="menu__list-item menu__list-item--collapsed"><a class="menu__link menu__link--sublist" href="#!">API Reference</a><ul class="menu__list"><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/cli">CLI</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/docusaurus-core">Docusaurus Client API</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/docusaurus.config.js">docusaurus.config.js</a></li><li class="menu__list-item"><a class="menu__link" href="/docs/2.0.0-alpha.36/lifecycle-apis">Lifecycle APIs</a></li></ul></li></ul></div></div></div><main class="docMainContainer_zx5a"><div class="padding-vert--lg"><div class="container"><div class="row"><div class="col"><div class="docItemContainer_2PJJ"><article><span style="vertical-align:top" class="badge badge--info">Version: 2.0.0-alpha.36</span><header><h1 class="docTitle_2znT">Writing Plugins</h1></header><div class="markdown"><p>In this doc, we talk about the design intention of plugins and how you may write your own plugins.</p><p>Docusaurus Plugins are very similar to <a href="https://www.gatsbyjs.org/plugins/">Gatsby Plugins</a> and <a href="https://v1.vuepress.vuejs.org/plugin/">VuePress Plugins</a>. The main difference here is that Docusaurus plugins don&#x27;t allow plugins to include another plugin. Docusaurus provides <a href="/docs/2.0.0-alpha.36/presets">presets</a> to bundle plugins that are meant to work together.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="plugins-design"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#plugins-design" title="Direct link to heading">#</a>Plugins design</h2><p>Docusaurus&#x27; implementation of the plugins system provides us with a convenient way to hook into the website&#x27;s lifecycle to modify what goes on during development/build, which involves (but not limited to) extending the webpack config, modifying the data being loaded and creating new components to be used in a page.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="creating-plugins"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#creating-plugins" title="Direct link to heading">#</a>Creating plugins</h2><p>A plugin is a module which exports a function that takes two parameters and returns an object when executed.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="module-definition"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#module-definition" title="Direct link to heading">#</a>Module definition</h3><p>The exported modules for plugins are called with two parameters: <code>context</code> and <code>options</code> and returns a JavaScript object with defining the <a href="/docs/2.0.0-alpha.36/lifecycle-apis">lifecycle APIs</a>.</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:#697098;font-style:italic">// Example contents of a Docusaurus plugin.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:#c792ea">.</span><span class="token method-variable function-variable method function property-access" style="color:#82aaff">exports</span><span class="token plain"> </span><span class="token operator" style="color:#89ddff">=</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">function</span><span class="token punctuation" style="color:#c792ea">(</span><span class="token parameter">context</span><span class="token parameter punctuation" style="color:#c792ea">,</span><span class="token parameter"> options</span><span class="token punctuation" style="color:#c792ea">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token comment" style="color:#697098;font-style:italic">// ...</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token keyword" style="font-style:italic">return</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    name</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;my-docusaurus-plugin&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token function" style="color:#82aaff">loadContent</span><span class="token punctuation" style="color:#c792ea">(</span><span class="token punctuation" style="color:#c792ea">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"> </span><span class="token spread operator" style="color:#89ddff">...</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token keyword" style="font-style:italic">async</span><span class="token plain"> </span><span class="token function" style="color:#82aaff">contentLoaded</span><span class="token punctuation" style="color:#c792ea">(</span><span class="token parameter punctuation" style="color:#c792ea">{</span><span class="token parameter">content</span><span class="token parameter punctuation" style="color:#c792ea">,</span><span class="token parameter"> actions</span><span class="token parameter punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">)</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"> </span><span class="token spread operator" style="color:#89ddff">...</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token comment" style="color:#697098;font-style:italic">/* other lifecycle api */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="context"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#context" title="Direct link to heading">#</a><code>context</code></h4><p><code>context</code> is plugin-agnostic and the same object will be passed into all plugins used for a Docusaurus website. The <code>context</code> object contains the following fields:</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">interface</span><span class="token plain"> </span><span class="token class-name" style="color:#ffcb6b">LoadContext</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  siteDir</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> string</span><span class="token punctuation" style="color:#c792ea">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  generatedFilesDir</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> string</span><span class="token punctuation" style="color:#c792ea">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  siteConfig</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token maybe-class-name">DocusaurusConfig</span><span class="token punctuation" style="color:#c792ea">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  outDir</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> string</span><span class="token punctuation" style="color:#c792ea">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  baseUrl</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> string</span><span class="token punctuation" style="color:#c792ea">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:#c792ea">}</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="options"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#options" title="Direct link to heading">#</a><code>options</code></h4><p><code>options</code> are the <a href="/docs/2.0.0-alpha.36/using-plugins#configuring-plugins">second optional parameter when the plugins are used</a>. <code>options</code> are plugin-specific and are specified by users when they use them in <code>docusaurus.config.js</code>. Alternatively, if preset contains the plugin, the preset will then be in charge of passing the correct options into the plugin. It is up to individual plugin to define what options it takes.</p><h4><a aria-hidden="true" tabindex="-1" class="anchor" id="return-value"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#return-value" title="Direct link to heading">#</a>Return value</h4><p>The returned object value should implement the <a href="/docs/2.0.0-alpha.36/lifecycle-apis">lifecycle APIs</a>.</p><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="official-plugins"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#official-plugins" title="Direct link to heading">#</a>Official plugins</h2><p>Find the list of official Docusaurus plugins <a href="https://github.com/facebook/docusaurus/tree/master/packages">here</a>.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-content-blog"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-content-blog" title="Direct link to heading">#</a><code>@docusaurus/plugin-content-blog</code></h3><p>Provides the <a href="/docs/2.0.0-alpha.36/blog">Blog</a> feature and is the default blog plugin for Docusaurus. The classic template ships with this plugin with default configurations.</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:#697098;font-style:italic">// docusaurus.config.js</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:#c792ea">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#89ddff">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  plugins</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token string" style="color:#c3e88d">&#x27;@docusaurus/plugin-content-blog&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Path to data on filesystem</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * relative to site dir</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;blog&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * URL route for the blog section of your site</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * do not include trailing slash</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        routeBasePath</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;blog&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        include</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token string" style="color:#c3e88d">&#x27;*.md&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;*.mdx&#x27;</span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        postsPerPage</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token number" style="color:#f78c6c">10</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Theme components used by the blog pages</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blogListComponent</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;@theme/BlogListPage&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blogPostComponent</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;@theme/BlogPostPage&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blogTagsListComponent</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;@theme/BlogTagsListPage&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        blogTagsPostsComponent</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;@theme/BlogTagsPostsPage&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Remark and Rehype plugins passed to MDX</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        remarkPlugins</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        rehypePlugins</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Truncate marker, can be a regex or string.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        truncateMarker</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token regex">/&lt;!--\s*(truncate)\s*--&gt;/</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Blog feed</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * If feedOptions is undefined, no rss feed will be generated</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        feedOptions</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          type</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"> </span><span class="token comment" style="color:#697098;font-style:italic">// required. &#x27;rss&#x27; | &#x27;feed&#x27; | &#x27;all&#x27;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          title</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"> </span><span class="token comment" style="color:#697098;font-style:italic">// default to siteConfig.title</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          description</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"> </span><span class="token comment" style="color:#697098;font-style:italic">// default to  `${siteConfig.title} Blog`</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          copyright</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">          language</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token keyword nil" style="font-style:italic">undefined</span><span class="token punctuation" style="color:#c792ea">;</span><span class="token plain"> </span><span class="token comment" style="color:#697098;font-style:italic">// possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        </span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-content-docs"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-content-docs" title="Direct link to heading">#</a><code>@docusaurus/plugin-content-docs</code></h3><p>Provides the <a href="/docs/2.0.0-alpha.36/markdown-features">Docs</a> functionality and is the default docs plugin for Docusaurus. The classic template ships with this plugin with default configurations.</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:#697098;font-style:italic">// docusaurus.config.js</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:#c792ea">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#89ddff">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  plugins</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token string" style="color:#c3e88d">&#x27;@docusaurus/plugin-content-docs&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Path to data on filesystem</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * relative to site dir</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;docs&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * URL for editing website repo, example: &#x27;https://github.com/facebook/docusaurus/edit/master/website/&#x27;</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        editUrl</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;https://github.com/facebook/docusaurus/edit/master/website/&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * URL route for the blog section of your site</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * do not include trailing slash</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        routeBasePath</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;docs&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        include</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token string" style="color:#c3e88d">&#x27;**/*.md&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;**/*.mdx&#x27;</span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"> </span><span class="token comment" style="color:#697098;font-style:italic">// Extensions to include.</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Path to sidebar configuration for showing a list of markdown pages.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Warning: will change</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        sidebarPath</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Theme components used by the docs pages</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        docLayoutComponent</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;@theme/DocPage&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        docItemComponent</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;@theme/DocItem&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Remark and Rehype plugins passed to MDX</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        remarkPlugins</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        rehypePlugins</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Whether to display the author who last updated the doc.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        showLastUpdateAuthor</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ff5874">false</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Whether to display the last date the doc was updated.</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        showLastUpdateTime</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token boolean" style="color:#ff5874">false</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-content-pages"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-content-pages" title="Direct link to heading">#</a><code>@docusaurus/plugin-content-pages</code></h3><p>The default pages plugin for Docusaurus. The classic template ships with this plugin with default configurations. This plugin provides <a href="/docs/2.0.0-alpha.36/creating-pages">creating pages</a> functionality.</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:#697098;font-style:italic">// docusaurus.config.js</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:#c792ea">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#89ddff">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  plugins</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token string" style="color:#c3e88d">&#x27;@docuaurus/plugin-content-pages&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * Path to data on filesystem</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * relative to site dir</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * components in this directory will be automatically converted to pages</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        path</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;src/pages&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">       </span><span class="token doc-comment comment" style="color:#697098;font-style:italic"> /**</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * URL route for the blog section of your site</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         * do not include trailing slash</span></div><div class="token-line" style="color:#bfc7d5"><span class="token doc-comment comment" style="color:#697098;font-style:italic">         */</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        routeBasePath</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">        include</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token string" style="color:#c3e88d">&#x27;**/*.{js,jsx}&#x27;</span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      </span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-google-analytics"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-google-analytics" title="Direct link to heading">#</a><code>@docusaurus/plugin-google-analytics</code></h3><p>The default <a href="https://developers.google.com/analytics/devguides/collection/analyticsjs/">Google Analytics</a> plugin.</p><p><strong>Installation</strong></p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-shell codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ </span><span class="token function" style="color:#82aaff">npm</span><span class="token plain"> </span><span class="token function" style="color:#82aaff">install</span><span class="token plain"> --save @docusaurus/plugin-google-analytics</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><p><strong>Configuration</strong></p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:#697098;font-style:italic">// docusaurus.config.js</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:#c792ea">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#89ddff">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  plugins</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token string" style="color:#c3e88d">&#x27;@docusaurus/plugin-google-analytics&#x27;</span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  themeConfig</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    googleAnalytics</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      trackingID</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;UA-141789564-1&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-google-gtag"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-google-gtag" title="Direct link to heading">#</a><code>@docusaurus/plugin-google-gtag</code></h3><p>The default <a href="https://developers.google.com/analytics/devguides/collection/gtagjs/">Global Site Tag (gtag.js)</a> plugin.</p><p><strong>Installation</strong></p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-shell codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">$ </span><span class="token function" style="color:#82aaff">npm</span><span class="token plain"> </span><span class="token function" style="color:#82aaff">install</span><span class="token plain"> --save @docusaurus/plugin-google-gtag</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><p><strong>Configuration</strong></p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:#697098;font-style:italic">// docusaurus.config.js</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:#c792ea">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#89ddff">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  plugins</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token string" style="color:#c3e88d">&#x27;@docusaurus/plugin-google-gtag&#x27;</span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  themeConfig</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    gtag</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      trackingID</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;UA-141789564-1&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-sitemap"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-sitemap" title="Direct link to heading">#</a><code>@docusaurus/plugin-sitemap</code></h3><p>The classic template ships with this plugin. This plugin creates sitemap for your site so that search engine crawlers can crawl your site more accurately.</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-js codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:#697098;font-style:italic">// docusaurus.config.js</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">module</span><span class="token punctuation" style="color:#c792ea">.</span><span class="token property-access">exports</span><span class="token plain"> </span><span class="token operator" style="color:#89ddff">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  plugins</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#c792ea">[</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token string" style="color:#c3e88d">&#x27;@docusaurus/plugin-sitemap&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:#c792ea">{</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      cacheTime</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token number" style="color:#f78c6c">600</span><span class="token plain"> </span><span class="token operator" style="color:#89ddff">*</span><span class="token plain"> </span><span class="token number" style="color:#f78c6c">1000</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"> </span><span class="token comment" style="color:#697098;font-style:italic">// 600 sec - cache purge period</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      changefreq</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;weekly&#x27;</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">      priority</span><span class="token punctuation" style="color:#c792ea">:</span><span class="token plain"> </span><span class="token number" style="color:#f78c6c">0.5</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">    </span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">  </span><span class="token punctuation" style="color:#c792ea">]</span><span class="token punctuation" style="color:#c792ea">,</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:#c792ea">}</span><span class="token punctuation" style="color:#c792ea">;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="docusaurusplugin-ideal-image"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#docusaurusplugin-ideal-image" title="Direct link to heading">#</a><code>@docusaurus/plugin-ideal-image</code></h3><p>Docusaurus Plugin to generate an almost ideal image (responsive, lazy-loading, and low quality placeholder)</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-sh codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">npm install --save @docusaurus/plugin-ideal-image</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><p>Modify your <code>docusaurus.config.js</code></p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-diff codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">module.exports = {</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token unchanged">  ...</span></div><div class="token-line" style="color:#bfc7d5"><span class="token unchanged"></span><span class="token inserted-sign inserted">+ plugins: [&#x27;@docusaurus/plugin-ideal-image&#x27;],</span></div><div class="token-line" style="color:#bfc7d5"><span class="token inserted-sign inserted"></span><span class="token unchanged">  ...</span></div><div class="token-line" style="color:#bfc7d5"><span class="token unchanged"></span><span class="token plain">}</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h2><a aria-hidden="true" tabindex="-1" class="anchor" id="usage"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#usage" title="Direct link to heading">#</a>Usage</h2><p>This plugin supports png, gif and jpg only</p><pre class="mdxCodeBlock_273x"><div class="codeBlockWrapper_263r"><pre class="prism-code language-jsx codeBlock_SnYk" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> Image </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;@theme/IdealImage&#x27;</span><span class="token punctuation" style="color:#c792ea">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword" style="font-style:italic">import</span><span class="token plain"> thumbnail </span><span class="token keyword" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:#c3e88d">&#x27;./path/to/img.png&#x27;</span><span class="token punctuation" style="color:#c792ea">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:#697098;font-style:italic">// your react code</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token tag punctuation" style="color:#c792ea">&lt;</span><span class="token tag class-name" style="color:#ffcb6b">Image</span><span class="token tag" style="color:#ff5572"> </span><span class="token tag attr-name" style="color:#ffcb6b">img</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#c792ea">=</span><span class="token tag script language-javascript punctuation" style="color:#c792ea">{</span><span class="token tag script language-javascript" style="color:#ff5572">thumbnail</span><span class="token tag script language-javascript punctuation" style="color:#c792ea">}</span><span class="token tag" style="color:#ff5572"> </span><span class="token tag punctuation" style="color:#c792ea">/&gt;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:#697098;font-style:italic">// or</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token tag punctuation" style="color:#c792ea">&lt;</span><span class="token tag class-name" style="color:#ffcb6b">Image</span><span class="token tag" style="color:#ff5572"> </span><span class="token tag attr-name" style="color:#ffcb6b">img</span><span class="token tag script language-javascript script-punctuation punctuation" style="color:#c792ea">=</span><span class="token tag script language-javascript punctuation" style="color:#c792ea">{</span><span class="token tag script language-javascript function" style="color:#82aaff">require</span><span class="token tag script language-javascript punctuation" style="color:#c792ea">(</span><span class="token tag script language-javascript string" style="color:#c3e88d">&#x27;./path/to/img.png&#x27;</span><span class="token tag script language-javascript punctuation" style="color:#c792ea">)</span><span class="token tag script language-javascript punctuation" style="color:#c792ea">}</span><span class="token tag" style="color:#ff5572"> </span><span class="token tag punctuation" style="color:#c792ea">/&gt;</span></div></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_1cZg">Copy</button></div></pre><h3><a aria-hidden="true" tabindex="-1" class="anchor" id="options-1"></a><a aria-hidden="true" tabindex="-1" class="hash-link" href="#options-1" title="Direct link to heading">#</a>Options</h3><table><thead><tr><th>Option</th><th>Type</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>name</code></td><td><code>string</code></td><td><code>ideal-img/[name].[hash:hex:7].[width].[ext]</code></td><td>Filename template for output files.</td></tr><tr><td><code>sizes</code></td><td><code>array</code></td><td><em>original size</em></td><td>Specify all widths you want to use. If a specified size exceeds the original image&#x27;s width, the latter will be used (i.e. images won&#x27;t be scaled up). You may also declare a default <code>sizes</code> array in the loader options in your <code>webpack.config.js</code>.</td></tr><tr><td><code>size</code></td><td><code>integer</code></td><td><em>original size</em></td><td>Specify one width you want to use; if the specified size exceeds the original image&#x27;s width, the latter will be used (i.e. images won&#x27;t be scaled up)</td></tr><tr><td><code>min</code></td><td><code>integer</code></td><td></td><td>As an alternative to manually specifying <code>sizes</code>, you can specify <code>min</code>, <code>max</code> and <code>steps</code>, and the sizes will be generated for you.</td></tr><tr><td><code>max</code></td><td><code>integer</code></td><td></td><td>See <code>min</code> above</td></tr><tr><td><code>steps</code></td><td><code>integer</code></td><td><code>4</code></td><td>Configure the number of images generated between <code>min</code> and <code>max</code> (inclusive)</td></tr><tr><td><code>quality</code></td><td><code>integer</code></td><td><code>85</code></td><td>JPEG compression quality</td></tr></tbody></table></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/facebook/docusaurus/edit/master/website/versioned_docs/version-2.0.0-alpha.36/advanced-plugins.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col text--right"><em><small>Last updated on <time datetime="2019-11-24T02:13:16.000Z" class="docLastUpdatedAt_3e77">11/24/2019</time>by <strong>Endi</strong></small></em></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/2.0.0-alpha.36/using-plugins"><h5 class="pagination-nav__link--sublabel">Previous</h5><h4 class="pagination-nav__link--label">« Plugins</h4></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/2.0.0-alpha.36/using-themes"><h5 class="pagination-nav__link--sublabel">Next</h5><h4 class="pagination-nav__link--label">Themes »</h4></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3VES"><ul class="contents contents__left-border"><li><a href="#plugins-design" class="contents__link">Plugins design</a></li><li><a href="#creating-plugins" class="contents__link">Creating plugins</a><ul class=""><li><a href="#module-definition" class="contents__link">Module definition</a></li></ul></li><li><a href="#official-plugins" class="contents__link">Official plugins</a><ul class=""><li><a href="#docusaurusplugin-content-blog" class="contents__link"><code>@docusaurus/plugin-content-blog</code></a></li><li><a href="#docusaurusplugin-content-docs" class="contents__link"><code>@docusaurus/plugin-content-docs</code></a></li><li><a href="#docusaurusplugin-content-pages" class="contents__link"><code>@docusaurus/plugin-content-pages</code></a></li><li><a href="#docusaurusplugin-google-analytics" class="contents__link"><code>@docusaurus/plugin-google-analytics</code></a></li><li><a href="#docusaurusplugin-google-gtag" class="contents__link"><code>@docusaurus/plugin-google-gtag</code></a></li><li><a href="#docusaurusplugin-sitemap" class="contents__link"><code>@docusaurus/plugin-sitemap</code></a></li><li><a href="#docusaurusplugin-ideal-image" class="contents__link"><code>@docusaurus/plugin-ideal-image</code></a></li></ul></li><li><a href="#usage" class="contents__link">Usage</a><ul class=""><li><a href="#options-1" class="contents__link">Options</a></li></ul></li></ul></div></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/introduction">Introduction</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/installation">Installation</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/migrating-from-v1-to-v2">Migration from v1 to v2</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://stackoverflow.com/questions/tagged/docusaurus">Stack Overflow</a></li><li class="footer__item"><a class="footer__link-item" href="/feedback">Feedback</a></li><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://discordapp.com/invite/docusaurus">Discord</a></li><li class="footer__item"><a class="footer__link-item" href="/help">Help</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Social</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://github.com/facebook/docusaurus">GitHub</a></li><li class="footer__item"><a class="footer__link-item" target="_blank" rel="noopener noreferrer" href="https://twitter.com/docusaurus">Twitter</a></li></ul></div></div><div class="text--center"><div class="margin-bottom--sm"><a href="https://opensource.facebook.com/" target="_blank" rel="noopener noreferrer" class="footerLogoLink_Yf0T"><img class="footer__logo" alt="Facebook Open Source Logo" src="https://docusaurus.io/img/oss_logo.png"></a></div>Copyright © 2019 Facebook, Inc.</div></div></footer></div><script src="/styles.faa8eff3.js"></script><script src="/runtime~main.9fb8a316.js"></script><script src="/main.2675bdb8.js"></script><script src="/1.60b82e36.js"></script><script src="/2.2a20a82d.js"></script><script src="/1be78505.82999a45.js"></script><script src="/6c4644c6.0bc3edcd.js"></script><script src="/17896441.9b71ef06.js"></script><script src="/e5e3e6a4.265251b8.js"></script></body></html>

Results: ~4kb (parsed size) saved for /docs/2.0.0-alpha.36/advanced-plugins/index.,html

JS is minified too

docusaurus-bot · 2019-12-11T12:02:14Z

Deploy preview for docusaurus-2 ready!

Built with commit 036fd90

https://deploy-preview-2116--docusaurus-2.netlify.com

docusaurus-bot · 2019-12-11T12:02:38Z

Deploy preview for docusaurus-preview ready!

Built with commit 036fd90

https://deploy-preview-2116--docusaurus-preview.netlify.com

lex111 · 2019-12-11T18:15:19Z

packages/docusaurus/src/client/serverEntry.js

+
+  // minify html with https://github.com/DanielRuf/html-minifier-terser
+  return minify(renderedHtml, {
+    collapseWhitespace: true,


How about adding these two options?

removeAttributeQuotes

removeEmptyAttributes

I think removeAttributeQuotes can be quite unsafe according to http://jkorpela.fi/qattr.html and HTML specification recommends to always use quotes.

As I understand correctly, not all quotes are removed, but only in places where this is possible? But OK, let's do without this option.

lex111

Woohoo! 🎉

endiliey added 2 commits December 11, 2019 16:56

wip: minify html with terser

43bf6e9

tweak

aee4562

endiliey added the pr: performance This PR does not add a new behavior, but existing behaviors will be more memory- / time-efficient. label Dec 11, 2019

endiliey requested a review from yangshun as a code owner December 11, 2019 11:57

facebook-github-bot added the CLA Signed Signed Facebook CLA label Dec 11, 2019

endiliey changed the title ~~feat(v2): minify html with terser~~ feat(v2): minify html Dec 11, 2019

endiliey added status: don't merge yet This PR is completed, but we are still waiting for other things to be ready. and removed status: don't merge yet This PR is completed, but we are still waiting for other things to be ready. labels Dec 11, 2019

lex111 reviewed Dec 11, 2019

View reviewed changes

remove empty attr

036fd90

lex111 approved these changes Dec 12, 2019

View reviewed changes

yangshun approved these changes Dec 12, 2019

View reviewed changes

yangshun merged commit aa87bc5 into master Dec 12, 2019

yangshun deleted the endi/minifyhtml branch December 12, 2019 12:47

endiliey mentioned this pull request Dec 13, 2019

fix(v2): dont collapse whitespace in minified html #2122

Merged

Kimi-Gao mentioned this pull request Dec 29, 2019

[V2] Parse error occur when heading contains < in mdx #2157

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(v2): minify html #2116

feat(v2): minify html #2116

endiliey commented Dec 11, 2019 •

edited

Loading

docusaurus-bot commented Dec 11, 2019 •

edited

Loading

docusaurus-bot commented Dec 11, 2019 •

edited

Loading

lex111 Dec 11, 2019

endiliey Dec 12, 2019

lex111 Dec 12, 2019

lex111 left a comment

feat(v2): minify html #2116

feat(v2): minify html #2116

Conversation

endiliey commented Dec 11, 2019 • edited Loading

Motivation

Have you read the Contributing Guidelines on pull requests?

Test Plan

docusaurus-bot commented Dec 11, 2019 • edited Loading

docusaurus-bot commented Dec 11, 2019 • edited Loading

lex111 Dec 11, 2019

Choose a reason for hiding this comment

endiliey Dec 12, 2019

Choose a reason for hiding this comment

lex111 Dec 12, 2019

Choose a reason for hiding this comment

lex111 left a comment

Choose a reason for hiding this comment

endiliey commented Dec 11, 2019 •

edited

Loading

docusaurus-bot commented Dec 11, 2019 •

edited

Loading

docusaurus-bot commented Dec 11, 2019 •

edited

Loading