✨ Initial commit

Author: craigary

.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+    node: true
+  },
+  extends: [
+    'plugin:react/recommended',
+    'standard'
+  ],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true
+    },
+    ecmaVersion: 12,
+    sourceType: 'module'
+  },
+  plugins: [
+    'react'
+  ],
+  rules: {
+  },
+  globals: {
+    React: true
+  }
+}

.gitignore

@@ -0,0 +1,34 @@
+# 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

README.md

@@ -0,0 +1,34 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

blog.config.js

@@ -0,0 +1,18 @@
+const BLOG = {
+  title: 'CRAIGARY',
+  description: 'This gonna be an awesome website.',
+  author: 'Craig Hart',
+  email: '[email protected]',
+  link: 'https://craigary.net',
+  lang: 'en-US',
+  path: '', // leave this empty unless you want to deploy Nobelium in a folder
+  since: 2015, // if leave this empty, current year will be used.
+  postsPerPage: 7,
+  showAbout: true, // WIP
+  showArchive: true, // WIP
+  socialLink: 'https://twitter.com/craigaryhart',
+  notionApiEndPoint: process.env.NOTION_API_ENDPOINT,
+  notionPageId: process.env.NOTION_PAGE_ID
+}
+
+export default BLOG

components/BlogPost.js

@@ -0,0 +1,23 @@
+import Link from 'next/link'
+import BLOG from '@/blog.config'
+import formatDate from '@/lib/formatDate'
+
+const BlogPost = ({ post }) => {
+  return (
+    <article key={post.id} className="mb-6 md:mb-8">
+      <header className="flex flex-col justify-between md:flex-row ">
+        <Link href={`${BLOG.path}/${post.slug}`}>
+          <h2 className="font-sans text-lg md:text-xl font-medium mb-2 cursor-pointer">
+            <a>{post.title}</a>
+          </h2>
+        </Link>
+        <time className="flex-shrink-0 text-gray-600">{formatDate(post.date, BLOG.lang)}</time>
+      </header>
+      <main>
+        <p className="hidden md:block text-gray-700 leading-7">{post.summary}</p>
+      </main>
+    </article>
+  )
+}
+
+export default BlogPost

components/Container.js

@@ -0,0 +1,36 @@
+import Header from '@/components/Header'
+import Footer from '@/components/Footer'
+import BLOG from '@/blog.config'
+import Head from 'next/head'
+import PropTypes from 'prop-types'
+
+const Container = ({ children, layout, ...customMeta }) => {
+  const meta = {
+    title: BLOG.title,
+    type: 'website',
+    ...customMeta
+  }
+  return (
+    <div>
+      <Head>
+        {/* Add more Meta Info */}
+        <title>{meta.title}</title>
+        <meta name="robots" content="follow, index" />
+        <meta content={meta.summary} name="description" />
+      </Head>
+      <div className="wrapper">
+      <Header navBarTitle={layout === 'blog' ? meta.title : null} />
+      <main className="m-auto max-w-3xl px-4 font-sans flex-grow w-full">
+      {children}
+      </main>
+      <Footer />
+      </div>
+    </div>
+  )
+}
+
+Container.propTypes = {
+  children: PropTypes.node
+}
+
+export default Container

components/Footer.js

@@ -0,0 +1,16 @@
+import BLOG from '@/blog.config'
+const Footer = () => {
+  const d = new Date()
+  const y = d.getFullYear()
+  return (
+    <div className="mt-6 flex-shrink-0 m-auto max-w-3xl px-4 font-sans w-full text-gray-600">
+      <hr />
+      <div className="my-4 text-sm">
+        <p>Built with ♥ and ⚛ Next.js. Proudly deployed on ▲Vercel.</p>
+        <p>©{BLOG.since ? `${BLOG.since} - ${y}` : y} {BLOG.author}</p>
+      </div>
+    </div>
+  )
+}
+
+export default Footer

components/Header.js

@@ -0,0 +1,78 @@
+import { useEffect, useRef } from 'react'
+import Link from 'next/link'
+import Image from 'next/image'
+import BLOG from '@/blog.config'
+
+const NavBar = () => {
+  const links = [
+    { id: 1, name: 'Blog', to: BLOG.path || '/' },
+    { id: 2, name: 'RSS', to: '/feed' },
+    { id: 3, name: 'Search', to: '/search' }
+  ]
+  return (
+    <div>
+      <ul className="flex flex-row font-sans">
+        {links.map(link => (
+          <li key={link.id} className="block ml-4">
+            <Link href={link.to}>
+              <a>{link.name}</a>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+const Header = ({ navBarTitle }) => {
+  const navRef = useRef(null)
+  const sentinalRef = useRef(null)
+  const handler = ([entry]) => {
+    if (navRef && navRef.current) {
+      if (!entry.isIntersecting && entry !== undefined) {
+        navRef.current.classList.add('sticky-nav-full')
+      } else {
+        navRef.current.classList.remove('sticky-nav-full')
+      }
+    }
+  }
+  useEffect(() => {
+    const obvserver = new window.IntersectionObserver(handler)
+    obvserver.observe(sentinalRef.current)
+    // Don't touch this, I have no idea how it works XD
+    // return () => {
+    //   if (sentinalRef.current) obvserver.unobserve(sentinalRef.current)
+    // }
+  }, [sentinalRef])
+  return (
+    <>
+      <div className="observer-element h-4 md:h-12" ref={sentinalRef}></div>
+      <div
+        className="sticky-nav m-auto max-w-3xl w-full h-6 flex flex-row justify-between items-center mb-1 md:mb-8 px-4 py-8 bg-opacity-60"
+        id="sticky-nav"
+        ref={navRef}
+      >
+        <div className="flex">
+          <Link href="/">
+            <div className="h-6">
+              <Image src="/logo.svg" width={24} height={24} alt="Craigary" />
+            </div>
+          </Link>
+          {navBarTitle
+            ? (
+            <p className="ml-2 italic header-name font-medium">{navBarTitle}</p>
+              )
+            : (
+            <p className="ml-2 italic header-name font-medium">
+              {BLOG.title},{' '}
+              <span className="font-normal">{BLOG.description}</span>
+            </p>
+              )}
+        </div>
+        <NavBar />
+      </div>
+    </>
+  )
+}
+
+export default Header

components/Pagination.js

@@ -0,0 +1,22 @@
+import Link from 'next/link'
+import BLOG from '@/blog.config'
+
+const Pagination = ({ totalPages, page }) => {
+  const currentPage = +page
+  return (
+    <div className="flex justify-between">
+      <Link href={ currentPage - 1 === 1 ? `${BLOG.path || '/'}` : `/page/${currentPage - 1}`}>
+        <p className={currentPage === 1 ? 'invisible' : 'block'}>
+          <a rel="prev">← Prev</a>
+        </p>
+      </Link>
+      <Link href={`/page/${currentPage + 1}`}>
+        <p className={currentPage === totalPages ? 'invisible' : 'block'}>
+          <a rel="next">Next →</a>
+        </p>
+      </Link>
+    </div>
+  )
+}
+
+export default Pagination

components/Tags.js

@@ -0,0 +1,23 @@
+import { useState } from 'react'
+
+const Tags = ({ tags, handleTagClick, selectedTag }) => {
+  // const colorPalette = ['yellow-400', 'blue-400', 'purple-400', 'pink s-400']
+  // const color = colorPalette[Math.floor(Math.random() * colorPalette.length)]
+  // const ClassToReturn = `border-${color} text-${color} bg-${color}`
+  if (!tags) return null
+  return (
+    <ul className="flex max-w-full overflow-x-auto">
+      {Object.keys(tags).map(key => (
+        <li
+          key={key}
+          onClick={() => handleTagClick(key)}
+          className={`mr-2 px-2 py-1 my-3 cursor-pointer rounded-full border-2 bg-opacity-0 border-blue-400 text-blue-400 bg-blue-400 whitespace-nowrap ${key === selectedTag ? 'bg-opacity-30' : ''}`}
+        >
+          {`${key} (${tags[key]})`}
+        </li>
+      ))}
+    </ul>
+  )
+}
+
+export default Tags

jsconfig.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"],
+      "@/components/*": ["components/*"],
+      "@/data/*": ["data/*"],
+      "@/layouts/*": ["layouts/*"],
+      "@/lib/*": ["lib/*"],
+      "@/styles/*": ["styles/*"]
+    }
+  }
+}

layouts/blog.js

@@ -0,0 +1,53 @@
+import Image from 'next/image'
+import Container from '@/components/Container'
+import { useRouter } from 'next/router'
+import { NotionRenderer } from 'react-notion'
+import BLOG from '@/blog.config'
+import formatDate from '@/lib/formatDate'
+
+const BlogLayout = ({ children, blocks, frontMatter }) => {
+  const router = useRouter()
+  return (
+    <Container
+      layout="blog"
+      title={frontMatter.title}
+      description={frontMatter.summary}
+      // date={new Date(frontMatter.publishedAt).toISOString()}
+      type="article"
+    >
+      <article>
+        <h1 className="font-sans font-bold text-3xl">{frontMatter.title}</h1>
+        <nav className="flex mt-4 mb-2 items-center text-gray-600">
+          <div className="flex">
+            <a href={BLOG.socialLink} className="flex">
+                <Image
+                  alt={BLOG.author}
+                  width={24}
+                  height={24}
+                  src="/avatar.svg"
+                  className="rounded-full"
+                />
+              <p className="hidden md:ml-2 md:block">{BLOG.author}</p>
+            </a>
+            <span className="hidden md:inline">&nbsp;/&nbsp;</span>
+          </div>
+          <div className="ml-2 md:ml-0">
+            {formatDate(frontMatter.date, BLOG.lang)}
+          </div>
+          {frontMatter.tags.length && (
+          <div className="tag flex ml-2">
+            {frontMatter.tags.map(tag => <p key={tag} className="mr-1 cursor-pointer" onClick={() => router.push(`/tag/${encodeURIComponent(tag)}`)}>#{tag}</p>)}
+        </div>
+          )}
+        </nav>
+        {children}
+        <NotionRenderer blockMap={blocks}/>
+        <p onClick={() => router.back()} className="mt-2">
+          ← Back
+        </p>
+      </article>
+    </Container>
+  )
+}
+
+export default BlogLayout