cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: additional formatting w/prettier

Browse source
This commit is contained in:
Cory Dransfeldt 2023-03-25 14:09:26 -07:00
parent ea75e585e1
commit ee77555c32
No known key found for this signature in database
39 changed files with 1544 additions and 1584 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
.eslintrc.json
View file

@ -1,34 +1,25 @@
{
"env": {
"browser": true,
"commonjs": true,
"es2020": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 11
},
"rules": {
"indent": [
"error",
2
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
],
"array-element-newline": ["error", {
"ArrayExpression": "consistent",
"ArrayPattern": { "minItems": 3 }
}]
}
"env": {
"browser": true,
"commonjs": true,
"es2020": true,
"node": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 11
},
"rules": {
"indent": ["error", 2],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "single"],
"semi": ["error", "never"],
"array-element-newline": [
"error",
{
"ArrayExpression": "consistent",
"ArrayPattern": { "minItems": 3 }
}
]
}
}

6
.github/dependabot.yml vendored
View file

@ -1,6 +1,6 @@
version: 2
updates:
- package-ecosystem: "npm"
directory: "/"
- package-ecosystem: 'npm'
directory: '/'
schedule:
interval: "daily"
interval: 'daily'

28
.github/workflows/manual-build.yaml vendored
View file

@ -1,18 +1,18 @@
name: Manual Vercel build
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on: [workflow_dispatch]
jobs:
cron:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
cron:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

32
.github/workflows/scheduled-build.yaml vendored
View file

@ -1,20 +1,20 @@
name: Scheduled Vercel build
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
schedule:
- cron: '0 * * * *'
schedule:
- cron: '0 * * * *'
jobs:
cron:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
cron:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

68
config/dateFilters.js
View file

@ -1,44 +1,44 @@
const { DateTime } = require('luxon')
module.exports = {
dateForFeed: (date) => {
return new Date(date).toISOString()
},
toDateTime: (date) => {
const formatted = DateTime.fromISO(date)
dateForFeed: (date) => {
return new Date(date).toISOString()
},
toDateTime: (date) => {
const formatted = DateTime.fromISO(date)
const trail = (number) => {
return parseInt(number, 10) < 10 ? `0${number}` : number
}
const trail = (number) => {
return parseInt(number, 10) < 10 ? `0${number}` : number
}
return `${formatted.year}-${trail(formatted.month)}-${trail(formatted.day)} ${trail(
formatted.hour
)}:${trail(formatted.minute)}`
},
toDateTimeFromUnix: (date) => {
const formatted = DateTime.fromSeconds(parseInt(date, 10))
return `${formatted.year}-${trail(formatted.month)}-${trail(formatted.day)} ${trail(
formatted.hour
)}:${trail(formatted.minute)}`
},
toDateTimeFromUnix: (date) => {
const formatted = DateTime.fromSeconds(parseInt(date, 10))
const trail = (number) => {
return parseInt(number, 10) < 10 ? `0${number}` : number
}
const trail = (number) => {
return parseInt(number, 10) < 10 ? `0${number}` : number
}
return `${trail(formatted.month)}.${trail(formatted.day)}.${formatted.year} ${trail(
formatted.hour
)}:${trail(formatted.minute)}`
},
isoDateOnly: (date) => {
let d = new Date(date)
let month = '' + (d.getMonth() + 1)
let day = '' + d.getDate()
let year = d.getFullYear()
return `${trail(formatted.month)}.${trail(formatted.day)}.${formatted.year} ${trail(
formatted.hour
)}:${trail(formatted.minute)}`
},
isoDateOnly: (date) => {
let d = new Date(date)
let month = '' + (d.getMonth() + 1)
let day = '' + d.getDate()
let year = d.getFullYear()
if (month.length < 2) month = '0' + month
if (day.length < 2) day = '0' + day
if (month.length < 2) month = '0' + month
if (day.length < 2) day = '0' + day
return [month, day, year].join('.')
},
rssLastUpdatedDate: (collection) => {
if (!collection || !collection.length) return ''
return collection[0].publishedAt
},
return [month, day, year].join('.')
},
rssLastUpdatedDate: (collection) => {
if (!collection || !collection.length) return ''
return collection[0].publishedAt
},
}

116
config/filters.js
View file

@ -2,66 +2,66 @@ const marked = require('marked')
const sanitizeHTML = require('sanitize-html')
module.exports = {
trim: (string, limit) => {
return string.length <= limit ? string : `${string.slice(0, limit)}...`
},
postPath: (path) => {
if (path.includes('micro/')) return path
return `/micro/${path}`
},
stripIndex: (path) => {
return path.replace('/index.html', '/')
},
mdToHtml: (content) => {
return marked.parse(content)
},
getFirstAttachment: (post) => {
if (post && post.attachments && post.attachments.length > 0) {
return post.attachments[0].url ? post.attachments[0].url : post.attachments[0]
trim: (string, limit) => {
return string.length <= limit ? string : `${string.slice(0, limit)}...`
},
postPath: (path) => {
if (path.includes('micro/')) return path
return `/micro/${path}`
},
stripIndex: (path) => {
return path.replace('/index.html', '/')
},
mdToHtml: (content) => {
return marked.parse(content)
},
getFirstAttachment: (post) => {
if (post && post.attachments && post.attachments.length > 0) {
return post.attachments[0].url ? post.attachments[0].url : post.attachments[0]
}
return '/assets/img/social-card.png'
},
webmentionsByUrl: (webmentions, url) => {
const allowedTypes = ['mention-of', 'in-reply-to', 'like-of', 'repost-of']
const data = {
'like-of': [],
'repost-of': [],
'in-reply-to': [],
}
const hasRequiredFields = (entry) => {
const { author, published, content } = entry
return author.name && published && content
}
const filtered =
webmentions
?.filter((entry) => entry['wm-target'] === `https://coryd.dev${url}`)
.filter((entry) => allowedTypes.includes(entry['wm-property'])) || []
filtered.forEach((m) => {
if (data[m['wm-property']]) {
const isReply = m['wm-property'] === 'in-reply-to'
const isValidReply = isReply && hasRequiredFields(m)
if (isReply) {
if (isValidReply) {
m.sanitized = sanitizeHTML(m.content.html)
data[m['wm-property']].unshift(m)
}
return
}
return '/assets/img/social-card.png'
},
webmentionsByUrl: (webmentions, url) => {
const allowedTypes = ['mention-of', 'in-reply-to', 'like-of', 'repost-of']
data[m['wm-property']].unshift(m)
}
})
const data = {
'like-of': [],
'repost-of': [],
'in-reply-to': [],
}
data['in-reply-to'].sort((a, b) =>
a.published > b.published ? 1 : b.published > a.published ? -1 : 0
)
const hasRequiredFields = (entry) => {
const { author, published, content } = entry
return author.name && published && content
}
const filtered =
webmentions
?.filter((entry) => entry['wm-target'] === `https://coryd.dev${url}`)
.filter((entry) => allowedTypes.includes(entry['wm-property'])) || []
filtered.forEach((m) => {
if (data[m['wm-property']]) {
const isReply = m['wm-property'] === 'in-reply-to'
const isValidReply = isReply && hasRequiredFields(m)
if (isReply) {
if (isValidReply) {
m.sanitized = sanitizeHTML(m.content.html)
data[m['wm-property']].unshift(m)
}
return
}
data[m['wm-property']].unshift(m)
}
})
data['in-reply-to'].sort((a, b) =>
a.published > b.published ? 1 : b.published > a.published ? -1 : 0
)
return data
},
return data
},
}

16
config/mediaFilters.js
View file

@ -1,12 +1,12 @@
const ALBUM_DENYLIST = ['no-love-deep-web']
module.exports = {
artist: (media) =>
`https://cdn.coryd.dev/artists/${media.replace(/\s+/g, '-').toLowerCase()}.jpg`,
album: (media) => {
const img = !ALBUM_DENYLIST.includes(media.name.replace(/\s+/g, '-').toLowerCase())
? media.image[media.image.length - 1]['#text']
: `https://cdn.coryd.dev/artists/${media.name.replace(/\s+/g, '-').toLowerCase()}.jpg`
return img
},
artist: (media) =>
`https://cdn.coryd.dev/artists/${media.replace(/\s+/g, '-').toLowerCase()}.jpg`,
album: (media) => {
const img = !ALBUM_DENYLIST.includes(media.name.replace(/\s+/g, '-').toLowerCase())
? media.image[media.image.length - 1]['#text']
: `https://cdn.coryd.dev/artists/${media.name.replace(/\s+/g, '-').toLowerCase()}.jpg`
return img
},
}

4
config/rssLastUpdated.js
View file

@ -1,6 +1,6 @@
const { DateTime } = require('luxon')
module.exports = (collection) => {
if (!collection || !collection.length) return ''
return collection[0].publishedAt
if (!collection || !collection.length) return ''
return collection[0].publishedAt
}

5
package.json
View file

@ -53,9 +53,12 @@
"tailwindcss": "^3.0.18"
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": [
"**/*.{js,jsx,ts,tsx,json}": [
"npx prettier --write",
"npx eslint --fix"
],
"**/*.{scss}": [
"npx prettier --write"
]
}
}

16
src/assets/scripts/isDarkMode.js
View file

@ -1,10 +1,10 @@
;(function () {
const isDarkMode = () =>
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
if (isDarkMode()) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
const isDarkMode = () =>
localStorage.theme === 'dark' ||
(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
if (isDarkMode()) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
})()

2
src/assets/styles/index.css
View file

@ -1,5 +1,5 @@
.header-anchor {
text-decoration: none!important;
text-decoration: none !important;
}
h1 > a.header-anchor {

380
src/assets/styles/prism.css
View file

@ -1,138 +1,138 @@
:root {
--background: #282a36;
--comment: #6272a4;
--foreground: #f8f8f2;
--selection: #44475a;
--cyan: #8be9fd;
--green: #50fa7b;
--orange: #ffb86c;
--pink: #ff79c6;
--purple: #bd93f9;
--red: #ff5555;
--yellow: #f1fa8c;
--background-30: #282a3633;
--comment-30: #6272a433;
--foreground-30: #f8f8f233;
--selection-30: #44475a33;
--cyan-30: #8be9fd33;
--green-30: #50fa7b33;
--orange-30: #ffb86c33;
--pink-30: #ff79c633;
--purple-30: #bd93f933;
--red-30: #ff555533;
--yellow-30: #f1fa8c33;
--background-40: #282a3666;
--comment-40: #6272a466;
--foreground-40: #f8f8f266;
--selection-40: #44475a66;
--cyan-40: #8be9fd66;
--green-40: #50fa7b66;
--orange-40: #ffb86c66;
--pink-40: #ff79c666;
--purple-40: #bd93f966;
--red-40: #ff555566;
--yellow-40: #f1fa8c66;
--background: #282a36;
--comment: #6272a4;
--foreground: #f8f8f2;
--selection: #44475a;
--cyan: #8be9fd;
--green: #50fa7b;
--orange: #ffb86c;
--pink: #ff79c6;
--purple: #bd93f9;
--red: #ff5555;
--yellow: #f1fa8c;
--background-30: #282a3633;
--comment-30: #6272a433;
--foreground-30: #f8f8f233;
--selection-30: #44475a33;
--cyan-30: #8be9fd33;
--green-30: #50fa7b33;
--orange-30: #ffb86c33;
--pink-30: #ff79c633;
--purple-30: #bd93f933;
--red-30: #ff555533;
--yellow-30: #f1fa8c33;
--background-40: #282a3666;
--comment-40: #6272a466;
--foreground-40: #f8f8f266;
--selection-40: #44475a66;
--cyan-40: #8be9fd66;
--green-40: #50fa7b66;
--orange-40: #ffb86c66;
--pink-40: #ff79c666;
--purple-40: #bd93f966;
--red-40: #ff555566;
--yellow-40: #f1fa8c66;
}
pre::-webkit-scrollbar {
width: 14px;
width: 14px;
}
pre::-webkit-scrollbar-track {
background-color: var(--comment);
border-radius: 0;
background-color: var(--comment);
border-radius: 0;
}
pre::-webkit-scrollbar-thumb {
background-color: var(--purple);
border-radius: 0;
background-color: var(--purple);
border-radius: 0;
}
code[class*='language-'] ::-moz-selection,
code[class*='language-']::-moz-selection,
pre[class*='language-'] ::-moz-selection,
pre[class*='language-']::-moz-selection {
text-shadow: none;
background-color: var(--selection);
text-shadow: none;
background-color: var(--selection);
}
code[class*='language-'] ::selection,
code[class*='language-']::selection,
pre[class*='language-'] ::selection,
pre[class*='language-']::selection {
text-shadow: none;
background-color: var(--selection);
text-shadow: none;
background-color: var(--selection);
}
pre.line-numbers {
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
position: relative;
padding-left: 3.8em;
counter-reset: linenumber;
}
pre.line-numbers > code {
position: relative;
white-space: inherit;
position: relative;
white-space: inherit;
}
.line-numbers .line-numbers-rows {
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em;
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: absolute;
pointer-events: none;
top: 0;
font-size: 100%;
left: -3.8em;
width: 3em;
letter-spacing: -1px;
border-right: 1px solid #999;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.line-numbers-rows > span {
pointer-events: none;
display: block;
counter-increment: linenumber;
pointer-events: none;
display: block;
counter-increment: linenumber;
}
.line-numbers-rows > span:before {
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
content: counter(linenumber);
color: #999;
display: block;
padding-right: 0.8em;
text-align: right;
}
div.code-toolbar {
position: relative;
position: relative;
}
div.code-toolbar > .toolbar {
position: absolute;
top: 0.3em;
right: 0.2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
position: absolute;
top: 0.3em;
right: 0.2em;
transition: opacity 0.3s ease-in-out;
opacity: 0;
}
div.code-toolbar:hover > .toolbar {
opacity: 1;
opacity: 1;
}
div.code-toolbar > .toolbar .toolbar-item {
display: inline-block;
padding-right: 20px;
display: inline-block;
padding-right: 20px;
}
div.code-toolbar > .toolbar a {
cursor: pointer;
cursor: pointer;
}
div.code-toolbar > .toolbar button {
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
background: 0 0;
border: 0;
color: inherit;
font: inherit;
line-height: normal;
overflow: visible;
padding: 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
div.code-toolbar > .toolbar a,
div.code-toolbar > .toolbar button,
div.code-toolbar > .toolbar span {
color: var(--foreground);
font-size: 0.8em;
padding: 0.5em;
background: var(--comment);
border-radius: 0.5em;
color: var(--foreground);
font-size: 0.8em;
padding: 0.5em;
background: var(--comment);
border-radius: 0.5em;
}
div.code-toolbar > .toolbar a:focus,
div.code-toolbar > .toolbar a:hover,
@ -140,236 +140,236 @@ div.code-toolbar > .toolbar button:focus,
div.code-toolbar > .toolbar button:hover,
div.code-toolbar > .toolbar span:focus,
div.code-toolbar > .toolbar span:hover {
color: inherit;
text-decoration: none;
background-color: var(--green);
color: inherit;
text-decoration: none;
background-color: var(--green);
}
@media print {
code[class*='language-'],
pre[class*='language-'] {
text-shadow: none;
}
code[class*='language-'],
pre[class*='language-'] {
text-shadow: none;
}
}
code[class*='language-'],
pre[class*='language-'] {
color: var(--foreground);
background: var(--background);
text-shadow: none;
font-family: PT Mono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
color: var(--foreground);
background: var(--background);
text-shadow: none;
font-family: PT Mono, Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*='language-'] {
background: var(--background);
border-radius: 0.5em;
padding: 1em;
margin: 0.5em 0;
overflow: auto;
height: auto;
background: var(--background);
border-radius: 0.5em;
padding: 1em;
margin: 0.5em 0;
overflow: auto;
height: auto;
}
:not(pre) > code[class*='language-'],
pre[class*='language-'] {
background: var(--background);
background: var(--background);
}
:not(pre) > code[class*='language-'] {
padding: 4px 7px;
border-radius: 0.3em;
white-space: normal;
padding: 4px 7px;
border-radius: 0.3em;
white-space: normal;
}
.limit-300 {
height: 300px !important;
height: 300px !important;
}
.limit-300 {
height: 400px !important;
height: 400px !important;
}
.limit-500 {
height: 500px !important;
height: 500px !important;
}
.limit-600 {
height: 600px !important;
height: 600px !important;
}
.limit-700 {
height: 700px !important;
height: 700px !important;
}
.limit-800 {
height: 800px !important;
height: 800px !important;
}
.language-css {
color: var(--purple);
color: var(--purple);
}
.token {
color: var(--pink);
color: var(--pink);
}
.language-css .token {
color: var(--pink);
color: var(--pink);
}
.token.script {
color: var(--foreground);
color: var(--foreground);
}
.token.bold {
font-weight: 700;
font-weight: 700;
}
.token.italic {
font-style: italic;
font-style: italic;
}
.token.atrule,
.token.attr-name,
.token.attr-value {
color: var(--green);
color: var(--green);
}
.language-css .token.atrule {
color: var(--purple);
color: var(--purple);
}
.language-html .token.attr-value,
.language-markup .token.attr-value {
color: var(--yellow);
color: var(--yellow);
}
.token.boolean {
color: var(--purple);
color: var(--purple);
}
.token.builtin,
.token.class-name {
color: var(--cyan);
color: var(--cyan);
}
.token.comment {
color: var(--comment);
color: var(--comment);
}
.token.constant {
color: var(--purple);
color: var(--purple);
}
.language-javascript .token.constant {
color: var(--orange);
font-style: italic;
color: var(--orange);
font-style: italic;
}
.token.entity {
color: var(--pink);
color: var(--pink);
}
.language-css .token.entity {
color: var(--green);
color: var(--green);
}
.language-html .token.entity.named-entity {
color: var(--purple);
color: var(--purple);
}
.language-html .token.entity:not(.named-entity) {
color: var(--pink);
color: var(--pink);
}
.language-markup .token.entity.named-entity {
color: var(--purple);
color: var(--purple);
}
.language-markup .token.entity:not(.named-entity) {
color: var(--pink);
color: var(--pink);
}
.token.function {
color: var(--green);
color: var(--green);
}
.language-css .token.function {
color: var(--cyan);
color: var(--cyan);
}
.token.important,
.token.keyword {
color: var(--pink);
color: var(--pink);
}
.token.prolog {
color: var(--foreground);
color: var(--foreground);
}
.token.property {
color: var(--orange);
color: var(--orange);
}
.language-css .token.property {
color: var(--cyan);
color: var(--cyan);
}
.token.punctuation {
color: var(--pink);
color: var(--pink);
}
.language-css .token.punctuation {
color: var(--orange);
color: var(--orange);
}
.language-html .token.punctuation,
.language-markup .token.punctuation {
color: var(--foreground);
color: var(--foreground);
}
.token.selector {
color: var(--pink);
color: var(--pink);
}
.language-css .token.selector {
color: var(--green);
color: var(--green);
}
.token.regex {
color: var(--red);
color: var(--red);
}
.language-css .token.rule:not(.atrule) {
color: var(--foreground);
color: var(--foreground);
}
.token.string {
color: var(--yellow);
color: var(--yellow);
}
.token.tag {
color: var(--pink);
color: var(--pink);
}
.token.url {
color: var(--cyan);
color: var(--cyan);
}
.language-css .token.url {
color: var(--orange);
color: var(--orange);
}
.token.variable {
color: var(--comment);
color: var(--comment);
}
.token.number {
color: rgba(189, 147, 249, 1);
color: rgba(189, 147, 249, 1);
}
.token.operator {
color: rgba(139, 233, 253, 1);
color: rgba(139, 233, 253, 1);
}
.token.char {
color: rgba(255, 135, 157, 1);
color: rgba(255, 135, 157, 1);
}
.token.symbol {
color: rgba(255, 184, 108, 1);
color: rgba(255, 184, 108, 1);
}
.token.deleted {
color: #e2777a;
color: #e2777a;
}
.token.namespace {
color: #e2777a;
color: #e2777a;
}
.highlight-line {
color: inherit;
display: inline-block;
text-decoration: none;
border-radius: 4px;
padding: 2px 10px;
color: inherit;
display: inline-block;
text-decoration: none;
border-radius: 4px;
padding: 2px 10px;
}
.highlight-line:empty:before {
content: ' ';
content: ' ';
}
.highlight-line:not(:last-child) {
min-width: 100%;
min-width: 100%;
}
.highlight-line .highlight-line:not(:last-child) {
min-width: 0;
min-width: 0;
}
.highlight-line-isdir {
color: var(--foreground);
background-color: var(--selection-30);
color: var(--foreground);
background-color: var(--selection-30);
}
.highlight-line-active {
background-color: var(--comment-30);
background-color: var(--comment-30);
}
.highlight-line-add {
background-color: var(--green-30);
background-color: var(--green-30);
}
.highlight-line-remove {
background-color: var(--red-30);
background-color: var(--red-30);
}

14
src/contribute.json
View file

@ -1,9 +1,9 @@
{
"name": "coryd.dev",
"description": "Cory Dransfeldt's personal blog.",
"repository": {
"url": "https://github.com/mozilla/contribute.json",
"license": "ISC"
},
"keywords": ["11ty", "Eleventy", "Javascript", "Liquid.js", "Markdown"]
"name": "coryd.dev",
"description": "Cory Dransfeldt's personal blog.",
"repository": {
"url": "https://github.com/mozilla/contribute.json",
"license": "ISC"
},
"keywords": ["11ty", "Eleventy", "Javascript", "Liquid.js", "Markdown"]
}

18
src/index.html
View file

@ -1,20 +1,20 @@
---
layout: default
pagination:
data: collections.posts
size: 10
reverse: true
alias: posts
data: collections.posts
size: 10
reverse: true
alias: posts
---
{% include "now-topper.liquid" %} {% for post in pagination.items %} {% if post.data.published %}
<article class="h-entry">
<div
class="mb-8 border-b border-gray-200 pb-4 text-gray-800 dark:border-gray-700 dark:text-white"
>
<div
class="mb-8 border-b border-gray-200 pb-4 text-gray-800 dark:border-gray-700 dark:text-white"
>
<a class="no-underline" href="{{ post.url }}">
<h2
class="p-name m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl"
class="p-name m-0 text-xl font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl"
>
{{ post.data.title }}
</h2>
@ -22,7 +22,7 @@ pagination:
<span class="p-author h-card hidden">{{ site.title }}</span>
<div class="my-2 text-sm">
<time class="dt-published" datetime="{{ post.date }}">
{{ post.date | date: "%m.%d.%Y" }}
{{ post.date | date: "%m.%d.%Y" }}
</time>
</div>
<p class="p-summary mt-0">{{ post.data.post_excerpt | markdown }}</p>

6
src/posts/2014/leaving-google-apps-for-fastmail.md
View file

@ -63,9 +63,9 @@ I've been using Fastmail since the end of November and couldn't be happier with
I did quite a bit of research before switching to Fastmail and the following posts helped push me to make the move:
- [Switching from Gmail to FastMail / Max Masnick](http://www.maxmasnick.com/2013/07/19/fastmail/ 'Switching from Gmail to FastMail / Max Masnick')
- [From Gmail to FastMail: Moving Away from Google – ReadWrite](http://readwrite.com/2012/03/19/from-gmail-to-fastmail-moving#awesm=~othfJ88hm9Tp8X 'From Gmail to FastMail: Moving Away from Google – ReadWrite')
- [FastMail is My Favourite Email Provider](http://web.appstorm.net/reviews/email-apps/fastmail-is-my-favourite-email-provider/ 'FastMail is My Favourite Email Provider')
- [Switching from Gmail to FastMail / Max Masnick](http://www.maxmasnick.com/2013/07/19/fastmail/ 'Switching from Gmail to FastMail / Max Masnick')
- [From Gmail to FastMail: Moving Away from Google – ReadWrite](http://readwrite.com/2012/03/19/from-gmail-to-fastmail-moving#awesm=~othfJ88hm9Tp8X 'From Gmail to FastMail: Moving Away from Google – ReadWrite')
- [FastMail is My Favourite Email Provider](http://web.appstorm.net/reviews/email-apps/fastmail-is-my-favourite-email-provider/ 'FastMail is My Favourite Email Provider')
Have you moved to Fastmail? Are you thinking of doing so? [Let me know your thoughts](mailto:coryd@hey.com) on it or the move to it. You can sign up for Fastmail [here](https://www.fastmail.com).

94
src/posts/2016/generating-responsive-css-grid-neat.md
View file

@ -9,61 +9,61 @@ I use a responsive grid system for this site (and a number of other projects) th
```scss
.grid {
&-main-container {
@include outer-container;
&-main-container {
@include outer-container;
}
&-row {
@include row;
@include pad(0 10%);
@media only screen and (max-width: 640px) {
@include pad(0 10%);
}
&-row {
@include row;
@include pad(0 10%);
@media only screen and (max-width: 640px) {
@include pad(0 10%);
}
&.collapse {
@media only screen and (max-width: 640px) {
@include pad(0);
}
}
.grid-row {
// collapse nested grid rows
@include pad(0);
}
&.collapse {
@media only screen and (max-width: 640px) {
@include pad(0);
}
}
$grid-columns: 12;
@for $i from 0 through $grid-columns {
&-columns-#{$i} {
@include span-columns($i);
}
&-columns-small-#{$i} {
@include span-columns($i);
@media only screen and (max-width: 640px) {
@include span-columns(12);
}
}
.grid-row {
// collapse nested grid rows
@include pad(0);
}
@for $i from 0 through $grid-columns {
&-shift-left-#{$i} {
@include shift(-$i);
}
}
&-shift-right-#{$i} {
@include shift($i);
}
$grid-columns: 12;
@media only screen and (max-width: 640px) {
&-shift-left-#{$i},
&-shift-right-#{$i} {
@include shift(0);
}
}
@for $i from 0 through $grid-columns {
&-columns-#{$i} {
@include span-columns($i);
}
&-columns-small-#{$i} {
@include span-columns($i);
@media only screen and (max-width: 640px) {
@include span-columns(12);
}
}
}
@for $i from 0 through $grid-columns {
&-shift-left-#{$i} {
@include shift(-$i);
}
&-shift-right-#{$i} {
@include shift($i);
}
@media only screen and (max-width: 640px) {
&-shift-left-#{$i},
&-shift-right-#{$i} {
@include shift(0);
}
}
}
}
```

30
src/posts/2021/2021-reading-list.md
View file

@ -9,24 +9,24 @@ I've been working on making reading a habit again for the past few years (my str
**Finished**
- [Kill Switch: The Rise of the Modern Senate and the Crippling of American Democracy](https://www.harvard.com/book/kill_switch_the_rise_of_the_modern_senate_and_the_crippling_of_american_dem/), by Adam Jentleson
- [Working in Public: The Making and Maintenance of Open Source Software](https://blas.com/working-in-public/), by Nadia Eghbal
- [Let My People Go Surfing](https://www.patagonia.com/product/let-my-people-go-surfing-revised-paperback-book/BK067.html), by Yvon Chouinard
- [The Responsible Company](https://www.patagonia.com/product/the-responsible-company-what-weve-learned-from-patagonias-first-forty-years-paperback-book/BK233.html), by Yvon Chouinard & Vincent Stanley
- [Dark Mirror](https://www.penguinrandomhouse.com/books/316047/dark-mirror-by-barton-gellman/), by Barton Gellmen
- [Get Together](https://gettogether.world/), by Bailey Richardson, Kevin Huynh & Kai Elmer Sotto
- [Zucked](https://www.penguinrandomhouse.com/books/598206/zucked-by-roger-mcnamee/), by Roger McNamee
- [Fentanyl, Inc.](https://groveatlantic.com/book/fentanyl-inc/), by Ben Weshoff
- [A Promised Land](https://obamabook.com/), by Barack Obama
- [Kill Switch: The Rise of the Modern Senate and the Crippling of American Democracy](https://www.harvard.com/book/kill_switch_the_rise_of_the_modern_senate_and_the_crippling_of_american_dem/), by Adam Jentleson
- [Working in Public: The Making and Maintenance of Open Source Software](https://blas.com/working-in-public/), by Nadia Eghbal
- [Let My People Go Surfing](https://www.patagonia.com/product/let-my-people-go-surfing-revised-paperback-book/BK067.html), by Yvon Chouinard
- [The Responsible Company](https://www.patagonia.com/product/the-responsible-company-what-weve-learned-from-patagonias-first-forty-years-paperback-book/BK233.html), by Yvon Chouinard & Vincent Stanley
- [Dark Mirror](https://www.penguinrandomhouse.com/books/316047/dark-mirror-by-barton-gellman/), by Barton Gellmen
- [Get Together](https://gettogether.world/), by Bailey Richardson, Kevin Huynh & Kai Elmer Sotto
- [Zucked](https://www.penguinrandomhouse.com/books/598206/zucked-by-roger-mcnamee/), by Roger McNamee
- [Fentanyl, Inc.](https://groveatlantic.com/book/fentanyl-inc/), by Ben Weshoff
- [A Promised Land](https://obamabook.com/), by Barack Obama
**In progress**
- [This Is How They Tell Me the World Ends](https://www.bloomsbury.com/us/this-is-how-they-tell-me-the-world-ends-9781635576061/), by Nicole Perlroth
- [Revelation Space](http://www.alastairreynolds.com/release/revelation-space/), by Alastair Reynolds
- [This Is How They Tell Me the World Ends](https://www.bloomsbury.com/us/this-is-how-they-tell-me-the-world-ends-9781635576061/), by Nicole Perlroth
- [Revelation Space](http://www.alastairreynolds.com/release/revelation-space/), by Alastair Reynolds
**Next up**
- [JavaScript for Impatient Programmers](https://exploringjs.com/impatient-js/), by Dr. Axel Rauschmayer
- [Deep JavaScript: Theory and Techniques](https://exploringjs.com/deep-js/), by Dr. Axel Rauschmayer
- [Don't Think of an Elephant!](https://georgelakoff.com/books/dont_think_of_an_elephant_know_your_values_and_frame_the_debatethe_essential_guide_for_progressives-119190455949080/), by George Lakoff
- [The Assassination of Fred Hampton](https://www.amazon.com/Assassination-Fred-Hampton-Chicago-Murdered/dp/1569767092), by Jeffrey Haas
- [JavaScript for Impatient Programmers](https://exploringjs.com/impatient-js/), by Dr. Axel Rauschmayer
- [Deep JavaScript: Theory and Techniques](https://exploringjs.com/deep-js/), by Dr. Axel Rauschmayer
- [Don't Think of an Elephant!](https://georgelakoff.com/books/dont_think_of_an_elephant_know_your_values_and_frame_the_debatethe_essential_guide_for_progressives-119190455949080/), by George Lakoff
- [The Assassination of Fred Hampton](https://www.amazon.com/Assassination-Fred-Hampton-Chicago-Murdered/dp/1569767092), by Jeffrey Haas

12
src/posts/2021/a-brief-intro-to-git.md
View file

@ -97,9 +97,9 @@ git revert <git commit hash value>
Each of these commands has numerous options associated with it and allows for broad control over the flow and history of your project. There are a number of other options I'd suggest for learning more about git:
- [Github's git tutorial](https://try.github.io)
- [Pro Git book](https://git-scm.com/book)
- [Oh shit, git!](http://ohshitgit.com/)
- [Github guides](https://guides.github.com)
- [Git Real](https://courses.codeschool.com/courses/git-real)
- [Git documentation](https://git-scm.com/documentation)
- [Github's git tutorial](https://try.github.io)
- [Pro Git book](https://git-scm.com/book)
- [Oh shit, git!](http://ohshitgit.com/)
- [Github guides](https://guides.github.com)
- [Git Real](https://courses.codeschool.com/courses/git-real)
- [Git documentation](https://git-scm.com/documentation)

12
src/posts/2021/apple-music-a-tale-of-woe.md
View file

@ -13,15 +13,15 @@ A few weeks ago I read through a [Brooklyn Vegan](https://brooklynvegan.com) on
My next steps were pretty standard, escalating, troubleshooting:
- [x] Log out of Apple Music on all devices
- [x] Reboot
- [x] Log in
- [x] Log out of Apple Music on all devices
- [x] Reboot
- [x] Log in
Welcome back _Glow On_!
- [x] Reset my Apple Music library[^3]
- [x] Reconstruct my collection[^4]
- [x] Notice that I _still_ can't update metadata and Apple fingerprints your tracks, tries to overwrite the metadata and creates duplicate tracks if there's the _slightest_ mismatch. Notice that these duplicates can't be deleted.
- [x] Reset my Apple Music library[^3]
- [x] Reconstruct my collection[^4]
- [x] Notice that I _still_ can't update metadata and Apple fingerprints your tracks, tries to overwrite the metadata and creates duplicate tracks if there's the _slightest_ mismatch. Notice that these duplicates can't be deleted.
So, here I am: I've had swapped a phone after the service launched and cooked the battery. I gave it a second try, it worked for a while exactly how I'd liked — as a cloud locker with a supplemental catalog of music I was less invested in — and then it hit a wall.

14
src/posts/2021/digital-privacy-tools.md
View file

@ -13,22 +13,22 @@ This is a helpful, albeit basic, guide to online privacy tools.<!-- excerpt -->
**Private email providers**
- [Fastmail](https://fastmail.com)
- [mailbox.org](mailbox.org)
- [Proton Mail](http://protonmail.com)
- [Fastmail](https://fastmail.com)
- [mailbox.org](mailbox.org)
- [Proton Mail](http://protonmail.com)
Ubiquitous free email providers profit by mining user data (whether humans are involved or not). Your inbox acts as a key to your digital life and you should avoid using any provider that monetizes its contents.
**Adblockers**
- [1Blocker](https://1blocker.com)
- [Better](https://better.fyi)
- [1Blocker](https://1blocker.com)
- [Better](https://better.fyi)
These are both light-weight, independently developed ad and tracker blockers. 1Blocker is considerably more configurable, but could be daunting to new users (the defaults offer a nice balance though).
**DNS providers**
- [nextDNS](https://nextdns.io)
- [Cloudflare 1.1.1.1](https://www.cloudflare.com/learning/dns/what-is-1.1.1.1)
- [nextDNS](https://nextdns.io)
- [Cloudflare 1.1.1.1](https://www.cloudflare.com/learning/dns/what-is-1.1.1.1)
I use nextDNS on my home network for basic security and have a more restrictive configuration that heavily filters ads at the DNS level on specific devices. Cloudflare's 1.1.1.1 service doesn't offer the same features, but is still preferable to Google's offering or your ISP's default.

60
src/posts/2022/2022-reading-list.md
View file

@ -9,41 +9,41 @@ I'm still plugging away with my reading habit and my streak is now at 772 days.<
**Finished**
- [The Extended Mind by Annie Murphy Paul](https://oku.club/book/the-extended-mind-by-annie-murphy-paul-Mzlrf)
- [Drive by James S. A. Corey](https://oku.club/book/drive-by-james-s-a-corey-DXapB)
- [MBS by Ben Hubbard](https://oku.club/book/mbs-by-ben-hubbard-HTrlr)
- [Putin’s People by Catherine Belton](https://oku.club/book/putins-people-by-catherine-belton-cHBSw)
- [The Sins of Our Fathers by James S. A. Corey](https://oku.club/book/the-sins-of-our-fathers-by-james-s-a-corey-HKXjt)
- [The Complete Redux Book by Ilya Gelman and Boris Dinkevich](https://leanpub.com/redux-book)
- [Off the Edge by Kelly Weill](https://oku.club/book/off-the-edge-by-kelly-weill-SKujn)
- [The Cryptopians by Laura Shin](https://oku.club/book/the-cryptopians-by-laura-shin-S43ey)
- [The Intersectional Environmentalist by Leah Thomas](https://oku.club/book/the-intersectional-environmentalist-by-leah-thomas-3o8nH)
- [The Compatriots by Andrei Soldatov](https://oku.club/book/the-compatriots-by-andrei-soldatov-UMhCz)
- [The Wretched of the Earth by Frantz Fanon](https://oku.club/book/the-wretched-of-the-earth-by-frantz-fanon-8On3n)
- [Lords of Chaos by Michael Moynihan](https://oku.club/book/lords-of-chaos-by-michael-moynihan-TQeVA)
- [Going Clear by Lawrence Wright](https://oku.club/book/going-clear-by-lawrence-wright-ChtJe)
- [Blitzed by Norman Ohler](https://oku.club/book/blitzed-by-norman-ohler-CZnyf)
- [Paradise by Lizzie Johnson](https://oku.club/book/paradise-by-lizzie-johnson-BHfRA)
- [Pedagogy of the Oppressed by Paulo Freire](https://oku.club/book/pedagogy-of-the-oppressed-by-paulo-freire-nGgoW)
- [Missoula by Jon Krakauer](https://oku.club/book/missoula-by-jon-krakauer-ggUIz)
- [Free by Lea Ypi](https://oku.club/book/free-by-lea-ypi-k3V1u)
- [Reign of Terror by Spencer Ackerman](https://oku.club/book/reign-of-terror-by-spencer-ackerman-vNJMb)
- [Narconomics by Tom Wainwright](https://oku.club/book/narconomics-by-tom-wainwright-qRrxi)
- [Capitalist Realism by Mark Fisher](https://oku.club/book/capitalist-realism-by-mark-fisher-Lq4Gm)
- [An Ugly Truth by Sheera Frenkel](https://oku.club/book/an-ugly-truth-by-sheera-frenkel-RxLoN)
- [Sellout by Dan Ozzi](https://oku.club/book/sellout-by-dan-ozzi-wXvCV)
- [Will by Will Smith and Mark Manson](https://oku.club/book/will-by-will-manson-smith-mark-YfBE1)
- [The Extended Mind by Annie Murphy Paul](https://oku.club/book/the-extended-mind-by-annie-murphy-paul-Mzlrf)
- [Drive by James S. A. Corey](https://oku.club/book/drive-by-james-s-a-corey-DXapB)
- [MBS by Ben Hubbard](https://oku.club/book/mbs-by-ben-hubbard-HTrlr)
- [Putin’s People by Catherine Belton](https://oku.club/book/putins-people-by-catherine-belton-cHBSw)
- [The Sins of Our Fathers by James S. A. Corey](https://oku.club/book/the-sins-of-our-fathers-by-james-s-a-corey-HKXjt)
- [The Complete Redux Book by Ilya Gelman and Boris Dinkevich](https://leanpub.com/redux-book)
- [Off the Edge by Kelly Weill](https://oku.club/book/off-the-edge-by-kelly-weill-SKujn)
- [The Cryptopians by Laura Shin](https://oku.club/book/the-cryptopians-by-laura-shin-S43ey)
- [The Intersectional Environmentalist by Leah Thomas](https://oku.club/book/the-intersectional-environmentalist-by-leah-thomas-3o8nH)
- [The Compatriots by Andrei Soldatov](https://oku.club/book/the-compatriots-by-andrei-soldatov-UMhCz)
- [The Wretched of the Earth by Frantz Fanon](https://oku.club/book/the-wretched-of-the-earth-by-frantz-fanon-8On3n)
- [Lords of Chaos by Michael Moynihan](https://oku.club/book/lords-of-chaos-by-michael-moynihan-TQeVA)
- [Going Clear by Lawrence Wright](https://oku.club/book/going-clear-by-lawrence-wright-ChtJe)
- [Blitzed by Norman Ohler](https://oku.club/book/blitzed-by-norman-ohler-CZnyf)
- [Paradise by Lizzie Johnson](https://oku.club/book/paradise-by-lizzie-johnson-BHfRA)
- [Pedagogy of the Oppressed by Paulo Freire](https://oku.club/book/pedagogy-of-the-oppressed-by-paulo-freire-nGgoW)
- [Missoula by Jon Krakauer](https://oku.club/book/missoula-by-jon-krakauer-ggUIz)
- [Free by Lea Ypi](https://oku.club/book/free-by-lea-ypi-k3V1u)
- [Reign of Terror by Spencer Ackerman](https://oku.club/book/reign-of-terror-by-spencer-ackerman-vNJMb)
- [Narconomics by Tom Wainwright](https://oku.club/book/narconomics-by-tom-wainwright-qRrxi)
- [Capitalist Realism by Mark Fisher](https://oku.club/book/capitalist-realism-by-mark-fisher-Lq4Gm)
- [An Ugly Truth by Sheera Frenkel](https://oku.club/book/an-ugly-truth-by-sheera-frenkel-RxLoN)
- [Sellout by Dan Ozzi](https://oku.club/book/sellout-by-dan-ozzi-wXvCV)
- [Will by Will Smith and Mark Manson](https://oku.club/book/will-by-will-manson-smith-mark-YfBE1)
**In progress**
- [Rotting Ways to Misery by Markus Makkonen](https://oku.club/book/rotting-ways-to-misery-by-markus-makkonen-MPt17)
- [Absolution Gap by Alastair Reynolds](https://oku.club/book/absolution-gap-by-alastair-reynolds-RHAFH)
- [Moneyland by Oliver Bullough, Marianne Palm](https://oku.club/book/moneyland-by-oliver-bullough-s9wvO)
- [Rotting Ways to Misery by Markus Makkonen](https://oku.club/book/rotting-ways-to-misery-by-markus-makkonen-MPt17)
- [Absolution Gap by Alastair Reynolds](https://oku.club/book/absolution-gap-by-alastair-reynolds-RHAFH)
- [Moneyland by Oliver Bullough, Marianne Palm](https://oku.club/book/moneyland-by-oliver-bullough-s9wvO)
**Next up**
- [Miles by Miles Davis](https://oku.club/book/miles-by-miles-davis-UG9m7)
- [The Nineties by Chuck Klosterman](https://oku.club/book/the-nineties-by-chuck-klosterman-QNgHC)
- [Old Man's War by John Scalzi](https://oku.club/book/old-mans-war-by-john-scalzi-H7UHv)
- [Miles by Miles Davis](https://oku.club/book/miles-by-miles-davis-UG9m7)
- [The Nineties by Chuck Klosterman](https://oku.club/book/the-nineties-by-chuck-klosterman-QNgHC)
- [Old Man's War by John Scalzi](https://oku.club/book/old-mans-war-by-john-scalzi-H7UHv)
I've been listening to podcasts again as well, so I'll have to see how that impacts my pacing and reading.

40
src/posts/2022/apple-centric-digital-privacy-tools.md
View file

@ -12,41 +12,41 @@ A rundown of privacy tools that work well with Apple's technology ecosystem.<!--
Ubiquitous free email providers profit by mining user data (whether humans are involved or not). Your inbox acts as a key to your digital life and you should avoid using any provider that monetizes its contents.
- [Fastmail](https://ref.fm/u28939392)[^2]: based in Melbourne, Australia Fastmail offers a range of affordably priced plans with a focus on support for open standards (including active development support for [JMAP](https://jmap.io) and the [Cyrus IMAP email server](https://fastmail.blog/open-technologies/why-we-contribute/)). They also [articulate a clear commitment to protecting and respecting your privacy](https://www.fastmail.com/values/) and offer an extensive [rundown of the privacy and security measures they employ on their site](https://www.fastmail.com/privacy-and-security/).
- I would also recommend exploring their [masked email implementation](https://www.fastmail.help/hc/en-us/articles/4406536368911-Masked-Email), which integrates seamlessly with [1Password](https://1password.com) (though using 1Password isn't required).
- [mailbox.org](https://mailbox.org): based in Germany, [mailbox.org](http://mailbox.org) also has [a long history](https://mailbox.org/en/company#our-history) and [commitment to privacy](https://mailbox.org/en/company#our-mission). Their service is reliable, straightforward and fully featured (it's based off of a customized implementation [Open-Xchange](https://www.open-xchange.com)) and supports features like incoming address blocking, PGP support and so forth.
- [Proton Mail](http://protonmail.com): Proton offers a host of encrypted tools, ranging from mail to drive, calendaring and VPN services. They're also the only option in this list that includes end to end encryption. The service is extremely polished and reliable but, it's worth noting, doesn't support access to your email via open standards like IMAP/SMTP without the use of a cumbersome, desktop-only, bridge application.
- [iCloud+](https://support.apple.com/guide/icloud/icloud-overview-mmfc854d9604/icloud): if you're paying for an Apple iCloud subscription you'll get access to the option to add a custom email domain to your account to use with Apple's iCloud Mail service. This is private inasmuch as the data isn't mined for monetization against personalized ads, but is also bare-bones in terms of functionality. It supports IMAP and push notifications on Apple's devices but features like rules, aliases and so forth are extremely limited compared to the previously mentioned providers. This is better than most free providers, but hardly the best option.
- iCloud+ _does_ also offer a [Hide My Email](https://support.apple.com/guide/icloud/what-you-can-do-with-icloud-and-hide-my-email-mme38e1602db/1.0/icloud/1.0) feature to conceal your true email address, much like Fastmail.
- [Fastmail](https://ref.fm/u28939392)[^2]: based in Melbourne, Australia Fastmail offers a range of affordably priced plans with a focus on support for open standards (including active development support for [JMAP](https://jmap.io) and the [Cyrus IMAP email server](https://fastmail.blog/open-technologies/why-we-contribute/)). They also [articulate a clear commitment to protecting and respecting your privacy](https://www.fastmail.com/values/) and offer an extensive [rundown of the privacy and security measures they employ on their site](https://www.fastmail.com/privacy-and-security/).
- I would also recommend exploring their [masked email implementation](https://www.fastmail.help/hc/en-us/articles/4406536368911-Masked-Email), which integrates seamlessly with [1Password](https://1password.com) (though using 1Password isn't required).
- [mailbox.org](https://mailbox.org): based in Germany, [mailbox.org](http://mailbox.org) also has [a long history](https://mailbox.org/en/company#our-history) and [commitment to privacy](https://mailbox.org/en/company#our-mission). Their service is reliable, straightforward and fully featured (it's based off of a customized implementation [Open-Xchange](https://www.open-xchange.com)) and supports features like incoming address blocking, PGP support and so forth.
- [Proton Mail](http://protonmail.com): Proton offers a host of encrypted tools, ranging from mail to drive, calendaring and VPN services. They're also the only option in this list that includes end to end encryption. The service is extremely polished and reliable but, it's worth noting, doesn't support access to your email via open standards like IMAP/SMTP without the use of a cumbersome, desktop-only, bridge application.
- [iCloud+](https://support.apple.com/guide/icloud/icloud-overview-mmfc854d9604/icloud): if you're paying for an Apple iCloud subscription you'll get access to the option to add a custom email domain to your account to use with Apple's iCloud Mail service. This is private inasmuch as the data isn't mined for monetization against personalized ads, but is also bare-bones in terms of functionality. It supports IMAP and push notifications on Apple's devices but features like rules, aliases and so forth are extremely limited compared to the previously mentioned providers. This is better than most free providers, but hardly the best option.
- iCloud+ _does_ also offer a [Hide My Email](https://support.apple.com/guide/icloud/what-you-can-do-with-icloud-and-hide-my-email-mme38e1602db/1.0/icloud/1.0) feature to conceal your true email address, much like Fastmail.
## Email apps
- [Apple Mail](https://support.apple.com/mail): Apple's Mail app is simple but also fully featured and reliable to the point of being a bit boring. It also has enhanced privacy features as of iOS 15 and macOS 12 in the form of [Mail Privacy Protection](https://support.apple.com/guide/iphone/use-mail-privacy-protection-iphf084865c7/ios).
- [Canary Mail](https://canarymail.io/): a third-party email with a reasonable price tag and a heavy focus on privacy and security, Canary offers a number of enhancements like read receipts, templates, snoozing, PGP support and calendar/contact integration. The design hews tightly to iOS and macOS platform norms but, naturally, is not quite as tightly integrated as Apple's first-party mail app.
- [Mailmate](https://freron.com/): a long running, highly configurable mail app with a strict focus on IMAP support, Mailmate is an excellent option on macOS and also offers strong support for authoring messages in markdown.
- [Apple Mail](https://support.apple.com/mail): Apple's Mail app is simple but also fully featured and reliable to the point of being a bit boring. It also has enhanced privacy features as of iOS 15 and macOS 12 in the form of [Mail Privacy Protection](https://support.apple.com/guide/iphone/use-mail-privacy-protection-iphf084865c7/ios).
- [Canary Mail](https://canarymail.io/): a third-party email with a reasonable price tag and a heavy focus on privacy and security, Canary offers a number of enhancements like read receipts, templates, snoozing, PGP support and calendar/contact integration. The design hews tightly to iOS and macOS platform norms but, naturally, is not quite as tightly integrated as Apple's first-party mail app.
- [Mailmate](https://freron.com/): a long running, highly configurable mail app with a strict focus on IMAP support, Mailmate is an excellent option on macOS and also offers strong support for authoring messages in markdown.
## Safari extensions
- [1Blocker](https://1blocker.com): a highly configurable ad and tracker blocker. Independently maintained and actively developed it also offers a device-level firewall to block trackers embedded in other apps on your device.
- [Super Agent](https://www.super-agent.com): this extension simplifies the process of dealing with the modern web's post-GDPR flood of cookie consent banners by storing your preferences and uniformly applying them to sites that you visit. This allows you to avoid the banners altogether while limiting what's allowed to something as restrictive as, say, functional cookies only.
- [Hush](https://oblador.github.io/hush/): another option to deal with cookie banners by simply blocking the banners outright.
- [1Blocker](https://1blocker.com): a highly configurable ad and tracker blocker. Independently maintained and actively developed it also offers a device-level firewall to block trackers embedded in other apps on your device.
- [Super Agent](https://www.super-agent.com): this extension simplifies the process of dealing with the modern web's post-GDPR flood of cookie consent banners by storing your preferences and uniformly applying them to sites that you visit. This allows you to avoid the banners altogether while limiting what's allowed to something as restrictive as, say, functional cookies only.
- [Hush](https://oblador.github.io/hush/): another option to deal with cookie banners by simply blocking the banners outright.
## DNS providers
- [nextDNS](https://nextdns.io/?from=m56mt3z6): I use nextDNS on my home network for basic security and have a more restrictive configuration that heavily filters ads at the DNS level on specific devices. This allows me to block ads, trackers and other annoyances at the DNS level, which covers anything embedded in apps or other services running on my device.
- [Cloudflare 1.1.1.1](https://www.cloudflare.com/learning/dns/what-is-1.1.1.1): Cloudflare's 1.1.1.1 service doesn't offer the same features as nextDNS, but is still preferable to Google's offering or your ISP's default.
- [iCloud Private Relay](https://support.apple.com/en-us/HT212614): Another iCloud+ offering, iCloud Private Relay offers _some_ protection by relaying your traffic in Safari (and Safari only) through a pair of relays to obfuscate your actual IP address and location.
- [nextDNS](https://nextdns.io/?from=m56mt3z6): I use nextDNS on my home network for basic security and have a more restrictive configuration that heavily filters ads at the DNS level on specific devices. This allows me to block ads, trackers and other annoyances at the DNS level, which covers anything embedded in apps or other services running on my device.
- [Cloudflare 1.1.1.1](https://www.cloudflare.com/learning/dns/what-is-1.1.1.1): Cloudflare's 1.1.1.1 service doesn't offer the same features as nextDNS, but is still preferable to Google's offering or your ISP's default.
- [iCloud Private Relay](https://support.apple.com/en-us/HT212614): Another iCloud+ offering, iCloud Private Relay offers _some_ protection by relaying your traffic in Safari (and Safari only) through a pair of relays to obfuscate your actual IP address and location.
## Password managers
- [1Password:](https://1password.com): I've used 1Password for over 11 years and have yet to have any significant issues with the service. It integrates smoothly with Fastmail to generate masked email addresses, has added support for storing and generating ssh keys and application secrets, supports vault and password sharing and works across platforms. Highly recommended.[^3]
- [Bitwarden](https://bitwarden.com): I haven't made use of Bitwarden, but have heard plenty of positive feedback over the years.
- [1Password:](https://1password.com): I've used 1Password for over 11 years and have yet to have any significant issues with the service. It integrates smoothly with Fastmail to generate masked email addresses, has added support for storing and generating ssh keys and application secrets, supports vault and password sharing and works across platforms. Highly recommended.[^3]
- [Bitwarden](https://bitwarden.com): I haven't made use of Bitwarden, but have heard plenty of positive feedback over the years.
## VPN providers
- [IVPN](https://www.ivpn.net/): my current choice for a VPN provider, it's apps are modern, reliable and offer support for per network default behavior, wireguard, multihop connections and numerous endpoints around the globe.
- [Mullvad](https://mullvad.net/en/): an open source, commercial VPN based in Sweden, Mullvad offers both WireGuard and OpenVPN support.
- [Mozilla](https://www.mozilla.org/en-US/products/vpn/): offered by the non-profit Mozilla Foundation, this is another compelling offering from an organization with a track record of fighting for the open web and preserving user privacy.
- [IVPN](https://www.ivpn.net/): my current choice for a VPN provider, it's apps are modern, reliable and offer support for per network default behavior, wireguard, multihop connections and numerous endpoints around the globe.
- [Mullvad](https://mullvad.net/en/): an open source, commercial VPN based in Sweden, Mullvad offers both WireGuard and OpenVPN support.
- [Mozilla](https://www.mozilla.org/en-US/products/vpn/): offered by the non-profit Mozilla Foundation, this is another compelling offering from an organization with a track record of fighting for the open web and preserving user privacy.
For now I've scoped this post to platforms and tools that are central to maintaining your online privacy. But, with that said, each app you use should be examined to determine if and how it fits with your approach towards privacy.

28
src/posts/2022/automating-email-cleanup-in-gmail.md
View file

@ -62,13 +62,13 @@ For example, to clear old newsletters, I use the following:
```javascript
function batchDeleteEmail() {
var SEARCH_QUERY = 'label:newsletters -label:inbox'
var batchSize = 100
var searchSize = 400
var threads = GmailApp.search(SEARCH_QUERY, 0, searchSize)
for (j = 0; j < threads.length; j += batchSize) {
GmailApp.moveThreadsToTrash(threads.slice(j, j + batchSize))
}
var SEARCH_QUERY = 'label:newsletters -label:inbox'
var batchSize = 100
var searchSize = 400
var threads = GmailApp.search(SEARCH_QUERY, 0, searchSize)
for (j = 0; j < threads.length; j += batchSize) {
GmailApp.moveThreadsToTrash(threads.slice(j, j + batchSize))
}
}
```
@ -92,13 +92,13 @@ Unrelated to cleanup, I also mark any unread emails in my archive as read, with
```javascript
function markArchivedAsRead() {
var SEARCH_QUERY = 'label:unread -label:inbox'
var batchSize = 100
var searchSize = 400
var threads = GmailApp.search(SEARCH_QUERY, 0, searchSize)
for (j = 0; j < threads.length; j += batchSize) {
GmailApp.markThreadsRead(threads.slice(j, j + batchSize))
}
var SEARCH_QUERY = 'label:unread -label:inbox'
var batchSize = 100
var searchSize = 400
var threads = GmailApp.search(SEARCH_QUERY, 0, searchSize)
for (j = 0; j < threads.length; j += batchSize) {
GmailApp.markThreadsRead(threads.slice(j, j + batchSize))
}
}
```

20
src/posts/2022/migrating-to-fastmail.md
View file

@ -38,8 +38,8 @@ These will be specific to your domain and can be found and set as follows:
**Bonus points**
- Configure DMARC — Simon Andrews has [an excellent writeup](https://simonandrews.ca/articles/how-to-set-up-spf-dkim-dmarc#dmarc)on how to do this.
- Configure MTA-STS — there's a writeup on that [over at dmarcian](https://dmarcian.com/mta-sts/). It'll entail configuring an additional 3 DNS records and exposing an MTA-STS policy file[^6].
- Configure DMARC — Simon Andrews has [an excellent writeup](https://simonandrews.ca/articles/how-to-set-up-spf-dkim-dmarc#dmarc)on how to do this.
- Configure MTA-STS — there's a writeup on that [over at dmarcian](https://dmarcian.com/mta-sts/). It'll entail configuring an additional 3 DNS records and exposing an MTA-STS policy file[^6].
### Importing your email
@ -63,17 +63,17 @@ Hop on over to Fastmail's [folder documentation](https://www.fastmail.help/hc/en
I would highly recommend creating rulesets to help filter messages that aren't critical out of your inbox. Fastmail's documentation on their mail rules and filters [can be found here](https://www.fastmail.help/hc/en-us/articles/1500000278122-Organizing-your-inbox#rules). I filter messages out of my inbox based on a few broad categories, namely:
- **Updates:** anything sent programmatically and pertinent but not critical (e.g. service or utility notifications and so forth).
- **Financial:** anything from financial institutions. I do this based on the TLD, e.g. `examplebank.com`.
- **Social:** anything from social networks or services. I do this based on the TLD, e.g. `linkedin.com`.
- **Promotions:** anything from a merchant or similar mailing list. I subscribe to a handful but don't want them in my inbox. I use [Fastmail's advanced folder options](https://www.fastmail.help/hc/en-us/articles/1500000280301-Setting-up-and-using-folders) to auto-purge this folder every 60 days.
- **Updates:** anything sent programmatically and pertinent but not critical (e.g. service or utility notifications and so forth).
- **Financial:** anything from financial institutions. I do this based on the TLD, e.g. `examplebank.com`.
- **Social:** anything from social networks or services. I do this based on the TLD, e.g. `linkedin.com`.
- **Promotions:** anything from a merchant or similar mailing list. I subscribe to a handful but don't want them in my inbox. I use [Fastmail's advanced folder options](https://www.fastmail.help/hc/en-us/articles/1500000280301-Setting-up-and-using-folders) to auto-purge this folder every 60 days.
I also use a few aliases to route mail elsewhere:
- **Deliveries:** anything referencing tracking numbers or shipment status get sent off to [Parcel](https://parcelapp.net).
- **Alerts:** uptime alerts and a few other notifications get sent off to [Things](https://culturedcode.com/things/) to be slotted as actionable tasks to be addressed.
- **Newsletters:** mailing lists get routed off to [Feedbin](https://feedbin.com) to be read (or not).
- **Reports:** I route DMARC/email reports to this folder in the event I need to review them (which is rarely if ever).
- **Deliveries:** anything referencing tracking numbers or shipment status get sent off to [Parcel](https://parcelapp.net).
- **Alerts:** uptime alerts and a few other notifications get sent off to [Things](https://culturedcode.com/things/) to be slotted as actionable tasks to be addressed.
- **Newsletters:** mailing lists get routed off to [Feedbin](https://feedbin.com) to be read (or not).
- **Reports:** I route DMARC/email reports to this folder in the event I need to review them (which is rarely if ever).
All of these particular folders live as children of my Archive folder and are auto-purged at different intervals. They're messages that are useful in the near term but whose utility falls off pretty quickly over time.

52
src/posts/2022/simple-api-fetch-hooks-with-swr.md
View file

@ -21,22 +21,22 @@ import { useEffect, useState } from 'react'
import useSWR from 'swr'
export const useRss = (url: string) => {
const [response, setResponse] = useState([])
const [response, setResponse] = useState([])
const fetcher = (url: string) =>
read(url)
.then((res) => res.entries)
.catch()
const { data, error } = useSWR(url, fetcher)
const fetcher = (url: string) =>
read(url)
.then((res) => res.entries)
.catch()
const { data, error } = useSWR(url, fetcher)
useEffect(() => {
setResponse(data)
}, [data, setResponse])
useEffect(() => {
setResponse(data)
}, [data, setResponse])
return {
response,
error,
}
return {
response,
error,
}
}
```
@ -53,22 +53,22 @@ import { useEffect, useState } from 'react'
import useSWR from 'swr'
export const useJson = (url: string) => {
const [response, setResponse] = useState<any>({})
const [response, setResponse] = useState<any>({})
const fetcher = (url: string) =>
fetch(url)
.then((res) => res.json())
.catch()
const { data, error } = useSWR(url, fetcher)
const fetcher = (url: string) =>
fetch(url)
.then((res) => res.json())
.catch()
const { data, error } = useSWR(url, fetcher)
useEffect(() => {
setResponse(data)
}, [data, setResponse])
useEffect(() => {
setResponse(data)
}, [data, setResponse])
return {
response,
error,
}
return {
response,
error,
}
}
```

202
src/posts/2023/adding-client-side-rendered-webmentions-to-my-blog.md
View file

@ -15,16 +15,16 @@ My next.js api looks like this:
```typescript
export default async function handler(req: any, res: any) {
const KEY_CORYD = process.env.API_KEY_WEBMENTIONS_CORYD_DEV
const KEY_BLOG = process.env.API_KEY_WEBMENTIONS_BLOG_CORYD_DEV
const DOMAIN = req.query.domain
const TARGET = req.query.target
const data = await fetch(
`https://webmention.io/api/mentions.jf2?token=${
DOMAIN === 'coryd.dev' ? KEY_CORYD : KEY_BLOG
}${TARGET ? `&target=${TARGET}` : ''}&per-page=1000`
).then((response) => response.json())
res.json(data)
const KEY_CORYD = process.env.API_KEY_WEBMENTIONS_CORYD_DEV
const KEY_BLOG = process.env.API_KEY_WEBMENTIONS_BLOG_CORYD_DEV
const DOMAIN = req.query.domain
const TARGET = req.query.target
const data = await fetch(
`https://webmention.io/api/mentions.jf2?token=${DOMAIN === 'coryd.dev' ? KEY_CORYD : KEY_BLOG}${
TARGET ? `&target=${TARGET}` : ''
}&per-page=1000`
).then((response) => response.json())
res.json(data)
}
```
@ -34,91 +34,85 @@ This is called on the client side as follows:
```javascript
document.addEventListener('DOMContentLoaded', (event) => {
;(function () {
const formatDate = (date) => {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear()
;(function () {
const formatDate = (date) => {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear()
if (month.length < 2) month = '0' + month
if (day.length < 2) day = '0' + day
if (month.length < 2) month = '0' + month
if (day.length < 2) day = '0' + day
return [month, day, year].join('-')
}
const webmentionsWrapper = document.getElementById('webmentions')
const webmentionsLikesWrapper = document.getElementById('webmentions-likes-wrapper')
const webmentionsBoostsWrapper = document.getElementById('webmentions-boosts-wrapper')
const webmentionsCommentsWrapper = document.getElementById('webmentions-comments-wrapper')
if (webmentionsWrapper && window) {
try {
fetch('https://utils.coryd.dev/api/webmentions?domain=blog.coryd.dev')
.then((response) => response.json())
.then((data) => {
const mentions = data.children
if (mentions.length === 0 || window.location.pathname === '/') {
webmentionsWrapper.remove()
return
}
let likes = ''
let boosts = ''
let comments = ''
mentions.map((mention) => {
if (
mention['wm-property'] === 'like-of' &&
mention['wm-target'].includes(window.location.href)
) {
likes += `<a href="${mention.url}" rel="noopener noreferrer"><img class="avatar" src="${mention.author.photo}" alt="${mention.author.name}" /></a>`
}
if (
mention['wm-property'] === 'repost-of' &&
mention['wm-target'].includes(window.location.href)
) {
boosts += `<a href="${mention.url}" rel="noopener noreferrer"><img class="avatar" src="${mention.author.photo}" alt="${mention.author.name}" /></a>`
}
if (
mention['wm-property'] === 'in-reply-to' &&
mention['wm-target'].includes(window.location.href)
) {
comments += `<div class="webmention-comment"><a href="${
mention.url
}" rel="noopener noreferrer"><div class="webmention-comment-top"><img class="avatar" src="${
mention.author.photo
}" alt="${mention.author.name}" /><div class="time">${formatDate(
mention.published
)}</div></div><div class="comment-body">${
mention.content.text
}</div></a></div>`
}
})
webmentionsLikesWrapper.innerHTML = ''
webmentionsLikesWrapper.insertAdjacentHTML('beforeEnd', likes)
webmentionsBoostsWrapper.innerHTML = ''
webmentionsBoostsWrapper.insertAdjacentHTML('beforeEnd', boosts)
webmentionsCommentsWrapper.innerHTML = ''
webmentionsCommentsWrapper.insertAdjacentHTML('beforeEnd', comments)
webmentionsWrapper.style.opacity = 1
if (likes === '')
document.getElementById('webmentions-likes').innerHTML === ''
if (boosts === '')
document.getElementById('webmentions-boosts').innerHTML === ''
if (comments === '')
document.getElementById('webmentions-comments').innerHTML === ''
if (likes === '' && boosts === '' && comments === '')
webmentionsWrapper.remove()
})
} catch (e) {
webmentionsWrapper.remove()
return [month, day, year].join('-')
}
const webmentionsWrapper = document.getElementById('webmentions')
const webmentionsLikesWrapper = document.getElementById('webmentions-likes-wrapper')
const webmentionsBoostsWrapper = document.getElementById('webmentions-boosts-wrapper')
const webmentionsCommentsWrapper = document.getElementById('webmentions-comments-wrapper')
if (webmentionsWrapper && window) {
try {
fetch('https://utils.coryd.dev/api/webmentions?domain=blog.coryd.dev')
.then((response) => response.json())
.then((data) => {
const mentions = data.children
if (mentions.length === 0 || window.location.pathname === '/') {
webmentionsWrapper.remove()
return
}
}
})()
let likes = ''
let boosts = ''
let comments = ''
mentions.map((mention) => {
if (
mention['wm-property'] === 'like-of' &&
mention['wm-target'].includes(window.location.href)
) {
likes += `<a href="${mention.url}" rel="noopener noreferrer"><img class="avatar" src="${mention.author.photo}" alt="${mention.author.name}" /></a>`
}
if (
mention['wm-property'] === 'repost-of' &&
mention['wm-target'].includes(window.location.href)
) {
boosts += `<a href="${mention.url}" rel="noopener noreferrer"><img class="avatar" src="${mention.author.photo}" alt="${mention.author.name}" /></a>`
}
if (
mention['wm-property'] === 'in-reply-to' &&
mention['wm-target'].includes(window.location.href)
) {
comments += `<div class="webmention-comment"><a href="${
mention.url
}" rel="noopener noreferrer"><div class="webmention-comment-top"><img class="avatar" src="${
mention.author.photo
}" alt="${mention.author.name}" /><div class="time">${formatDate(
mention.published
)}</div></div><div class="comment-body">${mention.content.text}</div></a></div>`
}
})
webmentionsLikesWrapper.innerHTML = ''
webmentionsLikesWrapper.insertAdjacentHTML('beforeEnd', likes)
webmentionsBoostsWrapper.innerHTML = ''
webmentionsBoostsWrapper.insertAdjacentHTML('beforeEnd', boosts)
webmentionsCommentsWrapper.innerHTML = ''
webmentionsCommentsWrapper.insertAdjacentHTML('beforeEnd', comments)
webmentionsWrapper.style.opacity = 1
if (likes === '') document.getElementById('webmentions-likes').innerHTML === ''
if (boosts === '') document.getElementById('webmentions-boosts').innerHTML === ''
if (comments === '') document.getElementById('webmentions-comments').innerHTML === ''
if (likes === '' && boosts === '' && comments === '') webmentionsWrapper.remove()
})
} catch (e) {
webmentionsWrapper.remove()
}
}
})()
})
```
@ -128,18 +122,18 @@ The webmentions HTML shell is as follows:
```html
<div id="webmentions" class="background-purple container">
<div id="webmentions-likes">
<h2><i class="fa-solid fa-fw fa-star"></i> Likes</h2>
<div id="webmentions-likes-wrapper"></div>
</div>
<div id="webmentions-boosts">
<h2><i class="fa-solid fa-fw fa-rocket"></i> Boosts</h2>
<div id="webmentions-boosts-wrapper"></div>
</div>
<div id="webmentions-comments">
<h2><i class="fa-solid fa-fw fa-comment"></i> Comments</h2>
<div id="webmentions-comments-wrapper"></div>
</div>
<div id="webmentions-likes">
<h2><i class="fa-solid fa-fw fa-star"></i> Likes</h2>
<div id="webmentions-likes-wrapper"></div>
</div>
<div id="webmentions-boosts">
<h2><i class="fa-solid fa-fw fa-rocket"></i> Boosts</h2>
<div id="webmentions-boosts-wrapper"></div>
</div>
<div id="webmentions-comments">
<h2><i class="fa-solid fa-fw fa-comment"></i> Comments</h2>
<div id="webmentions-comments-wrapper"></div>
</div>
</div>
```

511
src/posts/2023/automating-and-overengineering-my-now-page.md
View file

@ -21,19 +21,19 @@ I'm already exposing my most recently listened tracks and actively read books on
```typescript
export default async function handler(req: any, res: any) {
const KEY = process.env.API_KEY_LASTFM
const METHODS: { [key: string]: string } = {
default: 'user.getrecenttracks',
albums: 'user.gettopalbums',
artists: 'user.gettopartists',
}
const METHOD = METHODS[req.query.type] || METHODS['default']
const data = await fetch(
`http://ws.audioscrobbler.com/2.0/?method=${METHOD}&user=cdme_&api_key=${KEY}&limit=${
req.query.limit || 20
}&format=${req.query.format || 'json'}&period=${req.query.period || 'overall'}`
).then((response) => response.json())
res.json(data)
const KEY = process.env.API_KEY_LASTFM
const METHODS: { [key: string]: string } = {
default: 'user.getrecenttracks',
albums: 'user.gettopalbums',
artists: 'user.gettopartists',
}
const METHOD = METHODS[req.query.type] || METHODS['default']
const data = await fetch(
`http://ws.audioscrobbler.com/2.0/?method=${METHOD}&user=cdme_&api_key=${KEY}&limit=${
req.query.limit || 20
}&format=${req.query.format || 'json'}&period=${req.query.period || 'overall'}`
).then((response) => response.json())
res.json(data)
}
```
@ -45,24 +45,24 @@ Last.fm's API returns album images, but no longer returns artist images. To solv
import siteMetadata from '@/data/siteMetadata'
export default async function handler(req: any, res: any) {
const env = process.env.NODE_ENV
let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
const ARTIST = req.query.artist
const ALBUM = req.query.album
const MEDIA = ARTIST ? 'artists' : 'albums'
const MEDIA_VAL = ARTIST ? ARTIST : ALBUM
const env = process.env.NODE_ENV
let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
const ARTIST = req.query.artist
const ALBUM = req.query.album
const MEDIA = ARTIST ? 'artists' : 'albums'
const MEDIA_VAL = ARTIST ? ARTIST : ALBUM
const data = await fetch(`${host}/media/${MEDIA}/${MEDIA_VAL}.jpg`)
.then((response) => {
if (response.status === 200) return `${host}/media/${MEDIA}/${MEDIA_VAL}.jpg`
fetch(
`${host}/api/omg/paste-edit?paste=404-images&editType=append&content=${MEDIA_VAL}`
).then((response) => response.json())
return `${host}/media/404.jpg`
})
.then((image) => image)
res.redirect(data)
const data = await fetch(`${host}/media/${MEDIA}/${MEDIA_VAL}.jpg`)
.then((response) => {
if (response.status === 200) return `${host}/media/${MEDIA}/${MEDIA_VAL}.jpg`
fetch(
`${host}/api/omg/paste-edit?paste=404-images&editType=append&content=${MEDIA_VAL}`
).then((response) => response.json())
return `${host}/media/404.jpg`
})
.then((image) => image)
res.redirect(data)
}
```
@ -73,12 +73,12 @@ import { extract } from '@extractus/feed-extractor'
import siteMetadata from '@/data/siteMetadata'
export default async function handler(req: any, res: any) {
const env = process.env.NODE_ENV
let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
const url = `${host}/feeds/books`
const result = await extract(url)
res.json(result)
const env = process.env.NODE_ENV
let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
const url = `${host}/feeds/books`
const result = await extract(url)
res.json(result)
}
```
@ -89,20 +89,20 @@ import { extract } from '@extractus/feed-extractor'
import siteMetadata from '@/data/siteMetadata'
export default async function handler(req: any, res: any) {
const KEY = process.env.API_KEY_TRAKT
const env = process.env.NODE_ENV
let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
const url = `${host}/feeds/tv?slurm=${KEY}`
const result = await extract(url, {
getExtraEntryFields: (feedEntry) => {
return {
image: feedEntry['media:content']['@_url'],
thumbnail: feedEntry['media:thumbnail']['@_url'],
}
},
})
res.json(result)
const KEY = process.env.API_KEY_TRAKT
const env = process.env.NODE_ENV
let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
const url = `${host}/feeds/tv?slurm=${KEY}`
const result = await extract(url, {
getExtraEntryFields: (feedEntry) => {
return {
image: feedEntry['media:content']['@_url'],
thumbnail: feedEntry['media:thumbnail']['@_url'],
}
},
})
res.json(result)
}
```
@ -113,12 +113,12 @@ import { extract } from '@extractus/feed-extractor'
import siteMetadata from '@/data/siteMetadata'
export default async function handler(req: any, res: any) {
const env = process.env.NODE_ENV
let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
const url = `${host}/feeds/movies`
const result = await extract(url)
res.json(result)
const env = process.env.NODE_ENV
let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
const url = `${host}/feeds/movies`
const result = await extract(url)
res.json(result)
}
```
@ -133,199 +133,178 @@ import { nowResponseToMarkdown } from '@/utils/transforms'
import { ALBUM_DENYLIST } from '@/utils/constants'
export default async function handler(req: any, res: any) {
const env = process.env.NODE_ENV
const { APP_KEY_OMG, API_KEY_OMG } = process.env
const ACTION_KEY = req.headers.authorization?.split(' ')[1]
const env = process.env.NODE_ENV
const { APP_KEY_OMG, API_KEY_OMG } = process.env
const ACTION_KEY = req.headers.authorization?.split(' ')[1]
let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
try {
if (ACTION_KEY === APP_KEY_OMG) {
const now = await fetch('https://api.omg.lol/address/cory/pastebin/now.yaml')
.then((res) => res.json())
.then((json) => {
const now = jsYaml.load(json.response.paste.content)
Object.keys(jsYaml.load(json.response.paste.content)).forEach((key) => {
now[key] = listsToMarkdown(now[key])
})
try {
if (ACTION_KEY === APP_KEY_OMG) {
const now = await fetch('https://api.omg.lol/address/cory/pastebin/now.yaml')
.then((res) => res.json())
.then((json) => {
const now = jsYaml.load(json.response.paste.content)
Object.keys(jsYaml.load(json.response.paste.content)).forEach((key) => {
now[key] = listsToMarkdown(now[key])
})
return { now }
})
return { now }
})
const books = await fetch(`${host}/api/books`)
.then((res) => res.json())
.then((json) => {
const data = json.entries
.slice(0, 5)
.map((book: { title: string; link: string }) => {
return {
title: book.title,
link: book.link,
}
})
return {
json: data,
md: data
.map((d: any) => {
return `- [${d.title}](${d.link}) {${getRandomIcon('books')}}`
})
.join('\n'),
}
})
const books = await fetch(`${host}/api/books`)
.then((res) => res.json())
.then((json) => {
const data = json.entries.slice(0, 5).map((book: { title: string; link: string }) => {
return {
title: book.title,
link: book.link,
}
})
return {
json: data,
md: data
.map((d: any) => {
return `- [${d.title}](${d.link}) {${getRandomIcon('books')}}`
})
.join('\n'),
}
})
const movies = await fetch(`${host}/api/movies`)
.then((res) => res.json())
.then((json) => {
const data = json.entries
.slice(0, 5)
.map((movie: { title: string; link: string; description: string }) => {
return {
title: movie.title,
link: movie.link,
desc: movie.description,
}
})
return {
json: data,
md: data
.map((d: any) => {
return `- [${d.title}](${d.link}): ${d.desc} {${getRandomIcon(
'movies'
)}}`
})
.join('\n'),
}
})
const tv = await fetch(`${host}/api/tv`)
.then((res) => res.json())
.then((json) => {
const data = json.entries
.splice(0, 5)
.map(
(episode: {
title: string
link: string
image: string
thumbnail: string
}) => {
return {
title: episode.title,
link: episode.link,
image: episode.image,
thumbnail: episode.thumbnail,
}
}
)
return {
json: data,
html: data
.map((d: any) => {
return `<div class="container"><a href=${d.link} title='${d.title} by ${d.artist}'><div class='cover'></div><div class='details'><div class='text-main'>${d.title}</div></div><img src='${d.thumbnail}' alt='${d.title}' /></div></a>`
})
.join('\n'),
md: data
.map((d: any) => {
return `- [${d.title}](${d.link}) {${getRandomIcon('tv')}}`
})
.join('\n'),
}
})
const musicArtists = await fetch(
`https://utils.coryd.dev/api/music?type=artists&period=7day&limit=8`
)
.then((res) => res.json())
.then((json) => {
const data = json.topartists.artist.map((a: any) => {
return {
artist: a.name,
link: `https://rateyourmusic.com/search?searchterm=${encodeURIComponent(
a.name
)}`,
image: `${host}/api/media?artist=${a.name
.replace(/\s+/g, '-')
.toLowerCase()}`,
}
})
return {
json: data,
html: data
.map((d: any) => {
return `<div class="container"><a href=${d.link} title='${d.title} by ${d.artist}'><div class='cover'></div><div class='details'><div class='text-main'>${d.artist}</div></div><img src='${d.image}' alt='${d.artist}' /></div></a>`
})
.join('\n'),
md: data
.map((d: any) => {
return `- [${d.artist}](${d.link}) {${getRandomIcon('music')}}`
})
.join('\n'),
}
})
const musicAlbums = await fetch(
`https://utils.coryd.dev/api/music?type=albums&period=7day&limit=8`
)
.then((res) => res.json())
.then((json) => {
const data = json.topalbums.album.map((a: any) => ({
title: a.name,
artist: a.artist.name,
link: `https://rateyourmusic.com/search?searchterm=${encodeURIComponent(
a.name
)}`,
image: !ALBUM_DENYLIST.includes(a.name.replace(/\s+/g, '-').toLowerCase())
? a.image[a.image.length - 1]['#text']
: `${host}/api/media?album=${a.name
.replace(/\s+/g, '-')
.toLowerCase()}`,
}))
return {
json: data,
html: data
.map((d: any) => {
return `<div class="container"><a href=${d.link} title='${d.title} by ${d.artist}'><div class='cover'></div><div class='details'><div class='text-main'>${d.title}</div><div class='text-secondary'>${d.artist}</div></div><img src='${d.image}' alt='${d.title} by ${d.artist}' /></div></a>`
})
.join('\n'),
md: data
.map((d: any) => {
return `- [${d.title}](${d.link}) by ${d.artist} {${getRandomIcon(
'music'
)}}`
})
.join('\n'),
}
})
fetch('https://api.omg.lol/address/cory/now', {
method: 'post',
headers: {
Authorization: `Bearer ${API_KEY_OMG}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
content: nowResponseToMarkdown({
now,
books,
movies,
tv,
music: {
artists: musicArtists,
albums: musicAlbums,
},
}),
listed: 1,
}),
const movies = await fetch(`${host}/api/movies`)
.then((res) => res.json())
.then((json) => {
const data = json.entries
.slice(0, 5)
.map((movie: { title: string; link: string; description: string }) => {
return {
title: movie.title,
link: movie.link,
desc: movie.description,
}
})
return {
json: data,
md: data
.map((d: any) => {
return `- [${d.title}](${d.link}): ${d.desc} {${getRandomIcon('movies')}}`
})
.join('\n'),
}
})
res.status(200).json({ success: true })
} else {
res.status(401).json({ success: false })
}
} catch (err) {
res.status(500).json({ success: false })
const tv = await fetch(`${host}/api/tv`)
.then((res) => res.json())
.then((json) => {
const data = json.entries
.splice(0, 5)
.map((episode: { title: string; link: string; image: string; thumbnail: string }) => {
return {
title: episode.title,
link: episode.link,
image: episode.image,
thumbnail: episode.thumbnail,
}
})
return {
json: data,
html: data
.map((d: any) => {
return `<div class="container"><a href=${d.link} title='${d.title} by ${d.artist}'><div class='cover'></div><div class='details'><div class='text-main'>${d.title}</div></div><img src='${d.thumbnail}' alt='${d.title}' /></div></a>`
})
.join('\n'),
md: data
.map((d: any) => {
return `- [${d.title}](${d.link}) {${getRandomIcon('tv')}}`
})
.join('\n'),
}
})
const musicArtists = await fetch(
`https://utils.coryd.dev/api/music?type=artists&period=7day&limit=8`
)
.then((res) => res.json())
.then((json) => {
const data = json.topartists.artist.map((a: any) => {
return {
artist: a.name,
link: `https://rateyourmusic.com/search?searchterm=${encodeURIComponent(a.name)}`,
image: `${host}/api/media?artist=${a.name.replace(/\s+/g, '-').toLowerCase()}`,
}
})
return {
json: data,
html: data
.map((d: any) => {
return `<div class="container"><a href=${d.link} title='${d.title} by ${d.artist}'><div class='cover'></div><div class='details'><div class='text-main'>${d.artist}</div></div><img src='${d.image}' alt='${d.artist}' /></div></a>`
})
.join('\n'),
md: data
.map((d: any) => {
return `- [${d.artist}](${d.link}) {${getRandomIcon('music')}}`
})
.join('\n'),
}
})
const musicAlbums = await fetch(
`https://utils.coryd.dev/api/music?type=albums&period=7day&limit=8`
)
.then((res) => res.json())
.then((json) => {
const data = json.topalbums.album.map((a: any) => ({
title: a.name,
artist: a.artist.name,
link: `https://rateyourmusic.com/search?searchterm=${encodeURIComponent(a.name)}`,
image: !ALBUM_DENYLIST.includes(a.name.replace(/\s+/g, '-').toLowerCase())
? a.image[a.image.length - 1]['#text']
: `${host}/api/media?album=${a.name.replace(/\s+/g, '-').toLowerCase()}`,
}))
return {
json: data,
html: data
.map((d: any) => {
return `<div class="container"><a href=${d.link} title='${d.title} by ${d.artist}'><div class='cover'></div><div class='details'><div class='text-main'>${d.title}</div><div class='text-secondary'>${d.artist}</div></div><img src='${d.image}' alt='${d.title} by ${d.artist}' /></div></a>`
})
.join('\n'),
md: data
.map((d: any) => {
return `- [${d.title}](${d.link}) by ${d.artist} {${getRandomIcon('music')}}`
})
.join('\n'),
}
})
fetch('https://api.omg.lol/address/cory/now', {
method: 'post',
headers: {
Authorization: `Bearer ${API_KEY_OMG}`,
'Content-Type': 'application/json',
},
body: JSON.stringify({
content: nowResponseToMarkdown({
now,
books,
movies,
tv,
music: {
artists: musicArtists,
albums: musicAlbums,
},
}),
listed: 1,
}),
})
res.status(200).json({ success: true })
} else {
res.status(401).json({ success: false })
}
} catch (err) {
res.status(500).json({ success: false })
}
}
```
@ -335,14 +314,14 @@ For items displayed from Markdown I'm attaching a random FontAwesome icon (e.g.
```typescript
export const getRandomIcon = (type: string) => {
const icons = {
books: ['book', 'book-bookmark', 'book-open', 'book-open-reader', 'bookmark'],
music: ['music', 'headphones', 'record-vinyl', 'radio', 'guitar', 'compact-disc'],
movies: ['film', 'display', 'video', 'ticket'],
tv: ['tv', 'display', 'video'],
}
const icons = {
books: ['book', 'book-bookmark', 'book-open', 'book-open-reader', 'bookmark'],
music: ['music', 'headphones', 'record-vinyl', 'radio', 'guitar', 'compact-disc'],
movies: ['film', 'display', 'video', 'ticket'],
tv: ['tv', 'display', 'video'],
}
return icons[type][Math.floor(Math.random() * (icons[type].length - 1 - 0))]
return icons[type][Math.floor(Math.random() * (icons[type].length - 1 - 0))]
}
```
@ -351,16 +330,16 @@ As the final step to wrap this up, calls to `/api/now` are made every 8 hours us
```yaml
name: scheduled-cron-job
on:
schedule:
- cron: '0 */8 * * *'
schedule:
- cron: '0 */8 * * *'
jobs:
cron:
runs-on: ubuntu-latest
steps:
- name: scheduled-cron-job
run: |
curl -X POST 'https://utils.coryd.dev/api/now' \
-H 'Authorization: Bearer ${{ secrets.ACTION_KEY }}'
cron:
runs-on: ubuntu-latest
steps:
- name: scheduled-cron-job
run: |
curl -X POST 'https://utils.coryd.dev/api/now' \
-H 'Authorization: Bearer ${{ secrets.ACTION_KEY }}'
```
This endpoint can also be manually called using another workflow:
@ -369,21 +348,21 @@ This endpoint can also be manually called using another workflow:
name: manual-job
on: [workflow_dispatch]
jobs:
cron:
runs-on: ubuntu-latest
steps:
- name: manual-job
run: |
curl -X POST 'https://utils.coryd.dev/api/now' \
-H 'Authorization: Bearer ${{ secrets.ACTION_KEY }}'
cron:
runs-on: ubuntu-latest
steps:
- name: manual-job
run: |
curl -X POST 'https://utils.coryd.dev/api/now' \
-H 'Authorization: Bearer ${{ secrets.ACTION_KEY }}'
```
So far this works seamlessly — if I want to update or add static content I can do so via my yaml paste at paste.lol and the change will roll out in due time.
Questions? Comments? Feel free to get in touch:
- [Email](mailto:hi@coryd.dev)
- [Mastodon](https://social.lol/@cory)
- [Email](mailto:hi@coryd.dev)
- [Mastodon](https://social.lol/@cory)
---

228
src/posts/2023/automating-rss-syndication-with-nextjs-github.md
View file

@ -16,100 +16,98 @@ import { SERVICES, TAGS } from './config'
import createMastoPost from './createMastoPost'
export default async function syndicate(init?: string) {
const TOKEN_CORYDDEV_GISTS = process.env.TOKEN_CORYDDEV_GISTS
const GIST_ID_SYNDICATION_CACHE = '406166f337b9ed2d494951757a70b9d1'
const GIST_NAME_SYNDICATION_CACHE = 'syndication-cache.json'
const CLEAN_OBJECT = () => {
const INIT_OBJECT = {}
Object.keys(SERVICES).map((service) => (INIT_OBJECT[service] = []))
return INIT_OBJECT
}
const TOKEN_CORYDDEV_GISTS = process.env.TOKEN_CORYDDEV_GISTS
const GIST_ID_SYNDICATION_CACHE = '406166f337b9ed2d494951757a70b9d1'
const GIST_NAME_SYNDICATION_CACHE = 'syndication-cache.json'
const CLEAN_OBJECT = () => {
const INIT_OBJECT = {}
Object.keys(SERVICES).map((service) => (INIT_OBJECT[service] = []))
return INIT_OBJECT
}
async function hydrateCache() {
const CACHE_DATA = CLEAN_OBJECT()
for (const service in SERVICES) {
const data = await extract(SERVICES[service])
const entries = data?.entries
entries.map((entry: FeedEntry) => CACHE_DATA[service].push(entry.id))
async function hydrateCache() {
const CACHE_DATA = CLEAN_OBJECT()
for (const service in SERVICES) {
const data = await extract(SERVICES[service])
const entries = data?.entries
entries.map((entry: FeedEntry) => CACHE_DATA[service].push(entry.id))
}
await fetch(`https://api.github.com/gists/${GIST_ID_SYNDICATION_CACHE}`, {
method: 'PATCH',
headers: {
Authorization: `Bearer ${TOKEN_CORYDDEV_GISTS}`,
'Content-Type': 'application/vnd.github+json',
},
body: JSON.stringify({
gist_id: GIST_ID_SYNDICATION_CACHE,
files: {
'syndication-cache.json': {
content: JSON.stringify(CACHE_DATA),
},
},
}),
})
.then((response) => response.json())
.catch((err) => console.log(err))
}
const DATA = await fetch(`https://api.github.com/gists/${GIST_ID_SYNDICATION_CACHE}`).then(
(response) => response.json()
)
const CONTENT = DATA?.files[GIST_NAME_SYNDICATION_CACHE].content
// rewrite the sync data if init is reset
if (CONTENT === '' || init === 'true') hydrateCache()
if (CONTENT && CONTENT !== '' && !init) {
const existingData = await fetch(
`https://api.github.com/gists/${GIST_ID_SYNDICATION_CACHE}`
).then((response) => response.json())
const existingContent = JSON.parse(existingData?.files[GIST_NAME_SYNDICATION_CACHE].content)
for (const service in SERVICES) {
const data = await extract(SERVICES[service], {
getExtraEntryFields: (feedEntry) => {
return {
tags: feedEntry['cd:tags'],
}
},
})
const entries: (FeedEntry & { tags?: string })[] = data?.entries
if (!existingContent[service].includes(entries[0].id)) {
let tags = ''
if (entries[0].tags) {
entries[0].tags
.split(',')
.forEach((a, index) =>
index === 0 ? (tags += `#${toPascalCase(a)}`) : (tags += ` #${toPascalCase(a)}`)
)
tags += ` ${TAGS[service]}`
} else {
tags = TAGS[service]
}
existingContent[service].push(entries[0].id)
createMastoPost(`${entries[0].title} ${entries[0].link} ${tags}`)
await fetch(`https://api.github.com/gists/${GIST_ID_SYNDICATION_CACHE}`, {
method: 'PATCH',
headers: {
Authorization: `Bearer ${TOKEN_CORYDDEV_GISTS}`,
'Content-Type': 'application/vnd.github+json',
method: 'PATCH',
headers: {
Authorization: `Bearer ${TOKEN_CORYDDEV_GISTS}`,
'Content-Type': 'application/vnd.github+json',
},
body: JSON.stringify({
gist_id: GIST_ID_SYNDICATION_CACHE,
files: {
'syndication-cache.json': {
content: JSON.stringify(existingContent),
},
},
body: JSON.stringify({
gist_id: GIST_ID_SYNDICATION_CACHE,
files: {
'syndication-cache.json': {
content: JSON.stringify(CACHE_DATA),
},
},
}),
}),
})
.then((response) => response.json())
.catch((err) => console.log(err))
}
const DATA = await fetch(`https://api.github.com/gists/${GIST_ID_SYNDICATION_CACHE}`).then(
(response) => response.json()
)
const CONTENT = DATA?.files[GIST_NAME_SYNDICATION_CACHE].content
// rewrite the sync data if init is reset
if (CONTENT === '' || init === 'true') hydrateCache()
if (CONTENT && CONTENT !== '' && !init) {
const existingData = await fetch(
`https://api.github.com/gists/${GIST_ID_SYNDICATION_CACHE}`
).then((response) => response.json())
const existingContent = JSON.parse(existingData?.files[GIST_NAME_SYNDICATION_CACHE].content)
for (const service in SERVICES) {
const data = await extract(SERVICES[service], {
getExtraEntryFields: (feedEntry) => {
return {
tags: feedEntry['cd:tags'],
}
},
})
const entries: (FeedEntry & { tags?: string })[] = data?.entries
if (!existingContent[service].includes(entries[0].id)) {
let tags = ''
if (entries[0].tags) {
entries[0].tags
.split(',')
.forEach((a, index) =>
index === 0
? (tags += `#${toPascalCase(a)}`)
: (tags += ` #${toPascalCase(a)}`)
)
tags += ` ${TAGS[service]}`
} else {
tags = TAGS[service]
}
existingContent[service].push(entries[0].id)
createMastoPost(`${entries[0].title} ${entries[0].link} ${tags}`)
await fetch(`https://api.github.com/gists/${GIST_ID_SYNDICATION_CACHE}`, {
method: 'PATCH',
headers: {
Authorization: `Bearer ${TOKEN_CORYDDEV_GISTS}`,
'Content-Type': 'application/vnd.github+json',
},
body: JSON.stringify({
gist_id: GIST_ID_SYNDICATION_CACHE,
files: {
'syndication-cache.json': {
content: JSON.stringify(existingContent),
},
},
}),
})
.then((response) => response.json())
.catch((err) => console.log(err))
}
}
.then((response) => response.json())
.catch((err) => console.log(err))
}
}
}
}
```
@ -119,9 +117,9 @@ Once the cache is hydrated the script will check the feeds available in `lib/syn
```typescript
export const SERVICES = {
'coryd.dev': 'https://coryd.dev/feed.xml',
glass: 'https://glass.photo/coryd/rss',
letterboxd: 'https://letterboxd.com/cdme/rss/',
'coryd.dev': 'https://coryd.dev/feed.xml',
glass: 'https://glass.photo/coryd/rss',
letterboxd: 'https://letterboxd.com/cdme/rss/',
}
```
@ -129,9 +127,9 @@ As we iterate through this object we also attach tags specific to each service u
```typescript
export const TAGS = {
'coryd.dev': '#Blog',
glass: '#Photo #Glass',
letterboxd: '#Movie #Letterboxd',
'coryd.dev': '#Blog',
glass: '#Photo #Glass',
letterboxd: '#Movie #Letterboxd',
}
```
@ -168,7 +166,7 @@ const generateRss = (posts: PostFrontMatter[], page = 'feed.xml') => `
<webMaster>${siteMetadata.email} (${siteMetadata.author})</webMaster>
<lastBuildDate>${new Date(posts[0].date).toUTCString()}</lastBuildDate>
<atom:link href="${
siteMetadata.siteUrl
siteMetadata.siteUrl
}/${page}" rel="self" type="application/rss+xml"/>
${posts.map(generateRssItem).join('')}
</channel>
@ -214,18 +212,18 @@ import { MASTODON_INSTANCE } from './config'
const KEY = process.env.API_KEY_MASTODON
const createMastoPost = async (content: string) => {
const formData = new FormData()
formData.append('status', content)
const formData = new FormData()
formData.append('status', content)
const res = await fetch(`${MASTODON_INSTANCE}/api/v1/statuses`, {
method: 'POST',
headers: {
Accept: 'application/json',
Authorization: `Bearer ${KEY}`,
},
body: formData,
})
return res.json()
const res = await fetch(`${MASTODON_INSTANCE}/api/v1/statuses`, {
method: 'POST',
headers: {
Accept: 'application/json',
Authorization: `Bearer ${KEY}`,
},
body: formData,
})
return res.json()
}
export default createMastoPost
@ -236,16 +234,16 @@ Back at GitHub, this is all kicked off every hour on the hour using the followin
```yaml
name: scheduled-cron-job
on:
schedule:
- cron: '0 * * * *'
schedule:
- cron: '0 * * * *'
jobs:
cron:
runs-on: ubuntu-latest
steps:
- name: scheduled-cron-job
run: |
curl -X POST 'https://coryd.dev/api/syndicate' \
-H 'Authorization: Bearer ${{ secrets.VERCEL_SYNDICATE_KEY }}'
cron:
runs-on: ubuntu-latest
steps:
- name: scheduled-cron-job
run: |
curl -X POST 'https://coryd.dev/api/syndicate' \
-H 'Authorization: Bearer ${{ secrets.VERCEL_SYNDICATE_KEY }}'
```
Now, as I post things elsewhere, they'll make their way back to Mastodon with a simple title, link and tag set. Read them if you'd like, or filter them out altogether.

508
src/posts/2023/building-a-now-page-using-nextjs-and-social-apis.md
View file

@ -17,10 +17,10 @@ import Link from 'next/link'
import { PageSEO } from '@/components/SEO'
import { Spin } from '@/components/Loading'
import {
MapPinIcon,
CodeBracketIcon,
MegaphoneIcon,
CommandLineIcon,
MapPinIcon,
CodeBracketIcon,
MegaphoneIcon,
CommandLineIcon,
} from '@heroicons/react/24/solid'
import Status from '@/components/Status'
import Albums from '@/components/media/Albums'
@ -34,111 +34,107 @@ let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
export async function getStaticProps() {
return {
props: await loadNowData('status,artists,albums,books,movies,tv'),
revalidate: 3600,
}
return {
props: await loadNowData('status,artists,albums,books,movies,tv'),
revalidate: 3600,
}
}
export default function Now(props) {
const { response, error } = useJson(`${host}/api/now`, props)
const { status, artists, albums, books, movies, tv } = response
const { response, error } = useJson(`${host}/api/now`, props)
const { status, artists, albums, books, movies, tv } = response
if (error) return null
if (!response) return <Spin className="my-2 flex justify-center" />
if (error) return null
if (!response) return <Spin className="my-2 flex justify-center" />
return (
<>
<PageSEO
title={`Now - ${siteMetadata.author}`}
description={siteMetadata.description.now}
/>
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="space-y-2 pt-6 pb-8 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
Now
</h1>
</div>
<div className="pt-12">
<h3 className="text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">
Currently
</h3>
<div className="pl-5 md:pl-10">
<Status status={status} />
<p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
<MapPinIcon className="mr-1 inline h-6 w-6" />
Living in Camarillo, California with my beautiful family, 4 rescue dogs and
a guinea pig.
</p>
<p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
<CodeBracketIcon className="mr-1 inline h-6 w-6" />
Working at <Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href="https://hashicorp.com"
target="_blank"
rel="noopener noreferrer"
>
HashiCorp
</Link>
</p>
<p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
<MegaphoneIcon className="mr-1 inline h-6 w-6" />
Rooting for the{` `}
<Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href="https://lakers.com"
target="_blank"
rel="noopener noreferrer"
>
Lakers
</Link>
, for better or worse.
</p>
</div>
<h3 className="pt-6 text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">
Making
</h3>
<div className="pl-5 md:pl-10">
<p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
<CommandLineIcon className="mr-1 inline h-6 w-6" />
Hacking away on random projects like this page, my <Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href="/blog"
passHref
>
blog
</Link> and whatever else I can find time for.
</p>
</div>
<Artists artists={artists} />
<Albums albums={albums} />
<Reading books={books} />
<Movies movies={movies} />
<TV tv={tv} />
<p className="pt-8 text-center text-xs text-gray-900 dark:text-gray-100">
(This is a{' '}
<Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href="https://nownownow.com/about"
target="_blank"
rel="noopener noreferrer"
>
now page
</Link>
, and if you have your own site, <Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href="https://nownownow.com/about"
target="_blank"
rel="noopener noreferrer"
>
you should make one, too
</Link>
.)
</p>
</div>
</div>
</>
)
return (
<>
<PageSEO title={`Now - ${siteMetadata.author}`} description={siteMetadata.description.now} />
<div className="divide-y divide-gray-200 dark:divide-gray-700">
<div className="space-y-2 pt-6 pb-8 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
Now
</h1>
</div>
<div className="pt-12">
<h3 className="text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">
Currently
</h3>
<div className="pl-5 md:pl-10">
<Status status={status} />
<p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
<MapPinIcon className="mr-1 inline h-6 w-6" />
Living in Camarillo, California with my beautiful family, 4 rescue dogs and a guinea pig.
</p>
<p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
<CodeBracketIcon className="mr-1 inline h-6 w-6" />
Working at <Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href="https://hashicorp.com"
target="_blank"
rel="noopener noreferrer"
>
HashiCorp
</Link>
</p>
<p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
<MegaphoneIcon className="mr-1 inline h-6 w-6" />
Rooting for the{` `}
<Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href="https://lakers.com"
target="_blank"
rel="noopener noreferrer"
>
Lakers
</Link>
, for better or worse.
</p>
</div>
<h3 className="pt-6 text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">
Making
</h3>
<div className="pl-5 md:pl-10">
<p className="mt-2 text-lg leading-7 text-gray-500 dark:text-gray-100">
<CommandLineIcon className="mr-1 inline h-6 w-6" />
Hacking away on random projects like this page, my <Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href="/blog"
passHref
>
blog
</Link> and whatever else I can find time for.
</p>
</div>
<Artists artists={artists} />
<Albums albums={albums} />
<Reading books={books} />
<Movies movies={movies} />
<TV tv={tv} />
<p className="pt-8 text-center text-xs text-gray-900 dark:text-gray-100">
(This is a{' '}
<Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href="https://nownownow.com/about"
target="_blank"
rel="noopener noreferrer"
>
now page
</Link>
, and if you have your own site, <Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href="https://nownownow.com/about"
target="_blank"
rel="noopener noreferrer"
>
you should make one, too
</Link>
.)
</p>
</div>
</div>
</>
)
}
```
@ -151,113 +147,113 @@ import { Albums, Artists, Status, TransformedRss } from '@/types/api'
import { Tracks } from '@/types/api/tracks'
export default async function loadNowData(endpoints?: string) {
const selectedEndpoints = endpoints?.split(',') || null
const TV_KEY = process.env.API_KEY_TRAKT
const MUSIC_KEY = process.env.API_KEY_LASTFM
const env = process.env.NODE_ENV
let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
const selectedEndpoints = endpoints?.split(',') || null
const TV_KEY = process.env.API_KEY_TRAKT
const MUSIC_KEY = process.env.API_KEY_LASTFM
const env = process.env.NODE_ENV
let host = siteMetadata.siteUrl
if (env === 'development') host = 'http://localhost:3000'
let statusJson = null
let artistsJson = null
let albumsJson = null
let booksJson = null
let moviesJson = null
let tvJson = null
let currentTrackJson = null
let statusJson = null
let artistsJson = null
let albumsJson = null
let booksJson = null
let moviesJson = null
let tvJson = null
let currentTrackJson = null
// status
if ((endpoints && selectedEndpoints.includes('status')) || !endpoints) {
const statusUrl = 'https://api.omg.lol/address/cory/statuses/'
statusJson = await fetch(statusUrl)
.then((response) => response.json())
.catch((error) => {
console.log(error)
return {}
})
}
// status
if ((endpoints && selectedEndpoints.includes('status')) || !endpoints) {
const statusUrl = 'https://api.omg.lol/address/cory/statuses/'
statusJson = await fetch(statusUrl)
.then((response) => response.json())
.catch((error) => {
console.log(error)
return {}
})
}
// artists
if ((endpoints && selectedEndpoints.includes('artists')) || !endpoints) {
const artistsUrl = `http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=cdme_&api_key=${MUSIC_KEY}&limit=8&format=json&period=7day`
artistsJson = await fetch(artistsUrl)
.then((response) => response.json())
.catch((error) => {
console.log(error)
return {}
})
}
// artists
if ((endpoints && selectedEndpoints.includes('artists')) || !endpoints) {
const artistsUrl = `http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=cdme_&api_key=${MUSIC_KEY}&limit=8&format=json&period=7day`
artistsJson = await fetch(artistsUrl)
.then((response) => response.json())
.catch((error) => {
console.log(error)
return {}
})
}
// albums
if ((endpoints && selectedEndpoints.includes('albums')) || !endpoints) {
const albumsUrl = `http://ws.audioscrobbler.com/2.0/?method=user.gettopalbums&user=cdme_&api_key=${MUSIC_KEY}&limit=8&format=json&period=7day`
albumsJson = await fetch(albumsUrl)
.then((response) => response.json())
.catch((error) => {
console.log(error)
return {}
})
}
// albums
if ((endpoints && selectedEndpoints.includes('albums')) || !endpoints) {
const albumsUrl = `http://ws.audioscrobbler.com/2.0/?method=user.gettopalbums&user=cdme_&api_key=${MUSIC_KEY}&limit=8&format=json&period=7day`
albumsJson = await fetch(albumsUrl)
.then((response) => response.json())
.catch((error) => {
console.log(error)
return {}
})
}
// books
if ((endpoints && selectedEndpoints.includes('books')) || !endpoints) {
const booksUrl = `${host}/feeds/books`
booksJson = await extract(booksUrl).catch((error) => {
console.log(error)
return {}
})
}
// books
if ((endpoints && selectedEndpoints.includes('books')) || !endpoints) {
const booksUrl = `${host}/feeds/books`
booksJson = await extract(booksUrl).catch((error) => {
console.log(error)
return {}
})
}
// movies
if ((endpoints && selectedEndpoints.includes('movies')) || !endpoints) {
const moviesUrl = `${host}/feeds/movies`
moviesJson = await extract(moviesUrl).catch((error) => {
console.log(error)
return {}
})
moviesJson.entries = moviesJson.entries.splice(0, 5)
}
// movies
if ((endpoints && selectedEndpoints.includes('movies')) || !endpoints) {
const moviesUrl = `${host}/feeds/movies`
moviesJson = await extract(moviesUrl).catch((error) => {
console.log(error)
return {}
})
moviesJson.entries = moviesJson.entries.splice(0, 5)
}
// tv
if ((endpoints && selectedEndpoints.includes('tv')) || !endpoints) {
const tvUrl = `${host}/feeds/tv?slurm=${TV_KEY}`
tvJson = await extract(tvUrl).catch((error) => {
console.log(error)
return {}
})
tvJson.entries = tvJson.entries.splice(0, 5)
}
// tv
if ((endpoints && selectedEndpoints.includes('tv')) || !endpoints) {
const tvUrl = `${host}/feeds/tv?slurm=${TV_KEY}`
tvJson = await extract(tvUrl).catch((error) => {
console.log(error)
return {}
})
tvJson.entries = tvJson.entries.splice(0, 5)
}
// current track
if ((endpoints && selectedEndpoints.includes('currentTrack')) || !endpoints) {
const currentTrackUrl = `http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=cdme_&api_key=${MUSIC_KEY}&limit=1&format=json&period=7day`
currentTrackJson = await fetch(currentTrackUrl)
.then((response) => response.json())
.catch((error) => {
console.log(error)
return {}
})
}
// current track
if ((endpoints && selectedEndpoints.includes('currentTrack')) || !endpoints) {
const currentTrackUrl = `http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=cdme_&api_key=${MUSIC_KEY}&limit=1&format=json&period=7day`
currentTrackJson = await fetch(currentTrackUrl)
.then((response) => response.json())
.catch((error) => {
console.log(error)
return {}
})
}
const res: {
status?: Status
artists?: Artists
albums?: Albums
books?: TransformedRss
movies?: TransformedRss
tv?: TransformedRss
currentTrack?: Tracks
} = {}
if (statusJson) res.status = statusJson.response.statuses.splice(0, 1)[0]
if (artistsJson) res.artists = artistsJson?.topartists.artist
if (albumsJson) res.albums = albumsJson?.topalbums.album
if (booksJson) res.books = booksJson?.entries
if (moviesJson) res.movies = moviesJson?.entries
if (tvJson) res.tv = tvJson?.entries
if (currentTrackJson) res.currentTrack = currentTrackJson?.recenttracks?.track?.[0]
const res: {
status?: Status
artists?: Artists
albums?: Albums
books?: TransformedRss
movies?: TransformedRss
tv?: TransformedRss
currentTrack?: Tracks
} = {}
if (statusJson) res.status = statusJson.response.statuses.splice(0, 1)[0]
if (artistsJson) res.artists = artistsJson?.topartists.artist
if (albumsJson) res.albums = albumsJson?.topalbums.album
if (booksJson) res.books = booksJson?.entries
if (moviesJson) res.movies = moviesJson?.entries
if (tvJson) res.tv = tvJson?.entries
if (currentTrackJson) res.currentTrack = currentTrackJson?.recenttracks?.track?.[0]
// unified response
return res
// unified response
return res
}
```
@ -269,22 +265,22 @@ import { Spin } from '@/components/Loading'
import { Album } from '@/types/api'
const Albums = (props: { albums: Album[] }) => {
const { albums } = props
const { albums } = props
if (!albums) return <Spin className="my-12 flex justify-center" />
if (!albums) return <Spin className="my-12 flex justify-center" />
return (
<>
<h3 className="pt-4 pb-4 text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">
Listening: albums
</h3>
<div className="grid grid-cols-2 gap-2 md:grid-cols-4">
{albums?.map((album) => (
<Cover key={album.mbid} media={album} type="album" />
))}
</div>
</>
)
return (
<>
<h3 className="pt-4 pb-4 text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">
Listening: albums
</h3>
<div className="grid grid-cols-2 gap-2 md:grid-cols-4">
{albums?.map((album) => (
<Cover key={album.mbid} media={album} type="album" />
))}
</div>
</>
)
}
export default Albums
@ -299,44 +295,44 @@ import Link from 'next/link'
import { ALBUM_DENYLIST } from '@/utils/constants'
const Cover = (props: { media: Media; type: 'artist' | 'album' }) => {
const { media, type } = props
const image = (media: Media) => {
let img = ''
if (type === 'album')
img = !ALBUM_DENYLIST.includes(media.name.replace(/\s+/g, '-').toLowerCase())
? media.image[media.image.length - 1]['#text']
: `/media/artists/${media.name.replace(/\s+/g, '-').toLowerCase()}.jpg`
if (type === 'artist')
img = `/media/artists/${media.name.replace(/\s+/g, '-').toLowerCase()}.jpg`
return img
}
const { media, type } = props
const image = (media: Media) => {
let img = ''
if (type === 'album')
img = !ALBUM_DENYLIST.includes(media.name.replace(/\s+/g, '-').toLowerCase())
? media.image[media.image.length - 1]['#text']
: `/media/artists/${media.name.replace(/\s+/g, '-').toLowerCase()}.jpg`
if (type === 'artist')
img = `/media/artists/${media.name.replace(/\s+/g, '-').toLowerCase()}.jpg`
return img
}
return (
<Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href={media.url}
target="_blank"
rel="noopener noreferrer"
title={media.name}
>
<div className="relative">
<div className="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
<div className="absolute left-1 bottom-2 drop-shadow-md">
<div className="px-1 text-xs font-bold text-white">{media.name}</div>
<div className="px-1 text-xs text-white">
{type === 'album' ? media.artist.name : `${media.playcount} plays`}
</div>
</div>
<ImageWithFallback
src={image(media)}
alt={media.name}
className="rounded-lg"
width="350"
height="350"
/>
</div>
</Link>
)
return (
<Link
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
href={media.url}
target="_blank"
rel="noopener noreferrer"
title={media.name}
>
<div className="relative">
<div className="absolute left-0 top-0 h-full w-full rounded-lg border border-primary-500 bg-cover-gradient dark:border-gray-500"></div>
<div className="absolute left-1 bottom-2 drop-shadow-md">
<div className="px-1 text-xs font-bold text-white">{media.name}</div>
<div className="px-1 text-xs text-white">
{type === 'album' ? media.artist.name : `${media.playcount} plays`}
</div>
</div>
<ImageWithFallback
src={image(media)}
alt={media.name}
className="rounded-lg"
width="350"
height="350"
/>
</div>
</Link>
)
}
export default Cover
@ -348,11 +344,11 @@ All of the components for this page [can be viewed on GitHub](https://github.com
import loadNowData from '@/lib/now'
export default async function handler(req, res) {
res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate')
res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate')
const endpoints = req.query.endpoints
const response = await loadNowData(endpoints)
res.json(response)
const endpoints = req.query.endpoints
const response = await loadNowData(endpoints)
res.json(response)
}
```

44
src/posts/2023/building-my-now-page-using-eleventy.md
View file

@ -13,13 +13,13 @@ My /now page is a series of discreet sections — the **Currently** block is [po
const EleventyFetch = require('@11ty/eleventy-fetch')
module.exports = async function () {
const url = 'https://api.omg.lol/address/cory/statuses/'
const res = EleventyFetch(url, {
duration: '1h',
type: 'json',
})
const status = await res
return status.response.statuses[0]
const url = 'https://api.omg.lol/address/cory/statuses/'
const res = EleventyFetch(url, {
duration: '1h',
type: 'json',
})
const status = await res
return status.response.statuses[0]
}
```
@ -29,14 +29,14 @@ The **Listening: artists** and **Listening: albums** sections draw on data from
const EleventyFetch = require('@11ty/eleventy-fetch')
module.exports = async function () {
const MUSIC_KEY = process.env.API_KEY_LASTFM
const url = `http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=cdme_&api_key=${MUSIC_KEY}&limit=8&format=json&period=7day`
const res = EleventyFetch(url, {
duration: '1h',
type: 'json',
})
const artists = await res
return artists.topartists.artist
const MUSIC_KEY = process.env.API_KEY_LASTFM
const url = `http://ws.audioscrobbler.com/2.0/?method=user.gettopartists&user=cdme_&api_key=${MUSIC_KEY}&limit=8&format=json&period=7day`
const res = EleventyFetch(url, {
duration: '1h',
type: 'json',
})
const artists = await res
return artists.topartists.artist
}
```
@ -149,13 +149,13 @@ const { extract } = require('@extractus/feed-extractor')
const { AssetCache } = require('@11ty/eleventy-fetch')
module.exports = async function () {
const url = 'https://oku.club/rss/collection/POaRa'
const asset = new AssetCache('books_data')
if (asset.isCacheValid('1h')) return await asset.getCachedValue()
const res = await extract(url).catch((error) => {})
const data = res.entries
await asset.save(data, 'json')
return data
const url = 'https://oku.club/rss/collection/POaRa'
const asset = new AssetCache('books_data')
if (asset.isCacheValid('1h')) return await asset.getCachedValue()
const res = await extract(url).catch((error) => {})
const data = res.entries
await asset.save(data, 'json')
return data
}
```

260
src/posts/2023/client-side-webmentions-in-nextjs.md
View file

@ -15,9 +15,9 @@ Once you've added the appropriate tags from webmention.io, connected your desire
import loadWebmentions from '@/lib/webmentions'
export default async function handler(req, res) {
const target = req.query.target
const response = await loadWebmentions(target)
res.json(response)
const target = req.query.target
const response = await loadWebmentions(target)
res.json(response)
}
```
@ -36,125 +36,119 @@ import Image from 'next/image'
import { formatDate } from '@/utils/formatters'
const WebmentionsCore = () => {
const { asPath } = useRouter()
const { response, error } = useJson(`/api/webmentions?target=${siteMetadata.siteUrl}${asPath}`)
const webmentions = response?.children
const hasLikes =
webmentions?.filter((mention) => mention['wm-property'] === 'like-of').length > 0
const hasComments =
webmentions?.filter((mention) => mention['wm-property'] === 'in-reply-to').length > 0
const boostsCount = webmentions?.filter(
(mention) =>
mention['wm-property'] === 'repost-of' || mention['wm-property'] === 'mention-of'
).length
const hasBoosts = boostsCount > 0
const hasMention = hasLikes || hasComments || hasBoosts
const { asPath } = useRouter()
const { response, error } = useJson(`/api/webmentions?target=${siteMetadata.siteUrl}${asPath}`)
const webmentions = response?.children
const hasLikes = webmentions?.filter((mention) => mention['wm-property'] === 'like-of').length > 0
const hasComments =
webmentions?.filter((mention) => mention['wm-property'] === 'in-reply-to').length > 0
const boostsCount = webmentions?.filter(
(mention) => mention['wm-property'] === 'repost-of' || mention['wm-property'] === 'mention-of'
).length
const hasBoosts = boostsCount > 0
const hasMention = hasLikes || hasComments || hasBoosts
if (error) return null
if (!response) return <Spin className="my-2 flex justify-center" />
const Boosts = () => {
return (
<div className="flex flex-row items-center">
<div className="mr-2 h-5 w-5">
<Rocket />
</div>
{` `}
<span className="text-sm">{boostsCount}</span>
</div>
)
}
const Likes = () => (
<>
<div className="flex flex-row items-center">
<div className="mr-2 h-5 w-5">
<Heart />
</div>
<ul className="ml-2 flex flex-row">
{webmentions?.map((mention) => {
if (mention['wm-property'] === 'like-of')
return (
<li key={mention['wm-id']} className="-ml-2">
<Link
href={mention.url}
target="_blank"
rel="noopener noreferrer"
>
<Image
className="h-10 w-10 rounded-full border border-primary-500 dark:border-gray-500"
src={mention.author.photo}
alt={mention.author.name}
width="40"
height="40"
/>
</Link>
</li>
)
})}
</ul>
</div>
</>
)
const Comments = () => {
return (
<>
{webmentions?.map((mention) => {
if (mention['wm-property'] === 'in-reply-to') {
return (
<Link
className="border-bottom flex flex-row items-center border-gray-100 pb-4"
key={mention['wm-id']}
href={mention.url}
target="_blank"
rel="noopener noreferrer"
>
<Image
className="h-12 w-12 rounded-full border border-primary-500 dark:border-gray-500"
src={mention.author.photo}
alt={mention.author.name}
width="48"
height="48"
/>
<div className="ml-3">
<p className="text-sm">{mention.content?.text}</p>
<p className="mt-1 text-xs">{formatDate(mention.published)}</p>
</div>
</Link>
)
}
})}
</>
)
}
if (error) return null
if (!response) return <Spin className="my-2 flex justify-center" />
const Boosts = () => {
return (
<>
{hasMention ? (
<div className="text-gray-500 dark:text-gray-100">
<h4 className="pt-3 text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:text-2xl md:leading-10 ">
Webmentions
</h4>
{hasBoosts ? (
<div className="pt-2 pb-4">
<Boosts />
</div>
) : null}
{hasLikes ? (
<div className="pt-2 pb-4">
<Likes />
</div>
) : null}
{hasComments ? (
<div className="pt-2 pb-4">
<Comments />
</div>
) : null}
</div>
) : null}
</>
<div className="flex flex-row items-center">
<div className="mr-2 h-5 w-5">
<Rocket />
</div>
{` `}
<span className="text-sm">{boostsCount}</span>
</div>
)
}
const Likes = () => (
<>
<div className="flex flex-row items-center">
<div className="mr-2 h-5 w-5">
<Heart />
</div>
<ul className="ml-2 flex flex-row">
{webmentions?.map((mention) => {
if (mention['wm-property'] === 'like-of')
return (
<li key={mention['wm-id']} className="-ml-2">
<Link href={mention.url} target="_blank" rel="noopener noreferrer">
<Image
className="h-10 w-10 rounded-full border border-primary-500 dark:border-gray-500"
src={mention.author.photo}
alt={mention.author.name}
width="40"
height="40"
/>
</Link>
</li>
)
})}
</ul>
</div>
</>
)
const Comments = () => {
return (
<>
{webmentions?.map((mention) => {
if (mention['wm-property'] === 'in-reply-to') {
return (
<Link
className="border-bottom flex flex-row items-center border-gray-100 pb-4"
key={mention['wm-id']}
href={mention.url}
target="_blank"
rel="noopener noreferrer"
>
<Image
className="h-12 w-12 rounded-full border border-primary-500 dark:border-gray-500"
src={mention.author.photo}
alt={mention.author.name}
width="48"
height="48"
/>
<div className="ml-3">
<p className="text-sm">{mention.content?.text}</p>
<p className="mt-1 text-xs">{formatDate(mention.published)}</p>
</div>
</Link>
)
}
})}
</>
)
}
return (
<>
{hasMention ? (
<div className="text-gray-500 dark:text-gray-100">
<h4 className="pt-3 text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 md:text-2xl md:leading-10 ">
Webmentions
</h4>
{hasBoosts ? (
<div className="pt-2 pb-4">
<Boosts />
</div>
) : null}
{hasLikes ? (
<div className="pt-2 pb-4">
<Likes />
</div>
) : null}
{hasComments ? (
<div className="pt-2 pb-4">
<Comments />
</div>
) : null}
</div>
) : null}
</>
)
}
export default WebmentionsCore
@ -167,22 +161,22 @@ import { useEffect, useState } from 'react'
import useSWR from 'swr'
export const useJson = (url: string, props?: any) => {
const [response, setResponse] = useState<any>({})
const [response, setResponse] = useState<any>({})
const fetcher = (url: string) =>
fetch(url)
.then((res) => res.json())
.catch()
const { data, error } = useSWR(url, fetcher, { fallbackData: props, refreshInterval: 30000 })
const fetcher = (url: string) =>
fetch(url)
.then((res) => res.json())
.catch()
const { data, error } = useSWR(url, fetcher, { fallbackData: props, refreshInterval: 30000 })
useEffect(() => {
setResponse(data)
}, [data, setResponse])
useEffect(() => {
setResponse(data)
}, [data, setResponse])
return {
response,
error,
}
return {
response,
error,
}
}
```
@ -195,8 +189,8 @@ import dynamic from 'next/dynamic'
import { Spin } from '@/components/Loading'
const Webmentions = dynamic(() => import('@/components/webmentions/WebmentionsCore'), {
ssr: false,
loading: () => <Spin className="my-2 flex justify-center" />,
ssr: false,
loading: () => <Spin className="my-2 flex justify-center" />,
})
export default Webmentions

1
src/posts/2023/env-files-eleventy.md
View file

@ -6,6 +6,7 @@ tags: ['.env', '11ty', 'eleventy']
---
**dotenv-flow:**
> **dotenv-flow** extends **dotenv** adding the ability to have multiple `.env*` files like `.env.development`, `.env.test` and `.env.production`, also allowing defined variables to be overwritten individually in the appropriate `.env*.local` file.
The Eleventy docs recommend the `dotenv` package for working with `.env` files[^1], but I've found `dotenv-flow` to be a bit more useful inasmuch as support for `.env*` file patterns make development more convenient.<!-- excerpt -->

60
src/posts/2023/scheduled-eleventy-builds-cron-github-actions.md
View file

@ -14,24 +14,24 @@ To update my feeds ([feed.xml](https://coryd.dev/feed.xml) and [follow.xml](http
```yaml
name: Scheduled Vercel build
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
schedule:
- cron: '0 * * * *'
schedule:
- cron: '0 * * * *'
jobs:
cron:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
cron:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
```
{% endraw %}
@ -47,22 +47,22 @@ If you need to manually trigger a build, you can do so using a workflow with a {
```yaml
name: Manual Vercel build
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on: [workflow_dispatch]
jobs:
cron:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
cron:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
```
{% endraw %}

54
src/posts/2023/webmentions-in-eleventy.md
View file

@ -17,16 +17,16 @@ I'm fetching data from [webmention.io](https://webmention.io) at build time in `
const EleventyFetch = require('@11ty/eleventy-fetch')
module.exports = async function () {
const KEY_CORYD = process.env.API_KEY_WEBMENTIONS_CORYD_DEV
const url = `https://webmention.io/api/mentions.jf2?token=${KEY_CORYD}&per-page=1000`
const res = EleventyFetch(url, {
duration: '1h',
type: 'json',
})
const webmentions = await res
return {
mentions: webmentions.children,
}
const KEY_CORYD = process.env.API_KEY_WEBMENTIONS_CORYD_DEV
const url = `https://webmention.io/api/mentions.jf2?token=${KEY_CORYD}&per-page=1000`
const res = EleventyFetch(url, {
duration: '1h',
type: 'json',
})
const webmentions = await res
return {
mentions: webmentions.children,
}
}
```
@ -35,29 +35,30 @@ I have cache duration set to `1h` and a scheduled build operating on approximate
```yaml
name: Scheduled Vercel build
env:
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
on:
schedule:
- cron: '0 * * * *'
schedule:
- cron: '0 * * * *'
jobs:
cron:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
cron:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Install Vercel CLI
run: npm install --global vercel@latest
- name: Pull Vercel Environment Information
run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
- name: Build Project Artifacts
run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
- name: Deploy Project Artifacts to Vercel
run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}
```
When the build runs, it renders any mentions of a given post via a [liquid.js](https://liquidjs.com/) template that looks like this:
{% raw %}
```liquid
{% if webmentions %}
<div class="border-t border-gray-200 mt-12 pt-14 dark:border-gray-700">
@ -130,6 +131,7 @@ When the build runs, it renders any mentions of a given post via a [liquid.js](h
</div>
{% endif %}
```
{% endraw %}
This conditionally displays different mention types based on the available data after being passed through the `webmentionsByUrl` filter which I shamelessly lifted from [Robb](https://github.com/rknightuk/rknight.me/blob/8e2a5c5f886cae6c04add7893b8bf8a2d6295ddf/config/filters.js#L48-L84).

6
src/posts/posts.json
View file

@ -1,5 +1,5 @@
{
"layout": "post.liquid",
"tags": ["posts"],
"published": true
"layout": "post.liquid",
"tags": ["posts"],
"published": true
}

14
src/referrals.md
View file

@ -11,10 +11,10 @@ title: Referrals
Referral links for services I use. I save some money and you do as well if you choose to use them.
- <a href="https://referworkspace.app.goo.gl/7BYo" onclick="fathom.trackGoal('EWREAPNX', 0)">Google Workspace</a>
- <a href="https://savvycal.com/?r=coryd" onclick="fathom.trackGoal('UXTCQANC', 0)">SavvyCal</a>
- <a href="https://usefathom.com/ref/EGXCON" onclick="fathom.trackGoal('EWREAPNX', 0)">Fathom Analytics</a>
- <a href="https://nextdns.io/?from=m56mt3z6" onclick="fathom.trackGoal('CG4FNTCN', 0)">NextDNS</a>
- <a href="https://dnsimple.com/r/3a7cbb9e15df8f" onclick="fathom.trackGoal('MFQVXQQ9', 0)">DNSimple</a>
- <a href="https://bunny.net?ref=3kd0m6d30v" onclick="fathom.trackGoal('EIQ2NE4V', 0)">Bunny.net</a>
- <a href="https://m.do.co/c/3635bf99aee2" onclick="fathom.trackGoal('YQQCW9LE', 0)">DigitalOcean</a>
- <a href="https://referworkspace.app.goo.gl/7BYo" onclick="fathom.trackGoal('EWREAPNX', 0)">Google Workspace</a>
- <a href="https://savvycal.com/?r=coryd" onclick="fathom.trackGoal('UXTCQANC', 0)">SavvyCal</a>
- <a href="https://usefathom.com/ref/EGXCON" onclick="fathom.trackGoal('EWREAPNX', 0)">Fathom Analytics</a>
- <a href="https://nextdns.io/?from=m56mt3z6" onclick="fathom.trackGoal('CG4FNTCN', 0)">NextDNS</a>
- <a href="https://dnsimple.com/r/3a7cbb9e15df8f" onclick="fathom.trackGoal('MFQVXQQ9', 0)">DNSimple</a>
- <a href="https://bunny.net?ref=3kd0m6d30v" onclick="fathom.trackGoal('EIQ2NE4V', 0)">Bunny.net</a>
- <a href="https://m.do.co/c/3635bf99aee2" onclick="fathom.trackGoal('YQQCW9LE', 0)">DigitalOcean</a>

1
src/sitemap.md
View file

@ -2,6 +2,7 @@
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
---
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{% for page in collections.all %}
<url>

9
src/tagList.md
View file

@ -1,16 +1,17 @@
---
layout: default
pagination:
data: collections
size: 1
alias: tag
data: collections
size: 1
alias: tag
permalink: /tags/{{ tag }}/
eleventyComputed:
title: '{{ tag }}'
title: '{{ tag }}'
templateEngineOverride: liquid,md
---
{% for post in collections[tag] %}
<div class="mb-8 border-b border-gray-200 pb-4 dark:border-gray-700">
<a class="no-underline" href="{{ post.url }}">
<h2

90
src/uses.md
View file

@ -13,62 +13,62 @@ Software and services that I use for work and my own enjoyment.
<h3 className="text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">Hardware</h3>
- Midnight MacBook Air (2022 - M2)
- 27" Dell Monitor (courtesy of a previous employer that didn't want it back)
- Apple Magic Keyboard
- Apple Magic Trackpad
- Homepod Mini for audio
- Raspberry Pi for Homebridge
- Midnight MacBook Air (2022 - M2)
- 27" Dell Monitor (courtesy of a previous employer that didn't want it back)
- Apple Magic Keyboard
- Apple Magic Trackpad
- Homepod Mini for audio
- Raspberry Pi for Homebridge
<h3 className="text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">macOS + iOS</h3>
- [Todoist](https://todoist.com)
- [Obsidian](https://obsidian.md)
- [Fantastical](https://flexibits.com/)
- [Ivory](https://tapbots.com/ivory)
- [Flighty](https://www.flightyapp.com)
- [Parcel](https://parcelapp.net)
- [Todoist](https://todoist.com)
- [Obsidian](https://obsidian.md)
- [Fantastical](https://flexibits.com/)
- [Ivory](https://tapbots.com/ivory)
- [Flighty](https://www.flightyapp.com)
- [Parcel](https://parcelapp.net)
<h3 className="text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">iOS</h3>
- [Marvis Pro](https://apps.apple.com/app/marvis-pro/id1447768809)
- [status.log](https://apps.apple.com/ca/app/status-log/id6444921793)
- [Marvis Pro](https://apps.apple.com/app/marvis-pro/id1447768809)
- [status.log](https://apps.apple.com/ca/app/status-log/id6444921793)
<h3 className="text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">macOS</h3>
- [VS Code](https://code.visualstudio.com) + [Dracula Pro](https://draculatheme.com/pro)
- [iTerm2](https://iterm2.com)
- [Alfred](https://alfredapp.com)
- [Webcatalog](https://webcatalog.io)
- [Keyboard Maestro](https://www.keyboardmaestro.com/)
- [Arq](https://www.arqbackup.com)
- [Sleeve](https://replay.software/sleeve)
- [Magnet](https://magnet.crowdcafe.com)
- [Hazel](https://www.noodlesoft.com)
- [Bartender](https://www.macbartender.com)
- [AirBuddy](https://v2.airbuddy.app)
- [Lingon](https://www.peterborgapps.com/lingon)
- [Meta](https://www.nightbirdsevolve.com/meta)
- [Permute](https://software.charliemonroe.net/permute)
- [VS Code](https://code.visualstudio.com) + [Dracula Pro](https://draculatheme.com/pro)
- [iTerm2](https://iterm2.com)
- [Alfred](https://alfredapp.com)
- [Webcatalog](https://webcatalog.io)
- [Keyboard Maestro](https://www.keyboardmaestro.com/)
- [Arq](https://www.arqbackup.com)
- [Sleeve](https://replay.software/sleeve)
- [Magnet](https://magnet.crowdcafe.com)
- [Hazel](https://www.noodlesoft.com)
- [Bartender](https://www.macbartender.com)
- [AirBuddy](https://v2.airbuddy.app)
- [Lingon](https://www.peterborgapps.com/lingon)
- [Meta](https://www.nightbirdsevolve.com/meta)
- [Permute](https://software.charliemonroe.net/permute)
<h3 className="text-xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-2xl sm:leading-10 md:text-4xl md:leading-14">Services</h3>
- <a href="https://referworkspace.app.goo.gl/7BYo" onclick="fathom.trackGoal('EWREAPNX', 0)">Google Workspace</a>
- <a href="https://savvycal.com/?r=coryd" onclick="fathom.trackGoal('UXTCQANC', 0)">SavvyCal</a>
- <a href="https://usefathom.com/ref/EGXCON" onclick="fathom.trackGoal('EWREAPNX', 0)">Fathom Analytics</a>
- <a href="https://nextdns.io/?from=m56mt3z6" onclick="fathom.trackGoal('CG4FNTCN', 0)">NextDNS</a>
- <a href="https://dnsimple.com/r/3a7cbb9e15df8f" onclick="fathom.trackGoal('MFQVXQQ9', 0)">DNSimple</a>
- <a href="https://bunny.net?ref=3kd0m6d30v" onclick="fathom.trackGoal('EIQ2NE4V', 0)">Bunny.net</a>
- [1Password](https://1password.com)
- [IVPN](https://www.ivpn.net)
- [Jumpshare](https://jumpshare.com)
- [Apple Music](https://music.apple.com)
- [Slack](http://slack.com)
- [Discord](http://discord.com)
- [Trakt](https://trakt.tv)
- [Letterboxd](https://letterboxd.com)
- [Oku](https://oku.club)
- [Glass](https://glass.photo)
- [Reader](https://readwise.io/read)
- <a href="https://referworkspace.app.goo.gl/7BYo" onclick="fathom.trackGoal('EWREAPNX', 0)">Google Workspace</a>
- <a href="https://savvycal.com/?r=coryd" onclick="fathom.trackGoal('UXTCQANC', 0)">SavvyCal</a>
- <a href="https://usefathom.com/ref/EGXCON" onclick="fathom.trackGoal('EWREAPNX', 0)">Fathom Analytics</a>
- <a href="https://nextdns.io/?from=m56mt3z6" onclick="fathom.trackGoal('CG4FNTCN', 0)">NextDNS</a>
- <a href="https://dnsimple.com/r/3a7cbb9e15df8f" onclick="fathom.trackGoal('MFQVXQQ9', 0)">DNSimple</a>
- <a href="https://bunny.net?ref=3kd0m6d30v" onclick="fathom.trackGoal('EIQ2NE4V', 0)">Bunny.net</a>
- [1Password](https://1password.com)
- [IVPN](https://www.ivpn.net)
- [Jumpshare](https://jumpshare.com)
- [Apple Music](https://music.apple.com)
- [Slack](http://slack.com)
- [Discord](http://discord.com)
- [Trakt](https://trakt.tv)
- [Letterboxd](https://letterboxd.com)
- [Oku](https://oku.club)
- [Glass](https://glass.photo)
- [Reader](https://readwise.io/read)
Check out [uses.tech](https://uses.tech) for more lists like this one.