Show HN: Code Notes – A Gatsby theme for publishing code-related notes | Hacker News Reader

Show HN: Code Notes – A Gatsby theme for publishing code-related notes

zander.wtf

151 pointsmrmartineau31 comments

Looks cool! I have been using Docusaurus[0] for this same exact use case for a while and although the primary use case is for documentation, the experience of writing notes is great too. You can write your notes in either MDX or Markdown. Search can be added using Algolia DocSearch[1] and deployment to GitHub Pages or Netlify or similar static site hosting platforms is a breeze. The only thing it's lacking is tags which I'm sure can be added with a little bit of work.

[0] https://v2.docusaurus.io/

[1] https://github.com/algolia/docsearch

Notes: https://rsapkf.github.io/notes/

Docusaurus is so cool!

Probably a bit overkill for a simple blog, but it should be evaluated whenever someone is looking for a end-user friendly doc generator.

I've enjoyed all the recent HN posts about notetaking software! (Roam, org-roam, Obsidian, Zettlr, Code Notes...)

It seems the main point of Code Notes is to serve a static site, but I'd love to see the author turn it into an editor by hooking up a ProseMirror [2] instance :)

Out of curiosity, what solutions do others use for tags/categorization/full-text search of their notes? Code Notes seems to use FlexSearch.js [1].

[1]: https://github.com/nextapps-de/flexsearch [2]: https://prosemirror.net/

Not sure if this is what you're looking for, but I used fuse.js [1] for a side project recently. It seemed to work well for me and it was fairly easy to set up.

[1]: https://fusejs.io/

We’re building a new note app on top of Quill. ProseMirror is great but it’s lacking a little in out of box usability. We’ll consider moving to another editor as we get more traction.

In our app, we have a dynamic flexsearch index for full text search, and support for filtering by tags in multiple ways while also doing full text search.

There are 3 techniques for categorizing. One, called contexts, is like a separate notebook. Tags and note data are totally separate from each other in each context. Within a context you have mentions (for people) and topics. Topics support heirarchy, so you can have Projects as well as projects/NoteBrook, as deeply nested as you want, and you can search for any level of nesting.

The search engine then supports full text search along with AND for tags at the same time.

If you register for an account, you also get instant sync to all your devices.

A new version is coming out this weekend, we’re still in alpha. The next version will have note favoriting, deleting, and editing, along with some better workflow for nested tags. We expect to launch the Beta in June with apps on every major platform (desktop and mobile).

If you have a chance to give us a try, please let us know how you like it! https://NoteBrook.app and the early access code is ALPHA2020. Email us at hello at NoteBrook.com

Looks great, I'll try to check again in a few days for the new version!

Other than tags/search, one thing that is very important to me is "first-class" math support, where I can enter LaTeX math notation that renders inline, but which behaves like text whenever the cursor enters the math block. In general, I always appreciate when editors locally "act like" a plain text file near the cursor, but abstract away all the markup wherever I'm not directly editing. Two editors that get this right are Typora (inline-level editing) and Jupyter notebooks (block-level editing).

I agree that ProseMirror has a steep learning curve, and there aren't currently enough open-source extensions available. Hopefully, with time, enough standard components will emerge. In the future, I hope to see a ProseMirror-backed drop-in Markdown editor become the default for browser-based editing.

ProseMirror doesn't currently have standard support for wysiwyg-math, but I've recently been working to change that [1]:

[1]: proof of concept: https://codesandbox.io/s/quizzical-austin-m7n3t?file=/src/in...

Thanks for the kind comments! I will put your vote in for this feature and bookmark the link for future reference. Our focus is on expanding the feature set in ways that are more emergent, so the UI stays very clean and straightforward and features that users don’t use don’t clutter up the interface. This seems like a good candidate for a feature that could be only available to those who need it and not affect the workflow of others by working similarly to the # flow.

Would a good workflow be to type a hot key to pop open a full screen editor for the math notation, like how the # or @ work when typed? Perhaps with a live preview as you type?

What would be a reasonable key to trigger that, is there a standard trigger key for math like there is @ for people and # for hashtags?

Normally there are two types of math: inline and block. Inline math is delimited with single dollar signs like $x+y=5$, while display math uses two dollar signs with newlines, like

    $$
    \int_a^b f'(x) dx = f(b)-f(a)
    $$

You can find some GIFs of the ideal behavior here [1], but it's understandable that such a thing might not be a priority for most users.

The next best thing would definitely be a popup! A natural toggle button would be $, though it may make more sense to only insert math on a quick double-tap of $, so users can still write about money :). Assigning it to CTRL+4 or similar might also be a good compromise.

[1]: https://github.com/benrbray/prosemirror-math

This is a neat theme and site.

I have a a google doc called “unix commands” that I just add stuff onto. It started as a text file in my home directory 30 years ago and has grown to pretty much any snippet of code.

I control+F to find stuff and that works ok. I’m not sure the level of effort to reformat to this theme would pay off in benefits of easier search and reuse.

All notes in my theme are essentially markdown, so you'd have to convert what you've got. There would be an up front cost, but I think that the benefit might be worth it. Having said that, as you can see by the discussion on this thread, each person has their own preference for how they keep notes.

Two things I look for in a note-taking app:

- How quickly can I create/update/delete

- How easily can I search and read

I love how you have solved the second part. I have to ask, how do you handle the first part?

Do you keep one editor always open to quickly edit the markdown files?

I have something sort of like this and I just have a project folder on my desktop full of markdown. I add a new file, commit, and push. I like it fine when I’m in “work mode” at my laptop, but it’s a hassle when I want to add a note from my phone.

I'm super partial to Joplin. It's open source and you can keep a cloud based backup of your notes in OneDrive or other third-party cloud storage.

The notes are all markdown which is exceedingly good for code notes, with the code blocks and highlighting. And quick to pick up.

Combine with Typora for a pretty UI for your editor and you have multi-device synced notes without vendor lock-in for free.

The Android app is usable but could be a little better. Desktop is solid.

I use https://docsify.js.org/#/

It has a built in search, I dont know how good it is tough.

I edit it in my IDE. It's always in my "recent project tab" and I have the IDE open anytime I use or want to edit the notes anyway.

It doesn't need a special note-app, which makes it even easier to use it anywhere. docsify has a "edit on github"-addon, which would make it easy to even edit it in the browser.

We’ve got an app we’re building, currently in alpha, that is tuned for both of these requirements. It is also super easy to get started. Try it out at https://NoteBrook.app early access code ALPHA2020. The version in production right now has real time sync, full text search, and heirarchical tags for organization. Note creation is super streamlined and on mobile you just hit enter 3 times at the end of a note to create it. On desktop, you use ctrl+enter.

Email us at hello at NoteBrook dot com if you want to be on the mailing list. New version launching this weekend with favoriting, deleting, and editing support. Beta out by end of month with apps on every major platform.

We are obsessed in our design with making everything as fast and streamlined as possible. For example, deleting notes is similar to gmail where it instant deletes instead of showing you a modal of “are you sure?”, but gives you an “undo” snack bar at the bottom if you didn’t mean to delete it, and you can search and find the note later with a deleted note filter if you ever do want to undelete it later. There is not a separate “note list” view, you can always see the full text of recent notes and can search filter all from a single page. Our entire side menu is just signup/login/sign out right now, everything else about the app is driven from the main UI!

Please give it a try and let us know what you think we should add next. Right now, we’re planning on adding image and file upload, markdown and code support, and full screen editors after we launch the beta with apps.

Sure, I signed up. Trying it out!

Looking good! I'm currently using [Notable](https://github.com/notable/notable) for markdown-based note-taking. I have its root directory pushed to a Git repo to sync across multiple machines, working well so far.

Looks cool!

To add a alternative: Docsify

It's not optimized for notes(tags are missing), but it does offer a large amount of community addons: https://docsify.js.org/#/awesome

This reminds me a bit of mdwiki http://dynalon.github.io/mdwiki/#!index.md which was just an index.html in a folder of markdown files.

That line doesn't work:

    git clone git@github.com:MrMartineau/gatsby-starter-code-notes.git code-notes

but this one does:

    git clone https://github.com/MrMartineau/gatsby-starter-code-notes

Thanks for catching this. Not sure how I managed to make that error. Fixing it now.

who honestly keeps "notes" like this

This was my first thought as well - just something I don't have in my workflow at all and it makes very little sense to me.

There are a bunch of people; just look at users of Notion and Roam, or any note taking app submitted to hacker news in the last four years.

It’s a fairly small fraction of people that do. It’s a much larger fraction of people that would benefit from doing so.

It's something I haven't tried because I can already predict the outcome. I'd get into for a few weeks, I'd put a bunch of stuff in there, but I wouldn't be able to break the muscle memory of just using Google/DDG when I need to know something. Then I'd inevitably give up.

Respect to those who do it and it works for them though.

Same; I installed SnippetsLab a while ago and put some stuff in it, it's neat, but I rarely find myself actually looking up stuff in there again. It's got stuff like the odd Bash line for advanced Git stuff (like looking up certain statistics), but that's rarely used.

That said, if you put it up on a website and add a short blurb, search engines can come index it, and others may be able to find and use it.

Sometimes my search ends up on a Github Gist, which will often have a bit of discussion in the comments as well.

Ever came up with your own snippet when Google/DDG search failed to deliver?

Absolutely but then the answer I need is in git.

I do. Not code, but a mix of a custom cheatsheet, notes and blog..

It's not that elaborate, but I found it the best solution for cross platform and cross-location.

I can access it everywhere and edit it from everywhere, where I have a IDE available.

I like a 1 for all solution more then specific tools, like the specialized cheatsheet CLI tools - it gets messy after a while...

I use https://docsify.js.org/#/ at https://slashlog.org/#/

I used to keep snippets of bash commands, but now I just use the [1] dotfiles method of storing all your scripts in a git versioned folder.

Anything I find my self Googling how to do (git remove merged branches from origin), I create an easy command for.

[1] https://github.com/benwinding/dotfiles

Reply on news.ycombinator.com