tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More refactoring:

Browse Source 
- Move markdown rendering to its own component.
This commit is contained in:
Tuan Cao 2022-03-31 15:46:10 +07:00
parent 08bf40fc35
commit bc844bc0fa
4 changed files with 25 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/MDContent.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import Alert from '@mui/material/Alert';
import AlertTitle from '@mui/material/AlertTitle';
function MDContent({content}) {
return (
<div className="markdown-rendered">
<Alert severity="info">
<AlertTitle>Want to know more?</AlertTitle>
🌱 <strong>Follow</strong> or <strong>DM</strong> me on Twitter at <span><a href="https://twitter.com/tuancm">@tuancm</a></span>
</Alert>
<div dangerouslySetInnerHTML={{__html: content}}/>
</div>
);
}
export default MDContent;

2
components/layout.js
View File

@ -2,7 +2,7 @@ import Head from 'next/head'
// import BasicTree from 'lib/MyFolderTree' // import BasicTree from 'lib/MyFolderTree'
export const siteTitle = 'Digital Backroom - An Internet Archive' export const siteTitle = 'Digital Backroom - An Internet Archive'
import {Box} from '@mui/material' import {Box} from '@mui/material'
export default function Layout({children, home}) { export default function Layout({children}) {
return ( return (
<div> <div>

13
pages/index.js
View File

@ -1,24 +1,17 @@
import Layout from "../components/layout"; import Layout from "../components/layout";
import {getSinglePost, getDirectoryData, convertObject, getFlattenArray} from "../lib/utils"; import {getSinglePost, getDirectoryData, convertObject, getFlattenArray} from "../lib/utils";
import FolderTree from "../components/FolderTree"; import FolderTree from "../components/FolderTree";
import Alert from '@mui/material/Alert'; import MDContent from "../components/MDContent";
import AlertTitle from '@mui/material/AlertTitle';
export default function Home({content, tree, flattenNodes}) { export default function Home({content, tree, flattenNodes}) {
return ( return (
<Layout home> <Layout>
<div className = 'container'> <div className = 'container'>
<nav className="nav-bar"> <nav className="nav-bar">
<FolderTree tree={tree} flattenNodes={flattenNodes}/> <FolderTree tree={tree} flattenNodes={flattenNodes}/>
</nav> </nav>
<main className="markdown-rendered"> <MDContent content={note.data}/>
<Alert severity="info">
<AlertTitle>Want to know more?</AlertTitle>
🌱 <strong>Follow</strong> or <strong>DM</strong> me on Twitter at <span><a href="https://twitter.com/tuancm">@tuancm</a></span>
</Alert>
<div dangerouslySetInnerHTML={{__html: content.data}}/>
</main>
</div> </div>
</Layout> </Layout>
); );

15
pages/note/[id].js
View File

@ -3,12 +3,11 @@ import Layout from "../../components/layout";
import {getPostListData, getSinglePost, getGraphData, convertObject, getDirectoryData} from "../../lib/utils"; import {getPostListData, getSinglePost, getGraphData, convertObject, getDirectoryData} from "../../lib/utils";
import FolderTree from "../../components/FolderTree"; import FolderTree from "../../components/FolderTree";
import {getFlattenArray} from "../../lib/utils"; import {getFlattenArray} from "../../lib/utils";
import Alert from '@mui/material/Alert'; import MDContent from "../../components/MDContent";
import AlertTitle from '@mui/material/AlertTitle';
export default function Home({ note, graphdata,tree, flattenNodes, ...props }) { export default function Home({ note, graphdata,tree, flattenNodes}) {
return ( return (
<Layout home> <Layout>
<Head> <Head>
{note.title && <meta name="title" content={note.title} />} {note.title && <meta name="title" content={note.title} />}
</Head> </Head>
@ -16,13 +15,7 @@ export default function Home({ note, graphdata,tree, flattenNodes, ...props }) {
<nav className="nav-bar"> <nav className="nav-bar">
<FolderTree tree={tree} flattenNodes={flattenNodes}/> <FolderTree tree={tree} flattenNodes={flattenNodes}/>
</nav> </nav>
<main className="markdown-rendered"> <MDContent content={note.data}/>
<Alert severity="info">
<AlertTitle>Want to know more?</AlertTitle>
🌱 <strong>Follow</strong> or <strong>DM</strong> me on Twitter at <span><a href="https://twitter.com/tuancm">@tuancm</a></span>
</Alert>
<div dangerouslySetInnerHTML={{__html: note.data}}/>
</main>
</div> </div>
</Layout> </Layout>
); );