Docs: add enterprise admonition

content/docs/capabilities/branding.md

@@ -5,7 +5,7 @@ description: Add custom colors, logos, and error messages.
 
 # Custom Branding / White Labeling
 
-:::tip
+:::enterprise Pomerium Enterprise
 
 This article describes a use case available to [Pomerium Enterprise](/docs/deploy/enterprise/install) customers.
 

content/docs/capabilities/original-request-context.md

@@ -7,7 +7,7 @@ description: This article describes how the original user context is passed seco
 
 # Original User Context
 
-:::tip
+:::enterprise Pomerium Enterprise
 
 This article describes a use case available to [Pomerium Enterprise](/docs/deploy/enterprise/install) customers.
 

docusaurus.config.js

@@ -37,6 +37,10 @@ const config = {
           routeBasePath: '/',
           sidebarPath: require.resolve('./sidebars.js'),
           editUrl: 'https://github.com/pomerium/documentation/tree/main',
+          admonitions: {
+            keywords: ['note', 'tip', 'info', 'caution', 'danger', 'enterprise'],
+            extendDefaults: true,
+          },
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),

src/theme/Admonition/Types.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
+import BusinessIcon from '@mui/icons-material/Business';
+
+import './types.css';
+
+function EnterpriseAdmonition(props) {
+  return (
+    <div className="custom_admonition">
+      <div className="custom_admonition_header">
+        <span><BusinessIcon style={{color: 'rgb(86 83 83)'}}/></span>
+        <h5>{props.title}</h5>
+      </div>
+      <div className="custom_admonition_text">
+        <p>{props.children}</p>
+      </div>
+    </div>
+  );
+}
+
+const AdmonitionTypes = {
+  ...DefaultAdmonitionTypes,
+  'enterprise': EnterpriseAdmonition,
+}
+
+export default AdmonitionTypes;

src/theme/Admonition/types.css

@@ -0,0 +1,27 @@
+.custom_admonition {
+  border: #ededed 1px solid;
+  border-left: #6F43E7 solid 4px;
+  border-radius: 10px;
+  margin: 0 0 16px 0;
+  padding: 16px;
+  background-color: #f6f3ff;
+}
+
+.custom_admonition_header {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.custom_admonition_header span {
+  margin-right: 5px;
+}
+
+.custom_admonition_header h5 {
+  color: #6F43E7;
+  font-size: 16px;
+}
+
+.custom_admonition_text p {
+ margin: 0 0 0 0;
+ font-size: 16px;
+}