Many Changes

src/components/shared/bootstrap.tsx

@@ -0,0 +1,10 @@
+'use client'
+import 'bootstrap/dist/css/bootstrap.css';
+import { useEffect } from 'react';
+
+export default function Bootstrap(Component, children, pageProps){
+    useEffect(() => {
+        typeof document !== undefined ? require('bootstrap/dist/js/bootstrap') : null
+    }, []);
+    return <><div {...pageProps} /></>;
+}

src/components/shared/header.module.css

@@ -0,0 +1,10 @@
+.header{
+    display: flex;
+    background-color: #008BC7;
+    flex-direction: row;
+    flex-grow: 0;
+}
+.headertitle{
+    display:flex;
+    flex-direction: column;
+}

src/components/shared/header.tsx

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

src/components/shared/navbar.module.css

@@ -0,0 +1,8 @@
+.navbar{
+    background-color: #136D94;
+    flex-grow: 0;
+}
+.navItem{
+    margin: 8px;
+    color: white;
+}

src/components/shared/navbar.tsx

@@ -0,0 +1,11 @@
+import styles from "./navbar.module.css"
+
+const navItems = ["News", "Projects", "About Me"];
+const navList = navItems.map(value => <a key={value} className={styles.navItem}>{value}</a>);
+
+
+export default function Navbar() {
+    return <nav className={`${styles.navbar}`}>
+        <ul>{navList}</ul>
+    </nav>
+}

src/components/shared/news/article-preview.module.css

@@ -0,0 +1,26 @@
+.previewbox{
+    display:flex;
+    flex-direction: row;
+    box-sizing: content-box;
+    min-height:128px;
+    padding-top: 0;
+    background-color: #1a4457;
+    /* background-color: aqua; */
+    /* max-width:25vw; */
+    /* outline: auto; */
+
+}
+.imagecontainer{
+    min-width:128px;
+    min-height:100%;
+    /* flex-grow: 10; */
+    background-image: url(/placeholder-square.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+.summary{
+    /* flex-shrink: 1; */
+    padding:8px;
+    padding-top:0px;
+}

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

@@ -0,0 +1,38 @@
+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 { 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";
+
+
+type Props = {
+    id?:string
+    title?:string
+    content?:string
+    date?:string
+}
+
+ 
+
+export default function ArticlePreview(props:Props){
+    // if (!props.content)
+    return ( 
+        <section className={styles.previewbox}>
+            <div className={styles.imagecontainer}></div>
+            
+            <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>
+                </section>
+                <Tagbar/>
+            </div>
+        </section>
+    );
+}

src/components/shared/news/article.module.css

@@ -0,0 +1,24 @@
+.previewbox{
+    display:flex;
+    flex-direction: row;
+    box-sizing: content-box;
+    min-height: 128px;
+    /* background-color: aqua; */
+    /* max-width:25vw; */
+    /* outline: auto; */
+
+}
+.imagecontainer{
+    min-width:fit-content;
+    min-height:256px;
+    /* flex-grow: 10; */
+    background-image: url(/placeholder-square.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: #00000044;
+}
+.summary{
+    /* flex-shrink: 1; */
+    padding:8px;
+}

src/components/shared/news/article.tsx

@@ -0,0 +1,17 @@
+import Tagbar from "@/components/shared/news/tagbar";
+import "/public/global.css"
+import "@/app/index.css"
+import styles from "./article.module.css"
+
+
+export default function Article(params: { id: string|undefined, title: string|undefined, content: string|undefined, date?:string|undefined } ) {
+    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>
+            <p className=".article-content p-5">{params.content}</p>
+            <section className=".article-date">{params.date}</section> <br/>
+        </article>
+    );
+}

src/components/shared/news/tagbar.module.css

@@ -0,0 +1,14 @@
+.tagbar ul li{
+    color:white;
+    background-color: purple;
+    display: inline-block; 
+    zoom: 1; 
+    margin-right:6px;
+    margin-left:0px;
+    padding: 1px 5px 1px 5px;
+    border-radius: 20%;
+    *display: inline; 
+}
+.tagbar{
+    margin: 0px 0px 0px 0px;
+}

src/components/shared/news/tagbar.tsx

@@ -0,0 +1,11 @@
+import styles from "./tagbar.module.css"
+
+const tagItems = ["tag1", "tag2", "tag3"];
+const tagList = tagItems.map(value => <li key={value} className={styles.navItem}><a href={`/tagged/${value}`}>{value}</a></li>);
+
+
+export default function Tagbar() {
+    return <div className={`${styles.tagbar}`}>
+        <ul>{tagList}</ul>
+    </div>;
+}

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

@@ -0,0 +1,8 @@
+.pagecontainer{
+    color: #C0F0FF;
+    display:flex;
+    flex-direction: row;
+    background-color: #1E536A;
+    padding:8px;
+    flex-grow: 1;
+}

src/components/shared/page-container.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from "react"
+import styles from "./page-container.module.css"
+
+interface Props {
+    children: ReactNode;
+}
+
+export default function PageContainer(props:Props) {
+    return <div className={`${styles.pagecontainer}`}>
+        {props.children}
+    </div>;
+}

src/components/shared/page-template.tsx

@@ -0,0 +1,19 @@
+import { ReactNode } from "react"
+import Header from "./header";
+import Navbar from "./navbar";
+import PageContainer from "./page-container";
+
+interface Props {
+    children: ReactNode;
+}
+
+
+export default function PageTemplate(props:Props){
+    return <div className={`root`}>
+        <Header/>
+        <Navbar/>
+        <PageContainer>
+            {props.children}
+        </PageContainer>
+    </div>;
+}

src/components/shared/sidebar.module.css

@@ -0,0 +1,7 @@
+.sidebar{
+    background-color: #1E536A;
+    flex-grow: 0;
+    height:100%;
+    padding: 8px;
+    min-width: 200px;
+}

src/components/shared/sidebar.tsx

@@ -0,0 +1,12 @@
+import styles from "./sidebar.module.css"
+import { ReactNode } from "react"
+
+interface Props{
+    children:ReactNode;
+}
+
+export default function Sidebar(props:Props) {
+    return <div className={`${styles.sidebar}`}>
+        {props.children}
+    </div>
+}