From a66cf67a001e7c1e3744fdc13e8c71338db010b5 Mon Sep 17 00:00:00 2001 From: a Date: Mon, 26 Feb 2024 05:41:39 -0600 Subject: [PATCH] housekeeping and cleanup, plus new front page --- assets/scss/base/links.scss | 17 +- assets/scss/base/list.scss | 50 ----- assets/scss/base/page.scss | 152 ------------- assets/scss/base/paper.scss | 22 -- assets/scss/base/text.scss | 85 +++++++ assets/scss/base/variables.scss | 2 +- assets/scss/components/h-card.scss | 34 --- assets/scss/components/praise.scss | 1 + assets/scss/components/pullquote.scss | 4 +- assets/scss/content/index.scss | 118 ---------- assets/scss/layouts/_default/list.scss | 0 assets/scss/layouts/_default/single.scss | 0 assets/scss/layouts/index.scss | 35 +++ .../{ => layouts}/partials/breadcrumbs.scss | 2 + .../{ => layouts}/partials/site-footer.scss | 0 .../{ => layouts}/partials/site-header.scss | 3 +- assets/scss/layouts/shortcodes/figquote.scss | 27 +++ .../scss/layouts/shortcodes/hcard-full.scss | 66 ++++++ assets/scss/main.scss | 24 +- content/_index.md | 62 +++++- content/blog/_index.md | 8 +- content/blog/twitter-not-social/index.md | 2 +- content/code/_index.md | 11 +- content/design/_index.md | 10 +- content/design/motarawneh/index.md | 21 +- content/work/_index.md | 9 +- content/work/mastodon/index.html | 210 +++++++++--------- .../work/mastodon/style.scss | 16 +- .../work/trilogy/style.scss | 1 + config.toml => hugo.toml | 11 +- layouts/_default/baseof.html | 101 +-------- layouts/_default/list.html | 23 +- layouts/index.html | 76 ++----- layouts/partials/breadcrumbs.html | 20 ++ layouts/partials/name.html | 16 ++ layouts/partials/seo.html | 143 ++++++++++++ layouts/partials/site-footer.html | 43 ++-- layouts/partials/site-header.html | 10 +- layouts/shortcodes/figquote.html | 8 + layouts/shortcodes/hcard-full.html | 31 +++ layouts/work/single.html | 22 ++ 41 files changed, 757 insertions(+), 739 deletions(-) delete mode 100644 assets/scss/base/list.scss delete mode 100644 assets/scss/base/page.scss delete mode 100644 assets/scss/base/paper.scss create mode 100644 assets/scss/base/text.scss delete mode 100644 assets/scss/components/h-card.scss delete mode 100644 assets/scss/content/index.scss create mode 100644 assets/scss/layouts/_default/list.scss create mode 100644 assets/scss/layouts/_default/single.scss create mode 100644 assets/scss/layouts/index.scss rename assets/scss/{ => layouts}/partials/breadcrumbs.scss (79%) rename assets/scss/{ => layouts}/partials/site-footer.scss (100%) rename assets/scss/{ => layouts}/partials/site-header.scss (97%) create mode 100644 assets/scss/layouts/shortcodes/figquote.scss create mode 100644 assets/scss/layouts/shortcodes/hcard-full.scss rename assets/scss/content/work/mastodon.scss => content/work/mastodon/style.scss (96%) rename assets/scss/content/work/trilogy.scss => content/work/trilogy/style.scss (99%) rename config.toml => hugo.toml (69%) create mode 100644 layouts/partials/breadcrumbs.html create mode 100644 layouts/partials/name.html create mode 100644 layouts/partials/seo.html create mode 100644 layouts/shortcodes/figquote.html create mode 100644 layouts/shortcodes/hcard-full.html diff --git a/assets/scss/base/links.scss b/assets/scss/base/links.scss index 67593a3..22aa328 100644 --- a/assets/scss/base/links.scss +++ b/assets/scss/base/links.scss @@ -13,12 +13,10 @@ a { color: var(--link-visited); } &:focus { - outline: none; - background: var(--primary-accent); - color: var(--primary-accent-text); - padding: 4px; - border-radius: 2px; - text-decoration: none; + display: inline-block; + outline-offset: 0.5rem; + outline-width: 0.25rem; + border-radius: 0.125rem; } &:hover { text-decoration-thickness: 0.25em; @@ -27,4 +25,9 @@ a { &:active { } - } \ No newline at end of file +} + +*[title] { + text-decoration: underline; + text-decoration-style: dotted; +} \ No newline at end of file diff --git a/assets/scss/base/list.scss b/assets/scss/base/list.scss deleted file mode 100644 index 399da53..0000000 --- a/assets/scss/base/list.scss +++ /dev/null @@ -1,50 +0,0 @@ -.list { - .container { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); - gap: 3em; - } - .list-item { - color: inherit; - text-decoration: none; - transition: color 0.2s ease-in-out; - &__link { - display: block; - &:focus { - background: unset; - padding: unset; - @include focus-outline; - &:link { - color: var(--link-color); - } - &:visited { - color: var(--link-visited); - } - } - - &:hover { - } - - &:active { - - } - } - &__image { - width: 100%; - height: auto; - } - &__title { - font-size: 1.5em; - font-weight: 700; - margin: 1.5em 0 0.5em; - } - &__summary { - margin-bottom: 0.5em; - line-height: 1.4; - } - &__date { - display: block; - margin-bottom: 1em; - } - } -} \ No newline at end of file diff --git a/assets/scss/base/page.scss b/assets/scss/base/page.scss deleted file mode 100644 index 38937ef..0000000 --- a/assets/scss/base/page.scss +++ /dev/null @@ -1,152 +0,0 @@ -.page-title {font-size: 2.5em; font-weight: 700} -.page { - font-size: 1em; - @media (min-width: 600px) {font-size: 1.25em;} - max-width: 960px; - margin: 0 auto; - @media (min-width: 960px) { - display: grid; - grid-template-columns: minmax(45ch,65ch) 1fr; - grid-template-rows: auto auto; - grid-template-areas: - "header header" - "content meta"; - } - .section { - padding: 1em 0; - grid-area: content; - - } - .page-header { - padding: 2em 0; - grid-area: header; - } - .meta { - grid-area: meta; - } - .page-summary {margin: 1em 0;} - .page-cover {width: 100%;} - - h1,h2,h3,h4,h5,h6 { - line-height: 1.2; - margin-bottom: 1rem; - margin-top: 2rem; - font-weight: 700; - } - p { - line-height: 1.4; - margin-bottom: 1em; - } - a {word-wrap: break-word;} - h1 {font-size: 2.49em} - h2 {font-size: 2.07em} - h3 {font-size: 1.728em} - h4 {font-size: 1.44em} - h5 {font-size: 1.2em} - h6 {font-size: 1em} - - h1 {font-size: 1.8em} - h2 {font-size: 1.600em} - h3 {font-size: 1.423em} - h4 {font-size: 1.265em} - h5 {font-size: 1.125em} - h6 {font-size: 1em} - - blockquote { - font-size: 1em; - margin: 1em 0; - border-left: 0.25rem solid black; - padding-left: 0.5em; - line-height: 1.4; - } - - pre { - font-family: monospace; - background: #333; - color: white; - padding: 1em; - line-height: 1.4; - overflow-x: scroll; - margin-bottom: 1em; - } - ul {list-style: disc; margin: 1em 0;} - li {margin-bottom: 1em; line-height: 1.4; margin-left: 1em;} - ol {list-style: decimal; margin: 1em 0;} - dl {margin: 1em 0; line-height: 1.4;} - dt {font-weight: 700;} - dd {margin-left: 1em;} - em {font-style: italic} - strong {font-weight: 700} - sup { - position: relative; - font-size: 0.8em; - a {position: relative; top: -0.5em;} - } - table { - text-align: center; - thead { - font-weight: 700; - } - th, td {border: 1px solid black; padding: 0.5em;} - } - figure { - img { - width: 100%; - margin-bottom: -0.125em; - } - figcaption { - background: #212121; - color: white; - font-style: italic; - padding: 1em; - font-size: 0.8em; - line-height: 1.2; - } - margin-bottom: 1em; - } - - img { - width: 100%; - margin-bottom: 1em; - } - -} - -.tags { - display: flex; - flex-flow: row wrap; - gap: 0.25em; - li { - list-style: none; - border-radius: 4px; - margin-left: 1em; - margin-bottom: 0; - } -} - -.meta .container {height: 100%; margin-top: 0.75rem;} -article .container *:first-child {margin-top: 0;} - -#TableOfContents { - position: sticky; - top: 2rem; - @media (min-width: 960px) {top: 96px;} - max-width: max-content; - font-size: 0.75em; - margin: 2em 0; - ul {list-style: none; margin: 0;} - li {margin-bottom: 0; margin-left: 0;} - li li {margin-left: 1em;} - a { - background: unset; - text-decoration-thickness: unset; - text-underline-offset: unset; - color: inherit; - text-decoration: none; - transition: color 0.2s ease-in-out; - &:hover { - color: #0060ff; - text-decoration: underline; - } - } -} \ No newline at end of file diff --git a/assets/scss/base/paper.scss b/assets/scss/base/paper.scss deleted file mode 100644 index 6940658..0000000 --- a/assets/scss/base/paper.scss +++ /dev/null @@ -1,22 +0,0 @@ -:root { - --paper-padding: 4em; -} - -body {position: relative;} -main {background: #ddd; z-index: 1; position: relative;} -main:before { - content: ''; - position: absolute; - width: calc(var(--container-width) + 2 * var(--paper-padding)); - height: 100%; - z-index: 0; - left: calc(50% - (var(--container-width) + 2 * var(--paper-padding)) / 2); - box-shadow: 0px 0px 6px rgba(0,0,0,0.2); - background: white; -} -footer {z-index: 1;} -main > * {position: relative; z-index: 1} - -.site-header {box-shadow: 0px 2px 6px rgba(0,0,0,0.2);} -.site-nav {box-shadow: 0px -2px 6px rgba(0,0,0,0.2);} -.site-footer {box-shadow: 0px -2px 3px rgba(0,0,0,0.2);} \ No newline at end of file diff --git a/assets/scss/base/text.scss b/assets/scss/base/text.scss new file mode 100644 index 0000000..9b01557 --- /dev/null +++ b/assets/scss/base/text.scss @@ -0,0 +1,85 @@ +/* typography */ +html { + --line-height: 1.6; +} +h1 { + font-size: 2.49em; + font-weight: bold; +} +h2 { + font-size: 2.07em; + font-weight: bold; +} +h3 { + font-size: 1.73em; + font-weight: bold; +} +h4 { + font-size: 1.44em; + font-weight: bold; +} +h5 { + font-size: 1.2em; + font-weight: bold; +} +h6 { + font-size: 1em; + font-weight: bold; +} +p { + line-height: var(--line-height); +} +h1, h2, h3, h4, h5, h6, p { + margin-block: 1rem; +} +strong { + font-weight: bold; +} +em { + font-style: italic; +} + +/* lists */ +ol { + list-style: decimal; +} +ul { + list-style: disc; +} +ol, ul { + margin-inline-start: 1em; +} +li { + margin-block: 0.5em; + line-height: var(--line-height); +} + +/* content */ +blockquote { + border-inline-start: 0.25em solid black; + padding-inline-start: 0.5em; + display: block; + margin-block: 1em; + line-height: 1.6; + p { + + } +} +img { + max-width: 100%; +} +figure { + blockquote { + + } + img { + display: block; + width: 100%; + } + figcaption { + padding: 0.5em; + font-style: italic; + line-height: 2; + } +} + diff --git a/assets/scss/base/variables.scss b/assets/scss/base/variables.scss index 2320337..6480a88 100644 --- a/assets/scss/base/variables.scss +++ b/assets/scss/base/variables.scss @@ -1,4 +1,4 @@ -$container-width: 960px; +$container-width: 60em; $nav-height: 4em; $header-height: 4em; diff --git a/assets/scss/components/h-card.scss b/assets/scss/components/h-card.scss deleted file mode 100644 index c003cd2..0000000 --- a/assets/scss/components/h-card.scss +++ /dev/null @@ -1,34 +0,0 @@ -.h-card { - font-family: monospace; - overflow: hidden; - display: flex; - flex-flow: column; - width: 100%; - max-width: 18rem; - margin: 2em auto; - border-radius: 1em; - @include box-shadow; - .banner { - background-image: url('/images/sunset.jpg'); - background-size: cover; - background-position: center; - display: flex; - justify-content: center; - align-items: center; - width: 100%; - aspect-ratio: 2; - position: relative; - } - img { - border-radius: 100em; - width: 25%; - aspect-ratio: 1; - background: rgba(0,0,0,0.5); - } - dl { - dt, dd {width: max-content;} - padding: 1rem; - dt {font-weight: 700; margin-bottom: 0.25em} - dd {margin-bottom: 0.5em; max-width: 100%;} - } -} \ No newline at end of file diff --git a/assets/scss/components/praise.scss b/assets/scss/components/praise.scss index abcb689..7dd27b3 100644 --- a/assets/scss/components/praise.scss +++ b/assets/scss/components/praise.scss @@ -34,6 +34,7 @@ background: var(--color); color: white; padding: 0.5em; + border: 0; border-radius: 0.5em; position: relative; grid-column: span 2; diff --git a/assets/scss/components/pullquote.scss b/assets/scss/components/pullquote.scss index 9cfa309..4163be6 100644 --- a/assets/scss/components/pullquote.scss +++ b/assets/scss/components/pullquote.scss @@ -1,14 +1,14 @@ @mixin pullquote { content: attr(data-pullquote); font-size: 1em; - line-height: 1.2; + line-height: 1.4; display: flex; font-family: serif; color: #555; padding: 1em; font-size: 1.25em; } -.has-pullquote{ +.has-pullquote { &.before:before { @include pullquote; margin-bottom: 1rem; diff --git a/assets/scss/content/index.scss b/assets/scss/content/index.scss deleted file mode 100644 index dba62c7..0000000 --- a/assets/scss/content/index.scss +++ /dev/null @@ -1,118 +0,0 @@ -#index { - .title { - font-size: 1.5em; - font-weight: 700; - line-height: 1.2; - &:before { - font-size: 3em; - font-weight: 700; - color: #ddd; - position: absolute; - top: -0.5em; - left: -0.3em; - z-index: -1; - } - position: relative; - margin-bottom: 2em; - } - .subtitle { - font-size: 1.5em; - line-height: 1.2; - margin-bottom: 0.5em; - margin-top: 2em; - } - .quotes { - - padding: 2rem; - font-size: 1.25rem; - display: flex; - flex-flow: column; - justify-content: space-between; - line-height: 1.5; - gap: 2em; - font-family: monospace; - .heading { - font-weight: 700; - font-family: initial; - } - } - .quotes-container { - color: #555; - display: flex; - flex-flow: column; - justify-content: space-around; - flex-grow: 1; - gap: 3rem; - } - - #summary .container { - display: grid; - grid-template-columns: 1fr; - @media (min-width: 40rem) { - grid-template-columns: 18rem 1fr; - } - } - - #birdsounds { - background: black; - color: white; - text-align: center; - .container { - display: flex; - flex-flow: column; - align-items: center; - } - .photo { - max-height: 100vh; - height: 100%; - max-width: 100%; - object-fit: contain; - object-position: center bottom; - } - .info { - display: flex; - flex-flow: column; - align-items: center; - } - .logo { - margin: 2rem 0; - } - @media (min-width: 40rem) { - .photo { - height: 20rem; - } - .container { - flex-flow: row; - justify-content: space-between; - } - .info { - flex-grow: 1; - } - } - a { - color: white; - position: relative; - &:after { - content: '→'; - position: absolute; - right: -1em; - color: white; - } - } - } - #updates { - line-height: 1.5; - font-size: 1.25rem; - .heading { - font-size: 1.5em; - font-weight: 700; - margin-bottom: 1em; - } - p + p { - margin: 1em 0; - } - p { - max-width: 55ch; - } - } -} \ No newline at end of file diff --git a/assets/scss/layouts/_default/list.scss b/assets/scss/layouts/_default/list.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/layouts/_default/single.scss b/assets/scss/layouts/_default/single.scss new file mode 100644 index 0000000..e69de29 diff --git a/assets/scss/layouts/index.scss b/assets/scss/layouts/index.scss new file mode 100644 index 0000000..69892ff --- /dev/null +++ b/assets/scss/layouts/index.scss @@ -0,0 +1,35 @@ +.index { + + figure.quote { + border: 0; + blockquote { + font-size: 1.25em; + margin-block-start: 0.5rem; + } + } + + #wiki { + max-width: 120em; + margin-inline: auto; + h1 { + margin-bottom: 0.25em; + font-family: serif; + border-bottom: 1px solid currentColor; + padding-bottom: 1rem; + } + h2 { + font-weight: normal; + border-bottom: 1px solid currentColor; + padding-bottom: 1rem; + font-family: serif; + } + #TableOfContents { + display: contents; + &::before { + content: "Contents"; + font-weight: bold; + } + } + } + +} \ No newline at end of file diff --git a/assets/scss/partials/breadcrumbs.scss b/assets/scss/layouts/partials/breadcrumbs.scss similarity index 79% rename from assets/scss/partials/breadcrumbs.scss rename to assets/scss/layouts/partials/breadcrumbs.scss index 1ab6686..8dacea8 100644 --- a/assets/scss/partials/breadcrumbs.scss +++ b/assets/scss/layouts/partials/breadcrumbs.scss @@ -1,4 +1,6 @@ .breadcrumbs { + list-style: none; + margin: 0; display: flex; flex-flow: row wrap; gap: 0.5em; diff --git a/assets/scss/partials/site-footer.scss b/assets/scss/layouts/partials/site-footer.scss similarity index 100% rename from assets/scss/partials/site-footer.scss rename to assets/scss/layouts/partials/site-footer.scss diff --git a/assets/scss/partials/site-header.scss b/assets/scss/layouts/partials/site-header.scss similarity index 97% rename from assets/scss/partials/site-header.scss rename to assets/scss/layouts/partials/site-header.scss index 777994e..b2fec61 100644 --- a/assets/scss/partials/site-header.scss +++ b/assets/scss/layouts/partials/site-header.scss @@ -67,12 +67,14 @@ color: var(--ui-text-muted); z-index: 2; ul { + list-style: none; height: var(--nav-height); max-width: $container-width; margin: 0 auto; display: flex; justify-content: space-around; li { + margin-block: 0; flex: 1; border-bottom: 4px solid var(--ui-background-track); &.active { @@ -86,7 +88,6 @@ align-items: center; justify-content: center; height: 100%; - span {padding: 0.25em;} svg { width: 1em; height: 1em; diff --git a/assets/scss/layouts/shortcodes/figquote.scss b/assets/scss/layouts/shortcodes/figquote.scss new file mode 100644 index 0000000..574030f --- /dev/null +++ b/assets/scss/layouts/shortcodes/figquote.scss @@ -0,0 +1,27 @@ +figure.quote { + border: 1px solid currentColor; + padding: 1rem; + margin-block: 1rem; + font-family: serif; + position: relative; + blockquote { + border: 0; + margin-block-end: 0; + &:before { + content: '“'; + position: absolute; + inset-block-start: 0.25rem; + inset-inline-start: 0.5rem; + font-size: 2rem; + } + } + figcaption { + font-size: 0.8em; + cite { + &:before { + content: '— '; + + } + } + } +} \ No newline at end of file diff --git a/assets/scss/layouts/shortcodes/hcard-full.scss b/assets/scss/layouts/shortcodes/hcard-full.scss new file mode 100644 index 0000000..bb4c950 --- /dev/null +++ b/assets/scss/layouts/shortcodes/hcard-full.scss @@ -0,0 +1,66 @@ +.h-card.full { + height: min-content; + background: #eee; + h2 { + text-align: center; + font-size: 1em; + margin: 0em; + padding: 1rem; + } + header { + display: grid; + place-items: center; + aspect-ratio: 2; + background-image: url('/images/sunset.jpg'); + background-size: cover; + background-position: center; + img { + border-radius: 100em; + background-color: rgba(255,255,255,0.4); + padding: 10px; + aspect-ratio: 1; + height: unset; + width: 25%; + min-width: 120px; + } + } + .info { + text-align: center; + p { + margin: 0; + } + .p-name { + font-weight: bold; + text-align: center; + font-size: 1.5em; + } + .u-uid { + text-decoration: none; + font-family: monospace; + color: inherit; + font-size: 1rem; + } + .p-note { + margin-bottom: 1em; + } + } + .metadata { + padding-block-end: 1rem; + display: grid; + grid-template-columns: 1fr 2fr; + gap: 1em; + max-width: 520px; + margin: 0 auto; + .field { + display: contents; + } + dt { + font-weight: bold; + place-self: center end; + text-align: right; + } + dd { + place-self: center start; + } + } +} \ No newline at end of file diff --git a/assets/scss/main.scss b/assets/scss/main.scss index 4e52196..df44849 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -2,33 +2,33 @@ @import "base/variables.scss"; @import "base/mixins.scss"; @import "base/sections.scss"; -@import "base/page.scss"; -@import "base/list.scss"; +@import "base/text.scss"; @import "base/links.scss"; -//@import "base/paper.scss"; @import "libraries/photoswipe.scss"; @import "components/pullquote.scss"; @import "components/button.scss"; -@import "components/h-card.scss"; @import "components/intro.scss"; @import "components/praise.scss"; @import "components/devices.scss"; @import "components/terminal.scss"; -@import "content/index.scss"; +@import "layouts/partials/site-header.scss"; +@import "layouts/partials/site-footer.scss"; +@import "layouts/partials/breadcrumbs.scss"; + +@import "layouts/shortcodes/figquote.scss"; +@import "layouts/shortcodes/hcard-full.scss"; + +@import "layouts/_default/single.scss"; +@import "layouts/_default/list.scss"; + +@import "layouts/index.scss"; @import "content/work.scss"; - @import "content/work/trilogy.scss"; - @import "content/work/mastodon.scss"; - @import "content/work/go-fed.scss"; @import "content/code.scss"; @import "content/blog.scss"; -@import "partials/site-header.scss"; -@import "partials/site-footer.scss"; -@import "partials/breadcrumbs.scss"; - @media (min-width: 2500px) { main { overflow: hidden; diff --git a/content/_index.md b/content/_index.md index 0a8d0b6..7895ede 100644 --- a/content/_index.md +++ b/content/_index.md @@ -1,5 +1,57 @@ ---- -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"] ---- \ No newline at end of file ++++ +title = "Abdullah Tarawneh" +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", "freelance", "freelancer", "photography", "photographer", "technical writer", "creative", "consultant"] ++++ + +## h-card + +{{< hcard-full >}} + +## Professional work + +Main page: [Work](/work) + +Abdullah Tarawneh is currently available for work. + +### Mastodon documentation + +Main page: [Mastodon](/work/mastodon) + +In August 2019, Abdullah Tarawneh offered their services to completely revamp the documentation for Mastodon, while also writing or rewriting significant portions of it. From the beginning, they developed an information architecture based on the various user personas that would be reading the documentation -- end users, administrators, contributors, client developers, and protocol implementers. Abdullah Tarawneh developed each persona into a section with its own narrative journey. Following this, they wrote out the missing parts of the documentation. + +Abdullah Tarawneh was contracted again in late 2022 to help update the content of the documentation for the monumentous v4.0 update of Mastodon. + +### Senior Technical Writer / Product Knowledge Curator at Trilogy + +Main page: [Trilogy](/work/trilogy) + +From May 2021 through December 2021, Abdullah Tarawneh was contracted as a Product Knowledge Curator for Trilogy. In this role, they managed the knowledge bases of numerous products all at once. Being responsible for several products under the banner of Central Support meant that they had to quickly and rapidly learn new products with limited information. They were tasked with analyzing customer support tickets one by one, in order to document the problems and solutions faced by actual customers. The resulting analysis would be used to write a clear and concise solution article, and the troubleshooting steps involved in reaching that solution would be compiled across several tickets into a troubleshooting article that would aid agents in disambiguating similar issues. Based on these articles, Abdullah Tarawneh created training units within a learning management system consisting of either a test or a task based on each article/ticket pair. + +## Free software contributions + +Main page: [Code](/code) + +Abdullah Tarawneh has been active in the world of open source and free software since at least 2017. + +### Involvement with the fediverse + +As a power user, Abdullah Tarawneh quickly got involved in discussions on the GitHub issue tracker for Mastodon, Pixelfed, and other fediverse projects. + +## Quotes about the subject + +{{< figquote cite="a former classmate" >}} +It's scary how much you know. +{{< /figquote >}} + +{{< figquote cite="an electrician" >}} +You're the first person I've met that keeps a spreadsheet of their lightbulbs. +{{< /figquote >}} + +{{< figquote cite="a social networking acquaintance" >}} +VERY MUCH not garbage [...] a worthwhile human +{{< /figquote >}} + +{{< figquote cite="a professional colleague" >}} +Honestly, I trust your judgement more than I trust my own. +{{< /figquote >}} \ No newline at end of file diff --git a/content/blog/_index.md b/content/blog/_index.md index ee163da..5f2f698 100644 --- a/content/blog/_index.md +++ b/content/blog/_index.md @@ -1,3 +1,5 @@ ---- -title: "Blog" ---- \ No newline at end of file ++++ +title = "Published articles" +summary = "Selected thoughts" +weight = 90 ++++ \ No newline at end of file diff --git a/content/blog/twitter-not-social/index.md b/content/blog/twitter-not-social/index.md index 5ee58ff..9dbf1d4 100644 --- a/content/blog/twitter-not-social/index.md +++ b/content/blog/twitter-not-social/index.md @@ -8,7 +8,7 @@ category: "Blog" cover: "" --- -
"We are not a social network. We do not benefit from social graphs," Dorsey said. "People come to us when they're interested in events happening in the world or with a niche interest. We've been biasing a lot more of the service towards interest and topics."
+

"We are not a social network. We do not benefit from social graphs," Dorsey said. "People come to us when they're interested in events happening in the world or with a niche interest. We've been biasing a lot more of the service towards interest and topics."

Perhaps this is something many of us suspected, as we stared at our timelines, watching them devolve steadily from 2014 onward. But for the first time ever, here it is, in written form, straight from the CEO, staring right back at us.

diff --git a/content/code/_index.md b/content/code/_index.md index 975da3c..a133254 100644 --- a/content/code/_index.md +++ b/content/code/_index.md @@ -1,5 +1,6 @@ ---- -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"] ---- \ No newline at end of file ++++ +title = "Free software contributions" +summary = "I like to participate in the world of free and libre open source software." +tags = ["abdullah tarawneh", "coding", "code", "open source", "free software", "github", "pull request", "dev", "development", "project", "projects"] +weight = 20 ++++ \ No newline at end of file diff --git a/content/design/_index.md b/content/design/_index.md index 9ed64c4..e604255 100644 --- a/content/design/_index.md +++ b/content/design/_index.md @@ -1,3 +1,7 @@ ---- -title: "Design portfolio" ---- \ No newline at end of file ++++ +title = "Design portfolio" +summary = "UI / UX ideas" +tags = [] +weight = 30 +draft = true ++++ \ No newline at end of file diff --git a/content/design/motarawneh/index.md b/content/design/motarawneh/index.md index 3330602..063a487 100644 --- a/content/design/motarawneh/index.md +++ b/content/design/motarawneh/index.md @@ -1,11 +1,14 @@ ---- -title: Mo Tarawneh -summary: A personal website for Mo Tarawneh, inaugural chairperson of the UN CRPD and twice-elected member. -author: "Abdullah Tarawneh" -date: "2020-03-17" -tags: ["website", "web", "responsive", "design"] -category: "Design" -cover: "/images/cover/motarawneh.jpg" ---- ++++ +title = "Mo Tarawneh" +summary = "A personal website for Mo Tarawneh, inaugural chairperson of the UN CRPD and twice-elected member." +author = "Abdullah Tarawneh" +date = "2020-03-17" +tags = ["website", "web", "responsive", "design"] +category = "Design" +draft = true +[[resources]] +name = 'cover' +src = 'images/cover/motarawneh.jpg' ++++ ## Overview \ No newline at end of file diff --git a/content/work/_index.md b/content/work/_index.md index 18a65cc..eb3effe 100644 --- a/content/work/_index.md +++ b/content/work/_index.md @@ -1,3 +1,6 @@ ---- -title: "Work" ---- \ No newline at end of file ++++ +title = "Professional work" +summary = "Hire me to help you figure things out." +tags = [] +weight = 20 ++++ \ No newline at end of file diff --git a/content/work/mastodon/index.html b/content/work/mastodon/index.html index 12c4292..70e1c24 100644 --- a/content/work/mastodon/index.html +++ b/content/work/mastodon/index.html @@ -1,46 +1,35 @@ ---- -title: "Mastodon documentation revamp" -summary: "Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it." -author: "Abdullah Tarawneh" -date: "2020-01-04" -start: "Aug 2019" -end: "Jan 2020" -at: "Mastodon" -position: "Information Architect / Documentation Specialist" -tags: ["mastodon", "documentation", "information architecture", "rest api"] -category: "Work" -cover: "/images/cover/mastodocs.jpg" ---- ++++ +title = "Mastodon documentation revamp" +summary = "Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it." +author = "Abdullah Tarawneh" +date = "2020-01-04" +start = "Aug 2019" +end = "Jan 2020" +at = "Mastodon" +position = "Information Architect / Documentation Specialist" +tags = ["mastodon", "documentation", "information architecture", "rest api"] +category = "Work" ++++
- - - -

I reorganized and rewrote the docs for an open-source project with millions of users. -

+ + + +

I reorganized and rewrote the docs for an open-source project with millions of users.

About the client

-

Mastodon 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.

-

I have been using Mastodon since November 2016 -- you can view my profile at mastodon.social/@trwnh 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 - they gave up on being a social network, anyway.

-

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:

+

Mastodon 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.

+

I have been using Mastodon since November 2016 -- you can view my profile at mastodon.social/@trwnh 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 they gave up on being a social network, anyway.

+

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:

- + --> - + - + - +
@@ -340,6 +329,7 @@ cover: "/images/cover/mastodocs.jpg"

REST API

    +
  • Guidelines and best practices
  • OAuth Scopes
@@ -415,35 +405,35 @@ cover: "/images/cover/mastodocs.jpg" bless you for being here to work on the docs btw it's a big relief
- {{< people/gargron >}} - Eugen "Gargron" Rochko
Mastodon founder
& lead developer + {{< people/gargron>}} + Eugen "Gargron" Rochko
Mastodon founder
& lead developer
-

There was much less missing information.

-

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.

+

There was much less missing information.

+

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.

It was also easier to make additions in an appropriate place.

-

For example, the following pages were added after completion:

-
    -
  • "Rate limits" was added under "REST API", describing how to deal with rate limits on requests made to - the REST API.
    • -
  • "Bug bounties and responsible disclosure" was added under "Contributing to Mastodon", describing where - serious issues should be reported if found.
    • -
  • "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.
    • -
-

The clear structure left in place by my information architecture work meant that it was almost immediately - clear where to add these pages.

+

For example, the following pages were added after completion:

+
    +
  • "Rate limits" was added under "REST API", describing how to deal with rate limits on requests made to + the REST API.
    • +
  • "Bug bounties and responsible disclosure" was added under "Contributing to Mastodon", describing where + serious issues should be reported if found.
    • +
  • "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.
    • +
+

The clear structure left in place by my information architecture work meant that it was almost immediately + clear where to add these pages.

-

The quality and formatting of the docs was vastly improved.

-

Methods now include the HTTP verb, endpoint, description, return type, OAuth scope, version history, request - parameters, and sample response code and payload.

-

Entities now include example payloads, as well as each attribute and its description, type, and version - history.

+

The quality and formatting of the docs was vastly improved.

+

Methods now include the HTTP verb, endpoint, description, return type, OAuth scope, version history, request + parameters, and sample response code and payload.

+

Entities now include example payloads, as well as each attribute and its description, type, and version + history.

@@ -453,9 +443,15 @@ cover: "/images/cover/mastodocs.jpg"

Maybe you'd appreciate me doing something similar for you?

Mastodon documentation landing page
- Check out the live + + + Check out the live version - +
diff --git a/assets/scss/content/work/mastodon.scss b/content/work/mastodon/style.scss similarity index 96% rename from assets/scss/content/work/mastodon.scss rename to content/work/mastodon/style.scss index 392453e..d6d5ea7 100644 --- a/assets/scss/content/work/mastodon.scss +++ b/content/work/mastodon/style.scss @@ -50,11 +50,6 @@ } } #about { - .container { - display: flex; - flex-flow: column; - gap: 1em; - } .title { position: relative; &::before { @@ -144,7 +139,7 @@ .structure { font-size: 1.2em; line-height: 1.4; - margin-bottom: 2em; + margin-block: 2em; display: grid; @media (min-width: 40em) { grid-template-columns: 1fr 1fr; @@ -157,9 +152,9 @@ grid-column: 2; } } - gap: 1em; + gap: 2em 1em; ul { - list-style-type: number; + } ul > ul { margin-left: 1.25em; @@ -178,8 +173,8 @@ position: relative; &:before { position: absolute; - top: -1.675em; - right: -1em; + top: -1.75em; + right: calc(50% - 3.25ch); font-size: 2em; font-weight: 900; background: #16191f; @@ -232,6 +227,7 @@ } } .praise { + border: 0; background: #303643; color: #d9e1e8; font-size: 1.8em; diff --git a/assets/scss/content/work/trilogy.scss b/content/work/trilogy/style.scss similarity index 99% rename from assets/scss/content/work/trilogy.scss rename to content/work/trilogy/style.scss index ab70ffb..73c33c8 100644 --- a/assets/scss/content/work/trilogy.scss +++ b/content/work/trilogy/style.scss @@ -53,6 +53,7 @@ } } .companies { + list-style: none; display: flex; flex-flow: row wrap; font-size: 3em; diff --git a/config.toml b/hugo.toml similarity index 69% rename from config.toml rename to hugo.toml index 0ffe6c3..79049e0 100644 --- a/config.toml +++ b/hugo.toml @@ -3,6 +3,11 @@ languageCode = "en-us" title = "Abdullah Tarawneh" enableGitInfo = true +[markup.tableOfContents] +startLevel = 2 +endLevel = 6 +ordered = true + [markup.goldmark.renderer] unsafe = true @@ -13,7 +18,7 @@ category = "category" [menu] [[menu.main]] -identifier = "" +identifier = "home" pre = '' name = "Home" url = "/" @@ -21,7 +26,7 @@ weight = 10 [[menu.main]] identifier = "work" -pre = ' ' +pre = ' ' name = "Work" url = "/work/" weight = 20 @@ -35,7 +40,7 @@ weight = 30 #[[menu.main]] #identifier = "design" -#pre = ' ' +#pre = ' ' #name = "Design" #url = "/design/" #weight = 40 diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 8222986..fb90c64 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -9,111 +9,16 @@ {{ $js := resources.Get "js/main.js" | minify | minify | fingerprint }} - {{ $icon := "images/people/avatar.png" | absURL }} - - {{ if .IsPage }}{{ end }} - {{ if .IsHome }}{{ .Site.Title }} - {{ .Site.Title }} - - - - {{ else }}{{ .Title }} | {{ .Site.Title }} - {{ .Title }} | {{ .Site.Title }} - - - {{ end }} - - - - - - - - - - - - {{ with .Params.cover }} - - - {{ else }} - - - - {{ end }} - - {{ if isset .Params "date" }} - - {{ else }} - - {{ end }} - - {{ with.Params.author }} - - {{ end }} - {{ with.Params.category }} - {{ end }} - - - - {{ with .OutputFormats.Get "RSS" }} - {{ end }} - - - - - - - - - - - - - - + {{ partial "seo.html" . }} {{ block "head" . }} {{ end }} + {{ block "body" . }} {{ partial "site-header.html" . }} {{ block "main" . }} {{ end }} {{ partial "site-footer.html" .}} + {{ end }} diff --git a/layouts/_default/list.html b/layouts/_default/list.html index aa4c064..0ee3054 100644 --- a/layouts/_default/list.html +++ b/layouts/_default/list.html @@ -5,18 +5,25 @@

{{ .Title }}

+ {{ with .Content }} +
+
+ {{.}} +
+
+ {{ end }}
{{ range .Pages }} -
diff --git a/layouts/index.html b/layouts/index.html index 7b56485..5b6dde0 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,63 +1,23 @@ {{ define "main" }} -
-
-
-
- -
-
full name
-
abdullah tarawneh
-
preferred name
-
a
-
email (smtp)
-
-
chat (xmpp)
-
a@trwnh.com
-
social (activitypub)
-
mastodon.social/@trwnh
-
notes
-
i have approximate knowledge of many things. perpetual student. (nb/ace/they)
-
-
-
-

things people have said to me

-
-
-

it's scary how much you know.

-
-
-

you're the first person i've met that keeps a spreadsheet of their lightbulbs.

-
-
-

VERY MUCH not garbage [...] a worthwhile human

-
-
-

honestly, i trust your judgement more than i trust my own.

-
-
+
+
+
+
+

{{.Title}}

+ From abdullahtarawneh.com, the free website +

{{.Summary}}

-
-
-
-
-
- - - - - view my photos + +
-
-
-
-

latest updates

-

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.

-
-
+ +
+
+ {{ .Content }} +
+
+
{{ end }} \ No newline at end of file diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html new file mode 100644 index 0000000..4a35c15 --- /dev/null +++ b/layouts/partials/breadcrumbs.html @@ -0,0 +1,20 @@ +
    + {{ template "breadcrumb" (dict "p1" . "p2" .) }} +
+ +{{ 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 }} +
  • + + {{ if .p1.IsHome }} + Root + {{ else }} + {{ .p1.Title }} + {{ end }} + +
    • +{{ end }} \ No newline at end of file diff --git a/layouts/partials/name.html b/layouts/partials/name.html new file mode 100644 index 0000000..10df9d7 --- /dev/null +++ b/layouts/partials/name.html @@ -0,0 +1,16 @@ +{{ $firstH1 := + ( + substr + ( + delimit + ( + findRE + "^#{1} ([^{\n]+)" + .RawContent + 1 + ) + "" + ) + 2 + ) +}} \ No newline at end of file diff --git a/layouts/partials/seo.html b/layouts/partials/seo.html new file mode 100644 index 0000000..9ab90de --- /dev/null +++ b/layouts/partials/seo.html @@ -0,0 +1,143 @@ +{{/*=== title ===*/}} +{{ "" | safeHTML }} +{{- with .Site.Title }} + +{{- end -}} +{{- $firstH1 := partial "name.html" . }} +{{- $title := or .Title $firstH1 $.File.ContentBaseName }} +{{- $name := or .Params.name (print $title " - " .Site.Title) }} +{{- if .IsHome}} +{{- $name = or .Params.name .Site.Title }} +{{- end }} +{{- with $name }} +{{ . }} + +{{- end -}} + +{{/*=== description ===*/}} +{{- with or .Description .Summary .Site.Params.description }} + + +{{- end }} +{{ "" | safeHTML }} +{{- with .Permalink | absURL}} + + + + + +{{- end -}} + +{{/*=== image ===*/}} +{{- $cover := ($.Resources.ByType "image").GetMatch "{*cover*,*thumbnail*,*featured*}" -}} +{{ $icon := resources.GetMatch (default "" .Site.Params.icon) -}} +{{- $staticIcon := "icon.png" | absURL -}} +{{- with or $cover $icon }} +{{ "" | safeHTML }} + + +{{- with .Width }} + +{{- end }} +{{- with .Height }} + +{{- end }} + + +{{- else }} +{{ "" | safeHTML }} + + + + +{{- end -}} + +{{/*=== author ===*/}} +{{ with or .Params.author .Site.Params.author -}} +{{ "" | safeHTML }} + + + + +{{- end -}} + +{{/*=== published and updated ===*/}} +{{- "" | safeHTML }} +{{ with .Date }} + + +{{ end -}} +{{ with .Lastmod -}} + +{{ end -}} + +{{/*=== section and keywords ===*/}} +{{- "" | safeHTML }} +{{- with.Params.category -}} + + +{{- end -}} +{{- with .Params.tags }} + +{{- end -}} + +{{- if isset .Params "date" -}} +{{ "" | safeHTML }} + + +{{- else }} +{{ "" | safeHTML }} + + +{{- end -}} + +{{/* auxiliary info */}} +{{ "" | safeHTML }} +{{ with $icon }} + +{{- else -}} + +{{- end }} + + + +{{ with .OutputFormats.Get "RSS" -}} + +{{- end }} + + \ No newline at end of file diff --git a/layouts/partials/site-footer.html b/layouts/partials/site-footer.html index 1ca023a..5111c95 100644 --- a/layouts/partials/site-footer.html +++ b/layouts/partials/site-footer.html @@ -1,35 +1,34 @@
    -
      - {{ template "breadcrumb" (dict "p1" . "p2" .) }} -
    + {{ partial "breadcrumbs.html" . }} back to top
    -{{ 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 }} - - {{ .p1.Title }} - -{{ end }} + - - \ No newline at end of file + async> + + \ No newline at end of file diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html index 49b45e7..07199b1 100644 --- a/layouts/partials/site-header.html +++ b/layouts/partials/site-header.html @@ -2,16 +2,16 @@
    -

    i'm abdullah tarawneh, creative and technical consultant.

    +

    hi, i'm abdullah tarawneh.