Add blog post page (#58)

opentofu · Sep 8, 2023 · 3dc8c5d · 3dc8c5d
1 parent 34ad3cf
commit 3dc8c5d
Show file tree

Hide file tree

Showing 17 changed files with 300 additions and 55 deletions.
diff --git a/src/components/Headline/index.tsx b/src/components/Headline/index.tsx
@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import React from "react";
+
+type HeadlineProps = {
+  children: React.ReactNode;
+  className?: string;
+};
+
+export default function Headline({ children, className }: HeadlineProps) {
+  return (
+    <h1
+      className={clsx(
+        "text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-normal lg:leading-normal tracking-wider text-center px-4",
+        className
+      )}
+    >
+      {children}
+    </h1>
+  );
+}
diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx
@@ -1,14 +1,15 @@
 import React from "react";
 import Button from "../Button";
 import PatternBg from "../PatternBg";
+import Headline from "../Headline";
 
 export default function Hero() {
   return (
     <header className="flex flex-col items-center py-10 md:py-20 px-6 md:px-16 mx-auto">
       <PatternBg />
-      <h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold leading-normal lg:leading-normal tracking-wider sm:max-w-2xl md:max-w-3xl lg:max-w-4xl text-center">
+      <Headline className="sm:max-w-2xl md:max-w-3xl lg:max-w-4xl">
         Ensure Terraform remains truly open-source. Always.
-      </h1>
+      </Headline>
       <p className="my-6 text-xl sm:max-w-lg md:max-w-xl lg:max-w-2xl text-center text-gray-600 dark:text-gray-500">
         OpenTF is a fork of Terraform that is open source, community driven, and
         will be managed by an independent Foundation.

diff --git a/src/components/Jumbotron/index.tsx b/src/components/Jumbotron/index.tsx
@@ -7,7 +7,7 @@ type JumbotronProps = {
 
 export default function Jumbotron({ children }: JumbotronProps) {
   return (
-    <div className="pt-8 pb-12 md:pt-10 md:pb-20 flex items-center justify-center">
+    <div className="pt-8 pb-12 md:pt-10 md:pb-20 flex flex-col items-center justify-center">
       <PatternBg />
       {children}
     </div>

diff --git a/src/components/LatestNews/index.tsx b/src/components/LatestNews/index.tsx
@@ -5,7 +5,7 @@ import Link from "@docusaurus/Link";
 
 export default function LatestNews({ recentPosts }) {
   const {
-    metadata: { title, formattedDate, frontMatter, permalink },
+    metadata: { title, formattedDate, date, frontMatter, permalink },
     Preview,
   } = recentPosts[0];
 
@@ -20,7 +20,13 @@ export default function LatestNews({ recentPosts }) {
             <img src={frontMatter.image_url} alt={title} />
           </Link>
           <div className="flex flex-col items-start">
-            <span className="text-purple-400 font-bold">{formattedDate}</span>
+            <time
+              dateTime={date}
+              itemProp="datePublished"
+              className="text-purple-400 font-bold uppercase"
+            >
+              {formattedDate}
+            </time>
             <h4 className="text-3xl font-bold leading-snug mt-2">
               <Link href={permalink}>{title}</Link>
             </h4>

diff --git a/src/components/TextContent/index.tsx b/src/components/TextContent/index.tsx
@@ -1,18 +1,20 @@
-import React from "react";
+import React, { HTMLProps } from "react";
 import clsx from "clsx";
 
-type TextContentProps = {
-  children: React.ReactNode;
-  className?: string;
-};
+type TextContentProps = HTMLProps<HTMLDivElement>;
 
-export default function TextContent({ children, className }: TextContentProps) {
+export default function TextContent({
+  children,
+  className,
+  ...rest
+}: TextContentProps) {
   return (
     <div
       className={clsx(
-        "prose lg:prose-lg mx-auto prose-h3:text-gray-900 dark:prose-h3:text-gray-50 prose-h3:text-2xl prose-h3:leading-snug md:prose-h3:text-5xl md:prose-h3:leading-normal prose-li:marker:text-inherit prose-a:text-inherit px-4 md:px-0 text-gray-600 dark:text-gray-500 mb-10",
+        "prose lg:prose-lg mx-auto prose-h3:text-gray-900 dark:prose-h3:text-gray-50 prose-h3:text-2xl prose-h3:leading-snug md:prose-h3:text-5xl md:prose-h3:leading-normal prose-li:marker:text-inherit prose-a:text-inherit px-4 md:px-0 text-gray-600 dark:text-gray-500 mb-10 prose-strong:text-inherit",
         className
       )}
+      {...rest}
     >
       {children}
     </div>

diff --git a/src/pages/faq.tsx b/src/pages/faq.tsx
@@ -6,14 +6,13 @@ import AccordionItem from "../components/Accordion/Item";
 import Faq from "../../faq.mdx";
 import { MDXProvider } from "@mdx-js/react";
 import Link from "@docusaurus/Link";
+import Headline from "../components/Headline";
 
 export default function Manifesto() {
   return (
     <Layout>
       <Jumbotron>
-        <h1 className="text-5xl md:text-7xl font-bold text-center leading-tight md:leading-snug">
-          Frequently Asked Questions
-        </h1>
+        <Headline>Frequently Asked Questions</Headline>
       </Jumbotron>
 
       <div className="container mx-auto pt-6 pb-10 px-4">

diff --git a/src/pages/manifesto.tsx b/src/pages/manifesto.tsx
@@ -2,14 +2,13 @@ import React from "react";
 import Layout from "@theme/Layout";
 import Jumbotron from "../components/Jumbotron";
 import TextContent from "../components/TextContent";
+import Headline from "../components/Headline";
 
 export default function Manifesto() {
   return (
     <Layout>
       <Jumbotron>
-        <h1 className="text-5xl md:text-7xl font-bold text-center leading-tight md:leading-snug max-w-2xl">
-          The OpenTF Manifesto
-        </h1>
+        <Headline className="max-w-2xl">The OpenTF Manifesto</Headline>
       </Jumbotron>
       <TextContent className="max-w-2xl">
         <p>

diff --git a/src/pages/supporters.tsx b/src/pages/supporters.tsx
@@ -5,6 +5,7 @@ import supporters from "../../supporters.json";
 import Jumbotron from "../components/Jumbotron";
 import Button from "../components/Button";
 import SupportersList from "../components/SupportersList";
+import Headline from "../components/Headline";
 
 export default function SupportersPage() {
   const groupedSupporters = groupSupportersByType(supporters);
@@ -23,9 +24,7 @@ export default function SupportersPage() {
   return (
     <Layout>
       <Jumbotron>
-        <h1 className="text-5xl md:text-7xl font-bold text-center leading-tight md:leading-snug">
-          Supporters
-        </h1>
+        <Headline>Supporters</Headline>
       </Jumbotron>
 
       <div className="container mx-auto md:pt-6 pb-10 px-4">

diff --git a/src/theme/BlogLastPost/index.tsx b/src/theme/BlogLastPost/index.tsx
@@ -4,36 +4,37 @@ import Button from "@site/src/components/Button";
 import Link from "@docusaurus/Link";
 
 export default function BlogLastPost({ item }) {
+  const { permalink, title, date, formattedDate, description } =
+    item.content.metadata;
+
   return (
     <div className="pt-8 pb-12 md:pt-12 md:pb-20 flex items-center justify-center">
       <PatternBg />
       <div className="max-w-7xl mx-auto px-4">
         <article>
           <div className="flex flex-col md:flex-row gap-6">
             <div className="flex-1">
-              <Link to={item.content.metadata.permalink}>
-                <img
-                  src={item.content.frontMatter.image_url}
-                  alt={item.content.metadata.title}
-                />
+              <Link to={permalink}>
+                <img src={item.content.frontMatter.image_url} alt={title} />
               </Link>
             </div>
             <div className="flex-1 flex flex-col justify-center items-start">
-              <p className="text-purple-400 uppercase font-bold">
-                {item.content.metadata.formattedDate}
-              </p>
-              <Link to={item.content.metadata.permalink}>
+              <time
+                dateTime={date}
+                itemProp="datePublished"
+                className="text-purple-400 uppercase font-bold"
+              >
+                {formattedDate}
+              </time>
+              <Link to={permalink}>
                 <h3 className="leading-snug text-3xl font-bold my-2 line-clamp-5">
-                  {item.content.metadata.title}
+                  {title}
                 </h3>
               </Link>
               <p className="text-gray-600 dark:text-gray-500 mb-4 line-clamp-3">
-                {item.content.metadata.description}
+                {description}
               </p>
-              <Button
-                variant="secondary"
-                href={item.content.metadata.permalink}
-              >
+              <Button variant="secondary" href={permalink}>
                 Read more
               </Button>
             </div>

diff --git a/src/theme/BlogListItem/index.tsx b/src/theme/BlogListItem/index.tsx
@@ -3,29 +3,33 @@ import Button from "@site/src/components/Button";
 import React from "react";
 
 export default function BlogListItem({ item }) {
+  const { permalink, title, date, formattedDate, description } =
+    item.content.metadata;
+
   return (
     <div className="flex flex-col gap-6">
       <div className="flex-1">
-        <Link to={item.content.metadata.permalink}>
-          <img
-            src={item.content.frontMatter.image_url}
-            alt={item.content.metadata.title}
-          />
+        <Link to={permalink}>
+          <img src={item.content.frontMatter.image_url} alt={title} />
         </Link>
       </div>
       <div className="flex-1 flex flex-col justify-center items-start">
-        <p className="text-purple-400 uppercase font-bold">
-          {item.content.metadata.formattedDate}
-        </p>
-        <Link to={item.content.metadata.permalink}>
+        <time
+          dateTime={date}
+          itemProp="datePublished"
+          className="text-purple-400 uppercase font-bold"
+        >
+          {formattedDate}
+        </time>
+        <Link to={permalink}>
           <h3 className="leading-snug text-xl font-bold my-2 line-clamp-3">
-            {item.content.metadata.title}
+            {title}
           </h3>
         </Link>
         <p className="text-gray-600 dark:text-gray-500 mb-4 line-clamp-3">
-          {item.content.metadata.description}
+          {description}
         </p>
-        <Button variant="secondary" href={item.content.metadata.permalink}>
+        <Button variant="secondary" href={permalink}>
           Read more
         </Button>
       </div>

diff --git a/src/theme/BlogPostItem/Content/index.js → src/theme/BlogPostItem/Content/index.tsx b/src/theme/BlogPostItem/Content/index.js → src/theme/BlogPostItem/Content/index.tsx
@@ -2,16 +2,17 @@ import React from "react";
 import { blogPostContainerID } from "@docusaurus/utils-common";
 import { useBlogPost } from "@docusaurus/theme-common/internal";
 import MDXContent from "@theme/MDXContent";
+import TextContent from "@site/src/components/TextContent";
 
 export default function BlogPostItemContent({ children }) {
   const { isBlogPostPage } = useBlogPost();
   return (
-    <div
-      className="prose lg:prose-xl dark:prose-invert"
+    <TextContent
+      className="my-4 md:my-10"
       id={isBlogPostPage ? blogPostContainerID : undefined}
       itemProp="articleBody"
     >
       <MDXContent>{children}</MDXContent>
-    </div>
+    </TextContent>
   );
 }
diff --git a/src/theme/BlogPostItem/Header/Author/index.tsx b/src/theme/BlogPostItem/Header/Author/index.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import Link, { type Props as LinkProps } from "@docusaurus/Link";
+
+import type { Props } from "@theme/BlogPostItem/Header/Author";
+
+function MaybeLink(props: LinkProps) {
+  if (props.href) {
+    return <Link {...props} />;
+  }
+  return <>{props.children}</>;
+}
+
+export default function BlogPostItemHeaderAuthor({ author }: Props) {
+  const { name, title, url, imageURL, email } = author;
+  const link = url || (email && `mailto:${email}`) || undefined;
+  return (
+    <div className="flex gap-4 items-center shrink-0">
+      {imageURL && (
+        <MaybeLink href={link}>
+          <img src={imageURL} alt={name} className="w-14 h-14 rounded-full" />
+        </MaybeLink>
+      )}
+
+      {name && (
+        <div
+          itemProp="author"
+          itemScope
+          itemType="https://schema.org/Person"
+          className="flex flex-col"
+        >
+          <MaybeLink href={link} itemProp="url" className="font-bold">
+            <span itemProp="name">{name}</span>
+          </MaybeLink>
+
+          {title && (
+            <span itemProp="description" className="text-sm">
+              {title}
+            </span>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/theme/BlogPostItem/Header/Authors/index.tsx b/src/theme/BlogPostItem/Header/Authors/index.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { useBlogPost } from "@docusaurus/theme-common/internal";
+import BlogPostItemHeaderAuthor from "@theme/BlogPostItem/Header/Author";
+
+export default function BlogPostItemHeaderAuthors() {
+  const {
+    metadata: { authors },
+    assets,
+  } = useBlogPost();
+  const authorsCount = authors.length;
+  if (authorsCount === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex gap-6 mt-6 px-4 flex-wrap justify-center">
+      {authors.map((author, idx) => (
+        <BlogPostItemHeaderAuthor
+          key={idx}
+          author={{
+            ...author,
+            imageURL: assets.authorsImageUrls[idx] ?? author.imageURL,
+          }}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/theme/BlogPostItem/Header/index.tsx b/src/theme/BlogPostItem/Header/index.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import BlogPostItemHeaderAuthors from "@theme/BlogPostItem/Header/Authors";
+import Jumbotron from "@site/src/components/Jumbotron";
+import { useBlogPost } from "@docusaurus/theme-common/internal";
+import Headline from "@site/src/components/Headline";
+
+export default function BlogPostItemHeader() {
+  const { metadata } = useBlogPost();
+  const { date, formattedDate, title } = metadata;
+
+  return (
+    <Jumbotron>
+      <time
+        dateTime={date}
+        itemProp="datePublished"
+        className="text-purple-400 uppercase font-bold"
+      >
+        {formattedDate}
+      </time>
+      <Headline>{title}</Headline>
+
+      <BlogPostItemHeaderAuthors />
+    </Jumbotron>
+  );
+}