From c5ea6c302459cc8e1baaadf4c966787c45ac1a7b Mon Sep 17 00:00:00 2001 From: Yarmo Mackenbach Date: Fri, 15 Sep 2023 14:25:15 +0200 Subject: [PATCH] feat: rewrite templates --- views/article.pug | 4 +- views/index.pug | 89 +++++++++++------------------------- views/partials/footer.pug | 51 +++++++++++---------- views/partials/header.pug | 9 ++-- views/profile.pug | 92 +++++++++++++++++++++++--------------- views/util/argon2.pug | 2 +- views/util/bcrypt.pug | 2 +- views/util/index.pug | 4 +- views/util/profile-url.pug | 2 +- views/util/qr.pug | 2 +- views/util/qrfp.pug | 2 +- views/util/wkd.pug | 2 +- 12 files changed, 124 insertions(+), 137 deletions(-) diff --git a/views/article.pug b/views/article.pug index 5668ef7..c4e6db8 100644 --- a/views/article.pug +++ b/views/article.pug @@ -1,6 +1,6 @@ extends templates/base.pug block content - section.long_form.narrow + section h1= title - .card !{ content } + !{ content } diff --git a/views/index.pug b/views/index.pug index 0d7ae95..dba4e16 100644 --- a/views/index.pug +++ b/views/index.pug @@ -1,76 +1,41 @@ extends templates/base.pug block content - #search.form-wrapper.card - h2#searchTitle View a profile + section#search.form-wrapper form(action="post") - label#searchQuery(for="query") Query for fingerprint or email identifier - input#query(type="search" name="query" required placeholder="3637202523e7c1309ab79e99ef2dc5827b445f4b, test@doip.rocks" aria-labelledby="searchTitle searchQuery") + input#query(type="search" name="query" required placeholder="Search for a profile") + input(type="submit" value="Search") - input(type="submit" value="View profile") - p Or view a - a(href="/sig") plaintext signature - | profile. - - if highlights.length > 0 - h2 Highlights - .hcards.hcards--highlights - each hl in highlights - .card.card--small-profile - h3.name= hl.name - p - span.fingerprint= hl.fingerprint - br - span.details= hl.description - .spacer - p - a(href=`/${hl.fingerprint}`).button.full-width View profile - - var n = 0 - while n < 3-highlights.length - .card.card--small-profile-dummy - - n++ - - h2 About Keyoxide - .hcards.hcards--features.hcards--max-2 - .card - h3 Online identity - p Verifying online identity with cryptography. View - a(href="/project@keyoxide.org") Keyoxide's profile - | . - .card - h3 Mobile app - p Available on Android and iOS. More information on - a(href="https://mobile.keyoxide.org") mobile.keyoxide.org - | . - .card - h3 Decentralization & privacy - p No central server or database. No collected data. Control how your data is stored and accessed. - .card - h3 Cryptography - p Your online identity verifiably signed with widely-used cryptographic standards (OpenPGP, others coming). - .card - h3 Open Source - p All Keyoxide projects are licensed under AGPL-3.0-or-later. - .card - h3 Transparent funding - p Funded by donations. Keyoxide stands against VC and surveillance capitalism. - - h2 Community - .card + section + h2 About Keyoxide + p Keyoxide is a decentralized tool to create and verify decentralized online identities. + p Just like passports for real life identities, Keyoxide can be used to verify the online identity of people to make sure one is interacting with whom they intended to be and not an imposter. + p Unlike real life passports, Keyoxide works with online identities or "personas", meaning these identities can be anonymous and one can have multiple separate personas to protect their privacy, both online and in real life. p - | Discussion of the Keyoxide project happens primarily on the + | Here is what a + a(href="/project@keyoxide.org") Keyoxide profile + | looks like. + p + a(href="https://docs.keyoxide.org/getting-started") Get started + | and create your own! + section + h2 Community + p + | Discussion of the Keyoxide project primarily happens on the + a(href="https://matrix.to/#/#keyoxide:matrix.org") #keyoxide Matrix channel + | and the a(href="https://community.keyoxide.org") Keyoxide Community Forum - | . This is the place to propose new service providers for identity verification, make feature suggestions or report bugs. + | . + | The Matrix channel is great for troubleshooting. + | The forum is the place to propose new service providers for identity verification, make feature suggestions or report bugs. p | There is also the a(href="irc://irc.libera.chat/#keyoxide") #keyoxide:libera.chat IRC room - | , the - a(href="https://matrix.to/#/#keyoxide:matrix.org") #keyoxide Matrix channel | and the a(href="https://lists.sr.ht/~yarmo/keyoxide-devel") keyoxide-devel mailing list | . The IRC room and Matrix channel are bridged together. p - | The project is also present on the fediverse as + | The project is also present on the fediverse: a(href="https://fosstodon.org/@keyoxide") @keyoxide@fosstodon.org | . p @@ -79,10 +44,10 @@ block content | . - h2 Fund the project - .card + section + h2 Fund the project p - | The development of Keyoxide and the Decentralized OpenPGP Identity Proofs ecosystem is entirely funded by donations. + | The development of Keyoxide and the Decentralized Online Identity Proofs ecosystem is entirely funded by donations. p | The Keyoxide project was awarded a NGI Zero grant from the a(href='https://nlnet.nl/') NLnet Foundation diff --git a/views/partials/footer.pug b/views/partials/footer.pug index 85b7d88..d7b4241 100644 --- a/views/partials/footer.pug +++ b/views/partials/footer.pug @@ -1,35 +1,34 @@ footer .container - .hcards - div - h1 Keyoxide - a(href="/") Homepage - br - a(href="/util") Utilities - br - a(href="/privacy") Privacy policy + p + | This site: + a(href="/") Homepage + | • + a(href="/util") Utilities + | • + a(href="/privacy") Privacy policy + br - div - h1 Keyoxide project - a(href="https://keyoxide.org") Keyoxide.org - br - a(href="https://community.keyoxide.org") Community forum - br - a(href="https://docs.keyoxide.org") Documentation - br - a(href="https://blog.keyoxide.org") Blog + | Keyoxide project: + a(href="https://community.keyoxide.org") Forum + | • + a(href="https://docs.keyoxide.org") Documentation + | • + a(href="https://blog.keyoxide.org") Blog + | • + a(href="https://codeberg.org/keyoxide") Source code + br - div - h1 Development - a(href="https://codeberg.org/keyoxide/") Source code - br - a(href="https://doip.rocks") doip.rocks - br - a(href="https://ariadne.id") ariadne.id + | Related: + a(href="https://doip.rocks") doip.rocks + | • + a(href="https://ariadne.id") ariadne.id - p.copyright + p | Version #{meta.keyoxide.version} if (meta.env === "development") | -dev br - | © 2023 Keyoxide project contributors \ No newline at end of file + + | © 2023 Keyoxide project contributors + \ No newline at end of file diff --git a/views/partials/header.pug b/views/partials/header.pug index 45ae21c..542c7c8 100644 --- a/views/partials/header.pug +++ b/views/partials/header.pug @@ -3,7 +3,8 @@ header nav a.logo(href='/' aria-label='Home') img(src='/static/img/logo_circle.png' alt='Keyoxide' aria-hidden='true') - a.text(href='/') Home - a.text(href='https://docs.keyoxide.org') Docs - a.text(href='https://blog.keyoxide.org') Blog - a.text(href='https://community.keyoxide.org') Forum + | Keyoxide + .links + a.text(href='https://docs.keyoxide.org/getting-started') Getting started + a.text(href='https://docs.keyoxide.org') Docs + a.text(href='https://blog.keyoxide.org') Blog diff --git a/views/profile.pug b/views/profile.pug index c96dc3e..23e654d 100644 --- a/views/profile.pug +++ b/views/profile.pug @@ -3,24 +3,38 @@ extends templates/base.pug mixin generatePersona(persona, isPrimary) h2 if persona.email - span.p-email Identity claims (#{persona.email}) + | Identity claims ( + span.p-email #{persona.email} + | ) else - span.p-email Identity claims + | Identity claims if isPrimary small.primary primary if persona.description - span.p-comment ⓘ #{persona.description} + span.persona__description.p-comment + + | #{persona.description} each claim in persona.claims if claim.matches.length > 0 - kx-claim.kx-item(data-claim=claim) + kx-claim.kx-item(data-claim=claim,data-status='running') details(aria-label="Claim") summary .info - p.subtitle= claim.display.serviceproviderName - p.title= claim.display.name + p + span.title= claim.display.name + span.subtitle-wrapper + | [ + span.subtitle= claim.display.serviceproviderName + | ] .icons - .verificationStatus(data-value='running') + .verificationStatus .inProgress + + .success + + .failure + + .content .subsection img(src='/static/img/link.png') @@ -59,7 +73,7 @@ block content a(href="https://docs.keyoxide.org/getting-started/something-went-wrong/") documentation | for help. else - section.profile.narrow.h-card + section.profile noscript p Keyoxide requires JavaScript to function. @@ -103,10 +117,12 @@ block content input(type='submit', name='submit', value='Generate profile') unless (isSignature && !signature) - #profileHeader.card.card--transparent.card--profileHeader - img#profileAvatar.u-logo(src=data.personas[data.primaryPersonaIndex].avatarUrl alt="avatar") + .profile__header + img.profile__avatar.u-logo(src=data.personas[data.primaryPersonaIndex].avatarUrl alt="avatar") - p#profileName.p-name= data.personas[data.primaryPersonaIndex].name + p.profile__name.p-name= data.personas[data.primaryPersonaIndex].name + if (data.personas[data.primaryPersonaIndex].description) + p= data.personas[data.primaryPersonaIndex].description if (enable_message_encryption || enable_signature_verification) .button-wrapper @@ -115,28 +131,34 @@ block content if (enable_signature_verification) button(onClick="document.querySelector('#dialog--verifySignature').showModal();") Verify signature - +generatePersona(data.personas[data.primaryPersonaIndex], true && data.personas.length > 1) - each persona, index in data.personas - unless index == data.primaryPersonaIndex - +generatePersona(persona, false) + .profile__claims + +generatePersona(data.personas[data.primaryPersonaIndex], true && data.personas.length > 1) + each persona, index in data.personas + unless index == data.primaryPersonaIndex + +generatePersona(persona, false) - #profileProofs.card.card--transparent - h2 Key - kx-key.kx-item(data-keydata=data.publicKey) - details(aria-label="Key") - summary - .info - p.subtitle= data.publicKey.fetch.method - p.title= data.identifier - .content - .subsection - img(src='/static/img/link.png') - div - p Key link: - a.u-key(href=data.publicKey.fetch.resolvedUrl rel="pgpkey" aria-label="Link to cryptographic key")= data.publicKey.fetch.resolvedUrl - hr - if (data.profileType === 'openpgp') - .subsection - img(src='/static/img/qrcode.png') - div - button(onClick=`showQR('${data.publicKey.fingerprint}', 'fingerprint')` aria-label='Show QR code for cryptographic fingerprint') Show OpenPGP fingerprint QR \ No newline at end of file + section + h2 Profile information + h3 Public key + kx-key.kx-item(data-keydata=data.publicKey) + details(aria-label="Key") + summary + .info + p + span.title= data.identifier + span.subtitle-wrapper + | [ + span.subtitle= data.publicKey.fetch.method + | ] + .content + .subsection + img(src='/static/img/link.png') + div + p Key link: + a.u-key(href=data.publicKey.fetch.resolvedUrl rel="pgpkey" aria-label="Link to cryptographic key")= data.publicKey.fetch.resolvedUrl + hr + if (data.profileType === 'openpgp') + .subsection + img(src='/static/img/qrcode.png') + div + button(onClick=`showQR('${data.publicKey.fingerprint}', 'fingerprint')` aria-label='Show QR code for cryptographic fingerprint') Show OpenPGP fingerprint QR \ No newline at end of file diff --git a/views/util/argon2.pug b/views/util/argon2.pug index 97b9177..d7189b7 100644 --- a/views/util/argon2.pug +++ b/views/util/argon2.pug @@ -1,7 +1,7 @@ extends ../templates/base.pug block content - section.narrow + section h1 Argon2 utility h2 Generate Argon2 hash diff --git a/views/util/bcrypt.pug b/views/util/bcrypt.pug index 2895c87..90d6f84 100644 --- a/views/util/bcrypt.pug +++ b/views/util/bcrypt.pug @@ -1,7 +1,7 @@ extends ../templates/base.pug block content - section.narrow + section h1 bcrypt utility h2 Generate bcrypt hash diff --git a/views/util/index.pug b/views/util/index.pug index a542959..69b8bfa 100644 --- a/views/util/index.pug +++ b/views/util/index.pug @@ -1,8 +1,8 @@ extends ../templates/base.pug block content - section.narrow - h1 Keyoxide utilities + section + h2 Keyoxide utilities p a(href="/util/profile-url") Get the URL for a Keyoxide profile p diff --git a/views/util/profile-url.pug b/views/util/profile-url.pug index c368ac4..2c82eb9 100644 --- a/views/util/profile-url.pug +++ b/views/util/profile-url.pug @@ -1,7 +1,7 @@ extends ../templates/base.pug block content - section.narrow + section h1 Profile URL form#form-util-profile-url(method='post') p This tool generates an URL for your Keyoxide profile page. diff --git a/views/util/qr.pug b/views/util/qr.pug index 1a28df4..e102c62 100644 --- a/views/util/qr.pug +++ b/views/util/qr.pug @@ -1,7 +1,7 @@ extends ../templates/base.pug block content - section.narrow + section h1 QR Code form#form-util-qr(method='post') pre diff --git a/views/util/qrfp.pug b/views/util/qrfp.pug index 98eee11..7258ef8 100644 --- a/views/util/qrfp.pug +++ b/views/util/qrfp.pug @@ -1,7 +1,7 @@ extends ../templates/base.pug block content - section.narrow + section h1 QR Code form#form-util-qrfp(method='post') p diff --git a/views/util/wkd.pug b/views/util/wkd.pug index 0bb0733..020ad34 100644 --- a/views/util/wkd.pug +++ b/views/util/wkd.pug @@ -1,7 +1,7 @@ extends ../templates/base.pug block content - section.narrow + section h1 Web Key Directory URL generator form#form-util-wkd(method='post') p