fix: final audit of the hub

site/app/components/kit/Palette.tsx

@@ -73,6 +73,7 @@ export function Palette() {
         <input
           autoFocus
           autoComplete="off"
+          aria-label="Search"
           value={query}
           onChange={(event) => {
             setQuery(event.target.value);

site/app/components/kit/live.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useRef, useState, type CSSProperties } from 'react';
 import { Link } from 'react-router';
 import { useFolded } from '../../folds';
-import { clock, day, describe } from '../../format';
+import { clock, day, describe, plural } from '../../format';
 import { useRoot } from '../../hub';
 import {
   useConnection,
@@ -73,7 +73,7 @@ export function Views({ kind, id }: { kind: 'post' | 'project'; id: string }) {
   const shown = useCountUp(count);
   return count > 0 ? (
     <span className="views">
-      {shown} {count === 1 ? 'view' : 'views'}
+      {shown} {plural(count, 'view')}
     </span>
   ) : null;
 }

site/app/components/kit/map.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { plural } from '../../format';
 import { useLiveMessages } from '../../live';
 import type { Country } from '../../types';
 import Status from '../Status';
@@ -40,8 +41,8 @@ export function VisitorMap({ initial }: { initial: Country[] }) {
       <div className="head">
         <Status status="live" />
         <span>
-          <b>{tabs}</b> {tabs === 1 ? 'tab' : 'tabs'} from <b>{countries.length}</b>{' '}
-          {countries.length === 1 ? 'country' : 'countries'}
+          <b>{tabs}</b> {plural(tabs, 'tab')} from <b>{countries.length}</b>{' '}
+          {plural(countries.length, 'country', 'countries')}
         </span>
         <span className="end">last 10 minutes</span>
       </div>

site/app/components/kit/members.tsx

@@ -1,7 +1,8 @@
 import type { CSSProperties } from 'react';
 import { Link } from 'react-router';
+import { plural } from '../../format';
 import { useOnline } from '../../live';
-import { useSpotlight } from '../../motion/motion';
+import { useMotion, useSpotlight } from '../../motion/motion';
 import type { Member } from '../../types';
 import { accentStyle, Avatar } from './basics';
 
@@ -22,7 +23,7 @@ function MemberRow({
         <strong>{member.name}</strong>
         <span className="headline">{member.headline ?? `@${member.github}`}</span>
       </span>
-      <span className="count" aria-label={`${projects} projects`}>
+      <span className="count" aria-label={`${projects} ${plural(projects, 'project')}`}>
         {projects}
       </span>
     </Link>
@@ -61,8 +62,9 @@ export function Orbit({
   label: string;
 }) {
   const online = useOnline();
+  const spinning = useMotion('orbit');
   return (
-    <div className="orbit">
+    <div className="orbit" data-still={spinning ? undefined : ''}>
       <div className="ring">
         {members.map((member, index) => (
           <div

site/app/components/kit/panels.tsx

@@ -43,9 +43,7 @@ export function RunningPanel({ running }: { running: Running[] }) {
             </Link>
             <Status status="live" />
             <span className="meta">
-              {project.deploy
-                ? `sha-${shortTag(project.deploy.tag)} · ${day(project.deploy.at)}`
-                : 'no deploy recorded yet'}
+              {project.deploy && `sha-${shortTag(project.deploy.tag)} · ${day(project.deploy.at)}`}
               <span className="week">
                 {project.week.map((state, index) => (
                   <i

site/app/components/kit/projects.tsx

@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import { Link } from 'react-router';
 import { day } from '../../format';
 import { useHub } from '../../hub';
+import { STATUS_LABEL } from '../../model';
 import { useSpotlight, useTilt } from '../../motion/motion';
 import type { Member, Project } from '../../types';
 import Status from '../Status';
@@ -33,7 +34,9 @@ export function WindowBar({ project }: { project: Project }) {
       <i />
       <i />
       <a href={project.url ?? project.repoUrl}>
-        {project.url ? new URL(project.url).host : `${project.slug} · source only`}
+        {project.url
+          ? new URL(project.url).host
+          : `${project.slug} · ${STATUS_LABEL[project.status]}`}
       </a>
     </div>
   );

site/app/format.ts

@@ -9,6 +9,10 @@ export function day(iso: string) {
   return `${MONTHS[date.getUTCMonth()]} ${date.getUTCDate()}`;
 }
 
+export function plural(count: number, noun: string, many = `${noun}s`) {
+  return count === 1 ? noun : many;
+}
+
 export function shortTag(tag: unknown) {
   return typeof tag === 'string' ? tag.replace(/^sha-/, '').slice(0, 7) : '';
 }

site/app/pages/member-page.tsx

@@ -7,6 +7,7 @@ import { ChangelogPanel, RunningPanel } from '../components/kit/panels';
 import { SubscribePanel } from '../components/kit/subscribe';
 import { Page } from '../components/Shell';
 import type { Hub } from '../context';
+import { plural } from '../format';
 import { useHub, useRoot } from '../hub';
 import { createModel } from '../model';
 import type { Member } from '../types';
@@ -38,6 +39,8 @@ export function MemberHero({ member, actions }: { member: Member; actions?: Reac
   const hub = useHub();
   const live = hub.projectsOwnedBy(member).filter((project) => project.status === 'live').length;
   const posts = hub.postsBy(member).length;
+  const projects = hub.projectsForMember(member).length + hub.epicsForMember(member).length;
+  const releases = hub.releasesOwnedBy(member).length;
   return (
     <PageHeader
       banner={member.coverUrl && <img className="member-cover" src={member.coverUrl} alt="" />}
@@ -48,15 +51,12 @@ export function MemberHero({ member, actions }: { member: Member; actions?: Reac
       actions={actions}
       facts={
         <>
-          <Fact
-            value={hub.projectsForMember(member).length + hub.epicsForMember(member).length}
-            label="projects"
-          />
+          <Fact value={projects} label={plural(projects, 'project')} />
           {live > 0 && <Fact value={live} label="live" />}
-          <Fact value={hub.releasesOwnedBy(member).length} label="releases" />
+          <Fact value={releases} label={plural(releases, 'release')} />
           {posts > 0 && (
             <Link to={`${member.path}/blog`}>
-              <Fact value={posts} label={posts === 1 ? 'post' : 'posts'} />
+              <Fact value={posts} label={plural(posts, 'post')} />
             </Link>
           )}
           {member.joined && <Fact label="on GitHub since" value={member.joined} />}

site/app/pages/project-page.tsx

@@ -14,7 +14,7 @@ import { Page } from '../components/Shell';
 import Status from '../components/Status';
 import TagList from '../components/TagList';
 import type { Hub } from '../context';
-import { day, shortTag } from '../format';
+import { day, plural, shortTag } from '../format';
 import { useHub, useRoot } from '../hub';
 import { useView, useViews } from '../live';
 import { changelogPath } from '../model';
@@ -148,9 +148,9 @@ export function ProjectPage({ data: loaderData }: { data: ReturnType<typeof load
           facts={
             <>
               {releases[0] && <Fact label="latest" value={`v${releases[0].version}`} />}
-              <Fact value={releases.length} label="releases" />
+              <Fact value={releases.length} label={plural(releases.length, 'release')} />
               {releases[0] && <Fact label="released" value={day(releases[0].date)} />}
-              {views > 0 && <Fact value={views} label={views === 1 ? 'view' : 'views'} />}
+              {views > 0 && <Fact value={views} label={plural(views, 'view')} />}
             </>
           }
         >
@@ -183,7 +183,7 @@ export function ProjectPage({ data: loaderData }: { data: ReturnType<typeof load
             label={settings['blog.project.title']}
             action={
               <Link to={`/blog?project=${project.slug}`} className="rule-link mono-sm">
-                {writing.length} {writing.length === 1 ? 'post' : 'posts'}
+                {writing.length} {plural(writing.length, 'post')}
               </Link>
             }
           >

site/app/routes/admin.tsx

@@ -6,6 +6,7 @@ import { Confirm, Segmented, Sortable, Switch } from '../components/kit/controls
 import { Fact, PageHeader } from '../components/kit/page';
 import { Page } from '../components/Shell';
 import { hubContext, type Hub } from '../context';
+import { plural } from '../format';
 import { useRoot } from '../hub';
 import { useSpotlight } from '../motion/motion';
 import {
@@ -668,9 +669,15 @@ export default function AdminPage({ loaderData }: Route.ComponentProps) {
           facts={
             <>
               <Fact value={loaderData.waiting} label="waiting" />
-              <Fact value={open.length} label="open errors" />
-              <Fact value={root.directory.members.length} label="members" />
-              <Fact value={loaderData.email.confirmed} label="subscribers" />
+              <Fact value={open.length} label={`open ${plural(open.length, 'error')}`} />
+              <Fact
+                value={root.directory.members.length}
+                label={plural(root.directory.members.length, 'member')}
+              />
+              <Fact
+                value={loaderData.email.confirmed}
+                label={plural(loaderData.email.confirmed, 'subscriber')}
+              />
             </>
           }
         >

site/app/routes/author.tsx

@@ -6,6 +6,7 @@ import { ChangelogPanel } from '../components/kit/panels';
 import { PostCard } from '../components/kit/posts';
 import { Page } from '../components/Shell';
 import { hubContext } from '../context';
+import { plural } from '../format';
 import { useHub, useRoot } from '../hub';
 import { authorFrom, viewerHandle } from '../pages/blog';
 import { topicsFor } from '../topics';
@@ -102,7 +103,7 @@ export default function Author({ loaderData }: Route.ComponentProps) {
           }
           facts={
             <>
-              <Fact value={posts.length} label={posts.length === 1 ? 'post' : 'posts'} />
+              <Fact value={posts.length} label={plural(posts.length, 'post')} />
               {words > 0 && <Fact value={words} label="minutes of reading" />}
               {posts[0] && <Fact label="latest" value={posts[0].publishedAt.slice(0, 10)} />}
             </>

site/app/routes/blog-mine.tsx

@@ -6,7 +6,7 @@ import { Confirm, Segmented } from '../components/kit/controls';
 import { Fact, PageHeader } from '../components/kit/page';
 import { Page } from '../components/Shell';
 import { hubContext } from '../context';
-import { day } from '../format';
+import { day, plural } from '../format';
 import { useHub, useRoot } from '../hub';
 import { checkedForm, EDITOR_PATH, member, viewerHandle } from '../pages/blog';
 import { postPath, STATUS_LABEL, type PostStatus } from '../posts';
@@ -106,7 +106,7 @@ export default function BlogMine({ loaderData }: Route.ComponentProps) {
           }
           facts={
             <>
-              <Fact value={count('draft')} label="drafts" />
+              <Fact value={count('draft')} label={plural(count('draft'), 'draft')} />
               <Fact value={count('scheduled')} label="scheduled" />
               <Fact value={count('published')} label="published" />
             </>

site/app/routes/blog.tsx

@@ -10,6 +10,7 @@ import { PostCard, WritingStrip } from '../components/kit/posts';
 import { SubscribePanel } from '../components/kit/subscribe';
 import { Page } from '../components/Shell';
 import { hubContext } from '../context';
+import { plural } from '../format';
 import { useHub, useRoot } from '../hub';
 import { viewerHandle } from '../pages/blog';
 import { topicsFor } from '../topics';
@@ -132,8 +133,8 @@ export default function Blog({ loaderData }: Route.ComponentProps) {
           }
           facts={
             <>
-              <Fact value={hub.posts.length} label="posts" />
-              <Fact value={writers.length} label="writers" />
+              <Fact value={hub.posts.length} label={plural(hub.posts.length, 'post')} />
+              <Fact value={writers.length} label={plural(writers.length, 'writer')} />
               {month > 0 && <Fact value={month} label="this month" />}
             </>
           }

site/app/routes/changelog.tsx

@@ -3,7 +3,7 @@ import { Panel } from '../components/kit/basics';
 import { Fact, PageHeader } from '../components/kit/page';
 import { Page } from '../components/Shell';
 import Timeline from '../components/Timeline';
-import { day } from '../format';
+import { day, plural } from '../format';
 import { useHub } from '../hub';
 import { topicsFor } from '../topics';
 
@@ -24,9 +24,9 @@ export default function Changelog() {
         title="Changelog"
         facts={
           <>
-            <Fact value={releases.length} label="releases" />
-            <Fact value={rootProjects.length} label="projects" />
-            <Fact value={epics.length} label={epics.length === 1 ? 'epic' : 'epics'} />
+            <Fact value={releases.length} label={plural(releases.length, 'release')} />
+            <Fact value={rootProjects.length} label={plural(rootProjects.length, 'project')} />
+            <Fact value={epics.length} label={plural(epics.length, 'epic')} />
             {releases[0] && <Fact label="latest" value={day(releases[0].date)} />}
           </>
         }