diff --git a/components/MDContent.js b/components/MDContent.js index 2a6a222..a649c1b 100644 --- a/components/MDContent.js +++ b/components/MDContent.js @@ -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 (); +} + +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 ( -
- - Want to know more? - 🌱 Follow or DM me on Twitter at @tuancm - -
- -
+
+ + Want to know more? + 🌱 Follow or DM me on Twitter at @tuancm + +
+ +
+
+ +
+
); } diff --git a/lib/transformer.js b/lib/transformer.js index 8a58a03..2ddb956 100644 --- a/lib/transformer.js +++ b/lib/transformer.js @@ -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] diff --git a/lib/utils.js b/lib/utils.js index b6c1680..b4fbaaa 100644 --- a/lib/utils.js +++ b/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 } } diff --git a/pages/note/[id].js b/pages/note/[id].js index 87dce75..2b5beb7 100644 --- a/pages/note/[id].js +++ b/pages/note/[id].js @@ -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 ( - {note.title && } + {note.title && } -
+
- +
); } + 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 }, }; }