diff --git a/_config.yml b/_config.yml
index 0ac9a33..07c20dc 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,6 +1,6 @@
-url: "https://docs.radicle.xyz"
+url: "https://radicle.xyz"
baseurl: "/"
-title: "docs.radicle.xyz"
+title: "Radicle: the sovereign forge"
highlighter: rouge
markdown: kramdown
kramdown:
@@ -9,3 +9,6 @@ collections:
guides:
output: true
permalink: /guides/:path/
+ pages:
+ output: true
+ permalink: /:path/
diff --git a/_guides/protocol.md b/_guides/protocol.md
index 40aa61c..56eb169 100644
--- a/_guides/protocol.md
+++ b/_guides/protocol.md
@@ -1,6 +1,7 @@
---
title: Radicle Protocol Guide
subtitle: How Radicle works under the hood
+banner: 23.medium.png
layout: guide
---
diff --git a/_guides/seeder.md b/_guides/seeder.md
index 0a2779f..c5edda0 100644
--- a/_guides/seeder.md
+++ b/_guides/seeder.md
@@ -1,6 +1,7 @@
---
title: Radicle Seeder's Guide
subtitle: How to run a Radicle seed node
+banner: 24.medium.png
layout: guide
---
diff --git a/_guides/user.md b/_guides/user.md
index 4147232..3c76353 100644
--- a/_guides/user.md
+++ b/_guides/user.md
@@ -1,6 +1,7 @@
---
title: Radicle User Guide
-subtitle: A fantastic journey through the Radiverse
+subtitle: A fantastic journey through the Radicle universe
+banner: 16.medium.png
layout: guide
---
@@ -351,12 +352,13 @@ To publish it to the Radicle network, run the `rad init` command.
Don't be afraid to do this on one of your existing public repositories! Because
even if you aren't ready to use Radicle for code collaboration, it works great
-for distribution where you can establish a more decentralized "mirror" of your
-code, so to speak. A mirror that is *censorship resistant, sovereign,
-tamperproof, ungovernable -- except by you, and oh so magical*. What `rad init`
-does is gather the essential details from you which are needed to initialize
-the repository into Radicle: the repository name, description, default branch
-(typically `main` or `master`), and whether it is public or private.
+for distribution. Radicle's network of seed nodes help propagate and host code,
+forming a decentralized, censorship resistant, and ungovernable distribution system.
+
+What `rad init` does is gather the essential details from you which are needed
+to initialize the repository into Radicle: the repository name, description,
+default branch (typically `main` or `master`), and whether it is public or
+private.
Similar to how `git init` is used to initialize a Git repository, we use
nomenclature you're familiar with so you don't go crazy. That'd be so cruel if
diff --git a/_includes/footer.html b/_includes/footer.html
new file mode 100644
index 0000000..ee5e74f
--- /dev/null
+++ b/_includes/footer.html
@@ -0,0 +1,7 @@
+
+ (c) 2018-2024 The Radicle Team
+
+
+
+
+
diff --git a/_includes/header.html b/_includes/header.html
new file mode 100644
index 0000000..21e20e0
--- /dev/null
+++ b/_includes/header.html
@@ -0,0 +1,16 @@
+
diff --git a/_includes/meta.html b/_includes/meta.html
new file mode 100644
index 0000000..29b86bc
--- /dev/null
+++ b/_includes/meta.html
@@ -0,0 +1,16 @@
+
Radicle: sovereign code infrastructure
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/_layouts/guide.html b/_layouts/guide.html
index 9a2ab5c..2780315 100644
--- a/_layouts/guide.html
+++ b/_layouts/guide.html
@@ -20,8 +20,9 @@
@@ -31,7 +32,7 @@
{{ page.title }}
{{ page.subtitle }}
-
+
{% include toc.html html=content class="toc" item_class="toc-h%level%" %}
{{ content }}
diff --git a/_layouts/home.html b/_layouts/home.html
new file mode 100644
index 0000000..9ba1926
--- /dev/null
+++ b/_layouts/home.html
@@ -0,0 +1,48 @@
+
+
+
+ {% include meta.html %}
+
+
+
+
+
+
+ {% include header.html %}
+
+
+ Radicle is a sovereign
+ {code forge} built on Git.
+
+
+
+ Get started ↓
+ Run a seed →
+
+
+ Guides
+ FAQ
+ Community
+ Tweets
+
+
+ {{ content }}
+
+ {% include footer.html %}
+
+
+
+
diff --git a/_layouts/page.html b/_layouts/page.html
new file mode 100644
index 0000000..650aa9f
--- /dev/null
+++ b/_layouts/page.html
@@ -0,0 +1,14 @@
+
+
+
+ {% include meta.html %}
+
+
+ {% include header.html %}
+
+ {{ content }}
+
+ {% include footer.html %}
+
+
+
diff --git a/_pages/docs.md b/_pages/docs.md
new file mode 100644
index 0000000..42cbe64
--- /dev/null
+++ b/_pages/docs.md
@@ -0,0 +1,6 @@
+---
+title: Radicle Docs
+layout: page
+---
+
+For now, check out our [guides](/guides). Enjoy!.
diff --git a/_pages/faq.md b/_pages/faq.md
new file mode 100644
index 0000000..08d3914
--- /dev/null
+++ b/_pages/faq.md
@@ -0,0 +1,276 @@
+---
+title: FAQ
+layout: page
+---
+
+Welcome to Radicle's FAQ . If you can't find
+an answer here, drop by our [support channel][support] and ask it there!
+
+[support]: https://radicle.zulipchat.com/#narrow/stream/369873-support
+
+# General Questions
+
+## What is Radicle? How is it different from Git/GitHub?
+
+Radicle is a peer-to-peer code collaboration platform (["forge"][forge]) built
+on Git. Unlike centralized platforms like GitHub, there is no single entity
+controlling the network or user data. Repositories are replicated across peers
+in a decentralized manner. Radicle is an alternative for people and
+organizations who want full control of their data and user experience, without
+compromising on the social aspects of collaboration platforms.
+
+[forge]: https://en.wikipedia.org/wiki/Forge_(software)
+
+## Who is using Radicle currently? How many users does it have?
+
+Radicle is still in beta and hasn't officially launched yet. Many people in the
+community are already using it internally. The product is set to launch at the
+end of March 2024, and we are just starting to onboard users.
+
+## How many people are working on it?
+
+We currently have around 12 people working on Radicle, spread across the
+protocol, CLI, TUI, web, operations and content.
+
+## How long have you been working on Radicle?
+
+The current codebase is a little under 2 years old, but we've been working on
+the problem for over 4 years in total. Previous iterations of Radicle can be
+found online, but are considered deprecated in favor of [Heartwood][heartwood],
+the latest generation of the protocol.
+
+[heartwood]: https://app.radicle.xyz/nodes/seed.radicle.xyz/rad:z3gqcJUoA1n9HaHKufZs5FCSGazv5
+
+# Technical Questions
+
+## What do you mean by "peer-to-peer"?
+
+We define it the same way [Wikipedia][p2p] defines it; specifically this part:
+"Peers are equally privileged, equipotent participants in the network".
+
+So a peer-to-peer system is one where all participants are "equally privileged
+in the network". This usually means they all run the same software as well.
+
+[p2p]: https://en.wikipedia.org/wiki/Peer-to-peer
+
+## Isn't Git already peer-to-peer? Why do I need Radicle?
+
+While Git is designed in some way for peer-to-peer interactions, there is no
+deployment of it that works that way. All deployments use the client-server
+model because Git lacks functionality to be deployed as-is in a peer-to-peer
+network.
+
+For one, it has no way of verifying that the repository you downloaded after a
+`git clone` is the one you asked for, which means you need to clone from a
+trusted source (ie. a known server). This isn't compatible with peer-to-peer in
+any useful way.
+
+Radicle solves this by assigning [stable identities][rid] to repositories that
+can be verified locally, allowing repositories to be served by untrusted
+parties.
+
+[rid]: /guides/protocol#trust-through-self-certification
+
+## What does Radicle solve that isn't already solved by Git commit signatures?
+
+Verifying Git commit signatures, eg. via `git verify-commit` is a good security
+practice, however Git doesn't solve the problem of knowing whether a signature
+was made by an active maintainer of the repository or not. It can only indicate
+whether the signature is valid or not.
+
+Therefore, to ensure that the repository head was signed by one of the
+repository's *current maintainers, users would have to keep track of what the
+current maintainer set is at all times, getting that information from a trusted
+source.
+
+Radicle checks this automatically, by verifying changes to the maintainer set
+through the repository identity document. All you need to know is that you have
+the correct Repository ID (RID). See [RIP-2][rip-2] for more information.
+
+[rip-2]: https://app.radicle.xyz/nodes/seed.radicle.xyz/rad:z3trNYnLWS11cJWC6BbxDs5niGo82/tree/0002-identity.md
+
+## Isn't SHA-1 broken? How do you handle hash collisions?
+
+SHA-1 is indeed broken, which is why Git uses a "hardened" SHA-1 hash function
+that can detect collisions, and generate a new "safe" hash. This process is
+called [counter-cryptanalysis][cc]. Radicle uses Git's hardened SHA-1
+function, since all replicated objects are stored in Git, and is therefore
+safe from collision attacks.
+
+[cc]: https://marc-stevens.nl/research/papers/C13-S.pdf
+
+## How does Radicle handle code discoverability and search, compared to centralized platforms?
+
+Basic search functionality exists, but this area is still a work-in-progress.
+We expect more improvements in search/discovery in the future.
+
+## Can Radicle handle large binary files like datasets or machine learning models?
+
+Radicle uses Git internally, which can handle moderately-sized binary data
+relatively well. For large data however, we are considering adding support for
+solutions like `git-annex` or `git-lfs`. We intend for Radicle to help with
+the proliferation of open source AI models.
+
+## How does Radicle ensure persistence and availability of repositories when nodes go offline?
+
+Repositories are replicated across multiple peers on the network, so they
+remain available as long as at least one seeding node is online. Users have
+fine-grained control over which repositories they personally host and seed.
+
+Additionally, certain nodes on the network act as [*seed nodes*][seeding] -
+always-on public nodes - that ensure a certain level of data availability.
+
+[seeding]: /guides/seeder
+
+## How does Radicle handle issues, pull requests, code reviews etc. compared to GitHub?
+
+Radicle has its own model for issues and pull requests (called "patches"),
+implemented via its own technology called Collaborative Objects (COBs). It
+supports non-destructive updates to patches and code reviews tied to patch
+revisions.
+
+Patches and issues in Radicle are stored within Git's object database and are
+therefore also available offline.
+
+## Is there a way to run Radicle over Tor, I2P or other censorship-resistant networks?
+
+Yes, Radicle is designed with Tor, Nym and I2P support in mind, though it's
+still very early and these integrations haven't been thoroughly tested.
+
+## How does Radicle deal with NATs?
+
+Radicle currently relies on seed nodes to serve data to peers behind
+[NATs][nat]. However, a [hole-punching][hp] protocol is currently under
+development, which would allow peers behind NATs to exchange data directly.
+
+[hp]: https://en.wikipedia.org/wiki/Hole_punching_(networking)
+[nat]: https://en.wikipedia.org/wiki/Network_address_translation
+
+## How does Radicle deal with potential abuse, illegal content sharing etc. on the network?
+
+Each node is free to choose which repositories to host (*seed*) using
+configured policies. Nodes can block specific repositories or peers exhibiting
+abusive behavior.
+
+## Is there a way to host private repositories on Radicle?
+
+Yes, Radicle supports private repositories that are only shared among a trusted
+set of peers, not the entire network. These are not encrypted at rest but rely
+on selective replication and are thus completely invisible to the rest of
+the network.
+
+## What is the process for migrating existing GitHub projects to Radicle?
+
+There are community tools under development for migrating issues and
+pull-requests. We are planning full migration tooling for the future.
+
+## Is there a way to easily mirror GitHub repositories on Radicle?
+
+There is no built-in mirroring yet, but you can easily set up a `cron` job to
+pull from GitHub and push to Radicle periodically.
+
+## Does Radicle have plans to support Windows?
+
+Currently Radicle only supports Unix-based systems like Linux and macOS. We
+plan to add Windows support if there is enough demand.
+
+## How does Radicle ensure consistency and prevent multiple versions of the "same" repository?
+
+Radicle assigns stable identities to repositories that can be cryptographically
+verified. Changes in repository ownership are signed by previous owners forming
+a verifiable chain of provenance.
+
+## Does Radicle use existing peer-to-peer technologies such as IPFS?
+
+No. The first generation of Radicle protocols was built on top of IPFS, but it
+was too slow and impractical to use. One of the key issues Radicle needs to
+solve is handling mutable objects: code repositories change all the time, so a
+content-addressable store like IPFS is not really a solution.
+
+## Does Radicle use a DHT?
+
+Radicle does not use DHT technology because DHTs don't allow nodes on the
+network to have much of a say in terms of what content they participate in
+serving.
+
+Additionally, DHTs can introduce high network latency, especially in the case
+of permissionless networks, due to requests beyond routed across the globe.
+
+# User Experience
+
+## Are there plans to add multilingual/localization support to the UI?
+
+We will add multilingual support if there is enough demand from the community.
+
+## How does the user experience of using Radicle command line tools compare to Git?
+
+Radicle is built on top of Git, so the workflow is quite similar. The `rad` CLI
+is provided for Radicle-specific functionality, and a Git [remote-helper][grh]
+is used for seamless integration with Git `push` and `pull` workflows.
+
+Additionally, the `rad` CLI was designed to be as familiar as possible to Git
+users.
+
+[grh]: https://git-scm.com/docs/gitremote-helpers
+
+## What is the suggested development workflow when using Radicle?
+
+The workflow is similar to using Git with a platform like GitHub. You clone a
+repository, make changes locally, then push to the network. Collaboration
+happens via issues, patches (pull requests), and code review. The difference
+is that Radicle doesn't have a shared write access model like GitHub. Each
+user is required to push to their own fork.
+
+## Do I need to run a node to use Radicle?
+
+Yes. The node is an essential part of what makes Radicle sovereign. However,
+you don't have to keep your node running at all times, if you are trying to
+conserve bandwidth; Radicle works just as well while offline.
+
+## How do you fork an abandoned repository?
+
+With `rad init`.
+
+When you fork an abandoned repo, you are essentially giving it a new
+repository identity, which is a new root of trust, with a new maintainer set.
+You'll then have to communicate the new repository identifier and explain that
+this is a fork of the old repo.
+
+## Are there plugins for code editors to work with Radicle?
+
+There is a Visual Studio Code [integration][vscode] extension built by the
+community.
+
+[vscode]: https://marketplace.visualstudio.com/items?itemName=radicle-ide-plugins-team.radicle
+
+# Monetization & Funding
+
+## What is the monetization strategy for Radicle? Is Radicle free software?
+
+The Radicle protocol and clients are free and open source software licensed
+under the MIT and Apache 2.0 licenses, and will remain free software for ever.
+
+Radicle is currently funded by Radworks. Radworks intends to offer hosting and retrieval services on top of the Radicle protocol. All of Radworks financials are publicly accessible [here][tally].
+
+## What is the relationship between Radicle and the Radworks (`$RAD`) token?
+
+Radicle is a true peer-to-peer protocol. It doesn't use nor depend on any
+blockchain or cryptocurrency.
+
+[Radworks][radworks], the organization that has been financing Radicle is
+organized around the `RAD` token which is a governance token on Ethereum.
+
+## How much funding has Radicle raised?
+
+The Radicle team is funded by [Radworks][radworks]. To date, around $7m has
+been granted towards the development of Radicle, by Radworks. Grant proposals
+for the last two years can be found [here][tally].
+
+[tally]: https://www.tally.xyz/gov/radworks
+[radworks]: https://radworks.org
+
+
+
+ If you have any other questions, feel free to drop into our support channel on Zulip.
+
diff --git a/_pages/guides.md b/_pages/guides.md
new file mode 100644
index 0000000..d498d4c
--- /dev/null
+++ b/_pages/guides.md
@@ -0,0 +1,18 @@
+---
+title: Radicle Guides
+subtitle: Everything you ever wanted to know
+layout: page
+---
+
+Welcome to the Radicle Guides . Make sure to
+also check out our [FAQ](/faq) if you can't find what you're looking for.
+
+
+
+
diff --git a/assets/css/common.css b/assets/css/common.css
new file mode 100644
index 0000000..0812118
--- /dev/null
+++ b/assets/css/common.css
@@ -0,0 +1,89 @@
+:root {
+ --color-pink: #ff55ff;
+ --color-yellow: #ffff99;
+ --color-secondary: #6666ff;
+ --color-fg-highlight: var(--color-yellow);
+ --color-fg-highlight-tertiary: var(--color-fg-contrast);
+ --color-fg-highlight-secondary: #229944;
+ --color-bg-highlight: #efefff;
+ --color-bg-default: #f5f5ff;
+ --color-fg-contrast: #232563;
+ --color-fg-low-contrast: #434583; /* TODO: tweak this */
+ --color-fg-dim: #5a5aa1;
+ --color-fg-emphasized: #7070FF;
+ --color-fg-match-background: #f5f5ff;
+ --color-fill-secondary: #7070FF;
+ --color-fill-separator: #dbdbff;
+ --color-fill-ghost: #EBEBFF;
+ --color-border-hint: #DBDBFF;
+ --color-border-focus: #8585FF;
+ --color-border-default: var(--color-fg-dim);
+ --color-selection: var(--color-fg-contrast);
+}
+
+:root[data-theme="dark"] {
+ --color-pink: #f999f9;
+ --color-yellow: #ffff99;
+ --color-secondary: #9999ff;
+ --color-fg-highlight: var(--color-yellow);
+ --color-fg-highlight-tertiary: #bbeeff;
+ --color-fg-highlight-secondary: #77dd77;
+ --color-bg-highlight: #14151a;
+ --color-bg-default: #0a0d10;
+ --color-fg-contrast: #f9f9fb;
+ --color-fg-low-contrast: #d9d9db; /* TODO: tweak this */
+ --color-fg-dim: #9b9bb1;
+ --color-fg-emphasized: #7070FF;
+ --color-fg-match-background: #0a0d10;
+ --color-fill-secondary: #7070FF;
+ --color-fill-separator: #24252d;
+ --color-fill-ghost: #24252D;
+ --color-border-hint: #24252D;
+ --color-border-focus: #8585FF;
+ --color-selection: var(--color-bg-default);
+}
+
+::selection {
+ color: var(--color-selection);
+ background-color: var(--color-yellow);
+}
+
+* {
+ box-sizing: border-box;
+}
+
+html {
+ font-family: var(--font-family-default), sans-serif;
+ color: var(--color-fg-contrast);
+}
+
+body {
+ min-height: 100vh;
+ width: 100%;
+ margin: 0;
+ background-color: var(--color-bg-default);
+}
+
+body, html {
+ height: 100%;
+}
+
+#toggle-theme {
+ border: none;
+ color: var(--color-fg-contrast);
+ padding: 0;
+ width: fit-content;
+ height: fit-content;
+ border-radius: 0.25rem;
+ cursor: pointer;
+ background-color: transparent;
+ background-size: contain;
+ width: 1.75rem;
+ height: 1.75rem;
+}
+:root[data-theme=light] #toggle-theme {
+ background-image: url(/assets/images/sun.svg);
+}
+:root[data-theme=dark] #toggle-theme {
+ background-image: url(/assets/images/moon.svg);
+}
diff --git a/assets/css/fonts.css b/assets/css/fonts.css
index b7d00b4..11d2c11 100644
--- a/assets/css/fonts.css
+++ b/assets/css/fonts.css
@@ -57,9 +57,45 @@
src: url("/assets/fonts/JetBrainsMono-Bold.woff2");
}
+@font-face {
+ font-family: "Anonymous Pro";
+ font-weight: normal;
+ font-display: swap;
+ src: url("/assets/fonts/AnonymousPro-Regular.ttf");
+}
+
+@font-face {
+ font-family: "Anonymous Pro";
+ font-weight: bold;
+ font-display: swap;
+ src: url("/assets/fonts/AnonymousPro-Bold.ttf");
+}
+
+@font-face {
+ font-family: "Anonymous Pro";
+ font-style: italic;
+ font-display: swap;
+ src: url("/assets/fonts/AnonymousPro-Italic.ttf");
+}
+
+@font-face {
+ font-family: "Anonymous Pro";
+ font-style: italic;
+ font-weight: bold;
+ font-display: swap;
+ src: url("/assets/fonts/AnonymousPro-BoldItalic.ttf");
+}
+
+@font-face {
+ font-family: "Box Drawing";
+ src: url("/assets/fonts/JetBrainsMono-Regular.woff2");
+ unicode-range: U+2500-257F;
+}
+
:root {
--font-family-default: "Inter", sans-serif;
--font-family-code: "JetBrains Mono", monospace;
+ --font-family-code-alt: "Anonymous Pro", monospace;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
@@ -89,3 +125,33 @@ html {
font-size: 14px;
}
}
+
+h1, h2, h3, h4, h5 {
+ font-family: var(--font-family-default);
+}
+
+h1 {
+ font-size: var(--font-size-xx-large);
+ font-weight: var(--font-weight-semibold);
+ line-height: 1.1;
+}
+
+h2 {
+ font-size: var(--font-size-x-large);
+ font-weight: var(--font-weight-semibold);
+}
+
+h3 {
+ font-size: var(--font-size-large);
+ font-weight: var(--font-weight-semibold);
+}
+
+h4 {
+ font-size: var(--font-size-medium);
+ font-weight: var(--font-weight-semibold);
+}
+
+h5 {
+ font-size: var(--font-size-small);
+ font-weight: var(--font-weight-semibold);
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index 6586985..97c8357 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,59 +1,6 @@
@charset "utf-8";
-
-:root {
- --color-yellow: #ffff88;
- --color-fg-highlight-secondary: #229944;
- --color-bg-highlight: #efefff;
- --color-bg-default: #f5f5ff;
- --color-fg-contrast: #232563;
- --color-fg-low-contrast: #434583; /* TODO: tweak this */
- --color-fg-dim: #6a6a81;
- --color-fg-emphasized: #7070FF;
- --color-fg-match-background: #f5f5ff;
- --color-fill-secondary: #7070FF;
- --color-fill-separator: #dbdbff;
- --color-fill-ghost: #EBEBFF;
- --color-border-hint: #DBDBFF;
- --color-border-focus: #8585FF;
- --color-selection: var(--color-fg-contrast);
-}
-
-:root[data-theme="dark"] {
- --color-yellow: #ffff88;
- --color-bg-highlight: #14151a;
- --color-bg-default: #0a0d10;
- --color-fg-contrast: #f9f9fb;
- --color-fg-low-contrast: #d9d9db; /* TODO: tweak this */
- --color-fg-dim: #9b9bb1;
- --color-fg-emphasized: #7070FF;
- --color-fg-match-background: #0a0d10;
- --color-fill-secondary: #7070FF;
- --color-fill-separator: #24252d;
- --color-fill-ghost: #24252D;
- --color-border-hint: #24252D;
- --color-border-focus: #8585FF;
- --color-selection: var(--color-bg-default);
-}
-
-::selection {
- color: var(--color-selection);
- background-color: var(--color-yellow);
-}
-
-* {
- box-sizing: border-box;
-}
-
-html {
- font-family: var(--font-family-default), sans-serif;
- color: var(--color-fg-contrast);
-}
-
-body {
- margin: 0;
- height: 100vh;
- background-color: var(--color-bg-default);
-}
+@import "/assets/css/common.css";
+@import "/assets/css/fonts.css";
main, footer {
display: grid;
@@ -268,8 +215,17 @@ blockquote pre {
height: 1.75rem;
}
+.title span {
+ color: var(--color-fg-low-contrast);
+ margin-left: 0.5rem;
+}
+
+.title:hover span {
+ text-decoration: underline;
+}
+
.toc + hr {
- margin-bottom: 4rem;
+ margin-bottom: 3rem;
}
.first {
@@ -279,7 +235,7 @@ blockquote pre {
.subtitle {
font-size: 1.125rem;
color: var(--color-fg-dim);
- margin: 0 0 4rem;
+ margin: 0 0 3rem;
}
main figure, main img {
@@ -412,6 +368,11 @@ span.highlight-secondary {
color: var(--color-fg-highlight-secondary);
}
+.banner {
+ border-radius: 4px;
+ width: 100%;
+}
+
.button {
color: var(--color-fill-secondary);
font-weight: normal;
@@ -424,33 +385,13 @@ span.highlight-secondary {
background-color: var(--color-fill-secondary);
}
-#toggle-theme {
- border: none;
- color: var(--color-fg-contrast);
- padding: 0;
- width: fit-content;
- height: fit-content;
- border-radius: 0.25rem;
- cursor: pointer;
- background-color: transparent;
- background-size: contain;
- width: 1.75rem;
- height: 1.75rem;
-}
-:root[data-theme=light] #toggle-theme {
- background-image: url(/assets/images/sun.svg);
-}
-:root[data-theme=dark] #toggle-theme {
- background-image: url(/assets/images/moon.svg);
-}
-
.toc {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.75rem !important;
- margin: 2rem 0;
+ margin: 2rem 0 3rem 0;
padding: 0;
max-height: 16rem;
}
@@ -497,7 +438,7 @@ span.highlight-secondary {
@media (max-width: 1280px) {
main, footer {
- grid-column-gap: 1rem;
+ grid-column-gap: 1.25rem;
}
}
diff --git a/assets/fonts/AnonymousPro-Bold.ttf b/assets/fonts/AnonymousPro-Bold.ttf
new file mode 100644
index 0000000..f14c18c
Binary files /dev/null and b/assets/fonts/AnonymousPro-Bold.ttf differ
diff --git a/assets/fonts/AnonymousPro-BoldItalic.ttf b/assets/fonts/AnonymousPro-BoldItalic.ttf
new file mode 100644
index 0000000..cd7c30a
Binary files /dev/null and b/assets/fonts/AnonymousPro-BoldItalic.ttf differ
diff --git a/assets/fonts/AnonymousPro-Italic.ttf b/assets/fonts/AnonymousPro-Italic.ttf
new file mode 100644
index 0000000..87b1786
Binary files /dev/null and b/assets/fonts/AnonymousPro-Italic.ttf differ
diff --git a/assets/fonts/AnonymousPro-Regular.ttf b/assets/fonts/AnonymousPro-Regular.ttf
new file mode 100644
index 0000000..a98da85
Binary files /dev/null and b/assets/fonts/AnonymousPro-Regular.ttf differ
diff --git a/assets/images/banners/16.medium.png b/assets/images/banners/16.medium.png
new file mode 100644
index 0000000..929b2eb
Binary files /dev/null and b/assets/images/banners/16.medium.png differ
diff --git a/assets/images/banners/16.png b/assets/images/banners/16.png
new file mode 100644
index 0000000..1f6d9ed
Binary files /dev/null and b/assets/images/banners/16.png differ
diff --git a/assets/images/banners/23.medium.png b/assets/images/banners/23.medium.png
new file mode 100644
index 0000000..50827a6
Binary files /dev/null and b/assets/images/banners/23.medium.png differ
diff --git a/assets/images/banners/23.png b/assets/images/banners/23.png
new file mode 100644
index 0000000..93ebc6a
Binary files /dev/null and b/assets/images/banners/23.png differ
diff --git a/assets/images/banners/24.medium.png b/assets/images/banners/24.medium.png
new file mode 100644
index 0000000..f0c3f43
Binary files /dev/null and b/assets/images/banners/24.medium.png differ
diff --git a/assets/images/banners/24.png b/assets/images/banners/24.png
new file mode 100644
index 0000000..2c0755c
Binary files /dev/null and b/assets/images/banners/24.png differ
diff --git a/assets/images/cabin.svg b/assets/images/cabin.svg
new file mode 100644
index 0000000..97183a6
--- /dev/null
+++ b/assets/images/cabin.svg
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/copy.svg b/assets/images/copy.svg
new file mode 100644
index 0000000..75e8df6
--- /dev/null
+++ b/assets/images/copy.svg
@@ -0,0 +1,53 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/key.svg b/assets/images/key.svg
new file mode 100644
index 0000000..3732d1c
--- /dev/null
+++ b/assets/images/key.svg
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/assets/images/p2p.svg b/assets/images/p2p.svg
new file mode 100644
index 0000000..2d35ed1
--- /dev/null
+++ b/assets/images/p2p.svg
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/puzzle.svg b/assets/images/puzzle.svg
new file mode 100644
index 0000000..aad7042
--- /dev/null
+++ b/assets/images/puzzle.svg
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/radicle-wordmark.svg b/assets/images/radicle-wordmark.svg
new file mode 100644
index 0000000..781c9f7
--- /dev/null
+++ b/assets/images/radicle-wordmark.svg
@@ -0,0 +1,216 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/radworks.black.png b/assets/images/radworks.black.png
new file mode 100644
index 0000000..52c6a05
Binary files /dev/null and b/assets/images/radworks.black.png differ
diff --git a/assets/images/ribbon.svg b/assets/images/ribbon.svg
new file mode 100644
index 0000000..524ccde
--- /dev/null
+++ b/assets/images/ribbon.svg
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/assets/images/web-app-screenshot.png b/assets/images/web-app-screenshot.png
new file mode 100644
index 0000000..31c951b
Binary files /dev/null and b/assets/images/web-app-screenshot.png differ
diff --git a/assets/js/toggle-theme.js b/assets/js/toggle-theme.js
index c755230..572a132 100644
--- a/assets/js/toggle-theme.js
+++ b/assets/js/toggle-theme.js
@@ -6,15 +6,17 @@ const defaultTheme = window.matchMedia
setTheme(storedTheme || defaultTheme);
-themeToggleBtn.addEventListener("click", () => {
- const currentTheme = rootElement.dataset.theme;
+if (themeToggleBtn) {
+ themeToggleBtn.addEventListener("click", () => {
+ const currentTheme = rootElement.dataset.theme;
- if (currentTheme === "dark") {
- setTheme("light");
- } else {
- setTheme("dark");
- }
-});
+ if (currentTheme === "dark") {
+ setTheme("light");
+ } else {
+ setTheme("dark");
+ }
+ });
+}
function setTheme(theme) {
rootElement.dataset.theme = theme;
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..7bd476c
--- /dev/null
+++ b/index.css
@@ -0,0 +1,370 @@
+@charset "UTF-8";
+@import "/assets/css/common.css";
+@import "/assets/css/fonts.css";
+
+body {
+ line-height: 1.4;
+ max-width: 100%;
+ height: 100%;
+}
+
+body, h1, h2, h3, h4, h5, p, table {
+ font-size: 1rem;
+ font-family: var(--font-family-code-alt);
+}
+
+h1, h2 {
+ font-weight: bold;
+ color: var(--color-fg-highlight-tertiary);
+}
+
+h1 {
+ padding: 0.125rem;
+ margin-top: 2rem;
+ text-transform: uppercase;
+}
+
+h2 {
+ margin-left: 1rem;
+}
+
+h2::after {
+ margin-left: 0.5rem;
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ background-size: 16px 16px;
+ vertical-align: text-bottom;
+}
+
+h2#unparalleled-autonomy:after {
+ background-image: url(/assets/images/radicle.svg);
+ filter: brightness(200%) hue-rotate(160deg);
+ content: "";
+}
+
+h2#modular-by-design:after {
+ background-image: url(/assets/images/puzzle.svg);
+ content: "";
+}
+
+h2#local-first::after {
+ background-image: url(/assets/images/cabin.svg);
+ filter: brightness(130%);
+ content: "";
+}
+
+h2#your-data-forever-and-secure::after {
+ background-image: url(/assets/images/key.svg);
+ content: "";
+}
+
+h2#evolvable--extensible::after {
+ background-image: url(/assets/images/p2p.svg);
+ content: "";
+}
+
+p, ul, nav, pre, #install {
+ margin-left: 2rem;
+}
+
+hr {
+ border: none;
+ border-bottom: 1px solid var(--color-border-hint);
+ margin: 2rem 0;
+}
+
+ul {
+ list-style-position: inside;
+ padding-left: 0;
+}
+
+ul li {
+ margin-left: 0;
+}
+ul li::marker {
+ content: "* ";
+}
+
+blockquote {
+ padding: 0 1rem;
+ margin-left: 2rem;
+ border-left: 1px solid var(--color-border-hint);
+}
+blockquote p {
+ margin: 0;
+}
+
+code {
+ font-family: var(--font-family-code-alt);
+ color: var(--color-fg-low-contrast);
+}
+
+pre {
+ font-family: var(--font-family-code-alt);
+ overflow-x: hidden;
+ text-overflow: hidden;
+ color: var(--color-fg-dim);
+}
+
+pre.diagram {
+ line-height: 1;
+}
+
+strong.highlight {
+ color: var(--color-pink);
+}
+
+h2 em {
+ color: vaR(--color-fg-contrast);
+ font-weight: normal;
+}
+
+a {
+ color: var(--color-fg-low-contrast);
+ text-decoration: none;
+ border-bottom: 1px dashed var(--color-border-default);
+}
+a:hover {
+ color: var(--color-fg-contrast);
+ border-color: var(--color-fg-contrast);
+}
+.button {
+ display: inline-block;
+ color: var(--color-pink);
+ background: none;
+ border: 1px dashed var(--color-pink);
+ margin: 0.5rem 0;
+ padding: 0.5rem 0.75rem;
+ cursor: pointer;
+}
+.button:hover, .button.filled,
+:root[data-theme="light"] .button {
+ border-color: var(--color-pink);
+ background-color: var(--color-pink);
+ color: var(--color-bg-default);
+}
+
+.button.secondary {
+ color: var(--color-secondary);
+ border: 1px dashed var(--color-secondary);
+}
+
+.button.secondary:hover, .button.secondary.filled,
+:root[data-theme="light"] .button.secondary {
+ border-color: var(--color-secondary);
+ background-color: var(--color-secondary);
+ color: var(--color-bg-default);
+}
+
+.button.small {
+ padding: 0.25rem 0.75rem;
+ margin: 0;
+}
+
+.button.filled, :root[data-theme="light"] .button {
+ border-style: none;
+}
+.button.filled:hover, :root[data-theme="light"] .button:hover {
+ background-color: var(--color-fg-low-contrast) !important;
+ color: var(--color-bg-default) !important;
+}
+
+li::marker {
+ content: "- ";
+}
+
+body > main {
+ margin: 0 auto;
+ padding: 2rem;
+ max-width: 96ch;
+}
+
+body > header {
+ position: relative;
+ color: var(--color-fg-low-contrast);
+ border-bottom: 1px solid var(--color-border-hint);
+ font-weight: bold;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: hidden;
+ flex-wrap: nowrap;
+ width: 100%;
+ height: 1.5rem;
+ min-height: 1.5rem;
+ line-height: 1.5rem;
+}
+
+body > footer {
+ display: flex;
+ color: var(--color-fg-dim);
+ border-top: 1px solid var(--color-border-hint);
+ padding: 0 0.5rem;
+ white-space: nowrap;
+ width: 100%;
+ height: 1.5rem;
+ min-height: 1.5rem;
+ line-height: 1.5rem;
+}
+
+body > footer > * {
+ flex: 1;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+body > footer :first-child > * {
+ margin-right: auto;
+}
+body > footer :last-child > * {
+ margin-left: auto;
+}
+body > footer .radworks {
+ height: 1rem;
+ line-height: 1.5rem;
+}
+body > footer a {
+ border-bottom: none;
+}
+:root[data-theme="light"] .radworks {
+ opacity: 0.33;
+}
+
+nav {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+}
+
+nav .cta {
+ display: flex;
+ gap: 1rem;
+ align-items: center;
+}
+
+#logo {
+ position: absolute;
+ z-index: 99;
+}
+
+#ribbon {
+ position: absolute;
+ float: right;
+ top: 0;
+ right: 0;
+ z-index: 99;
+}
+
+#definition {
+ color: var(--color-fg-dim);
+}
+
+.links {
+ display: inline-flex;
+ margin-left: 1rem;
+ gap: 2rem;
+}
+
+a.screenshot {
+ border: none;
+}
+a.screenshot:hover img {
+ filter: grayscale(0%);
+}
+a.screenshot img {
+ margin-bottom: 0;
+}
+.caption {
+ color: var(--color-fg-dim);
+}
+
+img.screenshot {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ border: 1px dashed var(--color-secondary);
+ width: 100%;
+ filter: grayscale(100%);
+}
+
+/* COPY BOX */
+
+#install {
+ display: inline-flex;
+ align-items: center;
+ color: var(--color-fg-low-contrast);
+ margin: 0.5rem 2rem;
+ padding: 0.75rem 1rem;
+ border: 1px dashed var(--color-border-hint);
+ max-width: 90%;
+ cursor: pointer;
+}
+#install:hover {
+ border-color: var(--color-fg-contrast);
+}
+#install:active {
+ border-color: var(--color-fg-highlight-secondary);
+}
+#install code {
+ line-height: 16px;
+ text-overflow: ellipsis;
+ overflow-x: hidden;
+ white-space: nowrap;
+}
+#install:hover img {
+ filter: brightness(130%);
+}
+#install:hover code {
+ color: var(--color-fg-contrast);
+}
+#install:active code {
+ color: var(--color-fg-highlight-secondary);
+}
+#install-copy {
+ display: flex;
+ align-items: center;
+ color: var(--color-fg-highlight-secondary);
+ line-height: 16px;
+ margin-left: 1rem;
+}
+
+/* TICKER */
+
+.ticker {
+ display: inline-block;
+ font-size: 0.875rem;
+ display: flex;
+ width: 100%;
+ animation: ticker 120s linear infinite;
+}
+
+.ticker > *:nth-child(even) {
+ color: var(--color-fg-dim);
+}
+.ticker > *:nth-child(odd) {
+ color: var(--color-fg-low-contrast);
+}
+
+@keyframes ticker {
+ 0% {
+ transform: translate3d(100%, 0, 0);
+ }
+ 100% {
+ transform: translate3d(-200%, 0, 0);
+ }
+}
+
+@media (max-width: 800px) {
+ nav {
+ display: block;
+ }
+ #ribbon {
+ width: 128px;
+ height: 128px;
+ }
+ .links {
+ display: flex;
+ margin-left: 0;
+ margin-top: 1rem;
+ gap: 1.5rem;
+ }
+}
diff --git a/index.md b/index.md
index 4fd66eb..cd771bc 100644
--- a/index.md
+++ b/index.md
@@ -1,16 +1,139 @@
---
-title: Radicle Docs
-subtitle: Everything you ever wanted to know
-layout: default
+title: "Radicle: sovereign code infrastructure"
+layout: home
---
-
+# Synopsis
-