From f583e3614509a70424b55a35a46fd9b7849bcbb2 Mon Sep 17 00:00:00 2001
From: Vince <vincent@bavitz.org>
Date: Mon, 15 Feb 2021 14:22:26 +1100
Subject: [PATCH] Shortcodes buttons

---
 components/Button.tsx        |   2 +-
 components/RichBody.tsx      |  15 +++++---
 components/layout/index.tsx  |   2 +-
 constants/cms.ts             |  27 ++++++++++++--
 public/logo.ico              | Bin 0 -> 4158 bytes
 services/{cms.ts => cms.tsx} |  69 ++++++++++++++++++++++++++++++-----
 utils/metadata.ts            |   4 +-
 7 files changed, 98 insertions(+), 21 deletions(-)
 create mode 100644 public/logo.ico
 rename services/{cms.ts => cms.tsx} (73%)

diff --git a/components/Button.tsx b/components/Button.tsx
index 841585e..5bc9b3b 100644
--- a/components/Button.tsx
+++ b/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`,
diff --git a/components/RichBody.tsx b/components/RichBody.tsx
index 6acb93d..59dc4de 100644
--- a/components/RichBody.tsx
+++ b/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;
diff --git a/components/layout/index.tsx b/components/layout/index.tsx
index 8120b0f..3240af9 100644
--- a/components/layout/index.tsx
+++ b/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>
diff --git a/constants/cms.ts b/constants/cms.ts
index ebefc44..e82b110 100644
--- a/constants/cms.ts
+++ b/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]*\}\}$/,
   },
 };
 
diff --git a/public/logo.ico b/public/logo.ico
new file mode 100644
index 0000000000000000000000000000000000000000..738af464f48aa71c960d9f30101e9b63efbfa899
GIT binary patch
literal 4158
zcmc&%Yfqd-6n^~$8g9$77ien~xi!(Ibon6t(xtH5nl98>tB?vyf_1y8Qj9bU1S7Sm
zNF<?Hfkc~VdQqU4lwyk}S_=EAis|h`3vHwAUnnGx=b6pB-G#mI?#6gFXD2gr<~--j
zoO5PgO?yUu`30K%7ifjgX<Ck^X@$c1!drzoPU?DA(>9caSPjS@)<8>7p5X4yn;0J%
zMNdl$TAWV2xoHz#FWabE_Iq01Rr7am+yLd%CF=NNW(J=hd>?O@Z$VALIyfy>RFSQ=
zr!0MrbN;Q(<x2j#tV`8~e-;-p(0&-T#U<F5XHj_DZFVGM+C_P;8~CUle=jT=+Jfs>
zuj0Mxnvjp;UoyN{^V}Ei1@%zhTIkx;l-ggX*d9x#(J|`bc~Ng7;@MJ;_8P@VBu{<R
zOZ~Cv(f#}Ix!j2Kx5{dlcuJ3To2Zxii4#f7OG_9G1fu+PKW|6fMjPtN(qLInJz;$D
zpE$(R>Cf3&)RmN~oS__jtrg5KkC<?3EDI-pGR~*Qv(W#kN!d?*A-y*2E-l5p;E`xU
zUu&z%3*9~)|BcO7d_9<r%X1m{*#J}i_)s?Xl(P;z^_zN`e|@co6fWx(<A8Y?iLLN0
zc6drd{$HBOz|^epwFJz0k?TKdLanT;lJ%=~T2a5nfqQ~GHax8A(MlP;&-FWBu%V~j
zgp0q4|8ej+J}L7@4x8}Wi?MNaoveRj!z1W!^2YR8mt)I)bFH@{u-}aH)0wOAiF@If
zOay$nN^a#oN9t1gWRJVOUNpX18IG})GEsfOueRIqLA@E{lY%d2%Kc|MaVZn64Q4f;
z3|Gf)tgM9Rr6O!MQa8nh{k!sTdLj##gBds@E&EY+Cae2`=P4>eO@4u~bvy%!fyQkX
z3=QO<$;o?Wbxb9*g}A9=d#fxe|Gd>HVoSUk-gEKWSC@w~XG44b<GD=LSAMR@<#@jH
zj`I{1qp@;p(m1CM#!z*>9c}x}n3#%=wX@Ry@Ex=4VMs0>rasPE(j>Uu-sYs(#C1!K
zb^3F0;nz4hCgWWPbK%~Q9G}=9H#e&{7IR&<X=TeeVy!qDFk$ldB(+86dpo7J6eh1N
z<D;Xvck7m_aq(&@@3F5w%Tcv*O*K_=e&CCo&>a#Z{)toXa9}}jmzS5(-_{oMF4^m_
zV)(e+C6dR6?h=t7`6e5CD`MXz#3L^0uV7H_wz6=2<N5Lq?fb-pA5LfC`;*3*>v#wA
z4WQRL#`kV{R})Vs+HkD1EBfsqvE?bTVOMeL%=L^tJ%;#p8WJ4cXC43X!-w$i*!iEn
znW&#Qv1op74h<C*QTV#e>9l;SH8?6j{fQ_zJ+0&--;C+v)(dX%%9TX0;ko(QIUI2B
zQ0LG1NCjK}HlQB92aV9<2M=(pqf^CyD&IuRo579_JQ6*r5Z{r^2j(Ns%e8KOXfGsQ
z=~tMg&lq+|edJrL|4^G+7x@-W1)poEWAV-%oIh~_y$Ag8)wmSKo|j)yt<U8`uiuYz
V-+qUM+qa|M--$5w@9_Vt{TH7rh<yM6

literal 0
HcmV?d00001

diff --git a/services/cms.ts b/services/cms.tsx
similarity index 73%
rename from services/cms.ts
rename to services/cms.tsx
index 3187a2d..b65c0b4 100644
--- a/services/cms.ts
+++ b/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;
 };
diff --git a/utils/metadata.ts b/utils/metadata.ts
index 294a4f1..bed2ffb 100644
--- a/utils/metadata.ts
+++ b/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;
 }