admonitions: add golioth admonition

Extend admonitions to include a Golioth admonition. Use this admonition in the
same way you would built-in types:

```
:::golioth Option Title Here

Your admonition message goes here.

:::
```

Signed-off-by: Mike Szczys <mike@golioth.io>

Author: szczys

docusaurus.config.js

@@ -167,6 +167,10 @@ module.exports = {
           routeBasePath: "/",
           sidebarPath: require.resolve("./sidebars.js"),
           // editUrl: 'https://github.com/golioth/golioth/edit/master/docs/',
+          admonitions: {
+            keywords: ['golioth'],
+            extendDefaults: true,
+          },
         },
         gtag: {
           trackingID: "G-C2MSLQD9D7",

src/css/custom.css

@@ -146,3 +146,18 @@ html[data-theme="dark"] {
     flex-direction: column;
   }
 }
+
+/* Golioth admonition */
+.alert--golioth {
+  --ifm-alert-background-color: var(--golioth-color-concrete);
+  --ifm-alert-background-color-highlight: var(--golioth-color-white);
+  --ifm-alert-foreground-color:var(--golioth-color-black);
+  --ifm-alert-border-color: var(--golioth-color-coral);
+}
+
+html[data-theme='dark'] .alert--golioth {
+  --ifm-alert-background-color: var(--golioth-color-cod-gray);
+  --ifm-alert-background-color-highlight: var(--golioth-color-charcoal);
+  --ifm-alert-foreground-color: var(--golioth-color-white);
+  --ifm-alert-border-color: var(--golioth-color-coral);
+}

src/theme/Admonition/Icon/Golioth.js

@@ -0,0 +1,11 @@
+import React from 'react';
+export default function AdmonitionIconGolioth(props) {
+  return (
+    <svg viewBox="0 0 400 356">
+      <path
+        fill="#ff5760"
+        d="M 222.22,89.00 C 222.22,89.00 222.22,44.49 222.22,44.49 222.22,44.49 177.78,44.49 177.78,44.49 177.78,44.49 177.78,89.00 177.78,89.00 177.78,89.00 44.44,89.00 44.44,89.00 44.44,89.00 44.44,133.49 44.44,133.49 44.44,133.49 133.33,133.49 133.33,133.49 133.33,133.49 133.33,311.49 133.33,311.49 133.33,311.49 177.78,311.49 177.78,311.49 177.78,311.49 177.78,222.49 177.78,222.49 177.78,222.49 222.22,222.49 222.22,222.49 222.22,222.49 222.22,311.49 222.22,311.49 222.22,311.49 266.67,311.49 266.67,311.49 266.67,311.49 266.67,133.49 266.67,133.49 266.67,133.49 355.56,133.49 355.56,133.49 355.56,133.49 355.56,89.00 355.56,89.00 355.56,89.00 222.22,89.00 222.22,89.00 Z"
+      />
+    </svg>
+  );
+}

src/theme/Admonition/Type/Golioth.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import Translate from '@docusaurus/Translate';
+import AdmonitionLayout from '@theme/Admonition/Layout';
+import IconGolioth from '@theme/Admonition/Icon/Golioth';
+
+const infimaClassName = 'alert alert--golioth';
+const defaultProps = {
+  icon: <IconGolioth />,
+  title: (
+    <Translate
+      id="theme.admonition.golioth"
+      description="The default label used for the Golioth admonition (:::golioth)">
+      golioth
+    </Translate>
+  ),
+};
+
+export default function AdmonitionTypeGolioth(props) {
+  return (
+    <AdmonitionLayout
+      {...defaultProps}
+      {...props}
+      className={clsx(infimaClassName, props.className)}>
+      {props.children}
+    </AdmonitionLayout>
+  );
+}

src/theme/Admonition/Types.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
+import AdmonitionTypeGolioth from '@theme/Admonition/Type/Golioth';
+
+const admonitionTypes = {
+  ...DefaultAdmonitionTypes,
+  golioth: AdmonitionTypeGolioth,
+};
+
+export default admonitionTypes;