HACKER Q&A
📣 dv35z

Knowledge-base site using VSCodium/FOAM/MkDocs


Hello HN -

I'm using VSCodium (open-source VSCode), with the FOAM plugin (similar to Obsidian / ROAM) to create a cross-linked notes/knowledge base. If you haven't tried it out - it's easy to setup, and works great.

It's like Obsidian... but open-source.

The next step I'm doing is to publish those notes as an HTML site. MkDocs-Material is perfect for this. The difficulty with using MkDocs & Markdown files with [[MyTopic]] links, is that MkDocs doesn't know how to automatically link to other pages. Fortunately, there is a MkDocs plugin called RoamLinks, which automatically converts the [[MyTopic]] links into HTML links to other pages - no matter where they are on the filesystem (very cool!!). That "unblocked" me - one struggle I was having when writing, was that I was renaming files & re-organizing - but that resulted in tons of Markdown links being broken - a huge chore that made writing un-fun. Now I can just "bracket bracket" any term that I want to reference/write later, and its good to go. Basically - its working great.

(Approximating the experience of Obsidian Publish)

The problem I'm having now is, when I do NOT have a page written [[MyNewTopic]], MkDocs/ROAMLinks can't link to the (unwritten) page. Instead, it outputs the text quite literally, as "[[MyNewTopic]]", with the brackets. Quite ugly. I'd love to have MkDocs/ROAMLinks NOT generate links for those pages AND hide/suppress the "[[ ]]". - I did a quick search on this (including ChatGPT) and the suggestions were. (1) Write a custom markdown renderer, before being processed by MkDocs, (2) create a custom MkDocs plugin, and (3) HTML post-processing (scraping out the [[ ]]).

One of the benefits of the VSCodium/FOAM/MkDocs/RoamLinks stack is that it basically "just works" - I write, run MkDocs build, get a website, and can `aws s3 sync` it to a AWS bucket, and the site is live. The only "glitch" right now is these dannnng brackets

Can anyone suggest a better way to suppress the [[ ]] for links which don't exist yet?

I'd also love to hear others' thoughts on the "open-source, cross-linked notes, published as a searchable website" stack.

Thanks!

// Links to the tools

- https://vscodium.com/

- https://foambubble.github.io/foam/

- https://squidfunk.github.io/mkdocs-material/

- https://github.com/Jackiexiao/mkdocs-roamlinks-plugin


  👤 dv35z Accepted Answer ✓
Option #3 (HTML post-procssing) seemed to work. This Python script takes a directory of HTML files, and removes the [[ and ]] and replaces them with and .

----

    import os
    from bs4 import BeautifulSoup

    # Function to process HTML files in a directory
    def process_html_files(directory):
        for root, dirs, files in os.walk(directory):
            for file in files:
                if file.endswith('.html'):
                    filepath = os.path.join(root, file)
                    process_html_file(filepath)

    # Function to process individual HTML file
    def process_html_file(filepath):
        with open(filepath, 'r') as f:
            html_content = f.read()

        # Parse HTML
        soup = BeautifulSoup(html_content, 'html.parser')

        # Iterate through all text nodes in the HTML
        for text_node in soup.find_all(text=True):
            if '[[' in text_node and ']]' in text_node:
                # Replace [[ and ]] within the text nodes with  tags
                replaced_text = text_node.replace('[[', '').replace(']]', '')
                text_node.replace_with(BeautifulSoup(replaced_text, 'html.parser'))

        # Write back the modified HTML
        with open(filepath, 'w') as f:
            f.write(str(soup))

    # Replace 'your_directory_path' with the directory containing your HTML files
    process_html_files('site')