Merge branch 'main' into wizard

thomkrupa · thomkrupa · commit c339bfba54cf · 2021-12-10T20:00:08.000+01:00
diff --git a/README.md b/README.md
@@ -0,0 +1,30 @@
+# Next.js Blog Theme
+
+A simple blog starter based on Next.js, Tailwind 3.0 and MDX support. Includes modern design with dark and light theme.
+
+[Wizard](https://nextjs-wizard.netlify.app/) - create your own blog in few clicks and deploy on Netlify.
+
+## Configure the blog
+
+The config is based on ENV Variables to make it easy to integrate with any Jamstack platform like Netlify.
+
+Here are the variables you can edit:
+
+- `BLOG_NAME` - that's the name of your blog and will be displayed below the avatar.
+- `BLOG_TITLE` - the main header (`h1`) on the home page, this can be a slogan.
+- `BLOG_FOOTER_TEXT` - the text in the footer, usually copyright info.
+- `BLOG_THEME`
+- `BLOG_FONT_HEADINGS` - the font-family for all HTML headings, from `h1` to `h6`. The value can be one of those:
+  - `sans-serif` (selected by default)
+  - `serif`
+  - `monospace`
+- `BLOG_FONT_PARAGRAPHS` - the font-family for all other HTML elements. The value can be one of those:
+  - `sans-serif` (selected by default)
+  - `serif`
+  - `monospace`
+
+All of the env variables can be configured through the [Wizard](https://nextjs-wizard.netlify.app/).
+
+## Adding new posts
+
+All posts are stored in `posts` directory in `.mdx` format. That means you can use React components there to make your posts more interactive.
diff --git a/components/SEO.js b/components/SEO.js
@@ -0,0 +1,11 @@
+import Head from "next/head";
+
+export default function SEO({ title, description }) {
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      <meta property="og:title" content={title} />
+    </Head>
+  );
+}
diff --git a/netlify.toml b/netlify.toml
@@ -1,10 +1,2 @@
-[build]
-publish = "out"
-
 [[plugins]]
 package = "@netlify/plugin-nextjs"
-
-[template.environment]
-  BLOG_NAME = "set the name of the blog here"
-  BLOG_TITLE = "set the blog title here"
-  BLOG_FOOTER_TEXT = "set the blog footer text here"
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
     "@octokit/auth-token": "^2.5.0",
     "@octokit/core": "^3.5.1",
     "@octokit/plugin-rest-endpoint-methods": "^5.13.0",
-    "@tailwindcss/typography": "^0.4.1",
+    "@tailwindcss/typography": "^0.5.0",
     "classnames": "^2.3.1",
     "github-oauth-popup": "^1.2.0",
     "gray-matter": "^4.0.2",
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "autoprefixer": "^10.4.0",
-    "postcss": "^8.3.11",
-    "tailwindcss": "^2.2.19"
+    "postcss": "^8.4.4",
+    "tailwindcss": "^3.0.0"
   }
 }
diff --git a/pages/index.js b/pages/index.js
@@ -6,10 +6,12 @@ import Header from "../components/Header";
 import Layout, { GradientBackground } from "../components/Layout";
 import ArrowIcon from "../components/ArrowIcon";
 import { getGlobalData } from "../utils/globalData";
+import SEO from "../components/SEO";
 
 export default function Index({ posts, globalData }) {
   return (
     <Layout>
+      <SEO title={globalData.name} description={globalData.blogTitle} />
       <Header name={globalData.name} />
       <main className="w-full">
         <h1 className="text-3xl lg:text-5xl text-center mb-12">
@@ -47,11 +49,11 @@ export default function Index({ posts, globalData }) {
       <Footer copyrightText={globalData.footerText} />
       <GradientBackground
         variant="large"
-        className="fixed left-0 top-20 opacity-40 dark:opacity-60"
+        className="fixed top-20 opacity-40 dark:opacity-60"
       />
       <GradientBackground
         variant="small"
-        className="absolute left-0 bottom-0 opacity-20 dark:opacity-10"
+        className="absolute bottom-0 opacity-20 dark:opacity-10"
       />
     </Layout>
   );
diff --git a/pages/posts/[slug].js b/pages/posts/[slug].js
@@ -14,6 +14,7 @@ import CustomLink from "../../components/CustomLink";
 import Footer from "../../components/Footer";
 import Header from "../../components/Header";
 import Layout, { GradientBackground } from "../../components/Layout";
+import SEO from "../../components/SEO";
 
 // Custom components/renderers to pass to MDX.
 // Since the MDX files aren't loaded by webpack, they have no knowledge of how
@@ -36,6 +37,10 @@ export default function PostPage({
 }) {
   return (
     <Layout>
+      <SEO
+        title={`${frontMatter.title} - ${globalData.name}`}
+        description={frontMatter.description}
+      />
       <Header name={globalData.name} />
       <article className="px-6 md:px-0">
         <header>
@@ -83,11 +88,11 @@ export default function PostPage({
       <Footer copyrightText={globalData.footerText} />
       <GradientBackground
         variant="large"
-        className="absolute left-0 -top-32 opacity-30 dark:opacity-50"
+        className="absolute -top-32 opacity-30 dark:opacity-50"
       />
       <GradientBackground
         variant="small"
-        className="absolute left-0 bottom-0 opacity-20 dark:opacity-10"
+        className="absolute bottom-0 opacity-20 dark:opacity-10"
       />
     </Layout>
   );
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,6 +1,9 @@
 module.exports = {
   mode: "jit",
-  purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx}",
+    "./components/**/*.{js,ts,jsx,tsx}",
+  ],
   darkMode: "class", // or 'media' or 'class'
   presets: [require("./utils/tailwind-preset")],
 };
diff --git a/yarn.lock b/yarn.lock
