experiments
This commit is contained in:
parent
411e76b851
commit
ba19b3aeae
21
.experiments/astro/.gitignore
vendored
Normal file
21
.experiments/astro/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
# build output
|
||||
dist/
|
||||
# generated types
|
||||
.astro/
|
||||
|
||||
# dependencies
|
||||
node_modules/
|
||||
|
||||
# logs
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
|
||||
# environment variables
|
||||
.env
|
||||
.env.production
|
||||
|
||||
# macOS-specific files
|
||||
.DS_Store
|
||||
4
.experiments/astro/.vscode/extensions.json
vendored
Normal file
4
.experiments/astro/.vscode/extensions.json
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"recommendations": ["astro-build.astro-vscode"],
|
||||
"unwantedRecommendations": []
|
||||
}
|
||||
11
.experiments/astro/.vscode/launch.json
vendored
Normal file
11
.experiments/astro/.vscode/launch.json
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"command": "./node_modules/.bin/astro dev",
|
||||
"name": "Development server",
|
||||
"request": "launch",
|
||||
"type": "node-terminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
47
.experiments/astro/README.md
Normal file
47
.experiments/astro/README.md
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
# Astro Starter Kit: Minimal
|
||||
|
||||
```
|
||||
npm create astro@latest -- --template minimal
|
||||
```
|
||||
|
||||
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
|
||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
|
||||
|
||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
Inside of your Astro project, you'll see the following folders and files:
|
||||
|
||||
```
|
||||
/
|
||||
├── public/
|
||||
├── src/
|
||||
│ └── pages/
|
||||
│ └── index.astro
|
||||
└── package.json
|
||||
```
|
||||
|
||||
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
|
||||
|
||||
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
|
||||
|
||||
Any static assets, like images, can be placed in the `public/` directory.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :------------------------ | :----------------------------------------------- |
|
||||
| `npm install` | Installs dependencies |
|
||||
| `npm run dev` | Starts local dev server at `localhost:3000` |
|
||||
| `npm run build` | Build your production site to `./dist/` |
|
||||
| `npm run preview` | Preview your build locally, before deploying |
|
||||
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
|
||||
| `npm run astro -- --help` | Get help using the Astro CLI |
|
||||
|
||||
## 👀 Want to learn more?
|
||||
|
||||
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
|
||||
9
.experiments/astro/astro.config.mjs
Normal file
9
.experiments/astro/astro.config.mjs
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
experimental: {
|
||||
assets: true
|
||||
},
|
||||
site: 'https://abdullahtarawneh.com'
|
||||
});
|
||||
8723
.experiments/astro/package-lock.json
generated
Normal file
8723
.experiments/astro/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
15
.experiments/astro/package.json
Normal file
15
.experiments/astro/package.json
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
{
|
||||
"name": "",
|
||||
"type": "module",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"astro": "^2.5.6"
|
||||
}
|
||||
}
|
||||
43
.experiments/astro/src/components/Avatar.astro
Normal file
43
.experiments/astro/src/components/Avatar.astro
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
const { name } = Astro.props;
|
||||
|
||||
let avif = await Astro.glob(
|
||||
'/public/people/*/*.avif'
|
||||
).then(
|
||||
result => result.find(
|
||||
file => file.default.includes(name + '.avif')
|
||||
).default
|
||||
)
|
||||
|
||||
let webp = await Astro.glob(
|
||||
'/public/people/*/*.webp'
|
||||
).then(
|
||||
result => result.find(
|
||||
file => file.default.src.includes(name + '.webp')
|
||||
).default.src
|
||||
)
|
||||
|
||||
let jpg = await Astro.glob(
|
||||
'/public/people/*/*.jpg'
|
||||
).then(
|
||||
result => result.find(
|
||||
file => file.default.src.includes(name + '.jpg')
|
||||
)
|
||||
)
|
||||
|
||||
let png = await Astro.glob(
|
||||
'/public/people/*/*.png'
|
||||
).then(
|
||||
result => result.find(
|
||||
file => file.default.src.includes(name + '.png')
|
||||
)
|
||||
)
|
||||
|
||||
|
||||
import { Debug } from 'astro/components';
|
||||
---
|
||||
<picture>
|
||||
<source srcset={avif} type="image/avif">
|
||||
<source srcset={webp} type="image/webp">
|
||||
<img src={png ? png : jpg} alt={name + "'s avatar"} width=48 height=48 class="avatar">
|
||||
</picture>
|
||||
24
.experiments/astro/src/components/SEO.astro
Normal file
24
.experiments/astro/src/components/SEO.astro
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
const { title, siteTitle, description, image } = Astro.props;
|
||||
|
||||
let pageTitle = title ? title + ' | ' + siteTitle : siteTitle
|
||||
|
||||
---
|
||||
|
||||
<title>{pageTitle}</title>
|
||||
<meta property="og:title" itemprop="name" content={title ? title : siteTitle} />
|
||||
<meta name="application-name" property="og:site_name" content={siteTitle} />
|
||||
|
||||
{
|
||||
description &&
|
||||
<meta name="description" property="og:description" itemprop="description" content={description} />
|
||||
}
|
||||
|
||||
<base href={Astro.url.toString()} />
|
||||
<link rel="canonical" href={Astro.url.toString()} />
|
||||
<meta name="url" property="og:url" itemprop="url" content={Astro.url.toString()} />
|
||||
|
||||
{
|
||||
image &&
|
||||
<meta property="og:image" itemprop="image" content={image.src} />
|
||||
}
|
||||
1
.experiments/astro/src/env.d.ts
vendored
Normal file
1
.experiments/astro/src/env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
/// <reference types="astro/client-image" />
|
||||
36
.experiments/astro/src/layouts/Article.astro
Normal file
36
.experiments/astro/src/layouts/Article.astro
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
import Page from '@layouts/Page.astro';
|
||||
const { frontmatter } = Astro.props;
|
||||
---
|
||||
|
||||
<Page title={frontmatter.title} description={frontmatter.summary} image={frontmatter.cover}>
|
||||
<article class="article">
|
||||
<header class="meta">
|
||||
<div class="container">
|
||||
{frontmatter.title && <h1>{frontmatter.title}</h1>}
|
||||
{frontmatter.summary && <p>{frontmatter.summary}</p>}
|
||||
{frontmatter.published && <time datetime="">{frontmatter.published}</time>}
|
||||
</div>
|
||||
</header>
|
||||
<section class="content">
|
||||
<div class="container">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
<footer class="footnotes">
|
||||
<div class="container">
|
||||
<h2>Footnotes</h2>
|
||||
<ol>
|
||||
<li>
|
||||
Some notes here.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</footer>
|
||||
</article>
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>This is the end of the article. Maybe I will add some auxiliary stuff here later.</p>
|
||||
</div>
|
||||
</footer>
|
||||
</Page>
|
||||
16
.experiments/astro/src/layouts/Page.astro
Normal file
16
.experiments/astro/src/layouts/Page.astro
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
import Skeleton from '@layouts/Skeleton.astro';
|
||||
const { title, description, image } = Astro.props;
|
||||
---
|
||||
|
||||
<Skeleton title={title} description={description} image={image}>
|
||||
<header>
|
||||
|
||||
</header>
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
<footer>
|
||||
|
||||
</footer>
|
||||
</Skeleton>
|
||||
36
.experiments/astro/src/layouts/Skeleton.astro
Normal file
36
.experiments/astro/src/layouts/Skeleton.astro
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
const { title, description, image } = Astro.props;
|
||||
const siteTitle = 'Abdullah Tarawneh';
|
||||
import siteIcon from '/src/public/people/trwnh/trwnh.png';
|
||||
|
||||
import SEO from '../components/SEO.astro';
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<SEO
|
||||
title={title}
|
||||
siteTitle={siteTitle}
|
||||
description={description}
|
||||
image={image ? image : siteIcon}
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style is:global>
|
||||
html {
|
||||
--container-max: 120rem;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-inline-size: var(--container-max);
|
||||
margin-inline: auto;
|
||||
}
|
||||
</style>
|
||||
12
.experiments/astro/src/pages/index.astro
Normal file
12
.experiments/astro/src/pages/index.astro
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
---
|
||||
import Page from '@layouts/Page.astro';
|
||||
---
|
||||
|
||||
<Page>
|
||||
<header class="hero">
|
||||
<div class="container">
|
||||
<h1>who am i</h1>
|
||||
<p>abdullah tarawneh is a power user. a problem solver. a thinker.</p>
|
||||
</div>
|
||||
</header>
|
||||
</Page>
|
||||
16
.experiments/astro/src/pages/work/index.astro
Normal file
16
.experiments/astro/src/pages/work/index.astro
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
import Skeleton from '@layouts/Skeleton.astro';
|
||||
---
|
||||
|
||||
<Skeleton
|
||||
title="Work"
|
||||
description="Things I've done."
|
||||
>
|
||||
<main class="work">
|
||||
<header class="hero">
|
||||
<div class="container">
|
||||
<h1 class="">things i've done</h1>
|
||||
</div>
|
||||
</header>
|
||||
</main>
|
||||
</Skeleton>
|
||||
461
.experiments/astro/src/pages/work/mastodon/index.astro
Normal file
461
.experiments/astro/src/pages/work/mastodon/index.astro
Normal file
|
|
@ -0,0 +1,461 @@
|
|||
---
|
||||
import Page from '@layouts/Page.astro';
|
||||
import Avatar from '@components/Avatar.astro';
|
||||
|
||||
const title = "Mastodon documentation"
|
||||
const summary = "I reorganized and rewrote the docs for an open-source project with millions of users."
|
||||
---
|
||||
|
||||
<Page
|
||||
title={title}
|
||||
description={summary}
|
||||
>
|
||||
<header class="page-header section">
|
||||
<div class="container">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 216.4144 232.00976">
|
||||
<path fill="#fff" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
|
||||
<path fill="#3088d4" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/>
|
||||
</svg>
|
||||
<h1 class="title">I reorganized and rewrote the docs for an open-source project with millions of users.
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<section class="section" id="about">
|
||||
<div class="container">
|
||||
<h2 class="title">About the client</h2>
|
||||
<p><a href="https://joinmastodon.org" target="_blank">Mastodon</a> is a free and libre open-source software
|
||||
project that aims to let anyone easily host their own Twitter-like social media website. Started in 2016,
|
||||
the project has since grown due to various migrations, usually spurred by the failures and mistakes of the
|
||||
dominant, centralized social platforms.</p>
|
||||
<p>I have been using Mastodon since November 2016 -- you can <a href="https://mastodon.social/@trwnh"
|
||||
target="_blank">view my profile at mastodon.social/@trwnh</a> if you would like -- and I have grown to
|
||||
quite enjoy my experience there over the years. It reminds me a lot of the early days of Twitter... before
|
||||
<a href="/blog/twitter-not-social" target="_blank">they gave up on being a social network</a>, anyway.</p>
|
||||
<p>One of the things I love most about the culture on there is that it's very much focused on people rather
|
||||
than content or engagement. This significantly lowers social friction and makes everyone more or less
|
||||
approachable. So approachable, in fact, that I could casually reply to the creator and founder of Mastodon
|
||||
and get this gig out of nowhere:</p>
|
||||
|
||||
<div class="conversation">
|
||||
<!--
|
||||
<iframe src="https://mastodon.social/@Gargron/102640868158739158/embed" class="mastodon-embed"
|
||||
style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
|
||||
<script src="https://mastodon.social/embed.js" async="async"></script>
|
||||
|
||||
<iframe src="https://mastodon.social/@trwnh/102640952580526770/embed" class="mastodon-embed"
|
||||
style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
|
||||
<script src="https://mastodon.social/embed.js" async="async"></script>
|
||||
|
||||
<iframe src="https://mastodon.social/@Gargron/102641022258942590/embed" class="mastodon-embed"
|
||||
style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
|
||||
<script src="https://mastodon.social/embed.js" async="async"></script>
|
||||
-->
|
||||
|
||||
<Avatar name="trwnh"/>
|
||||
|
||||
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;">
|
||||
<a target="_blank" href="https://mastodon.social/@Gargron" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
|
||||
<div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
|
||||
<Avatar name="gargron"/>
|
||||
</div>
|
||||
<div style="line-height: 1.5">
|
||||
<div style="font-weight: 500;">Eugen</div>
|
||||
<div style="color: #d9e1e8">@Gargron@mastodon.social</div>
|
||||
</div>
|
||||
</a>
|
||||
<div style="font-size: 19px; line-height: 24px;">
|
||||
<p style="margin-bottom: 25px;">
|
||||
I really want the Mastodon documentation to have a good structure rather than just all information thrown together in a pile. I'm not sure how though.
|
||||
</p>
|
||||
<a target="_blank" href="https://mastodon.social/@Gargron/102640868158739158" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;">August 18, 2019, 7:42 PM</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;">
|
||||
<a target="_blank" href="https://mastodon.social/@trwnh" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
|
||||
<div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
|
||||
<Avatar name="trwnh"/>
|
||||
</div>
|
||||
<div style="line-height: 1.5">
|
||||
<div style="font-weight: 500;">infinite love ⴳ</div>
|
||||
<div style="color: #d9e1e8">@trwnh@mastodon.social</div>
|
||||
</div>
|
||||
</a>
|
||||
<div style="font-size: 19px; line-height: 24px;">
|
||||
<p style="margin-bottom: 25px;">
|
||||
<a style="color: #d9e1e8" href="https://mastodon.social/@Gargron">@Gargron</a> i'd be willing to take a stab at it, having just cleaned up a lot of docs for pixelfed. it's still incomplete but it's much less messy than it used to be. i would need to sit down and try to map it out with you first, though.
|
||||
</p>
|
||||
<a target="_blank" href="https://mastodon.social/@trwnh/102640952580526770" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;">August 18, 2019, 8:04 PM</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff;">
|
||||
<a target="_blank" href="https://mastodon.social/@Gargron" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
|
||||
<div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
|
||||
<Avatar name="gargron"/>
|
||||
</div>
|
||||
<div style="line-height: 1.5">
|
||||
<div style="font-weight: 500;">Eugen</div>
|
||||
<div style="color: #d9e1e8">@Gargron@mastodon.social</div>
|
||||
</div>
|
||||
</a>
|
||||
<div style="font-size: 19px; line-height: 24px;">
|
||||
<p style="margin-bottom: 25px;">
|
||||
<a style="color: #d9e1e8" href="https://mastodon.social/@trwnh">@trwnh</a> Okay, let's do it. Paid, of course.
|
||||
</p>
|
||||
<a target="_blank" href="https://mastodon.social/@Gargron/102641022258942590" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;">August 18, 2019, 8:21 PM</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
<p>So... yeah, that's how this all happened.</p>
|
||||
</div>
|
||||
</section>
|
||||
<!--
|
||||
<section class="section" id="overview">
|
||||
<div class="container">
|
||||
<h2 class="title">So, what did all this entail?</h2>
|
||||
<section id="ia">
|
||||
<h3 class="subtitle">Information Architecture</h3>
|
||||
<p></p>
|
||||
</section>
|
||||
<section id="writing">
|
||||
<h3 class="subtitle">Documentation Writing</h3>
|
||||
<p></p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
<section class="section" id="process">
|
||||
<div class="container">
|
||||
<h2 class="title">Let me show you what I did.</h2>
|
||||
<section id="user">
|
||||
<h3 class="subtitle">A brand new user guide</h3>
|
||||
<div class="structure">
|
||||
<div class="old card">
|
||||
<h4 class="card__head">User guide</h4>
|
||||
<ul class="card__body">
|
||||
<li>Basics</li>
|
||||
<li>Decentralization</li>
|
||||
<li>Privacy</li>
|
||||
<li>Moderation</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>Many of the pages in the old user guide did not actually deal with teaching people how to use Mastodon,
|
||||
so the content within them was reworked into a more general landing page that explained the benefits of
|
||||
Mastodon. This new landing page explains the basics of microblogging and federation, before moving into
|
||||
the practical implications that these decisions have for user freedom, privacy, and safety. Select
|
||||
quotations were included from previously published promotional material on the Mastodon blog.</p>
|
||||
|
||||
<div class="structure">
|
||||
<div class="new card">
|
||||
<h4 class="card__head">What is Mastodon?</h4>
|
||||
<ul class="card__body">
|
||||
<li>What is a microblog?</li>
|
||||
<li>What is federation?</li>
|
||||
<li>What is ActivityPub?</li>
|
||||
<li>Practical implications</li>
|
||||
<ul>
|
||||
<li>Choice of server provider and policy</li>
|
||||
<li>Funding and monetization</li>
|
||||
<li>Interoperability between different software</li>
|
||||
<li>Free/libre software</li>
|
||||
</ul>
|
||||
<li>Choose your path</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>After this, an entirely new user guide was outlined from scratch, covering the user life cycle from start
|
||||
to end (or new beginning).</p>
|
||||
|
||||
<div class="structure">
|
||||
<div class="new card">
|
||||
<h4 class="card__head">Using Mastodon</h4>
|
||||
<ul class="card__body">
|
||||
<li>Signing up for a new account</li>
|
||||
<li>Setting up your profile</li>
|
||||
<li>Posting toots</li>
|
||||
<li>Using the network features</li>
|
||||
<li>Dealing with unwanted content</li>
|
||||
<li>Promoting yourself and others</li>
|
||||
<li>Set your preferences</li>
|
||||
<li>More settings</li>
|
||||
<li>Using Mastodon externally</li>
|
||||
<li>Moving or leaving accounts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
With the information architecture phase done, writing the user guide was a straightforward task.
|
||||
Explanations of each feature and setting were added to the appropriate pages, as well as screenshots
|
||||
demonstrating proper usage. Tip boxes are included throughout in order to highlight important points.
|
||||
</p>
|
||||
|
||||
</section>
|
||||
<section id="admin">
|
||||
<h3 class="subtitle">A more expressive admin guide</h3>
|
||||
<div class="structure">
|
||||
<div class="old card">
|
||||
<h4 class="card__head">Admin guide</h4>
|
||||
<ul class="card__body">
|
||||
<li>Installation</li>
|
||||
<li>Configuration</li>
|
||||
<li>Post-installation steps</li>
|
||||
<li>Scaling up</li>
|
||||
<li>Optional features</li>
|
||||
<li>Upgrading to a new release</li>
|
||||
<li>Migrating servers</li>
|
||||
<li>Troubleshooting</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="new card">
|
||||
<h4 class="card__head">Running Mastodon</h4>
|
||||
<ul class="card__body">
|
||||
<li>Preparing your machine</li>
|
||||
<li>Installing from source</li>
|
||||
<li>Configuring your environment</li>
|
||||
<li>Installing optional features</li>
|
||||
<li>Setting up your new instance</li>
|
||||
<li>Using the admin CLI</li>
|
||||
<li>Upgrading to a new release</li>
|
||||
<li>Backing up your server</li>
|
||||
<li>Migrating to a new machine</li>
|
||||
<li>Scaling up your server</li>
|
||||
<li>Moderation actions</li>
|
||||
<li>Troubleshooting errors</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>This section was mostly straightened out already, but could still use some improvements. A
|
||||
pre-installation page was split out from the old installation page. Backup instructions were moved out of
|
||||
"Optional features" and into a dedicated page. Pages were added for moderation and CLI usage.</p>
|
||||
</section>
|
||||
<section id="dev">
|
||||
<h3 class="subtitle">Giving developers more complete documentation</h3>
|
||||
<div class="structure">
|
||||
<div class="old card">
|
||||
<h4 class="card__head">Development guide</h4>
|
||||
<ul class="card__body">
|
||||
<li>Overview</li>
|
||||
<li>ActivityPub compliance</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>The old "overview" page contained a mixture of information about setting up a dev environment, libraries
|
||||
used, code structure, and useful commands to run for testing.</p>
|
||||
<p>The first step in cleaning this up was to split this page into multiple discrete pages, each with its own
|
||||
purpose. As "development" is a vague term, two new sections were created to replace it: one for client
|
||||
development (merged with API), and one for server development. The old "overview" pages were nested under
|
||||
the server development section, as they dealt primarily with server development.</p>
|
||||
<p>Next, "ActivityPub compliance" was moved into a dedicated section for spec compliance, and pages were
|
||||
created for documenting how various significant specifications were used and implemented within Mastodon.
|
||||
</p>
|
||||
<div class="structure">
|
||||
<div class="new card">
|
||||
<h4 class="card__head">Contributing to Mastodon</h4>
|
||||
<ul class="card__body">
|
||||
<li>Technical overview</li>
|
||||
<li>Setting up a dev environment</li>
|
||||
<li>Code structure</li>
|
||||
<li>Routes</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="new card">
|
||||
<h4 class="card__head">Spec compliance</h4>
|
||||
<ul class="card__body">
|
||||
<li>ActivityPub</li>
|
||||
<li>WebFinger</li>
|
||||
<li>Security</li>
|
||||
<li>Microformats</li>
|
||||
<li>OAuth</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
While the basics of ActivityPub federation were already written, the format of the old document simply
|
||||
pointed toward the server-to-server spec, as well as HTTP Signatures and Linked Data Signatures (with no
|
||||
real explanation beyond that). Therefore, I rewrote this page into multiple separate pages, each
|
||||
detailing the spec in question. The "ActivityPub" page now covers status federation and profile
|
||||
federation, the properties and types used in each, HTML payload sanitization, namespacing, and extensions
|
||||
(with sample payloads). "WebFinger" explains what, why, and how to use WebFinger for actor URI
|
||||
resolution. "Security" explains HTTP and LD signatures. "Microformats" explains the use of Microformats
|
||||
2.0 and how they may be parsed, and "OAuth" covers the endpoints and flows implemented within Mastodon
|
||||
for obtaining a token.
|
||||
</p>
|
||||
</section>
|
||||
<section id="api">
|
||||
<h3 class="subtitle">Helping client apps use the API</h3>
|
||||
<div class="structure">
|
||||
<div class="old card">
|
||||
<h4 class="card__head">API Overview</h4>
|
||||
<ul class="card__body">
|
||||
<li>Guidelines</li>
|
||||
<li>Libraries</li>
|
||||
<li>Authentication</li>
|
||||
<li>Permissions</li>
|
||||
<li>Entities</li>
|
||||
<li>Parameters</li>
|
||||
<li>Streaming API</li>
|
||||
<li>Web Push API</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="old card">
|
||||
<h4 class="card__head">REST API</h4>
|
||||
<ul class="card__body">
|
||||
<li>Accounts</li>
|
||||
<li>Apps</li>
|
||||
<li>...</li>
|
||||
<li>Timelines</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>This was the majority of the work. Mastodon's REST API documentation was really messy, and it showed.
|
||||
Finding something generally entailed flipping back and forth between multiple pages and searching within
|
||||
them, and each page was very long.</p>
|
||||
<p>The first step was to promote methods and entities into their own sections. The "Entities" page was split
|
||||
into multiple pages, one per entity, and alphabetized. Tables were converted into headings, to allow for
|
||||
providing more information about each field.</p>
|
||||
<p>Methods were grouped by namespace rather than by feature-set, and with one level of nesting depending on
|
||||
whether the methods within pertained to accounts, statuses, timelines, notifications, etc. The pages for
|
||||
the Streaming and Web Push APIs were moved out of the overview section and into the methods section.</p>
|
||||
<p>Finally, a new section was created for a client development guide. The guide would cover the basics of
|
||||
REST API, how to make requests, how responses are structured, and authentication/authorization.</p>
|
||||
<div class="structure new">
|
||||
<div class="new card">
|
||||
<h4 class="card__head">Developing Mastodon Apps</h4>
|
||||
<ul class="card__body">
|
||||
<li>Getting started with the API</li>
|
||||
<li>Playing with public data</li>
|
||||
<li>Obtaining client app access</li>
|
||||
<li>Logging in with an account</li>
|
||||
<li>Guidelines and best practices</li>
|
||||
<li>Libraries and implementations</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="new card">
|
||||
<h4 class="card__head">REST API</h4>
|
||||
<ul class="card__body">
|
||||
<li>OAuth Scopes</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="new card methods">
|
||||
<h4 class="card__head">API Methods</h4>
|
||||
<ul class="card__body">
|
||||
<li>apps</li>
|
||||
<ul>
|
||||
<li>oauth</li>
|
||||
</ul>
|
||||
<li>accounts</li>
|
||||
<ul>
|
||||
<li>bookmarks</li>
|
||||
<li>favourites</li>
|
||||
<li>mutes</li>
|
||||
<li>...</li>
|
||||
</ul>
|
||||
<li>statuses</li>
|
||||
<ul>
|
||||
<li>media</li>
|
||||
<li>polls</li>
|
||||
<li>scheduled_statuses</li>
|
||||
</ul>
|
||||
<li>timelines</li>
|
||||
<ul>
|
||||
<li>conversations</li>
|
||||
<li>lists</li>
|
||||
<li>markers</li>
|
||||
<li>streaming</li>
|
||||
</ul>
|
||||
<li>notifications</li>
|
||||
<ul>
|
||||
<li>push</li>
|
||||
</ul>
|
||||
<li>search</li>
|
||||
<li>instance</li>
|
||||
<ul>
|
||||
<li>trends</li>
|
||||
<li>directory</li>
|
||||
<li>custom_emoji</li>
|
||||
</ul>
|
||||
<li>admin</li>
|
||||
<li>proofs</li>
|
||||
<li>oembed</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="new card entities">
|
||||
<h4 class="card__head">API Entities</h4>
|
||||
<ul class="card__body">
|
||||
<li>Account</li>
|
||||
<li>Activity</li>
|
||||
<li>Admin::Account</li>
|
||||
<li>Admin::Report</li>
|
||||
<li>...</li>
|
||||
<li>Status</li>
|
||||
<li>Tag</li>
|
||||
<li>Token</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>Writing this section taught me a lot about the basics of REST APIs, understanding HTTP requests and
|
||||
responses, providing parameters, and how OAuth works -- all information that I included in the client
|
||||
development guide.</p>
|
||||
<p>While documenting the REST API, I had to consult the Ruby on Rails routing config file extensively, so I
|
||||
took it as an opportunity to write a page about how routes work and how to read the routes file.</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="outcomes">
|
||||
<div class="container">
|
||||
<h2 class="title">The results were very much appreciated.</h2>
|
||||
<blockquote class="praise">
|
||||
bless you for being here to work on the docs btw it's a big relief
|
||||
</blockquote>
|
||||
<div class="attribution">
|
||||
<Avatar name="gargron"/>
|
||||
<cite><em>Eugen "Gargron" Rochko</em><br>Mastodon founder<br>& lead developer</cite>
|
||||
</div>
|
||||
<section class="benefit one">
|
||||
<h3 class="subtitle">There was much less missing information.</h3>
|
||||
<p>During the information architecture phase, a new skeleton was created as a proposed alternative structure.
|
||||
This process made the existing gaps in the old structure more obvious, and therefore those gaps could be
|
||||
filled during the technical writing phase.</p>
|
||||
</section>
|
||||
<section class="benefit two">
|
||||
<h3 class="subtitle">It was also easier to make additions in an appropriate place.</h3>
|
||||
<p>For example, the following pages were added after completion:</p>
|
||||
<ul>
|
||||
<li>"Rate limits" was added under "REST API", describing how to deal with rate limits on requests made to
|
||||
the REST API.</li>
|
||||
<li>"Bug bounties and responsible disclosure" was added under "Contributing to Mastodon", describing where
|
||||
serious issues should be reported if found.</li>
|
||||
<li>"Running your own server" was added under "Using Mastodon", describing the reasons why a user might want
|
||||
to run their own server and linking to the "Running Mastodon" section.</li>
|
||||
</ul>
|
||||
<p>The clear structure left in place by my information architecture work meant that it was almost immediately
|
||||
clear where to add these pages.</p>
|
||||
</section>
|
||||
<section class="benefit three">
|
||||
<h3 class="subtitle">The quality and formatting of the docs was vastly improved.</h3>
|
||||
<p>Methods now include the HTTP verb, endpoint, description, return type, OAuth scope, version history, request
|
||||
parameters, and sample response code and payload.</p>
|
||||
<p>Entities now include example payloads, as well as each attribute and its description, type, and version
|
||||
history.</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="separator">
|
||||
<section class="section" id="cta">
|
||||
<div class="container">
|
||||
<h2 class="title">Maybe you'd appreciate me doing something similar for you?</h2>
|
||||
<img src="/images/cover/mastodocs.jpg" alt="Mastodon documentation landing page" width=1280 height=720>
|
||||
<div class="buttons">
|
||||
<a href="https://docs.joinmastodon.org" class="demo secondary button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width=16><path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/></svg>Check out the live
|
||||
version</a>
|
||||
<a href="mailto:a@trwnh.com" class="email primary button"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <g transform="matrix(1 0 0 -1 30.373 1252.3)"> <path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor"/> </g> </svg>Email me a proposal</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Page>
|
||||
11
.experiments/astro/tsconfig.json
Normal file
11
.experiments/astro/tsconfig.json
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"extends": "astro/tsconfigs/base",
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@layouts/*": ["src/layouts/*"],
|
||||
"@components/*": ["src/components/*"],
|
||||
"@assets/*": ["src/assets/*"]
|
||||
}
|
||||
}
|
||||
}
|
||||
13
.experiments/sveltekit/.eslintignore
Normal file
13
.experiments/sveltekit/.eslintignore
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
30
.experiments/sveltekit/.eslintrc.cjs
Normal file
30
.experiments/sveltekit/.eslintrc.cjs
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:svelte/recommended',
|
||||
'prettier'
|
||||
],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['@typescript-eslint'],
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020,
|
||||
extraFileExtensions: ['.svelte']
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
parser: 'svelte-eslint-parser',
|
||||
parserOptions: {
|
||||
parser: '@typescript-eslint/parser'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
10
.experiments/sveltekit/.gitignore
vendored
Normal file
10
.experiments/sveltekit/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
2
.experiments/sveltekit/.npmrc
Normal file
2
.experiments/sveltekit/.npmrc
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
engine-strict=true
|
||||
resolution-mode=highest
|
||||
13
.experiments/sveltekit/.prettierignore
Normal file
13
.experiments/sveltekit/.prettierignore
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
9
.experiments/sveltekit/.prettierrc
Normal file
9
.experiments/sveltekit/.prettierrc
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"pluginSearchDirs": ["."],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
38
.experiments/sveltekit/README.md
Normal file
38
.experiments/sveltekit/README.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
# create-svelte
|
||||
|
||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
|
||||
|
||||
## Creating a project
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm create svelte@latest
|
||||
|
||||
# create a new project in my-app
|
||||
npm create svelte@latest my-app
|
||||
```
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
## Building
|
||||
|
||||
To create a production version of your app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
4949
.experiments/sveltekit/package-lock.json
generated
Normal file
4949
.experiments/sveltekit/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
32
.experiments/sveltekit/package.json
Normal file
32
.experiments/sveltekit/package.json
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
{
|
||||
"name": "sveltekit",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^2.0.0",
|
||||
"@sveltejs/kit": "^1.5.0",
|
||||
"@typescript-eslint/eslint-plugin": "^5.45.0",
|
||||
"@typescript-eslint/parser": "^5.45.0",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-svelte": "^2.26.0",
|
||||
"prettier": "^2.8.0",
|
||||
"prettier-plugin-svelte": "^2.8.1",
|
||||
"sass": "^1.63.4",
|
||||
"svelte": "^3.54.0",
|
||||
"svelte-check": "^3.0.1",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^4.3.0"
|
||||
},
|
||||
"type": "module"
|
||||
}
|
||||
12
.experiments/sveltekit/src/app.d.ts
vendored
Normal file
12
.experiments/sveltekit/src/app.d.ts
vendored
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface Platform {}
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
12
.experiments/sveltekit/src/app.html
Normal file
12
.experiments/sveltekit/src/app.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
%sveltekit.body%
|
||||
</body>
|
||||
</html>
|
||||
80
.experiments/sveltekit/src/routes/+layout.svelte
Normal file
80
.experiments/sveltekit/src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<header class="site-header">
|
||||
<a href="/"
|
||||
><img src="/favicon.png" width="16" height="16" alt="icon" class="site-masthead__icon" /></a
|
||||
>
|
||||
<span class="site-masthead__title">Abdullah Tarawneh</span>
|
||||
</header>
|
||||
<nav class="site-nav">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/" class="site-nav__link">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="site-nav__link__icon"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-5.5-2.5a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zM10 12a5.99 5.99 0 00-4.793 2.39A6.483 6.483 0 0010 16.5a6.483 6.483 0 004.793-2.11A5.99 5.99 0 0010 12z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
<span class="text">Me</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/work" class="site-nav__link">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="site-nav__link__icon"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6 3.75A2.75 2.75 0 018.75 1h2.5A2.75 2.75 0 0114 3.75v.443c.572.055 1.14.122 1.706.2C17.053 4.582 18 5.75 18 7.07v3.469c0 1.126-.694 2.191-1.83 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921C2.694 12.73 2 11.665 2 10.539V7.07c0-1.321.947-2.489 2.294-2.676A41.047 41.047 0 016 4.193V3.75zm6.5 0v.325a41.622 41.622 0 00-5 0V3.75c0-.69.56-1.25 1.25-1.25h2.5c.69 0 1.25.56 1.25 1.25zM10 10a1 1 0 00-1 1v.01a1 1 0 001 1h.01a1 1 0 001-1V11a1 1 0 00-1-1H10z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
<path
|
||||
d="M3 15.055v-.684c.126.053.255.1.39.142 2.092.642 4.313.987 6.61.987 2.297 0 4.518-.345 6.61-.987.135-.041.264-.089.39-.142v.684c0 1.347-.985 2.53-2.363 2.686a41.454 41.454 0 01-9.274 0C3.985 17.585 3 16.402 3 15.055z"
|
||||
/>
|
||||
</svg>
|
||||
<span>Work</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/code" class="site-nav__link">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="site-nav__link__icon"
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M6.28 5.22a.75.75 0 010 1.06L2.56 10l3.72 3.72a.75.75 0 01-1.06 1.06L.97 10.53a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0zm7.44 0a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L17.44 10l-3.72-3.72a.75.75 0 010-1.06zM11.377 2.011a.75.75 0 01.612.867l-2.5 14.5a.75.75 0 01-1.478-.255l2.5-14.5a.75.75 0 01.866-.612z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span>Code</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<slot />
|
||||
<footer class="site-footer">
|
||||
</footer>
|
||||
|
||||
<style global>
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
14
.experiments/sveltekit/src/routes/+page.svelte
Normal file
14
.experiments/sveltekit/src/routes/+page.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<main>
|
||||
<h1>Abdullah Tarawneh</h1>
|
||||
<aside><p>(from abdullahtarawneh.com, the free website)</p></aside>
|
||||
<p><span class="subject">Abdullah Tarawneh</span>, known more commonly online as <span class="subject">a</span> or <span class="subject">trwnh</span>, is a Jordanian-American technologist, .</p>
|
||||
<h2>Notable work</h2>
|
||||
<h3>Mastodon documentation</h3>
|
||||
<p>In late 2019, they were contracted to <a href="/work/mastodon">revamp and rewrite the documentation</a> for the Mastodon project.</p>
|
||||
</main>
|
||||
|
||||
<style global>
|
||||
.subject {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
574
.experiments/sveltekit/src/routes/work/mastodon/+page.svelte
Normal file
574
.experiments/sveltekit/src/routes/work/mastodon/+page.svelte
Normal file
|
|
@ -0,0 +1,574 @@
|
|||
<main>
|
||||
<header class="page-header section">
|
||||
<div class="container">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="64"
|
||||
height="64"
|
||||
viewBox="0 0 216.4144 232.00976"
|
||||
>
|
||||
<path
|
||||
fill="#3088d4"
|
||||
d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"
|
||||
/>
|
||||
<path
|
||||
fill="#fff"
|
||||
d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"
|
||||
/>
|
||||
</svg>
|
||||
<h1 class="title">
|
||||
I reorganized and rewrote the docs for an open-source project with millions of users.
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<section class="section" id="about">
|
||||
<div class="container">
|
||||
<h2 class="title">About the client</h2>
|
||||
<p>
|
||||
<a href="https://joinmastodon.org" target="_blank">Mastodon</a> is a free and libre open-source
|
||||
software project that aims to let anyone easily host their own Twitter-like social media website.
|
||||
Started in 2016, the project has since grown due to various migrations, usually spurred by the
|
||||
failures and mistakes of the dominant, centralized social platforms.
|
||||
</p>
|
||||
<p>
|
||||
I have been using Mastodon since November 2016 -- you can <a
|
||||
href="https://mastodon.social/@trwnh"
|
||||
target="_blank">view my profile at mastodon.social/@trwnh</a
|
||||
>
|
||||
if you would like -- and I have grown to quite enjoy my experience there over the years. It
|
||||
reminds me a lot of the early days of Twitter... before
|
||||
<a href="/blog/twitter-not-social" target="_blank">they gave up on being a social network</a
|
||||
>, anyway.
|
||||
</p>
|
||||
<p>
|
||||
One of the things I love most about the culture on there is that it's very much focused on
|
||||
people rather than content or engagement. This significantly lowers social friction and
|
||||
makes everyone more or less approachable. So approachable, in fact, that I could casually
|
||||
reply to the creator and founder of Mastodon and get this gig out of nowhere:
|
||||
</p>
|
||||
|
||||
<div class="conversation">
|
||||
<!--
|
||||
<iframe src="https://mastodon.social/@Gargron/102640868158739158/embed" class="mastodon-embed"
|
||||
style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
|
||||
<script src="https://mastodon.social/embed.js" async="async"></script>
|
||||
|
||||
<iframe src="https://mastodon.social/@trwnh/102640952580526770/embed" class="mastodon-embed"
|
||||
style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
|
||||
<script src="https://mastodon.social/embed.js" async="async"></script>
|
||||
|
||||
<iframe src="https://mastodon.social/@Gargron/102641022258942590/embed" class="mastodon-embed"
|
||||
style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
|
||||
<script src="https://mastodon.social/embed.js" async="async"></script>
|
||||
-->
|
||||
|
||||
<article
|
||||
style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;"
|
||||
>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://mastodon.social/@Gargron"
|
||||
style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;"
|
||||
>
|
||||
<div
|
||||
style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;"
|
||||
>
|
||||
<!-- gargron -->
|
||||
</div>
|
||||
<div style="line-height: 1.5">
|
||||
<div style="font-weight: 500;">Eugen</div>
|
||||
<div style="color: #d9e1e8">@Gargron@mastodon.social</div>
|
||||
</div>
|
||||
</a>
|
||||
<div style="font-size: 19px; line-height: 24px;">
|
||||
<p style="margin-bottom: 25px;">
|
||||
I really want the Mastodon documentation to have a good structure rather than just all
|
||||
information thrown together in a pile. I'm not sure how though.
|
||||
</p>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://mastodon.social/@Gargron/102640868158739158"
|
||||
style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;"
|
||||
>August 18, 2019, 7:42 PM</a
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;"
|
||||
>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://mastodon.social/@trwnh"
|
||||
style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;"
|
||||
>
|
||||
<div
|
||||
style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;"
|
||||
>
|
||||
<!-- trwnh -->
|
||||
</div>
|
||||
<div style="line-height: 1.5">
|
||||
<div style="font-weight: 500;">infinite love ⴳ</div>
|
||||
<div style="color: #d9e1e8">@trwnh@mastodon.social</div>
|
||||
</div>
|
||||
</a>
|
||||
<div style="font-size: 19px; line-height: 24px;">
|
||||
<p style="margin-bottom: 25px;">
|
||||
<a style="color: #d9e1e8" href="https://mastodon.social/@Gargron">@Gargron</a> i'd be willing
|
||||
to take a stab at it, having just cleaned up a lot of docs for pixelfed. it's still incomplete
|
||||
but it's much less messy than it used to be. i would need to sit down and try to map it
|
||||
out with you first, though.
|
||||
</p>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://mastodon.social/@trwnh/102640952580526770"
|
||||
style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;"
|
||||
>August 18, 2019, 8:04 PM</a
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article
|
||||
style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff;"
|
||||
>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://mastodon.social/@Gargron"
|
||||
style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;"
|
||||
>
|
||||
<div
|
||||
style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;"
|
||||
>
|
||||
<!-- gargron -->
|
||||
</div>
|
||||
<div style="line-height: 1.5">
|
||||
<div style="font-weight: 500;">Eugen</div>
|
||||
<div style="color: #d9e1e8">@Gargron@mastodon.social</div>
|
||||
</div>
|
||||
</a>
|
||||
<div style="font-size: 19px; line-height: 24px;">
|
||||
<p style="margin-bottom: 25px;">
|
||||
<a style="color: #d9e1e8" href="https://mastodon.social/@trwnh">@trwnh</a> Okay, let's
|
||||
do it. Paid, of course.
|
||||
</p>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://mastodon.social/@Gargron/102641022258942590"
|
||||
style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;"
|
||||
>August 18, 2019, 8:21 PM</a
|
||||
>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<p>So... yeah, that's how this all happened.</p>
|
||||
</div>
|
||||
</section>
|
||||
<!--
|
||||
<section class="section" id="overview">
|
||||
<div class="container">
|
||||
<h2 class="title">So, what did all this entail?</h2>
|
||||
<section id="ia">
|
||||
<h3 class="subtitle">Information Architecture</h3>
|
||||
<p></p>
|
||||
</section>
|
||||
<section id="writing">
|
||||
<h3 class="subtitle">Documentation Writing</h3>
|
||||
<p></p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
-->
|
||||
<section class="section" id="process">
|
||||
<div class="container">
|
||||
<h2 class="title">Let me show you what I did.</h2>
|
||||
<section id="user">
|
||||
<h3 class="subtitle">A brand new user guide</h3>
|
||||
<div class="structure">
|
||||
<div class="old card">
|
||||
<h4 class="card__head">User guide</h4>
|
||||
<ul class="card__body">
|
||||
<li>Basics</li>
|
||||
<li>Decentralization</li>
|
||||
<li>Privacy</li>
|
||||
<li>Moderation</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Many of the pages in the old user guide did not actually deal with teaching people how to
|
||||
use Mastodon, so the content within them was reworked into a more general landing page
|
||||
that explained the benefits of Mastodon. This new landing page explains the basics of
|
||||
microblogging and federation, before moving into the practical implications that these
|
||||
decisions have for user freedom, privacy, and safety. Select quotations were included from
|
||||
previously published promotional material on the Mastodon blog.
|
||||
</p>
|
||||
|
||||
<div class="structure">
|
||||
<div class="new card">
|
||||
<h4 class="card__head">What is Mastodon?</h4>
|
||||
<ul class="card__body">
|
||||
<li>What is a microblog?</li>
|
||||
<li>What is federation?</li>
|
||||
<li>What is ActivityPub?</li>
|
||||
<li>Practical implications</li>
|
||||
<ul>
|
||||
<li>Choice of server provider and policy</li>
|
||||
<li>Funding and monetization</li>
|
||||
<li>Interoperability between different software</li>
|
||||
<li>Free/libre software</li>
|
||||
</ul>
|
||||
<li>Choose your path</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
After this, an entirely new user guide was outlined from scratch, covering the user life
|
||||
cycle from start to end (or new beginning).
|
||||
</p>
|
||||
|
||||
<div class="structure">
|
||||
<div class="new card">
|
||||
<h4 class="card__head">Using Mastodon</h4>
|
||||
<ul class="card__body">
|
||||
<li>Signing up for a new account</li>
|
||||
<li>Setting up your profile</li>
|
||||
<li>Posting toots</li>
|
||||
<li>Using the network features</li>
|
||||
<li>Dealing with unwanted content</li>
|
||||
<li>Promoting yourself and others</li>
|
||||
<li>Set your preferences</li>
|
||||
<li>More settings</li>
|
||||
<li>Using Mastodon externally</li>
|
||||
<li>Moving or leaving accounts</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
With the information architecture phase done, writing the user guide was a straightforward
|
||||
task. Explanations of each feature and setting were added to the appropriate pages, as
|
||||
well as screenshots demonstrating proper usage. Tip boxes are included throughout in order
|
||||
to highlight important points.
|
||||
</p>
|
||||
</section>
|
||||
<section id="admin">
|
||||
<h3 class="subtitle">A more expressive admin guide</h3>
|
||||
<div class="structure">
|
||||
<div class="old card">
|
||||
<h4 class="card__head">Admin guide</h4>
|
||||
<ul class="card__body">
|
||||
<li>Installation</li>
|
||||
<li>Configuration</li>
|
||||
<li>Post-installation steps</li>
|
||||
<li>Scaling up</li>
|
||||
<li>Optional features</li>
|
||||
<li>Upgrading to a new release</li>
|
||||
<li>Migrating servers</li>
|
||||
<li>Troubleshooting</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="new card">
|
||||
<h4 class="card__head">Running Mastodon</h4>
|
||||
<ul class="card__body">
|
||||
<li>Preparing your machine</li>
|
||||
<li>Installing from source</li>
|
||||
<li>Configuring your environment</li>
|
||||
<li>Installing optional features</li>
|
||||
<li>Setting up your new instance</li>
|
||||
<li>Using the admin CLI</li>
|
||||
<li>Upgrading to a new release</li>
|
||||
<li>Backing up your server</li>
|
||||
<li>Migrating to a new machine</li>
|
||||
<li>Scaling up your server</li>
|
||||
<li>Moderation actions</li>
|
||||
<li>Troubleshooting errors</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
This section was mostly straightened out already, but could still use some improvements. A
|
||||
pre-installation page was split out from the old installation page. Backup instructions
|
||||
were moved out of "Optional features" and into a dedicated page. Pages were added for
|
||||
moderation and CLI usage.
|
||||
</p>
|
||||
</section>
|
||||
<section id="dev">
|
||||
<h3 class="subtitle">Giving developers more complete documentation</h3>
|
||||
<div class="structure">
|
||||
<div class="old card">
|
||||
<h4 class="card__head">Development guide</h4>
|
||||
<ul class="card__body">
|
||||
<li>Overview</li>
|
||||
<li>ActivityPub compliance</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
The old "overview" page contained a mixture of information about setting up a dev
|
||||
environment, libraries used, code structure, and useful commands to run for testing.
|
||||
</p>
|
||||
<p>
|
||||
The first step in cleaning this up was to split this page into multiple discrete pages,
|
||||
each with its own purpose. As "development" is a vague term, two new sections were created
|
||||
to replace it: one for client development (merged with API), and one for server
|
||||
development. The old "overview" pages were nested under the server development section, as
|
||||
they dealt primarily with server development.
|
||||
</p>
|
||||
<p>
|
||||
Next, "ActivityPub compliance" was moved into a dedicated section for spec compliance, and
|
||||
pages were created for documenting how various significant specifications were used and
|
||||
implemented within Mastodon.
|
||||
</p>
|
||||
<div class="structure">
|
||||
<div class="new card">
|
||||
<h4 class="card__head">Contributing to Mastodon</h4>
|
||||
<ul class="card__body">
|
||||
<li>Technical overview</li>
|
||||
<li>Setting up a dev environment</li>
|
||||
<li>Code structure</li>
|
||||
<li>Routes</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="new card">
|
||||
<h4 class="card__head">Spec compliance</h4>
|
||||
<ul class="card__body">
|
||||
<li>ActivityPub</li>
|
||||
<li>WebFinger</li>
|
||||
<li>Security</li>
|
||||
<li>Microformats</li>
|
||||
<li>OAuth</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
While the basics of ActivityPub federation were already written, the format of the old
|
||||
document simply pointed toward the server-to-server spec, as well as HTTP Signatures and
|
||||
Linked Data Signatures (with no real explanation beyond that). Therefore, I rewrote this
|
||||
page into multiple separate pages, each detailing the spec in question. The "ActivityPub"
|
||||
page now covers status federation and profile federation, the properties and types used in
|
||||
each, HTML payload sanitization, namespacing, and extensions (with sample payloads).
|
||||
"WebFinger" explains what, why, and how to use WebFinger for actor URI resolution.
|
||||
"Security" explains HTTP and LD signatures. "Microformats" explains the use of
|
||||
Microformats 2.0 and how they may be parsed, and "OAuth" covers the endpoints and flows
|
||||
implemented within Mastodon for obtaining a token.
|
||||
</p>
|
||||
</section>
|
||||
<section id="api">
|
||||
<h3 class="subtitle">Helping client apps use the API</h3>
|
||||
<div class="structure">
|
||||
<div class="old card">
|
||||
<h4 class="card__head">API Overview</h4>
|
||||
<ul class="card__body">
|
||||
<li>Guidelines</li>
|
||||
<li>Libraries</li>
|
||||
<li>Authentication</li>
|
||||
<li>Permissions</li>
|
||||
<li>Entities</li>
|
||||
<li>Parameters</li>
|
||||
<li>Streaming API</li>
|
||||
<li>Web Push API</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="old card">
|
||||
<h4 class="card__head">REST API</h4>
|
||||
<ul class="card__body">
|
||||
<li>Accounts</li>
|
||||
<li>Apps</li>
|
||||
<li>...</li>
|
||||
<li>Timelines</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
This was the majority of the work. Mastodon's REST API documentation was really messy, and it showed. Finding something generally entailed flipping back and forth between multiple pages and searching within them, and each page was very long.
|
||||
</p>
|
||||
<p>
|
||||
The first step was to promote methods and entities into their own sections. The "Entities" page was split into multiple pages, one per entity, and alphabetized. Tables were converted into headings, to allow for providing more information about each field.
|
||||
</p>
|
||||
<p>
|
||||
Methods were grouped by namespace rather than by feature-set, and with one level of nesting depending on whether the methods within pertained to accounts, statuses, timelines, notifications, etc. The pages for the Streaming and Web Push APIs were moved out of the overview section and into the methods section.
|
||||
</p>
|
||||
<p>
|
||||
Finally, a new section was created for a client development guide. The guide would cover the basics of REST API, how to make requests, how responses are structured, and authentication/authorization.
|
||||
</p>
|
||||
<div class="structure new">
|
||||
<div class="new card">
|
||||
<h4 class="card__head">Developing Mastodon Apps</h4>
|
||||
<ul class="card__body">
|
||||
<li>Getting started with the API</li>
|
||||
<li>Playing with public data</li>
|
||||
<li>Obtaining client app access</li>
|
||||
<li>Logging in with an account</li>
|
||||
<li>Guidelines and best practices</li>
|
||||
<li>Libraries and implementations</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="new card">
|
||||
<h4 class="card__head">REST API</h4>
|
||||
<ul class="card__body">
|
||||
<li>OAuth Scopes</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="new card methods">
|
||||
<h4 class="card__head">API Methods</h4>
|
||||
<ul class="card__body">
|
||||
<li>apps</li>
|
||||
<ul>
|
||||
<li>oauth</li>
|
||||
</ul>
|
||||
<li>accounts</li>
|
||||
<ul>
|
||||
<li>bookmarks</li>
|
||||
<li>favourites</li>
|
||||
<li>mutes</li>
|
||||
<li>...</li>
|
||||
</ul>
|
||||
<li>statuses</li>
|
||||
<ul>
|
||||
<li>media</li>
|
||||
<li>polls</li>
|
||||
<li>scheduled_statuses</li>
|
||||
</ul>
|
||||
<li>timelines</li>
|
||||
<ul>
|
||||
<li>conversations</li>
|
||||
<li>lists</li>
|
||||
<li>markers</li>
|
||||
<li>streaming</li>
|
||||
</ul>
|
||||
<li>notifications</li>
|
||||
<ul>
|
||||
<li>push</li>
|
||||
</ul>
|
||||
<li>search</li>
|
||||
<li>instance</li>
|
||||
<ul>
|
||||
<li>trends</li>
|
||||
<li>directory</li>
|
||||
<li>custom_emoji</li>
|
||||
</ul>
|
||||
<li>admin</li>
|
||||
<li>proofs</li>
|
||||
<li>oembed</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="new card entities">
|
||||
<h4 class="card__head">API Entities</h4>
|
||||
<ul class="card__body">
|
||||
<li>Account</li>
|
||||
<li>Activity</li>
|
||||
<li>Admin::Account</li>
|
||||
<li>Admin::Report</li>
|
||||
<li>...</li>
|
||||
<li>Status</li>
|
||||
<li>Tag</li>
|
||||
<li>Token</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p>
|
||||
Writing this section taught me a lot about the basics of REST APIs, understanding HTTP requests and responses, providing parameters, and how OAuth works -- all information that I included in the client development guide.
|
||||
</p>
|
||||
<p>
|
||||
While documenting the REST API, I had to consult the Ruby on Rails routing config file extensively, so I took it as an opportunity to write a page about how routes work and how to read the routes file.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="outcomes">
|
||||
<div class="container">
|
||||
<h2 class="title">The results were very much appreciated.</h2>
|
||||
<blockquote class="praise">
|
||||
bless you for being here to work on the docs btw it's a big relief
|
||||
</blockquote>
|
||||
<div class="attribution">
|
||||
<!-- gargron -->
|
||||
<cite><em>Eugen "Gargron" Rochko</em><br />Mastodon founder<br />& lead developer</cite>
|
||||
</div>
|
||||
<section class="benefit one">
|
||||
<h3 class="subtitle">There was much less missing information.</h3>
|
||||
<p>
|
||||
During the information architecture phase, a new skeleton was created as a proposed
|
||||
alternative structure. This process made the existing gaps in the old structure more
|
||||
obvious, and therefore those gaps could be filled during the technical writing phase.
|
||||
</p>
|
||||
</section>
|
||||
<section class="benefit two">
|
||||
<h3 class="subtitle">It was also easier to make additions in an appropriate place.</h3>
|
||||
<p>For example, the following pages were added after completion:</p>
|
||||
<ul>
|
||||
<li>
|
||||
"Rate limits" was added under "REST API", describing how to deal with rate limits on
|
||||
requests made to the REST API.
|
||||
</li>
|
||||
<li>
|
||||
"Bug bounties and responsible disclosure" was added under "Contributing to Mastodon",
|
||||
describing where serious issues should be reported if found.
|
||||
</li>
|
||||
<li>
|
||||
"Running your own server" was added under "Using Mastodon", describing the reasons why a
|
||||
user might want to run their own server and linking to the "Running Mastodon" section.
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
The clear structure left in place by my information architecture work meant that it was
|
||||
almost immediately clear where to add these pages.
|
||||
</p>
|
||||
</section>
|
||||
<section class="benefit three">
|
||||
<h3 class="subtitle">The quality and formatting of the docs was vastly improved.</h3>
|
||||
<p>
|
||||
Methods now include the HTTP verb, endpoint, description, return type, OAuth scope,
|
||||
version history, request parameters, and sample response code and payload.
|
||||
</p>
|
||||
<p>
|
||||
Entities now include example payloads, as well as each attribute and its description,
|
||||
type, and version history.
|
||||
</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<hr class="separator" />
|
||||
<section class="section" id="cta">
|
||||
<div class="container">
|
||||
<h2 class="title">Maybe you'd appreciate me doing something similar for you?</h2>
|
||||
<img
|
||||
src="/images/cover/mastodocs.jpg"
|
||||
alt="Mastodon documentation landing page"
|
||||
width="1280"
|
||||
height="720"
|
||||
/>
|
||||
<div class="buttons">
|
||||
<a href="https://docs.joinmastodon.org" class="demo secondary button"
|
||||
><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width="16"
|
||||
><path
|
||||
fill="currentColor"
|
||||
d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"
|
||||
/></svg
|
||||
>Check out the live version</a
|
||||
>
|
||||
<a href="mailto:a@trwnh.com" class="email primary button"
|
||||
><svg
|
||||
version="1.1"
|
||||
viewBox="0 -256 1850 1850"
|
||||
width="16"
|
||||
height="16"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
>
|
||||
<g transform="matrix(1 0 0 -1 30.373 1252.3)">
|
||||
<path
|
||||
d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</g>
|
||||
</svg>Email me a proposal</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
BIN
.experiments/sveltekit/static/favicon.png
Normal file
BIN
.experiments/sveltekit/static/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
18
.experiments/sveltekit/svelte.config.js
Normal file
18
.experiments/sveltekit/svelte.config.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import adapter from '@sveltejs/adapter-auto';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: preprocess(),
|
||||
|
||||
kit: {
|
||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
17
.experiments/sveltekit/tsconfig.json
Normal file
17
.experiments/sveltekit/tsconfig.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true
|
||||
}
|
||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
6
.experiments/sveltekit/vite.config.ts
Normal file
6
.experiments/sveltekit/vite.config.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit()]
|
||||
});
|
||||
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
[submodule "themes/basis"]
|
||||
path = themes/basis
|
||||
url = https://github.com/trwnh/hugo-theme-basis
|
||||
5
content/_index.html
Normal file
5
content/_index.html
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
+++
|
||||
title = "Root"
|
||||
summary = "Abdullah Tarawneh is an information architect, designer, developer, photographer, and all-around creative, especially for the web."
|
||||
tags = ["abdullah", "tarawneh", "birmingham", "hoover", "alabama", "design", "designer", "web", "developer", "consultant", "creative", "freelance", "freelancer", "photography", "photographer"]
|
||||
+++
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
title: "Root"
|
||||
summary: "Abdullah Tarawneh is an information architect, designer, developer, photographer, and all-around creative, especially for the web."
|
||||
tags: ["abdullah", "tarawneh", "birmingham", "hoover", "alabama", "design", "designer", "web", "developer", "consultant", "creative", "freelance", "freelancer", "photography", "photographer"]
|
||||
---
|
||||
|
|
@ -1,5 +1,10 @@
|
|||
---
|
||||
title: "Code written"
|
||||
summary: "My personal projects and contributions to open source and free software."
|
||||
tags: ["abdullah tarawneh", "coding", "code", "open source", "free software", "github", "pull request", "dev", "development", "project", "projects"]
|
||||
---
|
||||
+++
|
||||
title = "Code written"
|
||||
summary = "My personal projects and contributions to open source and free software."
|
||||
tags = ["abdullah tarawneh", "coding", "code", "open source", "free software", "github", "pull request", "dev", "development", "project", "projects"]
|
||||
+++
|
||||
|
||||
gitea
|
||||
: [git.trwnh.com](https://git.trwnh.com)
|
||||
github
|
||||
: [github.com/trwnh](https://github.com/trwnh)
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
---
|
||||
title: "Work"
|
||||
---
|
||||
+++
|
||||
title = "Work"
|
||||
+++
|
||||
|
||||
[resume](/resume)
|
||||
359
content/work/mastodon/style.scss
Normal file
359
content/work/mastodon/style.scss
Normal file
|
|
@ -0,0 +1,359 @@
|
|||
main {
|
||||
overflow: hidden;
|
||||
background: #16191f;
|
||||
color: #9baec8;
|
||||
.page-header {
|
||||
background: #3088D4;
|
||||
color: white;
|
||||
.container {
|
||||
display: grid;
|
||||
@media (min-width: 51.75em) {
|
||||
grid-template-columns: auto 1fr;
|
||||
}
|
||||
gap: 2em;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
svg {width: 6em;height:auto;}
|
||||
}
|
||||
.title {
|
||||
line-height: 1;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
font-size: 2em;
|
||||
line-height: 1.4;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
p {
|
||||
line-height: 1.4;
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 1.4em;
|
||||
a {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.6em;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.conversation {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
margin-bottom: 1.4em;
|
||||
iframe {
|
||||
width: 80ch
|
||||
}
|
||||
}
|
||||
#about {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 1em;
|
||||
}
|
||||
.title {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: 'about';
|
||||
position: absolute;
|
||||
top: -0.6em;
|
||||
left: -0.55em;
|
||||
font-size: 3em;
|
||||
font-weight: 900;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
}
|
||||
#overview {
|
||||
.title {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: 'overview';
|
||||
position: absolute;
|
||||
top: -0.6em;
|
||||
left: -0.5em;
|
||||
font-size: 3em;
|
||||
font-weight: 900;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
}
|
||||
#process {
|
||||
.title {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: 'process';
|
||||
position: absolute;
|
||||
top: -0.6em;
|
||||
left: -0.5em;
|
||||
font-size: 3em;
|
||||
font-weight: 900;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
.subtitle {
|
||||
margin-top: 8em;
|
||||
margin-bottom: 2em;
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -1em;
|
||||
right: 0em;
|
||||
font-size: 4em;
|
||||
font-weight: 900;
|
||||
color: #3088D4;
|
||||
}
|
||||
}
|
||||
}
|
||||
#user {
|
||||
.subtitle {
|
||||
&::before {
|
||||
content: '01';
|
||||
}
|
||||
}
|
||||
.structure {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
#admin {
|
||||
.subtitle {
|
||||
&::before {
|
||||
content: '02';
|
||||
}
|
||||
}
|
||||
}
|
||||
#dev {
|
||||
.subtitle {
|
||||
&::before {
|
||||
content: '03';
|
||||
}
|
||||
}
|
||||
.old {grid-column: span 2}
|
||||
}
|
||||
#api {
|
||||
.subtitle {
|
||||
&::before {
|
||||
content: '4+5';
|
||||
}
|
||||
}
|
||||
}
|
||||
.structure {
|
||||
font-size: 1.2em;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 2em;
|
||||
display: grid;
|
||||
@media (min-width: 40em) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
&.new {
|
||||
grid-auto-flow: column;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
}
|
||||
.methods {
|
||||
grid-row: span 3;
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
gap: 1em;
|
||||
ul {
|
||||
list-style-type: number;
|
||||
}
|
||||
ul > ul {
|
||||
margin-left: 1.25em;
|
||||
}
|
||||
li {
|
||||
margin-left: 1em;
|
||||
&::marker {
|
||||
font-weight: 700;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
margin-top: 1em;
|
||||
}
|
||||
.card__head {
|
||||
position: relative;
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: -1.675em;
|
||||
right: -1em;
|
||||
font-size: 2em;
|
||||
font-weight: 900;
|
||||
background: #16191f;
|
||||
border-radius: 100em;
|
||||
padding: 0 0.5em;
|
||||
border: 0.25em solid #303643;
|
||||
background: #16191f;
|
||||
}
|
||||
}
|
||||
.old .card__head:before {
|
||||
content: 'OLD';
|
||||
color: #c89bae;
|
||||
}
|
||||
|
||||
.new .card__head:before {
|
||||
content: 'NEW';
|
||||
color: #aec89b;
|
||||
}
|
||||
.methods ul, .entities ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
}
|
||||
.card {
|
||||
background: #303643;
|
||||
color: #d9e1e8;
|
||||
padding: 2em;
|
||||
border-radius: 1em;
|
||||
&__head {
|
||||
font-weight: 700;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
&__body {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
}
|
||||
#outcomes {
|
||||
.title {
|
||||
margin-bottom: 3em;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: 'outcomes';
|
||||
position: absolute;
|
||||
top: -0.6em;
|
||||
left: -0.5em;
|
||||
font-size: 3em;
|
||||
font-weight: 900;
|
||||
opacity: 0.15;
|
||||
}
|
||||
}
|
||||
.praise {
|
||||
background: #303643;
|
||||
color: #d9e1e8;
|
||||
font-size: 1.8em;
|
||||
line-height: 1.2;
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
font-family: monospace;
|
||||
position: relative;
|
||||
&:before{
|
||||
content: '“';
|
||||
font-family: serif;
|
||||
font-size: 2em;
|
||||
position: absolute;
|
||||
top: -0.4em;
|
||||
left: -0.2em;
|
||||
}
|
||||
&:after {
|
||||
content: '”';
|
||||
font-family: serif;
|
||||
font-size: 2em;
|
||||
position: absolute;
|
||||
bottom: -0.8em;
|
||||
right: -0.2em;
|
||||
}
|
||||
}
|
||||
cite {
|
||||
margin-top: 1em;
|
||||
text-align: right;
|
||||
em {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.attribution {
|
||||
margin-bottom: 5em;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: end;
|
||||
img {
|
||||
width: auto;
|
||||
height: 3em;
|
||||
margin-right: 1em;
|
||||
border-radius: 100em;
|
||||
}
|
||||
}
|
||||
ul {
|
||||
line-height: 1.4;
|
||||
font-size: 1.2em;
|
||||
list-style-type: disc;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
li {
|
||||
margin-left: 1em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.benefit {
|
||||
position: relative;
|
||||
margin-top: 8em;
|
||||
&:before {
|
||||
position: absolute;
|
||||
font-size: 4em;
|
||||
font-weight: 700;
|
||||
top: -1.25em;
|
||||
color: #3088d4;
|
||||
}
|
||||
&.one:before {
|
||||
content: '01';
|
||||
}
|
||||
&.two:before {
|
||||
content: '02';
|
||||
}
|
||||
&.three:before {
|
||||
content: '03';
|
||||
}
|
||||
}
|
||||
}
|
||||
.separator {
|
||||
width: 10em;
|
||||
height: 0.5em;
|
||||
border-radius: 100em;
|
||||
border: none;
|
||||
background: white;
|
||||
}
|
||||
#cta {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
.title {
|
||||
text-align: center;
|
||||
max-width: 41rem;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
margin-top: 1em;
|
||||
gap: 1em;
|
||||
}
|
||||
.button {
|
||||
width: 100%;
|
||||
flex-basis: 20em;
|
||||
i {
|
||||
margin-right: 1em;
|
||||
}
|
||||
&.demo {
|
||||
background: transparent;
|
||||
border: 2px solid white;
|
||||
color: white;
|
||||
&:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
}
|
||||
&.email {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,16 @@
|
|||
baseURL = "https://abdullahtarawneh.com"
|
||||
languageCode = "en-us"
|
||||
title = "Abdullah Tarawneh"
|
||||
theme = "basis"
|
||||
enableGitInfo = true
|
||||
|
||||
[build.buildStats]
|
||||
enable = true
|
||||
|
||||
[[build.cacheBusters]]
|
||||
source = 'content/.*\.(scss)'
|
||||
target = 'style.scss'
|
||||
|
||||
[markup.goldmark.renderer]
|
||||
unsafe = true
|
||||
|
||||
|
|
@ -13,7 +21,7 @@ category = "category"
|
|||
[menu]
|
||||
|
||||
[[menu.main]]
|
||||
identifier = ""
|
||||
identifier = "home"
|
||||
pre = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width=16 height=16><path fill="currentColor" d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"/></svg>'
|
||||
name = "Home"
|
||||
url = "/"
|
||||
213
hugo_stats.json
Normal file
213
hugo_stats.json
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
{
|
||||
"htmlElements": {
|
||||
"tags": [
|
||||
"?xml",
|
||||
"a",
|
||||
"article",
|
||||
"aside",
|
||||
"base",
|
||||
"blockquote",
|
||||
"body",
|
||||
"br",
|
||||
"button",
|
||||
"cite",
|
||||
"datetime",
|
||||
"details",
|
||||
"div",
|
||||
"em",
|
||||
"figcaption",
|
||||
"figure",
|
||||
"footer",
|
||||
"g",
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"h4",
|
||||
"head",
|
||||
"header",
|
||||
"hr",
|
||||
"html",
|
||||
"img",
|
||||
"input",
|
||||
"li",
|
||||
"link",
|
||||
"main",
|
||||
"meta",
|
||||
"nav",
|
||||
"ol",
|
||||
"p",
|
||||
"path",
|
||||
"picture",
|
||||
"script",
|
||||
"section",
|
||||
"source",
|
||||
"span",
|
||||
"strong",
|
||||
"style",
|
||||
"summary",
|
||||
"svg",
|
||||
"title",
|
||||
"ul"
|
||||
],
|
||||
"classes": [
|
||||
"active",
|
||||
"after",
|
||||
"arrow",
|
||||
"attribution",
|
||||
"avatar",
|
||||
"before",
|
||||
"benefit",
|
||||
"blog",
|
||||
"blogactive",
|
||||
"breadcrumbs",
|
||||
"button",
|
||||
"buttons",
|
||||
"card",
|
||||
"card__body",
|
||||
"card__head",
|
||||
"card__text",
|
||||
"card__title",
|
||||
"code",
|
||||
"codeactive",
|
||||
"color-switcher",
|
||||
"companies",
|
||||
"container",
|
||||
"content",
|
||||
"conversation",
|
||||
"cover-image",
|
||||
"date",
|
||||
"demo",
|
||||
"desktop",
|
||||
"device-gallery",
|
||||
"email",
|
||||
"entities",
|
||||
"footer-nav",
|
||||
"hang-left",
|
||||
"has-pullquote",
|
||||
"header-nav",
|
||||
"heading",
|
||||
"heading__anchor-link",
|
||||
"heading__text",
|
||||
"home",
|
||||
"js-toggle",
|
||||
"js-toggle-screenreader-only",
|
||||
"js-toggle-thumb",
|
||||
"js-toggle-track",
|
||||
"js-toggle-track-check",
|
||||
"js-toggle-track-x",
|
||||
"js-toggle-wrapper",
|
||||
"kba-types",
|
||||
"laptop",
|
||||
"lastmod",
|
||||
"list",
|
||||
"list-item",
|
||||
"list-item__date",
|
||||
"list-item__image",
|
||||
"list-item__link",
|
||||
"list-item__summary",
|
||||
"list-item__title",
|
||||
"menu",
|
||||
"methods",
|
||||
"mobile",
|
||||
"new",
|
||||
"next",
|
||||
"old",
|
||||
"one",
|
||||
"page",
|
||||
"page-footer",
|
||||
"page-header",
|
||||
"page-summary",
|
||||
"page-title",
|
||||
"praise",
|
||||
"previous",
|
||||
"primary",
|
||||
"pswp",
|
||||
"pswp-gallery",
|
||||
"pswp__bg",
|
||||
"pswp__button",
|
||||
"pswp__button--arrow--left",
|
||||
"pswp__button--arrow--right",
|
||||
"pswp__button--close",
|
||||
"pswp__button--fs",
|
||||
"pswp__button--share",
|
||||
"pswp__button--zoom",
|
||||
"pswp__caption",
|
||||
"pswp__caption__center",
|
||||
"pswp__container",
|
||||
"pswp__counter",
|
||||
"pswp__item",
|
||||
"pswp__preloader",
|
||||
"pswp__preloader__cut",
|
||||
"pswp__preloader__donut",
|
||||
"pswp__preloader__icn",
|
||||
"pswp__scroll-wrap",
|
||||
"pswp__share-modal",
|
||||
"pswp__share-modal--hidden",
|
||||
"pswp__share-tooltip",
|
||||
"pswp__single-tap",
|
||||
"pswp__top-bar",
|
||||
"pswp__ui",
|
||||
"pswp__ui--hidden",
|
||||
"quote",
|
||||
"scroll-margin",
|
||||
"secondary",
|
||||
"section",
|
||||
"section-nav",
|
||||
"separator",
|
||||
"site-footer",
|
||||
"site-header",
|
||||
"site-masthead",
|
||||
"site-title",
|
||||
"smartphone",
|
||||
"social-nav",
|
||||
"structure",
|
||||
"subtitle",
|
||||
"text",
|
||||
"three",
|
||||
"title",
|
||||
"toc",
|
||||
"toc-title",
|
||||
"two",
|
||||
"work",
|
||||
"workactive"
|
||||
],
|
||||
"ids": [
|
||||
"TableOfContents",
|
||||
"about",
|
||||
"admin",
|
||||
"administrating-a-managed-hosting-email-server",
|
||||
"after",
|
||||
"api",
|
||||
"before",
|
||||
"being-invited-to-the-team",
|
||||
"building-and-maintaining-a-website",
|
||||
"cta",
|
||||
"design-consultancy",
|
||||
"dev",
|
||||
"go-fed",
|
||||
"hugo",
|
||||
"issue-triage",
|
||||
"kba",
|
||||
"logic",
|
||||
"mastodon",
|
||||
"outcomes",
|
||||
"overview",
|
||||
"problem-solving",
|
||||
"process",
|
||||
"quick-learning",
|
||||
"release-planning",
|
||||
"responsibilities",
|
||||
"skb",
|
||||
"the-problem",
|
||||
"the-research",
|
||||
"the-result",
|
||||
"the-solution",
|
||||
"tkb",
|
||||
"tnc",
|
||||
"top",
|
||||
"trilogy",
|
||||
"user",
|
||||
"writing-articles"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,119 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{.Site.Language.Lang }}" xml:lang="{{.Site.Language.Lang }}">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||
{{ $style := resources.Get "scss/main.scss" | toCSS | minify | fingerprint }}
|
||||
{{ $js := resources.Get "js/main.js" | minify | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" media="screen">
|
||||
<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
|
||||
{{ $icon := "images/people/avatar.png" | absURL }}
|
||||
<link rel="shortcut icon" href='{{ $icon }}' sizes="400x400">
|
||||
{{ if .IsPage }}<meta name="keywords" content='{{ delimit .Params.tags " "}}'>{{ end }}
|
||||
{{ if .IsHome }}<title>{{ .Site.Title }}</title>
|
||||
<title itemprop="name">{{ .Site.Title }}</title>
|
||||
<meta property="og:title" content="{{ .Site.Title }}" />
|
||||
<meta name="twitter:title" content="{{ .Site.Title }}" />
|
||||
<meta itemprop="name" content="{{ .Site.Title }}" />
|
||||
{{ else }}<title>{{ .Title }} | {{ .Site.Title }}</title>
|
||||
<title itemprop="name">{{ .Title }} | {{ .Site.Title }}</title>
|
||||
<meta property="og:title" content="{{ .Title }} | {{ .Site.Title }}" />
|
||||
<meta name="twitter:title" content="{{ .Title }} | {{ .Site.Title }}" />
|
||||
<meta itemprop="name" content="{{ .Title }} | {{ .Site.Title }}" />{{ end }}
|
||||
<meta name="application-name" content="{{ .Site.Title }}" />
|
||||
<meta property="og:site_name" content="{{ .Site.Title }}" />
|
||||
<meta name="description" content="{{ .Summary }}">
|
||||
<meta itemprop="description" content="{{ .Summary }}" />
|
||||
<meta property="og:description" content="{{ .Summary }}" />
|
||||
<meta name="twitter:description" content="{{ .Summary }}" />
|
||||
<base href="{{ .Permalink }}">
|
||||
<link rel="canonical" href="{{ .Permalink }}" itemprop="url" />
|
||||
<meta name="url" content="{{ .Permalink }}" />
|
||||
<meta name="twitter:url" content="{{ .Permalink }}" />
|
||||
<meta property="og:url" content="{{ .Permalink }}" />
|
||||
{{ with .Params.cover }}<meta itemprop="image" content="{{ . | absURL }}" />
|
||||
<meta property="og:image" content="{{ . | absURL }}" />
|
||||
<meta name="twitter:image" content="{{ . | absURL }}" />
|
||||
<meta name="twitter:image:src" content="{{ . | absURL }}" />{{ else }}
|
||||
<meta itemprop="image" content='{{ $icon }}' />
|
||||
<meta property="og:image" content='{{ $icon }}' />
|
||||
<meta name="twitter:image" content='{{ $icon }}' />
|
||||
<meta name="twitter:image:src" content='{{ $icon }}' />{{ end }}
|
||||
<meta property="og:updated_time" content={{ .Lastmod.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
|
||||
{{ if isset .Params "date" }}<meta property="og:type" content="article" />
|
||||
<script defer type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "Article",
|
||||
"headline": {{ .Title }},
|
||||
"author": {
|
||||
"@type": "Person",
|
||||
"name": "{{ .Params.author }}"
|
||||
},
|
||||
"datePublished": "{{ .Date.Format "2006-01-02" }}",
|
||||
"description": {{ .Summary }},
|
||||
"wordCount": {{ .WordCount }},
|
||||
"mainEntityOfPage": "True",
|
||||
"dateModified": "{{ .Lastmod.Format "2006-01-02" }}",
|
||||
"image": {
|
||||
"@type": "imageObject",
|
||||
"url": "{{ with .Params.cover }}{{ . }}{{ end }}"
|
||||
},
|
||||
"publisher": {
|
||||
"@type": "Person",
|
||||
"name": "{{ .Site.Title }}",
|
||||
"logo": {
|
||||
"@type": "imageObject",
|
||||
"url": {{ $icon }}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{{ else }}<meta property="og:type" content="website" />
|
||||
<meta name="author" content="{{ .Params.author }}" />
|
||||
<script defer type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "WebSite",
|
||||
"url": {{ .Permalink }},
|
||||
"name": "{{ .Title }}",
|
||||
"logo": {{ $icon }}
|
||||
}
|
||||
</script>{{ end }}
|
||||
<meta property="article:publisher" content="{{ .Params.author }}" />
|
||||
{{ with.Params.author }}<meta property="og:article:author" content="{{ . }}" />
|
||||
<meta property="article:author" content="{{ . }}" />
|
||||
<meta name="author" content="{{ . }}" />{{ end }}
|
||||
{{ with.Params.category }}<meta name="news_keywords" content="{{ . }}" />
|
||||
<meta property="article:section" content="{{ . }}" />{{ end }}
|
||||
<meta property="og:article:published_time" content={{ .Date.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
|
||||
<meta property="article:published_time" content={{ .Date.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
|
||||
<link rel="sitemap" type="application/xml" title="Sitemap" href="{{ .Site.BaseURL }}sitemap.xml" />
|
||||
{{ with .OutputFormats.Get "RSS" }}<link href="{{ .Permalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
|
||||
<link href="{{ .Permalink }}" rel="feed" type="application/rss+xml" title="{{ $.Site.Title }}" />{{ end }}
|
||||
<meta name="robots" content="index,follow" />
|
||||
<meta name="googlebot" content="index,follow" />
|
||||
<link rel="manifest" href="{{ .Site.BaseURL }}manifest.json" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<meta name="msapplication-TileColor" content="#ffffff" />
|
||||
<meta name="imagemode" content="force" />
|
||||
<meta name="coverage" content="Worldwide" />
|
||||
<meta name="distribution" content="Global" />
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="apple-touch-fullscreen" content="yes" />
|
||||
{{ block "head" . }}
|
||||
{{ end }}
|
||||
</head>
|
||||
<body>
|
||||
{{ partial "site-header.html" . }}
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
{{ partial "site-footer.html" .}}
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<main>
|
||||
<header class="section page-header">
|
||||
<div class="container">
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
</div>
|
||||
</header>
|
||||
<section class="section list">
|
||||
<div class="container">
|
||||
{{ range .Pages }}
|
||||
<article class="list-item">
|
||||
<a class="list-item__link" href="{{ .Permalink }}">
|
||||
{{ with .Params.cover }}
|
||||
<img class="list-item__image" src="{{.}}">
|
||||
{{end}}
|
||||
<h2 class="list-item__title">{{ .Title }}</h2>
|
||||
</a>
|
||||
<p class="list-item__summary">{{.Summary}}</p>
|
||||
<datetime class="list-item__date">{{ .Date.Format "January 2, 2006" }}</datetime>
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<main>
|
||||
<article class="page">
|
||||
<header class="section page-header">
|
||||
<div class="container">
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
<p class="page-summary">{{.Summary}}</p>
|
||||
{{ with .Params.cover }}
|
||||
<img class="page-cover" src="{{.}}">
|
||||
{{end}}
|
||||
</div>
|
||||
</header>
|
||||
<aside class="meta section">
|
||||
<div class="container">
|
||||
<datetime class="date"> {{ .Date.Format "Mon Jan 2, 2006" }} </datetime>
|
||||
<p class="wordcount"> {{.WordCount}} words</p>
|
||||
|
||||
{{ with .Params.tags }}
|
||||
<p>Keywords:</p>
|
||||
<ul class="tags">
|
||||
{{ range . }}
|
||||
<li><a href='{{"tags/" | absURL }}{{. | urlize}}'>{{.}}</a></li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ end }}
|
||||
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
</aside>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<main id="blog">
|
||||
<header class="section page-header">
|
||||
<div class="container">
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
</div>
|
||||
</header>
|
||||
<section class="section list">
|
||||
<div class="container">
|
||||
{{ range .Pages }}
|
||||
<article class="list-item">
|
||||
<a class="list-item__link" href="{{ .Permalink }}">
|
||||
{{ with .Params.cover }}
|
||||
<img class="list-item__image" src="{{.}}">
|
||||
{{end}}
|
||||
<h2 class="list-item__title">{{ .Title }}</h2>
|
||||
</a>
|
||||
<p class="list-item__summary">{{.Summary}}</p>
|
||||
<div class="list-item__meta">
|
||||
<datetime class="list-item__date">{{ .Date.Format "January 2, 2006" }}</datetime>
|
||||
<span class="list-item__wordcount">{{.WordCount}} words</span>
|
||||
{{ with .Params.tags }}
|
||||
{{ range . }}
|
||||
<a class="tag" href='{{"tags/" | absURL }}{{. | urlize}}'>{{.}}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<main id="code">
|
||||
<header class="section page-header" id="intro">
|
||||
<div class="container">
|
||||
<h1 class="tagline">i like to participate in the world of free and libre open source software.</h1>
|
||||
<div id="gitea" class="explainer">
|
||||
<div class="image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 2240 1792">
|
||||
<path fill="currentColor" d="M365.814 256.033c-80.77-.23-174.758 28.37-247.533 93.332C45.507 414.33-5.459 515.927.468 659.21c9.228 223.095 116.556 347.02 241.385 413.903 121.864 65.293 259.55 77.271 341.309 79.467 6.075 22.373 20.605 53.19 41.24 88.794 22.617 39.021 52.476 83.218 86.237 125.355 67.52 84.276 149.666 161.198 224.778 169.267h614.778c96.394-7.216 183.852-91.338 258.812-210.925 74.96-119.587 137.637-275.74 182.444-431.18 44.808-155.44 71.718-310.045 74.6-426.875 1.44-58.414-3.015-107.346-14.834-142.878-5.91-17.766-13.683-32.287-24.042-42.774-10.36-10.486-23.609-16.672-38.437-17.01l-.311-.006h-.313c-337.54 17.872-537.496 26.865-708.892 28.377V682.72l-53.502-26.574-.356-363.22c-196.715-.1-369.84-10.354-698.87-28.58l-.184-.009-.185-.002c-40.235-.43-97.974-8.164-160.312-8.342zm22.4 172.51c3.664 0 7.49 0 11.265.1 21.927 217.03 57.703 349.276 127.414 541.945-88.094-12.62-168.73-34.048-230.92-77.682-65.365-45.861-111.249-115.832-125.726-228.654-7.647-59.598 2.08-119.8 37.762-164.15 33.452-41.58 90.067-70.34 180.205-71.54zm729.623 214.068c13.174.1 26.557 3.011 39.24 9.174l63.954 31.074-45.88 93.968a57.354 57.354 0 0 0-20.566 3.315 57.354 57.354 0 0 0-34.542 73.388 57.354 57.354 0 0 0 9.503 16.703l-79.045 161.895a57.354 57.354 0 0 0-19.008 3.32 57.354 57.354 0 0 0-34.538 73.389 57.354 57.354 0 0 0 73.387 34.54 57.354 57.354 0 0 0 34.541-73.388 57.354 57.354 0 0 0-13.468-21.105l77.029-157.766a57.354 57.354 0 0 0 24.99-3.049 57.354 57.354 0 0 0 18.224-10.699c30.01 14.23 53.952 25.373 71.541 35.162 26.351 14.668 35.672 24.346 38.496 35.014 2.824 10.667-.312 30.978-15.185 66.703-11.338 27.233-28.654 62.702-51.112 108.785a57.354 57.354 0 0 0-21.47 3.308 57.354 57.354 0 0 0-34.54 73.39 57.354 57.354 0 0 0 73.388 34.539 57.354 57.354 0 0 0 34.54-73.388 57.354 57.354 0 0 0-11.722-19.289c22.242-45.59 39.623-81.153 51.765-110.32 16.026-38.496 24.462-67.304 17.119-95.043-7.345-27.74-29.958-45.76-59.774-62.355-19.75-10.992-43.966-22.274-73.47-36.23a57.354 57.354 0 0 0-3.262-22.964 57.354 57.354 0 0 0-12.43-20.025l45.172-92.515 249.678 121.316c45.096 21.911 63.76 75.857 41.848 120.954l-171.672 353.314c-21.912 45.096-75.856 63.761-120.952 41.849l-353.315-171.673c-45.096-21.912-63.76-75.855-41.848-120.952l171.672-353.316c15.75-32.413 48.046-51.172 81.712-51.023z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>I host my own code with <a href="https://git.trwnh.com">Gitea</a>. currently, i host the source code for
|
||||
some websites i've built, including this one.</p>
|
||||
</div>
|
||||
<div id="github" class="explainer">
|
||||
<div class="image">
|
||||
<svg width="16" height="16" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>i also have a <a href="https://github.com/trwnh">Github</a> account. i mainly use this account to
|
||||
contribute to open-source projects using pull requests instead of sending patch files via email.</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="section" id="projects">
|
||||
<div class="container">
|
||||
<h2 class="title"><a href="#projects">#</a>Original projects</h2>
|
||||
<section class="project-list">
|
||||
{{ range .Pages }}
|
||||
{{ if not (in .Params.tags "pull request") }}
|
||||
<a class="project {{ .Permalink | relURL | anchorize }}" href="{{ .Permalink }}">
|
||||
|
||||
<h3 class="project__title">{{ .Title }}</h3>
|
||||
|
||||
<p class="project__summary">{{.Summary}}</p>
|
||||
|
||||
{{ with .Params.cover }}
|
||||
<img width=280 class="project__image" src="{{.}}">
|
||||
{{end}}
|
||||
|
||||
<!--datetime class="project__date">{{ .Date.Format "January 2, 2006" }}</datetime-->
|
||||
<span class="project__hint">Read more</span>
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="contributions">
|
||||
<div class="container">
|
||||
<h2 class="title"><a href="#contributions">#</a>Contributions to other projects</h2>
|
||||
<section class="contribution-list">
|
||||
{{ range where .Pages ".Params.tags" "intersect" (slice "pull request") }}
|
||||
<article class="pr {{ .Permalink | relURL | anchorize }}">
|
||||
{{ partial "pr-icon" . }}
|
||||
<a class="pr__link" href="{{ .Permalink }}">
|
||||
<h3 class="pr__title">{{ .Title }}</h3>
|
||||
</a>
|
||||
<p class="pr__summary">{{.Summary}}</p>
|
||||
</article>
|
||||
{{ end }}
|
||||
<article class="commit pixelfed-docs">
|
||||
{{ partial "commit-icon" . }}
|
||||
<a href="https://github.com/pixelfed/docs/commits?author=trwnh" class="commit__link">
|
||||
<h3 class="commit__title">pixelfed/docs</h3>
|
||||
</a>
|
||||
<p class="commit__summary">59 commits</p>
|
||||
</article>
|
||||
<article class="commit pixelfed">
|
||||
{{ partial "commit-icon" . }}
|
||||
<a href="https://github.com/pixelfed/pixelfed/commits?author=trwnh" class="commit__link">
|
||||
<h3 class="commit__title">pixelfed/pixelfed</h3>
|
||||
</a>
|
||||
<p class="commit__summary">57 commits</p>
|
||||
</article>
|
||||
<article class="commit mastodon">
|
||||
{{ partial "commit-icon" . }}
|
||||
<a href="https://github.com/mastodon/mastodon/commits?author=trwnh" class="commit__link">
|
||||
<h3 class="commit__title">mastodon/mastodon</h3>
|
||||
</a>
|
||||
<p class="commit__summary">18 commits</p>
|
||||
</article>
|
||||
<article class="commit mastodocs">
|
||||
{{ partial "commit-icon" . }}
|
||||
<a href="https://github.com/mastodon/documentation/commits?author=trwnh" class="commit__link">
|
||||
<h3 class="commit__title">mastodon/documentation</h3>
|
||||
</a>
|
||||
<p class="commit__summary">13 commits</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="support">
|
||||
<div class="container">
|
||||
<h2 class="title"><a href="#support">#</a>Support me.</h2>
|
||||
<p>If you appreciate any of what I've done, please send me money. Your contributions and generosity will
|
||||
directly fund my creative efforts, which would otherwise go unpaid. The more I receive, the more time I can
|
||||
justifiably devote to continuing to do what I do.</p>
|
||||
<div id="liberapay" class="explainer">
|
||||
<div class="image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width=16 height=16><g transform="translate(-78.37-208.06)" fill="currentColor"><path d="m104.28 271.1c-3.571 0-6.373-.466-8.41-1.396-2.037-.93-3.495-2.199-4.375-3.809-.88-1.609-1.308-3.457-1.282-5.544.025-2.086.313-4.311.868-6.675l9.579-40.05 11.69-1.81-10.484 43.44c-.202.905-.314 1.735-.339 2.489-.026.754.113 1.421.415 1.999.302.579.817 1.044 1.546 1.395.729.353 1.747.579 3.055.679l-2.263 9.278"/><path d="m146.52 246.14c0 3.671-.604 7.03-1.811 10.07-1.207 3.043-2.879 5.669-5.01 7.881-2.138 2.213-4.702 3.935-7.693 5.167-2.992 1.231-6.248 1.848-9.767 1.848-1.71 0-3.42-.151-5.129-.453l-3.394 13.651h-11.162l12.52-52.19c2.01-.603 4.311-1.143 6.901-1.622 2.589-.477 5.393-.716 8.41-.716 2.815 0 5.242.428 7.278 1.282 2.037.855 3.708 2.024 5.02 3.507 1.307 1.484 2.274 3.219 2.904 5.205.627 1.987.942 4.11.942 6.373m-27.378 15.461c.854.202 1.91.302 3.167.302 1.961 0 3.746-.364 5.355-1.094 1.609-.728 2.979-1.747 4.111-3.055 1.131-1.307 2.01-2.877 2.64-4.714.628-1.835.943-3.858.943-6.071 0-2.161-.479-3.998-1.433-5.506-.956-1.508-2.615-2.263-4.978-2.263-1.61 0-3.118.151-4.525.453l-5.28 21.948"/></g></svg>
|
||||
</div>
|
||||
<p>Recurring or one-time donation via Liberapay: <a
|
||||
href="https://liberapay.com/trwnh">liberapay.com/trwnh</a></p>
|
||||
</div>
|
||||
<div id="patreon" class="explainer">
|
||||
<div class="image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" width=16 height=16>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M108.8135992 26.06720125c-26.468266 0-48.00213212 21.53066613-48.00213212 47.99733213 0 26.38653268 21.53386613 47.85426547 48.00213213 47.85426547 26.38639937 0 47.8530655-21.4677328 47.8530655-47.85426547 0-26.466666-21.46666613-47.99733213-47.85306547-47.99733213"
|
||||
/>
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M23.333335 153.93333178V26.0666679h23.46666576v127.8666639z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<p>Monthly patronage on Patreon: <a href="https://patreon.com/trwnh">patreon.com/trwnh</a></p>
|
||||
</div>
|
||||
<div id="paypal" class="explainer">
|
||||
<div class="image">
|
||||
<svg width=16 height=16 viewBox="0 0 1536 1728" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="currentColor" d="M1519 646c13 60 10 129-4 204-65 330-284 444-565 444h-44c-34 0-62 25-68 59l-4 19-55 346-2 15c-7 34-35 59-69 59H457c-28 0-46-23-42-51 18-112 35-224 53-336s36-223 54-335c3-24 19-37 43-37 40 0 80-1 131 0 72 1 155-3 236-21 108-24 206-68 287-144 73-68 122-152 155-246 15-44 27-88 35-133 2-12 5-10 12-5 55 41 86 96 98 162zm-172-282c0 82-19 160-46 236-52 151-150 259-302 315-81 29-166 41-252 42-60 1-120 0-180 0-65 0-106 32-118 96-14 76-69 430-85 530-1 7-4 10-12 10H57c-30 0-52-26-48-55L241 67c6-38 40-67 79-67h598c43 0 142 19 209 45 142 55 220 167 220 319z"/>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
<p>For direct, one-time contributions, you can use Paypal with my email address <b>a@trwnh.com</b></p>
|
||||
</div>
|
||||
<div id="cashapp" class="explainer">
|
||||
<div class="image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="app-icon" width=16 height=16 viewBox="8 8 48 48"><path d="M42.47 23.8c.5.5 1.33.5 1.8-.0l2.5-2.6c.53-.5.5-1.4-.06-1.94a19.73 19.73 0 0 0-6.72-3.84l.79-3.8c.17-.83-.45-1.61-1.28-1.61h-4.84a1.32 1.32 0 0 0-1.28 1.06l-.7 3.38c-6.44.33-11.9 3.6-11.9 10.3 0 5.8 4.51 8.29 9.28 10 4.51 1.72 6.9 2.36 6.9 4.78 0 2.49-2.38 3.95-5.9 3.95-3.2 0-6.56-1.07-9.16-3.68a1.3 1.3 0 0 0-1.84-.0l-2.7 2.7a1.36 1.36 0 0 0 .0 1.92c2.1 2.07 4.76 3.57 7.792 4.4l-.74 3.57c-.17.83.44 1.6 1.27 1.61l4.85.04a1.32 1.32 0 0 0 1.3-1.06l.7-3.39C40.28 49.07 45 44.8 45 38.57c0-5.74-4.7-8.16-10.4-10.13-3.26-1.21-6.08-2.04-6.08-4.53 0-2.42 2.63-3.38 5.27-3.38 3.36 0 6.59 1.39 8.7 3.29z" fill="currentColor"/></svg>
|
||||
</div>
|
||||
<p>You can also use Cashapp if you'd prefer: <a href="https://cash.me/$trwnh">$trwnh</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
@ -1,62 +1,11 @@
|
|||
{{ define "main" }}
|
||||
<main id="index">
|
||||
<header class="section" id="summary">
|
||||
<div class="container">
|
||||
<article class="vcard h-card">
|
||||
<div class="banner"><img src="/images/people/avatar.png" alt="me" class="photo u-photo"></div>
|
||||
<dl>
|
||||
<dt>full name</dt>
|
||||
<dd class="fn n p-name"><span class="given-name">abdullah</span> <span class="family-name">tarawneh</span></dd>
|
||||
<dt>preferred name</dt>
|
||||
<dd class="nickname p-nickname">a</dd>
|
||||
<dt>email (smtp)</dt>
|
||||
<dd><a href="mailto:a@trwnh.com" class="email u-email">a@trwnh.com</a></dd>
|
||||
<dt>chat (xmpp)</dt>
|
||||
<dd><a href="xmpp:a@trwnh.com" class="url u-impp">a@trwnh.com</a></dd>
|
||||
<dt>social (activitypub)</dt>
|
||||
<dd><a href="https://mastodon.social/@trwnh" rel="me" class="url u-url">mastodon.social/@trwnh</a></dd>
|
||||
<dt>notes</dt>
|
||||
<dd class="note p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</dd>
|
||||
</dl>
|
||||
</article>
|
||||
<div class="quotes">
|
||||
<h2 class="heading">things people have said to me</h2>
|
||||
<div class="quotes-container">
|
||||
<blockquote>
|
||||
<p>it's scary how much you know.</p>
|
||||
</blockquote>
|
||||
<blockquote style="text-align: right">
|
||||
<p>you're the first person i've met that keeps a spreadsheet of their lightbulbs.</p>
|
||||
</blockquote>
|
||||
<blockquote style="text-align: center">
|
||||
<p>VERY MUCH not garbage [...] a worthwhile human</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>honestly, i trust your judgement more than i trust my own.</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<header>
|
||||
<div class="container"></div>
|
||||
</header>
|
||||
<section class="" id="birdsounds">
|
||||
<section>
|
||||
<div class="container">
|
||||
<div class="info">
|
||||
<picture>
|
||||
<source type="image/avif" srcset="/images/logos/koken_y.avif">
|
||||
<img class="logo" src="/images/logos/koken_y.png" alt="birdsounds.media logo">
|
||||
</picture>
|
||||
<a href="https://birdsounds.media" class="">view my photos</a>
|
||||
</div>
|
||||
<picture>
|
||||
<source type="image/avif" srcset="/images/soulpunx.avif">
|
||||
<img class="photo" src="/images/soulpunx.jpg" alt="#soulpunx">
|
||||
</picture>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="updates">
|
||||
<div class="container">
|
||||
<h2 class="heading">latest updates</h2>
|
||||
<p>2022-07-04: currently working on my websites, trying to do some documentation for a personal project, and looking for work. check out the "work" tab of this site for my elevator pitch.</p>
|
||||
{{.Content}}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
{{ if .IsTranslated }}
|
||||
{{ range .Translations }}
|
||||
<a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<footer class="site-footer">
|
||||
<hr>
|
||||
<div class="container">
|
||||
<ul class="breadcrumbs">
|
||||
{{ template "breadcrumb" (dict "p1" . "p2" .) }}
|
||||
</ul>
|
||||
<a href="#top">back to top</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{{ define "breadcrumb" }}
|
||||
{{ if .p1.Parent }}
|
||||
{{ template "breadcrumb" (dict "p1" .p1.Parent "p2" .p2 ) }}
|
||||
{{ else if not .p1.IsHome }}
|
||||
{{ template "breadcrumb" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
|
||||
{{ end }}
|
||||
<li{{ if eq .p1 .p2 }} class="active"{{ end }}>
|
||||
<a href="{{ .p1.RelPermalink }}">{{ .p1.Title }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
|
||||
<script type="text/javascript">
|
||||
var sc_project=12701041;
|
||||
var sc_invisible=1;
|
||||
var sc_security="006094ec";
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="https://www.statcounter.com/counter/counter.js"
|
||||
async></script>
|
||||
<noscript><div class="statcounter"><a title="Web Analytics
|
||||
Made Easy - Statcounter" href="https://statcounter.com/"
|
||||
target="_blank"><img class="statcounter"
|
||||
src="https://c.statcounter.com/12701041/0/006094ec/1/"
|
||||
alt=""
|
||||
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
<header class="site-header">
|
||||
<div class="container">
|
||||
<a href="/" class="site-masthead">
|
||||
<img class="site-icon" width=32 src="/images/people/avatar.png">
|
||||
<p class="site-title">i'm abdullah tarawneh, creative and technical consultant.</p>
|
||||
</a>
|
||||
<nav class="site-nav">
|
||||
<ul>
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<li class='
|
||||
{{ if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
|
||||
active
|
||||
{{ end }}'>
|
||||
<a href="{{ .URL | absLangURL }}">
|
||||
{{ .Pre }}
|
||||
<span>{{ .Name }}</span>
|
||||
{{ .Post }}
|
||||
</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
</ul>
|
||||
{{ partial "i18nlist.html" . }}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
<div style="position: relative;">
|
||||
<div id="top" style="scroll-margin-top: var(--header-height);"></div>
|
||||
</div>
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
{{ define "main" }}
|
||||
<main id="work">
|
||||
<header class="section" id="intro">
|
||||
<div class="container">
|
||||
<h1 class="tagline">i can help you<br> <em>figure out the hard parts.</em></h1>
|
||||
<p class="blurb">need something done? perhaps a website, some documentation, or simply advice on a project? i'm here for you.</p>
|
||||
<a href="mailto:a@trwnh.com" class="primary button"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <g transform="matrix(1 0 0 -1 30.373 1252.3)"> <path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor"/> </g> </svg><span>email me</span></a>
|
||||
</div>
|
||||
</header>
|
||||
<section class="section" id="process">
|
||||
<div class="container">
|
||||
<h2 class="title"><a href="#process">#</a>a <strong>no-nonsense</strong> approach <br>to making things <em>make sense.</em></h2>
|
||||
<section>
|
||||
<h3 class="subtitle">
|
||||
your needs come first.
|
||||
</h3>
|
||||
<p class="blurb">we'll sit down and figure out <br>exactly what your problem is, <br>and what your requirements are.</p>
|
||||
</section>
|
||||
<section>
|
||||
<h3 class="subtitle">
|
||||
|
||||
</h3>
|
||||
<p class="blurb"></p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="praise">
|
||||
<div class="container">
|
||||
<h2 class="title"><a href="#praise">#</a>what others have said:</h2>
|
||||
<div class="testimonials">
|
||||
<div class="testimonial">
|
||||
{{ template "shortcodes/people/khalil.html" . }}
|
||||
<p class="name">Khalil Saadiq,<br>former classmate</p>
|
||||
<blockquote class="bubble">it's scary how much you know.</blockquote>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
{{ template "shortcodes/people/gargron.html" . }}
|
||||
<p class="name">Eugen Rochko,<br>Mastodon developer</p>
|
||||
<blockquote class="bubble">bless you for being here to work on the docs btw. it's a big relief.</blockquote>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
{{ template "shortcodes/people/dansup.html" . }}
|
||||
<p class="name">Daniel Supernault,<br>Pixelfed developer</p>
|
||||
<blockquote class="bubble">i don't trust anyone as much as you to shape the direction of the project.</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="interstitial">
|
||||
<div class="container">
|
||||
<h2 class="title">i bet i can make <em class="you">you</em> feel the same way.</h2>
|
||||
<p class="blurb">do you want a <strong>knowledgeable</strong> person you can <strong>trust</strong> to do the work <strong>right</strong>, as well? i'd love to add <em class="you">your</em> praise above.</p>
|
||||
<a href="mailto:a@trwnh.com" class="email button primary"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <g transform="matrix(1 0 0 -1 30.373 1252.3)"> <path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor"/> </g> </svg> Email me</a>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="timeline">
|
||||
<div class="container">
|
||||
<h2 class="title"><a href="#timeline">#</a>here's a timeline of work i've done.</h2>
|
||||
<div class="timeline">
|
||||
{{ range .Pages.ByDate }}
|
||||
<article class="timeline-item {{ .Permalink | relURL | anchorize }}">
|
||||
<h3 class="timeline-item__title">{{ .Params.position }}</h3>
|
||||
<p class="timeline-item__summary">{{.Summary}}</p>
|
||||
<span class="timeline-item__daterange">
|
||||
<datetime class="timeline-item__date">{{ .Params.start }}</datetime> – <datetime class="timeline-item__date">{{ .Params.end }}</datetime>
|
||||
</span>
|
||||
<span class="timeline-item__at">at {{ .Params.at }}</span>
|
||||
<a class="timeline-item__readmore button primary" href="{{ .Permalink }}">Read more...</a>
|
||||
</article>
|
||||
{{ end }}
|
||||
<section class="you timeline-item" id="hireme">
|
||||
<h3 class="timeline-item__title">You could be here.</h3>
|
||||
<p class="timeline-item__summary">i'm currently <strong>available</strong> for work. let's get in touch.</p>
|
||||
<span class="timeline-item__daterange">Today</span>
|
||||
<span class="timeline-item__at">at your service</span>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="cta">
|
||||
<div class="container">
|
||||
<div class="buttons">
|
||||
<a href="mailto:a@trwnh.com" class="email button primary"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <g transform="matrix(1 0 0 -1 30.373 1252.3)"> <path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor"/> </g> </svg> Email me</a>
|
||||
<a href="/resume" class="resume button secondary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width=16 height=16><path d="M528 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h480c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm0 400H303.2c.9-4.5.8 3.6.8-22.4 0-31.8-30.1-57.6-67.2-57.6-10.8 0-18.7 8-44.8 8-26.9 0-33.4-8-44.8-8-37.1 0-67.2 25.8-67.2 57.6 0 26-.2 17.9.8 22.4H48V144h480v288zm-168-80h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm0-64h112c4.4 0 8-3.6 8-8v-16c0-4.4-3.6-8-8-8H360c-4.4 0-8 3.6-8 8v16c0 4.4 3.6 8 8 8zm-168 96c35.3 0 64-28.7 64-64s-28.7-64-64-64-64 28.7-64 64 28.7 64 64 64z"/></svg> Résume (HTML)</a>
|
||||
<a href="/resume/abdullah-tarawneh_resume.pdf" class="resume button secondary"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" width=16 height=16><path d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm76.45 211.36l-96.42 95.7c-6.65 6.61-17.39 6.61-24.04 0l-96.42-95.7C73.42 337.29 80.54 320 94.82 320H160v-80c0-8.84 7.16-16 16-16h32c8.84 0 16 7.16 16 16v80h65.18c14.28 0 21.4 17.29 11.27 27.36zM377 105L279.1 7c-4.5-4.5-10.6-7-17-7H256v128h128v-6.1c0-6.3-2.5-12.4-7-16.9z"/></svg> Résume (PDF)</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
{{ end }}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
{{ define "main" }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
1
themes/basis
Submodule
1
themes/basis
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 7744c604c267341b89a213681b77c95fcc308f06
|
||||
Loading…
Reference in a new issue