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

feat: ui elements added

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.15",
+  "version": "1.1.16",
   "private": true,
   "workspaces": [
     "./packages/*"

packages/amplify-graphql-amplifiers-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-graphql-amplifiers-core",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "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",

packages/amplify-graphql-create-model-transformer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-graphql-create-model-transformer",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "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",

packages/amplify-graphql-process-image-transformer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-graphql-process-image-transformer",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "description": "This directive allows you to process images.",
   "keywords": [
     "aws",

packages/amplify-graphql-send-email-transformer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amplifiers/amplify-graphql-send-email-transformer",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "description": "Amplify GraphQL @sendEmail transformer.",
   "keywords": [
     "aws",

packages/amplify-util-blog/commands/add.js

@@ -5,18 +5,16 @@ const eventName = "add";
 async function run(context) {
   context.print.info(`Event handler ${eventName} is running.`);
   updateSchema(context);
+  updateTransformerConfig(context);
+  updateParametersConfig(context);
   updateUIElements(context);
+  updateUIElementsIndex(context);
   context.print.info(`Done running ${eventName}`);
 }
 
 function updateSchema(context) {
   // Get the API name from the context
-  const apiMeta = context.amplify.getProjectMeta().api;
-  console.log(apiMeta);
-  const appSyncApis = Object.keys(apiMeta)
-    .map((key) => ({ ...apiMeta[key], name: key }))
-    .filter((api) => api.service === "AppSync");
-  console.log(`Found ${appSyncApis.length} APIs `);
+  const appSyncApis = getAppSyncAPIs(context);
 
   if (appSyncApis.length === 0) {
     context.print.info("No AppSync API found in the project");
@@ -86,25 +84,65 @@ function updateSchema(context) {
   context.print.info("Merged schema.graphql and blogSchema.graphql");
 }
 
-function updateUIElements(context) {
-  const projectConfigPath =
-    context.amplify.pathManager.getProjectConfigFilePath();
+function updateParametersConfig(context) {
+  const appSyncApis = getAppSyncAPIs(context);
 
-  const projectConfig = JSON.parse(fs.readFileSync(projectConfigPath, "utf8"));
+  const apiName = appSyncApis[0].name;
 
-  context.print.info(projectConfig);
+  const paramsFilePath = path.join(
+    context.amplify.pathManager.getBackendDirPath(),
+    "api",
+    apiName,
+    "parameters.json"
+  );
 
-  if (projectConfig.frontend !== "javascript") {
-    context.print.info(
-      "Blog Plugin only supports javascript/typescript front-end project for now"
-    );
-    return;
+  const parameters = fs.readFileSync(paramsFilePath, "utf8");
+  let parametersJSON = JSON.parse(parameters);
+
+  parametersJSON = {
+    ...parametersJSON,
+    TypesenseApiKey: "<your-api-key>",
+    TypesenseHost: "<your-typesense-host>",
+    TypesensePort: "443",
+    TypesenseProtocol: "https",
+  };
+
+  fs.writeFileSync(paramsFilePath, JSON.stringify(parametersJSON, null, 4));
+}
+
+function updateTransformerConfig(context) {
+  const appSyncApis = getAppSyncAPIs(context);
+
+  const apiName = appSyncApis[0].name;
+
+  const configFilePath = path.join(
+    context.amplify.pathManager.getBackendDirPath(),
+    "api",
+    apiName,
+    "transform.conf.json"
+  );
+
+  const config = fs.readFileSync(configFilePath, "utf8");
+  let configJSON = JSON.parse(config);
+
+  if (configJSON.transformers) {
+    configJSON.transformers.push("amplify-graphql-typesense-transformer");
+  } else {
+    configJSON = {
+      ...configJSON,
+      transformers: ["amplify-graphql-typesense-transformer"],
+    };
   }
 
-  if (projectConfig.javascript.framework !== "react") {
-    context.print.info(
-      "Blog Plugin only supports react front-end project for now"
-    );
+  fs.writeFileSync(configFilePath, JSON.stringify(configJSON, null, 4));
+}
+
+function updateUIElements(context) {
+  const projectConfig = getProjectConfig(context);
+
+  context.print.info(projectConfig);
+
+  if (!isSupportedConfig(context)) {
     return;
   }
 
@@ -137,6 +175,66 @@ function updateUIElements(context) {
   fs.copySync(uiComponentsSource, uiComponentsDestination);
 }
 
+function updateUIElementsIndex(context) {
+  const projectConfig = getProjectConfig(context);
+  if (!isSupportedConfig(context)) {
+    return;
+  }
+
+  const srcDir = projectConfig.javascript.config.SourceDir;
+
+  const uiComponentsIndexPath = path.join(
+    context.amplify.pathManager.searchProjectRootPath(),
+    srcDir,
+    "ui-components",
+    "index.js"
+  );
+
+  const uiComponentsIndex = fs.readFileSync(uiComponentsIndexPath, "utf8");
+
+  const blogImport = `export * from './blog';`;
+
+  if (!uiComponentsIndex.includes(blogImport)) {
+    const newUIComponentsIndex = `${uiComponentsIndex}\n${blogImport}`;
+    fs.writeFileSync(uiComponentsIndexPath, newUIComponentsIndex);
+  }
+}
+
+function getAppSyncAPIs(context) {
+  const apiMeta = context.amplify.getProjectMeta().api;
+
+  const appSyncApis = Object.keys(apiMeta)
+    .map((key) => ({ ...apiMeta[key], name: key }))
+    .filter((api) => api.service === "AppSync");
+  console.log(`Found ${appSyncApis.length} APIs `);
+  return appSyncApis;
+}
+
+function getProjectConfig(context) {
+  const projectConfigPath =
+    context.amplify.pathManager.getProjectConfigFilePath();
+
+  return JSON.parse(fs.readFileSync(projectConfigPath, "utf8"));
+}
+
+function isSupportedConfig(context) {
+  const projectConfig = getProjectConfig(context);
+
+  if (projectConfig.frontend !== "javascript") {
+    context.print.info(
+      "Blog Plugin only supports javascript/typescript front-end project for now"
+    );
+    return false;
+  } else if (projectConfig.javascript.framework !== "react") {
+    context.print.info(
+      "Blog Plugin only supports react front-end project for now"
+    );
+    return false;
+  }
+
+  return true;
+}
+
 module.exports = {
   run,
 };

packages/amplify-util-blog/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@amplifiers/amplify-util-blog",
-  "version": "1.1.15",
+  "version": "1.1.16",
   "description": "",
   "main": "index.js",
   "files": [
-    "commands/*",
-    "event-handlers/*",
-    "ui-components/*",
+    "commands/**/*",
+    "event-handlers/**/*",
+    "ui-components/**/*",
     "amplify-plugin.json"
   ],
   "scripts": {

packages/amplify-util-blog/ui-components/blog/CommonPostCardCollection.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import Image from "next/image";
+import { StorageImage } from "@aws-amplify/ui-react-storage";
+import { default as PostCardCollection } from "./base/PostCardCollection";
+import { default as WrappedBadgeElementCollection } from "./WrappedBadgeElementCollection";
+import { Post } from "./../../models";
+
+interface CommonPostCardCollectionProps {
+  posts?: Post[];
+}
+
+const CommonPostCardCollection = ({
+  posts,
+}: CommonPostCardCollectionProps) => {
+  return (
+    <PostCardCollection
+      items={posts}
+      overrideItems={({ item, index }) => ({
+        overrides: {
+          Tags: {
+            children: <WrappedBadgeElementCollection post={item as Post} />,
+          },
+          ReadMoreLayout: {
+            style: {
+              cursor: "pointer",
+            },
+          },
+          ImageContainer: {
+            padding: 0,
+            borderRadius: "10px",
+            children: item.image.startsWith('http') ? (
+              <Image 
+              src={item.image} 
+              alt="post image" 
+              width={0}
+              height={0}
+              sizes="200px"
+              style={{ width: 'auto', height: '100%' }}/>
+            ) : (
+              <StorageImage
+                imgKey={item.image}
+                accessLevel="public"
+                alt="post image"
+                width={200}
+              />
+            ),
+          },
+        },
+      })}
+    />
+  );
+};
+
+export default CommonPostCardCollection;

packages/amplify-util-blog/ui-components/blog/MemoizedReactMarkdown.tsx

@@ -0,0 +1,11 @@
+import { FC, memo } from 'react'
+import ReactMarkdown, { Options } from 'react-markdown'
+
+const MemoizedReactMarkdown: FC<Options> = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children &&
+    prevProps.className === nextProps.className
+)
+
+export default MemoizedReactMarkdown;

packages/amplify-util-blog/ui-components/blog/NewPostLayout.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { useRouter } from "next/navigation"; //todo: refactor
+import { Flex, Heading } from "@aws-amplify/ui-react";
+import { default as PostCreateForm  } from "./base/PostCreateForm";
+import { default as TagCreateForm } from "./base/TagCreateForm";
+
+ const NewPostLayout = () => {
+  const { push } = useRouter();
+  return (
+    <>
+      <Flex direction="column" gap="2rem" alignItems="center" width="100%">
+        <Heading level={2}>Create a New Tag</Heading>
+        <TagCreateForm
+          overrides={{
+            TagCreateForm: {
+              width: "100%",
+            },
+          }}
+        />
+        <Heading level={2}>Create a New Post</Heading>
+        <PostCreateForm
+          overrides={{
+            PostCreateForm: {
+              width: "100%"
+            }
+          }}
+          onSuccess={ () => {
+            push("/");
+          }}
+        />
+      </Flex>
+    </>
+  );
+}
+
+export default NewPostLayout;