Update branding colors

public/archived-logos/favicons/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "WPGraphQL",
+    "short_name": "WPGraphQL",
+    "icons": [
+        {
+            "src": "/icons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/icons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#f3931c",
+    "background_color": "#172A53",
+    "display": "browser"
+}

src/components/Docs/MdxComponents.js

@@ -17,7 +17,7 @@ function LinkedHeading({ id, as, children, className }) {
         as={as}
         id={id}
         className={clsx("group flex whitespace-pre-wrap pr-4", className, {
-          "mb-2 text-xxl leading-6 text-slate-600 font-semibold tracking-normal dark:text-slate-200":
+          "mb-2 text-xxl leading-6 text-navy font-semibold tracking-normal dark:text-slate-200":
             as === "h2",
         })}
       >

src/components/HomePage/HomepageCta.js

@@ -4,20 +4,20 @@ export default function HomepageCta() {
   return (
     <div className="bg-slate-200 dark:bg-slate-900">
       <div className="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8">
-        <h2 className="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
+        <h2 className="text-3xl font-extrabold text-navy dark:text-white sm:text-4xl">
           <span className="block">Boost your productivity</span>
           <span className="block">Start using WPGraphQL today!</span>
         </h2>
         <Link href="/docs/introduction">
-          <a className="mt-8 bg-white dark:bg-slate-800 border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-sky-800 dark:text-sky-50 hover:bg-gray-100 dark:hover:bg-slate-900 hover:shadow-lg">
+          <a className="btn-secondary">
             Get Started
           </a>
         </Link>
         <a
           href="https://wordpress.org/plugins/wp-graphql"
           rel="noreferrer"
           target="_blank"
-          className="mt-8 ml-8 bg-orange-500  border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-white hover:bg-orange-600 hover:shadow-lg"
+          className="btn-primary"
         >
           Download the Plugin
         </a>

src/components/HomePage/HomepageFeatures.js

@@ -6,13 +6,13 @@ export default function HomepageFeatures() {
       <div className="relative bg-white dark:bg-slate-800 pt-16 overflow-hidden sm:pt-24 lg:pt-32">
         <div className="mx-auto max-w-md px-4 text-center sm:px-6 sm:max-w-3xl lg:px-8 lg:max-w-7xl">
           <div>
-            <h2 className="text-base font-semibold tracking-wider text-indigo-600 dark:text-indigo-200 uppercase">
+            <h2 className="subtitle">
               Efficient Data Fetching
             </h2>
-            <p className="mt-2 text-3xl font-extrabold text-gray-900 dark:text-white tracking-tight sm:text-4xl">
+            <p className="mt-2 text-3xl font-extrabold text-navy dark:text-white tracking-tight sm:text-4xl">
               Query what you need. Get exactly that.
             </p>
-            <p className="mt-5 max-w-prose mx-auto text-xl text-gray-500 dark:text-gray-100">
+            <p className="mt-5 max-w-prose mx-auto text-xl text-navy dark:text-gray-100">
               With GraphQL, the client makes declarative queries, asking for the
               exact data needed, and exactly what was asked for is given in
               response, nothing more. This allows the client to have control over
@@ -34,13 +34,13 @@ export default function HomepageFeatures() {
       <div className="relative bg-slate-200 dark:bg-slate-900 pt-16 overflow-hidden sm:pt-24 lg:pt-32">
         <div className="mx-auto max-w-md px-4 text-center sm:px-6 sm:max-w-3xl lg:px-8 lg:max-w-7xl">
           <div>
-            <h2 className="text-base font-semibold tracking-wider text-indigo-600 dark:text-indigo-200 uppercase">
+            <h2 className="subtitle">
               Nested Resources
             </h2>
-            <p className="mt-2 text-3xl font-extrabold text-gray-900 dark:text-white tracking-tight sm:text-4xl">
+            <p className="mt-2 text-3xl font-extrabold text-navy dark:text-white tracking-tight sm:text-4xl">
               Fetch many resources in a single request
             </p>
-            <p className="mt-5 max-w-prose mx-auto text-xl text-gray-500 dark:text-gray-100">
+            <p className="mt-5 max-w-prose mx-auto text-xl text-navy dark:text-gray-100">
               GraphQL queries allow access to multiple root resources, and also
               smoothly follow references between connected resources. While a
               typical REST API would require round-trip requests to many

src/components/HomePage/HomepageFrameworks.js

@@ -6,10 +6,10 @@ export default function HomepageFrameworks() {
     <div className="bg-slate-200 dark:bg-slate-600 pt-12 sm:pt-16">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="max-w-4xl mx-auto text-center">
-          <h2 className="text-3xl font-extrabold text-gray-900 dark:text-white sm:text-4xl">
+          <h2 className="text-3xl font-extrabold text-navy dark:text-white sm:text-4xl">
             Build rich JavaScript applications <br /> with WordPress and GraphQL
           </h2>
-          <p className="mt-3 text-xl text-gray-500 dark:text-gray-200 sm:mt-4">
+          <p className="mt-3 text-xl text-navy dark:text-gray-200 sm:mt-4">
             WPGraphQL allows you to separate your CMS from your presentation
             layer. Content creators can use the CMS they know, while developers
             can use the frameworks and tools they love.

src/components/HomePage/HomepageHero.js

@@ -8,23 +8,23 @@ export default function HomepageHero() {
         <div className="bg-slate-200 dark:bg-slate-700 rounded-lg shadow-xl overflow-hidden lg:grid lg:grid-cols-2 lg:gap-4">
           <div className="pt-10 pb-12 px-6 sm:pt-16 sm:px-16 lg:py-16 lg:pr-0 xl:py-20 xl:px-20">
             <div className="lg:self-center">
-              <h2 className="text-3xl font-extrabold text-gray-700 dark:text-white sm:text-4xl">
+              <h2 className="text-3xl font-extrabold text-navy dark:text-white sm:text-4xl">
                 <span className="block">GraphQL API for WordPress</span>
               </h2>
-              <p className="mt-4 text-lg leading-6 text-gray-600 dark:text-slate-100">
+              <p className="mt-4 text-lg leading-6 text-navy dark:text-slate-100">
                 WPGraphQL is a free, open-source WordPress plugin that provides
                 an extendable GraphQL schema and API for any WordPress site.
               </p>
               <Link href="/docs/introduction">
-                <a className="mt-8 bg-white dark:bg-slate-800 border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-sky-800 dark:text-sky-50 hover:bg-gray-100 dark:hover:bg-slate-900 hover:shadow-lg">
+                <a className="btn-secondary">
                   Get Started
                 </a>
               </Link>
               <a
                 href="https://wordpress.org/plugins/wp-graphql"
                 rel="noreferrer"
                 target="_blank"
-                className="mt-8 ml-8 bg-orange-500  border border-transparent rounded-md shadow px-5 py-3 inline-flex items-center text-base font-medium text-white hover:bg-orange-600 hover:shadow-lg"
+                className="btn-primary"
               >
                 Download the Plugin
               </a>

src/components/HomePage/HomepageTrust.js

@@ -5,15 +5,15 @@ export default function HomePageTrust() {
   return (
     <div className="bg-slate-100 dark:bg-slate-800">
       <div className="max-w-8xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
-        <h2 className="text-center text-3xl tracking-tight font-extrabold text-gray-900 dark:text-white sm:text-4xl">
+        <h2 className="text-center text-3xl tracking-tight font-extrabold text-navy dark:text-white sm:text-4xl">
           {`Who's Using WPGraphQL?`}
         </h2>
-        <p className="text-center mt-3 max-w-2xl mx-auto text-xl text-gray-500 dark:text-gray-50 sm:mt-4">
+        <p className="text-center mt-3 max-w-2xl mx-auto text-xl text-navy dark:text-gray-50 sm:mt-4">
           Digital agencies, product teams and freelancers around the world trust
           WPGraphQL in production to bridge modern front-end stacks with content
           managed in WordPress.
         </p>
-        <div className="max-w-7xl mt-6 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-8">
+        <div className="mt-6 grid grid-cols-2 gap-0.5 md:grid-cols-3 lg:mt-8">
           <div className="col-span-1 flex justify-center py-8 px-8 bg-white">
             <Image
               className="max-h-12"

src/components/Preview/ActionPreview.js

@@ -28,7 +28,7 @@ export default function ActionPreview({ node }) {
 
       <div className="text-base font-medium leading-6">
         <Link href={node.uri}>
-          <a className="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-5 py-2 focus:outline-none focus:ring-2 bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900 focus:ring-slate-500 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white dark:focus:ring-slate-500">
+          <a className="btn-primary-sm">
             <span className="pr-2">View Action →</span>
           </a>
         </Link>

src/components/Preview/ExtensionPreview.js

@@ -32,7 +32,7 @@ export default function ExtensionPreview({ extension }) {
           href={extension.extensionFields.pluginLink}
           target="_blank"
           rel="noreferrer"
-          className="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-5 py-2 focus:outline-none focus:ring-2 bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900 focus:ring-slate-500 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white dark:focus:ring-slate-500"
+          className="btn-primary-sm"
         >
           <span className="pr-2">View Extension</span>
           <ArrowTopRightOnSquareIcon className="h-4 w-4" />

src/components/Preview/FilterPreview.js

@@ -28,7 +28,7 @@ export default function FilterPreview({ filter }) {
 
       <div className="text-base font-medium leading-6">
         <Link href={filter.uri}>
-          <a className="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-5 py-2 focus:outline-none focus:ring-2 bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900 focus:ring-slate-500 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white dark:focus:ring-slate-500">
+          <a className="btn-primary-sm">
             <span className="pr-2">View Filter →</span>
           </a>
         </Link>

src/components/Preview/FunctionPreview.js

@@ -28,7 +28,7 @@ export default function FunctionPreview({ node }) {
 
       <div className="text-base font-medium leading-6">
         <Link href={node.uri}>
-          <a className="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-5 py-2 focus:outline-none focus:ring-2 bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900 focus:ring-slate-500 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white dark:focus:ring-slate-500">
+          <a className="btn-primary-sm">
             <span className="pr-2">View Function →</span>
           </a>
         </Link>

src/components/Preview/PostPreview.js

@@ -1,21 +1,11 @@
 import { gql } from "@apollo/client"
 import Link from "next/link"
 
-import PostPreviewCategoryLink, {
-  PostPreviewCategoryLinkFragment,
-} from "components/Preview/PostPreviewCategoryLink"
-
 export const PostPreviewFragment = gql`
   fragment PostPreview on Post {
     id
     title
     uri
-    categories {
-      nodes {
-        ...PostPreviewCategoryLink
-      }
-    }
-    excerpt: content
     date
     author {
       node {
@@ -28,59 +18,47 @@ export const PostPreviewFragment = gql`
       }
     }
   }
-  ${PostPreviewCategoryLinkFragment}
 `
 
-export default function PostPreview({ post }) {
+export default function PostPreview({ post, isLatest }) {
   if (!post) {
-    return null
+    return null;
   }
 
-  const paragraphs = post?.excerpt ? post.excerpt.split("</p>") : null
-  const excerpt = paragraphs ? paragraphs[0] + "</p>" : null
   const date = post?.date
     ? new Date(post.date).toLocaleDateString("en-us", {
         year: "numeric",
         month: "long",
         day: "numeric",
       })
-    : null
+    : null;
 
   return (
-    <article className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
-      <dl>
-        <dt className="sr-only">Published on</dt>
-        <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
-          <time dateTime={post.date}>{date}</time>
-        </dd>
-      </dl>
-      <div className="space-y-5 xl:col-span-3">
-        <div className="space-y-6">
-          <div>
-            <h2 className="text-2xl font-bold leading-8 tracking-tight">
-              <Link href={post.uri}>
-                <a className="text-gray-900 dark:text-gray-100">{post.title}</a>
-              </Link>
-            </h2>
-            <div className="flex flex-wrap">
-              {post?.categories?.nodes?.map((category, i) => (
-                <PostPreviewCategoryLink key={i} category={category} />
-              ))}
-            </div>
-          </div>
-          <div
-            className="prose dark:prose-dark max-w-none "
-            dangerouslySetInnerHTML={{ __html: excerpt }}
-          />
+    <article
+      className={`bg-gradient-elevate-light dark:bg-gradient-elevate p-6 rounded-lg flex flex-col justify-between w-full ${
+        isLatest ? "xl:col-span-2 xl:row-span-2" : ""
+      }`}
+    >
+      <div className="flex items-center mb-4">
+        <img
+          className="w-10 h-10 rounded-full mr-4"
+          src={post.author.node.avatar.url}
+          alt={post.author.node.name}
+        />
+        <div className="text-sm">
+          <p className="text-navy dark:text-gray-100 leading-none">{post.author.node.name}</p>
+          <time className="text-gray-500 dark:text-gray-300" dateTime={post.date}>
+            {date}
+          </time>
         </div>
-        <div className="text-base font-medium leading-6">
+      </div>
+      <div>
+        <h2 className="text-2xl font-bold leading-8 tracking-tight mb-2">
           <Link href={post.uri}>
-            <a className="group inline-flex items-center h-9 rounded-full text-sm font-semibold whitespace-nowrap px-5 py-2 focus:outline-none focus:ring-2 bg-slate-100 text-slate-700 hover:bg-slate-200 hover:text-slate-900 focus:ring-slate-500 dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600 dark:hover:text-white dark:focus:ring-slate-500">
-              Read more →
-            </a>
+            <a className="text-navy dark:text-gray-100">{post.title}</a>
           </Link>
-        </div>
+        </h2>
       </div>
     </article>
-  )
+  );
 }

src/components/Site/SiteFooter.js

@@ -22,7 +22,7 @@ export default function Footer() {
           ))}
         </div>
         <div className="mt-8 md:mt-0 md:order-1 prose dark:prose-invert">
-          <p className="text-center text-base text-gray-600 dark:text-gray-300">
+          <p className="text-center text-base text-navy dark:text-gray-300">
             &copy; {year} WPGraphQL. All rights reserved. | Development
             sponsored by{" "}
             <a

src/pages/developer-reference.js

@@ -52,7 +52,7 @@ export default function DeveloperReference() {
         <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
           {references.map((reference, i) => (
             <div key={i} className="box-shadow bg-slate-200 dark:bg-slate-800 rounded-lg drop-shadow-lg p-5 pb-7">
-              { reference?.icon && <div className="flex h-12 w-12 items-center justify-center rounded-md bg-indigo-500 text-white"><reference.icon className="h-6 w-6" aria-hidden="true" /></div> }
+              { reference?.icon && <div className="flex h-12 w-12 items-center justify-center rounded-md bg-purple text-white"><reference.icon className="h-6 w-6" aria-hidden="true" /></div> }
               <h3 className="">{reference.name}</h3>
               <p>{reference.description}</p>
               <a

src/styles/globals.css

@@ -8,3 +8,30 @@ html {
 
 @tailwind components;
 @tailwind utilities;
+
+/* Regular buttons */
+.btn-primary {
+  @apply mt-8 bg-blue text-white border border-transparent rounded-full shadow px-5 py-3 inline-flex items-center text-base font-medium hover:bg-blue-500 hover:shadow-lg transition-all duration-300;
+}
+
+.btn-secondary {
+  @apply mt-8 border-2 dark:text-white dark:border-white border-navy text-navy bg-transparent rounded-full shadow px-5 py-3 inline-flex items-center text-base font-medium hover:bg-navy hover:text-white hover:shadow-lg dark:hover:bg-white dark:hover:text-navy duration-300;
+}
+
+/* Small buttons */
+.btn-primary-sm {
+  @apply mt-8 bg-blue text-white border border-transparent rounded-full shadow px-3 py-2 inline-flex items-center text-sm font-medium hover:bg-blue-600 hover:shadow-lg transition-all duration-300;
+}
+
+.btn-secondary-sm {
+  @apply mt-8 border-2 border-navy text-navy bg-transparent rounded-full shadow px-3 py-2 inline-flex items-center text-sm font-medium hover:bg-navy hover:text-white hover:shadow-lg transition-all duration-300;
+}
+
+.subtitle {
+  @apply text-base font-semibold tracking-wider text-navy dark:text-purple-400 uppercase;
+}
+
+/* Apply margin left to all adjacent "buttons", excluding the first button */
+[class*='btn-'] + [class*='btn-'] {
+  @apply ml-4;
+}

src/wp-templates/archive-post.js

@@ -1,28 +1,25 @@
 import { gql } from "@apollo/client"
-
 import SiteLayout, { NavMenuFragment } from "components/Site/SiteLayout"
-import PostPreview, {
-  PostPreviewFragment,
-} from "components/Preview/PostPreview"
+import PostPreview, { PostPreviewFragment } from "components/Preview/PostPreview"
 
 export default function ArchivePost({ data }) {
   const posts = data?.posts?.nodes
 
   return (
     <SiteLayout>
-      <main className="content px-6 divide-y divide-gray-200 dark:divide-gray-700 max-w-lg mx-auto lg:max-w-8xl">
-        <div className="space-y-2 pt-6 pb-8 md:space-y-5 ">
-          <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
+      <main className="content px-6 max-w-lg mx-auto lg:max-w-5xl">
+        <div className="space-y-2 pt-6 pb-8 md:space-y-5">
+          <h1 className="text-3xl font-extrabold leading-9 tracking-tight text-navy dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
             Blog
           </h1>
-          <p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
+          <p className="text-lg leading-7 text-navy dark:text-white">
             Read the latest posts from the WPGraphQL team
           </p>
         </div>
-        <ul className="divide-y divide-gray-200 dark:divide-gray-700">
-          {posts.map((post) => (
-            <li key={post.id} className="py-12">
-              <PostPreview post={post} />
+        <ul className="grid gap-8 grid-cols-1 md:grid-cols-2 xl:grid-cols-3 auto-rows-fr">
+          {posts.map((post, index) => (
+            <li key={post.id} className={`flex w-full ${index === 0 ? "xl:col-span-2" : ""}`}>
+              <PostPreview post={post} isLatest={index === 0} />
             </li>
           ))}
         </ul>