hugo-obsidian/README.md
2021-07-17 22:37:49 -04:00

1.8 KiB

Obsidian Link Scrapper

This repository comes to you in two parts.

  1. GitHub Action (scrapes links into a .yml file)
  2. Hugo Partial (turns .yml file into graphs and tables)

GitHub Action

GitHub action and binary to scrape Obsidian vault for links and exposes them as a .yml file for easy consumption by Hugo.

Example Usage (Binary)

Read Markdown from the /content folder and place the resulting linkIndex.yaml into /data

# Installation
go install github.com/jackyzha0/hugo-obsidian

# Run
hugo-obsidian -input=content -output=data

Example Usage (GitHub Action)

Add 'Build Link Index' as a build step in your workflow file (e.g. .github/workflows/deploy.yaml)

...

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
      - name: Build Link Index
        uses: jackyzha0/hugo-obsidian@v1.4
        with:
          input: content # input folder
          output: data   # output folder
      ...

Hugo Partial

To then embed this information in your Hugo site, you can copy and use the provided partials in /partials. Graph provides a graph view of all nodes and links and Backlinks provides a list of pages that link to this page.

To start, create a graphConfig.yaml file in /data in your Hugo folder. This will be our main point of configuration for the graph partial.

Then, in one of your Hugo templates, do something like the following to render the graph.

<div id="graph-container">
    {{partial "graph_partial.html" .}}
</div>

Configuration

Example:

enableLegend: false
enableDrag: true
enableZoom: false
base:
  node: "#284b63"
  activeNode: "#f28482"
  inactiveNode: "#a8b3bd"
  link: "#babdbf"
  activeLink: "#5a7282"
paths:
  - /toc: "#4388cc"
  - /newsletters: "#e0b152"
  - /posts: "#42c988"