# Bear notes Hugo theme
Online Zettelkasten/Digital garden [Hugo](https://gohugo.io/) theme.
### Sites using zettels
- https://dilrong.com
- https://digitalgarden.guidopercu.dev/
- https://notas.cristian.lat
### 💻 Installing & running
On your `config.toml`, set the theme as follows: theme = `"github.com/crisrojas/zettels"`, alternative you could just `git clone` this repo inside the "themes" folder or submodule it with `git submodule`.
```bash
git submodule add https://github.com/crisrojas/zettels.git themes/zettels
```
From bear, export your notes as markdown into the content folder.
You'll also need to put there an _index.md file. This will be the webiste entry point.
To make things easier you could use one of this tools:
- [Bear Markdown Export](https://github.com/andymatuschak/Bear-Markdown-Export)
- [Bhugo](https://github.com/Zach-Johnson/bhugo/blob/master/main.go) (Be aware that native Hugo tags aren't supported yet)
- [Bear markdown images fixer script](https://gist.github.com/crisrojas/6662f9fc78a99dc56c2c268a713a60ee) (please, make a backup before running the script)
Run with `hugo server --disableFastRender` , this will avoid a weird bug that I've not tracked yet (content being rendered multiple times)
### ⚙️ Config file
This is the `config.toml` [I'm using for publishing my notes](https://notas.cristian.lat).
I'll add more details about usage in the future. For now you can copy-paste and replace the variables to fit your needs.
```toml
languageCode = "es-ES"
title = "Notas"
uglyURLS = true
relativeURLs = true
publishDir = "public"
pygmentsUseClasses = true
assetDir = "themes/zettels/assets"
DefaultContentLanguage = "es"
theme = "zettels"
[outputs]
home = ["HTML", "JSON"]
[params]
theme = "duotone-light"
bear = true
favicon = "favicon.ico"
author = "Cristian Rojas"
# Enable tags.
[taxonomies]
tag = "tags"
# Allows rendering the html inside markdown
[markup.goldmark.renderer]
unsafe= true
```
> ℹ bear = true uses filename as a title on the frontend instead the title yaml property.
### 🎨 Themes
On your config file, pass the chosen theme as a parameter:
```toml
[params]
theme = "duotone-light"
```
You can chose between *duotone-light* and *red-graphite*.
More Bear themes will be added in the future.
### 🌎 Language
On your config file, pass the chosen language as a parameter:
```tom
DefaultContentLanguage = "es"
```
Languages available: Spanish ("es"), English ("en"), French ("fr")
### 🔗 Linking notes
Linking is done through double-brackets syntax.
Ex.: `[[wikilink]]`, where "wikilink" is the filename of the note to be linked.
I'll maybe add a feature to allow choosing linking from note's title instead of filename.
```html
[[biology]]
biology.md
biology
```
Spaces in wikilinks are supported: `[[spaced link]]` outputs `spaced link`
### 🔙 Backlinks
Backlinks are supported. Example → [here](https://notas.cristian.lat/empieza-haciendo-lo-que-sea-necesario-despu%C3%A9s-haz-lo-que-sea-posible-sin-darte-cuenta-y-al-cabo-de-un-tiempo-estar%C3%A1s-haciendo-lo-imposible.html)
### Nested tags
Nested tags inside note content are rendered. Expect some errors on tricky cases.
### UI/UX
If you're thinking this obviously looks a little too much like Bear, you're right.
This is not coincidental. The reasons are basically:
- I ❤️ 🐻
- [I've tried before](https://5fbd3f8577526e0008aeee8b--zkcrisrojas.netlify.app/notes) to implement a good navigational UI for an online zettelkasten. I failed.
- Bear interface has been already polished from trial and error. No need to reinvent the wheel.
- I wanted a tool to publish my Bear notes and also wanted to "feel at home" when navigating.
- Not having to worry about design decisions boosts dev speed.
### Shortcuts
To open index/search hit:
- ` Ctr` + `K`
- `Cmd` + `K`
### 🚧 toDo
- Adding more themes
- Allow custom CSS?
- Escape wikilinks inside inline code blocks
- Correct tag regex for special cases and add unit tests for both, wiki-regex and tag-regex.
- Create quickstart repo and add Netlify deploy button.
- 🇪🇸 → 🇬🇧: Change "privado" tag finder to "private-note"
- Integrate an image zoom library?
- Side menu: toDos, private notes, tag list, etc...
- Thumbnails on search component (from now we're loading the first image of each note from the very beginning without any kind of optimization)
- Lazy load those thumbnails
- Add support for Hugo tags (yaml)
- Add [[links to/headings]] support. See [this hugo thread](https://discourse.gohugo.io/t/support-wiki-internal-link-converson-to-relref-shortcode/6074) for an idea of the regex implementation
- Add Zettels to the [Hugo theme repository](https://github.com/gohugoio/hugoThemes)
- Integrate [slideout js](https://slideout.js.org)
### Done
- Allow choosing themes from config file
- Bear highlight regex: `==highlighted==` && `::highlighted::`
- Code blocks
- find a way to localize theme strings.
- 🐻 Bear alike search sidebar
- Polar Markup support? (Nope → [It will be deprecated](https://www.reddit.com/r/bearapp/comments/n73akc/new_to_bear_markdown_comparability_mode_or_not/gxuj81r?utm_source=share&utm_medium=web2x&context=3))
### Maybe one day/ Nice to have
- Theme selector from the frontend
- Dark theme detector from OS settings?
- Obsidian alike nodes graph
- Bear alike nested tag list
- Port frontend to a more [SPA alike tech](https://svelte.dev)
- SSG from Bear SQLite database ([wip?](https://github.com/crisrojas/miyanoSwift.git))