Added a follow button

and reorganized the repo a little
This commit is contained in:
Gordon Pedersen 2022-11-29 14:59:11 +11:00
parent b3be60d760
commit 591a582e8f
7 changed files with 332 additions and 23 deletions

View file

@ -0,0 +1,170 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="196.52mm"
height="196.52mm"
viewBox="0 0 196.52 196.52"
version="1.1"
id="svg8"
inkscape:version="0.92.2 2405546, 2018-03-11"
sodipodi:docname="Logo_penta_connectat-imbrincat_retallats-color.svg"
inkscape:export-filename="/home/nestor/Pictures/Fediversal/Logo_penta_connectat-imbrincat_retallats-color-512x.png"
inkscape:export-xdpi="66.175453"
inkscape:export-ydpi="66.175453">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="0.50411932"
inkscape:cx="-209.83484"
inkscape:cy="399.15332"
inkscape:document-units="mm"
inkscape:current-layer="layer2"
showgrid="false"
inkscape:snap-smooth-nodes="true"
inkscape:snap-midpoints="true"
inkscape:snap-global="false"
inkscape:window-width="1366"
inkscape:window-height="736"
inkscape:window-x="0"
inkscape:window-y="32"
inkscape:window-maximized="1"
fit-margin-top="5"
fit-margin-left="5"
fit-margin-right="5"
fit-margin-bottom="5" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="Linies"
style="display:inline"
transform="translate(6.6789703,-32.495842)">
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#a730b8;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 181.13086,275.13672 a 68.892408,68.892408 0 0 1 -29.46484,29.32812 l 161.75781,162.38868 38.99805,-19.76368 z m 213.36328,214.1875 -38.99805,19.76367 81.96289,82.2832 a 68.892409,68.892409 0 0 1 29.47071,-29.33203 z"
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path9722"
inkscape:connector-curvature="0" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#5496be;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 581.64648,339.39062 -91.57617,46.41016 6.75196,43.18945 103.61523,-52.51367 A 68.892409,68.892409 0 0 1 581.64648,339.39062 Z M 436.9082,412.74219 220.38281,522.47656 a 68.892408,68.892408 0 0 1 18.79492,37.08985 L 443.66016,455.93359 Z"
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path9729"
inkscape:connector-curvature="0" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ce3d1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="M 367.27539,142.4375 262.79492,346.4082 293.64258,377.375 404.26562,161.41797 A 68.892408,68.892408 0 0 1 367.27539,142.4375 Z m -131.6543,257.02148 -52.92187,103.31446 a 68.892409,68.892409 0 0 1 36.98633,18.97851 l 46.78125,-91.32812 z"
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path9713"
inkscape:connector-curvature="0" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#d0188f;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 150.76758,304.91797 a 68.892408,68.892408 0 0 1 -34.41602,7.19531 68.892408,68.892408 0 0 1 -6.65039,-0.69531 l 30.90235,197.66211 a 68.892409,68.892409 0 0 1 34.41601,-7.19531 68.892409,68.892409 0 0 1 6.64649,0.69531 z"
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path1015"
inkscape:connector-curvature="0" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#5b36e9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 239.3418,560.54492 a 68.892408,68.892408 0 0 1 0.7207,13.87696 68.892408,68.892408 0 0 1 -7.26758,27.17968 l 197.62891,31.71289 a 68.892409,68.892409 0 0 1 -0.72266,-13.8789 68.892409,68.892409 0 0 1 7.26953,-27.17774 z"
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path1674"
inkscape:connector-curvature="0" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#30b873;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 601.13281,377.19922 -91.21875,178.08203 a 68.892408,68.892408 0 0 1 36.99414,18.98242 L 638.125,396.18359 a 68.892409,68.892409 0 0 1 -36.99219,-18.98437 z"
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path1676"
inkscape:connector-curvature="0" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ebe305;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 476.72266,125.33008 a 68.892408,68.892408 0 0 1 -29.47071,29.33203 l 141.26563,141.81055 a 68.892409,68.892409 0 0 1 29.46875,-29.33204 z"
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path1678"
inkscape:connector-curvature="0" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#f47601;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 347.78711,104.63086 -178.57617,90.49805 a 68.892409,68.892409 0 0 1 18.79297,37.08593 l 178.57421,-90.50195 a 68.892408,68.892408 0 0 1 -18.79101,-37.08203 z"
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path1680"
inkscape:connector-curvature="0" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#57c115;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 446.92578,154.82617 a 68.892408,68.892408 0 0 1 -34.98242,7.48242 68.892408,68.892408 0 0 1 -6.0293,-0.63281 l 15.81836,101.29102 43.16211,6.92578 z m -16,167.02735 37.40039,239.48242 a 68.892409,68.892409 0 0 1 33.91406,-6.94336 68.892409,68.892409 0 0 1 7.20704,0.79101 L 474.08984,328.77734 Z"
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path9758"
inkscape:connector-curvature="0" />
<path
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#dbb210;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:41.5748024;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
d="m 188.13086,232.97461 a 68.892408,68.892408 0 0 1 0.75781,14.0957 68.892408,68.892408 0 0 1 -7.16015,26.98242 l 101.36914,16.28125 19.92382,-38.9082 z m 173.73633,27.90039 -19.92578,38.91211 239.51367,38.4668 a 68.892409,68.892409 0 0 1 -0.69531,-13.71875 68.892409,68.892409 0 0 1 7.34961,-27.32422 z"
transform="matrix(0.26458333,0,0,0.26458333,-6.6789703,32.495842)"
id="path9760"
inkscape:connector-curvature="0" />
</g>
<g
inkscape:groupmode="layer"
id="layer3"
inkscape:label="Nodes"
style="display:inline;opacity:1"
transform="translate(6.6789703,-32.495842)">
<circle
style="fill:#ffca00;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
id="path817"
cx="106.26596"
cy="51.535553"
r="16.570711"
transform="rotate(3.1178174)" />
<circle
id="path819"
style="fill:#64ff00;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
cx="171.42836"
cy="110.19328"
r="16.570711"
transform="rotate(3.1178174)" />
<circle
id="path823"
style="fill:#00a3ff;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
cx="135.76379"
cy="190.27704"
r="16.570711"
transform="rotate(3.1178174)" />
<circle
style="fill:#9500ff;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
id="path825"
cx="48.559471"
cy="181.1138"
r="16.570711"
transform="rotate(3.1178174)" />
<circle
id="path827"
style="fill:#ff0000;fill-opacity:0.99596773;stroke:none;stroke-width:0.26458332;stroke-opacity:0.96078431"
cx="30.328812"
cy="95.366837"
r="16.570711"
transform="rotate(3.1178174)" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 19 KiB

View file

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 14 KiB

BIN
img/banner-1500x500.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

View file

@ -16,32 +16,15 @@
3. Copy that <link> tag and paste it after this HTML comment. 3. Copy that <link> tag and paste it after this HTML comment.
4. Publish the updated page! 4. Publish the updated page!
--> -->
<title>My New Website</title> <link rel="stylesheet" href="styles.css">
<style> <title>Mon Repos (Death's Domain)</title>
@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: 1rem auto;
min-height: 90vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img.u-photo { border-radius: 50%; }
ul { padding: 0; list-style: none; }
</style>
</head> </head>
<body> <body>
<!-- Reference for representative h-card properties: https://microformats.org/wiki/h-card --> <!-- Reference for representative h-card properties: https://microformats.org/wiki/h-card -->
<main class="h-card" rel="author"> <main class="h-card" rel="author">
<img class="u-photo" alt="My profile photo" src="avatar-tt@800.png" /> <img class="u-featured" src="img/banner-1500x500.jpg" alt="A grim reaper in a decorated cubicle, writing and daydreaming, surrounded by many other grim reapers in bland, grey, cubicles" />
<img class="u-photo" alt="My profile photo — a pixelated version of me" src="img/avatar-tt@800.png" />
<h1> <h1>
I'm <span class="p-name">Gordon Pedersen</span>. I'm <span class="p-name">Gordon Pedersen</span>.
</h1> </h1>
@ -50,12 +33,45 @@
...and I am a human on the Internet. ...and I am a human on the Internet.
</p> </p>
<ul> <ul>
<li>
<button class="icon-button button-input"
data-instruction="Please enter your fediverse / mastodon handle (e.g. '@user@domain.social')"
data-placeholder="@user@domain.social"
data-success="Thanks for the follow!"
onsubmit="handleFollow(event.value)">
<img src="img/Fediverse_logo_proposal.svg" alt="Fediverse logo">
Follow @death.au@death.id.au
</button>
</li>
<li><a class="u-uid u-url" href="https://death.id.au">My New Website</a><a class="u-url" href="acct:death.au@death.id.au"></a></li> <li><a class="u-uid u-url" href="https://death.id.au">My New Website</a><a class="u-url" href="acct:death.au@death.id.au"></a></li>
<li><a class="u-url" href="https://github.com/deathau" rel="me">@deathau</a></li> <li><a class="u-url" href="https://github.com/deathau" rel="me">@deathau</a></li>
<li><a class="u-url" href="https://twitter.com/death_au" rel="me">@death_au</a></li> <li><a class="u-url" href="https://twitter.com/death_au" rel="me">@death_au</a></li>
<li><a class="u-url" href="https://pkm.social/@death_au" rel="me">@death_au@pkm.social</a></li> <li><a class="u-url" href="https://pkm.social/@death_au" rel="me">@death_au@pkm.social</a></li>
</ul> </ul>
</main> </main>
<script src="js/follow.js"></script>
<script src="js/button-input.js"></script>
<script>
window.addEventListener('unhandledrejection', function(event) {
alert(event.reason)
})
function handleFollow(handle) {
try{
follow('@death.au@death.id.au', handle)
}
catch(e){
alert(e)
}
}
function tryFollow(user) {
try{
follow(user)
}
catch(e){
alert(e)
}
}
</script>
</body> </body>
</html> </html>

53
js/button-input.js Normal file
View file

@ -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);

35
js/follow.js Normal file
View file

@ -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'
}
}
}

35
styles.css Normal file
View file

@ -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;
}