Fix demo

routes/main.js

@@ -55,7 +55,7 @@ router.get('/', (req, res) => {
         }
     }
 
-    res.render('index', {highlights: highlights});
+    res.render('index', { highlights: highlights, demoData: require('../server/demo.js').data });
 });
 
 router.get('/about', (req, res) => {

server/demo.js

@@ -0,0 +1,81 @@
+/*
+Copyright (C) 2021 Yarmo Mackenbach
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU Affero General Public License as published by the Free
+Software Foundation, either version 3 of the License, or (at your option)
+any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+details.
+
+You should have received a copy of the GNU Affero General Public License along
+with this program. If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If your software can interact with users remotely through a computer network,
+you should also make sure that it provides a way for users to get its source.
+For example, if your program is a web application, its interface could display
+a "Source" link that leads users to an archive of the code. There are many
+ways you could offer source, and different solutions will be better for different
+programs; see section 13 for the specific requirements.
+
+You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary. For
+more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
+*/
+exports.data = {
+    "claimVersion": 1,
+    "uri": "https://fosstodon.org/@keyoxide",
+    "fingerprint": "9f0048ac0b23301e1f77e994909f6bd6f80f485d",
+    "status": "verified",
+    "matches": [
+        {
+            "serviceprovider": {
+                "type": "web",
+                "name": "mastodon"
+            },
+            "match": {
+                "regularExpression": {},
+                "isAmbiguous": true
+            },
+            "profile": {
+                "display": "@keyoxide@fosstodon.org",
+                "uri": "https://fosstodon.org/@keyoxide",
+                "qr": null
+            },
+            "proof": {
+                "uri": "https://fosstodon.org/@keyoxide",
+                "request": {
+                    "fetcher": "http",
+                    "access": 0,
+                    "format": "json",
+                    "data": {
+                        "url": "https://fosstodon.org/@keyoxide",
+                        "format": "json"
+                    }
+                }
+            },
+            "claim": {
+                "format": 1,
+                "relation": 0,
+                "path": [
+                    "attachment",
+                    "value"
+                ]
+            }
+        }
+    ],
+    "verification": {
+        "result": true,
+        "completed": true,
+        "errors": [],
+        "proof": {
+            "fetcher": "http",
+            "viaProxy": false
+        }
+    }
+}

static/styles.css

@@ -42,7 +42,7 @@ header {
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 0 1.6rem 4.8rem;
+  margin: 0 1.6rem 1.6rem;
   padding: 0.8rem;
   /* background-color: var(--purple-50); */
   border-radius: 16px;
@@ -105,7 +105,7 @@ section.profile .card, .demo .card {
   padding-right: 0;
   background-color: transparent;
   border: 0;
-  box-shadow: 0 0 0 transparent;
+  /* box-shadow: 0 0 0 transparent; */
 }
 section.profile p, .demo p {
   /* margin: 0.8rem 0; */
@@ -113,7 +113,6 @@ section.profile p, .demo p {
 }
 .demo {
   margin: 9.6rem auto;
-  font-size: 1.6rem;
 }
 
 .card {
@@ -122,7 +121,7 @@ section.profile p, .demo p {
   background-color: #fff;
   background-color: var(--purple-50);
   border: 2px solid var(--purple-200);
-  box-shadow: 0 4px 12px var(--purple-100);
+  /* box-shadow: 0 4px 12px var(--purple-100); */
 }
 .card--profileHeader {
   display: flex;
@@ -145,7 +144,7 @@ section.profile p, .demo p {
 .card--small-profile-dummy {
   opacity: 0.5;
   border: 0;
-  box-shadow: unset;
+  /* box-shadow: unset; */
 }
 .card--small-profile .name {
   font-size: 1.4em;

views/index.pug

@@ -1,5 +1,11 @@
 extends templates/base.pug
 
+block js
+  //- script(type='application/javascript' src='/static/dialog-polyfill.js' charset='utf-8')
+  script(type='application/javascript' src='/static/openpgp.min.js' charset='utf-8')
+  script(type='application/javascript' src='/static/doip.js' charset='utf-8')
+  script(type='application/javascript' src='/static/kx-claim.js' charset='utf-8')
+
 block content
   if highlights.length > 0
     h2 Highlights
@@ -19,20 +25,6 @@ block content
         .card.card--small-profile-dummy
         - n++
 
-  .demo.narrow
-    .card.card--profile
-      .claim
-        .claim__main
-          .claim__description
-            p @alice@example.instance
-          .claim__links
-            p
-              span Fediverse
-              a(href="#") View account
-              a(href="#") View proof
-              a(href="#") Details
-        .claim__verification.claim__verification--true ✔
-
   h2 About Keyoxide
   .hcards.hcards--features.hcards--max-3
     .card
@@ -55,6 +47,10 @@ block content
       p Funded by donations. Keyoxide stands against VC and surveillance capitalism.
 
 
+  h2 Example identity claim
+  .narrow
+    kx-claim(data-claim= demoData)
+
   h2 Links
   .hcards
     .card