chore: add prettier
This commit is contained in:
parent
1dbc82b252
commit
04920801b9
39 changed files with 4242 additions and 1647 deletions
0
.prettierignore
Normal file
0
.prettierignore
Normal file
11
.vscode/settings.json
vendored
Normal file
11
.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"editor.formatOnSave": true,
|
||||
"prettier.configPath": "",
|
||||
"prettier.ignorePath": "",
|
||||
"[typescript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
# Astro SSG for my personal site
|
||||
|
||||
## Background
|
||||
|
||||
This is the project for generating the static files for my personal site [ayo.ayco.io](https://ayo.ayco.io) built with [Astro SSG](https://astro.build).
|
||||
|
||||
## Development
|
||||
|
||||
```bash
|
||||
# clone project
|
||||
$ git clone git@git.sr.ht:~ayoayco/ayco.io-astro
|
||||
|
|
@ -17,8 +19,9 @@ $ npm i
|
|||
```
|
||||
|
||||
## Commands
|
||||
|
||||
| Command | Action |
|
||||
| --- | --- |
|
||||
| ---------------- | ----------------------------------------- |
|
||||
| `npm start` | start dev server |
|
||||
| `npm run build` | generate static files to `dist` directory |
|
||||
| `npm run deploy` | run build and upload to my server |
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { defineConfig } from 'astro/config';
|
||||
import serviceWorker from '@ayco/astro-sw';
|
||||
import sitemap from "@astrojs/sitemap";
|
||||
import { defineConfig } from 'astro/config'
|
||||
import serviceWorker from '@ayco/astro-sw'
|
||||
import sitemap from '@astrojs/sitemap'
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
|
|
@ -12,17 +12,15 @@ export default defineConfig({
|
|||
assetCachePrefix: 'ayco-personal-site',
|
||||
assetCacheVersionID: '2',
|
||||
logAssets: true,
|
||||
excludeRoutes: [
|
||||
'/threads'
|
||||
],
|
||||
excludeRoutes: ['/threads'],
|
||||
esbuild: {
|
||||
minify: true
|
||||
minify: true,
|
||||
},
|
||||
registrationHooks: {
|
||||
afterRegistration: () => {
|
||||
console.log('>>> registered sw')
|
||||
}
|
||||
}
|
||||
})
|
||||
]
|
||||
});
|
||||
},
|
||||
},
|
||||
}),
|
||||
],
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,13 +1,18 @@
|
|||
import eslintPluginAstro from "eslint-plugin-astro";
|
||||
import eslintPluginAstro from 'eslint-plugin-astro'
|
||||
|
||||
export default [
|
||||
// add more generic rule sets here, such as:
|
||||
// js.configs.recommended,
|
||||
...eslintPluginAstro.configs["recommended"],
|
||||
...eslintPluginAstro.configs["jsx-a11y-recommended"],
|
||||
...eslintPluginAstro.configs['recommended'],
|
||||
...eslintPluginAstro.configs['jsx-a11y-recommended'],
|
||||
{
|
||||
rules: {
|
||||
// override/add rules settings here, such as:
|
||||
// "astro/no-set-html-directive": "error"
|
||||
ignores: [
|
||||
'dist/*',
|
||||
'.output/*',
|
||||
'.nitro/*',
|
||||
'node-modules*',
|
||||
'site/*',
|
||||
'templates/*',
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
]
|
||||
|
|
|
|||
|
|
@ -27,7 +27,9 @@
|
|||
"eslint": "^9.17.0",
|
||||
"eslint-plugin-astro": "^1.3.1",
|
||||
"eslint-plugin-jsx-a11y": "^6.10.2",
|
||||
"husky": "^9.1.7"
|
||||
"husky": "^9.1.7",
|
||||
"prettier": "^3.4.2",
|
||||
"prettier-plugin-astro": "^0.14.1"
|
||||
},
|
||||
"packageManager": "pnpm@9.15.0+sha512.76e2379760a4328ec4415815bcd6628dee727af3779aaa4c914e3944156c4299921a89f976381ee107d41f12cfa4b66681ca9c718f0668fa0831ed4c6d8ba56c"
|
||||
}
|
||||
|
|
|
|||
4951
pnpm-lock.yaml
4951
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
12
prettier.config.mjs
Normal file
12
prettier.config.mjs
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/**
|
||||
* @see https://prettier.io/docs/en/configuration.html
|
||||
* @type {import("prettier").Config}
|
||||
*/
|
||||
const config = {
|
||||
trailingComma: 'es5',
|
||||
tabWidth: 2,
|
||||
semi: false,
|
||||
singleQuote: true,
|
||||
}
|
||||
|
||||
export default config
|
||||
|
|
@ -74,4 +74,3 @@ h6 {
|
|||
#__next {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,17 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
body: string;
|
||||
href: string;
|
||||
newTab?: boolean;
|
||||
rel?: string;
|
||||
title: string
|
||||
body: string
|
||||
href: string
|
||||
newTab?: boolean
|
||||
rel?: string
|
||||
}
|
||||
|
||||
const { href, title, rel, body, newTab = false } = Astro.props;
|
||||
const { href, title, rel, body, newTab = false } = Astro.props
|
||||
---
|
||||
|
||||
<li class="link-card">
|
||||
<a rel={rel || null} href={href} target={newTab ? "_blank" : null}>
|
||||
<a rel={rel || null} href={href} target={newTab ? '_blank' : null}>
|
||||
<h2>
|
||||
{title}
|
||||
{newTab ? <span> ↗</span> : <span> →</span>}
|
||||
|
|
|
|||
|
|
@ -1,18 +1,25 @@
|
|||
---
|
||||
import {footerLinks as links} from '../constants/links';
|
||||
const year = new Date().getFullYear();
|
||||
import { footerLinks as links } from '../constants/links'
|
||||
const year = new Date().getFullYear()
|
||||
---
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
{
|
||||
links.map((linkObj) => <span class="link-item"><a href={linkObj.url}>{linkObj.text}</a></span>)
|
||||
links.map((linkObj) => (
|
||||
<span class="link-item">
|
||||
<a href={linkObj.url}>{linkObj.text}</a>
|
||||
</span>
|
||||
))
|
||||
}
|
||||
</p>
|
||||
<p>
|
||||
© 2022-{year} <a href="/">Ayo Ayco</a>. This website <a href="https://ayos.blog/stopped-tracking-on-my-sites">does not track users</a>. See the <a href="https://sr.ht/~ayoayco/personal-site">source code</a>.
|
||||
© 2022-{year}
|
||||
<a href="/">Ayo Ayco</a>. This website <a
|
||||
href="https://ayos.blog/stopped-tracking-on-my-sites"
|
||||
>does not track users</a
|
||||
>. See the <a href="https://sr.ht/~ayoayco/personal-site">source code</a>.
|
||||
</p>
|
||||
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
|
|
@ -24,7 +31,7 @@ const year = new Date().getFullYear();
|
|||
padding: 0;
|
||||
|
||||
.link-item:not(:last-child)::after {
|
||||
content: ' • '
|
||||
content: ' • ';
|
||||
}
|
||||
|
||||
p {
|
||||
|
|
@ -32,6 +39,5 @@ const year = new Date().getFullYear();
|
|||
font-size: var(--font-size-sm);
|
||||
line-height: 2em;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,21 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string | undefined;
|
||||
description: string | undefined;
|
||||
title: string | undefined
|
||||
description: string | undefined
|
||||
}
|
||||
const defaultDescription =
|
||||
"Professional software engineer specializing in web development with a decade of experience building web applications for both private businesses and government-funded high-impact projects utilizing web technologies, IoT, data viz/insights, remote sensing, and GIS";
|
||||
'Professional software engineer specializing in web development with a decade of experience building web applications for both private businesses and government-funded high-impact projects utilizing web technologies, IoT, data viz/insights, remote sensing, and GIS'
|
||||
|
||||
const defaultTitle = "Ayo Ayco | Engineering Leader, Software Engineer, Web Developer";
|
||||
const defaultTitle =
|
||||
'Ayo Ayco | Engineering Leader, Software Engineer, Web Developer'
|
||||
|
||||
let { title = defaultTitle, description = defaultDescription } = Astro.props;
|
||||
let { title, description = defaultDescription } = Astro.props
|
||||
|
||||
const baseURL = "https://ayo.ayco.io";
|
||||
const baseURL = 'https://ayo.ayco.io'
|
||||
---
|
||||
|
||||
<head>
|
||||
<title>{title}</title>
|
||||
<title>{title ? `${title} | ${defaultTitle}` : defaultTitle}</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
|
|
@ -41,28 +42,14 @@ const baseURL = "https://ayo.ayco.io";
|
|||
|
||||
<link rel="shortcut icon" type="image/png" href="/favicon.ico" />
|
||||
|
||||
{
|
||||
title !== defaultTitle && (
|
||||
<script>
|
||||
const title = document.title;
|
||||
const defaultTitle = "Ayo Ayco | Engineering Leader, Software Engineer, Web Developer"
|
||||
if(title) {
|
||||
(document.title = `${title} | ${defaultTitle}`)
|
||||
}
|
||||
</script>
|
||||
)
|
||||
}
|
||||
<script>
|
||||
/**
|
||||
* unregister existing service workers
|
||||
*/
|
||||
navigator.serviceWorker.getRegistrations()
|
||||
.then(
|
||||
(registrations) => {
|
||||
for(let registration of registrations) {
|
||||
registration.unregister();
|
||||
navigator.serviceWorker.getRegistrations().then((registrations) => {
|
||||
for (let registration of registrations) {
|
||||
registration.unregister()
|
||||
}
|
||||
}
|
||||
);
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,32 +1,31 @@
|
|||
---
|
||||
import Icon from "astro-iconify";
|
||||
import type { Link } from "../constants/links";
|
||||
import Icon from 'astro-iconify'
|
||||
import type { Link } from '../constants/links'
|
||||
|
||||
export interface Props {
|
||||
links: Link[];
|
||||
links: Link[]
|
||||
}
|
||||
|
||||
let { links } = Astro.props;
|
||||
let { links } = Astro.props
|
||||
|
||||
if (Astro.url.pathname !== "/") {
|
||||
if (Astro.url.pathname !== '/') {
|
||||
links = [
|
||||
{
|
||||
url: "/",
|
||||
icon: "home",
|
||||
url: '/',
|
||||
icon: 'home',
|
||||
},
|
||||
].concat(links);
|
||||
].concat(links)
|
||||
}
|
||||
|
||||
---
|
||||
|
||||
<nav>
|
||||
<div id="wrapper">
|
||||
{
|
||||
links
|
||||
.filter((link) => link.url !== "")
|
||||
.filter((link) => link.url !== '')
|
||||
.map((link) => (
|
||||
<a href={link.url}>
|
||||
<Icon pack={link.set ?? "mdi"} name={link.icon} />{" "}
|
||||
<Icon pack={link.set ?? 'mdi'} name={link.icon} />{' '}
|
||||
{link.text ?? link.icon}
|
||||
</a>
|
||||
))
|
||||
|
|
@ -74,5 +73,4 @@ if (Astro.url.pathname !== "/") {
|
|||
a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
---
|
||||
import type { AstroInstance } from "astro";
|
||||
import type { AstroInstance } from 'astro'
|
||||
|
||||
export interface Props {
|
||||
posts: AstroInstance[];
|
||||
title?: string;
|
||||
posts: AstroInstance[]
|
||||
title?: string
|
||||
}
|
||||
const { title, posts } = Astro.props;
|
||||
const postUrls: string[] = posts.map((post) => post.url || "");
|
||||
const { title, posts } = Astro.props
|
||||
const postUrls: string[] = posts.map((post) => post.url || '')
|
||||
---
|
||||
|
||||
{title ? <h2>{title}</h2> : ""}
|
||||
{title ? <h2>{title}</h2> : ''}
|
||||
<ul>
|
||||
{
|
||||
postUrls
|
||||
.reverse()
|
||||
.filter((url) => url !== "")
|
||||
.filter((url) => url !== '')
|
||||
.map((url) => (
|
||||
<li>
|
||||
<a href={url} title={url?.replace("/now/and-then/posts/", "")}>
|
||||
{url?.replace("/now/and-then/posts/", "")}
|
||||
<a href={url} title={url?.replace('/now/and-then/posts/', '')}>
|
||||
{url?.replace('/now/and-then/posts/', '')}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -1,15 +1,14 @@
|
|||
export type Link = {
|
||||
url: string;
|
||||
icon: string;
|
||||
set?: string;
|
||||
text?: string;
|
||||
};
|
||||
|
||||
url: string
|
||||
icon: string
|
||||
set?: string
|
||||
text?: string
|
||||
}
|
||||
|
||||
export const links: Link[] = [
|
||||
{
|
||||
url: "https://ayos.blog",
|
||||
icon: "blog",
|
||||
url: 'https://ayos.blog',
|
||||
icon: 'blog',
|
||||
},
|
||||
/*
|
||||
{
|
||||
|
|
@ -19,15 +18,15 @@ export const links: Link[] = [
|
|||
},
|
||||
*/
|
||||
{
|
||||
url: "/threads",
|
||||
text: "threads",
|
||||
icon: "needle-thread",
|
||||
set: "tabler"
|
||||
url: '/threads',
|
||||
text: 'threads',
|
||||
icon: 'needle-thread',
|
||||
set: 'tabler',
|
||||
},
|
||||
{
|
||||
url: "https://metapixl.com/i/portfolio/ayo",
|
||||
icon: "image",
|
||||
text: "photos"
|
||||
url: 'https://metapixl.com/i/portfolio/ayo',
|
||||
icon: 'image',
|
||||
text: 'photos',
|
||||
},
|
||||
// {
|
||||
// url: "https://www.npmjs.com/~aayco",
|
||||
|
|
@ -35,53 +34,53 @@ export const links: Link[] = [
|
|||
// set: "gg"
|
||||
// }
|
||||
{
|
||||
url: "https://soundcloud.com/ayoayco",
|
||||
icon: "soundcloud",
|
||||
text: "music"
|
||||
}
|
||||
];
|
||||
url: 'https://soundcloud.com/ayoayco',
|
||||
icon: 'soundcloud',
|
||||
text: 'music',
|
||||
},
|
||||
]
|
||||
|
||||
export default links;
|
||||
export default links
|
||||
|
||||
export const footerLinks = [
|
||||
{
|
||||
text: 'GitHub',
|
||||
url: 'https://github.com/ayoayco'
|
||||
url: 'https://github.com/ayoayco',
|
||||
},
|
||||
{
|
||||
text: 'SourceHut',
|
||||
url: 'https://sr.ht/~ayoayco'
|
||||
url: 'https://sr.ht/~ayoayco',
|
||||
},
|
||||
{
|
||||
text: 'LinkedIn',
|
||||
url: 'https://www.linkedin.com/in/ayoayco'
|
||||
url: 'https://www.linkedin.com/in/ayoayco',
|
||||
},
|
||||
{
|
||||
text: 'Pixelfed',
|
||||
url: 'https://metapixl.com/@ayo'
|
||||
url: 'https://metapixl.com/@ayo',
|
||||
},
|
||||
{
|
||||
text: 'SoundCloud',
|
||||
url: 'https://SoundCloud.com/ayoayco'
|
||||
url: 'https://SoundCloud.com/ayoayco',
|
||||
},
|
||||
{
|
||||
text: 'NPM',
|
||||
url: 'https://www.npmjs.com/~aayco'
|
||||
url: 'https://www.npmjs.com/~aayco',
|
||||
},
|
||||
{
|
||||
text: 'Instagram',
|
||||
url: 'https://instagram.com/ayoayco'
|
||||
url: 'https://instagram.com/ayoayco',
|
||||
},
|
||||
{
|
||||
text: 'Web Tools',
|
||||
url: 'https://m.webtoo.ls/@ayo'
|
||||
url: 'https://m.webtoo.ls/@ayo',
|
||||
},
|
||||
{
|
||||
text: 'Ayco Social',
|
||||
url: 'https://social.ayco.io'
|
||||
url: 'https://social.ayco.io',
|
||||
},
|
||||
{
|
||||
text: 'Bluesky',
|
||||
url: 'https://bsky.app/profile/ayco.io'
|
||||
}
|
||||
url: 'https://bsky.app/profile/ayco.io',
|
||||
},
|
||||
]
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
const now = {
|
||||
status: 'Celebrating the year\'s end 🎉',
|
||||
status: "Celebrating the year's end 🎉",
|
||||
publishDate: '2024-12-25',
|
||||
readableDate: 'the Christmas Day of 2024',
|
||||
publishState: 'while on the way home after a vacation in Germany; now onboard a train from Eindhoven to Amsterdam.'
|
||||
publishState:
|
||||
'while on the way home after a vacation in Germany; now onboard a train from Eindhoven to Amsterdam.',
|
||||
}
|
||||
|
||||
export default now
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
|
||||
export const stuff: {
|
||||
icon: string;
|
||||
text: string;
|
||||
link?: {url: string, text: string};
|
||||
icon: string
|
||||
text: string
|
||||
link?: { url: string; text: string }
|
||||
}[] = [
|
||||
// {
|
||||
// icon: '🧐',
|
||||
|
|
@ -17,39 +16,39 @@ export const stuff: {
|
|||
text: 'Experimenting with',
|
||||
link: {
|
||||
url: 'https://mcfly.js.org',
|
||||
text: 'McFly'
|
||||
}
|
||||
text: 'McFly',
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: '🧸',
|
||||
text: 'Creator of',
|
||||
link: {
|
||||
url: 'https://cozy.pub',
|
||||
text: 'Cozy'
|
||||
}
|
||||
text: 'Cozy',
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: '🧱',
|
||||
text: 'Creator of',
|
||||
link: {
|
||||
url: 'https://webcomponent.io',
|
||||
text: 'WebComponent.io'
|
||||
}
|
||||
text: 'WebComponent.io',
|
||||
},
|
||||
// {
|
||||
// icon: '🧱',
|
||||
// text: '...and some',
|
||||
// link: {
|
||||
// url: '/stuff',
|
||||
// text: 'small stuff'
|
||||
// }
|
||||
// },
|
||||
},
|
||||
// {
|
||||
// icon: '🧱',
|
||||
// text: '...and some',
|
||||
// link: {
|
||||
// url: '/stuff',
|
||||
// text: 'small stuff'
|
||||
// }
|
||||
// },
|
||||
{
|
||||
icon: '🦌',
|
||||
text: 'Contributor to',
|
||||
link: {
|
||||
url: 'https://github.com/ayoayco/ayoayco/blob/main/elk.md#elk-contributions',
|
||||
text: 'Elk.zone'
|
||||
}
|
||||
}
|
||||
text: 'Elk.zone',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
---
|
||||
import "./variables.css";
|
||||
import "./reset.css";
|
||||
import Head from "../components/Head.astro";
|
||||
import Nav from "../components/Nav.astro";
|
||||
import links from "../constants/links";
|
||||
import './variables.css'
|
||||
import './reset.css'
|
||||
import Head from '../components/Head.astro'
|
||||
import Nav from '../components/Nav.astro'
|
||||
import links from '../constants/links'
|
||||
export interface Props {
|
||||
title?: string;
|
||||
description?: string;
|
||||
title?: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
const { title, description } = Astro.props
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import Footer from '../components/Footer.astro'
|
||||
|
||||
const description = "Have you tried turning it off and on again?";
|
||||
const description = 'Have you tried turning it off and on again?'
|
||||
---
|
||||
|
||||
<Layout title="Not Found" description={description}>
|
||||
|
|
@ -141,11 +141,11 @@ const description = "Have you tried turning it off and on again?";
|
|||
}
|
||||
|
||||
.now-label::before {
|
||||
content: "* ";
|
||||
content: '* ';
|
||||
}
|
||||
|
||||
.now-label::after {
|
||||
content: ":";
|
||||
content: ':';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import { stuff } from "../constants/stuff";
|
||||
import now from "../constants/now";
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import Card from '../components/Card.astro'
|
||||
import Footer from '../components/Footer.astro'
|
||||
import { stuff } from '../constants/stuff'
|
||||
import now from '../constants/now'
|
||||
|
||||
// const isDev = import.meta.env.DEV;
|
||||
// const getOriginUrl = (path: string) => isDev ? `http://localhost:5000/${path}` : path;
|
||||
|
|
@ -169,7 +169,7 @@ import now from "../constants/now";
|
|||
}
|
||||
|
||||
.status::before {
|
||||
content: "Now: ";
|
||||
content: 'Now: ';
|
||||
}
|
||||
|
||||
.status {
|
||||
|
|
|
|||
|
|
@ -1,40 +1,77 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import Posts from "../components/Posts.astro";
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import Footer from '../components/Footer.astro'
|
||||
import Posts from '../components/Posts.astro'
|
||||
import now from '../constants/now'
|
||||
|
||||
const posts = await Astro.glob("./now/and-then/posts/*.astro");
|
||||
const posts = await Astro.glob('./now/and-then/posts/*.astro')
|
||||
---
|
||||
|
||||
<Layout title="Now" description="What is Ayo Ayco currently up to?">
|
||||
<main>
|
||||
<h1><span class="text-gradient">Now: {now.status}</span></h1>
|
||||
<p>
|
||||
<em>Published on <time datetime="{now.publishDate}">{now.readableDate ?? now.publishDate}</time> {now.publishState}</em>
|
||||
<em
|
||||
>Published on <time datetime="{now.publishDate}"
|
||||
>{now.readableDate ?? now.publishDate}</time
|
||||
>
|
||||
{now.publishState}</em
|
||||
>
|
||||
</p>
|
||||
|
||||
<p>Christmas holidays as started for me.</p>
|
||||
|
||||
<p>I think I finished all needed stuff for work. Also messaged people online for a final happy holiday greetings of the year. Will go offline til January and figure out my rhythm for next year.</p>
|
||||
<p>
|
||||
I think I finished all needed stuff for work. Also messaged people online
|
||||
for a final happy holiday greetings of the year. Will go offline til
|
||||
January and figure out my rhythm for next year.
|
||||
</p>
|
||||
|
||||
<p>Reading Radical Candor by Kim Scott. Feels like a lot of these kind of books are a rehash of concepts in "The 7 Habits of Highly Effective People" and "How to Win Friends and Influence People" -- I recommend those first before this one! I like that “humility” was also given a spotlight; there's not enough attention to the effectivity/productivity of acknowledging you can be wrong and welcoming feedback (both praise & criticism). Hard to capture in a paragraph though -- ask me to elaborate if you want and when given the chance!</p>
|
||||
<p>
|
||||
Reading Radical Candor by Kim Scott. Feels like a lot of these kind of
|
||||
books are a rehash of concepts in "The 7 Habits of Highly Effective
|
||||
People" and "How to Win Friends and Influence People" -- I recommend those
|
||||
first before this one! I like that “humility” was also given a spotlight;
|
||||
there's not enough attention to the effectivity/productivity of
|
||||
acknowledging you can be wrong and welcoming feedback (both praise &
|
||||
criticism). Hard to capture in a paragraph though -- ask me to elaborate
|
||||
if you want and when given the chance!
|
||||
</p>
|
||||
|
||||
<p>Also reinforced the idea that 'writing a story' in my head about people, with prejudice, is unproductive. Assumptions are never good; always verify before forming judgments and/or giving feedbacks.</p>
|
||||
<p>
|
||||
Also reinforced the idea that 'writing a story' in my head about people,
|
||||
with prejudice, is unproductive. Assumptions are never good; always verify
|
||||
before forming judgments and/or giving feedbacks.
|
||||
</p>
|
||||
|
||||
<p>Spent some time in Aachen, Germany with the fam. Walked around the Christmas Market there. Food trip galore, sat at cafes, read books, bought stuff. :)</p>
|
||||
<p>
|
||||
Spent some time in Aachen, Germany with the fam. Walked around the
|
||||
Christmas Market there. Food trip galore, sat at cafes, read books, bought
|
||||
stuff. :)
|
||||
</p>
|
||||
|
||||
<p>But the highlight is going to Monschau on a day trip. Kahel buit a small snowman.</p>
|
||||
<p>
|
||||
But the highlight is going to Monschau on a day trip. Kahel buit a small
|
||||
snowman.
|
||||
</p>
|
||||
|
||||
<p>Also, realized down-time travel time is infinitely more productive when listening to Audio books. It is especially effective for me for books I have already finished and just need a review. So I am glad I have a copy of the 7-habits book ready -- I finished that one years ago, listening to the audio is mostly just a review.</p>
|
||||
<p>
|
||||
Also, realized down-time travel time is infinitely more productive when
|
||||
listening to Audio books. It is especially effective for me for books I
|
||||
have already finished and just need a review. So I am glad I have a copy
|
||||
of the 7-habits book ready -- I finished that one years ago, listening to
|
||||
the audio is mostly just a review.
|
||||
</p>
|
||||
|
||||
<p>Stopping now before this becomes a long blog about books; seems I need to write that separately...</p>
|
||||
<p>
|
||||
Stopping now before this becomes a long blog about books; seems I need to
|
||||
write that separately...
|
||||
</p>
|
||||
|
||||
<Posts posts={posts} title="Previously..." />
|
||||
<hr />
|
||||
<em><a href="https://nownownow.com/about">About now pages</a></em>
|
||||
<Footer />
|
||||
|
||||
</main>
|
||||
</Layout>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
import Layout from "../../../layouts/Layout.astro";
|
||||
import Footer from "../../../components/Footer.astro";
|
||||
import Posts from "../../../components/Posts.astro";
|
||||
import Layout from '../../../layouts/Layout.astro'
|
||||
import Footer from '../../../components/Footer.astro'
|
||||
import Posts from '../../../components/Posts.astro'
|
||||
|
||||
const posts = await Astro.glob("./posts/*.astro");
|
||||
const title = "Previously...";
|
||||
const posts = await Astro.glob('./posts/*.astro')
|
||||
const title = 'Previously...'
|
||||
---
|
||||
|
||||
<Layout title={title} description="What Ayo Ayco have been up to?">
|
||||
|
|
@ -17,7 +17,6 @@ const title = "Previously...";
|
|||
</Layout>
|
||||
|
||||
<style>
|
||||
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,20 @@
|
|||
---
|
||||
import Layout from "../../../../layouts/Layout.astro";
|
||||
import Footer from "../../../../components/Footer.astro";
|
||||
const title = "Settling in The Netherlands";
|
||||
import Layout from '../../../../layouts/Layout.astro'
|
||||
import Footer from '../../../../components/Footer.astro'
|
||||
const title = 'Settling in The Netherlands'
|
||||
const description =
|
||||
"This year (2022) I have moved to The Netherlands with my family; specifically to the northern area of Amsterdam.";
|
||||
'This year (2022) I have moved to The Netherlands with my family; specifically to the northern area of Amsterdam.'
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<main>
|
||||
<h1><span class="text-gradient">{title}</span></h1>
|
||||
<p>
|
||||
<em>Published on the <time datetime="2022-09-20">20th of September, 2022</time></em>
|
||||
<em
|
||||
>Published on the <time datetime="2022-09-20"
|
||||
>20th of September, 2022</time
|
||||
></em
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
This year (2022) I have moved to The Netherlands with my family;
|
||||
|
|
@ -32,7 +36,6 @@ const description =
|
|||
</Layout>
|
||||
|
||||
<style>
|
||||
|
||||
main {
|
||||
margin: auto;
|
||||
padding: 1em;
|
||||
|
|
|
|||
|
|
@ -1,18 +1,24 @@
|
|||
---
|
||||
import Layout from "../../../../layouts/Layout.astro";
|
||||
import Footer from "../../../../components/Footer.astro";
|
||||
const title = "The Fediverse and Other Passion Projects";
|
||||
const description = "I have been living now in Amsterdam for a little over a year with my wife and son."
|
||||
import Layout from '../../../../layouts/Layout.astro'
|
||||
import Footer from '../../../../components/Footer.astro'
|
||||
const title = 'The Fediverse and Other Passion Projects'
|
||||
const description =
|
||||
'I have been living now in Amsterdam for a little over a year with my wife and son.'
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<main>
|
||||
<h1><span class="text-gradient">{title}</span></h1>
|
||||
<p>
|
||||
<em>Published on the <time datetime="2023-01-19">19th of January, 2023</time></em>
|
||||
<em
|
||||
>Published on the <time datetime="2023-01-19"
|
||||
>19th of January, 2023</time
|
||||
></em
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
I have been living now in Amsterdam for a little over a year with my wife and son.
|
||||
I have been living now in Amsterdam for a little over a year with my wife
|
||||
and son.
|
||||
</p>
|
||||
<p>
|
||||
I am employed as a frontend web developer by <a
|
||||
|
|
|
|||
|
|
@ -1,27 +1,38 @@
|
|||
---
|
||||
import Layout from "../../../../layouts/Layout.astro";
|
||||
import Footer from "../../../../components/Footer.astro";
|
||||
const title = "Building a Cozy Web without borders...";
|
||||
const description = "A project that aims to be a modern-day reading assistant"
|
||||
import Layout from '../../../../layouts/Layout.astro'
|
||||
import Footer from '../../../../components/Footer.astro'
|
||||
const title = 'Building a Cozy Web without borders...'
|
||||
const description = 'A project that aims to be a modern-day reading assistant'
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<main>
|
||||
<h1><span class="text-gradient">{title}</span></h1>
|
||||
<p>
|
||||
<em>Published on the <time datetime="2023-06-23">23rd of June, 2023</time></em>
|
||||
<em
|
||||
>Published on the <time datetime="2023-06-23">23rd of June, 2023</time
|
||||
></em
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
Recently started a new project that aims to be a modern-day reading assistant, called <a href="https://ayco.io/gh/cozy">Cozy 🧸</a>.
|
||||
Recently started a new project that aims to be a modern-day reading
|
||||
assistant, called <a href="https://ayco.io/gh/cozy">Cozy 🧸</a>.
|
||||
</p>
|
||||
<p>
|
||||
The full motivation as of the moment, I've written on <a href="https://ayos.blog/building-a-cozy-web/">my blog</a>.
|
||||
The full motivation as of the moment, I've written on <a
|
||||
href="https://ayos.blog/building-a-cozy-web/">my blog</a
|
||||
>.
|
||||
</p>
|
||||
<p>
|
||||
Also started exploring ways to interact on the web without being confined on a centralized solution that big tech companies have lured us into.
|
||||
Also started exploring ways to interact on the web without being confined
|
||||
on a centralized solution that big tech companies have lured us into.
|
||||
</p>
|
||||
<p>
|
||||
I mean protocols that allow websites and people to exchange messages with each other without borders, like <a href="https://www.w3.org/TR/webmention/">webmention</a>, <a href="https://www.w3.org/TR/activitypub/">activitypub</a>, and the likes.
|
||||
I mean protocols that allow websites and people to exchange messages with
|
||||
each other without borders, like <a
|
||||
href="https://www.w3.org/TR/webmention/">webmention</a
|
||||
>, <a href="https://www.w3.org/TR/activitypub/">activitypub</a>, and the
|
||||
likes.
|
||||
</p>
|
||||
<Footer />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,42 @@
|
|||
---
|
||||
import Layout from "../../../../layouts/Layout.astro";
|
||||
import Footer from "../../../../components/Footer.astro";
|
||||
import Layout from '../../../../layouts/Layout.astro'
|
||||
import Footer from '../../../../components/Footer.astro'
|
||||
|
||||
const title = "Certified Software Architecture Professional";
|
||||
const description = "I am now a Certified Professional for Software Architecture (CPSA-F®)";
|
||||
const title = 'Certified Software Architecture Professional'
|
||||
const description =
|
||||
'I am now a Certified Professional for Software Architecture (CPSA-F®)'
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<main>
|
||||
<h1><span class="text-gradient">{title}</span></h1>
|
||||
<p>
|
||||
<em>Published on the <time datetime="2023-09-09">9th of September, 2023</time></em>
|
||||
<em
|
||||
>Published on the <time datetime="2023-09-09"
|
||||
>9th of September, 2023</time
|
||||
></em
|
||||
>
|
||||
</p>
|
||||
|
||||
<p>🎉 Thrilled to share I am now a Certified Professional for Software Architecture (CPSA-F®) after having completed and passed the <a href="https://www.isaqb.org/" target="_blank">iSAQB® – International Software Architecture Qualification Board</a>'s intensive training and examination.</p>
|
||||
<p>
|
||||
🎉 Thrilled to share I am now a Certified Professional for Software
|
||||
Architecture (CPSA-F®) after having completed and passed the <a
|
||||
href="https://www.isaqb.org/"
|
||||
target="_blank"
|
||||
>iSAQB® – International Software Architecture Qualification Board</a
|
||||
>'s intensive training and examination.
|
||||
</p>
|
||||
|
||||
<p>This means I have the necessary basis for facilitating / participating in architectural design activities for software development.</p>
|
||||
<p>
|
||||
This means I have the necessary basis for facilitating / participating in
|
||||
architectural design activities for software development.
|
||||
</p>
|
||||
|
||||
<p>Having a consistent language in Software Architecture is beneficial when communicating with stakeholders and clarifying consistent patterns and principles that guide the development of software products.</p>
|
||||
<p>
|
||||
Having a consistent language in Software Architecture is beneficial when
|
||||
communicating with stakeholders and clarifying consistent patterns and
|
||||
principles that guide the development of software products.
|
||||
</p>
|
||||
<Footer />
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,23 +1,42 @@
|
|||
---
|
||||
import Layout from "../../../../layouts/Layout.astro";
|
||||
import Footer from "../../../../components/Footer.astro";
|
||||
import Layout from '../../../../layouts/Layout.astro'
|
||||
import Footer from '../../../../components/Footer.astro'
|
||||
|
||||
const title = "Relearning Python & working on /threads";
|
||||
const description = "Building again with Python";
|
||||
const title = 'Relearning Python & working on /threads'
|
||||
const description = 'Building again with Python'
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<main>
|
||||
<h1><span class="text-gradient">{title}</span></h1>
|
||||
<p>
|
||||
<em>Published on the <time datetime="2024-04-19">19th of April, 2024</time></em>
|
||||
<em
|
||||
>Published on the <time datetime="2024-04-19">19th of April, 2024</time
|
||||
></em
|
||||
>
|
||||
</p>
|
||||
|
||||
<p>After a while of reading and deep consideration, I have decided to pick up Python as my chosen general-purpose programming language. I worked with Python 2 for a short while in the past, but only briefly for some projects and not really learning much in the larger ecosystem.</p>
|
||||
<p>
|
||||
After a while of reading and deep consideration, I have decided to pick up
|
||||
Python as my chosen general-purpose programming language. I worked with
|
||||
Python 2 for a short while in the past, but only briefly for some projects
|
||||
and not really learning much in the larger ecosystem.
|
||||
</p>
|
||||
|
||||
<p>This very website is now running on a <a href="https://flask.palletsprojects.com/">Flask</a> server. And I have started working on a self-hosted public <a href="https://git.sr.ht/~ayoayco/threads">/threads</a> project also on Python.</p>
|
||||
<p>
|
||||
This very website is now running on a <a
|
||||
href="https://flask.palletsprojects.com/">Flask</a
|
||||
> server. And I have started working on a self-hosted public <a
|
||||
href="https://git.sr.ht/~ayoayco/threads">/threads</a
|
||||
> project also on Python.
|
||||
</p>
|
||||
|
||||
<p>Will probably write some blogs about the journey, but I have already organized the collection of repositories for my <a href="https://sr.ht/~ayoayco/personal-site">personal site</a></p>
|
||||
<p>
|
||||
Will probably write some blogs about the journey, but I have already
|
||||
organized the collection of repositories for my <a
|
||||
href="https://sr.ht/~ayoayco/personal-site">personal site</a
|
||||
>
|
||||
</p>
|
||||
<Footer />
|
||||
</main>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,28 @@
|
|||
---
|
||||
import Layout from "../../../../layouts/Layout.astro";
|
||||
import Footer from "../../../../components/Footer.astro";
|
||||
import Layout from '../../../../layouts/Layout.astro'
|
||||
import Footer from '../../../../components/Footer.astro'
|
||||
|
||||
const title = "Chapter Lead for Web @ ING";
|
||||
const description = "I have joined ING as a Chapter Lead for Web Engineering";
|
||||
const title = 'Chapter Lead for Web @ ING'
|
||||
const description = 'I have joined ING as a Chapter Lead for Web Engineering'
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<main>
|
||||
|
||||
<h1><span class="text-gradient">{title}</span></h1>
|
||||
<p>
|
||||
<em>Published on the <time datetime="2024-06-17">17th of June, 2024</time></em>
|
||||
<em
|
||||
>Published on the <time datetime="2024-06-17">17th of June, 2024</time
|
||||
></em
|
||||
>
|
||||
</p>
|
||||
|
||||
<p>Starting June of 2024, I have joined <a href="https://ing.com">ING</a> as Chapter Lead for Web; directly involved with the platform upon which all web apps across approximately 40 countries are being built. Our Unified Design System and Software Development Kits (e.g., microfrontends, analytics, etc.) are the ingredients ING developers use to craft experiences for more than 53 million users.</p>
|
||||
<p>
|
||||
Starting June of 2024, I have joined <a href="https://ing.com">ING</a> as Chapter
|
||||
Lead for Web; directly involved with the platform upon which all web apps across
|
||||
approximately 40 countries are being built. Our Unified Design System and Software
|
||||
Development Kits (e.g., microfrontends, analytics, etc.) are the ingredients
|
||||
ING developers use to craft experiences for more than 53 million users.
|
||||
</p>
|
||||
|
||||
<Footer />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,62 @@
|
|||
---
|
||||
import Layout from "../../../../layouts/Layout.astro";
|
||||
import Footer from "../../../../components/Footer.astro";
|
||||
import Layout from '../../../../layouts/Layout.astro'
|
||||
import Footer from '../../../../components/Footer.astro'
|
||||
|
||||
const title = "Taking time to reassess goals and visions";
|
||||
const description = "This is a dump of what my current state, more or less";
|
||||
const title = 'Taking time to reassess goals and visions'
|
||||
const description = 'This is a dump of what my current state, more or less'
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<main>
|
||||
<h1><span class="text-gradient">{title}</span></h1>
|
||||
<p>
|
||||
<em>Published on the <time datetime="2024-09-05">5th of September, 2024</time> from my home in Amsterdam, where it is starting to get colder again :)</em>
|
||||
</p>
|
||||
<p><em>This is a dump of what my current state, more or less, and I plan to update my Now pages in a similar manner and more frequently...</em></p>
|
||||
<p>
|
||||
I took the first week of September off. ”Shallow” Vacation: making time for things I have neglected in a while. Reconsidering my goals & productivity systems.
|
||||
<em
|
||||
>Published on the <time datetime="2024-09-05"
|
||||
>5th of September, 2024</time
|
||||
> from my home in Amsterdam, where it is starting to get colder again :)</em
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
Reconsidered my phone usage as well: The apple watch is good enough for quick notes — which is the main driver for keeping my phone around. I'm using <em>Things 3</em>. The watch is good for this (especially at night) because doesn’t have the distractions of my phone. My “phone” is rarely even used as phone (why don’t we just call them palmtops?)
|
||||
<em
|
||||
>This is a dump of what my current state, more or less, and I plan to
|
||||
update my Now pages in a similar manner and more frequently...</em
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
Happy about my mokka pot coffee-making journey. Been making consistent espresso flavor that I really like for a while. Now considering to start learning other variants like cappuccino
|
||||
I took the first week of September off. ”Shallow” Vacation: making time
|
||||
for things I have neglected in a while. Reconsidering my goals &
|
||||
productivity systems.
|
||||
</p>
|
||||
<p>
|
||||
Bought a <a href="https://www.dyson.com/air-treatment/air-purifier-heaters/purifier-hot-cool-formaldehyde-hp09/white-gold">Dyson air purifier</a>
|
||||
Reconsidered my phone usage as well: The apple watch is good enough for
|
||||
quick notes — which is the main driver for keeping my phone around. I'm
|
||||
using <em>Things 3</em>. The watch is good for this (especially at night)
|
||||
because doesn’t have the distractions of my phone. My “phone” is rarely
|
||||
even used as phone (why don’t we just call them palmtops?)
|
||||
</p>
|
||||
<p>
|
||||
Been updating Cozy, and it has a new ”permanent” address: <a href="https://cozy.pub">cozy.pub</a> -- See further <a href="https://social.ayco.io/@ayo/113079696909950984">thought on this project</a>. Just give me a hundred years to finish this :)
|
||||
Happy about my mokka pot coffee-making journey. Been making consistent
|
||||
espresso flavor that I really like for a while. Now considering to start
|
||||
learning other variants like cappuccino
|
||||
</p>
|
||||
<p>
|
||||
The reality of having a new role for work is hitting, and I wanna learn more how to succeed in engineering leadership. I’m taking my time this off-work week to reassess my leadership style, our strategies at work and how my vision for the web fits
|
||||
Bought a <a
|
||||
href="https://www.dyson.com/air-treatment/air-purifier-heaters/purifier-hot-cool-formaldehyde-hp09/white-gold"
|
||||
>Dyson air purifier</a
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
Been updating Cozy, and it has a new ”permanent” address: <a
|
||||
href="https://cozy.pub">cozy.pub</a
|
||||
> -- See further <a href="https://social.ayco.io/@ayo/113079696909950984"
|
||||
>thought on this project</a
|
||||
>. Just give me a hundred years to finish this :)
|
||||
</p>
|
||||
<p>
|
||||
The reality of having a new role for work is hitting, and I wanna learn
|
||||
more how to succeed in engineering leadership. I’m taking my time this
|
||||
off-work week to reassess my leadership style, our strategies at work and
|
||||
how my vision for the web fits
|
||||
</p>
|
||||
|
||||
<Footer />
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
import Layout from "../../../../layouts/Layout.astro";
|
||||
import Footer from "../../../../components/Footer.astro";
|
||||
import Layout from '../../../../layouts/Layout.astro'
|
||||
import Footer from '../../../../components/Footer.astro'
|
||||
|
||||
const title = "Finally have a gaming PC (Lapop)";
|
||||
const title = 'Finally have a gaming PC (Lapop)'
|
||||
const description =
|
||||
"In an unexpected turn of events, it has been decided that we will get a gaming Laptop";
|
||||
'In an unexpected turn of events, it has been decided that we will get a gaming Laptop'
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
|
|
@ -37,7 +37,8 @@ const description =
|
|||
<em
|
||||
>* Sep. 28 UPDATE: it was a default game setting I did not notice: the
|
||||
render resolution was actually low (DLSS) -- I turned that off to render
|
||||
at native resolution and now I'm happy with the graphics! :)</em>
|
||||
at native resolution and now I'm happy with the graphics! :)</em
|
||||
>
|
||||
</p>
|
||||
<p>
|
||||
In other news, I'm quite stressed, to be honest, still figuring out where
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import Card from "../components/Card.astro";
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import Footer from '../components/Footer.astro'
|
||||
import Card from '../components/Card.astro'
|
||||
---
|
||||
|
||||
<Layout
|
||||
|
|
@ -10,7 +10,11 @@ import Card from "../components/Card.astro";
|
|||
>
|
||||
<main>
|
||||
<h1><span class="text-gradient">Side Projects</span></h1>
|
||||
<p>See more of my previous projects at <a href="https://ayos.blog/projects">my blog</a>.</p>
|
||||
<p>
|
||||
See more of my previous projects at <a href="https://ayos.blog/projects"
|
||||
>my blog</a
|
||||
>.
|
||||
</p>
|
||||
<ul>
|
||||
<Card
|
||||
newTab
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Footer from "../../components/Footer.astro";
|
||||
import GithubStats from "astro-github-stats";
|
||||
import Layout from '../../layouts/Layout.astro'
|
||||
import Footer from '../../components/Footer.astro'
|
||||
import GithubStats from 'astro-github-stats'
|
||||
---
|
||||
|
||||
<Layout
|
||||
|
|
|
|||
|
|
@ -1,67 +1,67 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import Footer from "../../components/Footer.astro";
|
||||
import Layout from '../../layouts/Layout.astro'
|
||||
import Footer from '../../components/Footer.astro'
|
||||
|
||||
import Form, { type ControlConfig, FormGroup } from "@astro-reactive/form";
|
||||
import { Validators } from "@astro-reactive/validator";
|
||||
import Form, { type ControlConfig, FormGroup } from '@astro-reactive/form'
|
||||
import { Validators } from '@astro-reactive/validator'
|
||||
|
||||
const simpleForm = new FormGroup([
|
||||
{
|
||||
name: "simple-text",
|
||||
label: "Simple Text Control",
|
||||
name: 'simple-text',
|
||||
label: 'Simple Text Control',
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
label: "Email",
|
||||
value: "invalid-email",
|
||||
name: 'email',
|
||||
label: 'Email',
|
||||
value: 'invalid-email',
|
||||
validators: [Validators.email],
|
||||
},
|
||||
]);
|
||||
])
|
||||
|
||||
const name: ControlConfig[] = [
|
||||
{
|
||||
name: "first-name",
|
||||
value: "Ayo",
|
||||
label: "First Name",
|
||||
name: 'first-name',
|
||||
value: 'Ayo',
|
||||
label: 'First Name',
|
||||
validators: [Validators.required],
|
||||
},
|
||||
{
|
||||
name: "last-name",
|
||||
label: "Last Name",
|
||||
name: 'last-name',
|
||||
label: 'Last Name',
|
||||
validators: [Validators.required],
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
const characteristics: ControlConfig[] = [
|
||||
{
|
||||
name: "is-good-looking",
|
||||
type: "radio",
|
||||
label: "Is Good Looking?",
|
||||
value: "checked",
|
||||
name: 'is-good-looking',
|
||||
type: 'radio',
|
||||
label: 'Is Good Looking?',
|
||||
value: 'checked',
|
||||
options: [
|
||||
{ value: "checked", label: "checked" },
|
||||
{ value: "not checked", label: "not checked" },
|
||||
{ value: 'checked', label: 'checked' },
|
||||
{ value: 'not checked', label: 'not checked' },
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "required",
|
||||
label: "Required Field",
|
||||
placeholder: "but empty 😔",
|
||||
name: 'required',
|
||||
label: 'Required Field',
|
||||
placeholder: 'but empty 😔',
|
||||
validators: [Validators.required],
|
||||
},
|
||||
{
|
||||
name: "is-awesome",
|
||||
type: "checkbox",
|
||||
label: "Is Awesome?",
|
||||
value: "checked",
|
||||
name: 'is-awesome',
|
||||
type: 'checkbox',
|
||||
label: 'Is Awesome?',
|
||||
value: 'checked',
|
||||
},
|
||||
];
|
||||
]
|
||||
|
||||
const nameForm: FormGroup = new FormGroup(name, "Name");
|
||||
const nameForm: FormGroup = new FormGroup(name, 'Name')
|
||||
const characteristicsForm: FormGroup = new FormGroup(
|
||||
characteristics,
|
||||
"Characteristics"
|
||||
);
|
||||
'Characteristics'
|
||||
)
|
||||
---
|
||||
|
||||
<Layout
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import Footer from "../components/Footer.astro";
|
||||
import Layout from '../layouts/Layout.astro'
|
||||
import Footer from '../components/Footer.astro'
|
||||
|
||||
const page = {
|
||||
title: 'Ayo\'s Threads',
|
||||
description: 'Incubator for thoughts before the become a blog'
|
||||
title: "Ayo's Threads",
|
||||
description: 'Incubator for thoughts before the become a blog',
|
||||
}
|
||||
---
|
||||
|
||||
|
|
|
|||
72
src/sw.mjs
72
src/sw.mjs
|
|
@ -4,56 +4,59 @@
|
|||
* @see https://ayco.io/n/@ayco/astro-sw
|
||||
*/
|
||||
const cacheName = `${__prefix ?? 'app'}-v${__version ?? '000'}`
|
||||
const forceLogging = true;
|
||||
const forceLogging = true
|
||||
|
||||
const addResourcesToCache = async (resources) => {
|
||||
const cache = await caches.open(cacheName);
|
||||
console.info('adding resources to cache...', { force: !!forceLogging, context: 'ayco-sw', data: resources })
|
||||
const cache = await caches.open(cacheName)
|
||||
console.info('adding resources to cache...', {
|
||||
force: !!forceLogging,
|
||||
context: 'ayco-sw',
|
||||
data: resources,
|
||||
})
|
||||
try {
|
||||
await cache.addAll(resources);
|
||||
} catch(error) {
|
||||
console.error('failed to add resources to cache; make sure requests exists and that there are no duplicates', error);
|
||||
await cache.addAll(resources)
|
||||
} catch (error) {
|
||||
console.error(
|
||||
'failed to add resources to cache; make sure requests exists and that there are no duplicates',
|
||||
error
|
||||
)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const putInCache = async (request, response) => {
|
||||
const cache = await caches.open(cacheName);
|
||||
const cache = await caches.open(cacheName)
|
||||
|
||||
if (response.ok) {
|
||||
console.info('adding one response to cache...', request.url)
|
||||
cache.put(request, response);
|
||||
cache.put(request, response)
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
const networkFirst = async ({ request, fallbackUrl }) => {
|
||||
|
||||
const cache = await caches.open(cacheName);
|
||||
const cache = await caches.open(cacheName)
|
||||
|
||||
try {
|
||||
// Try to get the resource from the network for 5 seconds
|
||||
const responseFromNetwork = await fetch(request.clone());
|
||||
const responseFromNetwork = await fetch(request.clone())
|
||||
// response may be used only once
|
||||
// we need to save clone to put one copy in cache
|
||||
// and serve second one
|
||||
putInCache(request, responseFromNetwork.clone());
|
||||
console.info('using network response', responseFromNetwork.url);
|
||||
return responseFromNetwork;
|
||||
|
||||
putInCache(request, responseFromNetwork.clone())
|
||||
console.info('using network response', responseFromNetwork.url)
|
||||
return responseFromNetwork
|
||||
} catch (error) {
|
||||
|
||||
// Try get the resource from the cache
|
||||
const responseFromCache = await cache.match(request);
|
||||
const responseFromCache = await cache.match(request)
|
||||
if (responseFromCache) {
|
||||
console.info('using cached response...', responseFromCache.url);
|
||||
return responseFromCache;
|
||||
console.info('using cached response...', responseFromCache.url)
|
||||
return responseFromCache
|
||||
}
|
||||
|
||||
// Try the fallback
|
||||
const fallbackResponse = await cache.match(fallbackUrl);
|
||||
const fallbackResponse = await cache.match(fallbackUrl)
|
||||
if (fallbackResponse) {
|
||||
console.info('using fallback cached response...', fallbackResponse.url)
|
||||
return fallbackResponse;
|
||||
return fallbackResponse
|
||||
}
|
||||
|
||||
// when even the fallback response is not available,
|
||||
|
|
@ -62,31 +65,28 @@ const networkFirst = async ({ request, fallbackUrl }) => {
|
|||
return new Response('Network error happened', {
|
||||
status: 408,
|
||||
headers: { 'Content-Type': 'text/plain' },
|
||||
});
|
||||
})
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
self.addEventListener('activate', (event) => {
|
||||
console.info('activating service worker...')
|
||||
});
|
||||
})
|
||||
|
||||
self.addEventListener('install', (event) => {
|
||||
|
||||
console.info('installing service worker...')
|
||||
self.skipWaiting(); // go straight to activate
|
||||
self.skipWaiting() // go straight to activate
|
||||
|
||||
event.waitUntil(
|
||||
addResourcesToCache(__assets ?? [])
|
||||
);
|
||||
});
|
||||
event.waitUntil(addResourcesToCache(__assets ?? []))
|
||||
})
|
||||
|
||||
self.addEventListener('fetch', (event) => {
|
||||
console.info('fetch happened', {data: event});
|
||||
console.info('fetch happened', { data: event })
|
||||
|
||||
event.respondWith(
|
||||
networkFirst({
|
||||
request: event.request,
|
||||
fallbackUrl: './',
|
||||
})
|
||||
);
|
||||
});
|
||||
)
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue