feat: 🎸 cms

added blog seo object
2024-12-24 20:03:41 +03:00 · 2023-10-23 19:24:00 +02:00 · 2023-10-23 19:24:00 +02:00 · 04b4abc505
commit 04b4abc505
parent c47548d3cd
11 changed files with 1344 additions and 120 deletions
--- a/cms/quivr/config/middlewares.js
+++ b/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,
        },
--- a/cms/quivr/config/plugins.js
+++ b/cms/quivr/config/plugins.js
@ -1,4 +1,10 @@
 module.exports = ({ env }) => ({
+  ckeditor: {
+    enabled: true,
+  },
+  seo: {
+    enabled: true,
+  },
    upload: {
      config: {
        provider: 'aws-s3',
--- a/cms/quivr/package.json
+++ b/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",
@ -30,4 +32,4 @@
    "npm": ">=6.0.0"
  },
  "license": "MIT"
-}
+}
--- a/cms/quivr/src/api/blog/content-types/blog/schema.json
+++ b/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": {
-      "type": "string",
-      "required": true
+    "Article": {
+      "type": "customField",
+      "options": {
+        "output": "HTML",
+        "preset": "standard"
+      },
+      "customField": "plugin::ckeditor.CKEditor"
    },
-    "description": {
-      "type": "text"
-    },
-    "draft": {
-      "type": "richtext"
-    },
-    "imageUrl": {
-      "type": "string"
+    "seo": {
+      "type": "component",
+      "repeatable": false,
+      "component": "shared.seo"
    }
  }
 }
--- a/cms/quivr/src/components/shared/meta-social.json
+++ b/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
+    }
+  }
+}
--- a/cms/quivr/src/components/shared/seo.json
+++ b/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"
+    }
+  }
+}
--- a/cms/quivr/types/generated/components.d.ts
+++ b/cms/quivr/types/generated/components.d.ts
@ -1,5 +1,61 @@
 import type { Schema, Attribute } from '@strapi/strapi';

-declare module '@strapi/types' {
-  export module Shared {}
+export interface SharedMetaSocial extends Schema.Component {
+  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;
+    }
+  }
 }
--- a/cms/quivr/types/generated/contentTypes.d.ts
+++ b/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;
-    description: Attribute.Text;
-    draft: Attribute.RichText;
-    imageUrl: Attribute.String;
+    Article: Attribute.RichText &
+      Attribute.CustomField<
+        'plugin::ckeditor.CKEditor',
+        {
+          output: 'HTML';
+          preset: 'standard';
+        }
+      >;
+    seo: Attribute.Component<'shared.seo'>;
    createdAt: Attribute.DateTime;
    updatedAt: Attribute.DateTime;
    publishedAt: Attribute.DateTime;
--- a/cms/quivr/yarn.lock
+++ b/cms/quivr/yarn.lock
--- a/frontend/pages/blog/[id]/index.tsx
+++ b/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;
-  title: string;
-  description: string;
-  draft: string;
+  imageUrl: string; // Assuming that the imageUrl is extracted from the HTML content
+  title: string; // Assuming title is extracted from the first few words of the article
+  description: string; // Brief summary, assuming it's not provided by the API
+  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,27 +80,43 @@ 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>
-        <meta name="description" content={post.attributes.description} />
+        <title>{metaTitle}</title>
+        <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">
-        <div className="bg-white p-8 rounded-lg shadow-md">
+      <article className="prose prose-zinc mx-auto dark:prose-invert">
+        <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"
-            className="w-full rounded-t-lg object-cover h-56"
-            width={1000}
-            height={500}
+            alt={post.attributes.title}
+            className="aspect-video overflow-hidden rounded-lg object-cover"
+            width={1250}
+            height={340}
          />
-          <h1 className="text-4xl font-bold my-6">{post.attributes.title}</h1>
-          <p className="text-gray-700 whitespace-pre-line">{post.attributes.draft}</p>
-        </div>
-      </div>
-    </main>
+          <figcaption className="text-black dark:text-white">{post.attributes.title}</figcaption>
+        </figure>
+        {/* Insert the HTML content directly */}
+        <div dangerouslySetInnerHTML={{ __html: post.attributes.Article }}></div>
+        <Button>Read more</Button> 
+      </article>
+    </div>
  );
 }

-export default BlogPostDetail;
+export default BlogPostDetail;
--- a/frontend/pages/blog/index.tsx
+++ b/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>
-        <div className="grid gap-16 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-          {result.map((post, index) => {
-            if (index === 0) {
-              // Special layout for the first post
-              return (
-                <Link
-                  href={`/blog/${post.id}`}
-                  key={post.id}
-                  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>
-              );
-            }
-          })}
+      
+      <header className="bg-white text-zinc-900 py-4 border-b">
+        <div className="container mx-auto px-4 md:px-6">
+          <nav className="flex items-center justify-between">
+            <div className="text-2xl font-bold">Quivr - Blog</div>
+            <div className="space-x-4">
+              <Link className="text-zinc-900 hover:text-zinc-700" href="#">Home</Link>
+              <Link className="text-zinc-900 hover:text-zinc-700" href="#">Posts</Link>
+            </div>
+          </nav>
        </div>
-      </div>
-    </main>
+      </header>
+
+      <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;
+export default Blog;