Dawid Rejowski

My config for SilverBullet I decided to share.

JavaScript libraries

local confetti = js.import("/.fs/.js/confetti.browser.min.js")

Colors

:root {
  --root-background-color: #F7F7F7;
}

More visible unsaved mark

/*#sb-top {
  --unsaved-glow-color: grey;
}
#sb-current-page {
  transition: color 0.2s;
}
#sb-top .sb-page-name-editor {
  text-shadow: var(--unsaved-glow-color) 0 0px;
  transition: text-shadow 0.2s;
}
#sb-top .sb-unsaved .sb-page-name-editor {
  text-shadow: var(--unsaved-glow-color) 0 0 4px;
}*/

Unsaved mark with animation

#sb-current-page {
  transition: color 0.2s;
}

.sb-unsaved .sb-page-name-editor {
  transition: opacity 1s;
}

#sb-current-page::before {
  display: inline-block;
  vertical-align: center;
  opacity: 0.9;
  transform: scale(0.6);
  width: 20px;
  transition: opacity 0.25s;
  opacity: 1;
}

#sb-current-page.sb-saved::before {
  content: "✓";
  transform: scale(0.5);
  opacity: 0;
}

#sb-current-page.sb-sync-error::before {
  content: "⚠";
  opacity: 1;
}

#sb-current-page.sb-unsaved::before {
  content: "⟳";
  animation: current-page-saving 1s step-end infinite;
  transition: opacity 0.5s;
  opacity: 1;
}

@keyframes current-page-saving {
  0%     { content: ' ⠋'; }
  8.33%  { content: ' ⠙'; }
  16.66% { content: ' ⠹'; }
  25%    { content: ' ⠸'; }
  33.33% { content: ' ⢰'; }
  41.66% { content: ' ⣰'; }
  50%    { content: ' ⣠'; }
  58.33% { content: ' ⣄'; }
  66.66% { content: ' ⣆'; }
  75%    { content: ' ⡆'; }
  83.33% { content: ' ⠇'; }
  91.66% { content: ' ⠏'; }
}

Wider editor

:root {
  --editor-width: 900px;
}
body.wider-editor {
  --editor-width: 1400px;
}

Action buttons

actionButton.define {
  icon = "edit3",
  command = "Quick Note",
  priority = 2,
}
actionButton.define {
  icon = "search",
  command = "Silversearch: Search",
  priority = 3,
}
actionButton.define {
  icon = "settings",
  command = "Configuration: Open",
  priority = 0,
}
actionButton.define {
  icon = "code",
  command = "Editor: Toggle Markdown Syntax Rendering",
  priority = 1,
}
actionButton.define {
  icon = "trash",
  command = "Page: Delete",
  dropdown = true,
  priority = 2,
}

Git integration

config.set("git.autoSync", 30)

Page banner

event.listen {
  name = "hooks:renderTopWidgets",
  run = function(e)
    local fm = index.extractFrontmatter(editor.getText())
    if fm.frontmatter and fm.frontmatter.pageDecoration and fm.frontmatter.pageDecoration.banner then
      local bannerPath = fm.frontmatter.pageDecoration.banner
      md = "![Banner](" .. bannerPath .. ")"
      return widget.new {
        markdown = md,
        cssClasses = {"top-banner"}
      }
    end
  end
}

#sb-main .cm-editor .top-banner {
  align-self: center;
  border: none;
  width: 100%;
  max-width: 900px;
}

#sb-main .cm-editor .top-banner img {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}