pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

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

Browse source
This commit is contained in:
Kim, Jimin 2021-08-10 15:55:13 +09:00
parent c59e4f31e2
commit a04ded5506
6 changed files with 134 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

38
source/generate.ts
View file

@ -14,7 +14,8 @@ import matter from "gray-matter" // parse markdown metadata
import toc from "markdown-toc" // table of contents generation import toc from "markdown-toc" // table of contents generation
import markdownIt from "markdown-it" // rendering markdown import markdownIt from "markdown-it" // rendering markdown
import hljs from "highlight.js" // code block highlighting 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 import katex from "katex" // rendering mathematical expression
const markdownPath = "./markdown" // where it will look for markdown documents const markdownPath = "./markdown" // where it will look for markdown documents
@ -49,7 +50,6 @@ interface Map {
title: string title: string
date: string date: string
tags: string[] tags: string[]
toc: string
preview: string preview: string
} }
} }
@ -58,7 +58,6 @@ interface Map {
series: { series: {
[key: string]: { [key: string]: {
title: string title: string
toc: string // in series home page and ≡ (3 horizontal line) button
length: number length: number
order: string[] // url order order: string[] // url order
tags: string[] tags: string[]
@ -112,11 +111,13 @@ const md = markdownIt({
return "" // use external default escaping return "" // use external default escaping
}, },
html: true, 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 // converts file path to url
function path2URL(pathToConvert: string): string { function path2URL(pathToConvert: string): string {
@ -156,12 +157,7 @@ function writeToJSON(JSONFilePath: string, dataToWrite: string) {
}) })
// write content to json file // write content to json file
fs.writeFileSync( fs.writeFileSync(JSONFilePath, dataToWrite)
JSONFilePath,
JSON.stringify({
content: dataToWrite.trim(),
})
)
} }
// A recursive function that calls itself for every files and directories that it finds // A recursive function that calls itself for every files and directories that it finds
@ -236,7 +232,10 @@ function recursiveParse(
writeToJSON( writeToJSON(
`${contentDirectoryPath}${urlPath}.json`, `${contentDirectoryPath}${urlPath}.json`,
markdownData.content JSON.stringify({
content: markdownData.content,
toc: toc(markdownRaw).json,
})
) )
// Parse data that will be written to map.js // Parse data that will be written to map.js
@ -247,7 +246,6 @@ function recursiveParse(
readTime: humanizedDuration, readTime: humanizedDuration,
wordCount: totalWords, wordCount: totalWords,
tags: [], tags: [],
toc: toc(markdownRaw).content,
} }
// content preview // content preview
@ -304,7 +302,9 @@ function recursiveParse(
writeToJSON( writeToJSON(
`${contentDirectoryPath}/unsearchable${urlPath}.json`, `${contentDirectoryPath}/unsearchable${urlPath}.json`,
markdownData.content JSON.stringify({
content: markdownData.content,
})
) )
// Parse data that will be written to map.js // Parse data that will be written to map.js
@ -337,7 +337,10 @@ function recursiveParse(
writeToJSON( writeToJSON(
`${contentDirectoryPath}${urlPath}.json`, `${contentDirectoryPath}${urlPath}.json`,
markdownData.content JSON.stringify({
content: markdownData.content,
toc: toc(markdownRaw).json,
})
) )
// Parse data that will be written to map.js // Parse data that will be written to map.js
@ -348,7 +351,6 @@ function recursiveParse(
readTime: humanizedDuration, readTime: humanizedDuration,
wordCount: totalWords, wordCount: totalWords,
tags: [], tags: [],
toc: toc(markdownData.content).content,
} }
// content preview // content preview

5
source/package.json
View file

@ -23,6 +23,7 @@
"@fortawesome/react-fontawesome": "^0.1.14", "@fortawesome/react-fontawesome": "^0.1.14",
"@types/elasticlunr": "^0.9.2", "@types/elasticlunr": "^0.9.2",
"@types/highlight.js": "^10.1.0", "@types/highlight.js": "^10.1.0",
"@types/react-router-hash-link": "^2.4.1",
"date-fns": "^2.23.0", "date-fns": "^2.23.0",
"elasticlunr": "^0.9.5", "elasticlunr": "^0.9.5",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
@ -30,9 +31,10 @@
"katex": "^0.13.13", "katex": "^0.13.13",
"local-storage-fallback": "^4.1.2", "local-storage-fallback": "^4.1.2",
"markdown-it": "^12.2.0", "markdown-it": "^12.2.0",
"markdown-it-anchor": "^8.1.2",
"markdown-it-attrs": "^4.0.0",
"markdown-it-texmath": "^0.9.1", "markdown-it-texmath": "^0.9.1",
"markdown-toc": "^1.2.0", "markdown-toc": "^1.2.0",
"marked": "^2.1.3",
"query-string": "^7.0.1", "query-string": "^7.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-collapse": "^5.1.0", "react-collapse": "^5.1.0",
@ -41,6 +43,7 @@
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-helmet-async": "^1.0.9", "react-helmet-async": "^1.0.9",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-router-hash-link": "^2.4.3",
"react-scripts": "^4.0.3", "react-scripts": "^4.0.3",
"react-tooltip": "^4.2.21", "react-tooltip": "^4.2.21",
"read-time-estimate": "^0.0.3", "read-time-estimate": "^0.0.3",

9
source/src/App.tsx
View file

@ -31,6 +31,7 @@ html, body, #root {
margin: 0; margin: 0;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
line-height: 1.5rem;
background-color: ${(props) => background-color: ${(props) =>
theming.theme(props.theme.currentTheme, { theming.theme(props.theme.currentTheme, {
light: theming.light.backgroundColor1, light: theming.light.backgroundColor1,
@ -161,7 +162,7 @@ table tr:nth-child(even){
})}; })};
} }
.link-color a { .white-link a {
text-decoration: none; text-decoration: none;
color: ${theming.color.linkColor}; color: ${theming.color.linkColor};
@ -170,10 +171,6 @@ table tr:nth-child(even){
} }
} }
p {
line-height: 1.5rem;
}
blockquote { blockquote {
background-color: ${(props) => background-color: ${(props) =>
theming.theme(props.theme.currentTheme, { theming.theme(props.theme.currentTheme, {
@ -344,7 +341,7 @@ export default class App extends React.Component<AppProps, AppState> {
<Route exact path="/:path*"> <Route exact path="/:path*">
{({ match }) => ( {({ match }) => (
<Page key={match.params.path} /> <Page key={match?.params.path} />
)} )}
</Route> </Route>
</Switch> </Switch>

5
source/src/components/PostCard.tsx
View file

@ -1,5 +1,4 @@
import React from "react" import React from "react"
import marked from "marked"
import styled from "styled-components" import styled from "styled-components"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
@ -118,9 +117,9 @@ export default class PostCard extends React.Component<PostCardProps> {
<hr /> <hr />
<StyledPostCardContent <StyledPostCardContent
className="link-color" className="white-link"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: marked(this.props.postData.preview), __html: this.props.postData.preview,
}} }}
></StyledPostCardContent> ></StyledPostCardContent>
<small> <small>

96
source/src/pages/Page.tsx
View file

@ -1,8 +1,8 @@
import React from "react" import React from "react"
import marked from "marked"
import { Helmet } from "react-helmet-async" import { Helmet } from "react-helmet-async"
import { Link } from "react-router-dom" import { Link } from "react-router-dom"
import styled from "styled-components" import styled from "styled-components"
import { HashLink } from "react-router-hash-link"
import { Collapse } from "react-collapse" import { Collapse } from "react-collapse"
import storage from "local-storage-fallback" 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 PageProps {}
interface PageState { interface PageState {
@ -203,11 +219,15 @@ export default class Page extends React.Component<PageProps, PageState> {
} }
const fetched_content = _isUnsearchable const fetched_content = _isUnsearchable
? (await import(`../data/content/unsearchable${url}.json`)).content ? await import(`../data/content/unsearchable${url}.json`)
: (await import(`../data/content${url}.json`)).content : await import(`../data/content${url}.json`)
fetchedPage.content = fetched_content ? fetched_content : "No content" fetchedPage.content = fetched_content.content
fetchedPage.toc = fetchedPage?.toc ? fetchedPage.toc : undefined ? fetched_content.content
: "No content"
fetchedPage.toc = fetched_content.toc
? parseToc(fetched_content.toc)
: undefined
fetchedPage.title = fetchedPage?.title ? fetchedPage.title : "No title" fetchedPage.title = fetchedPage?.title ? fetchedPage.title : "No title"
if (!_isUnsearchable) { if (!_isUnsearchable) {
fetchedPage.date = fetchedPage?.date fetchedPage.date = fetchedPage?.date
@ -301,47 +321,47 @@ export default class Page extends React.Component<PageProps, PageState> {
<hr /> <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 // add table of contents if it exists
this.state.fetchedPage.toc && ( this.state.fetchedPage.toc && (
<StyledCollapseContainer> <>
<Collapse isOpened={this.state.isTocOpened}> <StyledTocToggleButton
<div> onClick={() => {
<div this.setState({
className="link-color" isTocOpened:
dangerouslySetInnerHTML={{ !this.state.isTocOpened,
__html: marked( })
this.state.fetchedPage }}
.toc >
), <strong>Table of Content </strong>
}} {this.state.isTocOpened ? (
></div> <FontAwesomeIcon icon={faCaretUp} />
</div> ) : (
</Collapse> <FontAwesomeIcon
</StyledCollapseContainer> icon={faCaretDown}
/>
)}
</StyledTocToggleButton>
<StyledCollapseContainer>
<Collapse
isOpened={this.state.isTocOpened}
>
<div className="white-link">
{this.state.fetchedPage.toc}
</div>
</Collapse>
</StyledCollapseContainer>
<hr />
</>
) )
} }
<hr />
<div <div
className="link-color" className="white-link"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: marked(this.state.fetchedPage.content), __html: this.state.fetchedPage.content,
}} }}
></div> />
</div> </div>
</> </>
) )

52
source/yarn.lock
View file

@ -1840,6 +1840,11 @@
dependencies: dependencies:
highlight.js "*" 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@*": "@types/hoist-non-react-statics@*":
version "3.3.1" version "3.3.1"
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@ -1929,6 +1934,31 @@
dependencies: dependencies:
"@types/react" "*" "@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@*": "@types/react@*":
version "17.0.5" version "17.0.5"
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.5.tgz#3d887570c4489011f75a3fc8f965bf87d09a1bea" resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.5.tgz#3d887570c4489011f75a3fc8f965bf87d09a1bea"
@ -7645,6 +7675,16 @@ map-visit@^1.0.0:
dependencies: dependencies:
object-visit "^1.0.0" 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: markdown-it-texmath@^0.9.1:
version "0.9.1" version "0.9.1"
resolved "https://registry.yarnpkg.com/markdown-it-texmath/-/markdown-it-texmath-0.9.1.tgz#fdf1442afbca474e9170b9707b6155125384bae2" 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" repeat-string "^1.6.1"
strip-color "^0.1.0" 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: math-random@^1.0.1:
version "1.0.4" version "1.0.4"
resolved "https://registry.yarnpkg.com/math-random/-/math-random-1.0.4.tgz#5dd6943c938548267016d4e34f057583080c514c" 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-invariant "^1.0.2"
tiny-warning "^1.0.0" 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: react-router@5.2.0:
version "5.2.0" version "5.2.0"
resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293" resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293"