context with inboundReference

[dfeng]

Hi,

Firstly, just wanted to say that I'm really enjoying this theme – so thanks for all the work you've put into it!

One of the things I like in https://github.com/mathieudutour/gatsby-digital-garden is that the inboundReferences include the context (e.g. here), whereas your implementation simply shows that there exists an inbound reference. My current "digital garden" uses https://github.com/andymatuschak/note-link-janitor, which also provides the context.

I've been looking at the code, though I'm not particularly familiar with js/gatsby/remark. Would it be easy to enable this feature? I'm happy to work on it as an excuse to learn some js.

[dfeng]

Having spent some more time with the other foam/gatsby offerings, there are little things from each that I like. For instance, one nice thing about https://github.com/hikerpig/gatsby-project-kb/ is the ability to inline the ToC, and the ability to enable comments (https://gatsby-project-kb.vercel.app/examples/comment-system).

I'm also a fan of using sidenotes/marginnotes (from https://edwardtufte.github.io/tufte-css/), and have been trying to get something going. I'm slowly coming to the conclusion that I should probably just create my own fork/theme!

[theowenyoung]

@dfeng , Thanks for your kind comments!

Maybe you can also custom the whole theme files, See this for more details,

An example of this theme, you can see this blog, it replaces many files with its own theme file, https://github.com/padosum/blog/tree/master/.layouts/src/gatsby-theme-primer-wiki , may be you can do similar things.

Anyhow, of course you can fork your own theme to match your needs.

Have fun!

[theowenyoung]

I didn't get your exact meanings, for inboundReferences, this theme also has a detailed body preview, what's your point?

[theowenyoung]

And this theme also has the ability of the ToC, what do you mean the inline toc?

[theowenyoung]

the ability to enable comments (https://gatsby-project-kb.vercel.app/examples/comment-system).

This is also enabled by this theme, because they are both gatsby themes, of course you can use the shadowing feature.

https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/shadowing/

For example, https://github.com/padosum/blog uses this theme, and it has the comment feature.

I'm also a fan of using sidenotes/marginnotes (from https://edwardtufte.github.io/tufte-css/), and have been trying to get something going.

It's nice, but I don't know how to include it in my theme, it seems a little conflict with the sidebar toc?

[dfeng]

I didn't get your exact meanings, for inboundReferences, this theme also has a detailed body preview, what's your point?

Sorry. Should have been more explicit. I meant the fact that you get the context in the backlinks section: for instance, the - [[override-styles]] shows some approaches to change the appearance of the site. below.

Whereas in your version, you just show the link (following how Obsidian Publish does it).

[theowenyoung]

The context you mentioned is a little content preview of that note? But now it already has a hover preview of that note. I’m sorry still not get the point…

[dfeng]

An example of this theme, you can see this blog, it replaces many files with its own theme file, https://github.com/padosum/blog/tree/master/.layouts/src/gatsby-theme-primer-wiki , may be you can do similar things.

Sweet! This is exactly what I'm looking for.

[dfeng]

The context you mentioned is a little content preview of that note? But now it already has a hover preview of that note. I’m sorry still not get the point…

The difference is that when you start creating long notes like I do, then having the local context that you can just see (instead of hovering over each backreference, and locating the reference within the preview) is extremely helpful.

As an example from my current blog, which uses a different engine:

In your current setup, I would have to hover over each page to see the context. This way I immediately see where (and why) [[project-penalty]] has been linked.

[theowenyoung]

Now I get it! Yes, it’s a great feature, let me inspect it, see what can I do. Thank you for the detailed explanation!

[dfeng]

No, thank you!

Both https://github.com/mathieudutour/gatsby-digital-garden and https://github.com/hikerpig/gatsby-project-kb/ have the context. I had a quick look at their code, as it seemed like it shouldn't be too difficult (just save the node content), but I'm still not familiar enough with typescript.

[theowenyoung]

Hi, @dfeng , I found the digital garden's inboundReferences implement is using roamsearch functions,

See:

https://github.com/mathieudutour/gatsby-digital-garden/blob/666422bfb72ba0e1df1dbccf86d9f4fc1a80e67f/packages/gatsby-theme-garden/src/utils/data-to-note.js#L34-L62

So it's not provided by local file.

If we want to do similar things, we must analyze the relative blocks maybe here:

https://github.com/theowenyoung/gatsby-theme-primer-wiki/blob/95c337ce514f609171193e427031a3077e25d8d0/references/lib/get-references.js#L40-L46

get more context nearby the link, and blabla.

If you are interested in this, I look forward to this feature! :)

[theowenyoung]

I noticed https://github.com/andymatuschak/note-link-janitor/blob/master/lib/getBacklinksBlock.ts

do some similar things.

maybe we can reuse this code.

but for now, I have not willing to do this thing.