diff --git a/img/Fediverse_logo_proposal.svg b/img/Fediverse_logo_proposal.svg new file mode 100644 index 0000000..854e6f0 --- /dev/null +++ b/img/Fediverse_logo_proposal.svg @@ -0,0 +1,170 @@ + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/avatar-tt@800.png b/img/avatar-tt@800.png similarity index 100% rename from avatar-tt@800.png rename to img/avatar-tt@800.png diff --git a/img/banner-1500x500.jpg b/img/banner-1500x500.jpg new file mode 100644 index 0000000..cf44a30 Binary files /dev/null and b/img/banner-1500x500.jpg differ diff --git a/index.html b/index.html index 97d05de..70e823c 100644 --- a/index.html +++ b/index.html @@ -12,36 +12,19 @@ (Details: https://indieweb.org/Microsub#Getting_Started) 1. After publishing this to your domain, sign in to https://aperture.p3k.io/login with your domain 2. You will see a tag displayed on your dashboard that looks like: - + 3. Copy that tag and paste it after this HTML comment. 4. Publish the updated page! - --> - My New Website - + --> + + Mon Repos (Death's Domain)
- My profile photo + A grim reaper in a decorated cubicle, writing and daydreaming, surrounded by many other grim reapers in bland, grey, cubicles + My profile photo — a pixelated version of me

I'm Gordon Pedersen.

@@ -50,12 +33,45 @@ ...and I am a human on the Internet.

+ + + diff --git a/js/button-input.js b/js/button-input.js new file mode 100644 index 0000000..c5ad677 --- /dev/null +++ b/js/button-input.js @@ -0,0 +1,53 @@ +function buttonInputClick() { + this.style.display = 'none' + + const buttonInput = document.createElement('div') + buttonInput.classList.add('button-input-container') + + if(this.dataset.instruction){ + const label = document.createElement('label') + buttonInput.appendChild(label) + label.innerText = this.dataset.instruction + } + + const input = document.createElement('input') + buttonInput.appendChild(input) + input.type = 'text' + if(this.dataset.placeholder){ + input.placeholder = this.dataset.placeholder + } + + const button = document.createElement('button') + buttonInput.appendChild(button) + button.innerText = "Submit" + button.addEventListener('click', () => { + if(this.onsubmit){ + const event = new Event('button-input-value') + event.value = input.value + this.onsubmit(event) + } + + buttonInput.parentNode.removeChild(buttonInput) + if(this.dataset.success){ + const span = document.createElement('span') + span.classList.add('success') + span.innerText = this.dataset.success + setTimeout(() => { + span.parentNode.removeChild(span) + this.style.display = null + }, 5000); + this.parentNode.insertBefore(span, this.nextSibling) + } + else{ + this.style.display = null + } + }) + + this.parentNode.insertBefore(buttonInput, this.nextSibling) +} + +document.addEventListener('DOMContentLoaded', () => { + document.querySelectorAll('.button-input').forEach(button => { + button.addEventListener('click', buttonInputClick) + }); +}, false); \ No newline at end of file diff --git a/js/follow.js b/js/follow.js new file mode 100644 index 0000000..f8891c1 --- /dev/null +++ b/js/follow.js @@ -0,0 +1,35 @@ +const SUBSCRIBE_LINK_REL = 'http://ostatus.org/schema/1.0/subscribe' +function follow(username, handle) { + if(!handle){ + handle = prompt("Please enter your fediverse / mastodon handle (e.g. '@user@domain.social')", "@") + } + + if(handle) { + const input = handle + handle = handle.trim().replace(/^@/,'') + const split = handle.split('@') + if(split.length == 2) { + const resource = `acct:${handle}` + const domain = split[1] + + // look up remote user via webfinger + const url = `https://${domain}/.well-known/webfinger?resource=${resource}` + fetch(url, {headers: { + 'Content-Type': 'application/activity+json' + }}).then(async result => { + const json = await result.json() + const subscribe = json.links.find(link => link.rel && link.rel == SUBSCRIBE_LINK_REL) + let template = subscribe.template + window.open(template.replace("{uri}", username), '_blank').focus() + }) + .catch(e => { + console.error(e) + throw `Sorry, we couldn't find a subscribe uri for ${input}.\n\nTry searching for "${username}" on ${domain} (or in your fediverse client of choice)` + }) + + } + else { + throw 'Please enter your fediverse address in @user@domain.social format' + } + } +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..5ad5406 --- /dev/null +++ b/styles.css @@ -0,0 +1,35 @@ +@media (prefers-color-scheme: dark) { + html { background-color: #111111; color: #fbfbfb; } + a { color: #ca8465; } +} +body { + line-height: 1.6; + font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif; + text-align: center; + margin: 0; + min-height: 90vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + overflow-x: hidden; +} +img.u-photo { border-radius: 50%; max-height:200px; } +ul { padding: 0; list-style: none; } +img.u-featured { + display:block; + z-index:0; + margin-bottom:-125px +} + +button.icon-button { + line-height: 24px; +} +button.icon-button>img { + max-height: 24px; + vertical-align: bottom; +} + +.button-input-container>label{ + display:block; +} \ No newline at end of file