Radish alpha
r
radicle.xyz
rad:z371PVmDHdjJucejRoRYJcDEvD5pp
Radicle website including documentation and guides
Radicle
Git
Patches › aac99fc4
Add dark and light theme demo
Merged did:key:z6MkfgZK...5YMm opened 2 years ago
Activity Changes +149 -58
8 files changed +149 -58 99180a85 → d9b06ec8
modified _guides/protocol.md
@@ -4,7 +4,7 @@ subtitle: How Radicle works under the hood
layout: guide

---
- 
Heartwood, the latest release of the [Radicle][] protocol establishes a
+ 
Heartwood, the latest generation of the [Radicle][] protocol establishes a

sovereign data network for code collaboration and publishing, built on top of

[Git][]. In Radicle, users maintain local copies of their interested

repositories and related social artifacts such as issues and patches. Instead
@@ -59,12 +59,12 @@ of projects that choose traditional self-hosted solutions.
The Radicle protocol, in contrast, extends Git's capabilities with a

decentralized identity system, novel gossip protocol, and integrated social

artifacts, forming a *self-hosted network for code collaboration*. Radicle
- 
locates, serves, and replicates Git repositories across a [peer-to-peer][]
- 
network while maintaining data authenticity via cryptographic signatures, so
- 
peers can directly exchange data without the need for a trusted third party.
- 
This enables communities to both self-host and share their repositories across
- 
a distributed protocol, contributing to the emergence of a new sovereign
- 
network for code collaboration and more.
+ 
locates, serves, and replicates Git repositories -- including artifacts --
+ 
across a [peer-to-peer][] network while maintaining data authenticity via
+ 
cryptographic signatures, so peers can directly exchange data without the need
+ 
for a trusted third party. This enables communities to both self-host and share
+ 
their repositories across a distributed protocol, contributing to the emergence
+ 
of a new sovereign network for code collaboration and more.



## Nodes
modified _guides/seeder.md
@@ -352,9 +352,9 @@ For example,
    rad seed rad:z3gqcJUoA1n9HaHKufZs5FCSGazv5



This will override the default `block` rule for this one specific repository.
- 
To remove this override, `--delete` can be passed:
+ 
To remove this override, `unseed` can be used:
- 
    rad seed --delete rad:z3gqcJUoA1n9HaHKufZs5FCSGazv5
+ 
    rad unseed rad:z3gqcJUoA1n9HaHKufZs5FCSGazv5



Without a seeding policy for this repository, the default policy will apply.
modified _layouts/default.html
@@ -13,8 +13,8 @@
    <meta name="twitter:site" content="@radicle" />

    <meta name="twitter:creator" content="@radicle" />

    <link rel="shortcut icon" href="/assets/images/radicle.svg"/>
- 
    <link rel="stylesheet" href="{{ "/assets/css/fonts.css" | relative_url }}">

    <link rel="stylesheet" href="{{ "/assets/css/main.css" | relative_url }}">
+ 
    <link rel="stylesheet" href="{{ "/assets/css/fonts.css" | relative_url }}">

    <link rel="stylesheet" href="{{ "/assets/css/monokai.css" | relative_url }}">

  </head>

  <body>
@@ -26,6 +26,7 @@
      </div>

      <nav>

      </nav>
+ 
      <button class="toggle" id="toggle-theme"><!-- Set by script --></button>

    </header>

    <main>

      <h1>{{ page.title }}</h1>
@@ -33,7 +34,8 @@
      {{ content }}

    </main>

    <footer>
- 
      &copy; The Radicle Team
+ 
      <p>&copy; The Radicle Team</p>

    </footer>
+ 
    <script src="{{ "/assets/js/toggle-theme.js" | relative_url }}"></script>

  </body>

</html>
modified _layouts/guide.html
@@ -26,6 +26,7 @@
      </div>

      <nav>

      </nav>
+ 
      <button class="toggle" id="toggle-theme"><!-- Set by script --></button>

    </header>

    <main>

      <h1>{{ page.title }}</h1>
@@ -36,7 +37,8 @@
      {{ content }}

    </main>

    <footer>
- 
      &copy; The Radicle Team
+ 
      <p>&copy; The Radicle Team</p>

    </footer>
+ 
    <script src="{{ "/assets/js/toggle-theme.js" | relative_url }}"></script>

  </body>

</html>
modified assets/css/main.css
@@ -1,22 +1,34 @@
@charset "utf-8";



:root {
- 
  --color-bg-dark: #0a0d10;
- 
  --color-bg-light: #fff6fdaa;
- 
  --color-fg-dim-0: #444;
- 
  --color-fg-dim-1: #666;
- 
  --color-fg-dim-2: #999;
- 
  --color-fg-dim-3: #ccc;
- 
  --color-fg-dim-4: #eee;
- 
  --color-bg-dim-0: #f1f1f1;
- 
  --color-bg-dim-1: #fafafa;
- 
  --color-fg-subtle-pink: #4c3159;
- 
  --color-fg: #1a1a1a;

  --color-yellow: #ffff88;
- 
  --color-fg-highlight: #5555bb;

  --color-fg-highlight-secondary: #229944;
- 
  --color-border-highlight: #aaaaee;
- 
  --color-bg-highlight: #efefff;
+ 
  --color-background-highlight: #efefff;
+ 
  --color-background-default: #f5f5ff;
+ 
  --color-foreground-contrast: #232563;
+ 
  --color-foreground-dim: #6a6a81;
+ 
  --color-foreground-emphasized: #7070FF;
+ 
  --color-foreground-match-background: #f5f5ff;
+ 
  --color-fill-secondary: #7070FF;
+ 
  --color-fill-separator: #dbdbff;
+ 
  --color-fill-ghost: #EBEBFF;
+ 
  --color-border-hint: #DBDBFF;
+ 
  --color-border-focus: #8585FF;
+ 
}
+
+ 
:root[data-theme="dark"] {
+ 
  --color-yellow: #ffff88;
+ 
  --color-background-highlight: #14151a;
+ 
  --color-background-default: #0a0d10;
+ 
  --color-foreground-contrast: #f9f9fb;
+ 
  --color-foreground-dim: #9b9bb1;
+ 
  --color-foreground-emphasized: #7070FF;
+ 
  --color-foreground-match-background: #0a0d10;
+ 
  --color-fill-secondary: #7070FF;
+ 
  --color-fill-separator: #24252d;
+ 
  --color-fill-ghost: #24252D;
+ 
  --color-border-hint: #24252D;
+ 
  --color-border-focus: #8585FF;

}



::selection {
@@ -28,16 +40,18 @@
}



html {
- 
  font-family: var(--font-family-default);
- 
  color: var(--color-fg);
+ 
  font-family: var(--font-family-default), sans-serif;
+ 
  color: var(--color-foreground-contrast);

  min-width: 1280px;

}



body {

  margin: 0;
+ 
  height: 100vh;
+ 
  background-color: var(--color-background-default);

}
- 
header, main, footer {
+ 
main, footer {

  display: grid;

  grid-column-gap: 2rem;

  grid-auto-flow: row;
@@ -57,18 +71,27 @@ main {
}



header, footer {
- 
  color: rgba(255, 255, 255, 0.8);

  font-weight: 300;

}



header {
- 
  background-color: var(--color-bg-dark);
- 
  height: 4rem;
- 
  align-items: stretch;
+ 
  display: flex;
+ 
  background-color: var(--color-background-default);
+ 
  padding: 1rem 1.5rem;
+ 
  align-items: center;
+ 
  justify-content: space-between;

}



footer {
- 
  padding: 4rem 0;
+ 
  padding-bottom: 3rem;
+ 
  color: var(--color-foreground-dim);
+ 
}
+
+ 
footer p {
+ 
  font-size: var(--font-size-tiny);
+ 
  display: block;
+ 
  text-align: left;
+ 
  grid-column: text;

}



nav {
@@ -110,7 +133,7 @@ h2 {
  font-weight: var(--font-weight-semibold);

  margin: 3.75rem 0 1.5rem;

  padding-bottom: 1rem;
- 
  border-bottom: 1px solid var(--color-fg-dim-4);
+ 
  border-bottom: 1px solid var(--color-fill-separator);

}



h3 {
@@ -132,12 +155,12 @@ h5 {
}



pre, code {
- 
  color: var(--color-fg-subtle-pink);
+ 
  color: var(--color-foreground-contrast);

  font-family: var(--font-family-code);

}



pre {
- 
  background-color: var(--color-bg-light);
+ 
  background-color: var(--color-background-highlight);

  overflow-x: scroll;

  font-size: 0.875rem;

  border-radius: 4px;
@@ -158,7 +181,7 @@ p code, ul code, ol code, aside code {
  padding: 1px 4px;

  border-radius: 2px;

  word-spacing: -2px;
- 
  background-color: var(--color-bg-light);
+ 
  background-color: var(--color-fill-separator);

}



strong code {
@@ -176,7 +199,7 @@ aside code {
table {

  font-size: 0.875rem;

  border-collapse: collapse;
- 
  background-color: var(--color-bg-dim-1);
+ 
  background-color: var(--color-background-highlight);

}



table td:first-child {
@@ -186,18 +209,25 @@ table td:first-child {


table td {

  vertical-align: top;
- 
  border-bottom: 1px solid white;

  padding: 0.5rem;

}



table th {

  font-size: var(--font-size-small);

  font-weight: var(--font-weight-regular);
- 
  background-color: var(--color-bg-dim-0);
+ 
  background-color: var(--color-fill-separator);

  padding: 0.5rem;

  text-align: left;

}
+ 
table tr {
+ 
    border-bottom: 1px solid var(--color-fill-separator);
+ 
}
+
+ 
table tr:last-child {
+ 
    border-bottom: none;
+ 
}
+ 


table code {

  font-weight: normal;

}
@@ -214,17 +244,14 @@ blockquote + p {
}



blockquote {
- 
  color: var(--color-fg-dim-0);
- 
  background: var(--color-bg-highlight);
+ 
  color: var(--color-foreground-contrast);
+ 
  background: var(--color-background-highlight);

  padding: 1rem;

  margin: 1rem 0;
- 
  border-left: 2px solid var(--color-border-highlight);
+ 
  border-left: 2px solid var(--color-border-focus);

}



.title {
- 
  grid-column: left;
- 
  display: grid;
- 
  grid-auto-flow: column;

  align-items: stretch;

  justify-self: start;

}
@@ -244,7 +271,7 @@ blockquote {


.subtitle {

  font-size: 1.125rem;
- 
  color: var(--color-fg-dim-1);
+ 
  color: var(--color-foreground-dim);

  margin: 0 0 4rem;

}
@@ -264,7 +291,7 @@ main img.placeholder {
  height: 8rem;

  border: none !important;

  outline: none !important;
- 
  background: var(--color-fg-dim-4) !important;
+ 
  background: var(--color-background-highlight) !important;

}



figure {
@@ -335,7 +362,7 @@ aside.diagram {
figcaption, aside {

  font-size: 0.75rem;

  line-height: 1.5;
- 
  color: var(--color-fg-dim-1);
+ 
  color: var(--color-foreground-dim);

}



a {
@@ -344,10 +371,11 @@ a {
}



p a {
- 
  border-bottom: 1px solid var(--color-fg-dim-2);
+ 
  border-bottom: 1px solid var(--color-foreground-dim);

}

p a:hover {
- 
  border-bottom-color: var(--color-fg-dim-1);
+ 
  color: var(--color-foreground-emphasized);
+ 
  border-bottom-color: var(--color-foreground-emphasized);

}



p, ol, ul, table, pre {
@@ -366,12 +394,12 @@ hr {
  grid-column: screen;

  width: 100%;

  border: none;
- 
  border-top: 1px solid var(--color-fg-dim-4);
+ 
  border-top: 1px solid var(--color-fill-separator);

  margin: 0;

}



span.highlight {
- 
  color: var(--color-fg-highlight);
+ 
  color: var(--color-foreground-emphasized);

}



span.highlight-secondary {
@@ -379,15 +407,33 @@ span.highlight-secondary {
}



.button {
- 
  color: var(--color-fg-highlight);
+ 
  color: var(--color-fill-secondary);

  font-weight: normal;

  padding: 1rem 2rem;
- 
  border: 1px solid var(--color-fg-highlight);
+ 
  border: 1px solid var(--color-fill-secondary);

  border-radius: 4px;

}

.button:hover {

  color: white;
- 
  background-color: var(--color-fg-highlight);
+ 
  background-color: var(--color-fill-secondary);
+ 
}
+
+ 
.toggle {
+ 
  border: none;
+ 
  background-color: var(--color-background-default);
+ 
  color: var(--color-foreground-contrast);
+ 
  padding: 0.5rem;
+ 
  width: fit-content;
+ 
  height: fit-content;
+ 
  border-radius: 0.25rem;
+ 
  cursor: pointer;
+ 
}
+ 
.toggle:hover {
+ 
  background-color: var(--color-fill-separator);
+ 
}
+
+ 
.toggle-theme {
+ 
    pointer-events: none;

}



.toc {
@@ -429,7 +475,7 @@ span.highlight-secondary {
  margin-left: 1rem;

}

.toc-h3 > a, .toc-h4 > a, .tok-h5 > a {
- 
  color: var(--color-fg-dim-1);
+ 
  color: var(--color-foreground-dim);

}



.poem {
added assets/images/moon.svg
@@ -0,0 +1,3 @@
+ 
<svg width="24" height="25" viewBox="0 0 24 25" fill="var(--color-foreground-dim)" xmlns="http://www.w3.org/2000/svg">
+ 
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5 5.47656C9.35786 5.47656 6 8.83443 6 12.9766C6 17.1187 9.35786 20.4766 13.5 20.4766C14.8679 20.4766 16.149 20.1108 17.2524 19.4719C13.7773 19.3418 11 16.4835 11 12.9766C11 9.46963 13.7773 6.61137 17.2524 6.48119C16.149 5.8423 14.8679 5.47656 13.5 5.47656ZM5 12.9766C5 8.28214 8.80558 4.47656 13.5 4.47656C15.1842 4.47656 16.7554 4.96691 18.0768 5.81281C18.5001 6.08375 18.5345 6.55707 18.3915 6.88626C18.2548 7.20081 17.9285 7.47656 17.5 7.47656C14.4624 7.47656 12 9.939 12 12.9766C12 16.0141 14.4624 18.4766 17.5 18.4766C17.9285 18.4766 18.2548 18.7523 18.3915 19.0669C18.5345 19.3961 18.5001 19.8694 18.0768 20.1403C16.7554 20.9862 15.1842 21.4766 13.5 21.4766C8.80558 21.4766 5 17.671 5 12.9766Z"/>
+ 
</svg>
added assets/images/sun.svg
@@ -0,0 +1,11 @@
+ 
<svg width="24" height="25" viewBox="0 0 24 25"  fill="#9b9bb1" xmlns="http://www.w3.org/2000/svg">
+ 
  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 9.47656C10.067 9.47656 8.5 11.0436 8.5 12.9766C8.5 14.9096 10.067 16.4766 12 16.4766C13.933 16.4766 15.5 14.9096 15.5 12.9766C15.5 11.0436 13.933 9.47656 12 9.47656ZM7.5 12.9766C7.5 10.4913 9.51472 8.47656 12 8.47656C14.4853 8.47656 16.5 10.4913 16.5 12.9766C16.5 15.4618 14.4853 17.4766 12 17.4766C9.51472 17.4766 7.5 15.4618 7.5 12.9766Z"  fill="#9b9bb1"/>
+ 
  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 19.4766C12.2761 19.4766 12.5 19.7004 12.5 19.9766V21.9766C12.5 22.2527 12.2761 22.4766 12 22.4766C11.7239 22.4766 11.5 22.2527 11.5 21.9766V19.9766C11.5 19.7004 11.7239 19.4766 12 19.4766Z"  fill="#9b9bb1"/>
+ 
  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.40381 17.5728C7.59907 17.768 7.59907 18.0846 7.40381 18.2799L5.98959 19.6941C5.79433 19.8893 5.47775 19.8893 5.28249 19.6941C5.08722 19.4988 5.08722 19.1822 5.28249 18.987L6.6967 17.5728C6.89196 17.3775 7.20854 17.3775 7.40381 17.5728Z"  fill="#9b9bb1"/>
+ 
  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 12.9766C5.5 13.2527 5.27614 13.4766 5 13.4766H3C2.72386 13.4766 2.5 13.2527 2.5 12.9766C2.5 12.7004 2.72386 12.4766 3 12.4766H5C5.27614 12.4766 5.5 12.7004 5.5 12.9766Z"  fill="#9b9bb1"/>
+ 
  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.40381 8.38037C7.20854 8.57563 6.89196 8.57563 6.6967 8.38037L5.28249 6.96615C5.08722 6.77089 5.08722 6.45431 5.28249 6.25905C5.47775 6.06379 5.79433 6.06379 5.98959 6.25905L7.40381 7.67326C7.59907 7.86852 7.59907 8.18511 7.40381 8.38037Z"  fill="#9b9bb1"/>
+ 
  <path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.47656C12.2761 3.47656 12.5 3.70042 12.5 3.97656V5.97656C12.5 6.2527 12.2761 6.47656 12 6.47656C11.7239 6.47656 11.5 6.2527 11.5 5.97656V3.97656C11.5 3.70042 11.7239 3.47656 12 3.47656Z"  fill="#9b9bb1"/>
+ 
  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.7175 6.25905C18.9128 6.45431 18.9128 6.77089 18.7175 6.96616L17.3033 8.38037C17.108 8.57563 16.7915 8.57563 16.5962 8.38037C16.4009 8.18511 16.4009 7.86852 16.5962 7.67326L18.0104 6.25905C18.2057 6.06379 18.5223 6.06379 18.7175 6.25905Z"  fill="#9b9bb1"/>
+ 
  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.5 12.9766C21.5 13.2527 21.2761 13.4766 21 13.4766H19C18.7239 13.4766 18.5 13.2527 18.5 12.9766C18.5 12.7004 18.7239 12.4766 19 12.4766H21C21.2761 12.4766 21.5 12.7004 21.5 12.9766Z"  fill="#9b9bb1"/>
+ 
  <path fill-rule="evenodd" clip-rule="evenodd" d="M18.7175 19.6941C18.5223 19.8893 18.2057 19.8893 18.0104 19.6941L16.5962 18.2799C16.4009 18.0846 16.4009 17.768 16.5962 17.5728C16.7915 17.3775 17.108 17.3775 17.3033 17.5728L18.7175 18.987C18.9128 19.1822 18.9128 19.4988 18.7175 19.6941Z"  fill="#9b9bb1"/>
+ 
</svg>
added assets/js/toggle-theme.js
@@ -0,0 +1,27 @@
+ 
const rootElement = document.documentElement;
+ 
const themeToggleBtn = document.getElementById('toggle-theme');
+ 
const storedTheme = localStorage.getItem('theme');
+
+ 
setTheme(storedTheme || 'light');
+
+ 
themeToggleBtn.addEventListener('click', () => {
+ 
  const currentTheme = rootElement.dataset.theme;
+
+ 
  if (currentTheme === 'dark') {
+ 
    setTheme('light');
+ 
  } else {
+ 
    setTheme('dark');
+ 
  }
+ 
});
+
+ 
function setTheme(theme) {
+ 
  rootElement.dataset.theme = theme;
+ 
  localStorage.setItem('theme', theme);
+
+ 
  if (theme === 'dark') {
+ 
    themeToggleBtn.innerHTML = `<img  src="../assets/images/sun.svg"/>`;
+ 
  } else {
+ 
    themeToggleBtn.innerHTML = `<img  src="../assets/images/moon.svg"/>`;
+
+ 
  }
+ 
}