Dataviz.Garden

[kalmir]

Hi everyone,

my garden is open for visitors: dataviz.garden.

Some notes on the setup

1. Redirect to dataviz.roam.garden – via free Cloudflare.com service.

2. Hiding of make_public tag/bullet: I'm hiding last item of the last list (excluding references), so that's where I need to put it.

3. Changelog: I'm planning to do it on a monthly basis, leveraging Created and Updated tags as well as specific month+year tags.

4. Design decisions: you can see them in my css tweaks below.

CSS

/* Body & header */

body.light-mode {
    --link: #A51268;
    --references-bg: #fbf4f9;
    --references-text: #666666;    
    --main-bg: #fff;
    --note-bg: #fff;
    --separator: #A51268;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='p' width='100' height='100' patternUnits='userSpaceOnUse' patternTransform='rotate(45) scale(0.46)'%3E%3Ccircle id='a' data-color='outline' fill='none' stroke='%23FBF4F9' stroke-width='3.22' cx='0' cy='0' r='60'%3E%3C/circle%3E%3Cuse xlink:href='%23a' x='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='100' y='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' y='100'%3E%3C/use%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'%3E%3C/rect%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}`

body.dark-mode {
    --link: #dba0c3;
    --references-bg: #2d2d2d;
    --references-text: #acacac;
    --main-bg: #0d0d0d;
    --note-bg: #0d0d0d;
    --separator: #acacac;
    --text: #e9e9e9;
    --shadow: #1d1d1d;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='p' width='100' height='100' patternUnits='userSpaceOnUse' patternTransform='rotate(45) scale(0.46)'%3E%3Ccircle id='a' data-color='outline' fill='none' stroke='%232D2D2D' stroke-width='3.22' cx='0' cy='0' r='60'%3E%3C/circle%3E%3Cuse xlink:href='%23a' x='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' x='100' y='100'%3E%3C/use%3E%3Cuse xlink:href='%23a' y='100'%3E%3C/use%3E%3C/pattern%3E%3C/defs%3E%3Crect fill='url(%23p)' width='100%25' height='100%25'%3E%3C/rect%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

header {
    background-color: var(--references-bg);
}

/* Lists & headings */

ul {
    padding-inline-start: 20px;
}

ul h2 {
    font-size: 1.1em;
    padding-top: .2em;
  }
  
ul h3 {
    font-size: 1em;
    padding-top: .2em;
  }

/* Hide public_page bullet */
#gatsby-focus-wrapper > div > div > div > div > div > ul:last-of-type > li:last-of-type {
    display: none;
}

/* Blockqupte */
blockquote>p {
    padding: .2em .4em;
    border-left: 0;
    background-color: var(--references-bg);
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
    border-bottom-left-radius: .5rem;
}

/* Adjust Roam.Garden logo */

span.powered-by {
    margin-left:auto;
    margin-right: 0;
    display: block;
    width: 115px;
    font-size: 0.9rem;
    line-height: 1rem;
    padding-top: 1px;
}


/* Note card margin, border and shadow */

.note-container {
    margin: 1rem 0rem 1rem 1rem;
    box-shadow: 0 0 15px 3px var(--shadow);
    border-radius: .5rem;    
}

.note-columns-container {
    padding-right: 1rem;
}


/* Blend search icon with background */

.inputWrapper input {
    background-color: transparent;
}

#downshift-233-input {
    background-color: transparent;
}

/* Add logo emoji */  

#gatsby-focus-wrapper > div > header > a > h3:before {
    content: "🌈 ";
    font-size: 1.2em;
} 

/* Adjust margins */ 

h1 {
    margin-top: 0.4rem;
}

.references-block {
    margin-top: 1.4rem;
    padding: 20px;
}

/* Links */ 
.internal-link:before {
    content: none;
}

.external-link:after {
    content: " \2197";
}

[Stvad]

Thanks a lot for sharing! Adding screenshot of current state for posterity 🙂

[halilakin]

Are created and updated tags automatic? How do we enable them?

[Stvad]

I believe those are manually maintained by @kalmir 🙂. Though it should be possible to generate them automatically..

[halilakin]

Thanks @Stvad. I'd really appreciate if anybody knows and can share how to generate them automatically

[kalmir]

Hi, @AkinH, this is semi-automatic and easy or difficult to set up depending on how well you know Roam. I generate the footer by using SmartBlocks. It looks like this:

---

• [[Updated]]: [[March 2021]].
• [[Created]]: [[March 2021]].
• #public_page

I hit "jj" and choose the block, then it is generated. I then manually change the month. I think this can be futher automated with using a variable date instead of the "March 2021".

[Stvad]

I think SmartBlocks can run code/etc, so one can make this fully automatic by reading the information about page create/update date from roamAlphaApi