andreas/portfolio2023
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

various changes

Browse Source
This commit is contained in:
Andreas Schaafsma
2024-06-17 15:28:57 +02:00
committed by Andreas
parent c3a8469371
commit adc02f2e5b
19 changed files with 268 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/client/admin/PostEditor.tsx
View File

@@ -1,18 +1,26 @@
import { ActionResult } from "@/app/lib/actions/ActionResult";
import { handleActionResult } from "@/app/lib/actions/clientActionHandler";
import { Post } from "@/model/Post";
import { Project } from "@/model/Project";
import { Post, Project, Bucket, PostBucket, Attachment } from "@/model/Models";
import { Attributes } from "@sequelize/core";
import { UUID } from "crypto";
import { ChangeEventHandler, MouseEventHandler, useLayoutEffect, useRef, useState } from "react";
import { Accordion, AccordionBody, AccordionHeader, AccordionItem } from "react-bootstrap";
export type PostTableCallbacks = {
savePost: (p:Partial<Attributes<Post>>)=>any;
closeEditor: ()=>any;
}
type PostEditorBucket = Partial<Attributes<Bucket>> & {
attachments:Partial<Attributes<Attachment>>[]
}
type PostEditorPost = Partial<Attributes<Post>> & {
buckets:PostEditorBucket[]
}
export type EditorProps = {
open:boolean;
post:Partial<Attributes<Post>>;
post:PostEditorPost;
projects?:Attributes<Project>[];
callbacks:PostTableCallbacks;
}
@@ -23,7 +31,7 @@ export default function PostEditor(props:EditorProps){
let [title,setTitle] = useState(props.post?.title)
let [projectID,setProjectID] = useState(props.post?.project_id)
let textbox:any = useRef(undefined);
function adjustHeight() {
if(!textbox.current || !textbox.current.style) return
textbox.current.style.height = "fit-content";
@@ -55,6 +63,31 @@ export default function PostEditor(props:EditorProps){
<option value={0}>unassigned</option>
{props.projects?.map(p=><option value={p.id}>{p.readableIdentifier}</option>)}
</select>
<h2>Attachments</h2>
<table className="table table-striped">
<thead>
<tr><td>Buckets</td></tr>
</thead>
<tbody>
{
(()=>{
let bucketMap:Map<UUID,PostEditorBucket> = new Map(props.post.buckets.map((b)=>[b.id as UUID,b]));
let bucketList = [...props.post.buckets.map((b)=>b.id)];
return bucketList.map((e)=>{
return <tr><Accordion><AccordionItem eventKey={bucketList.indexOf(e).toString()}><AccordionHeader>{e}</AccordionHeader><AccordionBody><ul>{bucketMap.get(e as UUID)?.attachments.map((attachment)=><li>{attachment.filename}</li>)}</ul></AccordionBody></AccordionItem></Accordion></tr>
})
})()
}
<tr>
<td colSpan={4}>
<table className="table mb-0">
...
</table>
</td>
</tr>
...
</tbody>
</table>
<button type="button" className="m-2 btn btn-primary">Preview</button>
<button type="button" className="m-2 btn btn-success" onClick={onClickSaveButton}>Save</button>
<button type="button" className="m-2 btn btn-danger" onClick={onClickCancelButton}>Cancel</button>

8
src/components/server/admin/views/PostView.tsx
View File

@@ -1,14 +1,13 @@
cache: 'no-store'
import { tryFetchPosts } from "@/app/api/post/route";
import { Post } from "@/model/Post";
import { constructAPIUrl } from "@/util/Utils";
import { ReactNode, useEffect } from "react";
import TableGen from "../../../client/TableGen";
import PostTable from "@/components/client/admin/PostTable";
import { deletePost, getPosts, updatePost } from "@/app/lib/actions/entityManagement/postActions";
import { getProjects } from "@/app/lib/actions/entityManagement/projectActions";
import { Project } from "@/model/Project";
import { Bucket, Project, Post, dbSync, Attachment } from "@/model/Models";
type Props = {
children?:ReactNode
@@ -16,6 +15,8 @@ type Props = {
export default async function PostView(props:Props){
await dbSync;
const headings = [
'#',
'Title',
@@ -32,7 +33,8 @@ export default async function PostView(props:Props){
getProjects,
savePost:updatePost
};
const posts:Post[] = await Post.findAll().then(posts=>posts.map((e)=>JSON.parse(JSON.stringify(e))));
const posts:Post[] = await Post.findAll({include: {model: Bucket, include: {model: Attachment}}}).then(posts=>posts.map((e)=>JSON.parse(JSON.stringify(e))));
const projects = await Project.findAll().then(projects=>projects.map((e)=>JSON.parse(JSON.stringify(e))));
return (

2
src/components/shared/brand/header.module.css
View File

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

4
src/components/shared/brand/header.tsx
View File

@@ -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>

2
src/components/shared/navigation/navbar.module.css
View File

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

2
src/components/shared/navigation/navbar.tsx
View File

@@ -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>
}

45
src/components/shared/news/article-preview.tsx
View File

@@ -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>

18
src/components/shared/news/article.tsx
View File

@@ -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>

2
src/components/shared/page-container.module.css
View File

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

2
src/components/shared/page-container.tsx
View File

@@ -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>;
}