housekeeping and cleanup, plus new front page

This commit is contained in:
a 2024-02-26 05:41:39 -06:00
parent 590c6b41f3
commit a66cf67a00
41 changed files with 757 additions and 739 deletions

View file

@ -13,12 +13,10 @@ a {
color: var(--link-visited); color: var(--link-visited);
} }
&:focus { &:focus {
outline: none; display: inline-block;
background: var(--primary-accent); outline-offset: 0.5rem;
color: var(--primary-accent-text); outline-width: 0.25rem;
padding: 4px; border-radius: 0.125rem;
border-radius: 2px;
text-decoration: none;
} }
&:hover { &:hover {
text-decoration-thickness: 0.25em; text-decoration-thickness: 0.25em;
@ -27,4 +25,9 @@ a {
&:active { &:active {
} }
} }
*[title] {
text-decoration: underline;
text-decoration-style: dotted;
}

View file

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

View file

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

View file

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

View file

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

View file

@ -1,4 +1,4 @@
$container-width: 960px; $container-width: 60em;
$nav-height: 4em; $nav-height: 4em;
$header-height: 4em; $header-height: 4em;

View file

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

View file

@ -34,6 +34,7 @@
background: var(--color); background: var(--color);
color: white; color: white;
padding: 0.5em; padding: 0.5em;
border: 0;
border-radius: 0.5em; border-radius: 0.5em;
position: relative; position: relative;
grid-column: span 2; grid-column: span 2;

View file

@ -1,14 +1,14 @@
@mixin pullquote { @mixin pullquote {
content: attr(data-pullquote); content: attr(data-pullquote);
font-size: 1em; font-size: 1em;
line-height: 1.2; line-height: 1.4;
display: flex; display: flex;
font-family: serif; font-family: serif;
color: #555; color: #555;
padding: 1em; padding: 1em;
font-size: 1.25em; font-size: 1.25em;
} }
.has-pullquote{ .has-pullquote {
&.before:before { &.before:before {
@include pullquote; @include pullquote;
margin-bottom: 1rem; margin-bottom: 1rem;

View file

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

View file

View file

View file

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

View file

@ -1,4 +1,6 @@
.breadcrumbs { .breadcrumbs {
list-style: none;
margin: 0;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
gap: 0.5em; gap: 0.5em;

View file

@ -67,12 +67,14 @@
color: var(--ui-text-muted); color: var(--ui-text-muted);
z-index: 2; z-index: 2;
ul { ul {
list-style: none;
height: var(--nav-height); height: var(--nav-height);
max-width: $container-width; max-width: $container-width;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
li { li {
margin-block: 0;
flex: 1; flex: 1;
border-bottom: 4px solid var(--ui-background-track); border-bottom: 4px solid var(--ui-background-track);
&.active { &.active {
@ -86,7 +88,6 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%; height: 100%;
span {padding: 0.25em;}
svg { svg {
width: 1em; width: 1em;
height: 1em; height: 1em;

View file

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

View file

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

View file

@ -2,33 +2,33 @@
@import "base/variables.scss"; @import "base/variables.scss";
@import "base/mixins.scss"; @import "base/mixins.scss";
@import "base/sections.scss"; @import "base/sections.scss";
@import "base/page.scss"; @import "base/text.scss";
@import "base/list.scss";
@import "base/links.scss"; @import "base/links.scss";
//@import "base/paper.scss";
@import "libraries/photoswipe.scss"; @import "libraries/photoswipe.scss";
@import "components/pullquote.scss"; @import "components/pullquote.scss";
@import "components/button.scss"; @import "components/button.scss";
@import "components/h-card.scss";
@import "components/intro.scss"; @import "components/intro.scss";
@import "components/praise.scss"; @import "components/praise.scss";
@import "components/devices.scss"; @import "components/devices.scss";
@import "components/terminal.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.scss";
@import "content/work/trilogy.scss";
@import "content/work/mastodon.scss";
@import "content/work/go-fed.scss";
@import "content/code.scss"; @import "content/code.scss";
@import "content/blog.scss"; @import "content/blog.scss";
@import "partials/site-header.scss";
@import "partials/site-footer.scss";
@import "partials/breadcrumbs.scss";
@media (min-width: 2500px) { @media (min-width: 2500px) {
main { main {
overflow: hidden; overflow: hidden;

View file

@ -1,5 +1,57 @@
--- +++
title: "Root" title = "Abdullah Tarawneh"
summary: "Abdullah Tarawneh is an information architect, designer, developer, photographer, and all-around creative, especially for the web." 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"] tags = ["abdullah", "tarawneh", "birmingham", "hoover", "alabama", "design", "designer", "web", "developer", "freelance", "freelancer", "photography", "photographer", "technical writer", "creative", "consultant"]
--- +++
## h-card
{{< hcard-full >}}
## Professional work
<span style="margin-left: 2em; font-style: italic">Main page: [Work](/work)</span>
Abdullah Tarawneh is currently available for work.
### Mastodon documentation
<span style="margin-left: 2em; font-style: italic">Main page: [Mastodon](/work/mastodon)</span>
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
<span style="margin-left: 2em; font-style: italic">Main page: [Trilogy](/work/trilogy)</span>
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
<span style="margin-left: 2em; font-style: italic">Main page: [Code](/code)</span>
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 >}}

View file

@ -1,3 +1,5 @@
--- +++
title: "Blog" title = "Published articles"
--- summary = "Selected thoughts"
weight = 90
+++

View file

@ -8,7 +8,7 @@ category: "Blog"
cover: "" cover: ""
--- ---
<blockquote>"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."</blockquote> <blockquote><p>"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."</p></blockquote>
<p>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.</p> <p>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.</p>

View file

@ -1,5 +1,6 @@
--- +++
title: "Code written" title = "Free software contributions"
summary: "My personal projects and contributions to open source and free software." 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"] tags = ["abdullah tarawneh", "coding", "code", "open source", "free software", "github", "pull request", "dev", "development", "project", "projects"]
--- weight = 20
+++

View file

@ -1,3 +1,7 @@
--- +++
title: "Design portfolio" title = "Design portfolio"
--- summary = "UI / UX ideas"
tags = []
weight = 30
draft = true
+++

View file

@ -1,11 +1,14 @@
--- +++
title: Mo Tarawneh title = "Mo Tarawneh"
summary: A personal website for Mo Tarawneh, inaugural chairperson of the UN CRPD and twice-elected member. summary = "A personal website for Mo Tarawneh, inaugural chairperson of the UN CRPD and twice-elected member."
author: "Abdullah Tarawneh" author = "Abdullah Tarawneh"
date: "2020-03-17" date = "2020-03-17"
tags: ["website", "web", "responsive", "design"] tags = ["website", "web", "responsive", "design"]
category: "Design" category = "Design"
cover: "/images/cover/motarawneh.jpg" draft = true
--- [[resources]]
name = 'cover'
src = 'images/cover/motarawneh.jpg'
+++
## Overview ## Overview

View file

@ -1,3 +1,6 @@
--- +++
title: "Work" title = "Professional work"
--- summary = "Hire me to help you figure things out."
tags = []
weight = 20
+++

View file

@ -1,46 +1,35 @@
--- +++
title: "Mastodon documentation revamp" title = "Mastodon documentation revamp"
summary: "Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it." summary = "Reorganizing the documentation for the Mastodon Project, while also rewriting significant portions of it."
author: "Abdullah Tarawneh" author = "Abdullah Tarawneh"
date: "2020-01-04" date = "2020-01-04"
start: "Aug 2019" start = "Aug 2019"
end: "Jan 2020" end = "Jan 2020"
at: "Mastodon" at = "Mastodon"
position: "Information Architect / Documentation Specialist" position = "Information Architect / Documentation Specialist"
tags: ["mastodon", "documentation", "information architecture", "rest api"] tags = ["mastodon", "documentation", "information architecture", "rest api"]
category: "Work" category = "Work"
cover: "/images/cover/mastodocs.jpg" +++
---
<main id="mastodon"> <main id="mastodon">
<header class="page-header section"> <header class="page-header section">
<div class="container"> <div class="container">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 216.4144 232.00976"> <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="#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"/> <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> </svg>
<h1 class="title">I reorganized and rewrote the docs for an open-source project with millions of users. <h1 class="title">I reorganized and rewrote the docs for an open-source project with millions of users.</h1>
</h1>
</div> </div>
</header> </header>
<section class="section" id="about"> <section class="section" id="about">
<div class="container"> <div class="container">
<h2 class="title">About the client</h2> <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 <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>
project that aims to let anyone easily host their own Twitter-like social media website. Started in 2016, <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>
the project has since grown due to various migrations, usually spurred by the failures and mistakes of the <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>
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"> <div class="conversation">
<!-- <!--
<iframe src="https://mastodon.social/@Gargron/102640868158739158/embed" class="mastodon-embed" <iframe src="https://mastodon.social/@Gargron/102640868158739158/embed" class="mastodon-embed"
style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe> style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
<script src="https://mastodon.social/embed.js" async="async"></script> <script src="https://mastodon.social/embed.js" async="async"></script>
@ -52,61 +41,61 @@ cover: "/images/cover/mastodocs.jpg"
<iframe src="https://mastodon.social/@Gargron/102641022258942590/embed" class="mastodon-embed" <iframe src="https://mastodon.social/@Gargron/102641022258942590/embed" class="mastodon-embed"
style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe> style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
<script src="https://mastodon.social/embed.js" async="async"></script> <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;"> <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;"> <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;"> <div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
{{< people/gargron >}} {{< people/gargron>}}
</div> </div>
<div style="line-height: 1.5"> <div style="line-height: 1.5">
<div style="font-weight: 500;">Eugen</div> <div style="font-weight: 500;">Eugen</div>
<div style="color: #d9e1e8">@Gargron@mastodon.social</div> <div style="color: #d9e1e8">@Gargron@mastodon.social</div>
</div> </div>
</a> </a>
<div style="font-size: 19px; line-height: 24px;"> <div style="font-size: 19px; line-height: 24px;">
<p style="margin-bottom: 25px;"> <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. 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> </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> <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> </div>
</article> </article>
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;"> <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;"> <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;"> <div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
{{< people/trwnh >}} {{< people/trwnh>}}
</div> </div>
<div style="line-height: 1.5"> <div style="line-height: 1.5">
<div style="font-weight: 500;">infinite love ⴳ</div> <div style="font-weight: 500;">infinite love ⴳ</div>
<div style="color: #d9e1e8">@trwnh@mastodon.social</div> <div style="color: #d9e1e8">@trwnh@mastodon.social</div>
</div> </div>
</a> </a>
<div style="font-size: 19px; line-height: 24px;"> <div style="font-size: 19px; line-height: 24px;">
<p style="margin-bottom: 25px;"> <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. <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> </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> <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> </div>
</article> </article>
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff;"> <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;"> <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;"> <div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
{{< people/gargron >}} {{< people/gargron>}}
</div> </div>
<div style="line-height: 1.5"> <div style="line-height: 1.5">
<div style="font-weight: 500;">Eugen</div> <div style="font-weight: 500;">Eugen</div>
<div style="color: #d9e1e8">@Gargron@mastodon.social</div> <div style="color: #d9e1e8">@Gargron@mastodon.social</div>
</div> </div>
</a> </a>
<div style="font-size: 19px; line-height: 24px;"> <div style="font-size: 19px; line-height: 24px;">
<p style="margin-bottom: 25px;"> <p style="margin-bottom: 25px;">
<a style="color: #d9e1e8" href="https://mastodon.social/@trwnh">@trwnh</a> Okay, let's do it. Paid, of course. <a style="color: #d9e1e8" href="https://mastodon.social/@trwnh">@trwnh</a> Okay, let's do it. Paid, of course.
</p> </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> <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> </div>
</article> </article>
</div> </div>
@ -340,6 +329,7 @@ cover: "/images/cover/mastodocs.jpg"
<div class="new card"> <div class="new card">
<h4 class="card__head">REST API</h4> <h4 class="card__head">REST API</h4>
<ul class="card__body"> <ul class="card__body">
<li>Guidelines and best practices</li>
<li>OAuth Scopes</li> <li>OAuth Scopes</li>
</ul> </ul>
</div> </div>
@ -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 bless you for being here to work on the docs btw it's a big relief
</blockquote> </blockquote>
<div class="attribution"> <div class="attribution">
{{< people/gargron >}} {{< people/gargron>}}
<cite><em>Eugen "Gargron" Rochko</em><br>Mastodon founder<br>& lead developer</cite> <cite><em>Eugen "Gargron" Rochko</em><br>Mastodon founder<br>& lead developer</cite>
</div> </div>
<section class="benefit one"> <section class="benefit one">
<h3 class="subtitle">There was much less missing information.</h3> <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. <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 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> filled during the technical writing phase.</p>
</section> </section>
<section class="benefit two"> <section class="benefit two">
<h3 class="subtitle">It was also easier to make additions in an appropriate place.</h3> <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> <p>For example, the following pages were added after completion:</p>
<ul> <ul>
<li>"Rate limits" was added under "REST API", describing how to deal with rate limits on requests made to <li>"Rate limits" was added under "REST API", describing how to deal with rate limits on requests made to
the REST API.</li> the REST API.</li>
<li>"Bug bounties and responsible disclosure" was added under "Contributing to Mastodon", describing where <li>"Bug bounties and responsible disclosure" was added under "Contributing to Mastodon", describing where
serious issues should be reported if found.</li> 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 <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> to run their own server and linking to the "Running Mastodon" section.</li>
</ul> </ul>
<p>The clear structure left in place by my information architecture work meant that it was almost immediately <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> clear where to add these pages.</p>
</section> </section>
<section class="benefit three"> <section class="benefit three">
<h3 class="subtitle">The quality and formatting of the docs was vastly improved.</h3> <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 <p>Methods now include the HTTP verb, endpoint, description, return type, OAuth scope, version history, request
parameters, and sample response code and payload.</p> 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 <p>Entities now include example payloads, as well as each attribute and its description, type, and version
history.</p> history.</p>
</section> </section>
</div> </div>
</section> </section>
@ -453,9 +443,15 @@ cover: "/images/cover/mastodocs.jpg"
<h2 class="title">Maybe you'd appreciate me doing something similar for you?</h2> <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> <img src="/images/cover/mastodocs.jpg" alt="Mastodon documentation landing page" width=1280 height=720>
<div class="buttons"> <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 <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> 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> <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>
</div> </div>
</section> </section>

View file

@ -50,11 +50,6 @@
} }
} }
#about { #about {
.container {
display: flex;
flex-flow: column;
gap: 1em;
}
.title { .title {
position: relative; position: relative;
&::before { &::before {
@ -144,7 +139,7 @@
.structure { .structure {
font-size: 1.2em; font-size: 1.2em;
line-height: 1.4; line-height: 1.4;
margin-bottom: 2em; margin-block: 2em;
display: grid; display: grid;
@media (min-width: 40em) { @media (min-width: 40em) {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -157,9 +152,9 @@
grid-column: 2; grid-column: 2;
} }
} }
gap: 1em; gap: 2em 1em;
ul { ul {
list-style-type: number;
} }
ul > ul { ul > ul {
margin-left: 1.25em; margin-left: 1.25em;
@ -178,8 +173,8 @@
position: relative; position: relative;
&:before { &:before {
position: absolute; position: absolute;
top: -1.675em; top: -1.75em;
right: -1em; right: calc(50% - 3.25ch);
font-size: 2em; font-size: 2em;
font-weight: 900; font-weight: 900;
background: #16191f; background: #16191f;
@ -232,6 +227,7 @@
} }
} }
.praise { .praise {
border: 0;
background: #303643; background: #303643;
color: #d9e1e8; color: #d9e1e8;
font-size: 1.8em; font-size: 1.8em;

View file

@ -53,6 +53,7 @@
} }
} }
.companies { .companies {
list-style: none;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
font-size: 3em; font-size: 3em;

View file

@ -3,6 +3,11 @@ languageCode = "en-us"
title = "Abdullah Tarawneh" title = "Abdullah Tarawneh"
enableGitInfo = true enableGitInfo = true
[markup.tableOfContents]
startLevel = 2
endLevel = 6
ordered = true
[markup.goldmark.renderer] [markup.goldmark.renderer]
unsafe = true unsafe = true
@ -13,7 +18,7 @@ category = "category"
[menu] [menu]
[[menu.main]] [[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>' 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" name = "Home"
url = "/" url = "/"
@ -21,7 +26,7 @@ weight = 10
[[menu.main]] [[menu.main]]
identifier = "work" identifier = "work"
pre = '<?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(1 0 0 -1 37.966 1313.1)"> <path d="m640 1152h512v128h-512v-128zm1152-640v-480q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v480h672v-160q0-26 19-45t45-19h320q26 0 45 19t19 45v160h672zm-768 0v-128h-256v128h256zm768 480v-384h-1792v384q0 66 47 113t113 47h352v160q0 40 28 68t68 28h576q40 0 68-28t28-68v-160h352q66 0 113-47t47-113z" fill="currentColor"/> </g> </svg>' pre = '<svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg"> <g transform="matrix(1 0 0 -1 37.966 1313.1)"> <path d="m640 1152h512v128h-512v-128zm1152-640v-480q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v480h672v-160q0-26 19-45t45-19h320q26 0 45 19t19 45v160h672zm-768 0v-128h-256v128h256zm768 480v-384h-1792v384q0 66 47 113t113 47h352v160q0 40 28 68t68 28h576q40 0 68-28t28-68v-160h352q66 0 113-47t47-113z" fill="currentColor"/> </g> </svg>'
name = "Work" name = "Work"
url = "/work/" url = "/work/"
weight = 20 weight = 20
@ -35,7 +40,7 @@ weight = 30
#[[menu.main]] #[[menu.main]]
#identifier = "design" #identifier = "design"
#pre = '<?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" viewBox="0 -256 2000 2000" width=16 height=16 xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1 0 0 -1 37.966 1447.9)"> <path d="m1792 544v832q0 13-9.5 22.5t-22.5 9.5h-1600q-13 0-22.5-9.5t-9.5-22.5v-832q0-13 9.5-22.5t22.5-9.5h1600q13 0 22.5 9.5t9.5 22.5zm128 832v-1088q0-66-47-113t-113-47h-544q0-37 16-77.5t32-71 16-43.5q0-26-19-45t-45-19h-512q-26 0-45 19t-19 45q0 14 16 44t32 70 16 78h-544q-66 0-113 47t-47 113v1088q0 66 47 113t113 47h1600q66 0 113-47t47-113z" fill="currentColor"/> </g> </svg>' #pre = '<svg version="1.1" viewBox="0 -256 2000 2000" width=16 height=16 xmlns="http://www.w3.org/2000/svg"><g transform="matrix(1 0 0 -1 37.966 1447.9)"> <path d="m1792 544v832q0 13-9.5 22.5t-22.5 9.5h-1600q-13 0-22.5-9.5t-9.5-22.5v-832q0-13 9.5-22.5t22.5-9.5h1600q13 0 22.5 9.5t9.5 22.5zm128 832v-1088q0-66-47-113t-113-47h-544q0-37 16-77.5t32-71 16-43.5q0-26-19-45t-45-19h-512q-26 0-45 19t-19 45q0 14 16 44t32 70 16 78h-544q-66 0-113 47t-47 113v1088q0 66 47 113t113 47h1600q66 0 113-47t47-113z" fill="currentColor"/> </g> </svg>'
#name = "Design" #name = "Design"
#url = "/design/" #url = "/design/"
#weight = 40 #weight = 40

View file

@ -9,111 +9,16 @@
{{ $js := resources.Get "js/main.js" | minify | minify | fingerprint }} {{ $js := resources.Get "js/main.js" | minify | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" media="screen"> <link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" media="screen">
<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script> <script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
{{ $icon := "images/people/avatar.png" | absURL }} {{ partial "seo.html" . }}
<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" . }} {{ block "head" . }}
{{ end }} {{ end }}
</head> </head>
<body> <body>
{{ block "body" . }}
{{ partial "site-header.html" . }} {{ partial "site-header.html" . }}
{{ block "main" . }} {{ block "main" . }}
{{ end }} {{ end }}
{{ partial "site-footer.html" .}} {{ partial "site-footer.html" .}}
{{ end }}
</body> </body>
</html> </html>

View file

@ -5,18 +5,25 @@
<h1 class="page-title">{{ .Title }}</h1> <h1 class="page-title">{{ .Title }}</h1>
</div> </div>
</header> </header>
{{ with .Content }}
<section>
<div class="container">
{{.}}
</div>
</section>
{{ end }}
<section class="section list"> <section class="section list">
<div class="container"> <div class="container">
{{ range .Pages }} {{ range .Pages }}
<article class="list-item"> <article class="list-item">
<a class="list-item__link" href="{{ .Permalink }}"> <a class="list-item__link" href="{{ .Permalink }}">
{{ with .Params.cover }} {{- $cover := ($.Resources.ByType "image").GetMatch "{*cover*,*thumbnail*,*featured*}" -}}
<img class="list-item__image" src="{{.}}"> {{ with $cover }}
{{end}} <img class="list-item__image" src="{{.Permalink}}">
<h2 class="list-item__title">{{ .Title }}</h2> {{end}}
</a> <h2 class="list-item__title">{{ .Title }}</h2>
</a>
<p class="list-item__summary">{{.Summary}}</p> <p class="list-item__summary">{{.Summary}}</p>
<datetime class="list-item__date">{{ .Date.Format "January 2, 2006" }}</datetime>
</article> </article>
{{ end }} {{ end }}
</div> </div>

View file

@ -1,63 +1,23 @@
{{ define "main" }} {{ define "main" }}
<main id="index"> <main class="index">
<header class="section" id="summary"> <div id="wiki">
<div class="container"> <header>
<article class="vcard h-card"> <div class="container">
<div class="banner"><img src="/images/people/avatar.png" alt="me" class="photo u-photo"></div> <h1>{{.Title}}</h1>
<dl> <span>From abdullahtarawneh.com, the free website</span>
<dt>full name</dt> <p>{{.Summary}}</p>
<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>
</div> </header>
</header> <nav>
<section class="" id="birdsounds"> <div class="container">
<div class="container"> {{.TableOfContents}}
<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> </div>
<picture> </nav>
<source type="image/avif" srcset="/images/soulpunx.avif"> <section>
<img class="photo" src="/images/soulpunx.jpg" alt="#soulpunx"> <div class="container">
</picture> {{ .Content }}
</div> </div>
</section> </section>
<section class="section" id="updates"> </div>
<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>
</div>
</section>
</main> </main>
{{ end }} {{ end }}

View file

@ -0,0 +1,20 @@
<ul class="breadcrumbs">
{{ template "breadcrumb" (dict "p1" . "p2" .) }}
</ul>
{{ 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 }}">
{{ if .p1.IsHome }}
Root
{{ else }}
{{ .p1.Title }}
{{ end }}
</a>
</li>
{{ end }}

View file

@ -0,0 +1,16 @@
{{ $firstH1 :=
(
substr
(
delimit
(
findRE
"^#{1} ([^{\n]+)"
.RawContent
1
)
""
)
2
)
}}

143
layouts/partials/seo.html Normal file
View file

@ -0,0 +1,143 @@
{{/*=== title ===*/}}
{{ "<!-- text -->" | safeHTML }}
{{- with .Site.Title }}
<meta name="application-name" property="og:site_name" content="{{ . }}" />
{{- 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 }}
<title itemprop="name">{{ . }}</title>
<meta property="og:title" name="twitter:title" content="{{ . }}" />
{{- end -}}
{{/*=== description ===*/}}
{{- with or .Description .Summary .Site.Params.description }}
<meta name="description" itemprop="description" property="og:description" content="{{ . }}">
<meta name="twitter:description" content="{{ . }}" />
{{- end }}
{{ "<!-- url -->" | safeHTML }}
{{- with .Permalink | absURL}}
<base href="{{ . }}">
<link rel="canonical" href="{{ or $.Params.canonical . }}"/>
<meta name="url" content="{{ . }}" itemprop="url" />
<meta name="twitter:url" content="{{ . }}" />
<meta property="og:url" content="{{ . }}" />
{{- 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 }}
{{ "<!-- image -->" | safeHTML }}
<meta itemprop="image" content='{{ .Permalink | absURL }}' />
<meta property="og:image" content='{{ .Permalink | absURL }}' />
{{- with .Width }}
<meta property="og:image:width" content='{{ . }}' />
{{- end }}
{{- with .Height }}
<meta property="og:image:height" content='{{ . }}' />
{{- end }}
<meta name="twitter:image" content='{{ .Permalink | absURL }}' />
<meta name="twitter:image:src" content='{{ .Permalink | absURL }}' />
{{- else }}
{{ "<!-- image -->" | safeHTML }}
<meta itemprop="image" content='{{ $staticIcon }}' />
<meta property="og:image" content='{{ $staticIcon }}' />
<meta name="twitter:image" content='{{ $staticIcon }}' />
<meta name="twitter:image:src" content='{{ $staticIcon }}' />
{{- end -}}
{{/*=== author ===*/}}
{{ with or .Params.author .Site.Params.author -}}
{{ "<!-- author -->" | safeHTML }}
<meta property="article:publisher" content="{{ . }}" />
<meta property="og:article:author" content="{{ . }}" />
<meta property="article:author" content="{{ . }}" />
<meta name="author" content="{{ . }}" />
{{- end -}}
{{/*=== published and updated ===*/}}
{{- "<!-- time -->" | safeHTML }}
{{ with .Date }}
<meta property="og:article:published_time" content={{ .Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
<meta property="article:published_time" content={{ .Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
{{ end -}}
{{ with .Lastmod -}}
<meta property="og:updated_time" content={{ .Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
{{ end -}}
{{/*=== section and keywords ===*/}}
{{- "<!-- keywords -->" | safeHTML }}
{{- with.Params.category -}}
<meta name="news_keywords" content="{{ . }}" />
<meta property="article:section" content="{{ . }}" />
{{- end -}}
{{- with .Params.tags }}
<meta name="keywords" content='{{ delimit . " "}}'>
{{- end -}}
{{- if isset .Params "date" -}}
{{ "<!-- article metadata -->" | safeHTML }}
<meta property="og:type" content="article" />
<script defer type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"headline": {{ $title }},
"author": {
"@type": "Person",
"name": "{{ or .Params.author .Site.Params.author }}"
},
"datePublished": "{{ .Date.Format "2006-01-02" }}",
"description": {{ or .Description .Summary }},
"wordCount": {{ .WordCount }},
"mainEntityOfPage": "True",
"dateModified": "{{ .Lastmod.Format "2006-01-02" }}",
"image": {
"@type": "ImageObject",
"url": "{{ with or $cover $icon }}{{ .Permalink | absURL }}{{ end }}"
},
"publisher": {
"@type": "Person",
"name": "{{ or .Params.author .Site.Params.author .Site.Title }}",
"logo": {
"@type": "ImageObject",
"url": {{with $icon}}{{.Permalink}}{{else}}{{$staticIcon}}{{end}}
}
}
}
</script>
{{- else }}
{{ "<!-- webpage metadata -->" | safeHTML }}
<meta property="og:type" content="website" />
<script defer type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": {{ .Permalink }},
"name": "{{ .Site.Title }}",
"logo": {{with $icon}}{{.Permalink}}{{else}}{{$staticIcon}}{{end}}
}
</script>
{{- end -}}
{{/* auxiliary info */}}
{{ "<!-- site presentation -->" | safeHTML }}
{{ with $icon }}
<link rel="shortcut icon" href='{{ .Permalink }}' sizes="{{.Width}}x{{.Height}}">
{{- else -}}
<link rel="shortcut icon" href='{{ $staticIcon }}' sizes="512x512">
{{- end }}
<meta name="theme-color" content="#ffffff" />
<meta name="msapplication-TileColor" content="#ffffff" />
<link rel="sitemap" type="application/xml" title="Sitemap" href="{{ .Site.BaseURL }}sitemap.xml" />
{{ with .OutputFormats.Get "RSS" -}}
<link href="{{ .Permalink }}" rel="feed alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
{{- end }}
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />

View file

@ -1,35 +1,34 @@
<footer class="site-footer"> <footer class="site-footer">
<hr> <hr>
<div class="container"> <div class="container">
<ul class="breadcrumbs"> {{ partial "breadcrumbs.html" . }}
{{ template "breadcrumb" (dict "p1" . "p2" .) }}
</ul>
<a href="#top">back to top</a> <a href="#top">back to top</a>
</div> </div>
</footer> </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"> <script type="text/javascript">
var sc_project=12701041; var sc_project=12701041;
var sc_invisible=1; var sc_invisible=1;
var sc_security="006094ec"; var sc_security="006094ec";
</script> </script>
<script type="text/javascript" <script type="text/javascript"
src="https://www.statcounter.com/counter/counter.js" src="https://www.statcounter.com/counter/counter.js"
async></script> async>
<noscript><div class="statcounter"><a title="Web Analytics </script>
Made Easy - Statcounter" href="https://statcounter.com/" <noscript>
target="_blank"><img class="statcounter" <div class="statcounter">
src="https://c.statcounter.com/12701041/0/006094ec/1/" <a
alt="" title="Web Analytics Made Easy - Statcounter"
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript> 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>

View file

@ -2,16 +2,16 @@
<div class="container"> <div class="container">
<a href="/" class="site-masthead"> <a href="/" class="site-masthead">
<img class="site-icon" width=32 src="/images/people/avatar.png"> <img class="site-icon" width=32 src="/images/people/avatar.png">
<p class="site-title">i'm abdullah tarawneh, creative and technical consultant.</p> <p class="site-title">hi, i'm abdullah tarawneh.</p>
</a> </a>
<nav class="site-nav"> <nav class="site-nav">
<ul> <ul>
{{ $currentPage := . }} {{ $currentPage := . }}
{{ range .Site.Menus.main }} {{ range .Site.Menus.main }}
<li class=' <li
{{ if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }} {{- if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
active class="active"
{{ end }}'> {{ end }}>
<a href="{{ .URL | absLangURL }}"> <a href="{{ .URL | absLangURL }}">
{{ .Pre }} {{ .Pre }}
<span>{{ .Name }}</span> <span>{{ .Name }}</span>

View file

@ -0,0 +1,8 @@
<figure class="quote">
<blockquote>
{{ .Inner }}
</blockquote>
{{ with .Get "cite" }}
<figcaption><cite>{{.}}</cite></figcaption>
{{ end }}
</figure>

View file

@ -0,0 +1,31 @@
<article class="full h-card vcard" id="hcard">
<header>
<img class="u-logo photo" width=120 height=120 src="/images/people/avatar.png" alt="">
</header>
<div class="info">
<p class="p-name n"><span class="p-given-name given-name">Abdullah</span> <span class="p-family-name family-name">Tarawneh</span></p>
<p><a href="https://abdullahtarawneh.com" class="u-url u-uid url">abdullahtarawneh.com</a></p>
<p class="p-note note">More commonly known as <span class="p-nickname nickname" title="preferred name">a</span> or <span class="p-nickname nickname" title="preferred username">trwnh</span></p>
</div>
<dl class="metadata">
<div class="field">
<dt>Email</dt>
<dd><a class="u-email email" href="mailto:a@trwnh.com">a@trwnh.com</a></dd>
</div>
<div class="field">
<dt>XMPP</dt>
<dd><a class="u-impp" href="xmpp:a@trwnh.com">a@trwnh.com</a></dd>
</div>
<div class="field">
<dt>Fediverse</dt>
<dd><a class="u-url" href="https://mastodon.social/@trwnh">mastodon.social/@trwnh</a></dd>
</div>
<div class="field">
<dt>Personal website</dt>
<dd><a class="u-url" href="https://trwnh.com">trwnh.com</a></dd>
</div>
</dl>
</article>

View file

@ -1,3 +1,25 @@
{{ define "head" }}
{{ with .Resources.GetMatch "{*.scss,*.css}" }}
{{ $style := . | toCSS | minify | fingerprint }}
<link
rel="stylesheet"
href="{{ $style.Permalink }}"
integrity="{{ $style.Data.Integrity }}"
media="screen">
{{ end }}
{{ with .Resources.GetMatch "*.js" }}
{{ $js := . | minify | minify | fingerprint }}
<script
type="text/javascript"
src="{{ $js.Permalink }}"
integrity="{{ $js.Data.Integrity }}">
</script>
{{ end }}
{{ end }}
{{ define "main" }} {{ define "main" }}
{{ .Content }} {{ .Content }}
{{ end }} {{ end }}