Unify content terminology from 'works' to 'work' (#201)

README.md

@@ -42,7 +42,7 @@ Peacock ships with 3 basic content types
 
 - **Articles**: Long form content. Think blog posts 📚. All articles are in the `/content/articles` folder. Any markdown document you add here will show on the `/articles` page.
 - **Notes**: Short form Spontaneous content 🖋. All notes are in the `/content/notes` folder.
-- **Works**: Case studies and projects you want to show 🛠. All works are in the `/content/works` folder. There's a `selectedWork` field in the markdown meta. Setting it to `true` will display the case study/work on the `index.tsx` page.
+- **Work**: Case studies and projects you want to show 🛠. All work is in the `/content/work` folder. There's a `selectedWork` field in the markdown meta. Setting it to `true` will display the case study/work on the `index.tsx` page.
 
 ## Deploy to Vercel
 

app/[contentType]/[slug]/page.tsx

@@ -76,7 +76,7 @@ export default async function ContentPage({ params }: Params) {
   const content = await fetchContentData(slug, contentType);
   if (content.draft) notFound();
 
-  if (contentType === 'works') return <WorkPage work={content} />;
+  if (contentType === 'work') return <WorkPage work={content} />;
 
   return (
     <Container width="narrow">

app/page.tsx

@@ -37,7 +37,7 @@ export const metadata: Metadata = {
 };
 
 const Index = () => {
-  const content = getContentList('works').filter((work) => work.selectedWork);
+  const content = getContentList('work').filter((work) => work.selectedWork);
 
   return (
     <div>

components/back-button.tsx

@@ -8,7 +8,7 @@ export default function BackButton() {
   return (
     <button
       className="group flex items-center gap-1 text-accent-3 hover:text-accent-1 active:scale-95"
-      onClick={() => router.push('/works')}
+      onClick={() => router.push('/work')}
     >
       <ChevronLeft className="transition-transform group-hover:-translate-x-2" />
       <div>All Projects</div>

components/content-list.tsx

@@ -13,8 +13,8 @@ export function ContentList({
   contentType,
   basePath,
 }: ContentListProps) {
-  if (contentType === 'works') {
-    const otherWorks = items.filter((x) => !x.selectedWork);
+  if (contentType === 'work') {
+    const otherWork = items.filter((x) => !x.selectedWork);
     return (
       <section>
         <section className="flex flex-col gap-8 pb-10 mb-10 border-b border-accent-8">
@@ -25,13 +25,13 @@ export function ContentList({
             ))}
         </section>
 
-        {otherWorks.length > 0 && (
+        {otherWork.length > 0 && (
           <>
             <h3 className="text-3xl font-bold text-accent-3 mb-16 font-display">
               Other Experiments
             </h3>
             <section className="flex gap-8">
-              <WorkListGrid works={otherWorks} />
+              <WorkListGrid work={otherWork} />
             </section>
           </>
         )}
@@ -42,10 +42,10 @@ export function ContentList({
   return <Cards items={items} basePath={basePath} />;
 }
 
-function WorkListGrid({ works }: { works: IContent[] }) {
+function WorkListGrid({ work }: { work: IContent[] }) {
   return (
     <section className="flex flex-col lg:flex-row flex-wrap gap-8 pb-10 mb-10 w-full">
-      {works.map((item) => (
+      {work.map((item) => (
         <WorkItem key={`item-${item.slug}`} work={item} grid />
       ))}
     </section>

components/index.tsx

@@ -10,7 +10,7 @@ export * from './logo';
 export * from './notes';
 export * from './nav';
 export * from './footer';
-export * from './works';
+export * from './work';
 export * from './socials';
 export * from './link';
 export * from './testimonials';

components/nav/mobile-nav.tsx

@@ -45,11 +45,11 @@ export function MobileNav() {
 
               <li className="text-center mb-4">
                 <Link
-                  href="/works"
+                  href="/work"
                   className="text-lg"
                   onClick={() => toggleMenuOpen()}
                 >
-                  Works
+                  Work
                 </Link>
               </li>
 

components/nav/nav.tsx

@@ -42,7 +42,7 @@ export function Nav() {
             )}
 
             <nav className="hidden list-none md:flex md:items-center">
-              <NavItem title="Works" href="/works" />
+              <NavItem title="Work" href="/work" />
               <NavItem title="Articles" href="/articles" />
               <NavItem title="Notes" href="/notes" />
               <NavItem title="About" href="/about" />

components/works/work.tsx → components/work/work.tsx

@@ -18,7 +18,7 @@ export function WorkItem({ work, grid }: { work: IContent; grid?: boolean }) {
   const { title, slug, description } = work;
   return (
     <Link
-      href={`/works/${slug}`}
+      href={`/work/${slug}`}
       className={cn(
         'group rounded-xl select-none no-underline flex flex-col lg:py-10 w-full md:flex-row transition-transform hover:cursor-pointer hover:scale-[102%] active:scale-95',
         colorsLookup[slug as keyof typeof colorsLookup],
@@ -54,7 +54,7 @@ function WorkGridItem({ work }: { work: IContent }) {
 
   return (
     <Link
-      href={`/works/${slug}`}
+      href={`/work/${slug}`}
       className="group rounded-md no-underline select-none transition-transform hover:cursor-pointer hover:scale-[102%] bg-accent-8 w-full lg:w-[30%] active:scale-95"
     >
       <section>

content/notes/markdown-1.md

@@ -1,5 +1,5 @@
 ---
-title: "Getting started with React Nativ"
+title: "Getting started with React Native"
 date: "2021-01-01"
 slug: "getting-started-with-react-native"
 description: "Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page."

playwright/navigation.spec.ts

@@ -2,19 +2,19 @@ import { expect, test } from '@playwright/test';
 
 test('Navigate and check content', async ({ page }) => {
   await page.goto('/');
-  await expect(page.getByRole('link', { name: 'Works' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Work' })).toBeVisible();
   await expect(page.getByRole('link', { name: 'Articles' })).toBeVisible();
   await expect(page.getByRole('link', { name: 'Notes' })).toBeVisible();
   await expect(page.getByRole('link', { name: 'About' })).toBeVisible();
   await expect(
-    page.locator('div:has-text("WorksArticlesNotesAbout") a').nth(4),
+    page.locator('div:has-text("WorkArticlesNotesAbout") a').nth(4),
   ).toBeVisible();
   await expect(page.locator('h1')).toContainText('Senior Software Engineer');
 
-  await page.getByRole('link', { name: 'Works' }).click();
-  await page.waitForURL('/works');
-  await expect(page).toHaveTitle('Selected Works | NextJS Starter Peacock');
-  await expect(page.locator('h1')).toContainText('Selected Works');
+  await page.getByRole('link', { name: 'Work' }).click();
+  await page.waitForURL('/work');
+  await expect(page).toHaveTitle('Selected Work | NextJS Starter Peacock');
+  await expect(page.locator('h1')).toContainText('Selected Work');
 
   await page.getByRole('link', { name: 'Articles' }).click();
   await page.waitForURL('/articles');
@@ -32,7 +32,7 @@ test('Navigate and check content', async ({ page }) => {
   await expect(page.getByRole('heading')).toContainText('About Me 🧘🏾‍♂️');
   await expect(
     await page
-      .locator('div:has-text("WorksArticlesNotesAbout") a')
+      .locator('div:has-text("WorkArticlesNotesAbout") a')
       .nth(4)
       .getAttribute('href'),
   ).toContain('/rss.xml');

utils/content-types.ts

@@ -27,12 +27,12 @@ export const contentTypesMap: Map<
     },
   ],
   [
-    'works',
+    'work',
     {
-      title: 'Selected Works',
+      title: 'Selected Work',
       description:
-        "Selected works I'm proud of, ranging from Software Engineering and Product Design.",
-      path: 'works',
+        "Selected work I'm proud of, ranging from Software Engineering and Product Design.",
+      path: 'work',
     },
   ],
 ]);

utils/content.ts

@@ -40,7 +40,7 @@ export type IContent = {
   category?: string;
 };
 
-export type IContentType = 'articles' | 'notes' | 'works';
+export type IContentType = 'articles' | 'notes' | 'work';
 
 export type IContentDataWithDraftType = IContentData & Pick<IContent, 'draft'>;
 
@@ -82,7 +82,7 @@ export const getAllContentIds = (contentType: IContentType) => {
       filenames = fs.readdirSync(notesDirectory);
       break;
 
-    case 'works':
+    case 'work':
       baseDir = workDirectory;
       filenames = fs.readdirSync(workDirectory);
       break;
@@ -131,7 +131,7 @@ export const getContentData = async (
       contentTypeDirectory = notesDirectory;
       break;
 
-    case 'works':
+    case 'work':
       filenames = fs.readdirSync(workDirectory);
       contentTypeDirectory = workDirectory;
       break;
@@ -200,7 +200,7 @@ export const getContentList = (contentType: IContentType): IContent[] => {
       contentDir = notesDirectory;
       break;
 
-    case 'works':
+    case 'work':
       contentFiles = fs.readdirSync(workDirectory);
       contentDir = workDirectory;
       break;
@@ -245,7 +245,7 @@ export const getContentWithTag = (tag: string, contentType: IContentType) => {
       contentDir = notesDirectory;
       break;
 
-    case 'works':
+    case 'work':
       contentDir = workDirectory;
       break;
 
@@ -298,7 +298,7 @@ export const getContentInCategory = (
       contentDir = notesDirectory;
       break;
 
-    case 'works':
+    case 'work':
       contentDir = workDirectory;
       break;