102 |
{
106 | if (!ev.isDefaultPrevented()) {
107 | setGraphState('hidden')
108 | }
109 | }}
110 | />
111 |
112 |
ev.preventDefault()}
115 | style={{ display: shouldShowGraph ? 'flex' : 'none' }}
116 | >
117 |
123 |
{
127 | setGraphState('hidden')
128 | }}
129 | aria-label="Close Graph"
130 | >
131 |
132 |
134 |
135 |
136 |
137 | {!isMobileMode && (
138 |
139 |
146 | )}
147 |
148 |
149 |
Press Esc twice to
150 | {
154 | setGraphState('hidden')
155 | }}
156 | aria-label="Close Graph"
157 | >close
158 | this modal.
159 |
160 |
161 |
162 |
163 |
164 |
165 |
,
166 | document.body
167 | )
168 | }
169 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/InlineTOC/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { TableOfContents, TOCItem } from '../../type'
3 | import { slugifyTitle } from '../../utils/toc'
4 | import './inline-toc.css'
5 |
6 | interface InlineTOCProps {
7 | tableOfContents: TableOfContents
8 | }
9 |
10 | const InlineTOC = ({ tableOfContents }: InlineTOCProps) => {
11 | return (
12 |
13 |
Table Of Contents
14 | {tableOfContents.items && (
15 |
16 | )}
17 |
18 | )
19 | }
20 |
21 | type TOCItemProps = {
22 | item: TOCItem
23 | className?: string
24 | }
25 |
26 | function TOCItemComponent({ item, className }: TOCItemProps) {
27 | const itemsElement = item.items ? (
28 |
29 | {item.items.map((childItem) => (
30 |
33 | ) : null
34 | return item.title ? (
35 |
36 | {item.title}
37 | {itemsElement}
38 |
39 | ) : (
40 | itemsElement
41 | )
42 | }
43 |
44 | export default InlineTOC
45 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/InlineTOC/inline-toc.css:
--------------------------------------------------------------------------------
1 | .inline-toc {
2 | margin-bottom: 1em;
3 | }
4 |
5 | .inline-toc ol {
6 | margin-top: 0;
7 | }
8 |
9 | .inline-toc__header {
10 | font-size: 1.2em;
11 | font-weight: bold;
12 | }
13 |
14 | .inline-toc__top-node {
15 | margin-left: 0;
16 | }
17 |
18 | .inline-toc li {
19 | list-style: disc;
20 | }
21 |
22 | .inline-toc__top-node > li {
23 | list-style: none;
24 | }
25 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/LinkReference/index.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from 'gatsby';
2 | import { Reference } from '../../type'
3 | import React from 'react';
4 |
5 | import './link-reference.css'
6 |
7 | const LinkReference = (props: { reference: Reference}) => {
8 | const { reference } = props
9 | const { slug, title } = reference.referrer.parent?.fields!
10 |
11 | return (
12 |
13 |
14 | {title}
15 |
16 |
17 |
18 | );
19 | }
20 |
21 | export default LinkReference;
22 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/LinkReference/link-reference.css:
--------------------------------------------------------------------------------
1 | .link-refernce__context {
2 | padding-left: 1em;
3 | }
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/Search/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useCallback, useEffect, useRef } from 'react'
2 | import ReactDOM from 'react-dom'
3 | // import useHotkeys from '@reecelucas/react-use-hotkeys'
4 | import { navigate } from 'gatsby'
5 | import Downshift from 'downshift'
6 | import useSearch, { SearchResult, LOADING_ID } from '../../use-search'
7 |
8 | import './search.css'
9 |
10 | const RESULTS_WIDTH = 500
11 |
12 | export type SearchProps = {
13 | isMobileMode?: boolean
14 | searchActivateHotkey?: string
15 | resultsClassName?: string
16 | resultsWidth?: number
17 | position?: 'right'
18 | onResults?(results: SearchResult[]): void
19 | }
20 |
21 | export default function Search(props: SearchProps) {
22 | const { isMobileMode, resultsClassName, resultsWidth, onResults, position } = props
23 | const [query, setQuery] = useState('')
24 | const searchBarRef = useRef
(null)
25 | const searchBarInputRef = useRef(null)
26 |
27 | const results = useSearch(query)
28 |
29 | const handleChange = useCallback((e) => setQuery(e.target.value), [setQuery])
30 |
31 | // if (searchActivateHotkey) {
32 | // useHotkeys(searchActivateHotkey, () => {
33 | // setTimeout(() => {
34 | // if (searchBarInputRef.current) searchBarInputRef.current.focus()
35 | // })
36 | // })
37 | // }
38 |
39 | if (onResults) {
40 | useEffect(() => {
41 | onResults(results.filter((o) => o.id !== LOADING_ID))
42 | }, [results])
43 | }
44 |
45 | return (
46 | navigate(selection.path)}
48 | itemToString={(item) => (item ? item.title : '')}
49 | >
50 | {({
51 | getInputProps,
52 | getItemProps,
53 | getMenuProps,
54 | isOpen,
55 | highlightedIndex,
56 | getRootProps,
57 | }) => {
58 | return (
59 |
63 |
83 | )
84 | }}
85 |
86 | )
87 | }
88 |
89 | const SearchBar = React.forwardRef((props, ref) => {
90 | const { onChange, getInputProps, inputRef } = props as any
91 | return (
92 |
93 |
100 |
102 |
110 |
= searchBarRef
128 | const styles: React.CSSProperties = sRef.current
129 | ? (function () {
130 | const searchBarBox = sRef.current.getBoundingClientRect()
131 | let left = isMobileMode ? 10 : searchBarBox.left
132 | if (position === 'right') {
133 | left = searchBarBox.right - width
134 | }
135 | return {
136 | top: searchBarBox.top + searchBarBox.height + 10,
137 | left,
138 | width,
139 | }
140 | })()
141 | : {}
142 |
143 | return ReactDOM.createPortal(
144 |
149 | {results.map((r, index) => (
150 |
163 | {r.title}
164 | {r.excerpt}
165 |
166 | ))}
167 | ,
168 | document.body
169 | )
170 | }
171 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/Search/search.css:
--------------------------------------------------------------------------------
1 | .searchWrapper {
2 | position: relative;
3 | display: block;
4 | }
5 |
6 | .inputWrapper {
7 | position: relative;
8 | color: var(--kb-text-color);
9 | }
10 |
11 | .inputWrapper .searchIcon {
12 | position: absolute;
13 | left: 2px;
14 | width: 22px;
15 | padding: 2px;
16 | padding-bottom: 0px;
17 | pointer-events: none;
18 | fill: var(--kb-text-color);
19 | }
20 |
21 | .inputWrapper:hover .searchIcon {
22 | fill: var(--kb-link-color);
23 | }
24 |
25 | .inputWrapper input {
26 | color: var(--kb-text-color);
27 | border: 1px solid transparent;
28 | height: 26px;
29 | width: 100%;
30 | outline: none;
31 | padding-left: 28px;
32 | background-color: var(--kb-note-bg);
33 | /* transition: all 0.3s ease-in-out; */
34 | }
35 |
36 | .inputWrapper input:focus {
37 | border-color: inherit;
38 | }
39 |
40 | .results {
41 | padding-inline-start: 0;
42 | position: fixed;
43 | display: block;
44 | right: 0;
45 | top: 0;
46 | width: 500px;
47 | margin-left: 0;
48 | max-width: calc(100vw - 20px);
49 | max-height: 50vh;
50 | background: var(--kb-note-bg);
51 | box-shadow: -5px -5px 15px -3px var(--kb-shadow-bg);
52 | overflow-y: auto;
53 | border-radius: 4px;
54 | }
55 |
56 | .results li {
57 | display: block;
58 | text-decoration: none;
59 | cursor: pointer;
60 | padding: 10px 16px;
61 | border-bottom: 1px solid var(--kb-separator-color);
62 | }
63 |
64 | .results li:hover {
65 | background: var(--kb-search-highlight-bg);
66 | }
67 |
68 | .results li .title {
69 | color: var(--kb-text-color);
70 | font-weight: bold;
71 | }
72 |
73 | .results li .excerpt {
74 | font-size: 0.9em;
75 | }
76 |
77 | .lds-dual-ring:after {
78 | content: " ";
79 | left: calc(50% - 32px);
80 | position: relative;
81 | display: block;
82 | width: 64px;
83 | height: 64px;
84 | margin: 8px;
85 | border-radius: 50%;
86 | border: 6px solid var(--kb-separator-color);
87 | border-color: var(--kb-separator-color) transparent var(--kb-separator-color) transparent;
88 | animation: lds-dual-ring 1.2s ease-in-out infinite;
89 | }
90 | @keyframes lds-dual-ring {
91 | 0% {
92 | transform: rotate(0deg);
93 | }
94 | 100% {
95 | transform: rotate(360deg);
96 | }
97 | }
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/SiteSidebar/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useState, useEffect } from 'react'
2 | import { useStaticQuery, graphql, navigate, Link } from 'gatsby'
3 | import TreeView, { TreeNodeRawData, TreeNodeProps } from '../TreeView'
4 | import Search from '../Search'
5 | import { PageContext } from '../../type'
6 | import { recursivelyCallNode } from '../../utils/index'
7 | import { SEARCH_HOTKEY } from '../../configs/hotkeys'
8 | import './site-sidebar.css'
9 |
10 | function getDirectoriesByPath(dir: string) {
11 | const segs = dir.split('/')
12 | const directories: string[] = []
13 | let cur = ''
14 | segs.forEach((seg) => {
15 | const joinedCur = cur ? [cur, seg].join('/') : seg
16 | directories.push(joinedCur)
17 | cur = joinedCur
18 | })
19 | return directories
20 | }
21 |
22 | export interface ISiteSidebarProps {
23 | pageContext: PageContext
24 | title: string
25 | isMobileMode?: boolean
26 | }
27 |
28 | type RemarkNode = {
29 | frontmatter?: {
30 | title: string
31 | }
32 | parent: {
33 | id: string
34 | relativeDirectory: string
35 | relativePath: string
36 | name: string
37 | fields: {
38 | slug: string
39 | title: string
40 | }
41 | }
42 | }
43 |
44 | export default function SiteSidebar(props: ISiteSidebarProps) {
45 | const { pageContext, title, isMobileMode } = props
46 | const data = useStaticQuery(graphql`
47 | query SiteSidebarQuery {
48 | allMdx {
49 | nodes {
50 | frontmatter {
51 | title
52 | }
53 | parent {
54 | id
55 | ... on File {
56 | id
57 | name
58 | relativeDirectory
59 | relativePath
60 | fields {
61 | title
62 | slug
63 | }
64 | }
65 | }
66 | }
67 | }
68 | }
69 | `)
70 |
71 | const [treeNodes, setTreeNodes] = useState([])
72 | const [treeDataMap, setTreeDataMap] = useState<
73 | Record
74 | >({})
75 | const [nodeMap, setNodeMap] = useState>({})
76 |
77 | // initialize
78 | useEffect(() => {
79 | const nodes = data.allMdx!.nodes as RemarkNode[]
80 | const validNodes = nodes.filter((node) => node.parent).sort((a,b) => {
81 | if (a.parent.relativePath > b.parent.relativePath) return 1
82 | if (a.parent.relativePath < b.parent.relativePath) return -1
83 | return 0
84 | })
85 |
86 | function makeDirectoryNodes(inputPath: string) {
87 | const directories = getDirectoriesByPath(inputPath)
88 | let parentDirId
89 | directories.forEach((dir) => {
90 | if (!treeDataMap[dir]) {
91 | const dirLabel = dir.split('/').pop() || dir
92 | const dirNode: TreeNodeRawData = {
93 | id: dir,
94 | label: dirLabel,
95 | parentId: parentDirId,
96 | isLeaf: false,
97 | }
98 | treeDataMap[dir] = dirNode
99 | treeNodes.push(dirNode)
100 | }
101 | parentDirId = dir
102 | })
103 | }
104 |
105 | validNodes.forEach((node) => {
106 | if (node.parent.relativeDirectory) {
107 | makeDirectoryNodes(node.parent.relativeDirectory)
108 | }
109 | })
110 |
111 | const expandedParents: TreeNodeRawData[] = []
112 |
113 | validNodes.forEach((node) => {
114 | if (!node.parent) return
115 | const file = node.parent
116 | const parentNode = file.relativeDirectory
117 | ? treeDataMap[file.relativeDirectory]
118 | : null
119 | const treeNode: TreeNodeRawData = {
120 | id: file.id,
121 | label: node.frontmatter?.title || file.fields.title,
122 | parentId: parentNode ? parentNode.id : null,
123 | isLeaf: true,
124 | }
125 | const isCurrent = file.id === pageContext.id
126 | if (isCurrent) {
127 | treeNode['className'] = 'site-sidebar__link--cur'
128 | if (parentNode) {
129 | expandedParents.push(parentNode)
130 | }
131 | }
132 | treeNodes.push(treeNode)
133 | treeDataMap[file.id] = treeNode
134 | nodeMap[file.id] = node
135 | })
136 |
137 | // expand parent node through the pah
138 | const _getParentNode = (node: TreeNodeRawData) =>
139 | node.parentId ? treeDataMap[node.parentId] : undefined
140 | expandedParents.forEach((node) => {
141 | recursivelyCallNode(node, _getParentNode, (_node) => {
142 | _node.isExpanded = true
143 | })
144 | })
145 |
146 | setTreeNodes(treeNodes.slice())
147 | setNodeMap(nodeMap)
148 | setTreeDataMap(treeDataMap)
149 |
150 | return () => {}
151 | }, [])
152 |
153 | const onNodeSelect = useCallback(
154 | (treeNode) => {
155 | const node = nodeMap[treeNode.id]
156 | if (node) {
157 | navigate(node.parent.fields.slug)
158 | }
159 | },
160 | [nodeMap]
161 | )
162 |
163 | const renderLabel: TreeNodeProps['renderLabel'] = useCallback(
164 | (nodeProps, { labelClassName }) => {
165 | const { data } = nodeProps
166 | const node = nodeMap[data.id]
167 | let slug = ''
168 | if (node) {
169 | slug = node.parent.fields.slug
170 | }
171 | if (data.isLeaf) {
172 | // console.log('slug is', slug, node.parent.fields)
173 | return (
174 | {data.label}
184 | }
185 | },
186 | [onNodeSelect, nodeMap]
187 | )
188 |
189 | const onBranchNodeClick: TreeNodeProps['onBranchNodeClick'] = useCallback(
190 | (nodeProps) => {
191 | const dataNode = treeDataMap[nodeProps.id]
192 | const newDataNode = { ...dataNode, isExpanded: !nodeProps.isExpanded }
193 | treeDataMap[nodeProps.id] = newDataNode
194 |
195 | // make parent nodes expanded otherwise their state will be lost.
196 | // this logic should be in TreeView rather than here, need to separate it.
197 | recursivelyCallNode(
198 | newDataNode,
199 | (_node) => {
200 | const parentNode = _node.parentId ? treeDataMap[_node.parentId] : null
201 | return parentNode as any
202 | },
203 | (_node) => {
204 | if (_node === newDataNode) return
205 | _node.isExpanded = true
206 | }
207 | )
208 |
209 | const newTreeNodes = Object.values(treeDataMap)
210 | setTreeNodes(newTreeNodes)
211 | },
212 | [treeNodes]
213 | )
214 |
215 | return (
216 |
217 |
218 |
220 |
221 |
226 |
227 |
234 |
= ({ file, currentLocation, refWordMdxSlugDict, wikiLinkLabelTemplateFn, showInlineTOC }: Props) => {
21 | let referenceBlock
22 | const { frontmatter, inboundReferences, outboundReferences, tableOfContents } = file.childMdx
23 | const { title, slug } = file.fields
24 |
25 | // console.log(
26 | // 'outboundReferences',
27 | // outboundReferences,
28 | // 'inboundReferences',
29 | // inboundReferences,
30 | // slug,
31 | // )
32 |
33 | const ProvidedAnchorTag = (anchorProps) => {
34 | // console.log("ProviµdedAnchorTag", anchorProps)
35 | return (
36 |
58 |
Backlinks
59 |
{references}
60 |
70 | {shouldRenderTitle ?
{realTitle} : null}
71 | {showInlineTOC &&
73 | {file.childMdx.body}
74 |
75 | {referenceBlock}
76 |
77 | )
78 | }
79 |
80 | export default Topic
81 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/Topic/topic.css:
--------------------------------------------------------------------------------
1 | .topic ul,
2 | .topic ol {
3 | list-style: inherit;
4 | }
5 |
6 | .topic__references {
7 | padding: 1em;
8 | background-color: var(--kb-blockquote-bg);
9 | }
10 |
11 | .topic a:link:hover {
12 | text-decoration: underline;
13 | }
14 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/TopicLayout/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useMemo, useRef, useLayoutEffect, useCallback } from 'react'
2 | import { useScrollRestoration } from 'gatsby-react-router-scroll'
3 | import useBreakpoint from 'use-breakpoint'
4 | import { useStaticQuery, graphql } from 'gatsby'
5 | import classnames from 'classnames'
6 | import './topic-layout.css'
7 |
8 | import { PageContext } from '../../type'
9 | import GraphButton from '../GraphButton'
10 | import SiteSidebar from '../SiteSidebar'
11 | import DarkModeToggle from '../DarkModeToggle'
12 | import { isServer } from '../../env'
13 |
14 | export type Props = React.PropsWithChildren<{
15 | pageContext: PageContext
16 | showSidebarTOC?: boolean
17 | }>
18 |
19 | const BREAKPOINTS = {
20 | sm: 0,
21 | md: 768,
22 | lg: 1024,
23 | xl: 1280,
24 | }
25 | type BreakpointName = keyof typeof BREAKPOINTS
26 |
27 | enum CmpResult {
28 | Greater = 1,
29 | Equal = 0,
30 | Less = -1,
31 | }
32 |
33 | function cmpBreakpoint(p1: BreakpointName, p2: BreakpointName) {
34 | const v1 = BREAKPOINTS[p1]
35 | const v2 = BREAKPOINTS[p2]
36 | if (v1 > v2) return CmpResult.Greater
37 | if (v1 === v2) return CmpResult.Equal
38 | return CmpResult.Less
39 | }
40 |
41 | export default function TopicLayout(props: Props) {
42 | const { children, pageContext, showSidebarTOC } = props
43 | const tocRestoration = useScrollRestoration('toc')
44 | const data = useStaticQuery(graphql`
45 | query TopicLayoutQuery {
46 | site {
47 | siteMetadata {
48 | title
49 | }
50 | }
51 | }
52 | `)
53 |
54 | const [menuOpened, setMenuOpened] = useState(false)
55 | const [rightMenuOpened, setRightMenuOpened] = useState(false)
56 |
57 | const defaultBreakPoint: BreakpointName = isServer
58 | ? 'md'
59 | : window.innerWidth > BREAKPOINTS.md
60 | ? 'md'
61 | : 'sm'
62 | const { breakpoint } = useBreakpoint(BREAKPOINTS, defaultBreakPoint)
63 |
64 | const isMobileMode = useMemo(() => {
65 | return cmpBreakpoint(breakpoint, 'md') === CmpResult.Less
66 | }, [breakpoint])
67 |
68 | const title = data.site.siteMetadata!.title
69 |
70 | const handleMenuClick = useCallback(() => {
71 | setMenuOpened(!menuOpened)
72 | }, [menuOpened])
73 | const expandIcon = (
74 |
90 | )
91 |
92 | const handleTocClick = useCallback(() => {
93 | setRightMenuOpened(!rightMenuOpened)
94 | }, [rightMenuOpened])
95 |
96 | // this ref and useLayoutEffect are kind of hack, but I don't know if
97 | // there is a better solution to tweak the hydration of '.topic-layout__left'
98 | // so I choose to force some manipulation in browser side
99 | const leftEleRef = useRef(null)
100 | const leftClassObject = {
101 | 'topic-layout__left--mobile': isMobileMode,
102 | 'topic-layout__left--show': isMobileMode && menuOpened,
103 | 'shadow-md': isMobileMode,
104 | 'transition-all': isMobileMode,
105 | 'z-10': isMobileMode,
106 | }
107 | useLayoutEffect(() => {
108 | if (!leftEleRef.current) return
109 | for (const [key, value] of Object.entries(leftClassObject)) {
110 | if (value) {
111 | leftEleRef.current.classList.add(key)
112 | } else {
113 | leftEleRef.current.classList.remove(key)
114 | }
115 | }
116 | })
117 | const leftClass = classnames(leftClassObject)
118 |
119 | const rightEleRef = useRef(null)
120 | const rightClassObject = {
121 | 'topic-layout__right': true,
122 | 'topic-layout__right--drawer': isMobileMode,
123 | 'topic-layout__right--drawer-show': isMobileMode && rightMenuOpened,
124 | 'shadow-md': isMobileMode,
125 | 'transition-all': isMobileMode,
126 | 'z-10': isMobileMode,
127 | 'flex-shrink-0': true,
128 | 'p-5': true,
129 | 'hover:shadow-md': true,
130 | }
131 | useLayoutEffect(() => {
132 | if (!rightEleRef.current) return
133 | for (const [key, value] of Object.entries(rightClassObject)) {
134 | if (value) {
135 | rightEleRef.current.classList.add(key)
136 | } else {
137 | rightEleRef.current.classList.remove(key)
138 | }
139 | }
140 | })
141 | const rightClass = classnames(rightClassObject)
142 |
143 | const sideBar = useMemo(() => {
144 | return (
145 |
155 |
156 |
157 | {expandIcon}
158 |
{title}
159 |
160 | {showSidebarTOC && (
161 |
162 |
163 | T
164 |
165 |
166 |
168 | )}
169 |
170 |
171 |
175 | {sideBar}
176 |
177 |
178 | {children}
179 |
180 |
181 | {isMobileMode ? null : (
182 | <>
183 |
184 |
190 | {isMobileMode && (
191 |
192 | Table Of Contents
193 |
194 | )}
195 |
196 |
199 |
200 | {isMobileMode && (menuOpened || rightMenuOpened) ? (
201 |
{
204 | setMenuOpened(false)
205 | setRightMenuOpened(false)
206 | }}
207 | >
208 | ) : null}
209 |
36 | {tree.rootNode.children!.map((node) => {
37 | return (
38 |
46 | )
47 | }
48 |
49 | function TreeNode(props: TreeNodeProps) {
50 | const { data, onSelect, onBranchNodeClick } = props
51 | const onClick = (e: React.MouseEvent) => {
52 | if (data.isLeaf) onSelect(data)
53 | e.stopPropagation()
54 | }
55 | const labelClassName = 'tree-view__label'
56 | const nodeLabel = props.renderLabel ? (
57 | props.renderLabel(props, { labelClassName })
58 | ) : (
59 | {data.label}
60 | )
61 | const onNodeClick = (e: React.MouseEvent) => {
62 | if (!data.isLeaf && onBranchNodeClick) {
63 | e.stopPropagation()
64 | onBranchNodeClick(data)
65 | }
66 | }
67 | return (
68 |
69 |
70 | {!data.isLeaf &&
73 | {(data.isLeaf || !data.isExpanded) ? null : (
74 |
75 | {data.children!.map((childNode) => {
76 | return (
77 |
87 | )}
88 |
89 | )
90 | }
91 |
92 | const MemorizedTreeNode = React.memo(TreeNode)
93 |
94 | const MAX_LOOP_COUNT = 200000
95 |
96 | function buildTree(nodes: TreeNodeRawData[]) {
97 | const rootNode: TreeNodeData = {
98 | id: '__root__',
99 | label: '__root__',
100 | isLeaf: false,
101 | children: [],
102 | depth: 0,
103 | }
104 | const treeNodes = [rootNode]
105 | const treeMap = {
106 | [rootNode.id]: rootNode,
107 | }
108 | const allIds = [rootNode.id].concat(nodes.map((node) => node.id))
109 | const nodeQueue = nodes.slice()
110 | let cur = 0
111 | while (nodeQueue.length) {
112 | const node = nodeQueue.shift()!
113 | let parentNode
114 | if (cur++ > MAX_LOOP_COUNT) {
115 | console.error('[TreeView], exceeds MAX_LOOP_COUNT, need to check nodes data')
116 | break
117 | }
118 | if (node.parentId) {
119 | if (!treeMap[node.parentId]) {
120 | if (allIds.includes(node.parentId)) {
121 | nodeQueue.push(node)
122 | continue
123 | } else {
124 | treeMap[node.parentId] = {
125 | id: node.parentId,
126 | label: '',
127 | isLeaf: false,
128 | children: [],
129 | depth: 1,
130 | isExpanded: node.isExpanded,
131 | }
132 | }
133 | }
134 | parentNode = treeMap[node.parentId]
135 | } else {
136 | parentNode = rootNode
137 | }
138 |
139 | const treeNode: TreeNodeData = {
140 | isExpanded: false,
141 | ...node,
142 | depth: parentNode.depth + 1,
143 | children: [],
144 | }
145 | // console.log('tree node', treeNode)
146 | treeMap[node.id] = treeNode
147 | parentNode.children.push(treeNode)
148 | treeNodes.push(treeNode)
149 | }
150 | return { rootNode, treeNodes }
151 | }
152 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/TreeView/tree-view.css:
--------------------------------------------------------------------------------
1 | ul.tree-view,
2 | .tree-view ul {
3 | margin: 0;
4 | }
5 |
6 | .tree-view__node {
7 | padding-left: 10px;
8 | margin-left: 0;
9 | margin-bottom: 0;
10 | }
11 |
12 | .tree-view__node-header {
13 | width: 100%;
14 | display: inline-block;
15 | cursor: pointer;
16 | }
17 |
18 | .tree-view__node-header:hover {
19 | color: var(--kb-link-color);
20 | }
21 |
22 | .tree-view__icon {
23 | transition: transform 0.2s ease;
24 | margin-left: -5px;
25 | margin-right: 2px;
26 | position: relative;
27 | top: -1px;
28 | }
29 |
30 | .tree-view__icon--expanded {
31 | transform: rotate(90deg);
32 | }
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/header.css:
--------------------------------------------------------------------------------
1 | .header {
2 | display: flex;
3 | justify-content: space-between;
4 | align-items: center;
5 | padding: 10px 15px;
6 | }
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/header.js:
--------------------------------------------------------------------------------
1 | import { Link } from 'gatsby'
2 | import PropTypes from 'prop-types'
3 | import React from 'react'
4 |
5 | import './header.css'
6 |
7 | const Header = ({ siteTitle, addons }) => (
8 |
16 | )
17 |
18 | Header.propTypes = {
19 | siteTitle: PropTypes.string,
20 | }
21 |
22 | Header.defaultProps = {
23 | siteTitle: ``,
24 | }
25 |
26 | export default Header
27 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/icons/index.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import classnames from 'classnames'
3 | import './svg-icon.css';
4 |
5 | export const IconChevronRight = (props: { className?: string }) => {
6 | const className = classnames({
7 | [props.className || '']: true,
8 | 'svg-icon': true
9 | })
10 | return
11 |
13 | }
14 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/icons/svg-icon.css:
--------------------------------------------------------------------------------
1 | .svg-icon {
2 | width: 1em;
3 | display: inline-block;
4 | }
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/layout.css:
--------------------------------------------------------------------------------
1 | .layout__content {
2 | margin: auto;
3 | max-width: 960px;
4 | }
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/layout.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Layout component that queries for data
3 | * with Gatsby's useStaticQuery component
4 | *
5 | * See: https://www.gatsbyjs.com/docs/use-static-query/
6 | */
7 |
8 | import React from "react"
9 | import PropTypes from "prop-types"
10 | import { useStaticQuery, graphql } from "gatsby"
11 |
12 | import Header from "./header"
13 | import './layout.css'
14 |
15 | const Layout = ({ children, headerAddons }) => {
16 | const data = useStaticQuery(graphql`
17 | query BaseSiteTitleQuery {
18 | site {
19 | siteMetadata {
20 | title
21 | }
22 | }
23 | }
24 | `)
25 |
26 | return (
27 |
28 |
29 |
30 |
{children}
31 |
34 | © {new Date().getFullYear()}, Built with
35 | {` `}
36 | Gatsby
37 |
38 |
39 |
{props.children}
107 | } else {
108 | let toSlug = nestedAnchorSlug
109 | if (refWordMdxSlugDict) {
110 | // nested content's anchor label will not be replaced with topic title,
111 | // so it can be used to form slug
112 | const maybeSlug = getSlugByRefWord(props.title)
113 | if (maybeSlug) toSlug = maybeSlug
114 | }
115 | return
132 |
133 |
134 | {mdxBody}
135 |
136 |
137 |
138 | )
139 | child = (
140 | {href}
151 | child = (
152 | {content}
167 | }
168 |
169 | if (withoutPopup) {
170 | return child
171 | }
172 |
173 | return (
174 |
180 | {child}
181 |
182 | )
183 | }
184 |
185 | export default AnchorTag
186 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/mdx-components/MDXRenderer.tsx:
--------------------------------------------------------------------------------
1 | import { MDXRenderer } from 'gatsby-plugin-mdx'
2 |
3 | export default MDXRenderer
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/mdx-components/anchor-tag.css:
--------------------------------------------------------------------------------
1 | .anchor-tag__popover {
2 | position: relative;
3 | max-width: 26rem;
4 | box-shadow: 0 1px 3px var(--kb-shadow-bg);
5 | padding: 1rem;
6 | border-radius: 0.5rem;
7 | background-color: var(--kb-references-bg);
8 | max-height: 26rem;
9 | overflow: auto; /* for browser that doesn't support overlay */
10 | overflow: overlay;
11 | }
12 |
13 | .anchor-tag__popover.no-max-width {
14 | max-width: 90vw;
15 | }
16 |
17 | .anchor-tag__popover.with-markdown {
18 | font-size: 0.875rem;
19 | }
20 |
21 | .anchor-tag__popover h1,
22 | .anchor-tag__popover h2,
23 | .anchor-tag__popover h3,
24 | .anchor-tag__popover h4,
25 | .anchor-tag__popover h5,
26 | .anchor-tag__popover h6 {
27 | margin-bottom: 5px;
28 | padding: 0;
29 | font-size: 1rem;
30 | }
31 |
32 | .anchor-tag__popover blockquote {
33 | margin-left: 0;
34 | margin-bottom: 0;
35 | padding: 0;
36 | }
37 |
38 | .anchor-tag__popover ul {
39 | padding-left: 1rem;
40 | margin-left: 0;
41 | margin-bottom: 0;
42 | }
43 |
44 | .anchor-tag__popover li {
45 | margin-bottom: 0;
46 | }
47 |
48 | /* copied from tippy.js/animations/shift-away.css */
49 | .tippy-box[data-animation='shift-away'][data-state='hidden'] {
50 | opacity: 0;
51 | }
52 | .tippy-box[data-animation='shift-away'][data-state='hidden'][data-placement^='top'] {
53 | transform: translateY(10px);
54 | }
55 | .tippy-box[data-animation='shift-away'][data-state='hidden'][data-placement^='bottom'] {
56 | transform: translateY(-10px);
57 | }
58 | .tippy-box[data-animation='shift-away'][data-state='hidden'][data-placement^='left'] {
59 | transform: translateX(10px);
60 | }
61 | .tippy-box[data-animation='shift-away'][data-state='hidden'][data-placement^='right'] {
62 | transform: translateX(-10px);
63 | }
64 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/mdx-components/header-components.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { slugifyTitle } from '../../utils/toc'
3 |
4 | function makeHeaderComponent(tag) {
5 | return (props) => {
6 | const slugified = typeof props.children === 'string' ? slugifyTitle(props.children): props.children
7 | const id = slugified ? slugified: props.children
8 | // console.log(`${tag} props`, props, id)
9 | return React.createElement(tag, {
10 | id,
11 | ...props,
12 | }, props.children)
13 | }
14 | }
15 |
16 | export const h1 = makeHeaderComponent('h1')
17 | export const h2 = makeHeaderComponent('h2')
18 | export const h3 = makeHeaderComponent('h3')
19 | export const h4 = makeHeaderComponent('h4')
20 | export const h5 = makeHeaderComponent('h5')
21 | export const h6 = makeHeaderComponent('h6')
22 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/components/seo.js:
--------------------------------------------------------------------------------
1 | /**
2 | * SEO component that queries for data with
3 | * Gatsby's useStaticQuery React hook
4 | *
5 | * See: https://www.gatsbyjs.com/docs/use-static-query/
6 | */
7 |
8 | import React from "react"
9 | import PropTypes from "prop-types"
10 | import { Helmet } from "react-helmet"
11 | import { useStaticQuery, graphql } from "gatsby"
12 |
13 | function SEO({ description, lang, meta, title }) {
14 | const { site } = useStaticQuery(
15 | graphql`
16 | query {
17 | site {
18 | siteMetadata {
19 | title
20 | description
21 | author
22 | }
23 | }
24 | }
25 | `
26 | )
27 |
28 | const metaDescription = description || site.siteMetadata.description
29 | const defaultTitle = site.siteMetadata?.title
30 |
31 | return (
32 |
8 | 404: Not Found
10 | You just hit a route that doesn't exist... the sadness.
11 |
12 | )
13 |
14 | export default NotFoundPage
15 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/styles/base.css:
--------------------------------------------------------------------------------
1 | @import './vars.css';
2 |
3 | @import './components/scrollbar.css';
4 |
5 | html {
6 | -ms-text-size-adjust: 100%;
7 | -webkit-text-size-adjust: 100%;
8 | box-sizing: border-box;
9 | overflow-y: overlay;
10 | }
11 | body {
12 | margin: 0;
13 | -webkit-font-smoothing: antialiased;
14 | -moz-osx-font-smoothing: grayscale;
15 | color: var(--kb-text-color);
16 | background-color: var(--bg-color-2);
17 | font-family: var(--kb-font-family);
18 | font-weight: normal;
19 | word-wrap: break-word;
20 | font-kerning: normal;
21 | -moz-font-feature-settings: "kern", "liga", "clig", "calt";
22 | -ms-font-feature-settings: "kern", "liga", "clig", "calt";
23 | -webkit-font-feature-settings: "kern", "liga", "clig", "calt";
24 | font-feature-settings: "kern", "liga", "clig", "calt";
25 | }
26 | article,
27 | aside,
28 | details,
29 | figcaption,
30 | figure,
31 | footer,
32 | header,
33 | main,
34 | menu,
35 | nav,
36 | section,
37 | summary {
38 | display: block;
39 | }
40 | audio,
41 | canvas,
42 | progress,
43 | video {
44 | display: inline-block;
45 | }
46 | audio:not([controls]) {
47 | display: none;
48 | height: 0;
49 | }
50 | progress {
51 | vertical-align: baseline;
52 | }
53 | [hidden],
54 | template {
55 | display: none;
56 | }
57 | a {
58 | background-color: transparent;
59 | -webkit-text-decoration-skip: objects;
60 | color: var(--kb-link-color);
61 | }
62 | a:active,
63 | a:hover {
64 | outline-width: 0;
65 | }
66 |
67 | abbr[title] {
68 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
69 | cursor: help;
70 | text-decoration: none;
71 | }
72 | b,
73 | strong {
74 | font-weight: inherit;
75 | font-weight: bolder;
76 | }
77 | dfn {
78 | font-style: italic;
79 | }
80 | h1 {
81 | margin-left: 0;
82 | margin-right: 0;
83 | margin-top: 0;
84 | padding-bottom: 0;
85 | padding-left: 0;
86 | padding-right: 0;
87 | padding-top: 0;
88 | margin-bottom: 1.45rem;
89 | color: inherit;
90 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
91 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
92 | font-weight: bold;
93 | text-rendering: optimizeLegibility;
94 | font-size: 2.25rem;
95 | line-height: 1.1;
96 | }
97 | mark {
98 | background-color: #ff0;
99 | color: #000;
100 | }
101 | small {
102 | font-size: 80%;
103 | }
104 | sub,
105 | sup {
106 | font-size: 75%;
107 | line-height: 0;
108 | position: relative;
109 | vertical-align: baseline;
110 | }
111 | sub {
112 | bottom: -0.25em;
113 | }
114 | sup {
115 | top: -0.5em;
116 | }
117 | img {
118 | border-style: none;
119 | max-width: 100%;
120 | margin-left: 0;
121 | margin-right: 0;
122 | margin-top: 0;
123 | padding-bottom: 0;
124 | padding-left: 0;
125 | padding-right: 0;
126 | padding-top: 0;
127 | margin-bottom: 1.45rem;
128 | }
129 | svg:not(:root) {
130 | overflow: hidden;
131 | }
132 | code,
133 | kbd,
134 | pre,
135 | samp {
136 | font-family: monospace;
137 | font-size: 1em;
138 | }
139 | figure {
140 | margin-left: 0;
141 | margin-right: 0;
142 | margin-top: 0;
143 | padding-bottom: 0;
144 | padding-left: 0;
145 | padding-right: 0;
146 | padding-top: 0;
147 | margin-bottom: 1.45rem;
148 | }
149 | hr {
150 | box-sizing: content-box;
151 | overflow: visible;
152 | margin-left: 0;
153 | margin-right: 0;
154 | margin-top: 0;
155 | padding-bottom: 0;
156 | padding-left: 0;
157 | padding-right: 0;
158 | padding-top: 0;
159 | margin-bottom: calc(1.45rem - 1px);
160 | background: hsla(0, 0%, 0%, 0.2);
161 | border: none;
162 | height: 1px;
163 | }
164 | button,
165 | input,
166 | optgroup,
167 | select,
168 | textarea {
169 | font: inherit;
170 | margin: 0;
171 | }
172 | optgroup {
173 | font-weight: 700;
174 | }
175 | button,
176 | input {
177 | overflow: visible;
178 | }
179 | button,
180 | select {
181 | text-transform: none;
182 | }
183 | [type="reset"],
184 | [type="submit"],
185 | button,
186 | html [type="button"] {
187 | -webkit-appearance: button;
188 | }
189 | [type="button"]::-moz-focus-inner,
190 | [type="reset"]::-moz-focus-inner,
191 | [type="submit"]::-moz-focus-inner,
192 | button::-moz-focus-inner {
193 | border-style: none;
194 | padding: 0;
195 | }
196 | [type="button"]:-moz-focusring,
197 | [type="reset"]:-moz-focusring,
198 | [type="submit"]:-moz-focusring,
199 | button:-moz-focusring {
200 | outline: 1px dotted ButtonText;
201 | }
202 | fieldset {
203 | border: 1px solid silver;
204 | padding: 0.35em 0.625em 0.75em;
205 | margin-left: 0;
206 | margin-right: 0;
207 | margin-top: 0;
208 | padding-bottom: 0;
209 | padding-left: 0;
210 | padding-right: 0;
211 | padding-top: 0;
212 | margin-bottom: 1.45rem;
213 | }
214 | legend {
215 | box-sizing: border-box;
216 | color: inherit;
217 | display: table;
218 | max-width: 100%;
219 | padding: 0;
220 | white-space: normal;
221 | }
222 | textarea {
223 | overflow: auto;
224 | }
225 | [type="checkbox"],
226 | [type="radio"] {
227 | box-sizing: border-box;
228 | padding: 0;
229 | }
230 | [type="number"]::-webkit-inner-spin-button,
231 | [type="number"]::-webkit-outer-spin-button {
232 | height: auto;
233 | }
234 | [type="search"] {
235 | -webkit-appearance: textfield;
236 | outline-offset: -2px;
237 | }
238 | [type="search"]::-webkit-search-cancel-button,
239 | [type="search"]::-webkit-search-decoration {
240 | -webkit-appearance: none;
241 | }
242 | ::-webkit-input-placeholder {
243 | color: inherit;
244 | opacity: 0.54;
245 | }
246 | ::-webkit-file-upload-button {
247 | -webkit-appearance: button;
248 | font: inherit;
249 | }
250 | * {
251 | box-sizing: inherit;
252 | }
253 | *:before {
254 | box-sizing: inherit;
255 | }
256 | *:after {
257 | box-sizing: inherit;
258 | }
259 | h2 {
260 | margin-left: 0;
261 | margin-right: 0;
262 | margin-top: 0;
263 | padding-bottom: 0;
264 | padding-left: 0;
265 | padding-right: 0;
266 | padding-top: 0;
267 | margin-bottom: 1.45rem;
268 | color: inherit;
269 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
270 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
271 | font-weight: bold;
272 | text-rendering: optimizeLegibility;
273 | font-size: 1.62671rem;
274 | line-height: 1.1;
275 | }
276 | h3 {
277 | margin-left: 0;
278 | margin-right: 0;
279 | margin-top: 0;
280 | padding-bottom: 0;
281 | padding-left: 0;
282 | padding-right: 0;
283 | padding-top: 0;
284 | margin-bottom: 1.45rem;
285 | color: inherit;
286 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
287 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
288 | font-weight: bold;
289 | text-rendering: optimizeLegibility;
290 | font-size: 1.38316rem;
291 | line-height: 1.1;
292 | }
293 | h4 {
294 | margin-left: 0;
295 | margin-right: 0;
296 | margin-top: 0;
297 | padding-bottom: 0;
298 | padding-left: 0;
299 | padding-right: 0;
300 | padding-top: 0;
301 | margin-bottom: 1.45rem;
302 | color: inherit;
303 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
304 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
305 | font-weight: bold;
306 | text-rendering: optimizeLegibility;
307 | font-size: 1rem;
308 | line-height: 1.1;
309 | }
310 | h5 {
311 | margin-left: 0;
312 | margin-right: 0;
313 | margin-top: 0;
314 | padding-bottom: 0;
315 | padding-left: 0;
316 | padding-right: 0;
317 | padding-top: 0;
318 | margin-bottom: 1.45rem;
319 | color: inherit;
320 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
321 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
322 | font-weight: bold;
323 | text-rendering: optimizeLegibility;
324 | font-size: 0.85028rem;
325 | line-height: 1.1;
326 | }
327 | h6 {
328 | margin-left: 0;
329 | margin-right: 0;
330 | margin-top: 0;
331 | padding-bottom: 0;
332 | padding-left: 0;
333 | padding-right: 0;
334 | padding-top: 0;
335 | margin-bottom: 1.45rem;
336 | color: inherit;
337 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
338 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
339 | font-weight: bold;
340 | text-rendering: optimizeLegibility;
341 | font-size: 0.78405rem;
342 | line-height: 1.1;
343 | }
344 | hgroup {
345 | margin-left: 0;
346 | margin-right: 0;
347 | margin-top: 0;
348 | padding-bottom: 0;
349 | padding-left: 0;
350 | padding-right: 0;
351 | padding-top: 0;
352 | margin-bottom: 1.45rem;
353 | }
354 | ul {
355 | margin-left: 1.45rem;
356 | margin-right: 0;
357 | margin-top: 0;
358 | padding-bottom: 0;
359 | padding-left: 0;
360 | padding-right: 0;
361 | padding-top: 0;
362 | margin-bottom: 1.45rem;
363 | list-style-position: outside;
364 | list-style-image: none;
365 | }
366 | ol {
367 | margin-left: 1.45rem;
368 | margin-right: 0;
369 | margin-top: 0;
370 | padding-bottom: 0;
371 | padding-left: 0;
372 | padding-right: 0;
373 | padding-top: 0;
374 | margin-bottom: 1.45rem;
375 | list-style-position: outside;
376 | list-style-image: none;
377 | }
378 | dl {
379 | margin-left: 0;
380 | margin-right: 0;
381 | margin-top: 0;
382 | padding-bottom: 0;
383 | padding-left: 0;
384 | padding-right: 0;
385 | padding-top: 0;
386 | margin-bottom: 1.45rem;
387 | }
388 | dd {
389 | margin-left: 0;
390 | margin-right: 0;
391 | margin-top: 0;
392 | padding-bottom: 0;
393 | padding-left: 0;
394 | padding-right: 0;
395 | padding-top: 0;
396 | margin-bottom: 1.45rem;
397 | }
398 | p {
399 | margin-left: 0;
400 | margin-right: 0;
401 | margin-top: 0;
402 | padding-bottom: 0;
403 | padding-left: 0;
404 | padding-right: 0;
405 | padding-top: 0;
406 | margin-bottom: 1.45rem;
407 | }
408 | pre {
409 | margin-left: 0;
410 | margin-right: 0;
411 | margin-top: 0;
412 | margin-bottom: 1.45rem;
413 | line-height: 1.42;
414 | background: hsla(0, 0%, 0%, 0.04);
415 | border-radius: 3px;
416 | overflow: auto;
417 | word-wrap: normal;
418 | padding: 1rem;
419 | }
420 | table {
421 | margin-left: 0;
422 | margin-right: 0;
423 | margin-top: 0;
424 | padding-bottom: 0;
425 | padding-left: 0;
426 | padding-right: 0;
427 | padding-top: 0;
428 | margin-bottom: 1.45rem;
429 | font-size: 1rem;
430 | line-height: 1.45rem;
431 | border-collapse: collapse;
432 | width: 100%;
433 | }
434 | blockquote {
435 | padding: 1.45rem;
436 | margin-bottom: 1.45rem;
437 | margin-inline: 0;
438 | background-color: var(--kb-blockquote-bg);
439 | border-left: 2px solid var(--kb-text-color);
440 | }
441 | form {
442 | margin-left: 0;
443 | margin-right: 0;
444 | margin-top: 0;
445 | padding-bottom: 0;
446 | padding-left: 0;
447 | padding-right: 0;
448 | padding-top: 0;
449 | margin-bottom: 1.45rem;
450 | }
451 | noscript {
452 | margin-left: 0;
453 | margin-right: 0;
454 | margin-top: 0;
455 | padding-bottom: 0;
456 | padding-left: 0;
457 | padding-right: 0;
458 | padding-top: 0;
459 | margin-bottom: 1.45rem;
460 | }
461 | iframe {
462 | margin-left: 0;
463 | margin-right: 0;
464 | margin-top: 0;
465 | padding-bottom: 0;
466 | padding-left: 0;
467 | padding-right: 0;
468 | padding-top: 0;
469 | margin-bottom: 1.45rem;
470 | }
471 | address {
472 | margin-left: 0;
473 | margin-right: 0;
474 | margin-top: 0;
475 | padding-bottom: 0;
476 | padding-left: 0;
477 | padding-right: 0;
478 | padding-top: 0;
479 | margin-bottom: 1.45rem;
480 | }
481 | b {
482 | font-weight: bold;
483 | }
484 | strong {
485 | font-weight: bold;
486 | }
487 | dt {
488 | font-weight: bold;
489 | }
490 | th {
491 | font-weight: bold;
492 | }
493 | ol li {
494 | padding-left: 0;
495 | }
496 | ul li {
497 | padding-left: 0;
498 | }
499 | li > ol {
500 | margin-left: 1.45rem;
501 | margin-bottom: calc(1.45rem / 2);
502 | margin-top: calc(1.45rem / 2);
503 | }
504 | li > ul {
505 | margin-left: 1.45rem;
506 | margin-bottom: calc(1.45rem / 2);
507 | margin-top: calc(1.45rem / 2);
508 | }
509 | blockquote *:last-child {
510 | margin-bottom: 0;
511 | }
512 | li *:last-child {
513 | margin-bottom: 0;
514 | }
515 | p *:last-child {
516 | margin-bottom: 0;
517 | }
518 | li > p {
519 | margin-bottom: calc(1.45rem / 2);
520 | }
521 | code {
522 | line-height: 1.45rem;
523 | }
524 | kbd {
525 | font-size: 0.85rem;
526 | line-height: 1.45rem;
527 | }
528 | samp {
529 | font-size: 0.85rem;
530 | line-height: 1.45rem;
531 | }
532 | abbr {
533 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
534 | cursor: help;
535 | }
536 | acronym {
537 | border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
538 | cursor: help;
539 | }
540 | thead {
541 | text-align: left;
542 | }
543 | td,
544 | th {
545 | text-align: left;
546 | border-bottom: 1px solid hsla(0, 0%, 0%, 0.12);
547 | font-feature-settings: "tnum";
548 | -moz-font-feature-settings: "tnum";
549 | -ms-font-feature-settings: "tnum";
550 | -webkit-font-feature-settings: "tnum";
551 | padding-left: 0.96667rem;
552 | padding-right: 0.96667rem;
553 | padding-top: 0.725rem;
554 | padding-bottom: calc(0.725rem - 1px);
555 | }
556 | th:first-child,
557 | td:first-child {
558 | padding-left: 0;
559 | }
560 | th:last-child,
561 | td:last-child {
562 | padding-right: 0;
563 | }
564 | tt,
565 | code {
566 | background-color: var(--code-bg-color);
567 | border-radius: 3px;
568 | font-family: "SFMono-Regular", Consolas, "Roboto Mono", "Droid Sans Mono",
569 | "Liberation Mono", Menlo, Courier, monospace;
570 | padding: 0.2em 0.3em;
571 | }
572 | pre code {
573 | background: none;
574 | line-height: 1.42;
575 | padding: 0;
576 | }
577 | code {
578 | color: var(--code-color);
579 | }
580 |
581 | @media only screen and (max-width: 480px) {
582 | html {
583 | font-size: 100%;
584 | }
585 | }
586 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/styles/components/link.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hikerpig/gatsby-project-kb/2307f08f9d443f2156d77081ccab42264973da13/packages/gatsby-theme-kb/src/styles/components/link.css
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/styles/components/scrollbar.css:
--------------------------------------------------------------------------------
1 | @media (min-width: 1024px) {
2 | ::-webkit-scrollbar {
3 | width: 8px;
4 | height: 8px;
5 | }
6 |
7 | ::-webkit-scrollbar-thumb {
8 | background-color: var(--kb-scrollbar-thumb);
9 | border-radius: 10px;
10 | }
11 | }
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/styles/global.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | /* @tailwind components; */
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/styles/theme.css:
--------------------------------------------------------------------------------
1 | .dark-mode {
2 | --kb-link-color: var(--frost3);
3 | --kb-tree-cur-color: var(--dark-3);
4 | --kb-font-family: 'Avenir', -apple-system, sans-serif;
5 | --kb-shadow-bg: rgba(0, 0, 0, 0.2);
6 | --kb-text-color: #eceff4;
7 | --kb-text-inverse-color: white;
8 | --kb-references-bg: var(--dark-2);
9 | --kb-search-highlight-bg: var(--dark-3);
10 | --kb-separator-color: #666;
11 | --kb-scrollbar-thumb: var(--dark-4);
12 | --kb-blockquote-bg: #353c48;
13 |
14 | --bg-color-1: var(--dark-1);
15 | --bg-color-2: var(--dark-2);
16 | --code-bg-color: var(--dark-2);
17 | --code-color: var(--purple);
18 | }
19 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/styles/tocbot.css:
--------------------------------------------------------------------------------
1 | body {
2 | --toc-text-hover-color: var(--kb-link-color);
3 | --toc-cur-highlight-color: var(--kb-text-color);
4 | }
5 |
6 | .tocbot {
7 | font-size: 0.9rem;
8 | }
9 |
10 | .tocbot li {
11 | margin-bottom: 0;
12 | }
13 |
14 | .toc-link::before {
15 | height: 1.4em;
16 | background-color: transparent;
17 | }
18 |
19 | .toc-link.is-active-link::before {
20 | background-color: var(--toc-cur-highlight-color);
21 | }
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/styles/vars.css:
--------------------------------------------------------------------------------
1 | /* obsidian */
2 | :scope {
3 | --light-1: #F9FAFB;
4 | --light-2: #F3F4F6;
5 | --light-3: #E7E5E4;
6 | --light-4: #ffffff;
7 |
8 | --dark-1: #2e3440;
9 | --dark-2: #3b4252;
10 | --dark-3: #434c5e;
11 | --dark-4: #4c566a;
12 |
13 | --frost1: #8fbcbb;
14 | --frost2: #88c0d0;
15 | --frost3: #a1c4e6;
16 | --frost4: #81a1c1;
17 |
18 | --red: #bf616a;
19 | --orange: #d08770;
20 | --yellow: #ebcb8b;
21 | --green: #a3be8c;
22 | --purple: #b48ead;
23 | }
24 |
25 | /* default theme light */
26 | body {
27 | --kb-link-color: #ff5449;
28 | --kb-tree-cur-color: #e7e5e4;
29 | --kb-font-family: 'Avenir', -apple-system, sans-serif;
30 | --kb-shadow-bg: rgba(0, 0, 0, 0.2);
31 | --kb-text-color: hsl(2deg 20% 15%);
32 | --kb-text-inverse-color: white;
33 | --kb-references-bg: #fafafa;
34 | --kb-search-highlight-bg: #eaeaea;
35 | --kb-note-bg: var(--bg-color-1);
36 | --kb-separator-color: #ddd;
37 | --kb-scrollbar-thumb: #ddd;
38 | --kb-blockquote-bg: #f6f6f6;
39 |
40 | --bg-color-1: #F9FAFB;
41 | --bg-color-2: #F3F4F6;
42 | --code-bg-color: #f0f0f0;
43 | --code-color: #333;
44 | }
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/templates/Topic.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { graphql } from 'gatsby'
3 |
4 | import Topic from '../components/Topic'
5 | import Seo from '../components/seo'
6 | import TopicLayout from '../components/TopicLayout'
7 | import { isServer } from '../env'
8 |
9 | // minimal template engine
10 | function evaluateTemplate(tpl, data) {
11 | const re = /{{([^}]+)?}}/g
12 | let match
13 | while ((match = re.exec(tpl))) {
14 | const key = match[1].trim()
15 | tpl = tpl.replace(match[0], data[key])
16 | }
17 | return tpl
18 | }
19 |
20 | export default (props) => {
21 | if (!isServer) {
22 | console.debug('Topic props', props)
23 | }
24 |
25 | const { pageContext } = props
26 | const file = props.data.file
27 | let wikiLinkLabelTemplateFn = null
28 | if (pageContext.wikiLinkLabelTemplate) {
29 | wikiLinkLabelTemplateFn = function (data) {
30 | try {
31 | return evaluateTemplate(props.pageContext.wikiLinkLabelTemplate, data)
32 | } catch (error) {
33 | console.error('error while evaluateTemplate', error)
34 | }
35 | }
36 | }
37 |
38 | const tocTypes = ('tocTypes' in pageContext ? pageContext.tocTypes: null) || []
39 | const showInlineTOC = tocTypes && tocTypes.includes('inline')
40 | const showSidebarTOC = tocTypes && tocTypes.includes('sidebar')
41 |
42 | return (
43 |
44 |
53 | )
54 | }
55 |
56 | export const pageQuery = graphql`
57 | query($id: String!) {
58 | file(id: { eq: $id }) {
59 | childMdx {
60 | body
61 | frontmatter {
62 | title
63 | private
64 | }
65 | tableOfContents
66 | ...GatsbyGardenReferences
67 | }
68 | fields {
69 | slug
70 | title
71 | }
72 | }
73 | }
74 | `
75 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/type.ts:
--------------------------------------------------------------------------------
1 | export type PageContext = {
2 | id: string
3 | }
4 |
5 | export type Reference = {
6 | target: {
7 | __typename: string
8 | body: string
9 | parent: SimpleFileNode
10 | }
11 | targetAnchor?: string
12 | refWord: string
13 | referrer: {
14 | parent: SimpleFileNode
15 | }
16 | contextLine: string
17 | label?: string
18 | }
19 |
20 | export type SimpleFileNode = {
21 | id: string
22 | fields: {
23 | title: string
24 | slug: string
25 | }
26 | }
27 |
28 | export type TopicFlie = {
29 | id: string
30 | fields: {
31 | slug: string
32 | title: string
33 | }
34 | childMdx: {
35 | body: string
36 | inboundReferences: Reference[]
37 | outboundReferences: Reference[]
38 | frontmatter: {
39 | title: string
40 | }
41 | tableOfContents: TableOfContents
42 | }
43 | }
44 |
45 | export type WikiLinkLabelTemplateFn = (data: { refWord: string; title: string }) => string
46 |
47 | /**
48 | * Table of content item generated by remark
49 | */
50 | export type TOCItem = {
51 | items?: TOCItem[]
52 | title: string
53 | url: string
54 | }
55 |
56 | export type TableOfContents = TOCItem
57 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/use-graph-data.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from 'react'
2 | import { useStaticQuery, graphql } from 'gatsby'
3 | import type { Note } from 'note-graph'
4 | import { Reference, TopicFlie } from './type'
5 |
6 | export const useGraphData = () => {
7 | const data: { allFile: { nodes: TopicFlie[] } } = useStaticQuery(graphql`
8 | {
9 | allFile {
10 | nodes {
11 | id
12 | fields {
13 | title
14 | slug
15 | }
16 | childMdx {
17 | inboundReferences {
18 | referrer {
19 | ... on Mdx {
20 | parent {
21 | id
22 | }
23 | }
24 | }
25 | }
26 | outboundReferences {
27 | target {
28 | ... on Mdx {
29 | parent {
30 | id
31 | }
32 | }
33 | }
34 | }
35 | }
36 | }
37 | }
38 | }
39 | `)
40 |
41 | const { notesMap, fileNodesMap } = useMemo(() => {
42 | const notes: Note[] = []
43 | const notesMap = new Map()
44 | const fileNodesMap = new Map()
45 | data.allFile.nodes.forEach((node) => {
46 | if (!node.fields || !node.fields.slug) {
47 | return
48 | }
49 | fileNodesMap.set(node.id, node)
50 |
51 | const note: Note = {
52 | id: node.id,
53 | title: node.fields.title,
54 | linkTo: [],
55 | referencedBy: [],
56 | }
57 | notes.push(note)
58 | notesMap.set(node.id, note)
59 |
60 | node.childMdx.inboundReferences.forEach((x: Reference) => {
61 | note.referencedBy && x.referrer.parent?.id && note.referencedBy.push(x.referrer.parent.id)
62 | })
63 |
64 | node.childMdx.outboundReferences.forEach((x: Reference) => {
65 | note.linkTo && note.linkTo.push(x.target.parent.id)
66 | })
67 | })
68 |
69 | return { notesMap, fileNodesMap }
70 | }, [data])
71 |
72 | return { notesMap, fileNodesMap }
73 | }
74 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/use-search.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, useMemo } from 'react'
2 | import FlexSearch from 'flexsearch'
3 | import { graphql, useStaticQuery } from 'gatsby'
4 |
5 | export type SearchResult = {
6 | id: string
7 | path: string
8 | title: string
9 | excerpt?: any
10 | }
11 |
12 | export const LOADING_ID = 'loading'
13 |
14 | export default (query: string, opts: { searchOptions?: any } = {}): SearchResult[] => {
15 | const [store, setStore] = useState(null)
16 | const [pathIndex, setPathIndex] = useState(null)
17 | const [titleIndex, setTitleIndex] = useState(null)
18 | const [bodyIndex, setBodyIndex] = useState(null)
19 | // has fetched search indices
20 | const [hasFetched, setHasFetched] = useState(false)
21 |
22 | const searchOptions = opts.searchOptions || {}
23 |
24 | const data = useStaticQuery(graphql`
25 | query SearchBarQuery {
26 | localSearchPaths {
27 | publicIndexURL
28 | publicStoreURL
29 | }
30 | localSearchTitles {
31 | publicIndexURL
32 | }
33 | localSearchBodies {
34 | publicIndexURL
35 | }
36 | }
37 | `)
38 | // console.log('use-search data is', data)
39 |
40 | useEffect(() => {
41 | if (hasFetched || !query) return
42 |
43 | setHasFetched(true)
44 |
45 | fetch(data.localSearchPaths.publicIndexURL)
46 | .then((result) => result.text())
47 | .then((res) => {
48 | const importedIndex = FlexSearch.create()
49 | importedIndex.import(res)
50 |
51 | setPathIndex(importedIndex)
52 | })
53 | fetch(data.localSearchTitles.publicIndexURL)
54 | .then((result) => result.text())
55 | .then((res) => {
56 | const importedIndex = FlexSearch.create()
57 | importedIndex.import(res)
58 |
59 | setTitleIndex(importedIndex)
60 | })
61 | fetch(data.localSearchBodies.publicIndexURL)
62 | .then((result) => result.text())
63 | .then((res) => {
64 | const importedIndex = FlexSearch.create()
65 | importedIndex.import(res)
66 |
67 | setBodyIndex(importedIndex)
68 | })
69 | fetch(data.localSearchPaths.publicStoreURL)
70 | .then((result) => result.json())
71 | .then((res) => {
72 | setStore(res)
73 | })
74 | }, [setPathIndex, setTitleIndex, setBodyIndex, setStore, data, query])
75 |
76 | return useMemo(() => {
77 | if (!query || !store || (!pathIndex && !bodyIndex && !titleIndex))
78 | return [
79 | {
80 | id: LOADING_ID,
81 | title: '',
82 | excerpt:
,
83 | },
84 | ]
85 |
86 | const rawPathResults = pathIndex
87 | ? pathIndex.search(query, searchOptions)
88 | : []
89 | const rawBodyResults = bodyIndex
90 | ? bodyIndex.search(query, searchOptions)
91 | : []
92 | const rawTitleResults = titleIndex
93 | ? titleIndex.search(query, searchOptions)
94 | : []
95 |
96 | const uniqIds = new Set()
97 |
98 | return (
99 | rawPathResults
100 | .concat(rawTitleResults)
101 | .concat(rawBodyResults)
102 | .filter((id) => {
103 | if (uniqIds.has(id)) {
104 | return false
105 | }
106 | uniqIds.add(id)
107 | return true
108 | })
109 | .map((id) => store[id])
110 | )
111 | }, [query, pathIndex, titleIndex, bodyIndex, store, searchOptions])
112 | }
113 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/use-window-size.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react'
2 |
3 | export function useWindowSize() {
4 | const isClient = typeof window === 'object'
5 |
6 | function getSize() {
7 | return {
8 | width: isClient ? window.innerWidth : 0,
9 | height: isClient ? window.innerHeight : 0,
10 | }
11 | }
12 |
13 | const [windowSize, setWindowSize] = useState(getSize)
14 |
15 | useEffect(() => {
16 | if (isClient) {
17 | return () => null
18 | }
19 | function handleResize() {
20 | setWindowSize(getSize())
21 | }
22 |
23 | window.addEventListener('resize', handleResize)
24 | return () => window.removeEventListener('resize', handleResize)
25 | }, []) // eslint-disable-line react-hooks/exhaustive-deps
26 | // Empty array ensures that effect is only run on mount and unmount
27 |
28 | return windowSize
29 | }
30 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export function recursivelyCallNode(node: T, getNextNode: (node: T) => T | void, cb: (node: T) => void) {
2 | cb(node)
3 | const nextNode = getNextNode(node)
4 | if (nextNode) {
5 | recursivelyCallNode(nextNode, getNextNode, cb)
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/src/utils/toc.ts:
--------------------------------------------------------------------------------
1 | import slugify from 'slugify'
2 |
3 | export function slugifyTitle(str: string) {
4 | return slugify(str)
5 | }
6 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | purge: false, // gatsby-plugin-purgecss will do
3 | darkMode: 'class', // or 'media' or 'class'
4 | theme: {
5 | extend: {},
6 | },
7 | variants: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | }
12 |
--------------------------------------------------------------------------------
/packages/gatsby-theme-kb/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "esnext",
4 | "lib": ["dom", "esnext"],
5 | "importHelpers": true,
6 | "declaration": true,
7 | "sourceMap": true,
8 | "strict": true,
9 | "noUnusedLocals": true,
10 | "noUnusedParameters": true,
11 | "noImplicitReturns": true,
12 | "noImplicitAny": false,
13 | "noFallthroughCasesInSwitch": true,
14 | "moduleResolution": "node",
15 | "skipLibCheck": true,
16 | "jsx": "react",
17 | "esModuleInterop": true,
18 | "baseUrl": ".",
19 | "paths": {
20 | "src/*": ["./src"]
21 | },
22 | "typeRoots": ["./node_modules/@types", "./typings"]
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to this project will be documented in this file.
4 | See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5 |
6 | # [0.3.0-alpha.2](https://github.com/hikerpig/gatsby-project-kb/compare/@gatsby-project-kb/transformer-wiki-references@0.3.0-alpha.1...@gatsby-project-kb/transformer-wiki-references@0.3.0-alpha.2) (2021-04-28)
7 |
8 |
9 | ### Features
10 |
11 | * **transformer-wiki-references:** change lifecycle from 'source-nodes' to 'onPreBootstrap' ([4d35818](https://github.com/hikerpig/gatsby-project-kb/commit/4d35818598833e4741a9eec5eab13f4d21a92b59))
12 |
13 |
14 |
15 |
16 |
17 | # [0.3.0-alpha.1](https://github.com/hikerpig/gatsby-project-kb/compare/@gatsby-project-kb/transformer-wiki-references@0.3.0-alpha.0...@gatsby-project-kb/transformer-wiki-references@0.3.0-alpha.1) (2021-04-07)
18 |
19 |
20 | ### Bug Fixes
21 |
22 | * should ignore directory in contentTree ([5d14716](https://github.com/hikerpig/gatsby-project-kb/commit/5d14716a9287ac1d12e52f43105535c851c582fb))
23 |
24 |
25 | ### Features
26 |
27 | * will pass `ignore` option to @gatsby-project-kb/transformer-wiki-references ([547b98b](https://github.com/hikerpig/gatsby-project-kb/commit/547b98b1dfd03b8f3c3171ade9bc43d0b35db6d6))
28 |
29 |
30 |
31 |
32 |
33 | # [0.3.0-alpha.0](https://github.com/hikerpig/gatsby-project-kb/compare/@gatsby-project-kb/transformer-wiki-references@0.2.1...@gatsby-project-kb/transformer-wiki-references@0.3.0-alpha.0) (2021-04-02)
34 |
35 |
36 | ### Features
37 |
38 | * Add anchor reference support, related [#8](https://github.com/hikerpig/gatsby-project-kb/issues/8) ([3c0d13a](https://github.com/hikerpig/gatsby-project-kb/commit/3c0d13a78146dc9b6bf1215af367fbd1e3a999d4))
39 | * better wiki references resolving with `contentPath` option ([46b66a9](https://github.com/hikerpig/gatsby-project-kb/commit/46b66a973bbdd702dfadb523e9ab0ab91ed1d417))
40 |
41 |
42 |
43 |
44 |
45 | ## [0.2.1](https://github.com/hikerpig/gatsby-project-kb/compare/@gatsby-project-kb/transformer-wiki-references@0.2.0...@gatsby-project-kb/transformer-wiki-references@0.2.1) (2021-02-14)
46 |
47 |
48 | ### Bug Fixes
49 |
50 | * backlink should show referrer title and link ([8e89b4d](https://github.com/hikerpig/gatsby-project-kb/commit/8e89b4d22f85a2dc3b0f4902f9530a4692e81161))
51 |
52 |
53 |
54 |
55 |
56 | # [0.2.0](https://github.com/hikerpig/gatsby-project-kb/compare/@gatsby-project-kb/transformer-wiki-references@0.1.2...@gatsby-project-kb/transformer-wiki-references@0.2.0) (2021-02-13)
57 |
58 |
59 | ### Features
60 |
61 | * **gatsby-theme-kb:** show backlink context, related [#1](https://github.com/hikerpig/gatsby-project-kb/issues/1) ([685b92c](https://github.com/hikerpig/gatsby-project-kb/commit/685b92c3970116cc593581f52ecc6e0b66b0c146))
62 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/README.md:
--------------------------------------------------------------------------------
1 | # `@gatsby-project-kb/transformer-wiki-references`
2 |
3 | A gatsby transformer plugin to extract references between markdown nodes. You can then use them to create bi-directional links.
4 |
5 | Forked from [mathieudutour/gatsby-digital-garden](https://github.com/mathieudutour/gatsby-digital-garden/tree/master/packages/gatsby-transformer-markdown-references).
6 |
7 | An example site for using this plugin is at [https://wiki.hikerpig.cn/](https://wiki.hikerpig.cn/).
8 |
9 |
10 | ## Install
11 |
12 | ```
13 | yarn add @gatsby-project-kb/transformer-wiki-references
14 | ```
15 |
16 | ## Usage
17 |
18 | ```javascript
19 | // In your gatsby-config.js
20 | module.exports = {
21 | plugins: [
22 | // after a markdown or Mdx transformer
23 | {
24 | resolve: `@gatsby-project-kb/transformer-wiki-references`,
25 | options: {
26 | contentPath: '/home/hikerpig/Notes',
27 | types: ["Mdx"], // or ["MarkdownRemark"] (or both)
28 | ignore: [
29 | '**/.cache/**',
30 | '**/.github/**',
31 | ],
32 | },
33 | },
34 | ],
35 | };
36 | ```
37 |
38 |
39 | ### Configuration options
40 |
41 | **`contentPath`** [string][optional]
42 |
43 | The path to directory of your notes, if there are nested folders in your notes, it's recommended that this option is provided so the plugin can resolve the references correctly.
44 |
45 | **`types`** [Array][optional]
46 |
47 | The types of the nodes to transform. Defaults to `['Mdx']`
48 |
49 | **`ignore`** [Array][optional]
50 |
51 | Will be used along with `contentPath`, to filter out those files you want to ignore. Accepts globs or regexps, any format that's supported by [anymatch](https://www.npmjs.com/package/anymatch).
52 |
53 |
54 | ## How to query for references
55 |
56 | Two types of references are available: `outboundReferences` and `inboundReferences`.
57 |
58 | The fields will be created in your site's GraphQL schema on the nodes of types specified in the options.
59 |
60 | ```graphql
61 | {
62 | allMdx {
63 | outboundReferences {
64 | ... on Mdx {
65 | id
66 | parent {
67 | id
68 | }
69 | }
70 | }
71 | inboundReferences {
72 | ... on Mdx {
73 | id
74 | parent {
75 | id
76 | ... on RoamPage {
77 | title
78 | }
79 | }
80 | }
81 | }
82 | }
83 | }
84 | ```
85 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/__tests__/get-references.spec.ts:
--------------------------------------------------------------------------------
1 | import { getReferences } from '../src/get-references'
2 | import outdent from 'outdent'
3 |
4 | describe('getReferences', () => {
5 | it('get linkDefinition and wiki-links', () => {
6 | const text = outdent.string(`
7 | # Title
8 | [[link-to-1]]
9 | [[link-to-2]]
10 |
11 | [link-to-1] target-page
12 | `)
13 | const result = getReferences(text)
14 | expect(result.pages.map(o => o.target)).toEqual([
15 | 'link-to-1',
16 | 'link-to-2',
17 | 'link-to-1',
18 | ])
19 | })
20 |
21 | it('can extract multiple references of same target', () => {
22 | const text = outdent.string(`
23 | [[link]] is a wiki-link
24 | [[link]] also referenced in this line
25 | `)
26 | const result = getReferences(text)
27 | expect(result.pages.map(o => o.target)).toEqual([
28 | 'link',
29 | 'link',
30 | ])
31 | })
32 |
33 | it('get link definitions with context', () => {
34 | const text = outdent.string(`
35 | # Title
36 | [[link]] is a wiki-link
37 | `)
38 | const result = getReferences(text)
39 | expect(result.pages).toEqual([
40 | { target: 'link', contextLine: '[[link]] is a wiki-link' }
41 | ])
42 | })
43 |
44 | it('parse link hash as anchor', () => {
45 | const text = outdent.string(`
46 | [[link#anchor]] is a wiki-link with anchor
47 | `)
48 |
49 | const result = getReferences(text)
50 | expect(result.pages[0]).toMatchObject(
51 | { target: 'link', targetAnchor: 'anchor' },
52 | )
53 | })
54 |
55 | it('can extract markdown link', () => {
56 | const text = outdent.string(`
57 | [label](target) is a markdown link
58 | `)
59 |
60 | const result = getReferences(text)
61 | expect(result.pages[0]).toMatchObject(
62 | { target: 'target', label: 'label', contextLine: '[label](target) is a markdown link' },
63 | )
64 | })
65 | })
66 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/__tests__/markdown-utils.spec.ts:
--------------------------------------------------------------------------------
1 | import { findTopLevelHeading } from '../src/markdown-utils'
2 | import outdent from 'outdent'
3 |
4 | describe('findTopLevelHeading', () => {
5 | it('get the first h1', () => {
6 | const text = outdent.string(`
7 | # n1
8 | # n2
9 | ## l2
10 | `)
11 | expect(findTopLevelHeading(text)).toEqual('n1')
12 | })
13 |
14 | it('get the first settext heading', () => {
15 | const text = outdent.string(`
16 | n1
17 | ===
18 | # n2
19 | `)
20 | expect(findTopLevelHeading(text)).toEqual('n1')
21 | })
22 |
23 | it('# header should also work', () => {
24 | const text = outdent.string(`
25 | # n1
26 | n2
27 | ===
28 | `)
29 | expect(findTopLevelHeading(text)).toEqual('n1')
30 | })
31 | })
32 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/gatsby-node.js:
--------------------------------------------------------------------------------
1 | exports.onPreBootstrap = require("./lib/on-pre-bootstrap.js").onPreBootstrap;
2 | exports.onCreateNode = require("./lib/on-create-node.js").onCreateNode;
3 | exports.createSchemaCustomization = require("./lib/schema-customization").createSchemaCustomization;
4 | exports.setFieldsOnGraphQLNodeType = require("./lib/schema-customization").setFieldsOnGraphQLNodeType;
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/jest.config.js:
--------------------------------------------------------------------------------
1 | // const { defaults: tsjPreset } = require('ts-jest/presets')
2 |
3 | module.exports = {
4 | preset: 'ts-jest',
5 | testEnvironment: 'jest-environment-jsdom-sixteen',
6 | testRegex: `.*/__tests__/.*|\\.(spec)\\.tsx?$`,
7 | };
8 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@gatsby-project-kb/transformer-wiki-references",
3 | "version": "0.3.1",
4 | "description": "A gatsby transformer plugin to extract references between markdown nodes",
5 | "author": "hikerpig ",
6 | "homepage": "https://github.com/hikerpig/gatsby-project-kb#readme",
7 | "license": "MIT",
8 | "main": "lib/index.js",
9 | "directories": {
10 | "lib": "lib",
11 | "test": "__tests__"
12 | },
13 | "files": [
14 | "lib",
15 | "gatsby-*"
16 | ],
17 | "repository": {
18 | "type": "git",
19 | "url": "git+https://github.com/hikerpig/gatsby-project-kb.git"
20 | },
21 | "scripts": {
22 | "prepublish": "tsc",
23 | "test": "jest",
24 | "watch": "tsc --watch",
25 | "build": "tsc"
26 | },
27 | "bugs": {
28 | "url": "https://github.com/hikerpig/gatsby-project-kb/issues"
29 | },
30 | "devDependencies": {
31 | "@types/jest": "^26.0.20",
32 | "jest": "^26.6.3",
33 | "jest-environment-jsdom-sixteen": "^1.0.3",
34 | "outdent": "^0.8.0",
35 | "ts-jest": "^26.5.0",
36 | "typescript": "^4.1.2"
37 | },
38 | "resolutions": {
39 | "jest-environment-jsdom": "^26.0.1"
40 | },
41 | "dependencies": {
42 | "@nodelib/fs.walk": "^1.2.6",
43 | "anymatch": "^3.1.2"
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/src/cache.ts:
--------------------------------------------------------------------------------
1 | import * as fs from 'fs'
2 | import * as path from 'path'
3 | import { Node, GatsbyCache } from 'gatsby'
4 | import { nonNullable } from './util'
5 | import { References } from './get-references'
6 | import { NodeReference } from './type'
7 |
8 | export const cacheDirectory = (cache: any): string => {
9 | return cache.directory
10 | }
11 |
12 | export type CachedNode = {
13 | node: Node
14 | outboundReferences: References
15 | resolvedOutboundReferences?: NodeReference[]
16 | title: string
17 | aliases: string[]
18 | }
19 | export type InboundReferences = { [id: string]: NodeReference[] }
20 | const inboundFile = `___inboundReferences.json`
21 |
22 | export const getAllCachedNodes = async (cache: GatsbyCache, getNode: Function) => {
23 | const dir = cacheDirectory(cache)
24 | const files = await fs.promises.readdir(dir)
25 |
26 | return (
27 | await Promise.all(
28 | files.map((f) => {
29 | if (f === inboundFile) {
30 | return
31 | }
32 | const id = decodeURIComponent(f.replace(/\.json$/, ''))
33 | return getCachedNode(cache, id, getNode)
34 | })
35 | )
36 | ).filter(nonNullable)
37 | }
38 |
39 | export const setCachedNode = (cache: GatsbyCache, id: string, data: CachedNode) => {
40 | return fs.promises.writeFile(
41 | path.join(cacheDirectory(cache), `${encodeURIComponent(id)}.json`),
42 | JSON.stringify({
43 | outboundReferences: data.outboundReferences,
44 | title: data.title,
45 | aliases: data.aliases,
46 | resolvedOutboundReferences: data.resolvedOutboundReferences,
47 | })
48 | )
49 | }
50 |
51 | export const getCachedNode = async (
52 | cache: GatsbyCache,
53 | id: string,
54 | getNode: Function
55 | ): Promise => {
56 | const node = getNode(id)
57 |
58 | if (!node) {
59 | try {
60 | // clean up the cache if we have some file that aren't node
61 | await fs.promises.unlink(
62 | path.join(cacheDirectory(cache), `${encodeURIComponent(id)}.json`)
63 | )
64 | } catch (err) {}
65 | return undefined
66 | }
67 |
68 | try {
69 | const data = JSON.parse(
70 | await fs.promises.readFile(
71 | path.join(cacheDirectory(cache), `${encodeURIComponent(id)}.json`),
72 | 'utf8'
73 | )
74 | )
75 |
76 | return { node, ...data }
77 | } catch (err) {
78 | return undefined
79 | }
80 | }
81 |
82 | export const setInboundReferences = (cache: any, data: InboundReferences) => {
83 | return fs.promises.writeFile(
84 | path.join(cacheDirectory(cache), inboundFile),
85 | JSON.stringify(data)
86 | )
87 | }
88 |
89 | export const getInboundReferences = async (
90 | cache: any
91 | ): Promise => {
92 | try {
93 | return JSON.parse(
94 | await fs.promises.readFile(
95 | path.join(cacheDirectory(cache), inboundFile),
96 | 'utf8'
97 | )
98 | )
99 | } catch (err) {
100 | return undefined
101 | }
102 | }
103 |
104 | export const clearInboundReferences = async (cache: any) => {
105 | try {
106 | await fs.promises.unlink(path.join(cacheDirectory(cache), inboundFile))
107 | } catch (e) {}
108 | }
109 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/src/compute-inbounds.ts:
--------------------------------------------------------------------------------
1 | import { basename, extname } from 'path'
2 | import { GatsbyCache } from 'gatsby'
3 | import { nonNullable } from './util'
4 | import {
5 | getAllCachedNodes,
6 | setCachedNode,
7 | setInboundReferences,
8 | InboundReferences,
9 | CachedNode,
10 | } from './cache'
11 | import { MdxNode, NodeReference } from './type'
12 | import { Reference } from './get-references'
13 | import { ContentNode, ContentTree, CONTEXT_TREE_CACHE_KEY } from './content-tree'
14 |
15 | function hasChildInArrayExcept(
16 | node: MdxNode,
17 | array: MdxNode[],
18 | except: string,
19 | getNode: (id: string) => MdxNode | undefined
20 | ): boolean {
21 | return node.children.some((id) => {
22 | if (id === except) {
23 | return false
24 | }
25 |
26 | if (array.some((x) => x.id === id)) {
27 | return true
28 | }
29 |
30 | const child = getNode(id)
31 | if (!child || !child.children || !child.children.length) {
32 | return false
33 | }
34 |
35 | return hasChildInArrayExcept(child, array, except, getNode)
36 | })
37 | }
38 |
39 | let currentGeneration: Promise | undefined
40 |
41 | function getFilePathFromCachedNode(x: CachedNode) {
42 | let filePath: string
43 | if (typeof x.node.fileAbsolutePath === 'string') {
44 | filePath = x.node.fileAbsolutePath
45 | } else if (typeof x.node.absolutePath === 'string') {
46 | filePath = x.node.absolutePath
47 | }
48 | return filePath
49 | }
50 |
51 | export async function generateData(cache: GatsbyCache, getNode: Function) {
52 | if (currentGeneration) {
53 | return currentGeneration
54 | }
55 |
56 | currentGeneration = Promise.resolve().then(async () => {
57 | const nodes = await getAllCachedNodes(cache, getNode)
58 | const inboundReferences: InboundReferences = {}
59 |
60 | let tree: ContentTree
61 | let cachedNodeToContentNodeMap: Map
62 | const contextTreeRepr = await cache.get(CONTEXT_TREE_CACHE_KEY)
63 | if (contextTreeRepr) {
64 | tree = ContentTree.fromRepr(contextTreeRepr)
65 |
66 | cachedNodeToContentNodeMap = new Map()
67 | nodes.forEach((cachedNode) => {
68 | const filePath = getFilePathFromCachedNode(cachedNode)
69 | if (!filePath) return
70 | const contentNode = tree.getNode(filePath)
71 | if (contentNode) {
72 | cachedNodeToContentNodeMap.set(cachedNode, contentNode)
73 | }
74 | })
75 | }
76 |
77 | function getRefNode(ref: Reference) {
78 | const title = ref.target
79 | if (!title) return
80 | let node = nodes.find((x) => {
81 | if (x.title === title || x.aliases.some((alias) => alias === title)) {
82 | return true
83 | }
84 |
85 | const filePath = getFilePathFromCachedNode(x)
86 | if (filePath) {
87 | if (tree) {
88 | if (cachedNodeToContentNodeMap.has(x)) {
89 | const contentNodeByTitle = tree.getNode(title)
90 | if (contentNodeByTitle === cachedNodeToContentNodeMap.get(x)) {
91 | return true
92 | }
93 | }
94 | } else {
95 | return basename(filePath, extname(filePath)) === title
96 | }
97 | }
98 | })
99 | return node
100 | }
101 |
102 | await Promise.all(
103 | nodes
104 | .map((node) => {
105 | const mapped = node.outboundReferences.pages
106 | .map((reference) => {
107 | const cachedNode = getRefNode(reference)
108 | if (!cachedNode) return null
109 | return {
110 | contextLine: reference.contextLine,
111 | target: cachedNode.node,
112 | referrer: reference.referrerNode,
113 | refWord: reference.label || reference.target,
114 | label: reference.label,
115 | targetAnchor: reference.targetAnchor,
116 | } as NodeReference
117 | })
118 | .filter(nonNullable)
119 |
120 | mapped.forEach((item) => {
121 | const nodeId = item.target.id
122 | if (!inboundReferences[nodeId]) {
123 | inboundReferences[nodeId] = []
124 | }
125 | inboundReferences[nodeId].push({
126 | contextLine: item.contextLine,
127 | target: item.target,
128 | referrer: node.node,
129 | refWord: item.refWord,
130 | })
131 | })
132 |
133 | return {
134 | ...node,
135 | resolvedOutboundReferences: mapped,
136 | }
137 | })
138 | .map((data) => setCachedNode(cache, data.node.id, data))
139 | )
140 |
141 | Object.keys(inboundReferences).forEach((nodeId) => {
142 | inboundReferences[nodeId] = inboundReferences[nodeId].filter(
143 | (reference) =>
144 | getNode(reference.target.parent) &&
145 | !hasChildInArrayExcept(
146 | getNode(reference.target.parent),
147 | inboundReferences[nodeId].map((o) => o.target),
148 | reference.target.id,
149 | getNode as any
150 | )
151 | )
152 | })
153 |
154 | await setInboundReferences(cache, inboundReferences)
155 |
156 | currentGeneration = undefined
157 |
158 | return true
159 | })
160 |
161 | return currentGeneration
162 | }
163 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/src/content-tree.ts:
--------------------------------------------------------------------------------
1 | import * as path from 'path'
2 |
3 | export const CONTEXT_TREE_CACHE_KEY = 'content-tree-repr'
4 |
5 | export class ContentNode {
6 | constructor(public data: T) {}
7 | }
8 |
9 | export class ContentTree {
10 | pathMap = new Map()
11 | shortPathMap = new Map()
12 | keyMap = new Map()
13 | nodes = new Set()
14 |
15 | constructor(public rootNode: ContentNode) {}
16 |
17 | static fromRepr(repr: string) {
18 | const { nodes, rootPath } = JSON.parse(repr)
19 | const tree = new ContentTree(
20 | new ContentNode({
21 | name: rootPath,
22 | path: rootPath,
23 | key: rootPath,
24 | })
25 | )
26 | nodes.forEach((node) => {
27 | tree.add(node)
28 | })
29 | return tree
30 | }
31 |
32 | add(node: ContentNode) {
33 | const p = node.data.path
34 | this.pathMap.set(node.data.path, node)
35 | this.keyMap.set(node.data.key, node)
36 |
37 | const extLength = path.extname(p).length
38 | const pathWithoutExt = p.slice(0, -extLength)
39 | this.shortPathMap.set(pathWithoutExt, node)
40 |
41 | this.nodes.add(node)
42 | }
43 |
44 | getByName(p: string) {
45 | return this.keyMap.get(p)
46 | }
47 |
48 | serialize(): string {
49 | const nodes = Array.from(this.nodes)
50 | return JSON.stringify({ nodes, rootPath: this.rootNode.data.name }, null, 2)
51 | }
52 |
53 | getNode(input: string) {
54 | const relPath = path.relative(this.rootNode.data.name, input)
55 | const key = path.basename(relPath)
56 | if (this.pathMap.has(relPath)) return this.pathMap.get(relPath)
57 | if (this.shortPathMap.has(relPath)) return this.shortPathMap.get(relPath)
58 | if (this.keyMap.has(key)) return this.keyMap.get(key)
59 | }
60 | }
61 |
62 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/src/get-references.ts:
--------------------------------------------------------------------------------
1 | import { cleanupMarkdown, findInMarkdownLines } from './markdown-utils'
2 | import { MdxNode } from './type'
3 |
4 | export type References = {
5 | pages: Reference[]
6 | }
7 |
8 | export type Reference = {
9 | /** target page slug */
10 | target: string
11 | targetAnchor?: string
12 | contextLine: string
13 | referrerNode?: MdxNode
14 | label?: string
15 | }
16 |
17 | export function rxWikiLink(): RegExp {
18 | const pattern = '\\[\\[([^\\]]+)\\]\\]' // [[wiki-link-regex]]
19 | return new RegExp(pattern, 'ig')
20 | }
21 |
22 | export function rxBlockLink(): RegExp {
23 | const pattern = '\\(\\(([^\\]]+)\\)\\)' // ((block-link-regex))
24 | return new RegExp(pattern, 'ig')
25 | }
26 |
27 | export function rxHashtagLink(): RegExp {
28 | const pattern = '(?:^|\\s)#([^\\s]+)' // #hashtag
29 | return new RegExp(pattern, 'ig')
30 | }
31 |
32 | const getLinkDefinitionPattern = () => /^\[([\d\w-_]+)\]\s+(.*)/ig // [defintion]: target
33 |
34 | export function rxMarkdownLink(): RegExp {
35 | // const pattern = '\\[\\[([^\\]]+)\\]\\]' // [](markdown-link)
36 | const pattern = /\[(.*)\]\((.*)\)/ig // [](markdown-link)
37 | return pattern
38 | }
39 |
40 | function findReferenceWithPattern(md: string, pattern: RegExp): Reference[] {
41 | return findInMarkdownLines(md, pattern).map(({ lineContent, matchStr }) => {
42 | let target = matchStr
43 | let targetAnchor: string
44 | const hashIndex = matchStr.indexOf('#')
45 | if (hashIndex > -1) {
46 | target = matchStr.substring(0, hashIndex)
47 | targetAnchor = matchStr.substring(hashIndex + 1)
48 | }
49 | const ref: Reference = {
50 | target,
51 | contextLine: lineContent,
52 | }
53 | if (targetAnchor !== undefined) {
54 | ref.targetAnchor = targetAnchor
55 | }
56 | return ref
57 | })
58 | }
59 |
60 | function findMarkdownLinkReference(md: string) {
61 | const pattern = rxMarkdownLink()
62 | return findInMarkdownLines(md, pattern).map(({ lineContent, match }) => {
63 | let [_, label, target] = match
64 | const ref: Reference = {
65 | target,
66 | contextLine: lineContent,
67 | label,
68 | }
69 | return ref
70 | })
71 | }
72 |
73 | export const getReferences = (string: string, onReferenceAdd?: (ref: Reference) => Reference) => {
74 | const md = cleanupMarkdown(string)
75 | onReferenceAdd = onReferenceAdd || ((o) => o)
76 |
77 | const references: References = {
78 | pages: [
79 | ...findReferenceWithPattern(md, rxHashtagLink()),
80 | ...findReferenceWithPattern(md, rxWikiLink()),
81 | ...findReferenceWithPattern(md, getLinkDefinitionPattern()),
82 | ...findMarkdownLinkReference(md),
83 | ].map(o => onReferenceAdd(o)),
84 | }
85 |
86 | return references
87 | }
88 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './markdown-utils'
2 | export * from './type'
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/src/markdown-utils.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Adapted from vscode-markdown/src/util.ts
3 | * https://github.com/yzhang-gh/vscode-markdown/blob/master/src/util.ts
4 | */
5 |
6 | export const REGEX_FENCED_CODE_BLOCK = /^( {0,3}|\t)```[^`\r\n]*$[\w\W]+?^( {0,3}|\t)``` *$/gm
7 |
8 | const SETTEXT_REGEX = /(.*)\n={3,}/
9 |
10 | export function markdownHeadingToPlainText(text: string) {
11 | // Remove Markdown syntax (bold, italic, links etc.) in a heading
12 | // For example: `_italic_` -> `italic`
13 | return text.replace(/\[([^\]]*)\]\[[^\]]*\]/, (_, g1) => g1)
14 | }
15 |
16 | export function rxMarkdownHeading(level: number): RegExp {
17 | const pattern = `^#{${level}}\\s+(.+)$`
18 | return new RegExp(pattern, 'im')
19 | }
20 |
21 | export function findTopLevelHeading(md: unknown): string | null {
22 | if (typeof md !== 'string') {
23 | return null
24 | }
25 |
26 | const headingRegex = rxMarkdownHeading(1)
27 | const headingMatch = headingRegex.exec(md)
28 | const settextMatch = SETTEXT_REGEX.exec(md)
29 | let match = headingMatch
30 | if (settextMatch && (!headingMatch || settextMatch.index < headingMatch.index)) {
31 | match = settextMatch
32 | }
33 | if (match) {
34 | return markdownHeadingToPlainText(match[1])
35 | }
36 |
37 | return null
38 | }
39 |
40 | export function cleanupMarkdown(markdown: string) {
41 | const replacer = (foundStr: string) => foundStr.replace(/[^\r\n]/g, '')
42 | return markdown
43 | .replace(REGEX_FENCED_CODE_BLOCK, replacer) //// Remove fenced code blocks
44 | .replace(//g, replacer) //// Remove comments
45 | .replace(/^---[\W\w]+?(\r?\n)---/, replacer) //// Remove YAML front matter
46 | }
47 |
48 | export function findInMarkdown(markdown: string, regex: RegExp): string[] {
49 | const unique = new Set()
50 |
51 | let match
52 | while ((match = regex.exec(markdown))) {
53 | const [, name] = match
54 | if (name) {
55 | unique.add(name)
56 | }
57 | }
58 |
59 | return Array.from(unique)
60 | }
61 |
62 | export function findInMarkdownLines(markdown: string, regex: RegExp) {
63 | const lines = markdown.split('\n')
64 | const result: {
65 | matchStr: string
66 | lineContent: string
67 | match: RegExpMatchArray | undefined
68 | lineNum: number
69 | }[] = []
70 |
71 | lines.forEach((lineContent, lineNum) => {
72 | let match
73 | regex.lastIndex = 0
74 | while ((match = regex.exec(lineContent))) {
75 | const [, name] = match
76 | if (name) {
77 | result.push({ matchStr: name, match, lineContent, lineNum })
78 | }
79 | }
80 | })
81 | return result
82 | }
83 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/src/on-create-node.ts:
--------------------------------------------------------------------------------
1 | import { CreateNodeArgs, Node } from 'gatsby'
2 | import { getReferences } from './get-references'
3 | import { PluginOptions, resolveOptions } from './options'
4 | import { clearInboundReferences, setCachedNode } from './cache'
5 | import { findTopLevelHeading } from './markdown-utils'
6 | import { MdxNode } from './type'
7 |
8 |
9 | function getTitle(node: MdxNode, content: string) {
10 | if (
11 | typeof node.frontmatter === 'object' &&
12 | node.frontmatter &&
13 | 'title' in node.frontmatter &&
14 | node.frontmatter['title']
15 | ) {
16 | return node.frontmatter['title'] as string
17 | }
18 | return findTopLevelHeading(content) || ''
19 | }
20 |
21 | function getAliases(node: MdxNode) {
22 | if (
23 | typeof node.frontmatter === 'object' &&
24 | node.frontmatter &&
25 | 'aliases' in node.frontmatter &&
26 | Array.isArray(node.frontmatter['aliases'])
27 | ) {
28 | return node.frontmatter['aliases'] as string[]
29 | }
30 | return []
31 | }
32 |
33 | export const onCreateNode = async (
34 | { cache, node, loadNodeContent, getNode }: CreateNodeArgs,
35 | _options?: PluginOptions
36 | ) => {
37 | const options = resolveOptions(_options)
38 |
39 | // if we shouldn't process this node, then return
40 | if (!options.types.includes(node.internal.type)) {
41 | return
42 | }
43 |
44 | const content = await loadNodeContent(node)
45 |
46 | const outboundReferences = getReferences(content, (ref) => {
47 | ref.referrerNode = node
48 | return ref
49 | })
50 |
51 | const title = getTitle(node as MdxNode, content)
52 | const aliases = getAliases(node as MdxNode)
53 |
54 | await clearInboundReferences(cache)
55 | await setCachedNode(cache, node.id, {
56 | node,
57 | outboundReferences,
58 | title,
59 | aliases,
60 | })
61 | }
62 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/src/on-pre-bootstrap.ts:
--------------------------------------------------------------------------------
1 | import { ParentSpanPluginArgs } from 'gatsby'
2 | import * as path from 'path'
3 | import * as fsWalk from '@nodelib/fs.walk'
4 | import { PluginOptions, resolveOptions } from './options'
5 | import { ContentTree, ContentNode, CONTEXT_TREE_CACHE_KEY } from './content-tree'
6 | import anymatch from 'anymatch'
7 |
8 | export const onPreBootstrap = async (
9 | { cache }: ParentSpanPluginArgs,
10 | _options?: PluginOptions
11 | ) => {
12 | const options = resolveOptions(_options)
13 | const { contentPath, extensions, ignore } = options
14 | if (!options.contentPath) return
15 |
16 | const tree = new ContentTree(
17 | new ContentNode({
18 | name: contentPath,
19 | path: contentPath,
20 | key: contentPath,
21 | })
22 | )
23 |
24 | const entries: fsWalk.Entry[] = fsWalk
25 | .walkSync(contentPath, {
26 | basePath: '',
27 | deepFilter: (entry) => {
28 | return !/\/node_modules\//.test(entry.path)
29 | },
30 | entryFilter: (entry) => {
31 | if (ignore) {
32 | return !anymatch(ignore, entry.path)
33 | }
34 | return true
35 | }
36 | })
37 | .filter((entry) => {
38 | if (entry.dirent.isDirectory()) return false
39 | if (!extensions.includes(path.extname(entry.name))) {
40 | return false
41 | }
42 | return true
43 | })
44 | // walk the contentPath and collect all possible files,
45 | // then write the constructed file tree to gatsby cache for further usage in `setFieldsOnGraphQLNodeType` phase
46 | entries.forEach((entry) => {
47 | const node = new ContentNode({
48 | name: entry.name,
49 | path: entry.path,
50 | key: path.basename(entry.name, path.extname(entry.name)),
51 | })
52 | tree.add(node)
53 | })
54 | const repr = tree.serialize()
55 | await cache.set(CONTEXT_TREE_CACHE_KEY, repr)
56 | }
57 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/src/options.ts:
--------------------------------------------------------------------------------
1 | export type PluginOptions = {
2 | types?: string[]
3 | extensions?: string[]
4 | contentPath?: string
5 | ignore?: string[]
6 | }
7 |
8 | const defaultOptions = {
9 | types: ['Mdx'],
10 | extensions: ['.md', '.mdx'],
11 | }
12 |
13 | export const resolveOptions = (options?: PluginOptions) => {
14 | return { ...defaultOptions, ...options }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/src/schema-customization.ts:
--------------------------------------------------------------------------------
1 | import {
2 | CreateSchemaCustomizationArgs,
3 | SetFieldsOnGraphQLNodeTypeArgs,
4 | Node,
5 | } from 'gatsby'
6 | import { PluginOptions, resolveOptions } from './options'
7 | import { generateData } from './compute-inbounds'
8 | import { getCachedNode, getInboundReferences } from './cache'
9 | import { nonNullable } from './util'
10 | import { NodeReference } from './type'
11 |
12 | export const createSchemaCustomization = (
13 | { actions }: CreateSchemaCustomizationArgs,
14 | _options?: PluginOptions
15 | ) => {
16 | const options = resolveOptions(_options)
17 | actions.createTypes(`
18 | union ReferenceTarget = ${options.types.join(' | ')}
19 |
20 | type NodeReference {
21 | target: ReferenceTarget
22 | refWord: String
23 | referrer: ReferenceTarget
24 | targetAnchor: String
25 | contextLine: String
26 | label: String
27 | }
28 | `)
29 | }
30 |
31 | export const setFieldsOnGraphQLNodeType = (
32 | { cache, type, getNode }: SetFieldsOnGraphQLNodeTypeArgs,
33 | _options?: PluginOptions
34 | ) => {
35 | const options = resolveOptions(_options)
36 |
37 | // if we shouldn't process this node, then return
38 | if (!options.types.includes(type.name)) {
39 | return {}
40 | }
41 |
42 | return {
43 | outboundReferences: {
44 | type: `[NodeReference!]!`,
45 | resolve: async (node: Node) => {
46 | let cachedNode = await getCachedNode(cache, node.id, getNode)
47 |
48 | if (!cachedNode || !cachedNode.resolvedOutboundReferences) {
49 | await generateData(cache, getNode)
50 | cachedNode = await getCachedNode(cache, node.id, getNode)
51 | }
52 |
53 | if (cachedNode && cachedNode.resolvedOutboundReferences) {
54 | return cachedNode.resolvedOutboundReferences
55 | .map((refNode) => {
56 | const { target } = refNode
57 | const targetNode = getNode(target.id)
58 | if (!targetNode) return null
59 | return {
60 | ...refNode,
61 | target: targetNode,
62 | } as NodeReference
63 | })
64 | .filter(nonNullable)
65 | }
66 |
67 | return []
68 | },
69 | },
70 | inboundReferences: {
71 | type: `[NodeReference!]!`,
72 | resolve: async (node: Node) => {
73 | let data = await getInboundReferences(cache)
74 |
75 | if (!data) {
76 | await generateData(cache, getNode)
77 | data = await getInboundReferences(cache)
78 | }
79 |
80 | if (data) {
81 | return (data[node.id] || [])
82 | .map((refNode) => {
83 | const { target } = refNode
84 | const targetNode = getNode(target.id)
85 | if (!targetNode) return null
86 | return {
87 | ...refNode,
88 | target: targetNode,
89 | } as NodeReference
90 | })
91 | .filter(nonNullable)
92 | }
93 |
94 | return []
95 | },
96 | },
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/src/type.ts:
--------------------------------------------------------------------------------
1 | import { Node } from 'gatsby'
2 |
3 | export interface MdxNode extends Node {
4 | frontmatter?: {
5 | title?: string
6 | aliases?: string[]
7 | }
8 | }
9 |
10 | /**
11 | * Used in GraphQL
12 | */
13 | export type NodeReference = {
14 | target: MdxNode
15 | refWord: string
16 | targetAnchor?: string
17 | referrer: MdxNode
18 | contextLine: string
19 | /**
20 | * Markdown relative link has this
21 | */
22 | label?: string
23 | }
24 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/src/util.ts:
--------------------------------------------------------------------------------
1 | export function nonNullable(value: T): value is NonNullable {
2 | return value !== null && value !== undefined
3 | }
4 |
--------------------------------------------------------------------------------
/packages/transformer-wiki-references/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2017",
4 | "baseUrl": ".",
5 | "outDir": "lib",
6 | "rootDir": "src",
7 | "moduleResolution": "node",
8 | "module": "commonjs",
9 | "declaration": true,
10 | "inlineSourceMap": false,
11 | "esModuleInterop": true,
12 | "lib": ["es5", "dom"],
13 | "types": ["jest", "node"],
14 | "typeRoots": ["../../node_modules/@types"],
15 | "skipLibCheck": true,
16 | "paths": {
17 | "src/*": ["./src/*"]
18 | },
19 | "jsx": "react"
20 | },
21 | "include": ["src/**/*.ts"],
22 | "exclude": ["node_modules/**"],
23 | "compileOnSave": false
24 | }
25 |
--------------------------------------------------------------------------------
/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "esnext",
4 | "lib": ["dom", "esnext"],
5 | "importHelpers": true,
6 | "declaration": true,
7 | "sourceMap": true,
8 | "strict": true,
9 | "noUnusedLocals": true,
10 | "noUnusedParameters": true,
11 | "noImplicitReturns": true,
12 | "noImplicitAny": false,
13 | "noFallthroughCasesInSwitch": true,
14 | "moduleResolution": "node",
15 | "jsx": "react",
16 | "esModuleInterop": true
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.build.json",
3 | "include": ["packages", "types", "scripts", "example"],
4 | "compilerOptions": {
5 | "allowJs": false,
6 | "baseUrl": ".",
7 | "typeRoots": ["./node_modules/@types", "./types"],
8 | "paths": {
9 | }
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
