✨ add schema.org microdata, webring, rss, sitemap, styling

scottnath · web-flow · commit 3e4f6eb46533 · 2024-04-11T11:32:50.000-04:00
* 📝 add schema.org microdata across the site

* ✨ rss, footer, webring, ferris

* 📝 add article-dates styling
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,6 @@
     "workspaces/*"
   ],
   "devDependencies": {
-    "astro": "4.4.2"
+    "astro": "4.5.18"
   }
 }
diff --git a/workspaces/components/.storybook/main.js b/workspaces/components/.storybook/main.js
@@ -1,7 +1,7 @@
 import path from 'path';
 /** @type { import('@storybook/web-components-vite').StorybookConfig } */
 const config = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: ['@storybook/addon-essentials', '@storybook/addon-links', '@storybook/addon-interactions', '@storybook/addon-coverage'],
   framework: {
     name: "@storybook/web-components-vite",
diff --git a/workspaces/components/package.json b/workspaces/components/package.json
@@ -14,7 +14,7 @@
   "author": "scottnath",
   "license": "MIT",
   "devDependencies": {
-    "storydocker-storybook": "^0.0.22",
-    "storydocker-utilities": "^0.0.16"
+    "storydocker-storybook": "^0.0.25",
+    "storydocker-utilities": "^0.0.19"
   }
 }
diff --git a/workspaces/website/package.json b/workspaces/website/package.json
@@ -14,31 +14,31 @@
     "site-files": "npm run 404file && npm run jekyllfile && npm run cname"
   },
   "dependencies": {
-    "@astrojs/mdx": "^2.1.1",
-    "@astrojs/react": "^3.0.10",
+    "@astrojs/mdx": "^2.2.4",
+    "@astrojs/react": "^3.2.0",
     "@astrojs/rss": "^4.0.5",
-    "@astrojs/sitemap": "^3.1.1",
-    "@types/react": "^18.2.61",
-    "@types/react-dom": "^18.2.19",
+    "@astrojs/sitemap": "^3.1.2",
+    "@types/react": "^18.2.75",
+    "@types/react-dom": "^18.2.24",
     "airtable": "^0.12.2",
-    "astro": "4.4.2",
-    "marked": "^12.0.0",
-    "profile-components": "^0.3.1",
+    "astro": "4.5.18",
+    "marked": "^12.0.1",
+    "profile-components": "^0.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.5"
   },
   "devDependencies": {
     "@astrojs/lit": "^4.0.1",
     "@astrojs/partytown": "^2.0.4",
     "@storybook/testing-library": "^0.2.2",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^15.0.0",
     "@webcomponents/template-shadowroot": "^0.2.1",
     "astro-icon": "^1.1.0",
     "lit": "^3.1.2",
     "postcss-nested": "^6.0.1",
     "prop-types": "^15.8.1",
-    "sass": "^1.71.1",
-    "vite": "^5.1.4"
+    "sass": "^1.74.1",
+    "vite": "^5.2.8"
   }
 }
diff --git a/workspaces/website/public/ferris-end-scene.avif b/workspaces/website/public/ferris-end-scene.avif
diff --git a/workspaces/website/src/components/BaseHead.astro b/workspaces/website/src/components/BaseHead.astro
@@ -3,7 +3,7 @@
 // all pages through the use of the <BaseHead /> component.
 import '../styles/global.css';
 import '../components/resume/styles/resume.css';
-import { PROFILE_PIC } from '../consts';
+import { PROFILE_PIC, SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 
 export interface Props {
 	title: string;
@@ -26,6 +26,12 @@ const { title, description, image = PROFILE_PIC } = Astro.props;
 <link rel="icon" href="/favicon-mind-blown.ico" id="favicon" />
 <meta name="generator" content={Astro.generator} />
 <link rel="preload" as="image" href={image} />
+<link
+    rel="alternate"
+    type="application/rss+xml"
+    title={`${SITE_TITLE}, ${SITE_DESCRIPTION}`}
+    href={`${Astro.site}rss.xml`}
+/>
 
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />
diff --git a/workspaces/website/src/components/BlahgList.astro b/workspaces/website/src/components/BlahgList.astro
@@ -1,8 +1,7 @@
 ---
 import { getCollection } from 'astro:content';
 
-import { BLAHG, STRIPE_COLORS } from '~/consts';
-import FormattedDate from '~/components/FormattedDate.astro';
+import { STRIPE_COLORS } from '~/consts';
 
 const posts = (await getCollection('blahg')).sort(
 	(a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
diff --git a/workspaces/website/src/components/DevToUser.astro b/workspaces/website/src/components/DevToUser.astro
@@ -6,6 +6,7 @@ import { PROFILE_PIC } from '../consts';
 const declaredDOM = dsd({
   username: 'scottnath',
   profile_image: PROFILE_PIC,
+  schema_itemprop: 'owns'
 },'no-posts');
 const { class: className, ...rest } = Astro.props;
 ---
diff --git a/workspaces/website/src/components/Footer.astro b/workspaces/website/src/components/Footer.astro
@@ -1,15 +1,55 @@
 ---
-import { SITE_TITLE } from '../consts';
+import WebRing from './WebRing.astro';
+import { SITE_TITLE, STRIPE_COLORS } from '~/consts';
 const today = new Date();
+const navBorder = STRIPE_COLORS[0];
 ---
 
 <footer>
-	<hr />
-	&copy; {today.getFullYear()}&nbsp;{SITE_TITLE} All rights reserved.
+  <nav>
+    <a href="/">home</a>
+    <a href="/whoami">whoami</a>
+    <a href="/blahg">blahg</a>
+    <a href="/resume">resume</a>
+    <a href="/rss.xml" target="_blank">rss feed</a>
+  </nav>
+	<p>&copy; 2001-{today.getFullYear()}&nbsp;{SITE_TITLE} All rights reserved.</p>
+
+  <WebRing />
+
+  <a href="/" class="you-still-here" title="You're still here? Go Home"><img src="/ferris-end-scene.avif" width="381" height="177" alt="You're still here? (Screen shot from Ferris Bueller's Day Off)" /></a>
 </footer>
-<style>
+
+<style define:vars={{ navBorder }}>
 	footer {
-		padding: 25px 0;
+		padding: 2em 0 4em;
 		text-align: center;
+    nav {
+      border-top: 1px solid var(--navBorder);
+      border-bottom: 1px solid var(--navBorder);
+      display: inline-block;
+      width: 100%;
+      padding: 2em 0;
+      max-width: var(--max-character-width);
+
+      a {
+        display: inline-block;
+        text-decoration: none;
+        &::before {
+          content: ' • ';
+        }
+        &:first-child::before {
+          content: ''
+        }
+      }
+    }
+    .you-still-here {
+      display: block;
+      margin: 100vh auto 0;
+      img {
+        margin: 0 auto;
+        border-radius: 1em;
+      }
+    }
 	}
 </style>
diff --git a/workspaces/website/src/components/GitHubUser.astro b/workspaces/website/src/components/GitHubUser.astro
@@ -6,6 +6,7 @@ const repos = JSON.stringify(['scottnath/profile-components', 'storydocker/story
 const declaredDOM = await dsd({
   login: 'scottnath',
   avatar_url: PROFILE_PIC,
+  schema_itemprop: 'owns'
   // repos
 },true)
 const { class: className, ...rest } = Astro.props;
diff --git a/workspaces/website/src/components/HeaderLink.astro b/workspaces/website/src/components/HeaderLink.astro
@@ -6,7 +6,10 @@ type Props = HTMLAttributes<'a'>;
 const { href, class: className, ...props } = Astro.props;
 
 const { pathname } = Astro.url;
-const isActive = href === pathname || href === pathname.replace(/\/$/, '');
+let isActive = href === pathname;
+if (href && href !== '/') {
+  isActive = pathname?.toString().startsWith(href.toString());
+}
 ---
 
 <a href={href} class:list={[className, { active: isActive }]} {...props}>
@@ -17,7 +20,4 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '');
 		display: inline-block;
 		text-decoration: none;
 	}
-	a.active {
-		font-weight: bolder;
-	}
 </style>
diff --git a/workspaces/website/src/components/WebRing.astro b/workspaces/website/src/components/WebRing.astro
@@ -0,0 +1,37 @@
+---
+import { SITE_TITLE, STRIPE_COLORS } from '~/consts';
+const today = new Date();
+const navBorder = STRIPE_COLORS[0];
+---
+
+<div>
+  <h3>CS.Sjoy.lol <a href="https://cs.sjoy.lol">webring</a></h3>
+  <div>
+    <a href="https://webri.ng/webring/cssjoy/previous?via=https://scottnath.com" aria-label="previous site">← Prev</a>
+    <a href="https://webri.ng/webring/cssjoy/random?via=https://scottnath.com" aria-label="random site">🎲</a>
+    <a href="https://webri.ng/webring/cssjoy/next?via=https://scottnath.com" aria-label="next site">Next →</a>
+  </div>
+</div>
+
+<style define:vars={{ navBorder }}>
+  div:has(h3) {
+    display: inline-block;
+    border: 1px solid var(--navBorder);
+    padding: .5em 3em;
+    border-radius: 2em;
+
+    h3 {
+      margin: 0;
+      padding-bottom: 1em;
+    }
+
+    div {
+      display: flex;
+      a {
+        flex: 1;
+        text-decoration: none;
+        white-space: nowrap;
+      }
+    }
+  }
+</style>
diff --git a/workspaces/website/src/consts.ts b/workspaces/website/src/consts.ts
@@ -10,8 +10,9 @@ import mastodonLogo from '~/assets/logos/Mastodon.svg';
 export const SITE_TITLE = 'Scott Nath';
 export const SITE_SUBTITLE = 'Frontend Architect';
 export const ALT_TITLES = ['Solutions Architect', 'Software Architect', 'Full Stack Developer', 'DevOps Architect', 'Design Engineer', 'Senior Software Engineer', 'Design System Architect', 'Developer Advocate'];
-export const SITE_DESCRIPTION = `${SITE_SUBTITLE} with extensive experience creating UI development systems with a focus on where developers and designers collaborate. Alt job titles: ${ALT_TITLES.join(', ')}`;
 export const SCOTT_SHORT_DESC = 'Scott Nath is a web developer and actor living in New York State';
+export const SITE_DESCRIPTION = `${SCOTT_SHORT_DESC} with extensive experience creating UI development systems with a focus on where developers and designers collaborate. Alt job titles: ${ALT_TITLES.join(', ')}`;
+
 
 // image must be in root of public folder
 export const PROFILE_PIC = '/scott-nath-profile-photo.avif';
diff --git a/workspaces/website/src/content/config.ts b/workspaces/website/src/content/config.ts
@@ -36,6 +36,7 @@ const blahg = defineCollection({
 		heroImage: z.string().optional(),
     heroImageDesc: z.string().optional(),
     series: reference(series).optional(),
+    schemaType: z.string().default('TechArticle'),
 	}),
 });
 
diff --git a/workspaces/website/src/layouts/BlogPost.astro b/workspaces/website/src/layouts/BlogPost.astro
@@ -4,7 +4,7 @@ import { getCollection } from 'astro:content';
 import SiteWide from './SiteWide.astro';
 import FormattedDate from '../components/FormattedDate.astro';
 
-const { title, description, pubDate, updatedDate, heroImage, series } = Astro.props;
+const { title, description, pubDate, updatedDate, heroImage, series, schemaType } = Astro.props;
 
 /**
  * @todo add series after design launch
@@ -18,22 +18,32 @@ async function getSeries() {
 }
 type Props = CollectionEntry<'blahg'>['data'];
 
+const itemtype = `https://schema.org/${schemaType}`;
+
 ---
 
 <SiteWide title={title} description={description} image={heroImage}>
-	<article class="blog-post">
-		{heroImage && <img width="100%" height="auto" src={heroImage} alt="" />}
-		<h1 class="title">{title}</h1>
-    <p>{description}</p>
-		<FormattedDate date={pubDate} />
-		{
-			updatedDate && (
-				<div class="last-updated-on">
-					Last updated on <FormattedDate date={updatedDate} />
-				</div>
-			)
-		}
+	<article class="blog-post" itemscope itemtype={itemtype}>
+    <header>
+      {heroImage && <img width="100%" height="auto" src={heroImage} alt="" />}
+      <h1 class="title" itemprop="name">{title}</h1>
+      <p itemprop="description">{description}</p>
+      <dl class="article-dates">
+        <div>
+          <dt>Published</dt>
+          <dd><FormattedDate date={pubDate} itemprop='datePublished' /></dd>
+        </div>
+        {
+          updatedDate && (
+          <div>
+            <dt>Updated</dt>
+            <dd><FormattedDate date={updatedDate} itemprop='dateModified' /></dd>
+          </div>
+          )
+        }
+      </dl>
+    </header>
 		<hr />
-    <div class="readable"><slot /></div>
+    <div class="readable" itemprop="articleBody"><slot /></div>
 	</article>
 </SiteWide>
diff --git a/workspaces/website/src/layouts/SiteWide.astro b/workspaces/website/src/layouts/SiteWide.astro
@@ -3,7 +3,7 @@ import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 
-const { title, description, image } = Astro.props;
+const { title, description, image, ...rest } = Astro.props;
 ---
 
 <!DOCTYPE html>
@@ -15,7 +15,7 @@ const { title, description, image } = Astro.props;
 	<body>
     <a href="#main" id="skip-to-main">Skip to main content</a>
 		<Header />
-		<main transition:animate="slide" id="main">
+		<main id="main" {...rest}>
       <slot />
 		</main>
 		<Footer />
diff --git a/workspaces/website/src/pages/index.astro b/workspaces/website/src/pages/index.astro
@@ -6,19 +6,19 @@ import GitHubUser from '~components/GitHubUser.astro';
 import DevToUser from '~components/DevToUser.astro';
 import BlahgList from "~components/BlahgList.astro";
 
-import { SITE_TITLE, SITE_DESCRIPTION, SCOTT_SHORT_DESC } from '../consts';
+import { SITE_TITLE, SITE_SUBTITLE, SITE_DESCRIPTION, SCOTT_SHORT_DESC } from '../consts';
 ---
 
-<SiteWide title={SITE_TITLE} description={SITE_DESCRIPTION}>
-  <article>
+<SiteWide title={`${SITE_TITLE}, ${SITE_SUBTITLE}`} description={SITE_DESCRIPTION}>
+  <article itemscope itemtype="https://schema.org/Person">
     <header class="readable">
       <h1>Scott Nath lives here <span><a href="/whoami">who am i?</a></span></h1>
-      <p>{SCOTT_SHORT_DESC}</p>
+      <p itemprop="description">{SCOTT_SHORT_DESC}</p>
     </header>
     <section>
-      <BlahgList class="blahg" />
-      <GitHubUser class="gh" />
-      <DevToUser class="dev" />
+      <BlahgList class="blahg" itemprop="owns" />
+      <GitHubUser class="gh" schema_itemprop="owns" />
+      <DevToUser class="dev" schema_itemprop="owns" />
     </section>
 	</article>
 </SiteWide>
diff --git a/workspaces/website/src/pages/resume.astro b/workspaces/website/src/pages/resume.astro
@@ -9,9 +9,11 @@ const content = await getResume();
 const pageTitle = `Resume for Scott Nath - ${content.basics.short_summary}`;
 ---
 <SiteWide title={pageTitle} description={content.basics.summary}>
-  <ul class="actions">
-    <li><button onclick="window.print();">🖨️ print</button></li>
-  </ul>
+  <div class="readable">
+    <ul class="actions">
+      <li><button onclick="window.print();">🖨️ print</button></li>
+    </ul>
+  </div>
 	<Resume
 		title={content.basics.title}
 		subtitle={content.basics.subtitle}
@@ -25,3 +27,8 @@ const pageTitle = `Resume for Scott Nath - ${content.basics.short_summary}`;
 	/>
 
 </SiteWide>
+<style>
+  .readable:has(.actions) {
+    margin-bottom: 0;
+  }
+</style>
diff --git a/workspaces/website/src/pages/rss.xml.js b/workspaces/website/src/pages/rss.xml.js
@@ -2,7 +2,7 @@ import rss from '@astrojs/rss';
 import { getCollection } from 'astro:content';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 
-export async function get(context) {
+export async function GET(context) {
 	const posts = await getCollection('blahg');
 	return rss({
 		title: SITE_TITLE,
diff --git a/workspaces/website/src/pages/whoami.mdx b/workspaces/website/src/pages/whoami.mdx
diff --git a/workspaces/website/src/styles/global.css b/workspaces/website/src/styles/global.css

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,6 @@`
`25`	`25`	`"workspaces/*"`
`26`	`26`	`],`
`27`	`27`	`"devDependencies": {`
`28`		`- "astro": "4.4.2"`
	`28`	`+ "astro": "4.5.18"`
`29`	`29`	`}`
`30`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@`
`14`	`14`	`"author": "scottnath",`
`15`	`15`	`"license": "MIT",`
`16`	`16`	`"devDependencies": {`
`17`		`- "storydocker-storybook": "^0.0.22",`
`18`		`- "storydocker-utilities": "^0.0.16"`
	`17`	`+ "storydocker-storybook": "^0.0.25",`
	`18`	`+ "storydocker-utilities": "^0.0.19"`
`19`	`19`	`}`
`20`	`20`	`}`