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
SUMMARY.md
for custom sidebar.[[WikiLink]]
Here are my main ideas/principles in designing this theme.
[[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.tags
as the document's metadata, not #tag
in the plain text.See foam-template-gatsby-theme-primer-wiki
See obsidian-template-gatsby-theme-primer-wiki
See gatsby-starter-primer-wiki
npm i gatsby-theme-primer-wiki
Edit 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