various changes

src/components/shared/brand/header.module.css

@@ -1,6 +1,6 @@
 .header{
     display: flex;
-    background-color: #008BC7;
+    /* background-color: #008BC7; */
     flex-direction: row;
     flex-grow: 0;
 }

src/components/shared/brand/header.tsx

@@ -1,10 +1,10 @@
 import styles from "./header.module.css"
 
 export default function Header() {
-    return <div className={`${styles.header} pp`}>
+    return <div className={`${styles.header} pp bg-primary`}>
         
         <img src="/logo.png" width="80px" height="auto" alt="" />
-        <div className={styles.headertitle}>
+        <div className={`${styles.headertitle}`}>
             <div style={{flexGrow:1}}>Andreas<br/>Schaafsma</div>
             <div>&gt;Software Developer</div>
         </div>

src/components/shared/navigation/navbar.module.css

@@ -1,5 +1,5 @@
 .navbar{
-    background-color: #136D94;
+    /* background-color: #136D94; */
     flex-grow: 0;
 }
 .navItem{

src/components/shared/navigation/navbar.tsx

@@ -5,7 +5,7 @@ const navList = navItems.map(value => <a key={value} className={styles.navItem}>
 
 
 export default function Navbar() {
-    return <nav className={`${styles.navbar}`}>
+    return <nav className={`${styles.navbar} bg-secondary`}>
         <ul>{navList}</ul>
     </nav>
 }

src/components/shared/news/article-preview.tsx

@@ -2,25 +2,50 @@ import Tagbar from "@/components/shared/news/tagbar";
 import styles from "@/components/shared/news/article-preview.module.css"
 
 import bg from "public/placeholder-square.png"
-import { ReactNode } from "react"
+import { DOMElement, JSXElementConstructor, ReactNode } from "react"
 import { Style } from "util";
 import Link from "next/link";
 import { redirect } from 'next/navigation';
 import { Router } from "next/router";
 import { useRouter } from 'next/navigation'
 import { truncateString } from "@/util/Utils";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import { ExampleComponent } from "./article";
+import ReactDOM from "react-dom";
+import renderToString from 'react-dom/server'
+import { jsxToString } from "@/app/lib/jsxtostring";
+import remarkMdx from "remark-mdx";
+import { remark } from "remark";
+import strip from 'remark-mdx-to-plain-text';
+import { Post } from "@/model/Post";
+import { Attributes } from "@sequelize/core";
 
-
+type ArticlePreviewPost = Attributes<Post>
 type Props = {
-    id?:string
-    title?:string
-    content?:string
-    date?:string
+    post:ArticlePreviewPost;
 }
 
- 
+export default async function ArticlePreview(props:Props){
+    const components = { ExampleComponent }
+    const content = ["import ExampleComponent from './article';\n",props.post.content].join('\n');
+    let stripped = ''
+    remark()
+    .use(remarkMdx)
+    .use(strip)
+    .process(content, (err:any, file:any):any => {
+        if (err) throw err
+        // console.log(String(file));
+        stripped=String(file)
+        return String(file)
+    } )
+    console.log(stripped)
 
-export default function ArticlePreview(props:Props){
+    // const parsedMDX = await MDXRemote({source:props.content,components:components});
+    // const b = new ReactDOM.contain
+    // const renderedMDX = ReactDOM.render(parsedMDX,)
+    // console.log(eval(parsedMDX as any))
+    // const a = jsxToString(renderedMDX);
+    // console.log(parsedMDX);
     // if (!props.content)
     return ( 
         <section className={styles.previewbox}>
@@ -28,8 +53,8 @@ export default function ArticlePreview(props:Props){
             
             <div className={`${styles.summary} flex flex-col justify-between p-0`}>
                 <section className="w-[100%]">
-                    <span className="inline-block"><h2><Link href={`/article/${props.id}`}>{props.title}</Link></h2></span>
-                    <p>{truncateString(props.content,255)}</p>
+                    <span className="inline-block"><h2><Link href={`/article/${props.post.id}`}>{props.post.title}</Link></h2></span>
+                    <p>{truncateString(props.post.description? props.post.description : "No Description",255)}</p>
                 </section>
                 <Tagbar/>
             </div>

src/components/shared/news/article.tsx

@@ -4,7 +4,6 @@ import "/public/global.css"
 import "@/app/index.css"
 import styles from "./article.module.css"
 
-import { serialize } from 'next-mdx-remote/serialize'
 import { MDXComponents, MDXContent } from "mdx/types";
 import { MDXRemote } from 'next-mdx-remote/rsc'
 
@@ -20,14 +19,15 @@ export default async function Article(params: { id: string|undefined, title: str
     const components = { ExampleComponent }
     
     return (
-        <article id={`post-${params.id}`}>
-            <h1 className=".article-title pl-5 pr-5">{params.title}</h1>
-            <div className={`${styles.imagecontainer} m-5`}/>
-            <div className="pl-5 pr-5"><Tagbar/></div>
-            <div className=".article-content p-5">
-            <MDXRemote
-            source={params.content?params.content:""} components={components}
-            />
+        <article id={`post-${params.id}`} className="bg-background-800 w-[80%] m-auto">
+            <div id="image-container"  className={`${styles.imagecontainer} flex flex-col`}>
+            <h1  id="article-title" className=".article-title p-5 self-start">{params.title}</h1>
+            <div id="spacer" className="flex flex-grow"></div>
+            <div id="tagbar" className="p-5 self-start"><Tagbar/></div>
+            
+            </div>
+            <div className=".article-content p-5 whitespace-pre">
+            <MDXRemote source={params.content?params.content:""} components={components}/>
             </div>
             <section className=".article-date">{params.date}</section> <br/>
         </article>

src/components/shared/page-container.module.css

@@ -2,7 +2,7 @@
     color: #C0F0FF;
     display:flex;
     flex-direction: row;
-    background-color: #1E536A;
+    /* background-color: #1E536A; */
     padding:8px;
     flex-grow: 1;
 }

src/components/shared/page-container.tsx

@@ -6,7 +6,7 @@ interface Props {
 }
 
 export default function PageContainer(props:Props) {
-    return <div className={`${styles.pagecontainer}`}>
+    return <div className={`${styles.pagecontainer} bg-background`}>
         {props.children}
     </div>;
 }