gatsby-theme-primer-wiki
gatsby-theme-primer-wiki copied to clipboard
RFC: Consider adding note colouring to graphView
Motivation
When organizing note, we can have semantic kind of node.
Eg some note about "Book", some about "Thought", etc...
Allowing the user to see the colors make it easier to find the information on the graph
![image](https://user-images.githubusercontent.com/13785185/166497172-767c470f-8a1c-47f5-9b27-dce32bcada68.png)
(You can see in the previous image that foam on vscode already support node coloring since https://github.com/foambubble/foam/pull/438.)
{
"foam.graph.style": {
"node": {
"concept": "#3b82f6",
"technology": "#8b5cf6",
"kaizen discovery report": "#f43f5e",
"tag": "#14b8a6"
}
}
}
User explanation
- user would provide an optional
type
property in .md file
---
title: CPU Bound
type: concept
tags:
- Concept
---
- user would provide an optional customGraphStyle in config
module.exports = {
plugins: [
{
resolve: "gatsby-theme-primer-wiki",
options: {
+ "customGraphStyle": {"concept: "#3b82f6"}
},
},
]
}
Technical explanation
- gatsby-theme-primer-wiki uses note-graph
- note-graph support coloring since https://github.com/hikerpig/note-graph/pull/22/files
- it is documented on https://note-graph-hikerpig.vercel.app/?path=/docs/example--styling-different-node-types
The above example code is:
() => {
const localNotes: Note[] = CONCEPT_DATA.map((o, i) => ({
...o,
type: ['JS Lib', 'Visualization'].includes(o.title) ? 'tag' : 'note',
}))
const noteGraphNote = localNotes.find((o) => o.title === 'Note Graph')
noteGraphNote.nodeStyle = {
regular: '#E94780',
}
const graphModel = new NoteGraphModel(localNotes)
const tagStyle: NodeStyle = {
regular: '#64BB00',
lessened: 'rgba(101, 189, 0, 0.6)',
highlighted: 'green',
}
const localStyle = {
node: {
/** Set different style for nodes with `tag` type */
tag: tagStyle,
},
}
return (
<div>
<GraphView
graphModel={graphModel}
style={localStyle}
onGraphViewInit={(view) => {
if (noteGraphNote) {
view.setSelectedNodes([noteGraphNote.id])
}
}}
></GraphView>
</div>
)
}
- we should modify https://github.com/theowenyoung/gatsby-theme-primer-wiki/blob/main/theme/src/components/graph-view.js (to add the localStyle that come from the config) and https://github.com/theowenyoung/gatsby-theme-primer-wiki/blob/main/theme/src/use-note-graph-data.js (to extract the
type
from frontmatter)
Why not do this
- initial work => I would like to contribute that it is easier for you to review external code (some open source project found it harder to review code that doing themself)
- maintenance work => it should be rather separated from rest of the code so it should impact codebase too much
Unresolved question
- Should we support dark theme in config, eg
module.exports = {
plugins: [
{
resolve: "gatsby-theme-primer-wiki",
options: {
+ "customGraphStyle": {"concept: {"dark": "#5eead4", "light": "#0f766e"}}
},
},
]
}
-
Maybe
type
conflict with other property so we may pick another name (eg "graphType" and map over the node to rename it just for the graph) -
Would you prefer a contribution (later this week) or would you prefer to do it yourself ?
Hi @theowenyoung, have you been able to look at the RFC yet ? Let me know if you are interested.