Obsidian To HTML, A template for building obsidian style notes to a static site

Overview

oth (Obsidian To HTML)

This is a template for publishing obsidian notes as a static site. The goal of the project is to stay minimal, since this is a template NOT a black box tool. The best form of "customizability" is changing the source code.

⚠️ Wikilinks to subdirs must be [[subdir/note]] NOT [[note]] as obsidian does by default. Change obsidian's "New link format" in Files & Links to "Relative path to file" to avoid issues.

Features

  • Works without client side javascript
  • Code highlighting
  • Math support
  • [[wikilinks]] support
  • Handles subdirectories
  • Generates navigation pages to make exploring notes easy

Setup

  1. Create a repo using the template
  2. Go to Settings -> Pages and set "deploy branch" to gh-pages and path to be the root /
  3. Profit
Comments
  • Render $$math$$ in display mode

    Render $$math$$ in display mode

    Currently this renders in inline math mode

    $$math$$
    

    While this renders in display mode

    $$
    math
    $$
    

    They should both render in display mode to match obsidian.

    opened by UlisseMini 1
  • Setup unit tests

    Setup unit tests

    The code is getting complicated enough that unit tests would be a big help. This also helps to avoid cluttering the default ./notes used in the template.

    opened by UlisseMini 1
  • Resolve wikilinks like obsidian

    Resolve wikilinks like obsidian

    Currently oth requires relative links in [[wikilinks]], forcing people to change obsidian's default settings, and fix their markdown is bad though. so I should improve my pageResolver so it handles normal obsidian vaults

    enhancement 
    opened by UlisseMini 1
  • Fix tabs

    Fix tabs

    Obsidian tabs in code blocks enter a tab character by default, and tab characters look ugly in the rendered html image

    There might be a highlightjs option for this, if there isn't we'll have to .replace("\t", " ") somewhere, preferably only in code blocks

    good first issue 
    opened by UlisseMini 1
  • Is oth behaving as expected?

    Is oth behaving as expected?

    Not sure if real issue. When publishing (with a notes directory containing all my .md files), the html files are generated in the notes directory, causing the site to report "file not found" at root, yet contains an entry in the folder notes/ in the url. Also, I have wikilinks of the form [[Link]], which supposedly work, yet I can't get them to actually link to each other in the site.

    If I did something wrong, let me know. Thanks!

    EDIT: you can view my site as a repo on my profile, it's public.

    opened by mushchlo 0
  • Make dirname robust

    Make dirname robust

    Currently I have

    htmlVFile.dirname = sourceVFile.dirname.replace(/notes/, "out");
    

    This is unsafe as the full dirname may be my-notes/notes in which case we'd get my-out/notes which is wrong!

    All the fixes I could think of were rather complicated, I'd like something that takes my-notes/notes/subdir to out/subdir preferably in one line, but extracting it into a helper is fine too (like I did with depth)

    bug good first issue 
    opened by UlisseMini 0
  • Optional frontmatter, fix Index.md's title always being Index

    Optional frontmatter, fix Index.md's title always being Index

    Titles are set from filenames by default, meaning Index.md automatically has title "Index". We can fix this by adding optional frontmatter to files (obsidian already supports frontmatter so this is fine)

    good first issue 
    opened by UlisseMini 0
  • Support obsidian themes

    Support obsidian themes

    It would be nice to import css from existing obsidian themes, Ideally I could compile the css into only what's used clientside (perhaps a bundler can do this for me) so I don't waste space on irrelevant UI styles.

    I might need to write some custom code to handle the /* @settings */ comment directive in obsidian themes.

    enhancement 
    opened by UlisseMini 0
  • Link prefetching

    Link prefetching

    We could prefetch pages using link prefetching that are wikilinked to from a note, this would make browsing smoother. especially since obsidian notes are often small, atomic objects where we have to do lots of navigation.

    Link hovering would also be cool, but that requires clientside javascript, which I'd like to avoid for as long as possible

    enhancement 
    opened by UlisseMini 0
  • Add linting and error reporting using vfile-reporter

    Add linting and error reporting using vfile-reporter

    Wishlist for things I could statically catch

    • [ ] Report dangling [[wikilinks]] before they 404 in prod (blocked)
    • [ ] Warn about long math (won't display on small screens) (not sure if this is possible without browser emulation)
    • [ ] Warn about spelling/grammer mistakes (a unified plugin should exist, gotta make sure it isn't annoying tho)
    • [x] Warn about using $$math$$ since obsidian handles it differently (see #13)
    enhancement 
    opened by UlisseMini 0
Owner
Ulisse mini
discord: uli#4334 gitlab: 0u
Ulisse mini
Variation-template - Variation is a PSD template that is covered into a web template using HTML5, CSS3, Bootstrapv4.6, JavaScript.

Variation Template Design Variation is a PSD website template. In this project this template is designed with HTML. Deployment This site is deployed a

Bipronath Saha 1 Jan 1, 2022
A declarative, HTML-based language that makes building web apps fun

A declarative, HTML-based language that makes building web apps fun ?? Docs ∙ Try Online ∙ Contribute ∙ Get Support Intro Marko is HTML re-imagined as

Marko 12k Jan 3, 2023
Semi-embedded JS template engine that supports helpers, filters, partials, and template inheritance. 4KB minzipped, written in TypeScript ⛺

squirrelly Documentation - Chat - RunKit Demo - Playground Summary Squirrelly is a modern, configurable, and blazing fast template engine implemented

Squirrelly 451 Jan 2, 2023
My templates for the Templater Obsidian.md plugin.

Christian's Templater Templates Found a template your like? Make sure you copy the raw file - not what Github renders. Click this button to see the ra

Christian Bager Bach Houmann 151 Dec 21, 2022
A set a periodic note templates for Obsidian.md.

MK's Periodic Note Templates A set of periodic note templates for Obsidian.md. Before You Start... Please note that these templates generally suit my

null 134 Dec 30, 2022
The fastest + concise javascript template engine for nodejs and browsers. Partials, custom delimiters and more.

doT Created in search of the fastest and concise JavaScript templating function with emphasis on performance under V8 and nodejs. It shows great perfo

Laura Doktorova 4.9k Dec 31, 2022
Pug – robust, elegant, feature rich template engine for Node.js

Pug Full documentation is at pugjs.org Pug is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.j

Pug 21.1k Dec 30, 2022
eXtensible Template Engine lib for node and the browser

xtemplate High Speed, eXtensible Template Engine lib on browser and nodejs. support async control, inheritance, include, logic expression, custom func

xtemplate 553 Nov 21, 2022
Take a swig of the best template engine for JavaScript.

NOT MAINTAINED Fork and use at your own risk. Swig Swig is an awesome, Django/Jinja-like template engine for node.js. Features Available for node.js a

Paul Armstrong 3.1k Jan 4, 2023
Embedded JS template engine for Node, Deno, and the browser. Lighweight, fast, and pluggable. Written in TypeScript

eta (η) Documentation - Chat - RunKit Demo - Playground Summary Eta is a lightweight and blazing fast embedded JS templating engine that works inside

Eta 682 Dec 29, 2022
Highly opinionated project template for Serverless Framework that follows and applies hexagonal architecture principle to serverless world. Prepared with easy testing in mind.

serverless-hexagonal-template Highly opinionated project template for Serverless Framework that applies hexagonal architecture principles to the serve

Paweł Zubkiewicz 126 Dec 26, 2022
Script Template Fivem in Type Script

fivem-ts ?? A Typescript Template for FiveM ?? This is a basic template for creating a FiveM resource using Typescript. It includes webpack config fil

Vinícius Pereira 3 Jun 11, 2021
A K6 Multi Scenario template applying some best practices along some examples

K6-Multi-Scenario-Template It is a performance testing template that shows how to use K6 to implement a Multi Scenario template applying some best pra

Swiss Life OSS 33 Nov 27, 2022
Tailwind & Next Mentorship Template

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Nauval 21 May 22, 2022
Examples of how to re-create the WordPress Template Hierarchy using headless clients and WPGraphQL

WPGraphQL Template Hierarchy Debugger This is a project to demonstrate how to re-create the WordPress template hierarchy with Headless WordPress using

Jason Bahl 17 Oct 29, 2022
Template to create reactjs component library which will help you to create your dream library.

reactjs-library-template Template to create reactjs component library which will help you to create your dream library. How to use Commands to setup e

Nishant Tomar 1 Dec 25, 2021
A template to be used for creating js/scss projects and deploy them to github pages

A template to be used for creating js/scss projects and deploy them to github pages

Cariera în IT 15 Oct 30, 2022
Low tech template for a reduced carbon impact :seedling:

Enverse minimalist front-end template ?? ?? For all else, use Astro.build ?? Recomended package manager: pnpm Preact + Typescript + Vite How to use: F

null 2 Jan 10, 2022
My discord.js bot template

My discord.js Bot Template This repository is an ongoing project to extract core pieces of the discord.js bots and ecosystems I run into a reusable te

Ian Mitchell 8 Mar 3, 2022