Initial commit

.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

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">
+        <Link href="/">
+          <a id="blog-name">{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;
+}

netlify.toml

@@ -0,0 +1,10 @@
+[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"

package.json

@@ -0,0 +1,32 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "dev:watch": "next-remote-watch ./posts",
+    "build": "next build",
+    "start": "next start",
+    "export": "next build && next export"
+  },
+  "dependencies": {
+    "@octokit/auth-oauth-app": "^4.3.0",
+    "@octokit/auth-oauth-user": "^1.3.0",
+    "@octokit/auth-token": "^2.5.0",
+    "@octokit/core": "^3.5.1",
+    "@octokit/plugin-rest-endpoint-methods": "^5.13.0",
+    "@tailwindcss/typography": "^0.4.1",
+    "classnames": "^2.3.1",
+    "github-oauth-popup": "^1.2.0",
+    "gray-matter": "^4.0.2",
+    "next": "latest",
+    "next-mdx-remote": "^3.0.1",
+    "next-remote-watch": "1.0.0",
+    "octokit": "^1.7.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.3.11",
+    "tailwindcss": "^2.2.19"
+  }
+}

pages/_app.js

@@ -0,0 +1,12 @@
+import "../styles/globals.css";
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <>
+      <span className="theme-bejamas" />
+      <Component {...pageProps} />
+    </>
+  );
+}
+
+export default MyApp;

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 (
+      <Html lang="en" className="theme-compiled">
+        <Head />
+        <body
+          className={`antialiased text-lg bg-white dark:bg-gray-900 dark:text-white leading-base`}
+        >
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                (function () {
+                  function setTheme(newTheme) {
+                    window.__theme = newTheme;
+                    if (newTheme === 'dark') {
+                      document.documentElement.classList.add('dark');
+                    } else if (newTheme === 'light') {
+                      document.documentElement.classList.remove('dark');
+                    }
+                  }
+                  var preferredTheme;
+                  try {
+                    preferredTheme = localStorage.getItem('theme');
+                  } catch (err) { }
+                  window.__setPreferredTheme = function(newTheme) {
+                    preferredTheme = newTheme;
+                    setTheme(newTheme);
+                    try {
+                      localStorage.setItem('theme', newTheme);
+                    } catch (err) { }
+                  };
+                  var initialTheme = preferredTheme;
+                  var darkQuery = window.matchMedia('(prefers-color-scheme: dark)');
+                  if (!initialTheme) {
+                    initialTheme = darkQuery.matches ? 'dark' : 'light';
+                  }
+                  setTheme(initialTheme);
+                  darkQuery.addListener(function (e) {
+                    if (!preferredTheme) {
+                      setTheme(e.matches ? 'dark' : 'light');
+                    }
+                  });
+                })();
+              `,
+            }}
+          />
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;