Initial commit

Author: csehg0312

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "prettier"]
+}

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# netlify
+.netlify

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  printWidth: 80,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  useTabs: false,
+};

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 nextjs-blog-theme
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,108 @@
+![Netlify Next.js Blog Template designed by Bejamas](https://user-images.githubusercontent.com/43764894/223762618-62742b4e-9424-44a7-8e85-9f7e4e19db54.png)
+
+
+[![Deploy to Netlify Button](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/nextjs-blog-theme)
+
+
+A customizable blog starter using:
+
+- [Next.js](https://github.com/vercel/next.js) v14 (Pages Router)
+- [Tailwind](https://tailwindcss.com/) v3.0
+- Built-in [MDX](https://mdxjs.com/) v1 support
+- Includes modern design with dark & light themes
+
+![Preview of blog theme. Author named Jay Doe and blog's name is "Next.js Blog Theme" with one blog post](nextjs-blog-theme-preview.png)
+
+[Take a gander at the demo.](https://bejamas-nextjs-blog.netlify.app)
+
+[Click here to watch the template walkthrough!](https://www.youtube.com/watch?v=63QZHs259dY)
+
+## Table of Contents:
+
+- [Getting Started](#getting-started)
+  - [Setting Up Locally](#setting-up-locally)
+  - [Using the Wizard](#using-the-setup-wizard)
+- [Configuring the Blog](#configuring-the-blog)
+- [Adding New Posts](#adding-new-posts)
+- [Testing](#testing)
+  - [Included Default Testing](#included-default-testing)
+  - [Removing Renovate](#removing-renovate)
+
+## Getting Started
+
+---
+
+You can get started with this project in two ways: locally or using the [setup wizard](https://nextjs-wizard.netlify.app/).
+
+### Setting Up Locally
+
+If you're doing it locally, start with clicking the [use this template](https://github.com/netlify-templates/nextjs-blog-theme/generate) button on GitHub. This will create a new repository with this template's files on your GitHub account. Once that is done, clone your new repository and navigate to it in your terminal.
+
+From there, you can install the project's dependencies by running:
+
+```shell
+yarn install
+```
+
+Finally, you can run your project locally with:
+
+```shell
+yarn run dev
+```
+
+Open your browser and visit <http://localhost:3000>, your project should be running!
+
+### Using the Setup Wizard
+
+![Preview of Setup Wizard showing the initial page of a setup form](nextjs-setup-wizard.png)
+
+Through the [setup wizard](https://nextjs-wizard.netlify.app/), you can create your blog in a few clicks and deploy to Netlify.
+
+## Configuring the blog
+
+The config is based on environment variables to make it easy to integrate with any Jamstack platform, like Netlify.
+
+Here are the variables you can edit:
+| Variable | Description | Options
+| --- | --- | --- |
+| `BLOG_NAME` | the name of your blog, displayed below the avatar ||
+| `BLOG_TITLE` | the main header (`h1`) on the home page ||
+| `BLOG_FOOTER_TEXT`| the text in the footer ||
+| `BLOG_THEME` | the theme to pass to Tailwind | default |
+| `BLOG_FONT_HEADINGS` | the font-family for all HTML headings, from `h1` to `h6`| sans-serif (default), serif, monospace|
+| `BLOG_FONT_PARAGRAPHS` | the font-family for all other HTML elements | sans-serif (default), serif, monospace|
+
+All of the env variables can be configured through the [Wizard](https://nextjs-wizard.netlify.app/) or through setting the project's environment variables. You can do this in your Netlify dashaboard (Site settings/Build & deploy/Environment/Environment variables).
+
+https://user-images.githubusercontent.com/3611928/153997545-6dcdeef0-e570-49e7-93d6-ce0d393d16c9.mp4
+
+[alt: video walkthrough of editing env vars]
+
+If setting an environment variable isn't your cup of tea, the defaults can be changed in [`utils/global-data.js`](/utils/global-data.js). You can also remove the variables and hard code blog information where these variables are used in the code base.
+
+- `BLOG_THEME, BLOG_FONT_HEADINGS, & BLOG_FONT_PARAGRAPHS` are used in [`tailwind-preset.js`](tailwind-preset.js)
+- `BLOG_NAME, BLOG_TITLE, BLOG_FOOTER_TEXT` are used in [`pages/index.js`](pages/index.js) & [`pages/posts/[slug].js`](pages/posts/[slug].js) through the `globalData` object.
+
+## Adding new posts
+
+All posts are stored in `/posts` directory. To make a new post, create a new file with the [`.mdx` extension](https://mdxjs.com/).
+
+Since the posts are written in `MDX` format you can pass props and components. That means you can use [React components](https://reactjs.org/docs/components-and-props.html) inside your posts to make them more interactive. Learn more about how to do so in the [MDX docs on content](https://mdxjs.com/docs/using-mdx/#components).
+
+https://user-images.githubusercontent.com/3611928/152727802-102ec296-41c8-446d-93ed-922d11187073.mp4
+
+[alt: video walkthrough of adding a new blog post]
+
+## Testing
+
+### Included Default Testing
+
+We’ve included some tooling that helps us maintain these templates. This template currently uses:
+
+- [Renovate](https://www.mend.io/free-developer-tools/renovate/) - to regularly update our dependencies
+
+If your team is not interested in this tooling, you can remove them with ease!
+
+### Removing Renovate
+
+In order to keep our project up-to-date with dependencies we use a tool called [Renovate](https://github.com/marketplace/renovate). If you’re not interested in this tooling, delete the `renovate.json` file and commit that onto your main branch.

components/ArrowIcon.js

@@ -0,0 +1,20 @@
+export default function ArrowIcon({ className, color = 'text-primary' }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      fill="none"
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        className={`stroke-current ${color}`}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M5 12h14M12 19l7-7-7-7"
+      ></path>
+    </svg>
+  );
+}

components/CustomLink.js

@@ -0,0 +1,9 @@
+import Link from 'next/link';
+
+export default function CustomLink({ as, href, ...otherProps }) {
+  return <>
+    <Link as={as} href={href} {...otherProps}>
+
+    </Link>
+  </>;
+}

components/Footer.js

@@ -0,0 +1,89 @@
+const sunIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="24"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="dark:opacity-50"
+  >
+    <g
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      clipPath="url(#clip0_192_823)"
+    >
+      <path d="M12.5 17a5 5 0 100-10 5 5 0 000 10zM12.5 1v2M12.5 21v2M4.72 4.22l1.42 1.42M18.86 18.36l1.42 1.42M1.5 12h2M21.5 12h2M4.72 19.78l1.42-1.42M18.86 5.64l1.42-1.42"></path>
+    </g>
+    <defs>
+      <clipPath id="clip0_192_823">
+        <path
+          className="fill-current text-white"
+          d="M0 0H24V24H0z"
+          transform="translate(.5)"
+        ></path>
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+const moonIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="20"
+    fill="none"
+    viewBox="0 0 21 20"
+  >
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      className="stroke-current text-gray-400 dark:text-white"
+      d="M19.5 10.79A9 9 0 119.71 1a7 7 0 009.79 9.79v0z"
+    ></path>
+  </svg>
+);
+
+const ThemeSwitcher = () => {
+  return (
+    <div className="flex mt-6 bg-white justify-center dark:bg-gray-900 rounded-3xl p-1">
+      <button
+        type="button"
+        aria-label="Use Dark Mode"
+        onClick={() => {
+          document.documentElement.classList.add('dark');
+          localStorage.setItem('theme', 'dark');
+        }}
+        className="flex items-center h-full pr-2 dark:bg-primary rounded-3xl flex justify-center align-center p-2 w-24 h-10 transition"
+      >
+        {moonIcon}
+      </button>
+
+      <button
+        type="button"
+        aria-label="Use Light Mode"
+        onClick={() => {
+          document.documentElement.classList.remove('dark');
+          localStorage.setItem('theme', 'light');
+        }}
+        className="flex items-center h-full pr-2 bg-primary dark:bg-transparent rounded-3xl flex justify-center align-center p-2 w-24 h-10 transition"
+      >
+        {sunIcon}
+      </button>
+    </div>
+  );
+};
+
+export default function Footer({ copyrightText }) {
+  return (
+    <footer className="py-16 flex flex-col items-center">
+      <p className="dark:text-white uppercase mb-3 font-bold opacity-60">
+        {copyrightText}
+      </p>
+      <ThemeSwitcher />
+    </footer>
+  );
+}

components/Header.js

@@ -0,0 +1,14 @@
+import Link from 'next/link';
+
+export default function Header({ name }) {
+  return (
+    <header className="pt-20 pb-12">
+      <div className="w-12 h-12 rounded-full block mx-auto mb-4 bg-gradient-conic from-gradient-3 to-gradient-4" />
+      <p className="text-2xl dark:text-white text-center">
+        <Link href="/">
+          {name}
+        </Link>
+      </p>
+    </header>
+  );
+}

components/Layout.js

@@ -0,0 +1,59 @@
+import classNames from 'classnames';
+import { useEffect } from 'react';
+import styles from './Layout.module.css';
+
+export function GradientBackground({ variant, className }) {
+  const classes = classNames(
+    {
+      [styles.colorBackground]: variant === 'large',
+      [styles.colorBackgroundBottom]: variant === 'small',
+    },
+    className
+  );
+
+  return <div className={classes} />;
+}
+
+export default function Layout({ children }) {
+  const setAppTheme = () => {
+    const darkMode = localStorage.getItem('theme') === 'dark';
+    const lightMode = localStorage.getItem('theme') === 'light';
+
+    if (darkMode) {
+      document.documentElement.classList.add('dark');
+    } else if (lightMode) {
+      document.documentElement.classList.remove('dark');
+    }
+    return;
+  };
+
+  const handleSystemThemeChange = () => {
+    var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+
+    darkQuery.onchange = (e) => {
+      if (e.matches) {
+        document.documentElement.classList.add('dark');
+        localStorage.setItem('theme', 'dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+        localStorage.setItem('theme', 'light');
+      }
+    };
+  };
+
+  useEffect(() => {
+    setAppTheme();
+  }, []);
+
+  useEffect(() => {
+    handleSystemThemeChange();
+  }, []);
+
+  return (
+    <div className="relative pb-24 overflow-hidden">
+      <div className="flex flex-col items-center max-w-2xl w-full mx-auto">
+        {children}
+      </div>
+    </div>
+  );
+}