diff --git a/README.md b/README.md index 7d4a913..254b116 100644 --- a/README.md +++ b/README.md @@ -1,24 +1,83 @@

Gatsby Starter Obsidian Garden -

+ + +
+ + Star this repo on Github + + + Follow @juxtdesigncc on Twitter + +
-## Introduction +A Gatsby starter template to publish [Obsidian](https://obsidian.md/) vault for free, created by [@juxtdesigncc](https:/juxtdesign.cc/?utm_source=obsidian-garden) -A Gatsby starter template created by [@juxtdesigncc](https:/juxtdesign.cc/?utm_source=obsidian-garden) to publish Obsidian vault for free with Gatsby Cloud. + + Demo Website + -## Key Features +## πŸ’Ž Key Features + +Obsidian currently offers Publish services ($20/month) with advance features. This starter is a free alternative for Obsidian users who want to publish their digital garden as a website. Obsidian can also serve as an on-device CMS to manage your content. (Cross-platform synchronization is also possible via Obsidian Sync / [Git](https://desktopofsamuel.com/how-to-sync-obsidian-vault-for-free-using-git/?utm_source=github&utm_medium=readme&utm_id=starter-obsidian)) - Publish your [Obsidian](https://obsidian.md/) knowledge base as a website for free using Gatsby -- Support YAML (e.g. tags, publish) that also supported by Obsidian +- Support same YAML (e.g. tags, publish) as Obsidian +- Display notes' maturity, customizable stages (This template used [Maggie Appleton's metaphor](https://maggieappleton.com/garden-history) - "Seedling", "Budding", "Evergreen" as an example to illustrate notes' maturity) +- Better SEO than Obsidian Publish (Using `react-helmet` for basic SEO setup) + +--- + +## πŸš€ Getting Started + +### 1. Create a Gatsby site. + +Clone this template and navigate into the folder + +``` +git clone https://github.com/juxtdesigncc/gatsby-starter-obsidian-garden project-name +cd project-name +``` + +### 2. Install dependencies. + +Install dependencies using yarn or npm + +`yarn install` or `npm install` + +### 3. Open the code and start customizing! -## Obsidian Preference +Running `gatsby develop` or `yarn run develop` to start the site -Starting a new vault is highly recommended as Wikilinks options are not on by default. All previous notes using the `[[Wikilinks]]` will need to update. Here're a list of preferences: +Your site is now running at http://localhost:8000! + +--- + +## πŸ’» Setup + +**Read before you use your own Obsidian vault or create a new one** + +Whether you wish to use your existing Obsidian vault or start a new vault, the following Obsidian preferences has to be set up correctly. Starting a new vault is highly recommended as these options are not on by default. All existing notes using the `[[Wikilinks]]` will need to update manually. Here're a list of preferences: - Settings - Files & Links: Use [[Wikilinks]] option should be OFF. It will change the link format from `[[Wikilinks]]` to `[MarkdownLink]`. - Settings - Default location for new attachments: Should be set as 'In a folder specificed below' and create a folder named `media`, remember to update the config in `gatsby-source-filesystem` in `gatsby-config.js` if the media folder has changed. -- By default, all pages will be published directly, but add frontmatter `publish: false` if you wish to hide certain notes. +- By default, all notes will be published , but add frontmatter `publish: false` to hide a note. + +Current example vault in `/content/vault` has already implemented all the aforementioned preference settings + +## 🎯 Roadmap + +- [ ] Better SEO +- [ ] Wiki Link +- [ ] Obsidian-like node graphs + +## πŸ’ͺ🏻 Support + +Thank you for trying this out! I'm still constantly shipping new updates to this project. Stay tuned for more news! -### Why `gatsby-remark-relative-images` need to be not the latest version? +You can support this project by: -https://stackoverflow.com/questions/63698552/gatsby-node-js-threw-an-error-while-running-the-oncreatenode-lifecycle-fmimag +- Raise issues on [Github](https://github.com/juxtdesigncc/gatsby-starter-obsidian-garden/issues) if you catch any bugs +- Submit a [PR](https://github.com/juxtdesigncc/gatsby-starter-obsidian-garden/pulls) if you discovered a solution +- Share this project on Twitter and tag [me](https://twitter.com/juxtdesigncc)! +- Give me a star on [Github](https://github.com/juxtdesigncc/gatsby-starter-obsidian-garden/) diff --git a/config.js b/config.js index 74268ab..b396c23 100644 --- a/config.js +++ b/config.js @@ -3,17 +3,15 @@ module.exports = { pathPrefix: "", SITE_TITLE: "Obsidian Garden", SITE_SUBTITLE: "Gatsby Starter Made for Obsidian Users", - SITE_DESCRIPTION: "", + SITE_DESCRIPTION: + "A Gatsby starter template to publish Obsidian vault for free", KEYWORDS: "Gatsby, Starter, Obsidian, Digial Garden", HERO_TITLE: "Free Gatsby starter template to host your own digital garden for free, created for Obsidian knowledge base.", HERO_SUBTITLE: "Designed by JUXT Design", COPYRIGHT: "JUXT Design", LOCALE: "en", - postsPerPage: 6, - useKatex: false, - siteLogo: "static/profile.jpg", - userTwitter: "@juxtdesigncc", + POST_PER_PAGE: 6, MENU: [ { label: "About", @@ -44,28 +42,6 @@ module.exports = { ], AUTHOR: { NAME: "JUXT Design", - photo: "/profile.jpg", - fullbio: - "η§‘ζŠ€ | 設計 | εŸŽεΈ‚

UI/UX θ¨­θ¨ˆεΈ«οΌŒε–œζ„›ζ”ε½±οΌŒζΌ«ιŠεŸŽεΈ‚ηš„δΈεŒθ§’θ½γ€‚", - shortbio: "UI/UX θ¨­θ¨ˆεΈ«οΌŒε–œζ„›ζ”ε½±οΌŒζΌ«ιŠεŸŽεΈ‚ηš„δΈεŒθ§’θ½γ€‚", - contacts: { - instagram: "desktopofsamuel", - email: "desktopofsamuel@gmail.com", - medium: "desktop-of-samuel-wong", - twitter: "desktopofsamuel", - rss: "/rss.xml", - linkedin: "wongchunlong", - facebook: "", - figma: "", - telegram: "", - github: "", - line: "", - gitlab: "", - weibo: "", - codepen: "", - youtube: "", - vkontakte: "", - soundcloud: "", - }, + TWITTER: "@juxtdesigncc", }, }; diff --git a/gatsby-config.js b/gatsby-config.js index f8ea79f..5d9052f 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -10,7 +10,6 @@ module.exports = { description: siteConfig.description, disqusShortname: siteConfig.disqusShortname, category: siteConfig.category, - author: siteConfig.author, }, plugins: [ "gatsby-plugin-react-helmet", diff --git a/gatsby/pagination/create-categories-pages.js b/gatsby/pagination/create-categories-pages.js index 5fdc5e0..278d8d7 100644 --- a/gatsby/pagination/create-categories-pages.js +++ b/gatsby/pagination/create-categories-pages.js @@ -4,7 +4,7 @@ const siteConfig = require("../../config.js"); module.exports = async (graphql, actions) => { const { createPage } = actions; - const { postsPerPage } = siteConfig; + const { POST_PER_PAGE } = siteConfig; const result = await graphql(` { @@ -23,7 +23,7 @@ module.exports = async (graphql, actions) => { `); result.data.allMdx.group.forEach((category) => { - const numPages = Math.ceil(category.totalCount / postsPerPage); + const numPages = Math.ceil(category.totalCount / POST_PER_PAGE); const categorySlug = `/category/${kebabCase(category.fieldValue)}`; for (let i = 0; i < numPages; i += 1) { @@ -34,8 +34,8 @@ module.exports = async (graphql, actions) => { category: category.fieldValue, slug: categorySlug, currentPage: i, - postsLimit: postsPerPage, - postsOffset: i * postsPerPage, + postsLimit: POST_PER_PAGE, + postsOffset: i * POST_PER_PAGE, prevPagePath: i <= 1 ? categorySlug : `${categorySlug}/page/${i - 1}`, nextPagePath: `${categorySlug}/page/${i + 1}`, hasPrevPage: i !== 0, diff --git a/gatsby/pagination/create-posts-pages.js b/gatsby/pagination/create-posts-pages.js index bb6529c..ba74946 100644 --- a/gatsby/pagination/create-posts-pages.js +++ b/gatsby/pagination/create-posts-pages.js @@ -19,8 +19,8 @@ // } // `); -// const { postsPerPage } = siteConfig; -// const numPages = Math.ceil(result.data.allMdx.totalCount / postsPerPage); +// const { POST_PER_PAGE } = siteConfig; +// const numPages = Math.ceil(result.data.allMdx.totalCount / POST_PER_PAGE); // for (let i = 0; i < numPages; i += 1) { // createPage({ @@ -28,8 +28,8 @@ // component: path.resolve('./src/templates/index-template.tsx'), // context: { // currentPage: i, -// postsLimit: postsPerPage, -// postsOffset: i * postsPerPage, +// postsLimit: POST_PER_PAGE, +// postsOffset: i * POST_PER_PAGE, // prevPagePath: i <= 1 ? '/' : `/page/${i - 1}`, // nextPagePath: `/page/${i + 1}`, // hasPrevPage: i !== 0, diff --git a/gatsby/pagination/create-stage-pages.js b/gatsby/pagination/create-stage-pages.js index d0fb8e4..b0d5c8f 100644 --- a/gatsby/pagination/create-stage-pages.js +++ b/gatsby/pagination/create-stage-pages.js @@ -4,7 +4,7 @@ const siteConfig = require("../../config"); module.exports = async (graphql, actions) => { const { createPage } = actions; - const { postsPerPage } = siteConfig; + const { POST_PER_PAGE } = siteConfig; const result = await graphql(` { @@ -23,7 +23,7 @@ module.exports = async (graphql, actions) => { `); result.data.allMdx.group.forEach((stage) => { - const numPages = Math.ceil(stage.totalCount / postsPerPage); + const numPages = Math.ceil(stage.totalCount / POST_PER_PAGE); const stageSlug = `/stage/${kebabCase(stage.fieldValue)}`; for (let i = 0; i < numPages; i += 1) { @@ -34,8 +34,8 @@ module.exports = async (graphql, actions) => { stage: stage.fieldValue, slug: stageSlug, currentPage: i, - postsLimit: postsPerPage, - postsOffset: i * postsPerPage, + postsLimit: POST_PER_PAGE, + postsOffset: i * POST_PER_PAGE, prevPagePath: i <= 1 ? stageSlug : `${stageSlug}/page/${i - 1}`, nextPagePath: `${stageSlug}/page/${i + 1}`, hasPrevPage: i !== 0, diff --git a/gatsby/pagination/create-tags-pages.js b/gatsby/pagination/create-tags-pages.js index b7a7f1c..a631f7c 100644 --- a/gatsby/pagination/create-tags-pages.js +++ b/gatsby/pagination/create-tags-pages.js @@ -4,7 +4,7 @@ const siteConfig = require("../../config"); module.exports = async (graphql, actions) => { const { createPage } = actions; - const { postsPerPage } = siteConfig; + const { POST_PER_PAGE } = siteConfig; const result = await graphql(` { @@ -23,7 +23,7 @@ module.exports = async (graphql, actions) => { `); result.data.allMdx.group.forEach((tag) => { - const numPages = Math.ceil(tag.totalCount / postsPerPage); + const numPages = Math.ceil(tag.totalCount / POST_PER_PAGE); const tagSlug = `/tag/${kebabCase(tag.fieldValue)}`; for (let i = 0; i < numPages; i += 1) { @@ -34,8 +34,8 @@ module.exports = async (graphql, actions) => { tag: tag.fieldValue, slug: tagSlug, currentPage: i, - postsLimit: postsPerPage, - postsOffset: i * postsPerPage, + postsLimit: POST_PER_PAGE, + postsOffset: i * POST_PER_PAGE, prevPagePath: i <= 1 ? tagSlug : `${tagSlug}/page/${i - 1}`, nextPagePath: `${tagSlug}/page/${i + 1}`, hasPrevPage: i !== 0, diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 940b84a..2f3fcfd 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -7,8 +7,8 @@ import { COPYRIGHT, AUTHOR, KEYWORDS, - DESCRIPTION, - TITLE, + SITE_DESCRIPTION, + SITE_TITLE, } from "../../config"; import { Helmet } from "react-helmet"; @@ -21,15 +21,17 @@ const Layout: React.FC = ({ full, ...props }: Props) => { - const pageTitle = title || TITLE; + const pageTitle = title || SITE_TITLE; + const pageDescription = description || SITE_DESCRIPTION; + const pageKeywords = keywords || KEYWORDS; return (
{full ? ( <> - - + + @@ -42,8 +44,8 @@ const Layout: React.FC = ({ <> - - + + @@ -65,6 +67,6 @@ type Props = { description?: string; socialImage?: string; url?: string; - keywords: Array; + keywords: string; full: boolean; }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ce618c7..d3d4613 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -3,7 +3,12 @@ import { PageProps, graphql } from "gatsby"; import Header from "@/components/Header"; import Container from "@/components/Container"; import ListNote from "@/components/ListNote"; -import { HERO_TITLE, HERO_SUBTITLE } from "../../config"; +import { + HERO_TITLE, + HERO_SUBTITLE, + SITE_TITLE, + SITE_DESCRIPTION, +} from "../../config"; import Layout from "@/components/Layout"; const IndexPage = ({ data, pageContext }) => {