added blogs

Author: Zain-ul-din

src/components/Footer.tsx

@@ -130,6 +130,7 @@ const FooterLinks = () => {
       <Flex
         gap={isUnder600 ? '1.5rem' : '4rem'}
         columnGap={'1rem'}
+        rowGap={'1rem'}
         maxWidth={'1200px'}
         margin={'0.5rem auto'}
         justifyContent={'center'}

src/lib/constant.ts

@@ -81,7 +81,8 @@ export const ROUTING = {
   rooms: '/timetable/rooms',
   clash_resolver: '/util/timetable_clashresolver',
   room_activities: '/room-activities',
-  past_papers: '/pastpaper'
+  past_papers: '/pastpaper',
+  blogs: '/blogs'
 };
 
 export const APIS_ENDPOINTS = {

src/pages/_app.tsx

@@ -95,7 +95,9 @@ export default function App({ Component, pageProps }: AppProps) {
             <Component {...pageProps} />
           </ChatAppStateProvider.Provider>
           {footerPages.includes(router.pathname) && <Footer fixedBottom={false} />}
-          {router.pathname.includes('/timetable/') && <Footer fixedBottom={false} />}
+          {(router.pathname.includes('/timetable/') || router.pathname.includes('/blogs')) && (
+            <Footer fixedBottom={false} />
+          )}
         </AppStyleProvider>
       </UserCredentialsContext.Provider>
     </>

src/pages/blogs/[id].tsx

@@ -0,0 +1,49 @@
+import { Flex } from '@chakra-ui/react';
+import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next';
+
+interface Post {
+  content: {
+    rendered: string;
+  };
+  title: {
+    rendered: string;
+  };
+}
+
+export const getStaticPaths = (async () => {
+  const res = await fetch('https://sneakword.online/wp-json/wp/v2/posts?_fields=id');
+  const posts = await res.json();
+  const paths = posts.map((post: any) => ({
+    params: { id: post.id + '' }
+  }));
+
+  return {
+    paths,
+    fallback: true
+  };
+}) satisfies GetStaticPaths;
+
+export const getStaticProps = (async (context: GetStaticPropsContext) => {
+  const id = context.params!.id;
+  const res = await fetch(`https://sneakword.online/wp-json/wp/v2/posts/${id}`);
+  const post = (await res.json()) as Post;
+  return {
+    props: { post: post }
+  };
+}) satisfies GetStaticProps<{
+  post: Post;
+}>;
+
+export default function BlogDetailPage({ post }: { post: Post }) {
+  return (
+    <Flex maxWidth={'1250px'} mx={'auto'} w={'full'} p={2}>
+      <div
+        className="mark-down"
+        dangerouslySetInnerHTML={{
+          __html: `
+          <h1>${post.title.rendered}</h1>
+          ${post.content.rendered}`
+        }}></div>
+    </Flex>
+  );
+}

src/pages/blogs/index.tsx

@@ -0,0 +1,51 @@
+import { Flex, List, ListItem, Stack, Text } from '@chakra-ui/react';
+import type { InferGetStaticPropsType, GetStaticProps } from 'next';
+import Link from 'next/link';
+
+type Posts = {
+  id: string;
+  title: {
+    rendered: string;
+  };
+}[];
+
+export const getStaticProps = (async (context) => {
+  const res = await fetch('https://sneakword.online/wp-json/wp/v2/posts?_fields=title,id');
+  const posts = (await res.json()) as Posts;
+  return { props: { posts }, revalidate: 60 * 60 * 12 };
+}) satisfies GetStaticProps<{
+  posts: Posts;
+}>;
+
+export default function Page({ posts }: InferGetStaticPropsType<typeof getStaticProps>) {
+  console.log(posts);
+  return (
+    <Flex maxWidth={'1200px'} mx={'auto'} w={'full'} p={2} justify={'center'} flexDir={'column'}>
+      <Stack mt={6}>
+        <Text as={'h1'} fontSize={'3xl'} fontWeight={'bold'}>
+          Blogs
+        </Text>
+      </Stack>
+      <List mt={'6'} w={'full'}>
+        {posts.map((post, idx) => (
+          <Link href={`/blogs/${post.id}`} key={idx}>
+            <ListItem
+              p={4}
+              rounded={'md'}
+              border={'1px solid var(--border-color)'}
+              fontSize={'xl'}
+              fontWeight={'medium'}
+              _hover={{
+                bg: 'var(--card-dark-color)',
+                cursor: 'pointer'
+              }}
+              my={3}
+              bg={'var(--card-color)'}>
+              {post.title.rendered}
+            </ListItem>
+          </Link>
+        ))}
+      </List>
+    </Flex>
+  );
+}