janis/explainegy-nextjs
1
0
Fork 0
mirror of https://github.com/DerTyp7/explainegy-nextjs.git synced 2025-10-29 21:02:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

add markdown component

Browse Source
This commit is contained in:
Janis
2023-01-12 11:56:21 +01:00
parent 8f7092cd72
commit 8db442be0f
8 changed files with 1830 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/Markdown.tsx Normal file
View File

@@ -0,0 +1,37 @@
"use client";
import PropTypes from "prop-types";
import ReactMarkdown from "react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import oneDark from "react-syntax-highlighter/dist/esm/styles/prism/one-dark";
export default function Markdown({ value }: { value: any }) {
return (
<ReactMarkdown
// eslint-disable-next-line react/no-children-prop
children={value}
components={{
code({ node, inline, className, children, ...props }) {
const match = /language-(\w+)/.exec(className || "");
return !inline && match ? (
<SyntaxHighlighter
// eslint-disable-next-line react/no-children-prop
children={String(children).replace(/\n$/, "")}
style={oneDark}
language={match[1]}
PreTag="div"
{...props}
/>
) : (
<code className={className} {...props}>
{children}
</code>
);
},
}}
/>
);
}
Markdown.propTypes = {
value: PropTypes.string.isRequired,
};

63
app/admin/articles/create/page.tsx
View File

@@ -1,9 +1,70 @@
"use client";
import React from "react"; import React from "react";
import { useState, useRef } from "react";
import styles from "../../../../styles/modules/AdminArticlesCreate.module.scss";
import { PostArticle } from "../../../../types/postData";
import Markdown from "../../../Markdown";
export default function AdminArticlesCreate() { export default function AdminArticlesCreate() {
const [formData, setFormData] = useState<PostArticle>(null);
const [markdown, setMarkdown] = useState<string>("");
const titleRef = useRef<HTMLInputElement>(null);
function handleFormChange({ newMarkdownText = markdown }) {
setFormData({
name: titleRef.current.value.replaceAll(" ", "%20"),
title: titleRef.current.value,
introduction: "test intro",
markdown: markdown,
categoryId: 1,
});
setMarkdown(newMarkdownText);
}
async function postData() {
console.log(formData);
await fetch("/api/articles/create", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
});
}
return ( return (
<div> <div className={styles.adminArticlesCreate}>
<h1>Create a new article</h1> <h1>Create a new article</h1>
<button
type="button"
onClick={() => {
postData();
}}
>
send
</button>
<div className={styles.form}>
<div className={styles.ContentTable}>contenttable</div>
<div className={styles.content}>
<input
onChange={() => {
handleFormChange({});
}}
type="text"
name="title"
placeholder="title"
ref={titleRef}
/>
<textarea></textarea>
<Markdown value={markdown} />
</div>
</div>
</div> </div>
); );
} }

1
app/layout.tsx
View File

@@ -22,6 +22,7 @@ export default async function RootLayout({ children }: { children: React.ReactNo
<head></head> <head></head>
<body className="body"> <body className="body">
<p>If admin logged in create a small header here app/layout.tsx</p>
<header> <header>
<Nav categories={await getCategories()} /> <Nav categories={await getCategories()} />
</header> </header>

1751
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@@ -27,6 +27,8 @@
"react": "18.2.0", "react": "18.2.0",
"react-code-blocks": "^0.0.9-0", "react-code-blocks": "^0.0.9-0",
"react-dom": "18.2.0", "react-dom": "18.2.0",
"react-markdown": "^8.0.4",
"react-syntax-highlighter": "^15.5.0",
"reflect-metadata": "^0.1.13", "reflect-metadata": "^0.1.13",
"sass": "^1.57.0", "sass": "^1.57.0",
"typescript": "4.9.4", "typescript": "4.9.4",

12
pages/api/articles/create.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Request, Response } from "express";
import prisma from "../../../lib/prisma";
import { Prisma } from "@prisma/client";
import { Article, Category } from "@prisma/client";
import { ResponseError } from "../../../types/responseErrors";
export default async function handler(req: Request, res: Response) {
res.setHeader("Content-Type", "application/json");
await prisma.article.create({ data: req.body });
console.log();
}

23
styles/modules/AdminArticlesCreate.module.scss Normal file
View File

@@ -0,0 +1,23 @@
@import "../variables.scss";
.adminArticlesCreate {
.form {
display: grid;
gap: 70px;
grid-template-columns: $tutorial-content-table-width minmax(0px, 1fr);
margin: 0px auto;
max-width: 1800px;
padding: 0px 24px;
.content {
display: flex;
flex-direction: column;
textarea {
color: var(--font-color);
background-color: rgba(16, 16, 16, 0.234);
width: 100%;
min-height: 500px;
}
}
}
}

8
types/postData.tsx Normal file
View File

@@ -0,0 +1,8 @@
export interface PostArticle {
name: string;
title: string;
markdown: string;
introduction: string;
categoryId: number;
imageId?: number;
}