[Story] Add detail page but only text, image, and video component that can get rendered

.env.example

@@ -1 +1,4 @@
-VITE_APP_TITLE=asd
+VITE_APP_TITLE=
+GHOST_API_URL=
+GHOST_API_CONTENT_API_KEY=
+GHOST_ADMIN_API_KEY=

package.json

@@ -15,8 +15,12 @@
         "@chakra-ui/react": "^2.2.4",
         "@emotion/react": "^11.9.3",
         "@emotion/styled": "^11.9.3",
+        "@types/node": "^18.0.6",
         "axios": "^0.27.2",
+        "dotenv": "^16.0.1",
+        "dompurify": "^2.3.10",
         "framer-motion": "^6.5.1",
+        "node-html-parser": "^5.3.3",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-router-dom": "^6.3.0"

src/components/BlogPost.tsx

@@ -1,80 +1,84 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import { Post } from '../types/types';
 
 const BlogPost: React.FC<Post> = (props) => {
-    const { title, date, author, description, imageUrl, link, tags } = props;
+    const { id, title, date, author, description, imageUrl, link, tags } = props;
     return (
-        <div
-            className="
-                shadow-lg
-                transition
-                duration-500
-                ease-in-out
-                transform
-                hover:shadow-2xl
-                justify-between
-                flex-col
-                flex
-                shrink
-                w-full
-                h-full
-                max-w-xs
-                md:max-w-md
-                max-h-fit
-            "
-        >
-            <img
-                alt={title}
-                src={imageUrl}
-                className="max-h-40 w-full object-cover rounded-t-lg"
-            />
-            <div className="bg-white w-full h-full p-4 rounded-br-lg rounded-bl-lg">
-                <div className="flex flex-col justify-between h-full">
-                    {/* title  */}
-                    <div>
-                        <p className="font-Body text-body font-normal mb-2">
-                            {date} | Posted by {author}
-                        </p>
-                        <a
-                            href={link}
-                            className="font-Heading text-h6 font-semibold"
-                        >
-                            {title}
-                        </a>
-                        <p className="font-Body text-body font-normal">
-                            {description}
-                        </p>
-                    </div>
-                    {/* tags  */}
-                    <div>
-                        <a
-                            className="font-Caption text-body font-semibold hover:text-Orange"
-                            href={link}
-                        >
-                            Read More
-                        </a>
-                        {tags ? (
-                            <div className="flex items-center mt-2 flex-wrap gap-2">
-                                {tags.map((tag: string) => (
-                                    // TODO: change # to tags link
-                                    <a
-                                        href="www.google.com"
-                                        className="px-2 py-2 rounded bg-Orange text-white hover:text-black"
-                                    >
-                                        {tag}
-                                    </a>
-                                ))}
-                            </div>
-                        ) : (
-                            <div className="flex items-center mt-2 bg-White">
-                                <div className="pl-2 bg-White" />
-                            </div>
-                        )}
+       <Link
+            to={`/post/${id}`}>
+             <div
+                className="
+                    shadow-lg
+                    transition
+                    duration-500
+                    ease-in-out
+                    transform
+                    hover:shadow-2xl
+                    justify-between
+                    flex-col
+                    flex
+                    shrink
+                    w-full
+                    h-full
+                    max-w-xs
+                    md:max-w-md
+                    max-h-fit
+                "
+            >
+                <img
+                    alt={title}
+                    src={imageUrl}
+                    className="max-h-40 w-full object-cover rounded-t-lg"
+                />
+                <div className="bg-white w-full h-full p-4 rounded-br-lg rounded-bl-lg">
+                    <div className="flex flex-col justify-between h-full">
+                        {/* title  */}
+                        <div>
+                            <p className="font-Body text-body font-normal mb-2">
+                                {date} | Posted by {author}
+                            </p>
+                            <a
+                                href={link}
+                                className="font-Heading text-h6 font-semibold"
+                            >
+                                {title}
+                            </a>
+                            <p className="font-Body text-body font-normal">
+                                {description}
+                            </p>
+                        </div>
+                        {/* tags  */}
+                        <div>
+                            <a
+                                className="font-Caption text-body font-semibold hover:text-Orange"
+                                href={link}
+                            >
+                                Read More
+                            </a>
+                            {tags ? (
+                                <div className="flex items-center mt-2 flex-wrap gap-2">
+                                    {tags.map((tag: string) => (
+                                        // TODO: change # to tags link
+                                        <a
+                                            href="www.google.com"
+                                            className="px-2 py-2 rounded bg-Orange text-white hover:text-black"
+                                        >
+                                            {tag}
+                                        </a>
+                                    ))}
+                                </div>
+                            ) : (
+                                <div className="flex items-center mt-2 bg-White">
+                                    <div className="pl-2 bg-White" />
+                                </div>
+                            )}
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
+       </Link>
     );
 };
 

src/env.ts

@@ -0,0 +1,14 @@
+require("dotenv").config();
+
+const getEnv = (varName: string, defaultValue?: string): string => {
+  const val = process.env[varName] || defaultValue;
+  if (val) return val;
+  throw new Error(`process.env.${varName} is required but not set`);
+};
+
+export default {
+    VITE_APP_TITLE: getEnv("VITE_APP_TITLE", "OSKM 2022"),
+    GHOST_API_URL: getEnv("GHOST_API_URL", "http://localhost:2368"),
+    GHOST_API_CONTENT_API_KEY: getEnv("GHOST_API_CONTENT_API_KEY"),
+    GHOST_ADMIN_API_KEY: getEnv("GHOST_ADMIN_API_KEY")
+};

src/index.css

@@ -7,6 +7,12 @@
     src: url('./fonts/Magilio.otf');
 }
 
+@font-face {
+    font-family: 'Alegreya';
+    src: url('./fonts/Alegreya-VariableFont_wght.ttf');
+    font-weight: 400 900;
+}
+
 @font-face {
     font-family: 'Alegreya Semibold';
     src: url('./fonts/Alegreya-SemiBold.ttf');

src/pages/Detailpage/Detailpage.tsx

@@ -0,0 +1,134 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+import React from 'react';
+import { 
+    Flex,
+    // Hide,
+    Box,
+    VStack} from "@chakra-ui/react";
+import { DetailpageProps } from '../../types/interface';
+import { DetailPost } from "../../types/types";
+import { parse } from "node-html-parser";
+import useFetch from "../../hooks/useFetch";
+import Render from "./Render";
+import { useParams } from "react-router-dom";
+
+const Detailpage: React.FC<DetailpageProps> = (props) => {
+    const {postId} = useParams();
+    const response = useFetch<any>(`http://localhost:2368/ghost/api/content/posts/${postId}?key=c11259cec5c2cfa1a037f3f5a4&include=tags`);
+    const data = response.data as any;
+    const {isLoading} = response;
+    const {error} = response;
+    const {message} = response;
+    const {posts} = data;
+
+    const renderHTMLContent = React.useCallback(() => {
+        if (posts.length===0) return [];
+
+        const root = parse(posts[0].html);
+        console.table(root);
+        const components: any[] = [];
+        let id: number = 0;
+        root.childNodes.forEach((node: any)=>{
+            if (node.tagName === 'P'){
+                components.push(
+                    Render.paragraph(id, node.outerHTML)
+                );
+            }
+            else if (node.tagName === 'HR'){
+                components.push(
+                    Render.divider()
+                );
+            }
+            else if (node.tagName === 'OL'){
+                components.push(
+                    Render.ol(id, node.innerHTML)
+                );
+            }
+            else if (node.tagName === 'UL'){
+                components.push(
+                    Render.ul(id, node.innerHTML)
+                );
+            }
+            else if (node.tagName === 'DIV'){
+                components.push(
+                    Render.heading(id, node.childNodes[0].text, node.childNodes[1].text)
+                );
+            }
+            else { 
+                components.push(
+                    node.childNodes[0].tagName === 'IMG' ?
+                        Render.image(id, node.childNodes[0].attrs.src) :
+                        Render.video(id, node.childNodes[0].childNodes[0].attrs.style.match(/(https?:\/\/[^\s]+)/g)[0].slice(0,-2), node.childNodes[0].childNodes[0].attrs.src)   
+                );
+            }
+            id+=1;
+        });
+        return components;
+    }, [data]);
+
+    if (isLoading) {
+        return <p>Loading</p>;
+    }
+
+    if (error) {
+        return <p>{message}</p>;
+    }
+
+    return (
+        <Flex
+            background="linear-gradient(180deg, #FF9165 -21.55%, #F9DCB0 100%)">
+            <Flex 
+                width="15%">
+                <Box
+                    width="100%"
+                    height="100%" />
+            </Flex>
+            <Flex
+                marginTop="7%"
+                flexDirection='column'
+                width="70%">
+                <Box
+                    fontFamily='Alegreya'
+                    fontSize={{
+                        base: '14px',
+                        md: '18px'
+                    }}>
+                    {'Home > Category >  Kemahasiswaan'}
+                </Box>
+                <Box
+                    fontFamily='Magilio'
+                    fontSize={{
+                        base: '20px',
+                        md: '35px'
+                    }}>
+                    kitsch 8-bit organic plaid small batch keffiyeh
+                </Box>
+                <Box
+                    fontFamily="Alegreya"
+                    fontSize={{
+                        base: '12px',
+                        md: '18px'
+                    }}>
+                    8 Jul 2022
+                </Box>
+                <VStack
+                    spacing={{
+                        base: '12px',
+                        md: '24px'
+                    }}>
+                    <Box
+                        maxWidth='100%'>
+                        <img 
+                            src="http://localhost:2368/content/images/2022/07/IMG_6351.jpg" 
+                            alt="featured"/>
+                    </Box>
+                    {renderHTMLContent()}
+                </VStack>
+            </Flex>
+            <Flex 
+                width="15%" />
+        </Flex>
+    );
+};
+
+export default Detailpage;