Merge pull request #34 from olliethedev/feat/blog-plugin

Feat/blog plugin
olliethedev · Nov 6, 2023 · b1e55b3 · b1e55b3
2 parents 8c4e1a2 + 8c58a7c
commit b1e55b3
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 15 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "1.3.3",
+  "version": "1.3.4",
   "private": true,
   "workspaces": [
     "./packages/*"

diff --git a/packages/amplify-graphql-amplifiers-core/package.json b/packages/amplify-graphql-amplifiers-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-graphql-amplifiers-core",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Amplify GraphQL @createModel transformer. This directive is intended to be used for creating a new model once a Cognito Event is fired.",
   "keywords": [
     "aws",

diff --git a/packages/amplify-graphql-create-model-transformer/package.json b/packages/amplify-graphql-create-model-transformer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-graphql-create-model-transformer",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Amplify GraphQL @createModel transformer. This directive is intended to be used for creating a new model once a Cognito Event is fired.",
   "keywords": [
     "aws",

diff --git a/packages/amplify-graphql-process-image-transformer/package.json b/packages/amplify-graphql-process-image-transformer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-graphql-process-image-transformer",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "This directive allows you to process images.",
   "keywords": [
     "aws",

diff --git a/packages/amplify-graphql-send-email-transformer/package.json b/packages/amplify-graphql-send-email-transformer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-graphql-send-email-transformer",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Amplify GraphQL @sendEmail transformer.",
   "keywords": [
     "aws",

diff --git a/packages/amplify-util-blog/README.md b/packages/amplify-util-blog/README.md
@@ -26,7 +26,7 @@ npm install -g @amplifiers/amplify-util-blog
 ```
 The plugin uses typesense transformer for search, and ui supports markdown for blog content and rest of the components are amplify-ui, so we will also need to install the following:
 ```bash
-npm install -s amplify-graphql-typesense-transformer @aws-amplify/ui-react @aws-amplify/ui-react-storage aws-amplify react-markdown remark-gfm react-syntax-highlighter @uiw/[email protected]
+npm install -s amplify-graphql-typesense-transformer @aws-amplify/ui-react @aws-amplify/ui-react-storage aws-amplify react-markdown remark-gfm remark-footnotes react-syntax-highlighter @uiw/[email protected]
 ```
 ```bash 
 npm install --save-dev @types/react-syntax-highlighter

diff --git a/packages/amplify-util-blog/package.json b/packages/amplify-util-blog/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-util-blog",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "description": "Amplify Util Blog is a utility plugin for the Amplify CLI that helps you add blog functionality to your Amplify project.",
   "keywords": [
     "aws",

diff --git a/packages/amplify-util-blog/ui-components/blog/MemoizedReactMarkdown.tsx b/packages/amplify-util-blog/ui-components/blog/MemoizedReactMarkdown.tsx
@@ -3,6 +3,7 @@
 import { FC, memo } from 'react'
 import ReactMarkdown, { Options, Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
+import remarkFootnotes from "remark-footnotes";
 
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { vs } from "react-syntax-highlighter/dist/cjs/styles/prism";
@@ -33,7 +34,10 @@ const components: Components = {
 const MemoizedReactMarkdown: FC<Options> = memo(
   (props) => (
     <div style={{ width: "100%" }}>
-      <ReactMarkdown {...props} components={components} />
+      <ReactMarkdown 
+        {...props} 
+        components={components} 
+        remarkPlugins={[remarkFootnotes as any]} />
     </div>
   ),
   (prevProps, nextProps) =>