@docusaurus/theme-classic 2.0.0-beta.1 → 2.0.0-beta.10

package/lib/theme/BlogPostPage/index.js

@@ -7,18 +7,18 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Layout = _interopRequireDefault(require("@theme/Layout"));
+var _Seo = _interopRequireDefault(require("@theme/Seo"));
+
+var _BlogLayout = _interopRequireDefault(require("@theme/BlogLayout"));
 
 var _BlogPostItem = _interopRequireDefault(require("@theme/BlogPostItem"));
 
 var _BlogPostPaginator = _interopRequireDefault(require("@theme/BlogPostPaginator"));
 
-var _BlogSidebar = _interopRequireDefault(require("@theme/BlogSidebar"));
+var _themeCommon = require("@docusaurus/theme-common");
 
 var _TOC = _interopRequireDefault(require("@theme/TOC"));
 
-var _themeCommon = require("@docusaurus/theme-common");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /**
@@ -28,41 +28,54 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * LICENSE file in the root directory of this source tree.
  */
 function BlogPostPage(props) {
+  var _assets$image;
+
   const {
     content: BlogPostContents,
     sidebar
   } = props;
   const {
+    // TODO this frontmatter is not validated/normalized, it's the raw user-provided one. We should expose normalized one too!
     frontMatter,
+    assets,
     metadata
   } = BlogPostContents;
   const {
     title,
     description,
     nextItem,
-    prevItem
+    prevItem,
+    date,
+    tags,
+    authors
   } = metadata;
   const {
-    hide_table_of_contents: hideTableOfContents
+    hide_table_of_contents: hideTableOfContents,
+    keywords,
+    toc_min_heading_level: tocMinHeadingLevel,
+    toc_max_heading_level: tocMaxHeadingLevel
   } = frontMatter;
-  return <_Layout.default title={title} description={description} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogPostPage}>
-      {BlogPostContents && <div className="container margin-vert--lg">
-          <div className="row">
-            <aside className="col col--3">
-              <_BlogSidebar.default sidebar={sidebar} />
-            </aside>
-            <main className="col col--7">
-              <_BlogPostItem.default frontMatter={frontMatter} metadata={metadata} isBlogPostPage>
-                <BlogPostContents />
-              </_BlogPostItem.default>
-              {(nextItem || prevItem) && <_BlogPostPaginator.default nextItem={nextItem} prevItem={prevItem} />}
-            </main>
-            {!hideTableOfContents && BlogPostContents.toc && <div className="col col--2">
-                <_TOC.default toc={BlogPostContents.toc} />
-              </div>}
-          </div>
-        </div>}
-    </_Layout.default>;
+  const image = (_assets$image = assets.image) !== null && _assets$image !== void 0 ? _assets$image : frontMatter.image;
+  return <_BlogLayout.default wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogPostPage} sidebar={sidebar} toc={!hideTableOfContents && BlogPostContents.toc && BlogPostContents.toc.length > 0 ? <_TOC.default toc={BlogPostContents.toc} minHeadingLevel={tocMinHeadingLevel} maxHeadingLevel={tocMaxHeadingLevel} /> : undefined}>
+      <_Seo.default // TODO refactor needed: it's a bit annoying but Seo MUST be inside BlogLayout
+    // otherwise  default image (set by BlogLayout) would shadow the custom blog post image
+    title={title} description={description} keywords={keywords} image={image}>
+        <meta property="og:type" content="article" />
+        <meta property="article:published_time" content={date} />
+
+        {
+        /* TODO double check those article metas array syntaxes, see https://ogp.me/#array */
+      }
+        {authors.some(author => author.url) && <meta property="article:author" content={authors.map(author => author.url).filter(Boolean).join(',')} />}
+        {tags.length > 0 && <meta property="article:tag" content={tags.map(tag => tag.label).join(',')} />}
+      </_Seo.default>
+
+      <_BlogPostItem.default frontMatter={frontMatter} assets={assets} metadata={metadata} isBlogPostPage>
+        <BlogPostContents />
+      </_BlogPostItem.default>
+
+      {(nextItem || prevItem) && <_BlogPostPaginator.default nextItem={nextItem} prevItem={prevItem} />}
+    </_BlogLayout.default>;
 }
 
 var _default = BlogPostPage;

package/lib/theme/BlogSidebar/index.js

@@ -39,13 +39,11 @@ function BlogSidebar({
         {sidebar.title}
       </div>
       <ul className={_stylesModule.default.sidebarItemList}>
-        {sidebar.items.map(item => {
-        return <li key={item.permalink} className={_stylesModule.default.sidebarItem}>
-              <_Link.default isNavLink to={item.permalink} className={_stylesModule.default.sidebarItemLink} activeClassName={_stylesModule.default.sidebarItemLinkActive}>
-                {item.title}
-              </_Link.default>
-            </li>;
-      })}
+        {sidebar.items.map(item => <li key={item.permalink} className={_stylesModule.default.sidebarItem}>
+            <_Link.default isNavLink to={item.permalink} className={_stylesModule.default.sidebarItemLink} activeClassName={_stylesModule.default.sidebarItemLinkActive}>
+              {item.title}
+            </_Link.default>
+          </li>)}
       </ul>
     </nav>;
 }

package/lib/theme/BlogSidebar/styles.module.css

@@ -34,10 +34,10 @@
   text-decoration: none;
 }
 .sidebarItemLinkActive {
-  color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary) !important;
 }
 
-@media only screen and (max-width: 996px) {
+@media (max-width: 996px) {
   .sidebar {
     display: none;
   }

package/lib/theme/BlogTagsListPage/index.js

@@ -7,13 +7,9 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Layout = _interopRequireDefault(require("@theme/Layout"));
+var _BlogLayout = _interopRequireDefault(require("@theme/BlogLayout"));
 
-var _Link = _interopRequireDefault(require("@docusaurus/Link"));
-
-var _BlogSidebar = _interopRequireDefault(require("@theme/BlogSidebar"));
-
-var _Translate = require("@docusaurus/Translate");
+var _TagsListByLetter = _interopRequireDefault(require("@theme/TagsListByLetter"));
 
 var _themeCommon = require("@docusaurus/theme-common");
 
@@ -25,51 +21,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-function getCategoryOfTag(tag) {
-  // tag's category should be customizable
-  return tag[0].toUpperCase();
-}
-
 function BlogTagsListPage(props) {
   const {
     tags,
     sidebar
   } = props;
-  const title = (0, _Translate.translate)({
-    id: 'theme.tags.tagsPageTitle',
-    message: 'Tags',
-    description: 'The title of the tag list page'
-  });
-  const tagCategories = {};
-  Object.keys(tags).forEach(tag => {
-    const category = getCategoryOfTag(tag);
-    tagCategories[category] = tagCategories[category] || [];
-    tagCategories[category].push(tag);
-  });
-  const tagsList = Object.entries(tagCategories).sort(([a], [b]) => a.localeCompare(b));
-  const tagsSection = tagsList.map(([category, tagsForCategory]) => <article key={category}>
-        <h2>{category}</h2>
-        {tagsForCategory.map(tag => <_Link.default className="padding-right--md" href={tags[tag].permalink} key={tag}>
-            {tags[tag].name} ({tags[tag].count})
-          </_Link.default>)}
-        <hr />
-      </article>).filter(item => item != null);
-  return <_Layout.default title={title} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogTagsListPage} searchMetadatas={{
+  const title = (0, _themeCommon.translateTagsPageTitle)();
+  return <_BlogLayout.default title={title} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogTagsListPage} searchMetadata={{
     // assign unique search tag to exclude this page from search results!
     tag: 'blog_tags_list'
-  }}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <aside className="col col--3">
-            <_BlogSidebar.default sidebar={sidebar} />
-          </aside>
-          <main className="col col--7">
-            <h1>{title}</h1>
-            <section className="margin-vert--lg">{tagsSection}</section>
-          </main>
-        </div>
-      </div>
-    </_Layout.default>;
+  }} sidebar={sidebar}>
+      <h1>{title}</h1>
+      <_TagsListByLetter.default tags={Object.values(tags)} />
+    </_BlogLayout.default>;
 }
 
 var _default = BlogTagsListPage;

package/lib/theme/BlogTagsPostsPage/index.js

@@ -3,17 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = BlogTagsPostsPage;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Layout = _interopRequireDefault(require("@theme/Layout"));
-
-var _BlogPostItem = _interopRequireDefault(require("@theme/BlogPostItem"));
-
 var _Link = _interopRequireDefault(require("@docusaurus/Link"));
 
-var _BlogSidebar = _interopRequireDefault(require("@theme/BlogSidebar"));
+var _BlogLayout = _interopRequireDefault(require("@theme/BlogLayout"));
+
+var _BlogPostItem = _interopRequireDefault(require("@theme/BlogPostItem"));
 
 var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
 
@@ -45,7 +43,7 @@ function useBlogPostsPlural() {
   }));
 }
 
-function BlogTagsPostPage(props) {
+function BlogTagsPostsPage(props) {
   const {
     metadata,
     items,
@@ -65,36 +63,24 @@ function BlogTagsPostPage(props) {
     nPosts: blogPostsPlural(count),
     tagName
   });
-  return <_Layout.default title={title} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogTagsPostPage} searchMetadatas={{
+  return <_BlogLayout.default title={title} wrapperClassName={_themeCommon.ThemeClassNames.wrapper.blogPages} pageClassName={_themeCommon.ThemeClassNames.page.blogTagPostListPage} searchMetadata={{
     // assign unique search tag to exclude this page from search results!
     tag: 'blog_tags_posts'
-  }}>
-      <div className="container margin-vert--lg">
-        <div className="row">
-          <aside className="col col--3">
-            <_BlogSidebar.default sidebar={sidebar} />
-          </aside>
-          <main className="col col--7">
-            <header className="margin-bottom--xl">
-              <h1>{title}</h1>
-
-              <_Link.default href={allTagsPath}>
-                <_Translate.default id="theme.tags.tagsPageLink" description="The label of the link targeting the tag list page">
-                  View All Tags
-                </_Translate.default>
-              </_Link.default>
-            </header>
-
-            {items.map(({
-            content: BlogPostContent
-          }) => <_BlogPostItem.default key={BlogPostContent.metadata.permalink} frontMatter={BlogPostContent.frontMatter} metadata={BlogPostContent.metadata} truncated>
-                <BlogPostContent />
-              </_BlogPostItem.default>)}
-          </main>
-        </div>
-      </div>
-    </_Layout.default>;
-}
-
-var _default = BlogTagsPostPage;
-exports.default = _default;
+  }} sidebar={sidebar}>
+      <header className="margin-bottom--xl">
+        <h1>{title}</h1>
+
+        <_Link.default href={allTagsPath}>
+          <_Translate.default id="theme.tags.tagsPageLink" description="The label of the link targeting the tag list page">
+            View All Tags
+          </_Translate.default>
+        </_Link.default>
+      </header>
+
+      {items.map(({
+      content: BlogPostContent
+    }) => <_BlogPostItem.default key={BlogPostContent.metadata.permalink} frontMatter={BlogPostContent.frontMatter} assets={BlogPostContent.assets} metadata={BlogPostContent.metadata} truncated>
+          <BlogPostContent />
+        </_BlogPostItem.default>)}
+    </_BlogLayout.default>;
+}

package/lib/theme/CodeBlock/index.js

@@ -13,16 +13,14 @@ var _prismReactRenderer = _interopRequireWildcard(require("prism-react-renderer"
 
 var _copyTextToClipboard = _interopRequireDefault(require("copy-text-to-clipboard"));
 
-var _parseNumericRange = _interopRequireDefault(require("parse-numeric-range"));
+var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
 
-var _usePrismTheme = _interopRequireDefault(require("@theme/hooks/usePrismTheme"));
+var _themeCommon = require("@docusaurus/theme-common");
 
-var _Translate = _interopRequireWildcard(require("@docusaurus/Translate"));
+var _usePrismTheme = _interopRequireDefault(require("@theme/hooks/usePrismTheme"));
 
 var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
 
-var _themeCommon = require("@docusaurus/theme-common");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -35,72 +33,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-const highlightLinesRangeRegex = /{([\d,-]+)}/;
-
-const getHighlightDirectiveRegex = (languages = ['js', 'jsBlock', 'jsx', 'python', 'html']) => {
-  // supported types of comments
-  const comments = {
-    js: {
-      start: '\\/\\/',
-      end: ''
-    },
-    jsBlock: {
-      start: '\\/\\*',
-      end: '\\*\\/'
-    },
-    jsx: {
-      start: '\\{\\s*\\/\\*',
-      end: '\\*\\/\\s*\\}'
-    },
-    python: {
-      start: '#',
-      end: ''
-    },
-    html: {
-      start: '<!--',
-      end: '-->'
-    }
-  }; // supported directives
-
-  const directives = ['highlight-next-line', 'highlight-start', 'highlight-end'].join('|'); // to be more reliable, the opening and closing comment must match
-
-  const commentPattern = languages.map(lang => `(?:${comments[lang].start}\\s*(${directives})\\s*${comments[lang].end})`).join('|'); // white space is allowed, but otherwise it should be on it's own line
-
-  return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
-}; // select comment styles based on language
-
-
-const highlightDirectiveRegex = lang => {
-  switch (lang) {
-    case 'js':
-    case 'javascript':
-    case 'ts':
-    case 'typescript':
-      return getHighlightDirectiveRegex(['js', 'jsBlock']);
-
-    case 'jsx':
-    case 'tsx':
-      return getHighlightDirectiveRegex(['js', 'jsBlock', 'jsx']);
-
-    case 'html':
-      return getHighlightDirectiveRegex(['js', 'jsBlock', 'html']);
-
-    case 'python':
-    case 'py':
-      return getHighlightDirectiveRegex(['python']);
-
-    default:
-      // all comment types
-      return getHighlightDirectiveRegex();
-  }
-};
-
 function CodeBlock({
   children,
-  className: languageClassName,
+  className: blockClassName,
   metastring,
   title
 }) {
+  var _parseLanguage;
+
   const {
     prism
   } = (0, _themeCommon.useThemeConfig)();
@@ -120,73 +60,14 @@ function CodeBlock({
   // (note: title="xyz" => title prop still has the quotes)
 
   const codeBlockTitle = (0, _themeCommon.parseCodeBlockTitle)(metastring) || title;
-  const button = (0, _react.useRef)(null);
-  let highlightLines = [];
   const prismTheme = (0, _usePrismTheme.default)(); // In case interleaved Markdown (e.g. when using CodeBlock as standalone component).
 
   const content = Array.isArray(children) ? children.join('') : children;
-
-  if (metastring && highlightLinesRangeRegex.test(metastring)) {
-    // Tested above
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
-    highlightLines = (0, _parseNumericRange.default)(highlightLinesRange).filter(n => n > 0);
-  }
-
-  let language = languageClassName && // Force Prism's language union type to `any` because it does not contain all available languages
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  languageClassName.replace(/language-/, '');
-
-  if (!language && prism.defaultLanguage) {
-    language = prism.defaultLanguage;
-  } // only declaration OR directive highlight can be used for a block
-
-
-  let code = content.replace(/\n$/, '');
-
-  if (highlightLines.length === 0 && language !== undefined) {
-    let range = '';
-    const directiveRegex = highlightDirectiveRegex(language); // go through line by line
-
-    const lines = content.replace(/\n$/, '').split('\n');
-    let blockStart; // loop through lines
-
-    for (let index = 0; index < lines.length;) {
-      const line = lines[index]; // adjust for 0-index
-
-      const lineNumber = index + 1;
-      const match = line.match(directiveRegex);
-
-      if (match !== null) {
-        const directive = match.slice(1).reduce((final, item) => final || item, undefined);
-
-        switch (directive) {
-          case 'highlight-next-line':
-            range += `${lineNumber},`;
-            break;
-
-          case 'highlight-start':
-            blockStart = lineNumber;
-            break;
-
-          case 'highlight-end':
-            range += `${blockStart}-${lineNumber - 1},`;
-            break;
-
-          default:
-            break;
-        }
-
-        lines.splice(index, 1);
-      } else {
-        // lines without directives are unchanged
-        index += 1;
-      }
-    }
-
-    highlightLines = (0, _parseNumericRange.default)(range);
-    code = lines.join('\n');
-  }
+  const language = (_parseLanguage = (0, _themeCommon.parseLanguage)(blockClassName)) !== null && _parseLanguage !== void 0 ? _parseLanguage : prism.defaultLanguage;
+  const {
+    highlightLines,
+    code
+  } = (0, _themeCommon.parseLines)(content, metastring, language);
 
   const handleCopyCode = () => {
     (0, _copyTextToClipboard.default)(code);
@@ -201,20 +82,18 @@ function CodeBlock({
       tokens,
       getLineProps,
       getTokenProps
-    }) => <div className={_stylesModule.default.codeBlockContainer}>
+    }) => <div className={(0, _clsx.default)(_stylesModule.default.codeBlockContainer, blockClassName)}>
           {codeBlockTitle && <div style={style} className={_stylesModule.default.codeBlockTitle}>
               {codeBlockTitle}
             </div>}
           <div className={(0, _clsx.default)(_stylesModule.default.codeBlockContent, language)}>
             <pre
         /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-        tabIndex={0} className={(0, _clsx.default)(className, _stylesModule.default.codeBlock, 'thin-scrollbar', {
-          [_stylesModule.default.codeBlockWithTitle]: codeBlockTitle
-        })} style={style}>
+        tabIndex={0} className={(0, _clsx.default)(className, _stylesModule.default.codeBlock, 'thin-scrollbar')} style={style}>
               <code className={_stylesModule.default.codeBlockLines}>
                 {tokens.map((line, i) => {
-              if (line.length === 1 && line[0].content === '') {
-                line[0].content = '\n'; // eslint-disable-line no-param-reassign
+              if (line.length === 1 && line[0].content === '\n') {
+                line[0].content = '';
               }
 
               const lineProps = getLineProps({
@@ -222,7 +101,7 @@ function CodeBlock({
                 key: i
               });
 
-              if (highlightLines.includes(i + 1)) {
+              if (highlightLines.includes(i)) {
                 lineProps.className += ' docusaurus-highlight-code-line';
               }
 
@@ -231,12 +110,13 @@ function CodeBlock({
                   token,
                   key
                 })} />)}
+                      <br />
                     </span>;
             })}
               </code>
             </pre>
 
-            <button ref={button} type="button" aria-label={(0, _Translate.translate)({
+            <button type="button" aria-label={(0, _Translate.translate)({
           id: 'theme.CodeBlock.copyButtonAriaLabel',
           message: 'Copy code to clipboard',
           description: 'The ARIA label for copy code blocks button'

package/lib/theme/CodeBlock/styles.module.css

@@ -7,6 +7,9 @@
 
 .codeBlockContainer {
   margin-bottom: var(--ifm-leading);
+  border-radius: var(--ifm-global-radius);
+  box-shadow: var(--ifm-global-shadow-lw);
+  overflow: hidden;
 }
 
 .codeBlockContent {
@@ -16,8 +19,6 @@
 }
 
 .codeBlockTitle {
-  border-top-left-radius: var(--ifm-global-radius);
-  border-top-right-radius: var(--ifm-global-radius);
   border-bottom: 1px solid var(--ifm-color-emphasis-300);
   font-size: var(--ifm-code-font-size);
   font-weight: 500;
@@ -25,12 +26,9 @@
 }
 
 .codeBlock {
+  margin: 0;
   padding: 0;
-}
-
-.codeBlockWithTitle {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
+  border-radius: 0;
 }
 
 .copyButton {
@@ -54,11 +52,10 @@
 
 .codeBlockLines {
   font: inherit;
+  /*rtl:ignore*/
   float: left;
   min-width: 100%;
   padding: var(--ifm-pre-padding);
-  display: flex;
-  flex-direction: column;
 }
 
 @media print {

package/lib/theme/Details/index.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Details;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+var _themeCommon = require("@docusaurus/theme-common");
+
+var _stylesModule = _interopRequireDefault(require("./styles.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Should we have a custom details/summary comp in Infima instead of reusing alert classes?
+const InfimaClasses = 'alert alert--info';
+
+function Details({ ...props
+}) {
+  return <_themeCommon.Details {...props} className={(0, _clsx.default)(InfimaClasses, _stylesModule.default.details, props.className)} />;
+}

package/lib/theme/Details/styles.module.css

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.details {
+  --docusaurus-details-decoration-color: var(--ifm-alert-border-color);
+  --docusaurus-details-transition: transform var(--ifm-transition-fast) ease;
+  margin: 0 0 var(--ifm-spacing-vertical);
+  border: 1px solid var(--ifm-alert-border-color);
+}