add nlnet logo to about page

README.md

@@ -59,22 +59,31 @@ If running in docker, this means you run
 This project doesn't crawl personal instances: the goal is to understand communities, not individuals. The threshold for what makes an instance "personal" is defined in the [backend config](backend/config/config.exs) and the [graph builder SQL](gephi/src/main/java/space/fediverse/graph/GraphBuilder.java).
 
 ## Deployment
+
 You don't have to follow these instructions, but it's one way to set up a continuous deployment pipeline. The following are for the backend; the frontend is just a static HTML/JS site that can be deployed anywhere.
+
 1. Install [Dokku](http://dokku.viewdocs.io/dokku/) on your web server.
 2. Install [dokku-postgres](https://github.com/dokku/dokku-postgres), [dokku-monorepo](https://github.com/notpushkin/dokku-monorepo), and [dokku-letsencrypt](https://github.com/dokku/dokku-letsencrypt).
 3. Create the apps
-  * `dokku apps:create phoenix`
-  * `dokku apps:create gephi`
+
+- `dokku apps:create phoenix`
+- `dokku apps:create gephi`
+
 4. Create the backing database
-  * `dokku postgres:create fediversedb`
-  * `dokku postgres:link fediversedb phoenix`
-  * `dokku postgres:link fediversedb gephi`
+
+- `dokku postgres:create fediversedb`
+- `dokku postgres:link fediversedb phoenix`
+- `dokku postgres:link fediversedb gephi`
+
 5. Update the backend configuration. In particular, change the `user_agent` in [config.exs](/backend/config/config.exs) to something descriptive.
 6. Push the apps, e.g. `git push dokku@<DOMAIN>:phoenix` (note that the first push cannot be from the CD pipeline).
 7. Set up SSL for the Phoenix app
-  * `dokku letsencrypt phoenix`
-  * `dokku letsencrypt:cron-job --add`
+
+- `dokku letsencrypt phoenix`
+- `dokku letsencrypt:cron-job --add`
+
 8. Set up a cron job for the graph layout (use the `dokku` user). E.g.
+
 ```
 SHELL=/bin/bash
 0 2 * * * /usr/bin/dokku run gephi java -Xmx1g -jar build/libs/graphBuilder.jar
@@ -82,6 +91,6 @@ SHELL=/bin/bash
 
 ## Acknowledgements
 
-[![NLnet logo](https://i.imgur.com/huV3rvo.png)](https://nlnet.nl/project/fediverse_space/)
+[![NLnet logo](/nlnet-logo.png)](https://nlnet.nl/project/fediverse_space/)
 
 Many thanks to [NLnet](https://nlnet.nl/project/fediverse_space/) for their support and guidance of this project.

frontend/src/components/screens/AboutScreen.tsx

@@ -1,5 +1,6 @@
 import { Classes, Code, H1, H2, H4 } from "@blueprintjs/core";
 import * as React from "react";
+import nlnetLogo from "../../assets/nlnet.png";
 import { Page } from "../atoms/";
 
 const AboutScreen: React.FC = () => (
@@ -33,24 +34,32 @@ const AboutScreen: React.FC = () => (
     </p>
 
     <H4>How do I add my personal instance?</H4>
-    <p className={Classes.RUNNING_TEXT}>
-      Send a DM to{" "}
-      <a href="https://cursed.technology/@fediversespace" target="_blank" rel="noopener noreferrer">
-        @fediversespace
-      </a>{" "}
-      on Mastodon. Make sure to send it from the account that's listed as the instance admin.
-    </p>
+    <p className={Classes.RUNNING_TEXT}>Click on the Administration link in the top right to opt-in.</p>
 
     <H4>How do you calculate the strength of relationships between instances?</H4>
     <p className={Classes.RUNNING_TEXT}>
-      fediverse.space scrapes the last 5000 statuses from within the last month on the public timeline of each instance.
-      It looks at the ratio of
+      fediverse.space looks at statuses from within the last month on the public timeline of each instance. It
+      calculates at the ratio of
       <Code>mentions of an instance / total statuses</Code>. It uses a ratio rather than an absolute number of mentions
       to reflect that smaller instances can play a large role in a community.
     </p>
 
     <H2>Credits</H2>
-    <p className={Classes.RUNNING_TEXT}>This site is inspired by several other sites in the same vein:</p>
+
+    <a href="https://nlnet.nl/project/fediverse_space/" target="_blank" rel="noopener noreferrer">
+      <img src={nlnetLogo} alt="NLnet logo" width={160} height={60} />
+    </a>
+    <br />
+    <br />
+    <p className={Classes.RUNNING_TEXT}>
+      This project is proudly supported by{" "}
+      <a href="https://nlnet.nl/project/fediverse_space/" target="_blank" rel="noopener noreferrer">
+        NLnet
+      </a>
+      .
+    </p>
+
+    <p className={Classes.RUNNING_TEXT}>Inspiration for this site comes from several places:</p>
     <ul className={Classes.LIST}>
       <li>
         <a href="https://the-federation.info/" target="_blank" rel="noopener noreferrer">