- update README

- remove unused items in CONFIG - update config - Post per page name - Fix SEO issues on index page
juxtdesigncc · Feb 23, 2022 · 5f4594c · 5f4594c
1 parent 7fff028
commit 5f4594c
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -1,24 +1,83 @@
 <h1 align="center">
   Gatsby Starter Obsidian Garden
-</h1>
+  </h1>
+</div>
+<div align="center"> 
+<a href="https://github.com/juxtdesigncc/gatsby-starter-obsidian-garden">
+  <img src="https://img.shields.io/github/stars/juxtdesigncc/gatsby-starter-obsidian-garden?style=social" alt="Star this repo on Github" />
+</a>
+<a href="https://twitter.com/intent/follow?screen_name=juxtdesigncc">
+  <img src="https://img.shields.io/twitter/follow/juxtdesigncc.svg?label=Follow%20@juxtdesigncc" alt="Follow @juxtdesigncc on Twitter" />
+  </a>
+</div>
 
-## 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.
+<a href="">
+  <img src="https://img.shields.io/badge/Demo-Gatsby%20Cloud-5b2c8a?style=for-the-badge" alt="Demo Website"/>
+</a>
 
-## 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
@@ -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:
-      "科技 | 設計 | 城市  <br/> <br/>   UI/UX 設計師，喜愛攝影，漫遊城市的不同角落。",
-    shortbio: "UI/UX 設計師，喜愛攝影，漫遊城市的不同角落。",
-    contacts: {
-      instagram: "desktopofsamuel",
-      email: "[email protected]",
-      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
@@ -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
@@ -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
@@ -19,17 +19,17 @@
 //     }
 //   `);
 
-//   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({
 //       path: i === 0 ? '/' : `/page/${i}`,
 //       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
@@ -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
@@ -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
@@ -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 (
     <div>
       {full ? (
         <>
           <Helmet htmlAttributes={{ lang: LOCALE }} title={pageTitle}>
             <meta name="title" content={pageTitle} />
-            <meta name="description" content={DESCRIPTION} />
-            <meta name="keywords" content={KEYWORDS} />
+            <meta name="description" content={pageDescription} />
+            <meta name="keywords" content={pageKeywords} />
             <meta name="publisher" content={AUTHOR.NAME} />
             <meta name="author" content={AUTHOR.NAME} />
             <meta name="copyright" content={COPYRIGHT} />
@@ -42,8 +44,8 @@ const Layout: React.FC = ({
         <>
           <Helmet htmlAttributes={{ lang: LOCALE }} title={pageTitle}>
             <meta name="title" content={pageTitle} />
-            <meta name="description" content={DESCRIPTION} />
-            <meta name="keywords" content={KEYWORDS} />
+            <meta name="description" content={pageDescription} />
+            <meta name="keywords" content={pageKeywords} />
             <meta name="publisher" content={AUTHOR.NAME} />
             <meta name="author" content={AUTHOR.NAME} />
             <meta name="copyright" content={COPYRIGHT} />
@@ -65,6 +67,6 @@ type Props = {
   description?: string;
   socialImage?: string;
   url?: string;
-  keywords: Array<string>;
+  keywords: string;
   full: boolean;
 };
diff --git 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 }) => {