Fixed changelog issues (#595)

* Fixed changelog issues

* update

scripts/docs-collator/templates/components/readme.md

@@ -8,6 +8,8 @@ tags: [{{ tags|join(', ') }}]
 
 {{ content }}
 
+{% if change_log_content|trim != "" %}
 ## CHANGELOG
 
-{{ change_log_content }}
+{{ change_log_content }}
+{% endif %}

src/plugins/changelog/index.js

@@ -29,7 +29,7 @@ function extractCommitters(content) {
   let committers = "";
 
   if (matches.length > 0) {
-    committers += "## Commiters: \n";
+    committers += "## Commiters \n";
     for (let i = 0; i < matches.length; i++) {
       const author = matches[i].replace('@', '');
 
@@ -58,7 +58,7 @@ function extractPullRequests(content) {
   let prs = "";
 
   if (matches.length > 0) {
-    prs += "## Pull Requests: \n";
+    prs += "## Pull Requests \n";
     for (let i = 0; i < matches.length; i++) {
       const pr = matches[i];
 
@@ -72,6 +72,12 @@ function extractPullRequests(content) {
   };
 }
 
+function capitalizeHeaders(str) {
+  return str.replace(/(##+)(\s[a-z])/g, function(match, p1, p2) {
+      return p1 + p2.toUpperCase();
+  });
+}
+
 /**
  * @param {string} section
  */
@@ -98,6 +104,8 @@ function processSection(section) {
   content = result.updatedContent;
   const prs = result.prs;
 
+  content = capitalizeHeaders(content);
+
   const date = title.match(/ \((?<date>.*)\)/)?.groups.date;
 
   return {

src/plugins/changelog/theme/ChangelogList/Header/index.tsx

@@ -51,6 +51,9 @@ export default function ChangelogListHeader({
             'Subscribe through {rssLink} to stay up-to-date with new releases!'
           }
         </Translate>
+        <br/>
+        <br/>
+        <Link href="https://github.com/cloudposse/terraform-aws-components/blob/main/CHANGELOG.md">View on GitHub</Link>
       </p>
     </header>
   );

src/theme/MDXComponents/A.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import Link from '@docusaurus/Link';
+export default function MDXA(props) {
+  return <Link {...props} />;
+}

src/theme/MDXComponents/Code.js

@@ -0,0 +1,42 @@
+import React, {isValidElement} from 'react';
+import CodeBlock from '@theme/CodeBlock';
+export default function MDXCode(props) {
+  const inlineElements = [
+    'a',
+    'abbr',
+    'b',
+    'br',
+    'button',
+    'cite',
+    'code',
+    'del',
+    'dfn',
+    'em',
+    'i',
+    'img',
+    'input',
+    'ins',
+    'kbd',
+    'label',
+    'object',
+    'output',
+    'q',
+    'ruby',
+    's',
+    'small',
+    'span',
+    'strong',
+    'sub',
+    'sup',
+    'time',
+    'u',
+    'var',
+    'wbr',
+  ];
+  const shouldBeInline = React.Children.toArray(props.children).every(
+    (el) =>
+      (typeof el === 'string' && !el.includes('\n')) ||
+      (isValidElement(el) && inlineElements.includes(el.props?.mdxType)),
+  );
+  return shouldBeInline ? <code {...props} /> : <CodeBlock {...props} />;
+}

src/theme/MDXComponents/Details.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Details from '@theme/Details';
+import {useLocation} from '@docusaurus/router';
+
+export default function MDXDetails(props) {
+  const items = React.Children.toArray(props.children);
+  // Split summary item from the rest to pass it as a separate prop to the
+  // Details theme component
+  const summary = items.find(
+    (item) => React.isValidElement(item) && item.props?.mdxType === 'summary',
+  );
+  const children = <>{items.filter((item) => item !== summary)}</>;
+
+  // ugly hack starts
+  // MDXComponents has been swizzled like this
+  // npm run swizzle @docusaurus/theme-classic MDXComponents -- --eject
+  // 
+  // we want ot open <details> tag for changelog pages but not for list changelogs page
+  const location = useLocation();
+  const endpointPattern = /components\/changelog\/\d+\.\d+\.\d+\/?$/;
+  const open=endpointPattern.test(location.pathname);
+  // ugly hack ends
+
+  return open ? (
+    <Details {...props} summary={summary} open>
+      {children}
+    </Details>
+  ) : (
+    <Details {...props} summary={summary}>
+      {children}
+    </Details>
+  );
+}

src/theme/MDXComponents/Head.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Head from '@docusaurus/Head';
+// MDX elements are wrapped through the MDX pragma. In some cases (notably usage
+// with Head/Helmet) we need to unwrap those elements.
+function unwrapMDXElement(element) {
+  if (element.props?.mdxType && element.props.originalType) {
+    const {mdxType, originalType, ...newProps} = element.props;
+    return React.createElement(element.props.originalType, newProps);
+  }
+  return element;
+}
+export default function MDXHead(props) {
+  const unwrappedChildren = React.Children.map(props.children, (child) =>
+    React.isValidElement(child) ? unwrapMDXElement(child) : child,
+  );
+  return <Head {...props}>{unwrappedChildren}</Head>;
+}

src/theme/MDXComponents/Heading.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import Heading from '@theme/Heading';
+export default function MDXHeading(props) {
+  return <Heading {...props} />;
+}

src/theme/MDXComponents/Img/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+function transformImgClassName(className) {
+  return clsx(className, styles.img);
+}
+export default function MDXImg(props) {
+  return (
+    // eslint-disable-next-line jsx-a11y/alt-text
+    <img
+      loading="lazy"
+      {...props}
+      className={transformImgClassName(props.className)}
+    />
+  );
+}

src/theme/MDXComponents/Img/styles.module.css

@@ -0,0 +1,3 @@
+.img {
+  height: auto;
+}

src/theme/MDXComponents/Pre.js

@@ -0,0 +1,13 @@
+import React, {isValidElement} from 'react';
+import CodeBlock from '@theme/CodeBlock';
+export default function MDXPre(props) {
+  return (
+    <CodeBlock
+      // If this pre is created by a ``` fenced codeblock, unwrap the children
+      {...(isValidElement(props.children) &&
+      props.children.props?.originalType === 'code'
+        ? props.children.props
+        : {...props})}
+    />
+  );
+}

src/theme/MDXComponents/Ul/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+function transformUlClassName(className) {
+  return clsx(
+    className,
+    // This class is set globally by GitHub/MDX. We keep the global class, and
+    // add another class to get a task list without the default ul styling
+    // See https://github.com/syntax-tree/mdast-util-to-hast/issues/28
+    className?.includes('contains-task-list') && styles.containsTaskList,
+  );
+}
+export default function MDXUl(props) {
+  return <ul {...props} className={transformUlClassName(props.className)} />;
+}

src/theme/MDXComponents/Ul/styles.module.css

@@ -0,0 +1,7 @@
+.containsTaskList {
+  list-style: none;
+}
+
+:not(.containsTaskList > li) > .containsTaskList {
+  padding-left: 0;
+}

src/theme/MDXComponents/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import MDXHead from '@theme/MDXComponents/Head';
+import MDXCode from '@theme/MDXComponents/Code';
+import MDXA from '@theme/MDXComponents/A';
+import MDXPre from '@theme/MDXComponents/Pre';
+import MDXDetails from '@theme/MDXComponents/Details';
+import MDXHeading from '@theme/MDXComponents/Heading';
+import MDXUl from '@theme/MDXComponents/Ul';
+import MDXImg from '@theme/MDXComponents/Img';
+import Admonition from '@theme/Admonition';
+import Mermaid from '@theme/Mermaid';
+const MDXComponents = {
+  head: MDXHead,
+  code: MDXCode,
+  a: MDXA,
+  pre: MDXPre,
+  details: MDXDetails,
+  ul: MDXUl,
+  img: MDXImg,
+  h1: (props) => <MDXHeading as="h1" {...props} />,
+  h2: (props) => <MDXHeading as="h2" {...props} />,
+  h3: (props) => <MDXHeading as="h3" {...props} />,
+  h4: (props) => <MDXHeading as="h4" {...props} />,
+  h5: (props) => <MDXHeading as="h5" {...props} />,
+  h6: (props) => <MDXHeading as="h6" {...props} />,
+  admonition: Admonition,
+  mermaid: Mermaid,
+};
+export default MDXComponents;