implemented jump feature to toc, removed marked dependency, changed white link class name, removed unused css, moved toc data from map to individual json files
This commit is contained in:
parent
c59e4f31e2
commit
a04ded5506
6 changed files with 134 additions and 71 deletions
|
|
@ -14,7 +14,8 @@ import matter from "gray-matter" // parse markdown metadata
|
|||
import toc from "markdown-toc" // table of contents generation
|
||||
import markdownIt from "markdown-it" // rendering markdown
|
||||
import hljs from "highlight.js" // code block highlighting
|
||||
import tm from "markdown-it-texmath" // rendering mathematical expression
|
||||
import markdownItTexMath from "markdown-it-texmath" // rendering mathematical expression
|
||||
import markdownItAnchor from "markdown-it-anchor" // markdown anchor
|
||||
import katex from "katex" // rendering mathematical expression
|
||||
|
||||
const markdownPath = "./markdown" // where it will look for markdown documents
|
||||
|
|
@ -49,7 +50,6 @@ interface Map {
|
|||
title: string
|
||||
date: string
|
||||
tags: string[]
|
||||
toc: string
|
||||
preview: string
|
||||
}
|
||||
}
|
||||
|
|
@ -58,7 +58,6 @@ interface Map {
|
|||
series: {
|
||||
[key: string]: {
|
||||
title: string
|
||||
toc: string // in series home page and ≡ (3 horizontal line) button
|
||||
length: number
|
||||
order: string[] // url order
|
||||
tags: string[]
|
||||
|
|
@ -112,11 +111,13 @@ const md = markdownIt({
|
|||
return "" // use external default escaping
|
||||
},
|
||||
html: true,
|
||||
}).use(tm, {
|
||||
engine: katex,
|
||||
delimiters: "dollars",
|
||||
katexOptions: { macros: { "\\RR": "\\mathbb{R}" } },
|
||||
})
|
||||
.use(markdownItTexMath, {
|
||||
engine: katex,
|
||||
delimiters: "dollars",
|
||||
katexOptions: { macros: { "\\RR": "\\mathbb{R}" } },
|
||||
})
|
||||
.use(markdownItAnchor, {})
|
||||
|
||||
// converts file path to url
|
||||
function path2URL(pathToConvert: string): string {
|
||||
|
|
@ -156,12 +157,7 @@ function writeToJSON(JSONFilePath: string, dataToWrite: string) {
|
|||
})
|
||||
|
||||
// write content to json file
|
||||
fs.writeFileSync(
|
||||
JSONFilePath,
|
||||
JSON.stringify({
|
||||
content: dataToWrite.trim(),
|
||||
})
|
||||
)
|
||||
fs.writeFileSync(JSONFilePath, dataToWrite)
|
||||
}
|
||||
|
||||
// A recursive function that calls itself for every files and directories that it finds
|
||||
|
|
@ -236,7 +232,10 @@ function recursiveParse(
|
|||
|
||||
writeToJSON(
|
||||
`${contentDirectoryPath}${urlPath}.json`,
|
||||
markdownData.content
|
||||
JSON.stringify({
|
||||
content: markdownData.content,
|
||||
toc: toc(markdownRaw).json,
|
||||
})
|
||||
)
|
||||
|
||||
// Parse data that will be written to map.js
|
||||
|
|
@ -247,7 +246,6 @@ function recursiveParse(
|
|||
readTime: humanizedDuration,
|
||||
wordCount: totalWords,
|
||||
tags: [],
|
||||
toc: toc(markdownRaw).content,
|
||||
}
|
||||
|
||||
// content preview
|
||||
|
|
@ -304,7 +302,9 @@ function recursiveParse(
|
|||
|
||||
writeToJSON(
|
||||
`${contentDirectoryPath}/unsearchable${urlPath}.json`,
|
||||
markdownData.content
|
||||
JSON.stringify({
|
||||
content: markdownData.content,
|
||||
})
|
||||
)
|
||||
|
||||
// Parse data that will be written to map.js
|
||||
|
|
@ -337,7 +337,10 @@ function recursiveParse(
|
|||
|
||||
writeToJSON(
|
||||
`${contentDirectoryPath}${urlPath}.json`,
|
||||
markdownData.content
|
||||
JSON.stringify({
|
||||
content: markdownData.content,
|
||||
toc: toc(markdownRaw).json,
|
||||
})
|
||||
)
|
||||
|
||||
// Parse data that will be written to map.js
|
||||
|
|
@ -348,7 +351,6 @@ function recursiveParse(
|
|||
readTime: humanizedDuration,
|
||||
wordCount: totalWords,
|
||||
tags: [],
|
||||
toc: toc(markdownData.content).content,
|
||||
}
|
||||
|
||||
// content preview
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||
"@types/elasticlunr": "^0.9.2",
|
||||
"@types/highlight.js": "^10.1.0",
|
||||
"@types/react-router-hash-link": "^2.4.1",
|
||||
"date-fns": "^2.23.0",
|
||||
"elasticlunr": "^0.9.5",
|
||||
"gray-matter": "^4.0.3",
|
||||
|
|
@ -30,9 +31,10 @@
|
|||
"katex": "^0.13.13",
|
||||
"local-storage-fallback": "^4.1.2",
|
||||
"markdown-it": "^12.2.0",
|
||||
"markdown-it-anchor": "^8.1.2",
|
||||
"markdown-it-attrs": "^4.0.0",
|
||||
"markdown-it-texmath": "^0.9.1",
|
||||
"markdown-toc": "^1.2.0",
|
||||
"marked": "^2.1.3",
|
||||
"query-string": "^7.0.1",
|
||||
"react": "^17.0.2",
|
||||
"react-collapse": "^5.1.0",
|
||||
|
|
@ -41,6 +43,7 @@
|
|||
"react-dom": "^17.0.2",
|
||||
"react-helmet-async": "^1.0.9",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-router-hash-link": "^2.4.3",
|
||||
"react-scripts": "^4.0.3",
|
||||
"react-tooltip": "^4.2.21",
|
||||
"read-time-estimate": "^0.0.3",
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ html, body, #root {
|
|||
margin: 0;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
line-height: 1.5rem;
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
light: theming.light.backgroundColor1,
|
||||
|
|
@ -161,7 +162,7 @@ table tr:nth-child(even){
|
|||
})};
|
||||
}
|
||||
|
||||
.link-color a {
|
||||
.white-link a {
|
||||
text-decoration: none;
|
||||
color: ${theming.color.linkColor};
|
||||
|
||||
|
|
@ -170,10 +171,6 @@ table tr:nth-child(even){
|
|||
}
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background-color: ${(props) =>
|
||||
theming.theme(props.theme.currentTheme, {
|
||||
|
|
@ -344,7 +341,7 @@ export default class App extends React.Component<AppProps, AppState> {
|
|||
|
||||
<Route exact path="/:path*">
|
||||
{({ match }) => (
|
||||
<Page key={match.params.path} />
|
||||
<Page key={match?.params.path} />
|
||||
)}
|
||||
</Route>
|
||||
</Switch>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React from "react"
|
||||
import marked from "marked"
|
||||
import styled from "styled-components"
|
||||
import { Link } from "react-router-dom"
|
||||
|
||||
|
|
@ -118,9 +117,9 @@ export default class PostCard extends React.Component<PostCardProps> {
|
|||
|
||||
<hr />
|
||||
<StyledPostCardContent
|
||||
className="link-color"
|
||||
className="white-link"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: marked(this.props.postData.preview),
|
||||
__html: this.props.postData.preview,
|
||||
}}
|
||||
></StyledPostCardContent>
|
||||
<small>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React from "react"
|
||||
import marked from "marked"
|
||||
import { Helmet } from "react-helmet-async"
|
||||
import { Link } from "react-router-dom"
|
||||
import styled from "styled-components"
|
||||
import { HashLink } from "react-router-hash-link"
|
||||
import { Collapse } from "react-collapse"
|
||||
import storage from "local-storage-fallback"
|
||||
|
||||
|
|
@ -92,6 +92,22 @@ const StyledCollapseContainer = styled.div`
|
|||
}
|
||||
`
|
||||
|
||||
function parseToc(json) {
|
||||
console.log(json)
|
||||
|
||||
return (
|
||||
<ol>
|
||||
{json.map((elem) => (
|
||||
<li key={elem.slug}>
|
||||
<HashLink smooth to={location.pathname + "#" + elem.slug}>
|
||||
{elem.content}
|
||||
</HashLink>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
)
|
||||
}
|
||||
|
||||
interface PageProps {}
|
||||
|
||||
interface PageState {
|
||||
|
|
@ -203,11 +219,15 @@ export default class Page extends React.Component<PageProps, PageState> {
|
|||
}
|
||||
|
||||
const fetched_content = _isUnsearchable
|
||||
? (await import(`../data/content/unsearchable${url}.json`)).content
|
||||
: (await import(`../data/content${url}.json`)).content
|
||||
? await import(`../data/content/unsearchable${url}.json`)
|
||||
: await import(`../data/content${url}.json`)
|
||||
|
||||
fetchedPage.content = fetched_content ? fetched_content : "No content"
|
||||
fetchedPage.toc = fetchedPage?.toc ? fetchedPage.toc : undefined
|
||||
fetchedPage.content = fetched_content.content
|
||||
? fetched_content.content
|
||||
: "No content"
|
||||
fetchedPage.toc = fetched_content.toc
|
||||
? parseToc(fetched_content.toc)
|
||||
: undefined
|
||||
fetchedPage.title = fetchedPage?.title ? fetchedPage.title : "No title"
|
||||
if (!_isUnsearchable) {
|
||||
fetchedPage.date = fetchedPage?.date
|
||||
|
|
@ -301,47 +321,47 @@ export default class Page extends React.Component<PageProps, PageState> {
|
|||
|
||||
<hr />
|
||||
|
||||
<StyledTocToggleButton
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
isTocOpened: !this.state.isTocOpened,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<strong>Table of Content </strong>
|
||||
{this.state.isTocOpened ? (
|
||||
<FontAwesomeIcon icon={faCaretUp} />
|
||||
) : (
|
||||
<FontAwesomeIcon icon={faCaretDown} />
|
||||
)}
|
||||
</StyledTocToggleButton>
|
||||
{
|
||||
// add table of contents if it exists
|
||||
this.state.fetchedPage.toc && (
|
||||
<StyledCollapseContainer>
|
||||
<Collapse isOpened={this.state.isTocOpened}>
|
||||
<div>
|
||||
<div
|
||||
className="link-color"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: marked(
|
||||
this.state.fetchedPage
|
||||
.toc
|
||||
),
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
</Collapse>
|
||||
</StyledCollapseContainer>
|
||||
<>
|
||||
<StyledTocToggleButton
|
||||
onClick={() => {
|
||||
this.setState({
|
||||
isTocOpened:
|
||||
!this.state.isTocOpened,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<strong>Table of Content </strong>
|
||||
{this.state.isTocOpened ? (
|
||||
<FontAwesomeIcon icon={faCaretUp} />
|
||||
) : (
|
||||
<FontAwesomeIcon
|
||||
icon={faCaretDown}
|
||||
/>
|
||||
)}
|
||||
</StyledTocToggleButton>
|
||||
<StyledCollapseContainer>
|
||||
<Collapse
|
||||
isOpened={this.state.isTocOpened}
|
||||
>
|
||||
<div className="white-link">
|
||||
{this.state.fetchedPage.toc}
|
||||
</div>
|
||||
</Collapse>
|
||||
</StyledCollapseContainer>
|
||||
<hr />
|
||||
</>
|
||||
)
|
||||
}
|
||||
<hr />
|
||||
|
||||
<div
|
||||
className="link-color"
|
||||
className="white-link"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: marked(this.state.fetchedPage.content),
|
||||
__html: this.state.fetchedPage.content,
|
||||
}}
|
||||
></div>
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1840,6 +1840,11 @@
|
|||
dependencies:
|
||||
highlight.js "*"
|
||||
|
||||
"@types/history@*":
|
||||
version "4.7.9"
|
||||
resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724"
|
||||
integrity sha512-MUc6zSmU3tEVnkQ78q0peeEjKWPUADMlC/t++2bI8WnAG2tvYRPIgHG8lWkXwqc8MsUF6Z2MOf+Mh5sazOmhiQ==
|
||||
|
||||
"@types/hoist-non-react-statics@*":
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
|
||||
|
|
@ -1929,6 +1934,31 @@
|
|||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react-router-dom@*":
|
||||
version "5.1.8"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.8.tgz#bf3e1c8149b3d62eaa206d58599de82df0241192"
|
||||
integrity sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==
|
||||
dependencies:
|
||||
"@types/history" "*"
|
||||
"@types/react" "*"
|
||||
"@types/react-router" "*"
|
||||
|
||||
"@types/react-router-hash-link@^2.4.1":
|
||||
version "2.4.1"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-router-hash-link/-/react-router-hash-link-2.4.1.tgz#9e5da328817e12f489a2005613857cbf50127e61"
|
||||
integrity sha512-SPVymyscQUBWMAPEpAn3I35MQXarTx0rOPmcfHl1xWYaTSDP5kxQnrFjmMxJlX5mjIPVHb3XBm8t6DTQNjkGEQ==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
"@types/react-router-dom" "*"
|
||||
|
||||
"@types/react-router@*":
|
||||
version "5.1.16"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.16.tgz#f3ba045fb96634e38b21531c482f9aeb37608a99"
|
||||
integrity sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==
|
||||
dependencies:
|
||||
"@types/history" "*"
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react@*":
|
||||
version "17.0.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.5.tgz#3d887570c4489011f75a3fc8f965bf87d09a1bea"
|
||||
|
|
@ -7645,6 +7675,16 @@ map-visit@^1.0.0:
|
|||
dependencies:
|
||||
object-visit "^1.0.0"
|
||||
|
||||
markdown-it-anchor@^8.1.2:
|
||||
version "8.1.2"
|
||||
resolved "https://registry.yarnpkg.com/markdown-it-anchor/-/markdown-it-anchor-8.1.2.tgz#1f26b102005cb7750d5159d06ba3cfa9400ebc3d"
|
||||
integrity sha512-9D58TKK4dakqmjcmVuqHoB3ntKBpQJ0Ld38B83aiHJcBD72IZIyPjNtihPA6ayRI5WD33e1W68mArliNLHCprg==
|
||||
|
||||
markdown-it-attrs@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/markdown-it-attrs/-/markdown-it-attrs-4.0.0.tgz#eadae3ea0c7d17c5e83b98a4ec95a47f4e4960f5"
|
||||
integrity sha512-uLjtdCmhhmL3BuZsReYkFxk74qKjj5ahe34teBpOCJ4hYZZl7/ftLyXWLowngC2moRkbLEvKwN/7TMwbhbHE/A==
|
||||
|
||||
markdown-it-texmath@^0.9.1:
|
||||
version "0.9.1"
|
||||
resolved "https://registry.yarnpkg.com/markdown-it-texmath/-/markdown-it-texmath-0.9.1.tgz#fdf1442afbca474e9170b9707b6155125384bae2"
|
||||
|
|
@ -7684,11 +7724,6 @@ markdown-toc@^1.2.0:
|
|||
repeat-string "^1.6.1"
|
||||
strip-color "^0.1.0"
|
||||
|
||||
marked@^2.1.3:
|
||||
version "2.1.3"
|
||||
resolved "https://registry.yarnpkg.com/marked/-/marked-2.1.3.tgz#bd017cef6431724fd4b27e0657f5ceb14bff3753"
|
||||
integrity sha512-/Q+7MGzaETqifOMWYEA7HVMaZb4XbcRfaOzcSsHZEith83KGlvaSG33u0SKu89Mj5h+T8V2hM+8O45Qc5XTgwA==
|
||||
|
||||
math-random@^1.0.1:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c"
|
||||
|
|
@ -9794,6 +9829,13 @@ react-router-dom@^5.2.0:
|
|||
tiny-invariant "^1.0.2"
|
||||
tiny-warning "^1.0.0"
|
||||
|
||||
react-router-hash-link@^2.4.3:
|
||||
version "2.4.3"
|
||||
resolved "https://registry.yarnpkg.com/react-router-hash-link/-/react-router-hash-link-2.4.3.tgz#570824d53d6c35ce94d73a46c8e98673a127bf08"
|
||||
integrity sha512-NU7GWc265m92xh/aYD79Vr1W+zAIXDWp3L2YZOYP4rCqPnJ6LI6vh3+rKgkidtYijozHclaEQTAHaAaMWPVI4A==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
|
||||
react-router@5.2.0:
|
||||
version "5.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue