feat: Added blog linked to the headless CMS Strapi

src/components/blog-post-list/index.tsx

@@ -0,0 +1,74 @@
+import { tw } from 'twind';
+import Check from '@/constants/svg/check.svg';
+import { useEffect, useState } from 'react';
+import { title } from 'process';
+import Button from '../button';
+
+const dummyEndpoint = `http://localhost:1337/api/articles`;
+
+export interface PostResponse {
+ id: number;
+ attributes: {
+ title: string;
+ description: string;
+ };
+}
+
+export interface Post {
+ id: string;
+ title: string;
+ description: string;
+}
+
+export interface PostList {
+ posts: [Post];
+}
+
+export const BlogPostList = () => {
+ const [posts, setPosts] = useState<PostList>();
+
+ useEffect(() => {
+ fetch(dummyEndpoint)
+ .then((response) => response.json())
+ .then((json) => {
+ setPosts({
+ posts: json.data.map((x: PostResponse) => ({
+ id: x.id,
+ title: x.attributes.title,
+ description: x.attributes.description,
+ })),
+ });
+ });
+ }, []);
+
+ return (
+ <section className={tw(`bg-white pb-6`)}>
+ <div className={tw(`max-w-7xl mx-auto p-4 sm:p-6 lg:p-8`)}>
+ <div className={tw(`container mx-auto px-6 p-6 bg-white`)}>
+ <div className={tw(`mb-16 text-center`)}>
+ <h4 className={tw(`text-base text-indigo-600 font-semibold tracking-wide uppercase`)}>Blog</h4>
+ <p className={tw(`mt-2 text-5xl lg:text-7xl font-bold tracking-tight text-gray-900`)}>Latest news</p>
+ </div>
+ <div className={tw(`flex flex-wrap my-12`)}>
+ {posts &&
+ posts?.posts.length > 0 &&
+ posts.posts.map((x) => (
+ <>
+ <div className={tw(`w-full border-b md:w-1/2 md:border-r lg:w-1/3 p-8`)}>
+ <div className={tw(`flex items-center mb-6`)}>
+ <Check width={20} height={20} fill="currentColor" className={tw(`h-6 w-6 text-indigo-500`)} />
+ <div className={tw(`ml-4 text-xl`)}>{x.title}</div>
+ </div>
+ <p className={tw(`leading-loose text-gray-500`)}>{x.description}</p>
+ <Button>
+ <a href={`/blog/`.concat(String(x.id))}>View</a>
+ </Button>
+ </div>
+ </>
+ ))}
+ </div>
+ </div>
+ </div>
+ </section>
+ );
+};

src/components/navigation/index.tsx

@@ -27,7 +27,7 @@ const links = [
  },
  {
  label: `Blog`,
- href: `/`,
+ href: `/blog`,
  },
 ];
 

src/pages/blog/[id].tsx

@@ -0,0 +1,77 @@
+import { NextSeo } from 'next-seo';
+import Page from '@/components/page';
+import Footer from '@/components/footer';
+import { tw } from 'twind';
+import Button from '@/components/button';
+import { useRouter } from 'next/dist/client/router';
+import { useEffect, useState } from 'react';
+
+const apiEndpoint = `http://localhost:1337/api/articles/`;
+
+export interface Post {
+ id: string;
+ title: string;
+ description: string;
+ body: string;
+}
+
+export default function BlogEntry() {
+ const router = useRouter();
+ const { id } = router.query;
+
+ const [post, setPost] = useState<Post>();
+
+ useEffect(() => {
+ fetch(apiEndpoint + String(id))
+ .then((response) => response.json())
+ .then((json) => {
+ console.log(json);
+ if (json.data) {
+ setPost({
+ id: json.data.id,
+ title: json.data.attributes.title,
+ description: json.data.attributes.description,
+ body: json.data.attributes.content,
+ });
+ }
+ });
+ }, [id]);
+
+ return (
+ <Page>
+ <NextSeo
+ title="STARTD - Template"
+ description="A TypeScript/Next.js theme that includes everything you need to build amazing landing page!"
+ />
+ <main>
+ <section className={tw(`bg-gradient-to-b from-gray-100 to-white shadow-inner pt-12`)}>
+ <div className={tw(`relative max-w-7xl mx-auto mb-24`)}>
+ <div className={tw(`overflow-hidden lg:max-w-none lg:flex`)}>
+ <div className={tw(`py-8 px-6 md:px-0 lg:flex-shrink-1`)}>
+ <h2 className={tw(`text-4xl lg:text-7xl font-bold text-gray-800 mb-12`)}>{post?.title}</h2>
+ <p className={tw(`mt-6 text-base leading-6 text-gray-500`)}>{post?.body}</p>
+ </div>
+ <div
+ className={tw(
+ `py-8 px-6 text-center lg:flex-shrink-0
+ lg:flex lg:flex-col lg:justify-center lg:p-12`,
+ )}
+ >
+ <p className={tw(`text-lg font-medium text-gray-800`)}>Blog post ID</p>
+ <div
+ className={tw(`my-4 flex items-center justify-center text-6xl leading-none font-bold text-gray-800`)}
+ >
+ {id}
+ </div>
+ <Button primary modifier="mt-6">
+ <a href="/blog">Go Back</a>
+ </Button>
+ </div>
+ </div>
+ </div>
+ </section>
+ </main>
+ <Footer />
+ </Page>
+ );
+}

src/pages/blog/index.tsx

@@ -0,0 +1,19 @@
+import { NextSeo } from 'next-seo';
+import Page from '@/components/page';
+import { BlogPostList } from '@/components/blog-post-list';
+import Footer from '@/components/footer';
+
+export default function Home() {
+ return (
+ <Page>
+ <NextSeo
+ title="STARTD - Template"
+ description="A TypeScript/Next.js theme that includes everything you need to build amazing landing page!"
+ />
+ <main>
+ <BlogPostList />
+ </main>
+ <Footer />
+ </Page>
+ );
+}