Date: Wed, 8 Feb 2023 19:42:16 +0000
Subject: [PATCH] Initial commit
Created from https://vercel.com/new
---
.gitignore | 37 +
README.md | 30 +
components/ArrowIcon.js | 20 +
components/CustomLink.js | 11 +
components/Footer.js | 87 +
components/Header.js | 14 +
components/Layout.js | 24 +
components/Layout.module.css | 46 +
components/SEO.js | 11 +
components/wizard/RecapBar.js | 183 ++
components/wizard/Steps.js | 153 ++
components/wizard/elements.js | 88 +
components/wizard/index.js | 82 +
netlify.toml | 2 +
package.json | 32 +
pages/_app.js | 19 +
pages/_document.js | 58 +
pages/index.js | 67 +
pages/posts/[slug].js | 129 +
postcss.config.js | 8 +
posts/another-post-in-the-wall.mdx | 11 +
posts/example-post.mdx | 210 ++
posts/hello-world.mdx | 7 +
posts/one-more-post.mdx | 7 +
posts/test-post.mdx | 7 +
styles/globals.css | 17 +
tailwind.config.js | 9 +
themes.js | 53 +
utils/globalData.js | 8 +
utils/mdxUtils.js | 91 +
utils/tailwind-preset.js | 106 +
yarn.lock | 3965 ++++++++++++++++++++++++++++
32 files changed, 5592 insertions(+)
create mode 100644 .gitignore
create mode 100644 README.md
create mode 100644 components/ArrowIcon.js
create mode 100644 components/CustomLink.js
create mode 100644 components/Footer.js
create mode 100644 components/Header.js
create mode 100644 components/Layout.js
create mode 100644 components/Layout.module.css
create mode 100644 components/SEO.js
create mode 100644 components/wizard/RecapBar.js
create mode 100644 components/wizard/Steps.js
create mode 100644 components/wizard/elements.js
create mode 100644 components/wizard/index.js
create mode 100644 netlify.toml
create mode 100644 package.json
create mode 100644 pages/_app.js
create mode 100644 pages/_document.js
create mode 100644 pages/index.js
create mode 100644 pages/posts/[slug].js
create mode 100644 postcss.config.js
create mode 100644 posts/another-post-in-the-wall.mdx
create mode 100644 posts/example-post.mdx
create mode 100644 posts/hello-world.mdx
create mode 100644 posts/one-more-post.mdx
create mode 100644 posts/test-post.mdx
create mode 100644 styles/globals.css
create mode 100644 tailwind.config.js
create mode 100644 themes.js
create mode 100644 utils/globalData.js
create mode 100644 utils/mdxUtils.js
create mode 100644 utils/tailwind-preset.js
create mode 100644 yarn.lock
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..67f2423
--- /dev/null
+++ b/.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
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..d25099e
--- /dev/null
+++ 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/ArrowIcon.js b/components/ArrowIcon.js
new file mode 100644
index 0000000..a494b0f
--- /dev/null
+++ b/components/ArrowIcon.js
@@ -0,0 +1,20 @@
+export default function ArrowIcon({ className, color = "text-primary" }) {
+ return (
+
+
+ );
+}
diff --git a/components/CustomLink.js b/components/CustomLink.js
new file mode 100644
index 0000000..6e3e2ea
--- /dev/null
+++ b/components/CustomLink.js
@@ -0,0 +1,11 @@
+import Link from "next/link";
+
+export default function CustomLink({ as, href, ...otherProps }) {
+ return (
+ <>
+
+
+
+
+
+
+
+
+);
+
+const moonIcon = (
+
+
+);
+
+const ThemeSwitcher = () => {
+ return (
+
+ {
+ window.__setPreferredTheme("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}
+
+
+ {
+ window.__setPreferredTheme("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}
+
+
+ );
+};
+
+export default function Footer({ copyrightText }) {
+ return (
+
+
+ {copyrightText}
+
+
+ );
+}
diff --git a/components/Header.js b/components/Header.js
new file mode 100644
index 0000000..04d449d
--- /dev/null
+++ b/components/Header.js
@@ -0,0 +1,14 @@
+import Link from "next/link";
+
+export default function Header({ name }) {
+ return (
+
+ );
+}
diff --git a/components/Layout.js b/components/Layout.js
new file mode 100644
index 0000000..090e373
--- /dev/null
+++ b/components/Layout.js
@@ -0,0 +1,24 @@
+import classNames from "classnames";
+import styles from "./Layout.module.css";
+
+export function GradientBackground({ variant, className }) {
+ const classes = classNames(
+ {
+ [styles.colorBackground]: variant === "large",
+ [styles.colorBackgroundBottom]: variant === "small",
+ },
+ className
+ );
+
+ return
;
+}
+
+export default function Layout({ children }) {
+ return (
+
+ );
+}
diff --git a/components/Layout.module.css b/components/Layout.module.css
new file mode 100644
index 0000000..a2b4a7e
--- /dev/null
+++ b/components/Layout.module.css
@@ -0,0 +1,46 @@
+.colorBackground {
+ left: 50%;
+ transform: translateX(-50%);
+ background: radial-gradient(
+ at 71% 77%,
+ var(--color-gradient-1) 0,
+ transparent 21%
+ ),
+ radial-gradient(at 36% 47%, var(--color-gradient-3) 0, transparent 50%),
+ radial-gradient(at 54% 29%, var(--color-gradient-3) 0, transparent 28%),
+ radial-gradient(at 45% 51%, var(--color-gradient-1) 0, transparent 53%),
+ radial-gradient(at 73% 44%, var(--color-gradient-2) 0, transparent 54%),
+ radial-gradient(at 24% 7%, var(--color-gradient-2) 0, transparent 40%),
+ radial-gradient(at 76% 46%, var(--color-gradient-1) 0, transparent 50%);
+ /* mix-blend-mode: normal; */
+ max-height: 800px;
+ height: 80vh;
+ max-width: 1400px;
+ width: 70vw;
+ width: 100%;
+ filter: blur(44px);
+ z-index: -1;
+}
+
+.colorBackgroundBottom {
+ left: 50%;
+ transform: translateX(-50%) rotate(190deg);
+ background: radial-gradient(
+ at 83% 25%,
+ var(--color-gradient-1) 0,
+ transparent 21%
+ ),
+ radial-gradient(at 36% 47%, var(--color-gradient-3) 0, transparent 50%),
+ radial-gradient(at 79% 45%, var(--color-gradient-3) 0, transparent 28%),
+ radial-gradient(at 66% 38%, var(--color-gradient-1) 0, transparent 53%),
+ radial-gradient(at 89% 13%, var(--color-gradient-2) 0, transparent 54%),
+ radial-gradient(at 24% 7%, var(--color-gradient-2) 0, transparent 40%),
+ radial-gradient(at 76% 46%, var(--color-gradient-1) 0, transparent 50%);
+ /* mix-blend-mode: normal; */
+ height: 600px;
+ max-width: 900px;
+ width: 55vw;
+ width: 100%;
+ filter: blur(44px);
+ z-index: -1;
+}
diff --git a/components/SEO.js b/components/SEO.js
new file mode 100644
index 0000000..e16c65f
--- /dev/null
+++ b/components/SEO.js
@@ -0,0 +1,11 @@
+import Head from "next/head";
+
+export default function SEO({ title, description }) {
+ return (
+
+ {title}
+
+ {!open &&
}
+
+ {(menuIsOpen || open) && (
+
+ {Object.keys(COLOR_THEMES).map((theme) => {
+ return (
+ handleClick(e, theme)}
+ />
+ );
+ })}
+
+ )}
+
+
+);
+
+export function FontSwitcher({ cssVariable, setData, data }) {
+ const handleFontChange = (e) => {
+ let { value } = e.target;
+
+ let root = document.documentElement;
+ setData((prevData) => ({ ...prevData, [cssVariable]: value }));
+ root.style.setProperty(cssVariable, FONT_THEMES[value]);
+ };
+
+ return (
+
+
+ sans-serif
+ serif
+ monospace
+
+ {arrowIcon}
+
+ );
+}
+export default function RecapBar({ data, setData, onClickNext }) {
+ const [menuIsOpen, setMenuIsOpen] = useState(false);
+ const blogTheme = data.theme || "default";
+ const deployUrl = `https://app.netlify.com/start/deploy?repository=https://github.com/netlify-templates/nextjs-blog-theme#BLOG_NAME=${data.name}&BLOG_TITLE=${data.blogTitle}&BLOG_FOOTER_TEXT=${data.footerText}&BLOG_THEME=${blogTheme}&BLOG_FONT_HEADINGS=${data["--font-primary"]}&BLOG_FONT_PARAGRAPHS=${data["--font-secondary"]}`;
+
+ return (
+
+
+
+
+ Content
+
+
onClickNext(e, 1)}
+ href="/?step=1"
+ className="border border-gray-200 shadow-md bg-white text-gray-800 dark:text-white dark:bg-gray-700 dark:border-gray-500"
+ >
+ Edit Content
+
+
+
+
+ Headings
+
+
+ Paragraphs
+
+
+
+
+
+ Create new blog
+
+ Use this simple wizard to create a new blog.
+ Next.js , Tailwind 3.0 {" "}
+ and MDX . Netlify .
+
+
+ );
+}
+
+export function Step2({ onClickNext, step, data, handleInput }) {
+ return (
+
+ Welcome to the wizard
+ Fill in some content
+
+
+ );
+}
+
+export function Step3({ onClickNext, step, data, setData }) {
+ return (
+
+ Howdy, {data.name}
+ Choose your vibe
+
+ Color scheme
+
+
+ );
+}
+
+export function Step4({ onClickNext, step, data, setData }) {
+ return (
+
+ Howdy, {data.name}
+ Choose fonts
+
+
+ Headings
+
+
+ Paragraphs
+
+
+ );
+}
+
+export function Step5({
+ posts,
+ data,
+ setData,
+ page,
+ handleInput,
+ onClickNext,
+}) {
+ return (
+
+ {page}
+
+ );
+}
diff --git a/components/wizard/elements.js b/components/wizard/elements.js
new file mode 100644
index 0000000..293c3fd
--- /dev/null
+++ b/components/wizard/elements.js
@@ -0,0 +1,88 @@
+import classNames from "classnames";
+
+const TOTAL_STEPS = 6;
+
+export const NetlifyLogo = ({ className }) => (
+
+
+);
+
+export const WizardTitle = ({ children }) => (
+ {children}
+);
+
+export const WizardProgressBar = ({ value }) => {
+ return (
+
+ );
+};
+
+export const WizardContent = ({ children, step }) => (
+
+);
+
+export const WizardLabel = ({ as: Component = "p", children, ...rest }) => (
+
+ {children}
+
+);
+
+export const WizardInput = ({ label, id, ...rest }) => (
+
+ {label && id && (
+
+ {label}
+
+ )}
+
+);
+
+export const WizardButton = ({
+ as: Component = "button",
+ children,
+ icon,
+ className,
+ ...rest
+}) => {
+ const classes = classNames({
+ "text-white py-4 px-6 rounded-xl hover:bg-opacity-80 transition max-w-[17rem] mx-auto flex items-center w-full justify-around": true,
+ "bg-primary": !className?.includes("bg-"),
+ [className]: !!className,
+ });
+
+ return (
+
+ {children}
+ {icon && {icon}
}
+
+ );
+};
+
+export const WizardPreheader = ({ children }) => (
+
+ {children}
+
+);
diff --git a/components/wizard/index.js b/components/wizard/index.js
new file mode 100644
index 0000000..1ffae95
--- /dev/null
+++ b/components/wizard/index.js
@@ -0,0 +1,82 @@
+import React, { useContext, useEffect, useState } from "react";
+import { useRouter } from "next/router";
+import { GradientBackground } from "../Layout";
+
+import { Step1, Step2, Step3, Step4, Step5 } from "./Steps";
+import SEO from "../SEO";
+
+export const WizardContext = React.createContext({});
+
+export default function Wizard(props) {
+ const router = useRouter();
+
+ const { data, setData } = useContext(WizardContext);
+ const [step, setStep] = useState(0);
+
+ useEffect(() => {
+ const { step: queryStep } = router.query;
+
+ if (queryStep) {
+ setStep(parseInt(queryStep));
+ } else {
+ if (!data.isDone) {
+ setStep(0);
+ }
+ }
+ }, [router.query.step]);
+
+ useEffect(() => {
+ if (step >= 4) {
+ setData((prevData) => ({ ...prevData, isDone: true }));
+ } else {
+ setData((prevData) => ({ ...prevData, isDone: false }));
+ }
+ }, [step]);
+
+ const onClickNext = (e, nextStep) => {
+ e.preventDefault();
+ router.push(`/?step=${nextStep || step + 1}`);
+ };
+
+ const onClickBack = (e) => {
+ e.preventDefault();
+ router.push(`/?step=${step - 1}`);
+ };
+
+ const handleInput = (event) => {
+ const target = event.target;
+ const value = target.type === "checkbox" ? target.checked : target.value;
+ const name = target.name;
+
+ setData((prevState) => ({ ...prevState, [name]: value }));
+ };
+
+ const steps = [Step1, Step2, Step3, Step4, Step5];
+ const Step = steps[data.isDone ? 4 : step];
+
+ return (
+ <>
+
+
+ {!data.isDone && (
+
+
+ );
+}
+
+export default MyApp;
diff --git a/pages/_document.js b/pages/_document.js
new file mode 100644
index 0000000..f32948a
--- /dev/null
+++ b/pages/_document.js
@@ -0,0 +1,58 @@
+import React from "react";
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
+ render() {
+ return (
+
+
+
+
+