From 06a2a73f7b2ee8f35f6a2e1def2beeeb613ba091 Mon Sep 17 00:00:00 2001 From: "A.Ottr" Date: Thu, 22 Aug 2024 03:44:56 +0200 Subject: [PATCH] add mastodon verified --- .gitignore | 3 +- .../2024/08-22-verified-links-mastodon.md | 72 +++++++++++++++++++ themes/aottr/assets/css/main.css | 34 +++++++-- themes/aottr/assets/css/tailwind.css | 17 +++-- themes/aottr/layouts/partials/head.html | 1 + 5 files changed, 118 insertions(+), 9 deletions(-) create mode 100644 content/posts/2024/08-22-verified-links-mastodon.md diff --git a/.gitignore b/.gitignore index d003268..5f03262 100644 --- a/.gitignore +++ b/.gitignore @@ -13,4 +13,5 @@ hugo.linux /.hugo_build.lock # node -**/node_modules \ No newline at end of file +**/node_modules +.idea \ No newline at end of file diff --git a/content/posts/2024/08-22-verified-links-mastodon.md b/content/posts/2024/08-22-verified-links-mastodon.md new file mode 100644 index 0000000..31ff698 --- /dev/null +++ b/content/posts/2024/08-22-verified-links-mastodon.md @@ -0,0 +1,72 @@ ++++ +title = 'Have your links verified on Mastodon' +date = 2024-08-22T02:26:05+02:00 +draft = false +tags = ['security', 'furrcard'] +images = ['https://i.imgur.com/50nTp6m.png'] ++++ + +Some of you might use *Mastodon*, have an account there or at least heard of it. One feature of a mastodon profile is the *Profile metadata*, which lets you add all kinds of text and links to your profile. + +One feature that some might not be aware of, at least I didn't see it on a lot of profiles, is, that you can have these links to your other social media profiles and websites shown as *verified*. Mastodon themselves describe this verification as follows: + +> **Verifying your identity on Mastodon is for everyone.** [...] All you need is a personal website that people recognize you by. When you link to this website from your profile, we will check that the website links back to your profile and show a visual indicator on it. + +This *visual indicator* is a very noticable green box surrounding the link with a checkmark, as shown below. + +{{
}} + +The question is now: *How can I add this to my profile?? How does it work?* And the answer is quite simple. All it needs is an html reference to your mastodon profile, containing the profile-url as `href` and `rel="me"`. The best ways, according to the mastodon documentation, are the `link` and `a` tag, while both must be static / visible on first render without javascript. + +```html + +``` + +This would create an, for the regular user invisible, reference to your mastodon profile. (after you changed the url to your own mastodon ofc...) +Another, and more staight-forward way, would be just adding the `rel="me"` attribute to existing links to your mastodon account on your personal website or blog. Again, it's important that you are able to edit the html-tag of the link, not just the url. + +```html +Mastodon +``` +You can further check which pages are triggering the verification on your mastodon account by accessing `/settings/verification` (**Edit Profile**->**Verfification**). + +This covers websites (or identites), where you have actual html access to your profile page, but how does it look with other services you're using? + +## Adding verified links for 3rd-party services + +So far, I don't know many services where you can add the verification besides websites you manage yourself, but there are a few: + +- [keyoxide](https://keyoxide.org/) by [adding the proof](https://docs.keyoxide.org/service-providers/mastodon/) to your profile +- [Github](https://github.com/) by creating a profile readme +- [FurrCard](https://furrcard.com) by adding the link and selecting the mastodon icon. + +### Creating a github readme +To verify your github account, you create a new public repository with the same name as your github username. +My github username is `aottr`, which means the repo is also called `aottr`. [A reference](https://github.com/aottr/aottr/). + +Once the repository is created and initialized, you create or edit the `README.md` file and add the html reference wherever you want. (Yes, you can add html in markdown on github) + +{{
}} + +Check out their docs article about how to [manage your profile README](https://docs.github.com/en/account-and-profile/setting-up-and-managing-your-github-profile/customizing-your-profile/managing-your-profile-readme) for more information. + +### Creating a link on FurrCard + +All links created on the FurrCard card editor with the *Mastodon*-icon have the `rel="me"` attribute automatically. This means you just: +1. Log into your FurrCard account +2. Open the Card Editor +3. Add a new *External Link* on ***Add Link*** or ***Add Social*** +4. Select the mastodon icon on the left +5. Enter the link to your mastodon account + +And that's it. Save your card on the top-right and the backend will do the rest. + +{{
}} + +This little addition came in version `0.6.5` and was very fast and easy to do. Here the actuall `diff` of the update. xD +```tsx +rel={link.icon === 'Mastodon' && 'me' || undefined} +``` +I therefore wonder why not many other provider add this, especially if they have predefined input fields for mastodon accounts. + +Anyway..I hope you liked this little excourse. Let me know in the comments if you know other services where this works! diff --git a/themes/aottr/assets/css/main.css b/themes/aottr/assets/css/main.css index f59847d..f36bfd4 100644 --- a/themes/aottr/assets/css/main.css +++ b/themes/aottr/assets/css/main.css @@ -608,6 +608,10 @@ video { visibility: hidden; } +.static { + position: static; +} + .relative { position: relative; } @@ -904,7 +908,20 @@ main p { font-size: large; } -main p code { +main blockquote { + border-left-width: 8px; + --tw-border-opacity: 1; + border-color: rgb(28 25 23 / var(--tw-border-opacity)); + background-color: rgb(28 25 23 / 0.5); + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + font-style: italic; + color: rgb(214 211 209 / 0.8); +} + +main p code, ol > li code, ul > li code { --tw-bg-opacity: 1; background-color: rgb(68 64 60 / var(--tw-bg-opacity)); font-size: 0.875rem; @@ -989,15 +1006,23 @@ main p code { stroke: currentColor; } -ul { +ul, ol { list-style-type: none; padding-left: 0.5rem; } -ul > li { +ul > li, ol > li { font-family: "Nunito", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } +ol > li { + list-style-position: inside; + list-style-type: decimal; + padding-left: 0.5rem; + font-size: 1.125rem; + line-height: 1.75rem; +} + ul > li::before { content: '* '; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; @@ -1248,4 +1273,5 @@ h1.page-title { .md\:flex-row { flex-direction: row; } -} \ No newline at end of file +} + diff --git a/themes/aottr/assets/css/tailwind.css b/themes/aottr/assets/css/tailwind.css index 856a2b8..49c9a93 100644 --- a/themes/aottr/assets/css/tailwind.css +++ b/themes/aottr/assets/css/tailwind.css @@ -108,7 +108,11 @@ main p { font-size: large; } -main p code { +main blockquote { + @apply bg-stone-900/50 px-6 py-1 italic border-l-8 border-stone-900 text-stone-300/80; +} + +main p code, ol > li code, ul > li code { @apply bg-stone-700 text-sm text-stone-300; @apply rounded-md; @apply px-1 py-0.5; @@ -148,12 +152,16 @@ main p code { @apply w-8 h-8 stroke-current flex-none; } -ul { +ul, ol { @apply list-none pl-2; } -ul > li { +ul > li, ol > li { @apply font-sans; } +ol > li { + @apply list-decimal pl-2 list-inside text-lg; +} + ul > li::before { content: '* '; @apply font-bold text-pink-300 font-mono; @@ -312,4 +320,5 @@ h1.page-title { .pagination { @apply flex flex-row gap-2 justify-center; @apply my-4; -} \ No newline at end of file +} + diff --git a/themes/aottr/layouts/partials/head.html b/themes/aottr/layouts/partials/head.html index 02c2240..e15c318 100644 --- a/themes/aottr/layouts/partials/head.html +++ b/themes/aottr/layouts/partials/head.html @@ -1,5 +1,6 @@ + {{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }} {{ partialCached "head/css.html" . }} {{ partialCached "head/js.html" . }} -- 2.51.2