Shortcodes buttons

components/Button.tsx

@@ -47,7 +47,7 @@ export function Button(props: Props) {
   const onClickFn = disabled ? () => null : clickHandler;
 
   const ghostClassNames = [
-    'bg-white',
+    'bg-transparent',
     `hover:bg-${color}`,
     'bg-transparent',
     selected && `bg-white`,

components/RichBody.tsx

@@ -12,10 +12,11 @@ import {
   Hyperlink,
   INLINES,
   MARKS,
-  Text
+  Text,
 } from '@contentful/rich-text-types';
 import React, { ReactNode } from 'react';
 import { CMS } from '../constants';
+import { renderShortcode } from '../services/cms';
 import { ArticleCallout } from './article/ArticleCallout';
 
 const Bold = ({ children }) => (
@@ -36,13 +37,15 @@ const options = {
       // const children;
       const plaintext = documentToPlainTextString(node);
       console.log('RichBody ➡️ plaintext:', plaintext);
-      console.log('RichBody ➡️ children:', children);
 
       const isShortcode = CMS.SHORTCODE_REGEX.test(plaintext);
-      
-      if (CMS.SHORTCODES.)
-      
-      return <Paragraph>{children}</Paragraph>;
+      console.log('RichBody ➡️ isShortcode:', isShortcode);
+
+      if (!isShortcode) {
+        return <Paragraph>{children}</Paragraph>;
+      }
+
+      return renderShortcode(plaintext) ?? null;
     },
     [BLOCKS.HEADING_1]: (node: Heading1) => {
       const content = (node.content[0] as Text)?.value;

components/layout/index.tsx

@@ -47,7 +47,7 @@ export default function Layout({ children }: Props) {
             marginLeft,
             filter: `brightness(${mobileMenuOpen ? 0.85 : 1})`,
           }}
-          className="relative z-50 w-full h-full overflow-y-auto duration-300"
+          className="relative z-50 h-full overflow-y-auto duration-300"
         >
           {children}
         </div>

constants/cms.ts

@@ -1,9 +1,30 @@
+interface IShortcodeButton {
+  regex: RegExp;
+  text: string;
+  href?: string;
+}
+
+// prettier-ignore
+const SHORTCODE_BUTTONS: { [key: string]: IShortcodeButton } = {
+  BUILD_OXEN: {
+    regex: /^\{\{[\s]*build_oxen[\s]*\}\}$/,
+    text: "Build with Oxen",
+    href: "https://docs.oxen.io/building-with-oxen" 
+  },
+  STAKING_GUIDE_BUTTON: {
+    regex: /^{{[\s*]staking_guide_button[\s*]}}$/,
+    text: "Staking guide",
+    href:
+      'https://docs.oxen.io/using-the-oxen-blockchain/oxen-service-node-guides',
+  },
+};
+
 const CMS = {
-  SHORTCODE_REGEX: /^\{\{[\w\s]{1,99}\}\}$/,
+  SHORTCODE_REGEX: /^\{\{.*\}\}$/,
+  SHORTCODE_BUTTONS,
   SHORTCODES: {
-    GITHUB_LINKS: /^\{\{[\s]*github_links[\s]*\}\}$/,
-    BUILD_OXEN: /^\{\{[\s]*build_oxen[\s]*\}\}$/,
     GENERAL_BUTTON: /^\{\{[\s]*button[\s]*href="[^"]{1,99}"[\s]*text="[\w\s]{1,33}"[\s]*\}\}$/,
+    GITHUB_LINKS: /^\{\{[\s]*github_links[\s]*\}\}$/,
   },
 };
 

services/cms.tsx

@@ -1,5 +1,7 @@
 import { ContentfulClientApi, createClient } from 'contentful';
 import moment from 'moment';
+import React from 'react';
+import { Button } from '../components/Button';
 import { CMS } from '../constants';
 import { SideMenuItem, TPages } from '../state/navigation';
 import { IAuthor, IFigureImage, IPost, ISplitPage } from '../types/cms';
@@ -174,17 +176,66 @@ export class CmsApi {
   };
 }
 
-interface IShortcodeGeneralButton {
-  href: string;
-  text: string;
-}
-
-export const extractShortcodeGeneralButton = (
-  value: string,
-): IShortcodeGeneralButton => {
-  if (!CMS.SHORTCODES.GENERAL_BUTTON.test(value)) {
+const extractShortcodeGeneralButton = (shortcode: string) => {
+  if (!CMS.SHORTCODES.GENERAL_BUTTON.test(shortcode)) {
     return null;
   }
 
   // Pull our href and text
+  const href = shortcode
+    .replace(/^{{[\s]*button[\s]*href="/, '')
+    .replace(/"[\s]*text="[^"]{1,99}"[\s]*}}/, '');
+
+  const text = shortcode
+    .replace(/^{{[\s]*button[\s]*href="[^"]{1,99}"[\s]*text="/, '')
+    .replace(/"[\s]*}}$/, '');
+
+  return { href, text };
+};
+
+export const renderShortcode = (shortcode: string) => {
+  // General button
+  if (CMS.SHORTCODES.GENERAL_BUTTON.test(shortcode)) {
+    const { href, text } = extractShortcodeGeneralButton(shortcode);
+    return (
+      <div className="flex justify-center mb-4">
+        <Button onClick={() => open(href, '_blank')}>{text}</Button>
+      </div>
+    );
+  }
+
+  // Github links
+  if (CMS.SHORTCODES.GITHUB_LINKS.test(shortcode)) {
+    // oxen core, session android/desktop/ios, lokinet
+    return (
+      <>
+        <div className="flex flex-wrap justify-center mb-4 space-x-4">
+          <Button type="ghost">Oxen Core</Button>
+          <Button type="ghost">Lokinet</Button>
+        </div>
+        <div className="flex flex-wrap justify-center mb-4 space-x-4">
+          <Button type="ghost">Session Android</Button>
+          <Button type="ghost">Session iOS</Button>
+          <Button type="ghost">Session Desktop</Button>
+        </div>
+      </>
+    );
+  }
+
+  // All shortcode buttons with simple hrefs
+  const shortcodeButton = Object.values(CMS.SHORTCODE_BUTTONS).find(item =>
+    item.regex.test(shortcode),
+  );
+
+  if (shortcodeButton) {
+    return (
+      <div className="flex justify-center mb-4">
+        <Button onClick={() => open(shortcodeButton.href, '_blank')}>
+          {shortcodeButton.text}
+        </Button>
+      </div>
+    );
+  }
+
+  return null;
 };

utils/metadata.ts

@@ -1,5 +1,7 @@
 import { METADATA } from '../constants';
 
 export function generateTitle(prefix: string) {
-  return `${prefix} - ${METADATA.TITLE_SUFFIX}`;
+  return prefix
+    ? `${prefix} - ${METADATA.TITLE_SUFFIX}`
+    : METADATA.TITLE_SUFFIX;
 }