Info page

config/config.ts_TEMPLATE

@@ -1,3 +1,5 @@
+import React from "https://esm.sh/react@17.0.2";
+
 interface Config {
   // Whether to load real data or fake
   mode: "real" | "fake" | "fake-frontend";
@@ -35,10 +37,31 @@ interface Config {
 
   // Configuration specifically for the frontend site
   frontend: {
-    // How often to autrefresh, in seconds. Set to null to disable
+    // How often to auto-refresh, in seconds. Set to null to disable
     autoRefreshInterval: number | null;
     // Twitter handle, this is for the Twitter link preview
-    twitterHandle: string,
+    twitterHandle: string;
+    // Content related to the About page
+    about?: {
+      // Information about the softfork, it's allowed to use
+      // React components here.
+      // Use the Online Babel JSX Transpiler to create React components: https://babeljs.io/repl
+      softfork?: {
+        info?: React.ReactNode[];
+      };
+      // Information related to the current deployment method being
+      // used for this softfork (i.e BIP9, Speedy Trial etc)
+      method?: {
+        title: React.ReactNode;
+        info: React.ReactNode[];
+      };
+    };
+    // Sponsors of this project
+    sponsors?: {
+      title: string;
+      url: string;
+      imageUri: string;
+    }[];
   };
 
   // Donation configuration, right now only supports lnd
@@ -85,6 +108,22 @@ const config: Config = {
   frontend: {
     autoRefreshInterval: 120,
     twitterHandle: "",
+    about: {
+      softfork: {
+        info: [
+          React.createElement(React.Fragment, null, "Info about the Taproot softfork goes here"),
+          React.createElement(React.Fragment, null, "Info about the Taproot softfork goes here"),
+        ],
+      },
+      method: {
+        title: "Title of the softfork deployment method used (BIP9, Speedy Trial etc)",
+        info: [
+          React.createElement(React.Fragment, null, "Info about the deployment method goes here"),
+          React.createElement(React.Fragment, null, "Info about the deployment method goes here"),
+        ],
+      },
+    },
+    sponsors: [],
   },
 
   // donation: {

frontend/components/ContactTwitter.tsx

@@ -0,0 +1,25 @@
+import React from "https://esm.sh/react@17.0.2";
+import styled from "https://esm.sh/styled-components";
+import config from "../back/config/config.ts";
+
+const ContactTwitter = styled.p`
+  color: #9e9e9e;
+  & > a {
+    color: #ababab;
+  }
+  text-shadow: #000 1px 1px 0px;
+  text-align: center;
+  margin-top: 40px;
+  margin-bottom: 35px;
+`;
+
+export default function () {
+  return (
+    <ContactTwitter>
+      Twitter:{" "}
+      <a target="_blank" href={`https://twitter.com/${config.frontend.twitterHandle}`}>
+        @{config.frontend.twitterHandle}
+      </a>
+    </ContactTwitter>
+  );
+}

frontend/components/SiteMenu.tsx

@@ -3,10 +3,12 @@ import styled from "https://esm.sh/styled-components";
 
 import Anchor from "https://deno.land/x/aleph/framework/react/components/Anchor.ts";
 import { useRouter } from "https://deno.land/x/aleph/framework/react/hooks.ts";
+import config from "../back/frontend/back/config/config.ts";
 
 const MenuContainer = styled.div`
   display: flex;
   justify-content: center;
+  align-items: center;
   padding: 0;
   margin-bottom: 40px;
 `;
@@ -33,7 +35,10 @@ const SiteMenuComponent = () => {
         <MenuItem active={routePath === "/"}>Overview</MenuItem>
       </Anchor>
       <Anchor style={{ textDecoration: "none" }} href="/miners">
-        <MenuItem active={routePath === "/miners"}>Miners</MenuItem>
+        <MenuItem active={routePath === "/miners"}>Mining Pools</MenuItem>
+      </Anchor>
+      <Anchor style={{ textDecoration: "none" }} href="/about">
+        <MenuItem active={routePath === "/about"}>About {config.fork.name}</MenuItem>
       </Anchor>
     </MenuContainer>
   );

frontend/components/Text.tsx

@@ -0,0 +1,12 @@
+import styled from "https://esm.sh/styled-components";
+
+export default styled.p`
+  color: #f7f7f7;
+  /* text-shadow: #000 2px 2px 0px; */
+  font-size: 16px;
+  margin-bottom: 20px;
+
+  & > a {
+    color: #f7f7f7;
+  }
+`;

frontend/pages/about.tsx

@@ -0,0 +1,122 @@
+import React from "https://esm.sh/react@17.0.2";
+import styled from "https://esm.sh/styled-components";
+
+import config from "../back/config/config.ts";
+
+import { Container } from "../components/Container.ts";
+import { Content } from "../components/Content.ts";
+import { Donation } from "../components/Donation.tsx";
+import SiteTitle from "../components/SiteTitle.tsx";
+import SiteMenu from "../components/SiteMenu.tsx";
+import Text from "../components/Text.tsx";
+import ContactTwitter from "../components/ContactTwitter.tsx";
+
+const Header = styled.p`
+  font-size: 24px;
+  margin-bottom: 10px;
+  color: #ff9b20;
+  text-shadow: #000 2px 2px 0px;
+`;
+
+const InfoContainer = styled.div`
+  max-width: 980px;
+  margin: auto;
+`;
+
+const InfoSection = styled.div``;
+
+const SponsorContainer = styled.div`
+  max-width: 980px;
+  margin: auto;
+`;
+
+const SponsorSection = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const Sponsor = styled.a`
+  display: flex;
+  flex-direction: column;
+  width: 200px;
+  align-items: center;
+  margin: 10px 15px;
+  padding: 8px;
+  text-decoration: none;
+`;
+
+const SponsorImage = styled.img`
+  max-width: 120px;
+`;
+
+const SponsorName = styled.p`
+  color: #f7f7f7;
+  font-size: 14px;
+  margin-bottom: 0;
+`;
+
+export default function Blocks() {
+  const forkName = config.fork.name;
+
+  return (
+    <Container>
+      <head>
+        <title>{forkName} activation</title>
+      </head>
+      <Content>
+        <SiteTitle />
+        <SiteMenu />
+        <InfoContainer>
+          <InfoSection>
+            <Header>Information about the softfork Taproot</Header>
+            {config.frontend.about?.softfork?.info?.map((section, i) => (
+              <Text key={i}>{section}</Text>
+            ))}
+          </InfoSection>
+          <InfoSection>
+            <Header>{config.frontend.about?.method?.title}</Header>
+            {config.frontend.about?.method?.info?.map((section, i) => (
+              <Text key={i}>{section}</Text>
+            ))}
+          </InfoSection>
+          <InfoSection>
+            <Header>About this site</Header>
+            <Text>
+              taproot.watch is based on open-source software called{" "}
+              <a href="https://github.com/hsjoberg/fork-explorer" target="_blank">
+                fork-explorer
+              </a>
+              . Both this site and the open-source project is developed and maintained by Hampus Sjöberg (
+              <a href="https://twitter.com/hampus_s" target="_blank">
+                @hampus_s
+              </a>
+              ).
+            </Text>
+            <Text>
+              If you enjoy this site, leave a Lightning Network donation below or check out my other project{" "}
+              <a href="https://blixtwallet.github.io" target="_blank">
+                Blixt Wallet
+              </a>
+              , a non-custodial Bitcoin Lightning Wallet!
+            </Text>
+          </InfoSection>
+        </InfoContainer>
+        {config.frontend.sponsors?.length! > 0 && (
+          <SponsorContainer>
+            <Header>Development Patrons</Header>
+            {config.frontend.sponsors?.map((sponsor) => (
+              <SponsorSection>
+                <Sponsor href={sponsor.url} target="_blank">
+                  <SponsorImage src={sponsor.imageUri} />
+                  <SponsorName>{sponsor.title}</SponsorName>
+                </Sponsor>
+              </SponsorSection>
+            ))}
+          </SponsorContainer>
+        )}
+        {config.frontend.twitterHandle && <ContactTwitter />}
+        {config.donation && <Donation />}
+      </Content>
+    </Container>
+  );
+}

frontend/pages/index.tsx

@@ -11,17 +11,13 @@ import { Donation } from "../components/Donation.tsx";
 import SiteTitle from "../components/SiteTitle.tsx";
 import SiteMenu from "../components/SiteMenu.tsx";
 import ProgressBar from "../components/ProgressBar.tsx";
+import Text from "../components/Text.tsx";
+import ContactTwitter from "../components/ContactTwitter.tsx";
 import { useStoreState } from "../state/index.ts";
 
 const DescriptionBlock = styled.div`
   max-width: 600px;
   margin: auto;
-`;
-
-const Text = styled.p`
-  color: #f7f7f7;
-  /* text-shadow: #000 2px 2px 0px; */
-  font-size: 16px;
   text-align: center;
 `;
 
@@ -51,17 +47,6 @@ const BootstrappingInProgress = styled.p`
   text-align: center;
 `;
 
-const ContactTwitter = styled.p`
-  color: #9e9e9e;
-  & > a {
-    color: #ababab;
-  }
-  text-shadow: #000 1px 1px 0px;
-  text-align: center;
-  margin-top: 40px;
-  margin-bottom: 35px;
-`;
-
 export default function Blocks() {
   const blocks = useStoreState((store) => store.blocks);
   const forkName = config.fork.name;
@@ -127,14 +112,7 @@ export default function Blocks() {
             <Block key={i} height={block.height} signals={block.signals} miner={block.miner} />
           ))}
         </BlockContainer>
-        {config.frontend.twitterHandle && (
-          <ContactTwitter>
-            Twitter:{" "}
-            <a target="_blank" href={`https://twitter.com/${config.frontend.twitterHandle}`}>
-              @{config.frontend.twitterHandle}
-            </a>
-          </ContactTwitter>
-        )}
+        {config.frontend.twitterHandle && <ContactTwitter />}
         {config.donation && <Donation />}
       </Content>
     </Container>

frontend/pages/miners.tsx

@@ -10,6 +10,7 @@ import SiteTitle from "../components/SiteTitle.tsx";
 import { useStoreState } from "../state/index.ts";
 import SiteMenu from "../components/SiteMenu.tsx";
 import { Donation } from "../components/Donation.tsx";
+import ContactTwitter from "../components/ContactTwitter.tsx";
 
 const Table = styled.table`
   width: 100%;
@@ -107,6 +108,7 @@ export default function Miners() {
             })}
           </TableBody>
         </Table>
+        {config.frontend.twitterHandle && <ContactTwitter />}
         {config.donation && <Donation />}
       </Content>
     </Container>

frontend/style/reset.css

@@ -9,7 +9,7 @@
  */
 
 html {
-  line-height: 1.15; /* 1 */
+  line-height: 1.2; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
 

index.ts

@@ -15,7 +15,7 @@ app.use(router.routes());
 app.use(async (context) => {
   const accepts = context.request.accepts();
 
-  if ([".js", ".css", ".json", ".ico"].some((extension) => context.request.url.pathname.endsWith(extension))) {
+  if ([".js", ".css", ".json", ".ico", "png"].some((extension) => context.request.url.pathname.endsWith(extension))) {
     await context.send({
       root: `${Deno.cwd()}/frontend/dist`,
       index: "index.html",