housekeeping and cleanup, plus new front page
This commit is contained in:
parent
590c6b41f3
commit
a66cf67a00
41 changed files with 757 additions and 739 deletions
|
|
@ -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 {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
*[title] {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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);}
|
||||
85
assets/scss/base/text.scss
Normal file
85
assets/scss/base/text.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
$container-width: 960px;
|
||||
$container-width: 60em;
|
||||
$nav-height: 4em;
|
||||
$header-height: 4em;
|
||||
|
||||
|
|
|
|||
|
|
@ -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%;}
|
||||
}
|
||||
}
|
||||
|
|
@ -34,6 +34,7 @@
|
|||
background: var(--color);
|
||||
color: white;
|
||||
padding: 0.5em;
|
||||
border: 0;
|
||||
border-radius: 0.5em;
|
||||
position: relative;
|
||||
grid-column: span 2;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
0
assets/scss/layouts/_default/list.scss
Normal file
0
assets/scss/layouts/_default/list.scss
Normal file
0
assets/scss/layouts/_default/single.scss
Normal file
0
assets/scss/layouts/_default/single.scss
Normal file
35
assets/scss/layouts/index.scss
Normal file
35
assets/scss/layouts/index.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
.breadcrumbs {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
gap: 0.5em;
|
||||
|
|
@ -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;
|
||||
27
assets/scss/layouts/shortcodes/figquote.scss
Normal file
27
assets/scss/layouts/shortcodes/figquote.scss
Normal 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: '— ';
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
66
assets/scss/layouts/shortcodes/hcard-full.scss
Normal file
66
assets/scss/layouts/shortcodes/hcard-full.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
---
|
||||
+++
|
||||
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
|
||||
|
||||
<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 >}}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
---
|
||||
title: "Blog"
|
||||
---
|
||||
+++
|
||||
title = "Published articles"
|
||||
summary = "Selected thoughts"
|
||||
weight = 90
|
||||
+++
|
||||
|
|
@ -8,7 +8,7 @@ category: "Blog"
|
|||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
---
|
||||
+++
|
||||
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
|
||||
+++
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
---
|
||||
title: "Design portfolio"
|
||||
---
|
||||
+++
|
||||
title = "Design portfolio"
|
||||
summary = "UI / UX ideas"
|
||||
tags = []
|
||||
weight = 30
|
||||
draft = true
|
||||
+++
|
||||
|
|
@ -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
|
||||
|
|
@ -1,3 +1,6 @@
|
|||
---
|
||||
title: "Work"
|
||||
---
|
||||
+++
|
||||
title = "Professional work"
|
||||
summary = "Hire me to help you figure things out."
|
||||
tags = []
|
||||
weight = 20
|
||||
+++
|
||||
|
|
@ -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"
|
||||
+++
|
||||
|
||||
<main id="mastodon">
|
||||
<header class="page-header section">
|
||||
<div class="container">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 216.4144 232.00976">
|
||||
<path fill="#fff" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915"/>
|
||||
<path fill="#3088d4" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675"/>
|
||||
</svg>
|
||||
<h1 class="title">I reorganized and rewrote the docs for an open-source project with millions of users.
|
||||
</h1>
|
||||
<path fill="#fff" d="M211.80734 139.0875c-3.18125 16.36625-28.4925 34.2775-57.5625 37.74875-15.15875 1.80875-30.08375 3.47125-45.99875 2.74125-26.0275-1.1925-46.565-6.2125-46.565-6.2125 0 2.53375.15625 4.94625.46875 7.2025 3.38375 25.68625 25.47 27.225 46.39125 27.9425 21.11625.7225 39.91875-5.20625 39.91875-5.20625l.8675 19.09s-14.77 7.93125-41.08125 9.39c-14.50875.7975-32.52375-.365-53.50625-5.91875C9.23234 213.82 1.40609 165.31125.20859 116.09125c-.365-14.61375-.14-28.39375-.14-39.91875 0-50.33 32.97625-65.0825 32.97625-65.0825C49.67234 3.45375 78.20359.2425 107.86484 0h.72875c29.66125.2425 58.21125 3.45375 74.8375 11.09 0 0 32.975 14.7525 32.975 65.0825 0 0 .41375 37.13375-4.59875 62.915" />
|
||||
<path fill="#3088d4" d="M177.50984 80.077v60.94125h-24.14375v-59.15c0-12.46875-5.24625-18.7975-15.74-18.7975-11.6025 0-17.4175 7.5075-17.4175 22.3525v32.37625H96.20734V85.42325c0-14.845-5.81625-22.3525-17.41875-22.3525-10.49375 0-15.74 6.32875-15.74 18.7975v59.15H38.90484V80.077c0-12.455 3.17125-22.3525 9.54125-29.675 6.56875-7.3225 15.17125-11.07625 25.85-11.07625 12.355 0 21.71125 4.74875 27.8975 14.2475l6.01375 10.08125 6.015-10.08125c6.185-9.49875 15.54125-14.2475 27.8975-14.2475 10.6775 0 19.28 3.75375 25.85 11.07625 6.36875 7.3225 9.54 17.22 9.54 29.675" />
|
||||
</svg>
|
||||
<h1 class="title">I reorganized and rewrote the docs for an open-source project with millions of users.</h1>
|
||||
</div>
|
||||
</header>
|
||||
<section class="section" id="about">
|
||||
<div class="container">
|
||||
<h2 class="title">About the client</h2>
|
||||
<p><a href="https://joinmastodon.org" target="_blank">Mastodon</a> is a free and libre open-source software
|
||||
project that aims to let anyone easily host their own Twitter-like social media website. Started in 2016,
|
||||
the project has since grown due to various migrations, usually spurred by the failures and mistakes of the
|
||||
dominant, centralized social platforms.</p>
|
||||
<p>I have been using Mastodon since November 2016 -- you can <a href="https://mastodon.social/@trwnh"
|
||||
target="_blank">view my profile at mastodon.social/@trwnh</a> if you would like -- and I have grown to
|
||||
quite enjoy my experience there over the years. It reminds me a lot of the early days of Twitter... before
|
||||
<a href="/blog/twitter-not-social" target="_blank">they gave up on being a social network</a>, anyway.</p>
|
||||
<p>One of the things I love most about the culture on there is that it's very much focused on people rather
|
||||
than content or engagement. This significantly lowers social friction and makes everyone more or less
|
||||
approachable. So approachable, in fact, that I could casually reply to the creator and founder of Mastodon
|
||||
and get this gig out of nowhere:</p>
|
||||
<p><a href="https://joinmastodon.org" target="_blank">Mastodon</a> is a free and libre open-source software project that aims to let anyone easily host their own Twitter-like social media website. Started in 2016, the project has since grown due to various migrations, usually spurred by the failures and mistakes of the dominant, centralized social platforms.</p>
|
||||
<p>I have been using Mastodon since November 2016 -- you can <a href="https://mastodon.social/@trwnh" target="_blank">view my profile at mastodon.social/@trwnh</a> if you would like -- and I have grown to quite enjoy my experience there over the years. It reminds me a lot of the early days of Twitter... before <a href="/blog/twitter-not-social" target="_blank">they gave up on being a social network</a>, anyway.</p>
|
||||
<p>One of the things I love most about the culture on there is that it's very much focused on people rather than content or engagement. This significantly lowers social friction and makes everyone more or less approachable. So approachable, in fact, that I could casually reply to the creator and founder of Mastodon and get this gig out of nowhere:</p>
|
||||
|
||||
<div class="conversation">
|
||||
<!--
|
||||
<!--
|
||||
<iframe src="https://mastodon.social/@Gargron/102640868158739158/embed" class="mastodon-embed"
|
||||
style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
|
||||
<script src="https://mastodon.social/embed.js" async="async"></script>
|
||||
|
|
@ -52,61 +41,61 @@ cover: "/images/cover/mastodocs.jpg"
|
|||
<iframe src="https://mastodon.social/@Gargron/102641022258942590/embed" class="mastodon-embed"
|
||||
style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
|
||||
<script src="https://mastodon.social/embed.js" async="async"></script>
|
||||
-->
|
||||
-->
|
||||
|
||||
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;">
|
||||
<a target="_blank" href="https://mastodon.social/@Gargron" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
|
||||
<div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
|
||||
{{< people/gargron >}}
|
||||
</div>
|
||||
<div style="line-height: 1.5">
|
||||
<div style="font-weight: 500;">Eugen</div>
|
||||
<div style="color: #d9e1e8">@Gargron@mastodon.social</div>
|
||||
</div>
|
||||
</a>
|
||||
<div style="font-size: 19px; line-height: 24px;">
|
||||
<p style="margin-bottom: 25px;">
|
||||
I really want the Mastodon documentation to have a good structure rather than just all information thrown together in a pile. I'm not sure how though.
|
||||
</p>
|
||||
<a target="_blank" href="https://mastodon.social/@Gargron/102640868158739158" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;">August 18, 2019, 7:42 PM</a>
|
||||
</div>
|
||||
</article>
|
||||
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;">
|
||||
<a target="_blank" href="https://mastodon.social/@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;">
|
||||
{{< people/gargron>}}
|
||||
</div>
|
||||
<div style="line-height: 1.5">
|
||||
<div style="font-weight: 500;">Eugen</div>
|
||||
<div style="color: #d9e1e8">@Gargron@mastodon.social</div>
|
||||
</div>
|
||||
</a>
|
||||
<div style="font-size: 19px; line-height: 24px;">
|
||||
<p style="margin-bottom: 25px;">
|
||||
I really want the Mastodon documentation to have a good structure rather than just all information thrown together in a pile. I'm not sure how though.
|
||||
</p>
|
||||
<a target="_blank" href="https://mastodon.social/@Gargron/102640868158739158" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;">August 18, 2019, 7:42 PM</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;">
|
||||
<a target="_blank" href="https://mastodon.social/@trwnh" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
|
||||
<div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
|
||||
{{< people/trwnh >}}
|
||||
</div>
|
||||
<div style="line-height: 1.5">
|
||||
<div style="font-weight: 500;">infinite love ⴳ</div>
|
||||
<div style="color: #d9e1e8">@trwnh@mastodon.social</div>
|
||||
</div>
|
||||
</a>
|
||||
<div style="font-size: 19px; line-height: 24px;">
|
||||
<p style="margin-bottom: 25px;">
|
||||
<a style="color: #d9e1e8" href="https://mastodon.social/@Gargron">@Gargron</a> i'd be willing to take a stab at it, having just cleaned up a lot of docs for pixelfed. it's still incomplete but it's much less messy than it used to be. i would need to sit down and try to map it out with you first, though.
|
||||
</p>
|
||||
<a target="_blank" href="https://mastodon.social/@trwnh/102640952580526770" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;">August 18, 2019, 8:04 PM</a>
|
||||
</div>
|
||||
</article>
|
||||
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff; border-bottom: 1px solid #393f4f;">
|
||||
<a target="_blank" href="https://mastodon.social/@trwnh" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
|
||||
<div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
|
||||
{{< people/trwnh>}}
|
||||
</div>
|
||||
<div style="line-height: 1.5">
|
||||
<div style="font-weight: 500;">infinite love ⴳ</div>
|
||||
<div style="color: #d9e1e8">@trwnh@mastodon.social</div>
|
||||
</div>
|
||||
</a>
|
||||
<div style="font-size: 19px; line-height: 24px;">
|
||||
<p style="margin-bottom: 25px;">
|
||||
<a style="color: #d9e1e8" href="https://mastodon.social/@Gargron">@Gargron</a> i'd be willing to take a stab at it, having just cleaned up a lot of docs for pixelfed. it's still incomplete but it's much less messy than it used to be. i would need to sit down and try to map it out with you first, though.
|
||||
</p>
|
||||
<a target="_blank" href="https://mastodon.social/@trwnh/102640952580526770" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;">August 18, 2019, 8:04 PM</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff;">
|
||||
<a target="_blank" href="https://mastodon.social/@Gargron" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
|
||||
<div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
|
||||
{{< people/gargron >}}
|
||||
</div>
|
||||
<div style="line-height: 1.5">
|
||||
<div style="font-weight: 500;">Eugen</div>
|
||||
<div style="color: #d9e1e8">@Gargron@mastodon.social</div>
|
||||
</div>
|
||||
</a>
|
||||
<div style="font-size: 19px; line-height: 24px;">
|
||||
<p style="margin-bottom: 25px;">
|
||||
<a style="color: #d9e1e8" href="https://mastodon.social/@trwnh">@trwnh</a> Okay, let's do it. Paid, of course.
|
||||
</p>
|
||||
<a target="_blank" href="https://mastodon.social/@Gargron/102641022258942590" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;">August 18, 2019, 8:21 PM</a>
|
||||
</div>
|
||||
</article>
|
||||
<article style="width: 100%; max-width: 80ch; padding: 1em; background: #313543; color: #fff;">
|
||||
<a target="_blank" href="https://mastodon.social/@Gargron" style="color: inherit; text-decoration: none; display: flex; margin-bottom: 15px;">
|
||||
<div style="border-radius: 4px; overflow: hidden; margin-right: 10px; width: 48px; height: 48px;">
|
||||
{{< people/gargron>}}
|
||||
</div>
|
||||
<div style="line-height: 1.5">
|
||||
<div style="font-weight: 500;">Eugen</div>
|
||||
<div style="color: #d9e1e8">@Gargron@mastodon.social</div>
|
||||
</div>
|
||||
</a>
|
||||
<div style="font-size: 19px; line-height: 24px;">
|
||||
<p style="margin-bottom: 25px;">
|
||||
<a style="color: #d9e1e8" href="https://mastodon.social/@trwnh">@trwnh</a> Okay, let's do it. Paid, of course.
|
||||
</p>
|
||||
<a target="_blank" href="https://mastodon.social/@Gargron/102641022258942590" style="font-size: 14px; line-height: 18px; margin-top: 25px; color: #606984; display: block;">August 18, 2019, 8:21 PM</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -340,6 +329,7 @@ cover: "/images/cover/mastodocs.jpg"
|
|||
<div class="new card">
|
||||
<h4 class="card__head">REST API</h4>
|
||||
<ul class="card__body">
|
||||
<li>Guidelines and best practices</li>
|
||||
<li>OAuth Scopes</li>
|
||||
</ul>
|
||||
</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
|
||||
</blockquote>
|
||||
<div class="attribution">
|
||||
{{< people/gargron >}}
|
||||
<cite><em>Eugen "Gargron" Rochko</em><br>Mastodon founder<br>& lead developer</cite>
|
||||
{{< people/gargron>}}
|
||||
<cite><em>Eugen "Gargron" Rochko</em><br>Mastodon founder<br>& lead developer</cite>
|
||||
</div>
|
||||
<section class="benefit one">
|
||||
<h3 class="subtitle">There was much less missing information.</h3>
|
||||
<p>During the information architecture phase, a new skeleton was created as a proposed alternative structure.
|
||||
This process made the existing gaps in the old structure more obvious, and therefore those gaps could be
|
||||
filled during the technical writing phase.</p>
|
||||
<h3 class="subtitle">There was much less missing information.</h3>
|
||||
<p>During the information architecture phase, a new skeleton was created as a proposed alternative structure.
|
||||
This process made the existing gaps in the old structure more obvious, and therefore those gaps could be
|
||||
filled during the technical writing phase.</p>
|
||||
</section>
|
||||
<section class="benefit two">
|
||||
<h3 class="subtitle">It was also easier to make additions in an appropriate place.</h3>
|
||||
<p>For example, the following pages were added after completion:</p>
|
||||
<ul>
|
||||
<li>"Rate limits" was added under "REST API", describing how to deal with rate limits on requests made to
|
||||
the REST API.</li>
|
||||
<li>"Bug bounties and responsible disclosure" was added under "Contributing to Mastodon", describing where
|
||||
serious issues should be reported if found.</li>
|
||||
<li>"Running your own server" was added under "Using Mastodon", describing the reasons why a user might want
|
||||
to run their own server and linking to the "Running Mastodon" section.</li>
|
||||
</ul>
|
||||
<p>The clear structure left in place by my information architecture work meant that it was almost immediately
|
||||
clear where to add these pages.</p>
|
||||
<p>For example, the following pages were added after completion:</p>
|
||||
<ul>
|
||||
<li>"Rate limits" was added under "REST API", describing how to deal with rate limits on requests made to
|
||||
the REST API.</li>
|
||||
<li>"Bug bounties and responsible disclosure" was added under "Contributing to Mastodon", describing where
|
||||
serious issues should be reported if found.</li>
|
||||
<li>"Running your own server" was added under "Using Mastodon", describing the reasons why a user might want
|
||||
to run their own server and linking to the "Running Mastodon" section.</li>
|
||||
</ul>
|
||||
<p>The clear structure left in place by my information architecture work meant that it was almost immediately
|
||||
clear where to add these pages.</p>
|
||||
</section>
|
||||
<section class="benefit three">
|
||||
<h3 class="subtitle">The quality and formatting of the docs was vastly improved.</h3>
|
||||
<p>Methods now include the HTTP verb, endpoint, description, return type, OAuth scope, version history, request
|
||||
parameters, and sample response code and payload.</p>
|
||||
<p>Entities now include example payloads, as well as each attribute and its description, type, and version
|
||||
history.</p>
|
||||
<h3 class="subtitle">The quality and formatting of the docs was vastly improved.</h3>
|
||||
<p>Methods now include the HTTP verb, endpoint, description, return type, OAuth scope, version history, request
|
||||
parameters, and sample response code and payload.</p>
|
||||
<p>Entities now include example payloads, as well as each attribute and its description, type, and version
|
||||
history.</p>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -453,9 +443,15 @@ cover: "/images/cover/mastodocs.jpg"
|
|||
<h2 class="title">Maybe you'd appreciate me doing something similar for you?</h2>
|
||||
<img src="/images/cover/mastodocs.jpg" alt="Mastodon documentation landing page" width=1280 height=720>
|
||||
<div class="buttons">
|
||||
<a href="https://docs.joinmastodon.org" class="demo secondary button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width=16><path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z"/></svg>Check out the live
|
||||
<a href="https://docs.joinmastodon.org" class="demo secondary button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" width=16>
|
||||
<path fill="currentColor" d="M336.5 160C322 70.7 287.8 8 248 8s-74 62.7-88.5 152h177zM152 256c0 22.2 1.2 43.5 3.3 64h185.3c2.1-20.5 3.3-41.8 3.3-64s-1.2-43.5-3.3-64H155.3c-2.1 20.5-3.3 41.8-3.3 64zm324.7-96c-28.6-67.9-86.5-120.4-158-141.6 24.4 33.8 41.2 84.7 50 141.6h108zM177.2 18.4C105.8 39.6 47.8 92.1 19.3 160h108c8.7-56.9 25.5-107.8 49.9-141.6zM487.4 192H372.7c2.1 21 3.3 42.5 3.3 64s-1.2 43-3.3 64h114.6c5.5-20.5 8.6-41.8 8.6-64s-3.1-43.5-8.5-64zM120 256c0-21.5 1.2-43 3.3-64H8.6C3.2 212.5 0 233.8 0 256s3.2 43.5 8.6 64h114.6c-2-21-3.2-42.5-3.2-64zm39.5 96c14.5 89.3 48.7 152 88.5 152s74-62.7 88.5-152h-177zm159.3 141.6c71.4-21.2 129.4-73.7 158-141.6h-108c-8.8 56.9-25.6 107.8-50 141.6zM19.3 352c28.6 67.9 86.5 120.4 158 141.6-24.4-33.8-41.2-84.7-50-141.6h-108z" />
|
||||
</svg>Check out the live
|
||||
version</a>
|
||||
<a href="mailto:a@trwnh.com" class="email primary button"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <g transform="matrix(1 0 0 -1 30.373 1252.3)"> <path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor"/> </g> </svg>Email me a proposal</a>
|
||||
<a href="mailto:a@trwnh.com" class="email primary button"><svg version="1.1" viewBox="0 -256 1850 1850" width=16 height=16 xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
|
||||
<g transform="matrix(1 0 0 -1 30.373 1252.3)">
|
||||
<path d="m1792 826v-794q0-66-47-113t-113-47h-1472q-66 0-113 47t-47 113v794q44-49 101-87 362-246 497-345 57-42 92.5-65.5t94.5-48 110-24.5h2q51 0 110 24.5t94.5 48 92.5 65.5q170 123 498 345 57 39 100 87zm0 294q0-79-49-151t-122-123q-376-261-468-325-10-7-42.5-30.5t-54-38-52-32.5-57.5-27-50-9h-2q-23 0-50 9t-57.5 27-52 32.5-54 38-42.5 30.5q-91 64-262 182.5t-205 142.5q-62 42-117 115.5t-55 136.5q0 78 41.5 130t118.5 52h1472q65 0 112.5-47t47.5-113z" fill="currentColor" />
|
||||
</g>
|
||||
</svg>Email me a proposal</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -53,6 +53,7 @@
|
|||
}
|
||||
}
|
||||
.companies {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
font-size: 3em;
|
||||
|
|
@ -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 = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" width=16 height=16><path fill="currentColor" d="M488 312.7V456c0 13.3-10.7 24-24 24H348c-6.6 0-12-5.4-12-12V356c0-6.6-5.4-12-12-12h-72c-6.6 0-12 5.4-12 12v112c0 6.6-5.4 12-12 12H112c-13.3 0-24-10.7-24-24V312.7c0-3.6 1.6-7 4.4-9.3l188-154.8c4.4-3.6 10.8-3.6 15.3 0l188 154.8c2.7 2.3 4.3 5.7 4.3 9.3zm83.6-60.9L488 182.9V44.4c0-6.6-5.4-12-12-12h-56c-6.6 0-12 5.4-12 12V117l-89.5-73.7c-17.7-14.6-43.3-14.6-61 0L4.4 251.8c-5.1 4.2-5.8 11.8-1.6 16.9l25.5 31c4.2 5.1 11.8 5.8 16.9 1.6l235.2-193.7c4.4-3.6 10.8-3.6 15.3 0l235.2 193.7c5.1 4.2 12.7 3.5 16.9-1.6l25.5-31c4.2-5.2 3.4-12.7-1.7-16.9z"/></svg>'
|
||||
name = "Home"
|
||||
url = "/"
|
||||
|
|
@ -21,7 +26,7 @@ weight = 10
|
|||
|
||||
[[menu.main]]
|
||||
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"
|
||||
url = "/work/"
|
||||
weight = 20
|
||||
|
|
@ -35,7 +40,7 @@ weight = 30
|
|||
|
||||
#[[menu.main]]
|
||||
#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"
|
||||
#url = "/design/"
|
||||
#weight = 40
|
||||
|
|
@ -9,111 +9,16 @@
|
|||
{{ $js := resources.Get "js/main.js" | minify | minify | fingerprint }}
|
||||
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" media="screen">
|
||||
<script type="text/javascript" src="{{ $js.Permalink }}" integrity="{{ $js.Data.Integrity }}"></script>
|
||||
{{ $icon := "images/people/avatar.png" | absURL }}
|
||||
<link rel="shortcut icon" href='{{ $icon }}' sizes="400x400">
|
||||
{{ if .IsPage }}<meta name="keywords" content='{{ delimit .Params.tags " "}}'>{{ end }}
|
||||
{{ if .IsHome }}<title>{{ .Site.Title }}</title>
|
||||
<title itemprop="name">{{ .Site.Title }}</title>
|
||||
<meta property="og:title" content="{{ .Site.Title }}" />
|
||||
<meta name="twitter:title" content="{{ .Site.Title }}" />
|
||||
<meta itemprop="name" content="{{ .Site.Title }}" />
|
||||
{{ else }}<title>{{ .Title }} | {{ .Site.Title }}</title>
|
||||
<title itemprop="name">{{ .Title }} | {{ .Site.Title }}</title>
|
||||
<meta property="og:title" content="{{ .Title }} | {{ .Site.Title }}" />
|
||||
<meta name="twitter:title" content="{{ .Title }} | {{ .Site.Title }}" />
|
||||
<meta itemprop="name" content="{{ .Title }} | {{ .Site.Title }}" />{{ end }}
|
||||
<meta name="application-name" content="{{ .Site.Title }}" />
|
||||
<meta property="og:site_name" content="{{ .Site.Title }}" />
|
||||
<meta name="description" content="{{ .Summary }}">
|
||||
<meta itemprop="description" content="{{ .Summary }}" />
|
||||
<meta property="og:description" content="{{ .Summary }}" />
|
||||
<meta name="twitter:description" content="{{ .Summary }}" />
|
||||
<base href="{{ .Permalink }}">
|
||||
<link rel="canonical" href="{{ .Permalink }}" itemprop="url" />
|
||||
<meta name="url" content="{{ .Permalink }}" />
|
||||
<meta name="twitter:url" content="{{ .Permalink }}" />
|
||||
<meta property="og:url" content="{{ .Permalink }}" />
|
||||
{{ with .Params.cover }}<meta itemprop="image" content="{{ . | absURL }}" />
|
||||
<meta property="og:image" content="{{ . | absURL }}" />
|
||||
<meta name="twitter:image" content="{{ . | absURL }}" />
|
||||
<meta name="twitter:image:src" content="{{ . | absURL }}" />{{ else }}
|
||||
<meta itemprop="image" content='{{ $icon }}' />
|
||||
<meta property="og:image" content='{{ $icon }}' />
|
||||
<meta name="twitter:image" content='{{ $icon }}' />
|
||||
<meta name="twitter:image:src" content='{{ $icon }}' />{{ end }}
|
||||
<meta property="og:updated_time" content={{ .Lastmod.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
|
||||
{{ if isset .Params "date" }}<meta property="og:type" content="article" />
|
||||
<script defer type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "Article",
|
||||
"headline": {{ .Title }},
|
||||
"author": {
|
||||
"@type": "Person",
|
||||
"name": "{{ .Params.author }}"
|
||||
},
|
||||
"datePublished": "{{ .Date.Format "2006-01-02" }}",
|
||||
"description": {{ .Summary }},
|
||||
"wordCount": {{ .WordCount }},
|
||||
"mainEntityOfPage": "True",
|
||||
"dateModified": "{{ .Lastmod.Format "2006-01-02" }}",
|
||||
"image": {
|
||||
"@type": "imageObject",
|
||||
"url": "{{ with .Params.cover }}{{ . }}{{ end }}"
|
||||
},
|
||||
"publisher": {
|
||||
"@type": "Person",
|
||||
"name": "{{ .Site.Title }}",
|
||||
"logo": {
|
||||
"@type": "imageObject",
|
||||
"url": {{ $icon }}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{{ else }}<meta property="og:type" content="website" />
|
||||
<meta name="author" content="{{ .Params.author }}" />
|
||||
<script defer type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "WebSite",
|
||||
"url": {{ .Permalink }},
|
||||
"name": "{{ .Title }}",
|
||||
"logo": {{ $icon }}
|
||||
}
|
||||
</script>{{ end }}
|
||||
<meta property="article:publisher" content="{{ .Params.author }}" />
|
||||
{{ with.Params.author }}<meta property="og:article:author" content="{{ . }}" />
|
||||
<meta property="article:author" content="{{ . }}" />
|
||||
<meta name="author" content="{{ . }}" />{{ end }}
|
||||
{{ with.Params.category }}<meta name="news_keywords" content="{{ . }}" />
|
||||
<meta property="article:section" content="{{ . }}" />{{ end }}
|
||||
<meta property="og:article:published_time" content={{ .Date.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
|
||||
<meta property="article:published_time" content={{ .Date.Format "2006-01-02T15:04:05Z0700" | safeHTML }} />
|
||||
<link rel="sitemap" type="application/xml" title="Sitemap" href="{{ .Site.BaseURL }}sitemap.xml" />
|
||||
{{ with .OutputFormats.Get "RSS" }}<link href="{{ .Permalink }}" rel="alternate" type="application/rss+xml" title="{{ $.Site.Title }}" />
|
||||
<link href="{{ .Permalink }}" rel="feed" type="application/rss+xml" title="{{ $.Site.Title }}" />{{ end }}
|
||||
<meta name="robots" content="index,follow" />
|
||||
<meta name="googlebot" content="index,follow" />
|
||||
<link rel="manifest" href="{{ .Site.BaseURL }}manifest.json" />
|
||||
<meta name="theme-color" content="#ffffff" />
|
||||
<meta name="msapplication-TileColor" content="#ffffff" />
|
||||
<meta name="imagemode" content="force" />
|
||||
<meta name="coverage" content="Worldwide" />
|
||||
<meta name="distribution" content="Global" />
|
||||
<meta name="HandheldFriendly" content="True" />
|
||||
<meta name="msapplication-tap-highlight" content="no" />
|
||||
<meta name="apple-mobile-web-app-title" content="{{ .Site.Title }}" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
<meta name="apple-touch-fullscreen" content="yes" />
|
||||
{{ partial "seo.html" . }}
|
||||
{{ block "head" . }}
|
||||
{{ end }}
|
||||
</head>
|
||||
<body>
|
||||
{{ block "body" . }}
|
||||
{{ partial "site-header.html" . }}
|
||||
{{ block "main" . }}
|
||||
{{ end }}
|
||||
{{ partial "site-footer.html" .}}
|
||||
{{ end }}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,18 +5,25 @@
|
|||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
</div>
|
||||
</header>
|
||||
{{ with .Content }}
|
||||
<section>
|
||||
<div class="container">
|
||||
{{.}}
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
<section class="section list">
|
||||
<div class="container">
|
||||
{{ range .Pages }}
|
||||
<article class="list-item">
|
||||
<a class="list-item__link" href="{{ .Permalink }}">
|
||||
{{ with .Params.cover }}
|
||||
<img class="list-item__image" src="{{.}}">
|
||||
{{end}}
|
||||
<h2 class="list-item__title">{{ .Title }}</h2>
|
||||
</a>
|
||||
<article class="list-item">
|
||||
<a class="list-item__link" href="{{ .Permalink }}">
|
||||
{{- $cover := ($.Resources.ByType "image").GetMatch "{*cover*,*thumbnail*,*featured*}" -}}
|
||||
{{ with $cover }}
|
||||
<img class="list-item__image" src="{{.Permalink}}">
|
||||
{{end}}
|
||||
<h2 class="list-item__title">{{ .Title }}</h2>
|
||||
</a>
|
||||
<p class="list-item__summary">{{.Summary}}</p>
|
||||
<datetime class="list-item__date">{{ .Date.Format "January 2, 2006" }}</datetime>
|
||||
</article>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,63 +1,23 @@
|
|||
{{ define "main" }}
|
||||
<main id="index">
|
||||
<header class="section" id="summary">
|
||||
<div class="container">
|
||||
<article class="vcard h-card">
|
||||
<div class="banner"><img src="/images/people/avatar.png" alt="me" class="photo u-photo"></div>
|
||||
<dl>
|
||||
<dt>full name</dt>
|
||||
<dd class="fn n p-name"><span class="given-name">abdullah</span> <span class="family-name">tarawneh</span></dd>
|
||||
<dt>preferred name</dt>
|
||||
<dd class="nickname p-nickname">a</dd>
|
||||
<dt>email (smtp)</dt>
|
||||
<dd><a href="mailto:a@trwnh.com" class="email u-email">a@trwnh.com</a></dd>
|
||||
<dt>chat (xmpp)</dt>
|
||||
<dd><a href="xmpp:a@trwnh.com" class="url u-impp">a@trwnh.com</a></dd>
|
||||
<dt>social (activitypub)</dt>
|
||||
<dd><a href="https://mastodon.social/@trwnh" rel="me" class="url u-url">mastodon.social/@trwnh</a></dd>
|
||||
<dt>notes</dt>
|
||||
<dd class="note p-note">i have approximate knowledge of many things. perpetual student. (nb/ace/they)</dd>
|
||||
</dl>
|
||||
</article>
|
||||
<div class="quotes">
|
||||
<h2 class="heading">things people have said to me</h2>
|
||||
<div class="quotes-container">
|
||||
<blockquote>
|
||||
<p>it's scary how much you know.</p>
|
||||
</blockquote>
|
||||
<blockquote style="text-align: right">
|
||||
<p>you're the first person i've met that keeps a spreadsheet of their lightbulbs.</p>
|
||||
</blockquote>
|
||||
<blockquote style="text-align: center">
|
||||
<p>VERY MUCH not garbage [...] a worthwhile human</p>
|
||||
</blockquote>
|
||||
<blockquote>
|
||||
<p>honestly, i trust your judgement more than i trust my own.</p>
|
||||
</blockquote>
|
||||
</div>
|
||||
<main class="index">
|
||||
<div id="wiki">
|
||||
<header>
|
||||
<div class="container">
|
||||
<h1>{{.Title}}</h1>
|
||||
<span>From abdullahtarawneh.com, the free website</span>
|
||||
<p>{{.Summary}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<section class="" id="birdsounds">
|
||||
<div class="container">
|
||||
<div class="info">
|
||||
<picture>
|
||||
<source type="image/avif" srcset="/images/logos/koken_y.avif">
|
||||
<img class="logo" src="/images/logos/koken_y.png" alt="birdsounds.media logo">
|
||||
</picture>
|
||||
<a href="https://birdsounds.media" class="">view my photos</a>
|
||||
</header>
|
||||
<nav>
|
||||
<div class="container">
|
||||
{{.TableOfContents}}
|
||||
</div>
|
||||
<picture>
|
||||
<source type="image/avif" srcset="/images/soulpunx.avif">
|
||||
<img class="photo" src="/images/soulpunx.jpg" alt="#soulpunx">
|
||||
</picture>
|
||||
</div>
|
||||
</section>
|
||||
<section class="section" id="updates">
|
||||
<div class="container">
|
||||
<h2 class="heading">latest updates</h2>
|
||||
<p>2022-07-04: currently working on my websites, trying to do some documentation for a personal project, and looking for work. check out the "work" tab of this site for my elevator pitch.</p>
|
||||
</div>
|
||||
</section>
|
||||
</nav>
|
||||
<section>
|
||||
<div class="container">
|
||||
{{ .Content }}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
{{ end }}
|
||||
20
layouts/partials/breadcrumbs.html
Normal file
20
layouts/partials/breadcrumbs.html
Normal 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 }}
|
||||
16
layouts/partials/name.html
Normal file
16
layouts/partials/name.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
{{ $firstH1 :=
|
||||
(
|
||||
substr
|
||||
(
|
||||
delimit
|
||||
(
|
||||
findRE
|
||||
"^#{1} ([^{\n]+)"
|
||||
.RawContent
|
||||
1
|
||||
)
|
||||
""
|
||||
)
|
||||
2
|
||||
)
|
||||
}}
|
||||
143
layouts/partials/seo.html
Normal file
143
layouts/partials/seo.html
Normal 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" />
|
||||
|
|
@ -1,35 +1,34 @@
|
|||
<footer class="site-footer">
|
||||
<hr>
|
||||
<div class="container">
|
||||
<ul class="breadcrumbs">
|
||||
{{ template "breadcrumb" (dict "p1" . "p2" .) }}
|
||||
</ul>
|
||||
{{ partial "breadcrumbs.html" . }}
|
||||
<a href="#top">back to top</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{{ define "breadcrumb" }}
|
||||
{{ if .p1.Parent }}
|
||||
{{ template "breadcrumb" (dict "p1" .p1.Parent "p2" .p2 ) }}
|
||||
{{ else if not .p1.IsHome }}
|
||||
{{ template "breadcrumb" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
|
||||
{{ end }}
|
||||
<li{{ if eq .p1 .p2 }} class="active"{{ end }}>
|
||||
<a href="{{ .p1.RelPermalink }}">{{ .p1.Title }}</a>
|
||||
</li>
|
||||
{{ end }}
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
var sc_project=12701041;
|
||||
var sc_invisible=1;
|
||||
var sc_security="006094ec";
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
</script>
|
||||
<script type="text/javascript"
|
||||
src="https://www.statcounter.com/counter/counter.js"
|
||||
async></script>
|
||||
<noscript><div class="statcounter"><a title="Web Analytics
|
||||
Made Easy - Statcounter" href="https://statcounter.com/"
|
||||
target="_blank"><img class="statcounter"
|
||||
src="https://c.statcounter.com/12701041/0/006094ec/1/"
|
||||
alt=""
|
||||
referrerPolicy="no-referrer-when-downgrade"></a></div></noscript>
|
||||
async>
|
||||
</script>
|
||||
<noscript>
|
||||
<div class="statcounter">
|
||||
<a
|
||||
title="Web Analytics Made Easy - Statcounter"
|
||||
href="https://statcounter.com/"
|
||||
target="_blank"
|
||||
>
|
||||
<img class="statcounter"
|
||||
src="https://c.statcounter.com/12701041/0/006094ec/1/"
|
||||
alt=""
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</noscript>
|
||||
|
|
@ -2,16 +2,16 @@
|
|||
<div class="container">
|
||||
<a href="/" class="site-masthead">
|
||||
<img class="site-icon" width=32 src="/images/people/avatar.png">
|
||||
<p class="site-title">i'm abdullah tarawneh, creative and technical consultant.</p>
|
||||
<p class="site-title">hi, i'm abdullah tarawneh.</p>
|
||||
</a>
|
||||
<nav class="site-nav">
|
||||
<ul>
|
||||
{{ $currentPage := . }}
|
||||
{{ range .Site.Menus.main }}
|
||||
<li class='
|
||||
{{ if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
|
||||
active
|
||||
{{ end }}'>
|
||||
<li
|
||||
{{- if or ($currentPage.IsMenuCurrent "main" .) (eq $currentPage.Section .Identifier) }}
|
||||
class="active"
|
||||
{{ end }}>
|
||||
<a href="{{ .URL | absLangURL }}">
|
||||
{{ .Pre }}
|
||||
<span>{{ .Name }}</span>
|
||||
|
|
|
|||
8
layouts/shortcodes/figquote.html
Normal file
8
layouts/shortcodes/figquote.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<figure class="quote">
|
||||
<blockquote>
|
||||
{{ .Inner }}
|
||||
</blockquote>
|
||||
{{ with .Get "cite" }}
|
||||
<figcaption><cite>{{.}}</cite></figcaption>
|
||||
{{ end }}
|
||||
</figure>
|
||||
31
layouts/shortcodes/hcard-full.html
Normal file
31
layouts/shortcodes/hcard-full.html
Normal 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>
|
||||
|
|
@ -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" }}
|
||||
{{ .Content }}
|
||||
{{ end }}
|
||||
Loading…
Reference in a new issue