-
Notifications
You must be signed in to change notification settings - Fork 15
/
index.tsx
80 lines (71 loc) · 2.48 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
import React from 'react'
import MDXRenderer from '../mdx-components/MDXRenderer'
import { TopicFlie, WikiLinkLabelTemplateFn } from '../../type'
import AnchorTag from '../mdx-components/AnchorTag'
import LinkReference from '../LinkReference'
import * as HEADER_COMPONENTS from '../mdx-components/header-components'
import { MDXProvider } from '@mdx-js/react'
import slugify from 'slugify'
import InlineTOC from '../InlineTOC'
import './topic.css'
export type Props = {
file: TopicFlie
currentLocation: Location
refWordMdxSlugDict: {[key: string]: string}
wikiLinkLabelTemplateFn?: WikiLinkLabelTemplateFn | null
showInlineTOC?: boolean
}
const Topic: React.FC<Props> = ({ file, currentLocation, refWordMdxSlugDict, wikiLinkLabelTemplateFn, showInlineTOC }: Props) => {
let referenceBlock
const { frontmatter, inboundReferences, outboundReferences, tableOfContents } = file.childMdx
const { title, slug } = file.fields
// console.log(
// 'outboundReferences',
// outboundReferences,
// 'inboundReferences',
// inboundReferences,
// slug,
// )
const ProvidedAnchorTag = (anchorProps) => {
// console.log("ProviµdedAnchorTag", anchorProps)
return (
<AnchorTag
{...anchorProps}
currentLocation={currentLocation}
currentSlug={slug}
references={outboundReferences}
wikiLinkLabelTemplateFn={wikiLinkLabelTemplateFn}
refWordMdxSlugDict={refWordMdxSlugDict}
></AnchorTag>
)
}
if (inboundReferences) {
const references = inboundReferences.reduce((acc, ref) => {
if (!ref.referrer.parent?.fields) return acc
const { slug } = ref.referrer.parent?.fields!
acc.push(<LinkReference key={slug} reference={ref}></LinkReference>)
return acc
}, [] as JSX.Element[])
if (references.length > 0) {
referenceBlock = (
<div className="topic__references">
<h2 id="Backlinks">Backlinks</h2>
<div>{references}</div>
</div>
)
}
}
const shouldRenderTitle = !!frontmatter.title
const realTitle = frontmatter.title || title
return (
<div className="topic">
{shouldRenderTitle ? <h1 id={slugify(realTitle)}>{realTitle}</h1> : null}
{showInlineTOC && <InlineTOC tableOfContents={tableOfContents} />}
<MDXProvider components={{ a: ProvidedAnchorTag, ...HEADER_COMPONENTS }}>
<MDXRenderer scope="">{file.childMdx.body}</MDXRenderer>
</MDXProvider>
{referenceBlock}
</div>
)
}
export default Topic