A Gatsby Theme for Wiki/Docs/Knowledge Base, which using Primer style as the UI theme, can work well with Foam or Obsibian or just markdown files.
This theme is inspired with gatsby-project-kb, gatsby-digital-garden and doctocat
- Demo - (Source)
- Everything I Know by Owen - (Source)
- Foam Demo - (Source)
- Obsidian Demo - (Source)
- Gatsby Starter Demo - (Source)
- Support Local search, full-text search.
- SEO Optimization
- Support Graph Visualisation with Canvas.
- Support Tags, Tags First, Generating tag pages, also connecting with graph visualisation.
- Support Gitbook styled
SUMMARY.mdfor custom sidebar. - Support
[[WikiLink]] - Support Light/Dark Theme
- Custom Header Nav Items
- Nested Sidebar
- Support Prefix Path
- Support Draft Post
Here are my main ideas/principles in designing this theme.
- No vendor lock-in. The less vendor features you use, the better you'll be able to migrate.
[[Wikilink]]is the only non-markdown feature supported by default, but nonetheless, it is recommended to use the standard markdown syntax, or if you edit with Foam, please use Wikilink with Link Reference Definitions. That give us the capability change our theme, or hosted place. - Use meta data instead of special characters. We should use
tagsas the document's metadata, not#tagin the plain text. - Use tags instead of categories. Minimal subfolders.
See foam-template-gatsby-theme-primer-wiki
See obsidian-template-gatsby-theme-primer-wiki
See gatsby-starter-primer-wiki
npm i gatsby-theme-primer-wikiEdit gatsby-config.js
If you use foam template, edit
.layouts/gatsby-config.js
Example:
{
resolve: "gatsby-theme-primer-wiki",
options: {
sidebarDepth: 0,
nav: [
{
title: "Github",
url: "https://github.com/theowenyoung/gatsby-theme-primer-wiki",
},
],
editUrl: `https://github.com/theowenyoung/gatsby-theme-primer-wiki/tree/main/`,
},
},A valid config can be found here
For header navs. Support two depth levels. Example:
{
nav: [
{
title: "Github",
url: "https://github.com",
},
{
title: "Menus",
items: [
{
title: "Menu1",
url: "https://google.com",
},
],
},
];
}You remote git repo url prefix.
Advanced, use your own mdx plugin config, See https://github.com/theowenyoung/gatsby-theme-primer-wiki/blob/main/theme/gatsby-config.js#L31-L67
See here
You can use icon as your site logo path. Example:
{
"icon": "static/icon.png"
}{
nav: [],
mdxOtherwiseConfigured: false, // advanced, use your own mdx plugin config, See https://github.com/theowenyoung/gatsby-theme-primer-wiki/blob/main/theme/gatsby-config.js
remarkPlugins: [], // add gatsby-plugin-mdx remarkPlugins
rehypePlugins: [], // add gatsby-plugin-mdx rehypePlugins
gatsbyRemarkPlugins: [], // add gatsby-plugin-mdx gatsbyRemarkPlugins
extensions: [`.mdx`, ".md", ".markdown"], // supported file extensions for mdx
sidebarDefault: "auto", // first summary -> tags -> files tree , value can be auto, summary, tag, category
sidebarComponents: [], // custom sitebar components, value can be summary, latest, tag, category, example: ["summary", "latest", "tag"], if this be defined, sidebarDefault will not work.
imageMaxWidth: 561, // max width for image
contentMaxWidth: 1440, // max width for content, include right sidebar
sidebarDepth: 0, // sidebar depth, default is 0;
summaryDepth: 1, // specify summary depth if exist
summary1DepthIndent: false, // specify summary depth 0 indent, default false, not indent, when depth>1, it will indent
editUrl: "", // github/gitlab editurl, with prefix, example: 'https://github.com/facebook/docusaurus/edit/main/website/',
editUrlText: "Edit this page", // edit url text
shouldShowLastUpdated: true, // should show last updated
latestUpdatedText: "Recently Updated",
shouldShowTagGroupsOnIndex: true, // should show tags list at index page
shouldSupportTags: true, // whether support tags
tagText: "Tags",
categoryText: "Categories",
shouldSupportLatest: true, // whether support latest posts, if true, theme will generate /latest/ page show latest updated posts.
shouldShowLatestOnIndex: true, // should show latest posts on index,
defaultIndexLatestPostCount: 10, // default latest posts on index count, default is 25
rewriteUrlFileIgnore: [], // not rewrite `xxx.md` to `xxx`
rewriteToParentUrlFileIgnore: [], // not add parent path join for the file
defaultColorMode: "day", // default color mode, auto, night, day
lastUpdatedTransformer: (isoString) => {
const dateObj = new Date(isoString);
const date = dateObj.toLocaleString("en-US", {
day: "numeric",
month: "numeric",
year: "numeric",
});
return date;
},
lastUpdatedText: "Last updated on",
}Create a file named SUMMARY.md in your content directory, for the format, just following the Gitbook docs.
You can set a custom default sidebar depth using sidebarDepth, the default value is 0
You can overwrite all site theme by add src/gatsby-theme-primer-wiki/theme.js
const theme = {
colorSchemes: {
light: {
colors: {
text: {
primary: "red",
},
},
},
},
};
export default theme;See the default primer theme at here
- - excerpt as seo description
- - support mobile instant view button
- - support nav items
- - support graph view
- - release workflow
- - readme add summary
- - pathPrefix test
- - qbittorrent with jackett mobile screen overflow
- - support tags search
- - support theme
- - Docs
- - Obsidian Support
- - Theme auto mdx provider not apply dark mode
- - Show latest updates
- - theme custom
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "github-actions[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent