chore!: rework project (#1)

* build: replace package manager * chore(deps): add typescript * chore: ignore graph-data.json * fix: replace some javascript files to typescript file I also fixed Tree expansion bug. * fix: infinite loop issue * chore: replace branding and README.md
turtton · Jan 20, 2023 · 536a11b · 536a11b
1 parent b0ea169
commit 536a11b
Show file tree

Hide file tree

Showing 16 changed files with 5,710 additions and 4,663 deletions.
diff --git a/.gitignore b/.gitignore
@@ -30,3 +30,5 @@ yarn-debug.log*
 yarn-error.log*
 
 .vercel
+
+/graph-data.json
diff --git a/LICENSE b/LICENSE
@@ -1,5 +1,6 @@
 MIT License
 
+Copyright (c) 2023 turtton
 Copyright (c) 2022 Tuan Cao
 
 Permission is hereby granted, free of charge, to any person obtaining a copy

diff --git a/README.md b/README.md
@@ -1,58 +1,23 @@
-## What is MindStone?
-MindStone is a free open-source alternative solution to [Obsidian Publish](https://obsidian.md/publish)
+## Volglass
+Volglass is a fork of [MindStone(digital-garden)](https://github.com/TuanManhCao/digital-garden) but many codes replaced to typescript.
 
-Here how it look like once published, checkout [demo version](https://mindstone.tuancao.me/) here:
-
-![](public/images/CleanShot%202022-04-20%20at%2008.34.17@2x.png)
-
-This website include a published version of default Obsidian Help vault, See it in action here 
-
-**MindStone features:**
-
--  ✅ **Drop-in** support for (default) **Obsidian Vault** 
--  ✅ `[[Wiki Link]]` built-in support
--  ✅ **Folder-base** navigation side bar
--  ✅ Backlink support out of the box
--  ✅ Interactive Graph view 
--  ✅ **Easy to deploy** to Netlify, Vercel...
+It is this project's goal to be a free open-source alternative solution to [Obsidian Publish](https://obsidian.md/publish)
 
 ## Getting started
 ### Run on your local machine
 
 Steps to run it on your local machine:
-1. Clone this [Github repo](https://github.com/TuanManhCao/digital-garden)
-2. Install [yarn](https://classic.yarnpkg.com/lang/en/docs/install/#mac-stable) package manager 
+1. Clone this [Github repo](https://github.com/turtton/volglass)
+2. Install [pnpm](https://pnpm.io/installation) package manager 
 3. Copy all of your **markdown** file (`.md` only) and folder to `/posts/` **except** `/posts/index.md` file
 4. Copy all of your images from your Obsidian Vault to `/public/images/` folder 
-5. Go to root folder of your project, run `yarn && yarn run dev`
+5. Go to root folder of your project, run `pnpm i && pnpm run dev`
 6. Open this link in your browser http://localhost:3000/ 
 
-If you prefer video content have a look at my 📺 [walk through video](https://youtu.be/7_SmWA-_Wx8)
-
-### Publish to the internet
-
-Setup environment (with Netlify)
-1. Create your Github account and clone [my repository](https://github.com/TuanManhCao/digital-garden)
-2. Create Netlify account and follow [this instruction](https://www.netlify.com/blog/2020/11/30/how-to-deploy-next.js-sites-to-netlify/) 
-
-
-Your normal workflow for publishing content, after initial setup is:
-1. Simply writing your content in Obisidian (or your favourite Markdown editor)
-2. Commit your changes and Push it to your Github repo
-
-If you prefer video content, watch my 📺 [walk through video](https://youtu.be/n8QDO6l64aw) here 
-
 ## Future development 
 
-These are just some basic features for MindStone v1, many more are coming (if I find enough of interest and this will probably a premium/paid option):
-- 🎯 Obsidian, Notion, VSCode Plugin 
-- 🎯 Page Preview (like Obsidian Core plugin)
-- 🎯 Andy Sliding pane
-- 🎯 Full text search with `Cmd + K`
-- 🎯 Infinite canvas for browsing through notes and connections
+- Embed markdown/image rendering
+- Text search
+- Tag list view
 
-### Some know issues
-This an early version of MindStone, which mean there are bugs and issues. Below are some known issues, that I plan to work on:
-- Graphview does not load when clicking on side-bar or click node on graphview, browser reload will refresh it state
-- Graph view layout and interaction is still very rough. More UI/UX improvements are needed.
-- Transclusion is not working yet.
+I also plan to create a CLI application for easy environment building and updating.
diff --git a/components/FolderTree.js → components/FolderTree.tsx b/components/FolderTree.js → components/FolderTree.tsx
@@ -5,8 +5,9 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import TreeItem from '@mui/lab/TreeItem';
 import {useRouter} from 'next/router'
 import {styled} from '@mui/material/styles';
+import {MdObject} from "../lib/utils";
 
-const TCTreeItem = styled(TreeItem)(({theme}) => ({
+const TCTreeItem = styled(TreeItem)(() => ({
     '& .MuiTreeItem-content': {
         '& .MuiTreeItem-label': {
             fontSize: '1rem',
@@ -17,13 +18,12 @@ const TCTreeItem = styled(TreeItem)(({theme}) => ({
     },
 }))
 
-
-export default function FolderTree(props) {
-    const renderTree = (nodes) => (
+export default function FolderTree(props: { tree: MdObject, flattenNodes: MdObject[] }): JSX.Element {
+    const renderTree = (nodes: MdObject) => (
         <TCTreeItem key={nodes.id} nodeId={nodes.id} label={nodes.name}>
-            {Array.isArray(nodes.children)
-                ? nodes.children.map((node) => renderTree(node))
-                : null}
+            {
+                nodes.children.map((node) => renderTree(node))
+            }
         </TCTreeItem>
     );
 

diff --git a/components/MDContent.js b/components/MDContent.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import Alert from '@mui/material/Alert';
-import AlertTitle from '@mui/material/AlertTitle';
+// import Alert from '@mui/material/Alert';
+// import AlertTitle from '@mui/material/AlertTitle';
 import {useRouter} from 'next/router'
 
 function BackLinks({linkList}) {
@@ -41,11 +41,11 @@ function MDContent({content, backLinks, handleOpenNewContent}) {
     return (
 
         <div className="markdown-rendered">
-            <Alert severity="info">
-                <AlertTitle>Want to know more?</AlertTitle>
-                🌱 <strong>Follow</strong> or <strong>DM</strong> me on Twitter at <span><a
-                href="https://twitter.com/tuancm">@tuancm</a></span>
-            </Alert>
+            {/*<Alert severity="info">*/}
+            {/*    <AlertTitle>Want to know more?</AlertTitle>*/}
+            {/*    🌱 <strong>Follow</strong> or <strong>DM</strong> me on Twitter at <span><a*/}
+            {/*    href="https://twitter.com/tuancm">@tuancm</a></span>*/}
+            {/*</Alert>*/}
             <div dangerouslySetInnerHTML={{__html: content}}/>
             {/*<button onClick={handleInternalLinkClick}>Click me</button>*/}
             {/*<hr/>*/}
@@ -54,7 +54,7 @@ function MDContent({content, backLinks, handleOpenNewContent}) {
             </div>
             <hr/>
             <footer>
-                <p>Powered by  <a href="https://github.com/TuanManhCao/digital-garden">Mind Stone</a>, © 2022</p>
+                <p>Powered by  <a href="https://github.com/turtton/volglass">Volglass</a>, © 2023</p>
             </footer>
         </div>
     );

diff --git a/lib/node.js → lib/node.ts b/lib/node.js → lib/node.ts
@@ -3,7 +3,7 @@ import fs from "fs"
 
 
 export const Node = {
-    isFile:function(filename){
+    isFile: function (filename): boolean {
         try {
             return fs.lstatSync(filename).isFile()
         } catch (err) {
@@ -12,30 +12,29 @@ export const Node = {
         }
 
     },
-    getFullPath:function(folderPath){
-        return fs.readdirSync(folderPath).map(fn  => path.join(folderPath, fn))
+    getFullPath: function (folderPath) {
+        return fs.readdirSync(folderPath).map(fn => path.join(folderPath, fn))
     },
-    getFiles: function(dir) {
-        var results = [];
-        var list = fs.readdirSync(dir);
-        list.forEach(function(file) {
+    getFiles: function (dir: fs.PathLike): string[] {
+        let results: string[] = [];
+        fs.readdirSync(dir).forEach(function (file) {
             file = dir + '/' + file;
-            var stat = fs.statSync(file);
-            if (stat && stat.isDirectory()) { 
+            const stat = fs.statSync(file);
+            if (stat && stat.isDirectory()) {
                 /* Recurse into a subdirectory */
                 results = results.concat(Node.getFiles(file));
-            } else { 
+            } else {
                 /* Is a file */
                 results.push(file);
             }
         });
         return results.filter(f => f.endsWith(".md"))
     },
-    readFileSync:function(fullPath){
+    readFileSync: function (fullPath): string {
         return fs.readFileSync(fullPath, "utf8")
     },
 
-    getMarkdownFolder: function () {
+    getMarkdownFolder: function (): string {
         return path.join(process.cwd(), 'posts')
     }
 }
diff --git a/lib/transformer.js → lib/transformer.ts b/lib/transformer.js → lib/transformer.ts
@@ -3,15 +3,14 @@ import unified from "unified";
 import markdown from "remark-parse";
 import {wikiLinkPlugin} from "remark-wiki-link";
 import html from "remark-html";
-import frontmatter from "remark-frontmatter";
 import externalLinks from "remark-external-links";
 import highlight from "remark-highlight.js";
 import {Node} from "./node";
 import rehypePrism from 'rehype-prism-plus'
 import remarkRehype from 'remark-rehype'
 import rehypeStringify from 'rehype-stringify'
 import obsidianImage from './obsidian-image.js'
-import {getAllMarkdownFiles, toFilePath, toSlug} from "./utils";
+import {CustomNode, getAllMarkdownFiles, toFilePath, toSlug} from "./utils";
 
 export const Transformer = {
     haveFrontMatter: function (content) {
@@ -56,10 +55,12 @@ export const Transformer = {
         // permalink = Transformer.normalizeFileName(permalink)
         permalink = permalink.replace("ç", "c").replace("ı", "i").replace("ş", "s")
         return `/note/${permalink}`;
-    }, getHtmlContent: function (content) {
-        let htmlContent = []
+    },
+    getHtmlContent: function (content): string[] {
+        let htmlContent: Array<string> = []
         const sanitizedContent = Transformer.preprocessThreeDashes(content)
 
+        // @ts-ignore
         unified()
             .use(markdown, {gfm: true})
             .use(obsidianImage)
@@ -88,9 +89,8 @@ export const Transformer = {
                     }
                 }
             )
-        htmlContent = htmlContent.join("")
-        htmlContent = htmlContent.split("---")
-        return [htmlContent]
+
+        return htmlContent.join("").split("---")
     },
 
     /* SANITIZE MARKDOWN FOR --- */
@@ -137,16 +137,17 @@ export const Transformer = {
     /* Pair provided and existing Filenames*/
     getInternalLinks: function (aFilePath) {
         const fileContent = Node.readFileSync(aFilePath);
-        const internalLinks = []
+        const internalLinks: Array<CustomNode> = []
         const sanitizedContent = Transformer.preprocessThreeDashes(fileContent)
+        // @ts-ignore
         unified()
             .use(markdown, {gfm: true})
             .use(wikiLinkPlugin, {
                 pageResolver: function (pageName) {
 
                     // let name = [Transformer.parseFileNameFromPath(pageName)];
 
-                    let canonicalSlug;
+                    let canonicalSlug: string;
                     if (pageName.includes('#')) {
                         // console.log(pageName)
                         const tempSlug = pageName.split('#')[0]
@@ -161,12 +162,13 @@ export const Transformer = {
                     }
 
 
-                    const backLink = {
+                    const backLink: CustomNode = {
                         title: Transformer.parseFileNameFromPath(toFilePath(canonicalSlug)),
                         slug: canonicalSlug,
                         shortSummary: canonicalSlug
                     }
 
+                    // @ts-ignore
                     if (canonicalSlug != null && internalLinks.indexOf(canonicalSlug) < 0) {
                         internalLinks.push(backLink);
                     }