janis/explainegy-nextjs
0
0
Fork 0
mirror of https://github.com/DerTyp7/explainegy-nextjs.git synced 2026-07-31 07:39:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

d

Browse Source
This commit is contained in:
Janis
2023-01-21 20:32:10 +01:00
parent e048fc5d17
commit bead72cde7
15 changed files with 6320 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/Markdown.tsx
View File

@@ -3,35 +3,50 @@ 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";
import LoadMarkdown from "./articles/[categoryName]/[articleName]/LoadMarkdown";
import oneLight from "react-syntax-highlighter/dist/esm/styles/prism/one-light";
import styles from "../styles/modules/markdown.module.scss";
import remarkGfm from "remark-gfm";
import remarkGemoji from "remark-gemoji";
import remarkStringify from "remark-stringify";
import { useState, useEffect } from "react";
import { useLocalStorage } from "usehooks-ts";
export default function Markdown({ value }: { value: any }) {
return (
<div>
<ReactMarkdown
// eslint-disable-next-line react/no-children-prop
children={value}
className={styles.markdown}
//@ts-ignore
remarkPlugins={[remarkGfm, remarkGemoji, remarkStringify]}
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}
/>
return !inline ? (
<>
<div className={styles.toolbar}>
<div
onClick={() => {
navigator.clipboard.writeText(String(children).replace(/\n$/, ""));
}}
className={styles.copyBtn}
>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z" />
</svg>
</div>
</div>
<SyntaxHighlighter style={oneDark} language={match ? match[1] : ""} PreTag="div" {...props}>
{String(children).replace(/\n$/, "")}
</SyntaxHighlighter>
</>
) : (
<code className={className} {...props}>
{children}
</code>
<code>{children}</code>
);
},
}}
/>
<LoadMarkdown />
>
{value}
</ReactMarkdown>
</div>
);
}

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

@@ -51,7 +51,7 @@ export default function AdminArticlesCreate() {
useEffect(() => {
const fetchCategoryOptions = async () => {
const result: Response = await fetch(urlJoin(apiUrl, `categories`), {
cache: "force-cache",
cache: "no-cache",
next: { revalidate: 60 * 1 },
});
console.log();

41
app/articles/[categoryName]/[articleName]/LoadMarkdown.tsx
View File

@@ -1,41 +0,0 @@
"use client";
import React from "react";
import { useEffect } from "react";
import Prism from "prismjs";
import "../../../../styles/prism_themes/prism-one-dark.css";
//import "../../../styles/prism_themes/prism-one-light.css";
export default function LoadMarkdown() {
useEffect(() => {
document.querySelectorAll("pre").forEach((pre) => {
if (pre.classList.length < 1) {
pre.classList.add("language-");
}
});
document.querySelectorAll("code").forEach((c) => {
if (c.classList.length < 1) {
c.classList.add("language-");
}
});
document.querySelectorAll("blockquote").forEach((bq) => {
bq.classList.add("blockquote");
});
document.querySelectorAll("li").forEach((li) => {
let paragraphText = "";
li.querySelectorAll("p").forEach((p) => {
paragraphText = p.innerHTML;
});
if (paragraphText != "") {
li.innerHTML = paragraphText;
}
});
Prism.highlightAll();
}, []);
return <div></div>;
}

3
app/articles/[categoryName]/[articleName]/layout.tsx
View File

@@ -1,4 +1,3 @@
import "../../../../styles/markdown.scss";
export default function Layout({ children }) {
return <div>{children}</div>;
return <div>{children}</div>;
}

8
app/articles/[categoryName]/[articleName]/page.tsx
View File

@@ -2,7 +2,7 @@ import { marked } from "marked";
import ContentTable from "./ContentTable";
import Sidebar from "./Sidebar";
import styles from "../../../../styles/modules/Article.module.scss";
import LoadMarkdown from "./LoadMarkdown";
import { Article, Category, ContentTableEntry } from "@prisma/client";
import Image from "next/image";
import urlJoin from "url-join";
@@ -23,15 +23,11 @@ export async function GetArticle(articleName: string): Promise<any> {
return result.json();
}
function ParseMarkdown(markdown: string): string {
let result = marked.parse(markdown);
return result;
}
//* MAIN
export default async function ArticlePage({ params }: { params: { articleName: string; categoryName: string } }) {
const articleName: string = params.articleName.toLowerCase().replaceAll("%20", " ");
const article: ArticleWithIncludes = await GetArticle(articleName);
const dateUpdated: Date = new Date(article.dateUpdated);
const dateCreated: Date = new Date(article.dateCreated);
const dateOptions: Intl.DateTimeFormatOptions = { month: "long", day: "numeric", year: "numeric" };

4
app/articles/[categoryName]/page.tsx
View File

@@ -59,7 +59,7 @@ export default async function CategoryPage({ params }: { params: { categoryName:
{
return (
<Link key={i} href={`/articles/${category.name}/${a.name}`}>
{a.name}
{a.title}
</Link>
);
}
@@ -85,7 +85,7 @@ export default async function CategoryPage({ params }: { params: { categoryName:
{
return (
<Link key={i} href={`/articles/${category.name}/${a.name}`}>
{a.name}
{a.title}
</Link>
);
}

2
app/layout.tsx
View File

@@ -10,7 +10,7 @@ import Link from "next/link";
async function getCategories(): Promise<Category[]> {
const result: Response = await fetch(urlJoin(apiUrl, `categories`), {
cache: "force-cache",
cache: "no-cache",
next: { revalidate: 3600 },
});