Obsidian Powered Docs

.gitignore

@@ -2,4 +2,7 @@ node_modules
 .next
 .DS_Store
 yarn-error.log
-dist
+dist
+obsidian_vault/.obsidian/workspace.json
+obsidian_vault/__tempassets__/*
+!obsidian_vault/__tempassets__/README.md

copy-docs.mts

@@ -0,0 +1,107 @@
+// This file gets only the public doc files, and renames them to remove spaces
+
+import { default as fs } from 'fs';
+import { default as path } from 'path';
+import { fileURLToPath } from 'url';
+import _ from 'lodash';
+import replace from 'replace';
+
+const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file
+const __dirname = path.dirname(__filename); // get the name of the directory
+
+const skipFiles = ['__tempassets__', 'public', '.obsidian'];
+
+
+// Define the folder paths
+const publishFolder = path.join(__dirname, 'obsidian_vault');
+const distFolder = path.join(__dirname, 'pages/');
+const distFolderPublic = path.join(__dirname, 'public/');
+
+console.log("🗑️  Cleaning up temporary folders...")
+fs.existsSync(distFolder) && fs.rmSync(distFolder, { recursive: true });
+
+
+async function copyDirAndRename(sourceDir, targetDir) {
+
+
+
+  if(path.basename(sourceDir) === 'public'){
+    console.log('public folder')
+    const publicFiles = await fs.readdirSync(sourceDir, { withFileTypes: true });
+    for (let file of publicFiles) {
+      const sourcePath = path.join(sourceDir, file.name);
+      const targetPath = path.join(distFolderPublic, file.name);
+      console.log("  🏞️ ", (path.basename(sourcePath)), ' >> ', targetPath)
+      fs.copyFileSync(sourcePath, targetPath)
+    }
+  }
+
+  if(!skipFiles.includes(path.basename(sourceDir))){
+  console.log("📂", path.basename(targetDir))
+  await fs.mkdirSync(targetDir, { recursive: true }); // Ensure target directory exists
+  const entries = await fs.readdirSync(sourceDir, { withFileTypes: true });
+
+  for (let entry of entries) {
+    const sourcePath = path.join(sourceDir, entry.name);
+    const targetPath = path.join(targetDir, entry.name);
+
+    if (entry.isDirectory() && ( !path.basename(sourcePath).startsWith('.') || !path.basename(sourcePath).startsWith('__') || path.basename(sourcePath) !== 'public') ){
+      // Ignore directories starting with a dot, like .obsidian
+      // Igrnore internal directories starting with, like __tempassets__
+      await copyDirAndRename(sourcePath, targetPath); // Recurse into subdirectory
+    } else {
+
+      const fileName = path.basename(sourcePath)
+
+          if(fileName === "_meta.md"){
+            console.log("   🤖 meta.js")
+              const meta = await fs.readFileSync(sourcePath, 'utf8').trim().split('\n')
+
+              const metaJson = {}
+
+              meta.forEach((line) => {
+              // Extract the title and path from the _meta.md file
+              const regex = /\[([^\]]+)\]\(([^\)]+)\)/g;
+              const input = line;
+              const matches = input.matchAll(regex);
+              let title, linePath;
+              for (const match of matches) {
+               title = match[1].toString()
+               linePath = match[2].toString()
+              }     
+              const sentenceCase = (str) => {
+                str = str.replace(/-/g, ' ')
+                return _.upperFirst(_.lowerCase(str))
+                }
+               console.log('🔥', title, title.split(' ').length)     
+              metaJson[path.parse(linePath).name] = title.split(' ').length > 1 ? title : sentenceCase(title)
+            })
+              await fs.writeFileSync(path.join(targetDir, '_meta.js'), `export default `+JSON.stringify(metaJson, null, 2))
+            }
+            else {
+              if(!path.basename(sourcePath).startsWith('.')){
+              console.log("   📄", (path.basename(sourcePath)))
+              fs.copyFileSync(sourcePath, targetPath)
+              }
+            }
+        }
+
+    }
+    }
+  }
+
+
+await copyDirAndRename(publishFolder, distFolder)
+
+// Obsidian uses .md files, but we need to link to pages directly, not a file name
+replace({
+  regex: /.md/g,
+  replacement: "",
+  paths: [distFolder],
+  recursive: true,
+  silent: true,
+});
+
+
+
+console.log('✅ Done!')

next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

next.config.js

@@ -1,33 +1,50 @@
-const withNextra = require("nextra")({
-  theme: "nextra-theme-docs",
-  themeConfig: "./theme.config.js",
-  unstable_flexsearch: true,
-  unstable_staticImage: true,
-});
+import bundleAnalyzer from '@next/bundle-analyzer'
+import nextra from 'nextra'
+import remarkObsidian from 'remark-obsidian'
 
-
-module.exports = withNextra({
-  i18n: {
-    locales: ['en', 'pt-br'],
-    defaultLocale: 'en',
+const withNextra = nextra({
+  theme: 'nextra-theme-docs',
+  themeConfig: './theme.config.tsx',
+  defaultShowCopyCode: true,
+  transformPageMap(pageMap, locale) {
+    if (locale === 'en') {
+      pageMap = [
+        ...pageMap,
+      ]
+    }
+    return pageMap
+  },
+  latex: true,
+  mdxOptions: {
+    remarkPlugins: [remarkObsidian]
   },
-  redirects: () => {
-    return [
-      {
-        source: "/reset-tokens",
-        destination: "/troubleshooting/reset-tokens",
-        statusCode: 302
-      },
-      {
-        source: "/non-local-styles",
-        destination: "/styles/non-local-styles",
-        statusCode: 302
-      },
-      {
-        source: "/sams-fancy-link",
-        destination: "/guides/naming-design-tokens",
-        statusCode: 302
-      },
-    ]
-  }
+
 })
+
+const withBundleAnalyzer = bundleAnalyzer({
+  enabled: process.env.ANALYZE === 'true'
+})
+
+/**
+ * @type {import('next').NextConfig}
+ */
+export default withBundleAnalyzer(
+  withNextra({
+    // i18n: {
+    //   locales: ['en', 'pt-br'],
+    //   defaultLocale: 'en'
+    // },
+    distDir: './.next', // Nextra supports custom `nextConfig.distDir`
+    reactStrictMode: true,
+    redirects: () => 
+      Object.entries({
+        "/reset-tokens": "/troubleshooting/reset-tokens",
+        "/non-local-styles": "/styles/non-local-styles",
+        "/naming-design-tokens": "/guides/naming-design-tokens",
+      }).map(([from, to]) => ({
+        source: from,
+        destination: to,
+        permanent: true,
+      }))
+  }),
+)

obsidian_vault/.obsidian/app.json

@@ -0,0 +1,4 @@
+{
+  "alwaysUpdateLinks": true,
+  "showUnsupportedFiles": true
+}

obsidian_vault/.obsidian/appearance.json

@@ -0,0 +1,3 @@
+{
+  "accentColor": ""
+}

obsidian_vault/.obsidian/community-plugins.json

@@ -0,0 +1,3 @@
+[
+  "mdx-as-md-obsidian"
+]

obsidian_vault/.obsidian/core-plugins-migration.json

@@ -0,0 +1,30 @@
+{
+  "file-explorer": true,
+  "global-search": true,
+  "switcher": true,
+  "graph": true,
+  "backlink": true,
+  "canvas": true,
+  "outgoing-link": true,
+  "tag-pane": true,
+  "properties": false,
+  "page-preview": true,
+  "daily-notes": true,
+  "templates": true,
+  "note-composer": true,
+  "command-palette": true,
+  "slash-command": false,
+  "editor-status": true,
+  "bookmarks": true,
+  "markdown-importer": false,
+  "zk-prefixer": false,
+  "random-note": false,
+  "outline": true,
+  "word-count": true,
+  "slides": false,
+  "audio-recorder": false,
+  "workspaces": false,
+  "file-recovery": true,
+  "publish": false,
+  "sync": false
+}

obsidian_vault/.obsidian/core-plugins.json

@@ -0,0 +1,20 @@
+[
+  "file-explorer",
+  "global-search",
+  "switcher",
+  "graph",
+  "backlink",
+  "canvas",
+  "outgoing-link",
+  "tag-pane",
+  "page-preview",
+  "daily-notes",
+  "templates",
+  "note-composer",
+  "command-palette",
+  "editor-status",
+  "bookmarks",
+  "outline",
+  "word-count",
+  "file-recovery"
+]

obsidian_vault/.obsidian/graph.json

@@ -0,0 +1,22 @@
+{
+  "collapse-filter": true,
+  "search": "",
+  "showTags": false,
+  "showAttachments": false,
+  "hideUnresolved": false,
+  "showOrphans": true,
+  "collapse-color-groups": true,
+  "colorGroups": [],
+  "collapse-display": true,
+  "showArrow": false,
+  "textFadeMultiplier": 0,
+  "nodeSizeMultiplier": 1,
+  "lineSizeMultiplier": 1,
+  "collapse-forces": true,
+  "centerStrength": 0.518713248970312,
+  "repelStrength": 10,
+  "linkStrength": 1,
+  "linkDistance": 250,
+  "scale": 1,
+  "close": true
+}

obsidian_vault/.obsidian/plugins/mdx-as-md-obsidian/manifest.json

@@ -0,0 +1,10 @@
+{
+  "id": "mdx-as-md-obsidian",
+  "version": "0.0.1",
+  "description": "Edit mdx files as if they were markdown",
+  "name": "mdx as md",
+  "author": "death_au",
+  "authorUrl": "https://github.com/mkozhukharenko",
+  "isDesktopOnly": false,
+  "minAppVersion": "0.10.12"
+}

obsidian_vault/_app.tsx

@@ -0,0 +1,53 @@
+/* eslint react/no-unknown-property: ['error', { ignore: ['global', 'jsx'] }] */
+import { AppProps } from 'next/app';
+import React from "react"
+
+export default function App({ Component, pageProps, router }: AppProps) {
+  return (
+    <>
+      <style global jsx>{`
+        :root {
+          --colors-text: white;
+          --colors-dim: #777;
+          --colors-accent: #1cc8ee;
+          --colors-primary: white;
+          --colors-background: #0b0d11;
+          --hover-opacity: 0.75;
+        }
+        html,
+        body,
+        #__next {
+          margin: 0;
+          width: 100%;
+          height: 100%;
+        }
+        ${router.route === '/'
+          ? "/* For smooth scrolling effect when click on '#' hash links */ html { scroll-behavior: smooth }"
+          : ''}
+        body {
+          z-index: -1; /* needs for blue and pink circles */
+        }
+        footer {
+          background: transparent !important;
+        }
+        a {
+          cursor: pointer;
+          text-decoration: none;
+          transition: all 0.2s ease 0s;
+        }
+        @media (min-width: 768px) {
+          header,
+          header ul > nav {
+            background: transparent !important;
+          }
+        }
+        // Remove autocomplete color in Chrome
+        input:-webkit-autofill {
+          -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
+          -webkit-transition-delay: 9999s;
+        }
+      `}</style>
+      <Component {...pageProps} />
+    </>
+  );
+}

pages/_meta.en.json → obsidian_vault/_meta.js

@@ -1,4 +1,4 @@
-{
+export default {
   "index": "Introduction",
   "getting-started": "Getting started",
   "tokens": "Using tokens",

pages/available-tokens/_meta.en.json → obsidian_vault/available-tokens/_meta.js

@@ -1,4 +1,4 @@
-{
+export default {
   "available-tokens": "Overview",
   "sizing-tokens": "Sizing tokens",
   "spacing-tokens": "Spacing tokens",

pages/available-tokens/asset-tokens.en.mdx → obsidian_vault/available-tokens/asset-tokens.mdx

@@ -8,7 +8,7 @@ This can be very useful in white-label projects, where you need to change the as
 Create an Asset token under the ‘Asset’ category by clicking on the ‘+’ icon.  
 Enter a token name and an asset url.  
 
-import Callout from 'nextra-theme-docs/callout'
+import { Callout } from 'nextra/components'
 
 <Callout>
   Currently the image source needs to have its own CORS (Cross-Origin Resource Sharing) validation. Some websites already have that implemented (e.g. Unsplash), but otherwise you can put this behind a CORS proxy. More information on CORS can be found [here](https://medium.com/nodejsmadeeasy/a-simple-cors-proxy-for-javascript-applications-9b36a8d39c51). We'll be adding a CORS proxy in a future release.

pages/available-tokens/border-tokens.en.mdx → obsidian_vault/available-tokens/border-tokens.mdx

@@ -5,6 +5,6 @@ You can create Border tokens to define border styles. The token must contain the
 - Width: the width or thickness of the border. Can be defined either unitless or with a unit such as px or rem.
 - Style: the border style. Currently solid and dashed is supported.
 
-import Callout from 'nextra-theme-docs/callout'
+import { Callout } from 'nextra/components'
 
 <Callout>This token will be applied under the `border` property, which was previously used by border color tokens. The plugin will automatically migrate any older applied color tokens under the `border` property to the new `borderColor` one.</Callout>