Rhizome/index.html at main · asong56/Rhizome · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <meta name="description" content="A decentralized, zero-dependency webring protocol for the indie web.">
        <title>Rhizome</title>
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet"
            href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;1,400&display=swap"
            media="print" onload="this.media='all'">
        <link rel="stylesheet" href="assets/css/index.css">
    </head>
    <body>

        <header>
            <nav aria-label="Site navigation">
                <a href="./" class="logo" aria-label="Rhizome home">
                    <svg width="18" height="18" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
                        <circle cx="9" cy="9" r="2" fill="#1E4919"/>
                        <g stroke="#1E4919" stroke-width=".9" stroke-linecap="round" opacity=".5">
                            <line x1="9"     y1="7"   x2="9"    y2="2.5"/>
                            <line x1="9"     y1="11"  x2="9"    y2="15.5"/>
                            <line x1="7.27"  y1="8"   x2="3.3"  y2="5.75"/>
                            <line x1="10.73" y1="10"  x2="14.7" y2="12.25"/>
                            <line x1="7.27"  y1="10"  x2="3.3"  y2="12.25"/>
                            <line x1="10.73" y1="8"   x2="14.7" y2="5.75"/>
                        </g>
                    </svg>
                    Rhizome
                </a>
                <ul role="list">
                    <li><a href="#join">Join</a></li>
                    <li><a href="https://github.com/Ansel-S/Rhizome" target="_blank" rel="noopener noreferrer">GitHub ↗</a></li>
                </ul>
            </nav>
        </header>

        <main>

            <section class="hero" aria-label="Introduction">
                <h1>No hierarchy.<br>No center.<br><em>Pure connection.</em></h1>
                <blockquote>
                    <p>The rhizome has no beginning or end; it is always in the middle,
                    between things, interbeing, <em>intermezzo.</em></p>
                    <footer>
                        <cite>— Deleuze &amp; Guattari, <em>A Thousand Plateaus</em></cite>
                    </footer>
                </blockquote>
                <dl class="metrics">
                    <div class="metric">
                        <dt class="lbl">Engine (gz)</dt>
                        <dd class="val">&lt;800B</dd>
                    </div>
                    <div class="metric">
                        <dt class="lbl">Blocking</dt>
                        <dd class="val">0ms</dd>
                    </div>
                    <div class="metric">
                        <dt class="lbl">Transition</dt>
                        <dd class="val">1.1s</dd>
                    </div>
                    <div class="metric">
                        <dt class="lbl">Cache TTL</dt>
                        <dd class="val">24h</dd>
                    </div>
                </dl>
                <p class="hero-wander">
                    <button class="wander" id="wander" aria-label="Jump to a random node in the network">Wander →</button>
                    <span class="wander-note" id="wander-note" aria-live="polite"></span>
                </p>
            </section>

            <section id="join" aria-labelledby="join-heading">
                <h2 id="join-heading">Join the Network</h2>
                <ol class="steps" role="list">
                    <li class="step">
                        <p>Embed the <strong>Spore</strong> on your site before <code>&lt;/body&gt;</code>:</p>
                    </li>
                    <figure>
                        <figcaption class="sr-only">Spore embed code</figcaption>
                        <pre><code><span class="kw">&lt;rhizome-spore</span>
       <span class="st">theme="light"</span>
       <span class="st">node-url="https://yoursite.com"</span>
       <span class="st">host="https://Ansel-S.github.io/Rhizome"</span>
   <span class="kw">&gt;&lt;/rhizome-spore&gt;</span>
   <span class="kw">&lt;script</span>
       <span class="st">src="https://Ansel-S.github.io/Rhizome/spore.js"</span>
       <span class="st">async</span>
   <span class="kw">&gt;&lt;/script&gt;</span></code></pre>
                    </figure>
                    <li class="step">
                        <p><a href="https://github.com/Ansel-S/Rhizome/issues/new?template=join.yml" target="_blank" rel="noopener noreferrer">Open an issue</a> with your site name, URL, and bio — I'll add you if passed the test.</p>
                    </li>
                </ol>
            </section>

        </main>

        <footer>
            <p>🌿 Rhizome — decentralized webring protocol</p>
            <nav aria-label="Footer links">
                <a href="https://en.wikipedia.org/wiki/Rhizome_(philosophy)" target="_blank" rel="noopener noreferrer">What is a rhizome?</a>
            </nav>
        </footer>

        <script src="assets/js/index.js" defer></script>

    </body>
</html>