WIP: Render backlink in MarkDown content component.
This commit is contained in:
Tuan Cao
parent
930d7bf48d
commit
b47d1053d8
@ -2,9 +2,29 @@ import React from 'react';
|
||||
import Alert from '@mui/material/Alert';
|
||||
import AlertTitle from '@mui/material/AlertTitle';
|
||||
import {useRouter} from 'next/router'
|
||||
import {Transformer} from "../lib/transformer";
|
||||
import Link from 'next/link'
|
||||
|
||||
function MDContent({content,fileNames, handleOpenNewContent}) {
|
||||
function BackLinks({linkList}) {
|
||||
|
||||
return (<ul>
|
||||
{
|
||||
(linkList != null && linkList.length > 0)
|
||||
?
|
||||
linkList.map(aLink =>
|
||||
<li>
|
||||
<Link href={aLink.link}>
|
||||
<a>
|
||||
{aLink.title}
|
||||
</a>
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
: <h1>No Back link found</h1>
|
||||
}
|
||||
</ul>);
|
||||
}
|
||||
|
||||
function MDContent({content, fileNames, backLinks, handleOpenNewContent}) {
|
||||
|
||||
function handleInternalLinkClick() {
|
||||
//Processing fetching
|
||||
@ -12,17 +32,23 @@ function MDContent({content,fileNames, handleOpenNewContent}) {
|
||||
//TODO: handle clicking on internal link, go fetching md content from file then passing it up to parent
|
||||
handleOpenNewContent(content)
|
||||
}
|
||||
|
||||
const router = useRouter();
|
||||
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}}/>
|
||||
<button onClick={handleInternalLinkClick}>Click me </button>
|
||||
</div>
|
||||
<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}}/>
|
||||
<button onClick={handleInternalLinkClick}>Click me</button>
|
||||
<hr/>
|
||||
<div>
|
||||
<BackLinks linkList={backLinks}/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -8,11 +8,6 @@ import html from "remark-html";
|
||||
import frontmatter from "remark-frontmatter";
|
||||
import externalLinks from "remark-external-links";
|
||||
import highlight from "remark-highlight.js";
|
||||
import remarkRehype from 'remark-rehype'
|
||||
import rehypeStringify from 'rehype-stringify'
|
||||
import {createElement, Fragment, useEffect, useState} from 'react'
|
||||
import rehypeReact from 'rehype-react'
|
||||
import CustomLink from "../components/CustomLink";
|
||||
|
||||
const postsDirectory = path.join(process.cwd(), 'posts')
|
||||
const isFile = fileName => {
|
||||
@ -29,11 +24,9 @@ export const Transformer = {
|
||||
if (indexOfFirst === -1) {
|
||||
return false
|
||||
}
|
||||
var indexOfSecond = content.indexOf("---", (indexOfFirst + 1))
|
||||
if (indexOfSecond !== -1) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
let indexOfSecond = content.indexOf("---", (indexOfFirst + 1));
|
||||
return indexOfSecond !== -1;
|
||||
|
||||
},
|
||||
getFrontMatterData: function (filecontent) {
|
||||
if (Transformer.haveFrontMatter(filecontent)) {
|
||||
@ -42,44 +35,41 @@ export const Transformer = {
|
||||
return {}
|
||||
},
|
||||
|
||||
|
||||
getProcessor : function (content, {fileNames}) {
|
||||
getHtmlContent: function (content, {fileNames}) {
|
||||
let htmlContent = []
|
||||
let internalLinks = []
|
||||
return unified()
|
||||
const sanitizedContent = Transformer.preprocessThreeDashes(content)
|
||||
|
||||
unified()
|
||||
.use(markdown, {gfm: true})
|
||||
.use(highlight)
|
||||
.use(externalLinks, {target: "_blank", rel: ['noopener']})
|
||||
.use(frontmatter, ['yaml', 'toml'])
|
||||
.use(wikiLinkPlugin, {
|
||||
permalinks:fileNames,
|
||||
pageResolver: function(pageName){
|
||||
const name = [Transformer.parseFileNameFromPath(pageName)]
|
||||
//console.log("\n\nwiki internal links", Transformer.parseFileNameFromPath(name[0]));
|
||||
internalLinks.push(Transformer.parseFileNameFromPath(name[0]));
|
||||
return name
|
||||
},
|
||||
hrefTemplate: function(permalink){
|
||||
permalink = Transformer.normalizeFileName(permalink)
|
||||
permalink = permalink.replace("ç","c").replace("ı","i").replace("ş","s")
|
||||
//console.log("wiki pemalink", permalink);
|
||||
return `/note/${permalink}`
|
||||
},
|
||||
permalinks:fileNames,
|
||||
pageResolver: function(pageName){
|
||||
const name = [Transformer.parseFileNameFromPath(pageName)]
|
||||
//console.log("\n\nwiki internal links", Transformer.parseFileNameFromPath(name[0]));
|
||||
|
||||
aliasDivider:"|"
|
||||
})
|
||||
.use(remarkRehype)
|
||||
const backLink = {
|
||||
title: name,
|
||||
link: Transformer.parseFileNameFromPath(name[0]),
|
||||
shortSummary: name
|
||||
}
|
||||
|
||||
internalLinks.push(backLink);
|
||||
return name
|
||||
},
|
||||
hrefTemplate: function(permalink){
|
||||
permalink = Transformer.normalizeFileName(permalink)
|
||||
permalink = permalink.replace("ç","c").replace("ı","i").replace("ş","s")
|
||||
//console.log("wiki pemalink", permalink);
|
||||
return `/note/${permalink}`
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
getHtmlContent: function (content, {fileNames}) {
|
||||
let htmlContent = []
|
||||
let internalLinks = []
|
||||
const sanitizedContent = Transformer.preprocessThreeDashes(content)
|
||||
Transformer.getProcessor(content, fileNames)
|
||||
// .use(rehypeReact, {createElement, Fragment})
|
||||
.use(rehypeStringify)
|
||||
aliasDivider:"|"
|
||||
})
|
||||
.use(html)
|
||||
.process(sanitizedContent,
|
||||
function (err, file) {
|
||||
//console.log("asd", String(file).slice(0,50))
|
||||
@ -89,7 +79,6 @@ export const Transformer = {
|
||||
)
|
||||
htmlContent = htmlContent.join("")
|
||||
htmlContent = htmlContent.split("---")
|
||||
//console.log("ffffff ", htmlContent)
|
||||
return [htmlContent, internalLinks]
|
||||
},
|
||||
|
||||
@ -158,10 +147,8 @@ export const Transformer = {
|
||||
//console.log("----", providedSanitizedFileName, possibleSanitizedFileName)
|
||||
|
||||
//console.log("---", possibleSanitizedFileName, providedSanitizedFileName)
|
||||
if (providedSanitizedFileName === possibleSanitizedFileName) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
return providedSanitizedFileName === possibleSanitizedFileName;
|
||||
|
||||
})
|
||||
console.log("p---", possibleFilePath)
|
||||
return possibleFilePath[0]
|
||||
|
||||
15
lib/utils.js
15
lib/utils.js
@ -3,18 +3,6 @@ import {Node} from "./node"
|
||||
import {Transformer} from "./transformer";
|
||||
|
||||
const dirTree = require("directory-tree");
|
||||
|
||||
function pathSelector(filename, allFilePaths){
|
||||
if (filename.replace(".md", "") === "index"){
|
||||
return "/index.md"
|
||||
}
|
||||
else if (filename.replace(".md", "") === "sidebar"){
|
||||
return "/sidebar.md"
|
||||
}
|
||||
return allFilePaths.filter(f => !(f.endsWith("index.md") && f.endsWith("sidebar.md")))
|
||||
}
|
||||
|
||||
|
||||
const postsDirectory = path.join(process.cwd(), 'posts')
|
||||
|
||||
export function getAllFileNames() {
|
||||
@ -63,7 +51,8 @@ export function getSinglePost(filename) {
|
||||
return {
|
||||
id:filename,
|
||||
...currentFileFrontMatter,
|
||||
data:htmlContent
|
||||
data:htmlContent,
|
||||
backLinks: backlinks
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -10,43 +10,46 @@ import {
|
||||
} from "../../lib/utils";
|
||||
import FolderTree from "../../components/FolderTree";
|
||||
import {getFlattenArray} from "../../lib/utils";
|
||||
import MDContainer from "../../components/MDContainer";
|
||||
import {Transformer} from "../../lib/transformer";
|
||||
import MDContent from "../../components/MDContent";
|
||||
|
||||
export default function Home({ note, fileNames,tree, flattenNodes}) {
|
||||
export default function Home({note, backLinks, fileNames, tree, flattenNodes}) {
|
||||
return (
|
||||
<Layout>
|
||||
<Head>
|
||||
{note.title && <meta name="title" content={note.title} />}
|
||||
{note.title && <meta name="title" content={note.title}/>}
|
||||
</Head>
|
||||
<div className = 'container'>
|
||||
<div className='container'>
|
||||
<nav className="nav-bar">
|
||||
<FolderTree tree={tree} flattenNodes={flattenNodes}/>
|
||||
</nav>
|
||||
<MDContainer post={note.data} fileNames = {fileNames}/>
|
||||
<MDContent content={note.data} fileNames={fileNames} handleOpenNewContent={null} backLinks={backLinks}/>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export async function getStaticPaths() {
|
||||
const allPostsData = getPostListData();
|
||||
const paths = allPostsData.map(p => ({params: {id:p}}))
|
||||
const paths = allPostsData.map(p => ({params: {id: p}}))
|
||||
return {
|
||||
paths,
|
||||
fallback:false
|
||||
paths,
|
||||
fallback: false
|
||||
};
|
||||
}
|
||||
export async function getStaticProps({ params }) {
|
||||
}
|
||||
|
||||
export function getStaticProps({params}) {
|
||||
const note = getSinglePost(params.id);
|
||||
const tree = convertObject(getDirectoryData());
|
||||
const flattenNodes = getFlattenArray(tree)
|
||||
const fileNames = getAllFileNames()
|
||||
|
||||
return {
|
||||
props: {
|
||||
note,
|
||||
tree: tree,
|
||||
flattenNodes: flattenNodes,
|
||||
fileNames: fileNames
|
||||
fileNames: fileNames,
|
||||
backLinks: note.backLinks
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user