Initial commit

Created from https://vercel.com/new

.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

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.

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,11 @@
+import Link from "next/link";
+
+export default function CustomLink({ as, href, ...otherProps }) {
+  return (
+    <>
+      <Link as={as} href={href}>
+        <a {...otherProps} />
+      </Link>
+    </>
+  );
+}

components/Footer.js

@@ -0,0 +1,87 @@
+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={() => {
+          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}
+      </button>
+
+      <button
+        type="button"
+        aria-label="Use Light Mode"
+        onClick={() => {
+          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}
+      </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="/">
+          <a>{name}</a>
+        </Link>
+      </p>
+    </header>
+  );
+}

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 <div className={classes} />;
+}
+
+export default function Layout({ children }) {
+  return (
+    <div className="relative pb-24">
+      <div className="flex flex-col items-center max-w-2xl w-full mx-auto">
+        {children}
+      </div>
+    </div>
+  );
+}

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;
+}

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>
+  );
+}