pantheon-systems · aumkar · Aug 20, 2024 · Aug 20, 2024 · Aug 20, 2024 · Aug 20, 2024
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,8 @@
 {
-  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
   "semi": true,
   "singleQuote": false,
   "useTabs": false,

diff --git a/configs/eslint/package.json b/configs/eslint/package.json
@@ -23,5 +23,8 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "prettier": "3.2.5"
+  },
+  "devDependencies": {
+    "prettier-plugin-tailwindcss": "^0.6.6"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/starters/nextjs-starter-approuter-ts/app/articles/[...uri]/article-view.tsx b/starters/nextjs-starter-approuter-ts/app/articles/[...uri]/article-view.tsx
@@ -9,12 +9,7 @@ import { ClientsideArticleView } from "./clientside-articleview";
 export const ArticleView = async ({ params, searchParams }) => {
   const { article, grant } = await getServersideArticle(params, searchParams);
 
-  return (
-    <>
-      <ClientsideArticleView article={article} grant={grant} />
-      <Tags tags={article?.tags} />
-    </>
-  );
+  return <ClientsideArticleView article={article} grant={grant} />;
 };
 
 export async function getServersideArticle(params, searchParams) {

diff --git a/starters/nextjs-starter-approuter-ts/app/articles/[...uri]/page.tsx b/starters/nextjs-starter-approuter-ts/app/articles/[...uri]/page.tsx
@@ -6,7 +6,7 @@ import { ArticleView, getServersideArticle } from "./article-view";
 export default async function ArticlePage({ params, searchParams }) {
   return (
     <Layout>
-      <div className="max-w-screen-lg mx-auto mt-16 prose">
+      <div className="prose mx-4 mt-16 text-black sm:mx-6 lg:mx-auto">
         <Suspense fallback={<SkeletonArticleView />}>
           <ArticleView params={params} searchParams={searchParams} />
         </Suspense>

diff --git a/starters/nextjs-starter-approuter-ts/components/article-view.tsx b/starters/nextjs-starter-approuter-ts/components/article-view.tsx
@@ -32,19 +32,16 @@ export default function ArticleView({
   return (
     <>
       <div>
-        <h1 className="text-3xl font-bold md:text-4xl">{title}</h1>
+        <h1 className="text-5xl font-bold">{title}</h1>
         {article.updatedAt ? (
           <p className="py-2">
-            Last Updated:{" "}
             {new Date(article.updatedAt).toLocaleDateString("en-US", {
               year: "numeric",
               month: "long",
               day: "numeric",
             })}
           </p>
         ) : null}
-
-        <hr className="mt-6 mb-8" />
       </div>
       <ArticleRenderer
         article={hydratedArticle}

diff --git a/starters/nextjs-starter-approuter-ts/tailwind.config.cjs b/starters/nextjs-starter-approuter-ts/tailwind.config.cjs
@@ -6,7 +6,44 @@ module.exports = {
     "./app/**/*.{js,jsx,ts,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      typography: () => ({
+        DEFAULT: {
+          css: {
+            maxWidth: "80ch",
+            img: {
+              borderRadius: "1rem",
+              maxWidth: "none !important",
+              maxHeight: "none !important",
+              aspectRatio: "3/2",
+              marginTop: "4rem !important",
+              marginBottom: "4rem !important",
+            },
+            a: {
+              color: "rgb(17, 85, 204)", // "dark cornflower blue 2" in Google Docs
+            },
+            h1: {
+              fontSize: "3rem",
+            },
+            h2: {
+              fontSize: "2.25rem",
+            },
+            h3: {
+              fontSize: "1.875rem",
+            },
+            h4: {
+              fontSize: "1.5rem",
+            },
+            h5: {
+              fontSize: "1.25rem",
+            },
+            h6: {
+              fontSize: "1rem",
+            },
+          },
+        },
+      }),
+    },
   },
   plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
 };
diff --git a/starters/nextjs-starter-ts/components/article-view.tsx b/starters/nextjs-starter-ts/components/article-view.tsx
@@ -43,20 +43,17 @@ export function StaticArticleView({ article, onlyContent }: ArticleViewProps) {
   return (
     <>
       <div>
-        <div className="text-3xl font-bold md:text-4xl">{articleTitle}</div>
+        <div className="text-5xl font-bold">{articleTitle}</div>
 
         {article.updatedAt ? (
           <p className="py-2">
-            Last Updated:{" "}
             {new Date(article.updatedAt).toLocaleDateString("en-US", {
               year: "numeric",
               month: "long",
               day: "numeric",
             })}
           </p>
         ) : null}
-
-        <hr className="mt-6 mb-8" />
       </div>
       <ArticleRenderer
         article={article}

diff --git a/starters/nextjs-starter-ts/pages/articles/[...uri].tsx b/starters/nextjs-starter-ts/pages/articles/[...uri].tsx
@@ -6,22 +6,15 @@ import {
 import { NextSeo } from "next-seo";
 import queryString from "query-string";
 import ArticleView from "../../components/article-view";
-import { PageGrid } from "../../components/grid";
 import Layout from "../../components/layout";
-import { Tags } from "../../components/tags";
 import { pantheonAPIOptions } from "../api/pantheoncloud/[...command]";
 
 interface ArticlePageProps {
   article: Article;
   grant: string;
-  recommendedArticles: Article[];
 }
 
-export default function ArticlePage({
-  article,
-  grant,
-  recommendedArticles,
-}: ArticlePageProps) {
+export default function ArticlePage({ article, grant }: ArticlePageProps) {
   const seoMetadata = getSeoMetadata(article);
 
   return (
@@ -50,13 +43,8 @@ export default function ArticlePage({
           }}
         />
 
-        <div className="max-w-screen-lg mx-auto mt-16 prose text-black">
-          <ArticleView article={article} />
-          <Tags tags={article?.tags} />
-          <section>
-            <h3>Recommended Articles</h3>
-            <PageGrid data={recommendedArticles} />
-          </section>
+        <div className="prose mx-4 mt-16 text-black sm:mx-6 lg:mx-auto">
+          <ArticleView article={article} onlyContent />
         </div>
       </Layout>
     </PantheonProvider>

diff --git a/starters/nextjs-starter-ts/tailwind.config.cjs b/starters/nextjs-starter-ts/tailwind.config.cjs
@@ -9,9 +9,36 @@ module.exports = {
       typography: () => ({
         DEFAULT: {
           css: {
+            maxWidth: "80ch",
+            img: {
+              borderRadius: "1rem",
+              maxWidth: "none !important",
+              maxHeight: "none !important",
+              aspectRatio: "3/2",
+              marginTop: "4rem !important",
+              marginBottom: "4rem !important",
+            },
             a: {
               color: "rgb(17, 85, 204)", // "dark cornflower blue 2" in Google Docs
             },
+            h1: {
+              fontSize: "3rem",
+            },
+            h2: {
+              fontSize: "2.25rem",
+            },
+            h3: {
+              fontSize: "1.875rem",
+            },
+            h4: {
+              fontSize: "1.5rem",
+            },
+            h5: {
+              fontSize: "1.25rem",
+            },
+            h6: {
+              fontSize: "1rem",
+            },
           },
         },
       }),

diff --git a/starters/nextjs-starter/components/article-view.jsx b/starters/nextjs-starter/components/article-view.jsx
@@ -6,7 +6,7 @@ import {
 import { useMemo } from "react";
 import { clientSmartComponentMap } from "./smart-components";
 
-export default function ArticleView({ article }) {
+export default function ArticleView({ article, onlyContent }) {
   const { data } = useArticle(
     article.id,
     {
@@ -23,34 +23,36 @@ export default function ArticleView({ article }) {
     [data, article],
   );
 
-  return <StaticArticleView article={hydratedArticle} />;
+  return (
+    <StaticArticleView article={hydratedArticle} onlyContent={onlyContent} />
+  );
 }
 
-export function StaticArticleView({ article }) {
+export function StaticArticleView({ article, onlyContent }) {
   const articleTitle = useArticleTitle(article);
 
   return (
     <>
       <div>
-        <div className="text-3xl font-bold md:text-4xl">{articleTitle}</div>
+        <div className="text-5xl font-bold">{articleTitle}</div>
 
         {article.updatedAt ? (
           <p className="py-2">
-            Last Updated:{" "}
             {new Date(article.updatedAt).toLocaleDateString("en-US", {
               year: "numeric",
               month: "long",
               day: "numeric",
             })}
           </p>
         ) : null}
-
-        <hr className="mt-6 mb-8" />
       </div>
       <ArticleRenderer
         article={article}
         smartComponentMap={clientSmartComponentMap}
-        __experimentalFlags={{ useUnintrusiveTitleRendering: true }}
+        __experimentalFlags={{
+          useUnintrusiveTitleRendering: true,
+          disableAllStyles: !!onlyContent,
+        }}
       />
     </>
   );

diff --git a/starters/nextjs-starter/pages/articles/[...uri].jsx b/starters/nextjs-starter/pages/articles/[...uri].jsx
@@ -5,12 +5,10 @@ import {
 import { NextSeo } from "next-seo";
 import queryString from "query-string";
 import ArticleView from "../../components/article-view";
-import { PageGrid } from "../../components/grid";
 import Layout from "../../components/layout";
-import { Tags } from "../../components/tags";
 import { pantheonAPIOptions } from "../api/pantheoncloud/[...command]";
 
-export default function ArticlePage({ article, grant, recommendedArticles }) {
+export default function ArticlePage({ article, grant }) {
   const seoMetadata = getSeoMetadata(article);
 
   return (
@@ -39,13 +37,8 @@ export default function ArticlePage({ article, grant, recommendedArticles }) {
           }}
         />
 
-        <div className="max-w-screen-lg mx-auto mt-16 prose text-black">
-          <ArticleView article={article} />
-          <Tags tags={article?.tags} />
-          <section>
-            <h3>Recommended Articles</h3>
-            <PageGrid data={recommendedArticles} />
-          </section>
+        <div className="prose mx-4 mt-16 text-black sm:mx-6 lg:mx-auto">
+          <ArticleView article={article} onlyContent />
         </div>
       </Layout>
     </PantheonProvider>

diff --git a/starters/nextjs-starter/tailwind.config.cjs b/starters/nextjs-starter/tailwind.config.cjs
@@ -9,9 +9,36 @@ module.exports = {
       typography: () => ({
         DEFAULT: {
           css: {
+            maxWidth: "80ch",
+            img: {
+              borderRadius: "1rem",
+              maxWidth: "none !important",
+              maxHeight: "none !important",
+              aspectRatio: "3/2",
+              marginTop: "4rem !important",
+              marginBottom: "4rem !important",
+            },
             a: {
               color: "rgb(17, 85, 204)", // "dark cornflower blue 2" in Google Docs
             },
+            h1: {
+              fontSize: "3rem",
+            },
+            h2: {
+              fontSize: "2.25rem",
+            },
+            h3: {
+              fontSize: "1.875rem",
+            },
+            h4: {
+              fontSize: "1.5rem",
+            },
+            h5: {
+              fontSize: "1.25rem",
+            },
+            h6: {
+              fontSize: "1rem",
+            },
           },
         },
       }),