rework notes

• now entry with the same name together, separate by date

still getting things out from logseq with properties and generate static path with regex voodo

• const slug = (s: string) => s.replace(/[^a-z\d ]+/ig, " ").replace(/\s{2,}/g, " ").trim().split(" ").join("-")
  

• this will make things into something-like-this for path purpose.

• horrendous, i know. but it quick and painless and i have /dev/log here for future reference

also query specific block using uuid in logseq

•   [
      :find (pull ?b ${model})
      :in $ % 
      :where [?b :block/uuid #uuid "${id}"]
    ]
  

• i don’t know why, but it works, so it works

firefox haven’t supported :has() selector yet…

• polyfill and introducing postcss-preset-env is too much complication for me to go that route. browser polyfill with js -> no. no. no.

back to class way. figuring out which li have nested ul, and then add .parent to that.

• :has made styling parent element so much easier. why firefox, why

test on firefox to check if things work correctly or not

• another level?

  • nobody should ever use h1 here, but i make it long anyways to see if it wraps correctly

  • siblings?

    • ok

goodreads killed off their api, so i ended up tracking book myself

• logseq and simple query are good for this kind of stuff, so why not

• (and (property :book) (not (property :quote)) (property :status "read"))
  

• games and movies are next 😤

make an outline style for logseq content

• css recently introduce & nesting selector so scoping style for logseq is trivial now, and new css selector like :has, :is is a bliss to work with.

• the gap after list marker default doesn’t give me any kind of alignment to create a border like logseq. so i have to jumping through hoop and align everything by myself.

• the hardest thing about this is make the alignment just right for header and the bullet

  • i have a simple solution is using fixed line-height for all the header and then absolute positioning the bullet

  • it convenient and still look great. keep it simple, stupid.

• .logseq {
    & * > * {margin-bottom: 8px;}
    & h1, h2, h3, h4, h5, h6 {
      line-height: 32px; padding: 8px 0;
      & + ul:has(> :is(h1,h2,h3,h4,h5, h6)) {margin-top: -16px;}
      & + ul { margin-top: -8px;} }
    & ul { width: 100%; margin: 0 8px;}
    & * > ul {padding-left: 8px;}
    & li {list-style: none; position: relative; --bullet-spacing:0px}
    & li:has(> ul)::after {content:"";
      position: absolute; top: calc(24px + var(--bullet-spacing)); left: -8px; transform: translateX(100%);
      height: calc(100% - 24px - var(--bullet-spacing)); width: 2px; 
      background-color: var(--sel); };
    & li::before{content: "•"; position: absolute; left: -8px;}
    & li:has(h1,h2,h3,h4,h5,h6)::before{top:12px;}
    & li:has(h1,h2,h3,h4,h5,h6)::after {--bullet-spacing:12px;}
  }
  

figuring out how to sort by left node #logseq

• here a little peak into how logseq store the block inside datascript nicely encoded in typescript

  • interface Node {
    	id: number
    	left_node: Node //sibling next to the node
    	parent: Node //parent of this node
    }
    
    type Tree = Node[]
    

  • this is a linked list (ikr 🤯) reprensenting a tree

    • this kind of data structure help us figured out which of the node is the first children of other node with simple check node.left_node.id === node.parent.id

    • the other children will need to follow left_node until left_node.id == node.parent.id also

      • the length of search will neatly indicate the order of node in a tree (e.g first child = 1, second (left = first child ) = 2)

    • and we can find the order of node by follow the left_node until the left_node is also the parent_node, which mean we at the very first sibling of this tree

  • after we establish the relationship between parent and left_node we can easily traverse the tree with this beautiful recursive function

    • function walk(tree, parent, count){
      	if (tree.id === parent.id) return count;
          return walk(tree.left_node, parent, count+1)
      }
      

• the problem become sort by the distance from the node to the parent

  • first we need to recursively pulled the left node of this node

    • with (pull [{:block/left ...}])

  • then we traverse the tree until we found the left node id equal to the parent

• the only requirement to make this problem easier is the nodes to be sorted with should have the same parent

  • even logseq itself have no clue how to sort when the query result have different parent

fixed some weird bugs about textarea and @preact/signals

• textarea doesn’t support value property so when i tried to passed value into it some thing broke. move the value inside textarea and it works fine now