static: steps overhaul, add faq

static/index.html

@@ -27,15 +27,16 @@
       </p>
       <p>
         With this service <a href="https://fedi.buzz/">#FediBuzz</a>
-        provides relay endpoints for you to customize. In Mastodon's
+        provides relay endpoints for you to customize.
-        <b>preferences</b> go to:
       </p>
       <ol>
-        <li>Administration</li>
+        <li>In Mastodon: click <b>Preferences</b> in the navigation sidebar</li>
-        <li>Relay</li>
+        <li>Navigate to <b>Administration</b></li>
-        <li>Click the button to setup a new relay</li>
+        <li>Navigate to <b>Relays</b> <code>/admin/relays</code></li>
+        <li>Click the <b>Add new relay</b> button <code>/admin/relays/new</code></li>
         <li>Generate a relay address below</li>
         <li>Copy &amp; paste into Mastodon's preferences</li>
+        <li>Hit the <b>Save and enable</b> button</li>
       </ol>
     </section>
 
@@ -63,6 +64,39 @@
       </article>
     </section>
 
+    <section class="faq">
+      <h2>Can I follow all my city's hashtags for all dates in the year?</h2>
+      <p>
+        Putting dates in hashtags is popular. We are aware, and our
+        solution is very simple: posts with hashtags that end in
+        digits are additionally delivered to all followers that follow
+        the hashtag without the trailing digits.
+      </p>
+      <p>
+        That means, if you follow <code>#dd</code> on this relay,
+        you'll also get <code>#dd1302</code>, <code>#dd1402</code>,
+        <code>#dd1502</code>, and many more!
+      </p>
+
+      <h2>Will this service get me undesirable content?</h2>
+      <p>
+        To steer free of the worst, #FediBuzz ignores anyone from
+        instances that appear in
+        the <a href="https://github.com/gardenfence/blocklist">Garden
+        Fence blocklist</a>, which we pull regularly. However, because
+        we relay links to content in real-time, this service will
+        never do any manual filtering itself.
+      </p>
+
+      <h2>Is it cool to follow a few thousand tags/instances to build my own firehose?</h2>
+      <p>
+        Please don't, it's inefficient. Take a look at #FediBuzz'
+        <a href="https://docs.joinmastodon.org/methods/streaming/#public">federated
+        timeline API</a> instead:
+      </p>
+      <pre>https://fedi.buzz/api/v1/streaming/public</pre>
+    </section>
+
     <footer>
       <p>
         <a href="https://github.com/astro/buzzrelay">source</a>

static/style.css

@@ -12,20 +12,40 @@ a {
 }
 h1 {
     text-align: center;
-    font-size: 300%;
+    font-size: 600%;
+    text-shadow: 0 0.2rem 0.2rem #9FAFBF;
+    letter-spacing: 0.1rem;
+    margin: 1rem 0 0;
+}
+header p {
+    margin: 0 auto 1rem;
+    text-align: center;
+    font-style: italic;
 }
 h2 {
+    margin: 3rem auto 1rem;
+    max-width: 38rem;
 }
-p, ol {
+p, ol, pre {
     margin: 2rem auto;
     max-width: 30rem;
     padding: 0;
     line-height: 2em;
 }
-li {
+ol > li {
+    position: relative;
     margin: 0.5rem;
     padding: 0;
 }
+ol > li > code {
+    padding-left: 2rem;
+    color: #888;
+    position: absolute;
+    right: 0;
+}
+ol > li > code::before {
+    content: "https://…";
+}
 
 .boxes {
     display: flex;
@@ -41,11 +61,15 @@ li {
     min-width: 25rem;
 }
 .boxes article pre {
-    margin: 1rem 0;
+    margin: 1rem auto;
     padding: 0.5rem;
     background-color: #DFCFEF;
 }
 
+.faq {
+    margin: 4rem;
+}
+
 footer {
     margin-top: 8rem;
     text-align: center;