Update page meta throughout application

posts/2024-09-24-its-not-ai.md

@@ -0,0 +1,21 @@
+---
+layout: post
+author: wyatt
+title: We don't call it "AI"
+image: "/img/posts/crows.png"
+excerpt:
+date: 2024-09-24
+---
+
+I quipped today with a colleague that LLM meant "large lying machine" and I was only half joking. We were discussing the merits of the hype surrounding features (and whole startups) that effectively wrap the OpenAI API, and how much long-term success can be expected when your value add is saving time typing the prompt into ChatGPT. Here at Apsis, we tend to believe that generative models like ChatGPT or llama are best suited to augment foundationally sound products: that is, to add summaries or shortcuts to an application that already offers value _without_ the GPT integration.
+
+This conversation, and others like it, though, have had me thinking about another little quirk around the proverbial offices here at Apsis --- something you may have noticed in the previous paragraph: we don't call it AI.
+
+It's a quirk, I think, not born out of elitism or pedantry or disdain. It's not fear for the future of our jobs (though there are doomsayers a plenty if you care to listen). Rather, if you've worked with us, you'll know how highly we prize clear communication. Clarity in transmission of meaning is, in many ways, the most fundamental aspect of a programmer's job: we provide instruction to the machine which cannot help but take all instructions literally. Our role as contractors is not much different: we are often brought in because our clients value our expertise and lack it themselves. They trust us --- hell, they pay us --- to be the liaison between the technical and the non-technical, and to call this current generation of predictive models "AI" betrays that trust.
+
+See, "AI" conjures HAL 9000 and Skynet, Deep Thought and the Prime Radiant. What it does not do is convey to our clients what is actually happening: a recursive loop of predicting the next word in a sentence based on dubiously procured sources.[^1] A great flattener of the creative into the most or second most likely thought. There are situations in which that is useful, productive, efficient: but there are many more applications in which it is harmful and misleading. Math (hard math, no doubt) gussied up as the future promised us by a century of science fiction.
+
+So we don't call it AI. To do so cedes our credibility to the marketers --- and we can't have that.
+
+
+[^1]: This is, I know, a massive oversimplification. I'll defer an actual explanation of the inner workings of generative pre-trained models to the always phenomenal [Three Blue One Brown](https://www.3blue1brown.com/topics/neural-networks)

posts/2024-09-27-back-again.md

@@ -0,0 +1,30 @@
+---
+layout: post
+author: wyatt
+title: ... and we're back
+image: "/img/posts/crows.png"
+excerpt:
+date: 2024-09-24
+---
+
+Oh hey. It's been a while. Maybe too long, I guess. 6 years? Really?
+
+Wow.
+
+Hard to believe we're 10 years old[^1]. That's double digits. I remember turning double digits (in real life); it was made out to be a big deal.
+
+If you care, let me catch you up on what's happened. We didn't go quiet for no reason --- in fact, the narrative of why we stopped posting to this blog is pretty straightforward: we made a classic small-business blunder, and we over indexed on a single client. We put ~~all~~ 83% of our eggs in one basket, and then all of a sudden, that basket got yanked. What ensued was probably predictable: we tried (and failed) to find new clients, we tried (and failed) to generate revenue with side projects. We went through layoffs. We got small. We got quiet. We survived.
+
+And mostly, we turned it around. We did find new clients. We worked on cool new projects. We hired back some of those people we'd had to lay off. We hired new people too. Along with the rest of the world, we weathered a pandemic, and mostly, we've kept going.
+
+So why am I writing here again?
+
+Well, while we were working, we passed that milestone I mentioned earlier, and it's made us think a lot. About our work, our lives, our commitment to the project of sustainable creative work. We've been talking a lot about what we want out of the next 10 years --- what does Apsis look like in 2034? Does it look like anything?
+
+We hope the answer is yes: but we sincerely don't know. We don't know, because a lot like writing code, running a team --- running a business --- is a creative endeavor. Creative, as in creating something that wasn't here yesterday. We think tomorrow we'll wake up and the spark will be there, but it's impossible to know. All we know is it was here today.
+
+
+
+---
+
+[^1]: 10 years old as of 7 months ago.

src/components/PageMeta.tsx

@@ -0,0 +1,49 @@
+import { siteConf } from "conf";
+import { PageTitle } from "./PageTitle";
+
+export const PageMeta: React.FC<{ title?: string; description?: string }> = ({
+  title,
+  description,
+}) => (
+  <>
+    <PageTitle title={title} />
+
+    <meta
+      name="description"
+      key="description"
+      content={description ?? siteConf.meta.description}
+    />
+
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/site.webmanifest" />
+
+    <meta name="description" content={description ?? siteConf.meta.description} />
+    <meta property="og:url" content="https://apsis.io" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content={title ?? siteConf.meta.title} />
+    <meta property="og:description" content={description ?? siteConf.meta.description} />
+    <meta property="og:image" content="https://apsis.io/social.jpg" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta property="twitter:domain" content="apsis.io" />
+    <meta property="twitter:url" content="https://apsis.io" />
+    <meta name="twitter:title" content={title ?? siteConf.meta.title} />
+    <meta name="twitter:description" content={description ?? siteConf.meta.description} />
+    <meta name="twitter:image" content="https://apsis.io/social.jpg" />
+  </>
+);

src/components/PageTitle.tsx

@@ -0,0 +1,5 @@
+import { formattedTitle } from "lib/metadata";
+
+export const PageTitle: React.FC<{ title?: string }> = ({ title }) => (
+  <title key="title">{formattedTitle(title)}</title>
+);

src/conf.ts

@@ -0,0 +1,6 @@
+export const siteConf = {
+  meta: {
+    title: "Security-Minded Development Agency Ready to Build Your Product",
+    description: "Apsis Labs offers expert software and DevOps solutions with 60 years of combined experience in front-end, back-end, web, and mobile app development. We specialize in HIPAA-compliant systems, infrastructure management, and agile development. From design to deployment, we help you build scalable, user-centric solutions."
+  }
+}

src/lib/metadata.ts

@@ -0,0 +1,3 @@
+import { siteConf } from "conf";
+
+export const formattedTitle = (title?: string) => `${title ?? siteConf.meta.title} | Apsis Labs`;

src/pages/_app.tsx

@@ -14,7 +14,6 @@ export const mono = IBM_Plex_Mono({
 
 import "nprogress/nprogress.css";
 import "styles/main.scss";
-import Head from "next/head";
 
 Router.events.on("routeChangeStart", () => NProgress.start());
 Router.events.on("routeChangeComplete", () => NProgress.done());
@@ -30,32 +29,12 @@ export default function MyApp({ Component, pageProps }) {
         }
       `}</style>
 
-      <Head>
-        <link
-          rel="apple-touch-icon"
-          sizes="180x180"
-          href="/apple-touch-icon.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="32x32"
-          href="/favicon-32x32.png"
-        />
-        <link
-          rel="icon"
-          type="image/png"
-          sizes="16x16"
-          href="/favicon-16x16.png"
-        />
-        <link rel="manifest" href="/site.webmanifest" />
-      </Head>
-
       <Script
         defer
         data-domain="apsis.io"
         src="https://plausible.io/js/script.js"
       />
+
       <Component {...pageProps} />
     </>
   );

src/pages/blog.tsx

@@ -1,4 +1,5 @@
 import { PostExcerpt } from "components/blog/PostExcerpt";
+import { PageMeta } from "components/PageMeta";
 import { SiteLayout } from "components/SiteLayout";
 import { getSortedPostsData } from "lib/posts";
 import { Post } from "lib/types";
@@ -9,7 +10,7 @@ export const BlogIndexPage = ({ posts }: { posts: Post[] }) => {
   return (
     <>
       <Head>
-        <title>Blog | Apsis Labs</title>
+        <PageMeta title="Blog" description="Apsis Labs blog. Written by our devs to help you understand our process in developing scalable, secure web and mobile applications." />
       </Head>
 
       <SiteLayout contained>

src/pages/blog/[year]/[month]/[day]/[slug].tsx

@@ -1,7 +1,6 @@
 import { Post } from "components/blog/Post";
 
-import { Navbar } from "components/Navbar";
-import { Section } from "components/Section";
+import { PageMeta } from "components/PageMeta";
 import { SiteLayout } from "components/SiteLayout";
 import { getAllPostIds, getPostData } from "lib/posts";
 import { Post as TPost } from "lib/types";
@@ -11,11 +10,13 @@ export const PostPage = ({ postData }: { postData: TPost }) => {
   return (
     <>
       <Head>
-        {postData.title ? (
-          <title>Blog: {postData.title} | Apsis Labs</title>
-        ) : (
-          <title>Blog | Apsis Labs</title>
-        )}
+        <PageMeta
+          title={postData.title ? `Blog: ${postData.title}` : "Blog"}
+          description={
+            postData.excerpt ??
+            "A blog post from Apsis Labs, an agency dedicated to building secure, scalable web and mobile applications."
+          }
+        />
       </Head>
 
       <SiteLayout contained>

src/pages/conduct.tsx

@@ -1,12 +1,12 @@
-import { Post } from "components/blog/Post";
+import { PageMeta } from "components/PageMeta";
 import { SiteLayout } from "components/SiteLayout";
 import Head from "next/head";
 
 const ConductPage: React.FC = () => {
   return (
     <>
       <Head>
-        <title>Code of Conduct | Apsis Labs</title>
+        <PageMeta title="Code of Conduct" description="Code of Conduct for Apsis Labs and Apsis Labs projects. Apsis Labs is your partner in developing secure, scalable web and mobile applications." />
       </Head>
 
       <SiteLayout contained>

src/pages/index.tsx

@@ -1,32 +1,27 @@
 import { Button } from "components/Button";
 import { Clients } from "components/Clients";
-import { Footer } from "components/Footer";
 import { Hero } from "components/Hero";
-import { Navbar } from "components/Navbar";
+import { PageMeta } from "components/PageMeta";
 import { Row } from "components/Row";
 import { Section } from "components/Section";
+import { SiteLayout } from "components/SiteLayout";
 import {
-  ChevronRight,
-  FileJson,
-  FormInput,
-  Gem,
-  Github,
-  List,
+    ChevronRight,
+    FileJson,
+    FormInput,
+    Gem,
+    Github,
+    List,
 } from "lucide-react";
 import Head from "next/head";
 import { RepoCard } from "../components/RepoCard";
 import { ServicesSection } from "../components/ServicesSection";
-import { SiteLayout } from "components/SiteLayout";
 
 export const IndexPage: React.FC = () => {
   return (
     <>
       <Head>
-        <title>Apsis Labs: Experienced Software Developers for Hire</title>
-        <meta
-          name="description"
-          content="Apsis Labs offers expert software and DevOps solutions with 40 years of combined experience in front-end, back-end, web, and mobile app development. We specialize in HIPAA-compliant systems, infrastructure management, and agile development. From design to deployment, we help you build scalable, user-centric solutions."
-        />
+        <PageMeta />
       </Head>
 
       <SiteLayout showTagline navTheme="blue" navGuides>

src/pages/mdbn.tsx

@@ -1,11 +1,15 @@
+import { PageMeta } from "components/PageMeta";
 import { SiteLayout } from "components/SiteLayout";
 import Head from "next/head";
 
 const PrivacyPage: React.FC = () => {
   return (
     <>
       <Head>
-        <title>Mandatory Data Breach Notification Policy | Apsis Labs</title>
+        <PageMeta
+          title="Mandatory Data Breach Notification Policy"
+          description="Mandatory Data Breach Notification Policy for Apsis Labs and Apsis Labs projects. At Apsis, we take data security seriously, which is why we provide documentation on our data breach policy for all clients."
+        />
       </Head>
 
       <SiteLayout contained>

src/pages/privacy.tsx

@@ -1,11 +1,15 @@
+import { PageMeta } from "components/PageMeta";
 import { SiteLayout } from "components/SiteLayout";
 import Head from "next/head";
 
 const PrivacyPage: React.FC = () => {
   return (
     <>
       <Head>
-        <title>Privacy Policy | Apsis Labs</title>
+        <PageMeta
+          title="Privacy Policy"
+          description="Privacy Policy for Apsis Labs and Apsis Labs projects. Apsis Labs has over 60 years combined experience developing user-centric applications for web and mobile."
+        />
       </Head>
 
       <SiteLayout contained>