notes

Prototypr · Aug 23, 2024 · b4cd691 · b4cd691
1 parent ec6560c
commit b4cd691
Show file tree

Hide file tree

Showing 17 changed files with 1,352 additions and 607 deletions.
diff --git a/components/SocialShare.js b/components/SocialShare.js
@@ -1,6 +1,12 @@
 import { FacebookLogo, TwitterLogo, LinkedinLogo } from "@/components/icons";
 
-export default function SocialShare({ slug, authorTwitter, title = "" , size=28}) {
+export default function SocialShare({
+  slug,
+  authorTwitter,
+  title = "",
+  size = 28,
+  postType = "post",
+}) {
   const titleUrl = encodeURI(title);
   //   const url = encodeURI(slug);
 
@@ -9,32 +15,33 @@ export default function SocialShare({ slug, authorTwitter, title = "" , size=28}
       <div>
         <a
           target="_blank"
-          href={`https://twitter.com/intent/tweet?url=https%3A%2F%2Fprototypr.io%2Fpost%2F${slug}%2F&via=prototypr&text=Recommended%20read:%20%22${titleUrl}%22${authorTwitter ? "%20by%20" + authorTwitter : ""}%20✨%20check%20it%20out!`}
+          href={`https://twitter.com/intent/tweet?url=https%3A%2F%2Fprototypr.io%2F${postType}%2F${slug}%2F&via=prototypr&text=Recommended%20read:%20%22${titleUrl}%22${
+            authorTwitter ? "%20by%20" + authorTwitter : ""
+          }%20✨%20check%20it%20out!`}
         >
-          <TwitterLogo size={size}/>
+          <TwitterLogo size={size} />
         </a>
       </div>
       <div>
         <a
           target="_blank"
-          href={`http://www.facebook.com/share.php?u=https%3A%2F%2Fprototypr.io%2Fpost%2F${slug}`}>
-        <FacebookLogo size={size}/>
+          href={`http://www.facebook.com/share.php?u=https%3A%2F%2Fprototypr.io%2F${postType}%2F${slug}`}
+        >
+          <FacebookLogo size={size} />
         </a>
       </div>
       <div>
         <a
           target="_blank"
-          href={`https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fprototypr.io%2Fpost%2F${slug}`}
+          href={`https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fprototypr.io%2F${postType}%2F${slug}`}
         >
-                  <LinkedinLogo size={size}/>
-
+          <LinkedinLogo size={size} />
         </a>
       </div>
     </div>
   );
 }
 
-
 export function SocialShareVertical({ slug, authorTwitter, title = "" }) {
   const titleUrl = encodeURI(title);
   //   const url = encodeURI(slug);
@@ -44,25 +51,27 @@ export function SocialShareVertical({ slug, authorTwitter, title = "" }) {
       <div className="text-gray-500 hover:text-black">
         <a
           target="_blank"
-          href={`https://twitter.com/intent/tweet?url=https%3A%2F%2Fprototypr.io%2Ftoolbox%2F${slug}%2F&via=prototypr&text=Check%20it%20out%20%22${titleUrl}%22${authorTwitter ? "%20by%20" + authorTwitter : ""}%20on%20@Prototypr%20✨`}
+          href={`https://twitter.com/intent/tweet?url=https%3A%2F%2Fprototypr.io%2Ftoolbox%2F${slug}%2F&via=prototypr&text=Check%20it%20out%20%22${titleUrl}%22${
+            authorTwitter ? "%20by%20" + authorTwitter : ""
+          }%20on%20@Prototypr%20✨`}
         >
-          <TwitterLogo width={24} height={24}/>
+          <TwitterLogo width={24} height={24} />
         </a>
       </div>
       <div className="text-gray-500 hover:text-black">
         <a
           target="_blank"
-          href={`http://www.facebook.com/share.php?u=https%3A%2F%2Fprototypr.io%2Ftoolbox%2F${slug}`}>
-        <FacebookLogo width={24} height={24}/>
+          href={`http://www.facebook.com/share.php?u=https%3A%2F%2Fprototypr.io%2Ftoolbox%2F${slug}`}
+        >
+          <FacebookLogo width={24} height={24} />
         </a>
       </div>
       <div className="text-gray-500 hover:text-black">
         <a
           target="_blank"
           href={`https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fprototypr.io%2Ftoolbox%2F${slug}`}
         >
-                  <LinkedinLogo width={24} height={24}/>
-
+          <LinkedinLogo width={24} height={24} />
         </a>
       </div>
     </div>

diff --git a/components/authorBio.js b/components/authorBio.js
@@ -7,7 +7,7 @@ import { DribbbleLogo, GithubLogo, TwitterLogo } from "./icons";
 import '~/react-kofi/dist/kofi.css';
 import {KoFiButton} from "react-kofi";
 
-export default function AuthorBio({ author, slug, title }) {
+export default function AuthorBio({ author, slug, title, showShare = true }) {
   const pic = author?.avatar?.data?.attributes?.url
     ? author?.avatar?.data?.attributes?.url
     : author?.legacyAvatar
@@ -21,7 +21,7 @@ export default function AuthorBio({ author, slug, title }) {
 
   return (
     <div className="py-4">
-      <div
+      {showShare && <div
         className="flex md:px-0 justify-between mx-auto"
         style={{ maxWidth: "60rem" }}
       >
@@ -39,9 +39,9 @@ export default function AuthorBio({ author, slug, title }) {
             />
           </div>
         </div>
-      </div>
+      </div>}
       <div className=" mx-auto" style={{ maxWidth: "60rem" }}>
-        <div className="w-full border-b border-gray-200 my-10" />
+        {showShare && <div className="w-full border-b border-gray-200 my-10" />}
         <div className="flex flex-col sm:flex-row sm:justify-between">
           <div className="flex flex-col w-full">
             <div className="w-32 mx-auto flex justify-center">

diff --git a/components/date.js b/components/date.js
@@ -3,9 +3,9 @@ import format from 'date-fns/format'
 import es from 'date-fns/locale/es'
 import { useIntl } from "react-intl";
 
-export default function Date({ dateString, locale }) {
+export default function Date({ dateString, locale, className }) {
   const intl = useIntl();
 
   const date = parseISO(dateString)
-  return <time dateTime={dateString} className="capitalize">{format(date, 'LLLL	d, yyyy', {locale:intl.locale.indexOf('es-ES')>-1 ?es:''})}</time>
+  return <time dateTime={dateString} className={`${className} capitalize`}>{format(date, 'LLLL	d, yyyy', {locale:intl.locale.indexOf('es-ES')>-1 ?es:''})}</time>
 }
diff --git a/components/icons/index.js b/components/icons/index.js
@@ -348,6 +348,20 @@ export const NotePencil = ({ size, className, color }) => {
     </svg>
   );
 };
+export const NoteReceipt = ({ size, className, color }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      width={size ? size : "32"}
+      height={size ? size : "32"}
+      fill={color ? color : "currentColor"}
+      viewBox="0 0 256 256"
+    >
+      <path d="M72,104a8,8,0,0,1,8-8h96a8,8,0,0,1,0,16H80A8,8,0,0,1,72,104Zm8,40h96a8,8,0,0,0,0-16H80a8,8,0,0,0,0,16ZM232,56V208a8,8,0,0,1-11.58,7.15L192,200.94l-28.42,14.21a8,8,0,0,1-7.16,0L128,200.94,99.58,215.15a8,8,0,0,1-7.16,0L64,200.94,35.58,215.15A8,8,0,0,1,24,208V56A16,16,0,0,1,40,40H216A16,16,0,0,1,232,56Zm-16,0H40V195.06l20.42-10.22a8,8,0,0,1,7.16,0L96,199.06l28.42-14.22a8,8,0,0,1,7.16,0L160,199.06l28.42-14.22a8,8,0,0,1,7.16,0L216,195.06Z"></path>
+    </svg>
+  );
+};
 export const Briefcase = ({ size, className, color }) => {
   return (
     <svg

diff --git a/lib/api.js b/lib/api.js
@@ -300,6 +300,8 @@ export async function getAllPostsWithSlug(postType, pageSize = 20) {
  * @returns
  */
 export async function getPost(slug, preview, type) {
+  console.log('slug', slug)
+  console.log('type', type)
   const data = await fetchAPI(singlePostQuery, {
     preview,
     variables: {
@@ -308,7 +310,7 @@ export async function getPost(slug, preview, type) {
       type: type ? type : "article",
     },
   });
-
+console.log('data', data)
   data.morePosts = data.relatedPosts;
   return data;
 }

diff --git a/lib/constants.js b/lib/constants.js
@@ -12,9 +12,9 @@ export const NAV_OFFSET = 'pt-[84px]'
 export const SIDEBAR_STICKY_OFFSET = 'pt-24'
 
 
-export const TOTAL_STATIC_POSTS = process.env.NODE_ENV === 'production'?5000:2;
-export const TOTAL_STATIC_NEWSLETTERS = process.env.NODE_ENV === 'production'?1000:2;
-export const TOTAL_STATIC_NEWS = process.env.NODE_ENV === 'production'?50:2;
+export const TOTAL_STATIC_POSTS = process.env.NODE_ENV === 'production'?2:2;
+export const TOTAL_STATIC_NEWSLETTERS = process.env.NODE_ENV === 'production'?2:2;
+export const TOTAL_STATIC_NEWS = process.env.NODE_ENV === 'production'?2:2;
 
 export const jobTypes = [
   {

diff --git a/lib/editor/menus/settingsMenuNotes.js b/lib/editor/menus/settingsMenuNotes.js
@@ -0,0 +1,74 @@
+export const generalMenu =({postObject})=> [
+    {
+      type: 'date',
+      label: 'Publish Date',
+      initialValue: null,
+      adminOnly:false,
+      onValueChange: (value) => {
+        // Handle the date change
+        console.log('Date changed:', value);
+      },
+      description: 'Set a publish date.',
+    },
+    {
+      type: 'select',
+      label: 'Status',
+      initialValue: '',
+      adminOnly:false,
+      onValueChange: (value) => {
+        // Handle the post status change
+        console.log('Post status changed:', value);
+      },
+      options: [
+        { label: 'Draft', value: 'draft' },
+        { label: 'Pending', value: 'pending' },
+        { label: 'Publish', value: 'publish' },
+      ],
+      description: '(draft, pending, or publish)',
+    },
+    {
+      type: 'url',
+      label: 'Url',
+      initialValue: '',
+      onValueChange: (value) => {
+        // Handle the value change, e.g., update parent component state
+        console.log('Slug changed:', value);
+      },
+      description: 'Url slug for your post',
+    },
+    {
+      type: 'number',
+      label: 'Tier',
+      initialValue: '',
+      onValueChange: (value) => {
+        // Handle the tier change
+        console.log('Tier changed:', value);
+      },
+      description: '(1-5 for quality ranking)',
+    },
+  ];
+
+  export const seoMenu = [
+    {
+      type: 'text',
+      field:'seo.opengraphTitle',
+      label: 'Meta Title',
+      initialValue: '',
+      onValueChange: (value) => {
+        // Handle the meta title change
+        console.log('Meta title changed:', value);
+      },
+      description: 'SEO title for the post (max 60 characters)',
+    },
+    {
+      type: 'description',
+      field:'seo.metaDesc',
+      label: 'Meta Description',
+      initialValue: '',
+      onValueChange: (value) => {
+        // Handle the meta description change
+        console.log('Meta description changed:', value);
+      },
+      description: 'SEO description for the post (max 160 characters)',
+    },
+  ];
diff --git a/lib/editor/savePost.js b/lib/editor/savePost.js
@@ -37,8 +37,15 @@ export const savePost = async ({ postId, entry, user }) => {
 
   //remove nulls and objects (wrong format for strapi)
   savePostData = flattenDataFields(savePostData);
+  if(entry.type === "note"){
+    if(entry.status === "publish"){
+      savePostData.publishedAt =  Date.now()
+    }else if(entry.status === "draft"){
+      savePostData.publishedAt =  null
+    }
+   }
 
-  try {
+   try {
     updateData = await axios({
       method: "put",
       url: `${process.env.NEXT_PUBLIC_API_URL}/api/posts/${postId}`,

diff --git a/lib/editor/typrNotesProps.js b/lib/editor/typrNotesProps.js
@@ -4,27 +4,36 @@ import { createPost } from "@/lib/editor/createPost";
 import { savePost } from "@/lib/editor/savePost";
 import { getUserArticle } from "@/lib/api";
 // import { loggedInMenu } from "./menus/loggedInMenu";
+import { settingsMenuNotes,seoMenu } from "./menus/settingsMenuNotes";
 
 export const typrNotesProps = ({ user, userLoading, mutateUser, router }) => ({
   enablePublishingFlow: false,
   theme: "blue",
   editorWidth: "590px",
   components: {
+
     nav: {
-      show:true,
+      show: true,
       undoRedoButtons: { show: false },
-      logo: { show:false,image: `/static/images/logo-small.svg`, url: "/" },
+      logo: { show: false, image: `/static/images/logo-small.svg`, url: "/" },
       userBadge: {
-        show:false,
+        show: false,
         avatarPlaceholder:
-        "https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/4f9713374ad556ff3b8ca33e241f6c43.png?updated_at=2022-12-14T10:55:38.818Z",
+          "https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/4f9713374ad556ff3b8ca33e241f6c43.png?updated_at=2022-12-14T10:55:38.818Z",
         // loggedInMenu
       },
       position: "sticky",
     },
     settingsPanel: {
+      show: true,
+      generalTab: {
+        menu: settingsMenuNotes,
+      },
+      seoTab: {
+        menu: seoMenu,
+      },
       featuredImage: {
-       show:true
+        show: true,
       },
     },
   },
@@ -46,7 +55,11 @@ export const typrNotesProps = ({ user, userLoading, mutateUser, router }) => ({
   },
   postOperations: {
     load: async ({ postId, user }) => {
-      const postObject = await getUserArticle({user, id:postId, type: "note"});
+      const postObject = await getUserArticle({
+        user,
+        id: postId,
+        type: "note",
+      });
       return postObject;
     },
     save: async ({ entry, postId }) => {
@@ -58,13 +71,13 @@ export const typrNotesProps = ({ user, userLoading, mutateUser, router }) => ({
       return postObject;
     },
   },
-  mediaHandler:{
+  mediaHandler: {
     config: {
       method: "post",
       url: `${process.env.NEXT_PUBLIC_API_URL}/api/users-permissions/users/article/image/upload`,
       headers: {
         Authorization: `Bearer ${user?.jwt}`,
-      }
+      },
     },
   },
   hooks: {
@@ -81,6 +94,6 @@ export const typrNotesProps = ({ user, userLoading, mutateUser, router }) => ({
     },
   },
   router: {
-    push: router.push
+    push: router.push,
   },
 });
diff --git a/lib/editor/typrProps.js b/lib/editor/typrProps.js
@@ -10,6 +10,9 @@ export const typrProps = ({ user, userLoading, mutateUser, router }) => ({
   theme: "blue",
   components: {
     nav: {
+      undoRedoButtons: {
+        show: false,
+      },
       logo: { image: `/static/images/logo-small.svg`, url: "/" },
       userBadge: {
         loggedInMenu,