feat: 🎸 cms

added blog seo object

cms/quivr/config/middlewares.js

@@ -13,6 +13,7 @@ module.exports = [
             'blob:',
             'dl.airtable.com',
             'quivr-cms.s3.eu-west-3.amazonaws.com',
+            '*.strapi.io',
           ],
           'media-src': [
             "'self'",
@@ -20,6 +21,7 @@ module.exports = [
             'blob:',
             'dl.airtable.com',
             'quivr-cms.s3.eu-west-3.amazonaws.com',
+            '*.strapi.io',
           ],
           upgradeInsecureRequests: null,
         },

cms/quivr/config/plugins.js

@@ -1,4 +1,10 @@
 module.exports = ({ env }) => ({
+  ckeditor: {
+    enabled: true,
+  },
+  seo: {
+    enabled: true,
+  },
     upload: {
       config: {
         provider: 'aws-s3',

cms/quivr/package.json

@@ -11,7 +11,9 @@
   },
   "devDependencies": {},
   "dependencies": {
+    "@ckeditor/strapi-plugin-ckeditor": "^0.0.9",
     "@strapi/plugin-i18n": "4.14.3",
+    "@strapi/plugin-seo": "^1.9.6",
     "@strapi/plugin-users-permissions": "4.14.3",
     "@strapi/provider-upload-aws-s3": "^4.14.3",
     "@strapi/strapi": "4.14.3",

cms/quivr/src/api/blog/content-types/blog/schema.json

@@ -4,25 +4,26 @@
   "info": {
     "singularName": "blog",
     "pluralName": "blogs",
-    "displayName": "Blog"
+    "displayName": "Blog",
+    "description": ""
   },
   "options": {
     "draftAndPublish": true
   },
   "pluginOptions": {},
   "attributes": {
-    "title": {
+    "Article": {
-      "type": "string",
+      "type": "customField",
-      "required": true
+      "options": {
+        "output": "HTML",
+        "preset": "standard"
+      },
+      "customField": "plugin::ckeditor.CKEditor"
     },
-    "description": {
+    "seo": {
-      "type": "text"
+      "type": "component",
-    },
+      "repeatable": false,
-    "draft": {
+      "component": "shared.seo"
-      "type": "richtext"
-    },
-    "imageUrl": {
-      "type": "string"
     }
   }
 }

cms/quivr/src/components/shared/meta-social.json

@@ -0,0 +1,37 @@
+{
+  "collectionName": "components_shared_meta_socials",
+  "info": {
+    "displayName": "metaSocial",
+    "icon": "project-diagram"
+  },
+  "options": {},
+  "attributes": {
+    "socialNetwork": {
+      "type": "enumeration",
+      "enum": [
+        "Facebook",
+        "Twitter"
+      ],
+      "required": true
+    },
+    "title": {
+      "type": "string",
+      "required": true,
+      "maxLength": 60
+    },
+    "description": {
+      "type": "string",
+      "maxLength": 65,
+      "required": true
+    },
+    "image": {
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos"
+      ],
+      "type": "media",
+      "multiple": false
+    }
+  }
+}

cms/quivr/src/components/shared/seo.json

@@ -0,0 +1,53 @@
+{
+  "collectionName": "components_shared_seos",
+  "info": {
+    "displayName": "seo",
+    "icon": "search"
+  },
+  "options": {},
+  "attributes": {
+    "metaTitle": {
+      "required": true,
+      "type": "string",
+      "maxLength": 60
+    },
+    "metaDescription": {
+      "type": "string",
+      "required": true,
+      "maxLength": 160,
+      "minLength": 50
+    },
+    "metaImage": {
+      "type": "media",
+      "multiple": false,
+      "required": false,
+      "allowedTypes": [
+        "images",
+        "files",
+        "videos"
+      ]
+    },
+    "metaSocial": {
+      "type": "component",
+      "repeatable": true,
+      "component": "shared.meta-social"
+    },
+    "keywords": {
+      "type": "text",
+      "regex": "[^,]+"
+    },
+    "metaRobots": {
+      "type": "string",
+      "regex": "[^,]+"
+    },
+    "structuredData": {
+      "type": "json"
+    },
+    "metaViewport": {
+      "type": "string"
+    },
+    "canonicalURL": {
+      "type": "string"
+    }
+  }
+}

cms/quivr/types/generated/components.d.ts

@@ -1,5 +1,61 @@
 import type { Schema, Attribute } from '@strapi/strapi';
 
-declare module '@strapi/types' {
+export interface SharedMetaSocial extends Schema.Component {
-  export module Shared {}
+  collectionName: 'components_shared_meta_socials';
+  info: {
+    displayName: 'metaSocial';
+    icon: 'project-diagram';
+  };
+  attributes: {
+    socialNetwork: Attribute.Enumeration<['Facebook', 'Twitter']> &
+      Attribute.Required;
+    title: Attribute.String &
+      Attribute.Required &
+      Attribute.SetMinMaxLength<{
+        maxLength: 60;
+      }>;
+    description: Attribute.String &
+      Attribute.Required &
+      Attribute.SetMinMaxLength<{
+        maxLength: 65;
+      }>;
+    image: Attribute.Media;
+  };
+}
+
+export interface SharedSeo extends Schema.Component {
+  collectionName: 'components_shared_seos';
+  info: {
+    displayName: 'seo';
+    icon: 'search';
+  };
+  attributes: {
+    metaTitle: Attribute.String &
+      Attribute.Required &
+      Attribute.SetMinMaxLength<{
+        maxLength: 60;
+      }>;
+    metaDescription: Attribute.String &
+      Attribute.Required &
+      Attribute.SetMinMaxLength<{
+        minLength: 50;
+        maxLength: 160;
+      }>;
+    metaImage: Attribute.Media;
+    metaSocial: Attribute.Component<'shared.meta-social', true>;
+    keywords: Attribute.Text;
+    metaRobots: Attribute.String;
+    structuredData: Attribute.JSON;
+    metaViewport: Attribute.String;
+    canonicalURL: Attribute.String;
+  };
+}
+
+declare module '@strapi/types' {
+  export module Shared {
+    export interface Components {
+      'shared.meta-social': SharedMetaSocial;
+      'shared.seo': SharedSeo;
+    }
+  }
 }

cms/quivr/types/generated/contentTypes.d.ts

@@ -683,15 +683,21 @@ export interface ApiBlogBlog extends Schema.CollectionType {
     singularName: 'blog';
     pluralName: 'blogs';
     displayName: 'Blog';
+    description: '';
   };
   options: {
     draftAndPublish: true;
   };
   attributes: {
-    title: Attribute.String & Attribute.Required;
+    Article: Attribute.RichText &
-    description: Attribute.Text;
+      Attribute.CustomField<
-    draft: Attribute.RichText;
+        'plugin::ckeditor.CKEditor',
-    imageUrl: Attribute.String;
+        {
+          output: 'HTML';
+          preset: 'standard';
+        }
+      >;
+    seo: Attribute.Component<'shared.seo'>;
     createdAt: Attribute.DateTime;
     updatedAt: Attribute.DateTime;
     publishedAt: Attribute.DateTime;

frontend/pages/blog/[id]/index.tsx

@@ -1,20 +1,38 @@
 /* eslint-disable */
+import Button from "@/lib/components/ui/Button";
 import type { GetStaticPaths, InferGetStaticPropsType } from 'next';
 import Head from "next/head";
 import Image from "next/image";
 
+
+type SeoAttributes = {
+  id: number;
+  metaTitle: string;
+  metaDescription: string;
+  keywords: string;
+  metaRobots: string | null;
+  structuredData: string | null;
+  metaViewport: string | null;
+  canonicalURL: string | null;
+};
+
 type BlogPostAttributes = {
-  imageUrl: string;
+  imageUrl: string; // Assuming that the imageUrl is extracted from the HTML content
-  title: string;
+  title: string; // Assuming title is extracted from the first few words of the article
-  description: string;
+  description: string; // Brief summary, assuming it's not provided by the API
-  draft: string;
+  Article: string;
+  createdAt: string;
+  updatedAt: string;
+  publishedAt: string;
+  seo: SeoAttributes;
 };
 
 type BlogPost = {
-  id: string;
+  id: number;
   attributes: BlogPostAttributes;
 };
 
+
 export const getStaticPaths: GetStaticPaths = async () => {
   try {
     const response = await fetch("https://cms.quivr.app/api/blogs");
@@ -42,7 +60,7 @@ export const getStaticPaths: GetStaticPaths = async () => {
 
 export const getStaticProps = async (context: { params: { id: string } }) => {
   try {
-    const response = await fetch(`https://cms.quivr.app/api/blogs/${context.params.id}`);
+    const response = await fetch(`https://cms.quivr.app/api/blogs/${context.params.id}?populate=seo`);
     console.log(response)
     const data: { data: BlogPost } = await response.json();
     
@@ -62,26 +80,42 @@ export const getStaticProps = async (context: { params: { id: string } }) => {
 };
 
 const BlogPostDetail = ({ post }: InferGetStaticPropsType<typeof getStaticProps>) => {
+  const { metaTitle, metaDescription, keywords, canonicalURL } = post.attributes.seo;
+
   return (
-    <main className="bg-gray-100 min-h-screen p-8">
+    <div className="px-4 py-6 md:px-6 lg:py-16 md:py-12 bg-white dark:bg-black">
       <Head>
-        <title>{post.attributes.title}</title>
+        <title>{metaTitle}</title>
-        <meta name="description" content={post.attributes.description} />
+        <meta name="description" content={metaDescription} />
+        <meta name="keywords" content={keywords} />
+        {canonicalURL && <link rel="canonical" href={canonicalURL} />}
       </Head>
-      <div className="max-w-screen-xl mx-auto">
+      <article className="prose prose-zinc mx-auto dark:prose-invert">
-        <div className="bg-white p-8 rounded-lg shadow-md">
+        <div className="space-y-2 not-prose">
+          <h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl lg:leading-[3.5rem] text-black dark:text-white">
+            {post.attributes.title}
+          </h1>
+          <p className="text-zinc-500 dark:text-zinc-400">Posted on {post.attributes.publishedAt}</p>
+        </div>
+        <p className="text-black dark:text-white">
+          {post.attributes.description}
+        </p>
+        <figure>
+          {/* Assuming you'd extract the image URL from the Article content */}
           <Image
             src={post.attributes.imageUrl}
-            alt="blog-post-detail"
+            alt={post.attributes.title}
-            className="w-full rounded-t-lg object-cover h-56"
+            className="aspect-video overflow-hidden rounded-lg object-cover"
-            width={1000}
+            width={1250}
-            height={500}
+            height={340}
           />
-          <h1 className="text-4xl font-bold my-6">{post.attributes.title}</h1>
+          <figcaption className="text-black dark:text-white">{post.attributes.title}</figcaption>
-          <p className="text-gray-700 whitespace-pre-line">{post.attributes.draft}</p>
+        </figure>
-        </div>
+        {/* Insert the HTML content directly */}
-      </div>
+        <div dangerouslySetInnerHTML={{ __html: post.attributes.Article }}></div>
-    </main>
+        <Button>Read more</Button> 
+      </article>
+    </div>
   );
 }
 

frontend/pages/blog/index.tsx

@@ -22,7 +22,7 @@ type BlogPost = {
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const getStaticProps = async () => {
   try {
-    const resulting = await fetch("https://cms.quivr.app/api/blogs");
+    const resulting = await fetch("https://cms.quivr.app/api/blogs?populate=seo");
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     const data: { data: BlogPost[] } = await resulting.json();
 
@@ -43,68 +43,50 @@ export const getStaticProps = async () => {
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const Blog = ({ result }: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
-    <main className="bg-white min-h-screen p-8 text-gray-900">
+    <section className="w-full">
       <Head>
         <title>Quivr - Blog</title>
         <meta name="description" content="Quivr.app - Your Generative AI second brain builder's blog" />
       </Head>
-      <div className="mx-auto container">
+      
-        <h1 className="text-6xl font-extrabold mb-16 text-center tracking-tight text-black">Blog Posts</h1>
+      <header className="bg-white text-zinc-900 py-4 border-b">
-        <div className="grid gap-16 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
+        <div className="container mx-auto px-4 md:px-6">
-          {result.map((post, index) => {
+          <nav className="flex items-center justify-between">
-            if (index === 0) {
+            <div className="text-2xl font-bold">Quivr - Blog</div>
-              // Special layout for the first post
+            <div className="space-x-4">
-              return (
+              <Link className="text-zinc-900 hover:text-zinc-700" href="#">Home</Link>
-                <Link
+              <Link className="text-zinc-900 hover:text-zinc-700" href="#">Posts</Link>
-                  href={`/blog/${post.id}`}
+            </div>
-                  key={post.id}
+          </nav>
-                  className="col-span-full block p-8 bg-white border-2 border-gray-300 rounded-lg shadow-md hover:border-black hover:shadow-xl transform hover:scale-105 transition-transform duration-200 flex"
-                >
-                  <div className="flex-1 pr-8">
-                    <h2 className="text-4xl font-bold mb-4 group-hover:text-black transition-colors duration-200">{post.attributes.title}</h2>
-                    <p className="text-gray-600 line-clamp-3">{post.attributes.description}</p>
-                  </div>
-                  <div className="flex-none">
-                    <Image
-                      src={`${post.attributes.imageUrl}`}
-                      alt="blog-post"
-                      width={400}
-                      height={400}
-                      className="rounded-lg object-cover"
-                    />
-                  </div>
-                </Link>
-              );
-            } else {
-              // Standard layout for the rest of the posts
-              return (
-                <Link
-                  href={`/blog/${post.id}`}
-                  key={post.id}
-                  className="block p-8 bg-white border-2 border-gray-300 rounded-lg shadow-md hover:border-black hover:shadow-xl transform hover:scale-105 transition-transform duration-200"
-                >
-                  <div className="mb-6">
-                    <Image
-                      src={`${post.attributes.imageUrl}`}
-                      alt="blog-post"
-                      width={300}
-                      height={300}
-                      className="w-full rounded-lg object-cover"
-                    />
-                  </div>
-                  <h2 className="text-3xl font-bold mb-4 group-hover:text-black transition-colors duration-200">{post.attributes.title}</h2>
-                  <p className="text-gray-600 line-clamp-3">{post.attributes.description}</p>
-                </Link>
-              );
-            }
-          })}
         </div>
-      </div>
+      </header>
-    </main>
+
+      <main className="container mx-auto px-4 md:px-6 py-8">
+
+        <section className="mb-8">
+          <h2 className="text-2xl font-bold mb-4">Latest Posts</h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            {result.slice(1).map(post => (
+              <div key={post.id}>
+                <Image
+                  src={`${post.attributes.imageUrl}`}
+                  alt="Blog Post Image"
+                  width={600}
+                  height={400}
+                  className="w-full rounded-lg object-cover"
+                />
+                <h3 className="text-xl font-bold mb-2 mt-4">{post.attributes.title}</h3>
+                <p className="text-zinc-500">{post.attributes.description}</p>
+                <Link className="text-blue-500 hover:text-blue-700 mt-4" href={`/blog/${post.id}`}>
+                  Read More
+                </Link>
+              </div>
+            ))}
+          </div>
+        </section>
+      </main>
+    </section>
   );
 }
 
-
-
-
 export default Blog;