
Show HN: Code Notes – A Gatsby theme for publishing code-related notes - mrmartineau
https://zander.wtf/blog/code-notes-release
======
rsapkf
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/](https://v2.docusaurus.io/)

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

Notes: [https://rsapkf.github.io/notes/](https://rsapkf.github.io/notes/)

~~~
marvion
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.

------
benrbray
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](https://github.com/nextapps-
de/flexsearch) [2]: [https://prosemirror.net/](https://prosemirror.net/)

~~~
lukevp
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](https://NoteBrook.app) and the early access code is
ALPHA2020. Email us at hello at NoteBrook.com

~~~
benrbray
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...](https://codesandbox.io/s/quizzical-
austin-m7n3t?file=/src/index.ts)

~~~
lukevp
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?

~~~
benrbray
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](https://github.com/benrbray/prosemirror-math)

------
prepend
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.

~~~
mrmartineau
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.

------
ivarojha
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?

~~~
lukevp
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](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.

~~~
ivarojha
Sure, I signed up. Trying it out!

------
StamiLabs
Looking good! I'm currently using
[Notable]([https://github.com/notable/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.

------
marvion
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](https://docsify.js.org/#/awesome)

~~~
m-localhost
This reminds me a bit of mdwiki
[http://dynalon.github.io/mdwiki/#!index.md](http://dynalon.github.io/mdwiki/#!index.md)
which was just an index.html in a folder of markdown files.

------
johnchristopher
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

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

------
johnghanks
who honestly keeps "notes" like this

~~~
kevsim
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.

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

~~~
kevsim
Absolutely but then the answer I need is in git.

