Remove github contribution graph, date-fns & fix footer

components/blog/BlogList.jsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { CalendarIcon } from "@heroicons/react/24/solid";
-import { parseISO, format } from "date-fns";
+import { parseISO } from "../../lib/utils";
 
 export function ListElement({ title, summary, slug, publishedAt, index }) {
  return (
@@ -13,8 +13,8 @@ export function ListElement({ title, summary, slug, publishedAt, index }) {
      <h3 className="mb-1 flex items-center font-inter text-lg font-semibold text-slate-900 dark:text-white">
       {title} {index === 0 && <span className="mr-2 ml-3 rounded bg-blue-200 py-0.5 pr-2.5 pl-1.5 text-sm font-medium dark:bg-white/10">🔥 Latest</span>}
      </h3>
-     <time className="mb-2 block font-inter text-sm font-normal leading-none text-slate-500 dark:text-slate-500" dateTime={parseISO(publishedAt)}>
-      {format(parseISO(publishedAt), "MMMM dd, yyyy")}
+     <time className="mb-2 block font-inter text-sm font-normal leading-none text-slate-500 dark:text-slate-500" dateTime={new Date(publishedAt).toUTCString()}>
+      {parseISO(publishedAt)}
      </time>
     </header>
     <p className="mb-2 font-inter text-base font-normal text-slate-600 dark:text-slate-400">{summary}</p>

components/elements/Footer.jsx

@@ -1,23 +1,18 @@
-import { useState, useEffect, version } from "react";
+import { version } from "react";
 import { footer } from "/config";
 import Link from "next/link";
 
 export function Footer() {
- const [appVersion, setAppVersion] = useState();
- useEffect(() => {
-  setAppVersion(process.env.VERSION);
- }, [appVersion]);
-
  return (
-  <footer className="mt-12 w-full py-10 lg:px-16">
+  <footer className="mt-12 w-full py-10 px-4 md:px-8 lg:px-16">
    <div className="mx-auto pt-10">
-    <div className="gap-20 lg:grid lg:grid-cols-6">
+    <div className="grid grid-cols-2 gap-9 md:grid-cols-6">
      <div className="col-span-3 flex flex-col justify-center">
       <div className="flex items-center space-x-5">
        {/* DO NOT TOUCH THE CODE BELOW! REMEMBER: YOU CAN ADD YOUR NAME AFTER MY NAME */}
        <Link href="/" legacyBehavior>
         <p className="flex cursor-pointer items-center font-inter text-2xl font-semibold">
-         Igor Kowalczyk<span className="bg-gradient-to-r from-[#6310ff] to-[#1491ff] box-decoration-clone bg-clip-text text-fill-transparent dark:from-[#a2facf] dark:to-[#64acff]">.</span> <span className="mx-1 mr-2 rounded-lg bg-black/[7%] px-2 py-1 text-xs dark:bg-white/10">v{appVersion}</span>
+         Igor Kowalczyk<span className="bg-gradient-to-r from-[#6310ff] to-[#1491ff] box-decoration-clone bg-clip-text text-fill-transparent dark:from-[#a2facf] dark:to-[#64acff]">.</span> <span className="mx-1 mr-2 rounded-lg bg-black/[7%] px-2 py-1 text-xs dark:bg-white/10">v{process.env.VERSION}</span>
         </p>
        </Link>
       </div>

components/photography/ImagesList.jsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { CameraIcon } from "@heroicons/react/24/solid";
-import { parseISO, format } from "date-fns";
 import { BlurPreview } from "components/elements/BlurImage";
+import { parseISO } from "../../lib/utils";
 
 export function ListElement({ title, description, slug, publishedAt, index, preview, count }) {
  const preparedPreview = JSON.parse(preview.replaceAll("'", '"'));
@@ -16,8 +16,8 @@ export function ListElement({ title, description, slug, publishedAt, index, prev
      <h3 className="mb-1 flex items-center font-inter text-lg font-semibold text-slate-900 dark:text-white">
       {title} {index === 0 && <span className="mr-2 ml-3 rounded bg-blue-200 px-2.5 py-0.5 font-inter text-sm font-medium dark:bg-white/10">🔥 Latest</span>}
      </h3>
-     <time className="mb-2 block font-inter text-sm font-normal leading-none text-slate-500 dark:text-slate-500" dateTime={parseISO(publishedAt)}>
-      {format(parseISO(publishedAt), "MMMM dd, yyyy")}
+     <time className="mb-2 block font-inter text-sm font-normal leading-none text-slate-500 dark:text-slate-500" dateTime={new Date(publishedAt).toUTCString()}>
+      {parseISO(publishedAt)}
      </time>
     </header>
     <p className=" font-inter text-base font-normal text-slate-600 dark:text-slate-400">{description}</p>

lib/utils.js

@@ -13,3 +13,8 @@ export const ConvertNumber = (number) => {
  }).format(number);
  return formatted;
 };
+
+export const parseISO = (date) => {
+ const formatted = new Date(date);
+ return formatted.toLocaleString("en-us", { month: "long" }) + " " + formatted.getUTCDate() + ", " + formatted.getFullYear();
+};

package.json

@@ -24,7 +24,6 @@
     "@vercel/analytics": "0.1.6",
     "@vercel/og": "0.0.21",
     "contentlayer": "0.2.9",
-    "date-fns": "2.29.3",
     "dotenv": "16.0.3",
     "github-slugger": "2.0.0",
     "graphql": "16.6.0",

pages/api/og.jsx

@@ -1,5 +1,5 @@
 import { ImageResponse } from "@vercel/og";
-import { parseISO, format } from "date-fns";
+import { parseISO } from "../../lib/utils";
 
 const fontPoppinsMedium = fetch(new URL("../../public/fonts/medium.ttf", import.meta.url)).then((res) => res.arrayBuffer());
 const fontPoppinsBold = fetch(new URL("../../public/fonts/bold.ttf", import.meta.url)).then((res) => res.arrayBuffer());
@@ -138,7 +138,7 @@ export default async function handler(req) {
        fontWeight: 300,
       }}
      >
-      {date ? format(parseISO(date), "MMMM dd, yyyy") : "January 01, 1970"}
+      {date ? parseISO(date) : "January 01, 1970"}
      </span>
     </div>
    </div>

pages/blog/[slug].jsx

@@ -5,7 +5,7 @@ import Avatar from "../../public/assets/avatar.png";
 import { Container } from "components/elements/Container";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import { allBlogs } from "contentlayer/generated";
-import { parseISO, format } from "date-fns";
+import { parseISO } from "../../lib/utils";
 import { meta, social } from "/config";
 import { TocItem } from "components/blog/Toc";
 
@@ -25,8 +25,8 @@ export default function Post({ post }) {
         <div>
          <div className="flex items-center">
           <Image alt={meta.title} height={24} width={24} src={Avatar} className="rounded-full" />
-          <time className="ml-2 text-sm text-gray-700 dark:text-gray-300" dateTime={parseISO(post.publishedAt)}>
-           {post.author} / {format(parseISO(post.publishedAt), "MMMM dd, yyyy")}
+          <time className="ml-2 text-sm text-gray-700 dark:text-gray-300" dateTime={new Date(post.publishedAt).toUTCString()}>
+           {post.author} / {parseISO(post.publishedAt)}
           </time>
          </div>
         </div>

pages/photography/[slug].jsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 import { Container } from "components/elements/Container";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import { allPhotographies } from "contentlayer/generated";
-import { parseISO, format } from "date-fns";
+import { parseISO } from "../../lib/utils";
 import { meta } from "/config";
 import { BlurImage } from "components/elements/BlurImage";
 
@@ -22,8 +22,8 @@ export default function Post({ post }) {
        </h1>
        <div className="flex items-center font-inter">
         <Image alt={meta.title} height={24} width={24} src={Avatar} className="rounded-full" />
-        <time className="ml-2 text-base text-gray-700 dark:text-gray-300" dateTime={parseISO(post.publishedAt)}>
-         {post.author} / {format(parseISO(post.publishedAt), "MMMM dd, yyyy")}
+        <time className="ml-2 text-base text-gray-700 dark:text-gray-300" dateTime={new Date(post.publishedAt).toUTCString()}>
+         {post.author} / {parseISO(post.publishedAt)}
         </time>
        </div>
       </div>

pages/repositories.jsx

@@ -4,7 +4,6 @@ import { Container } from "components/elements/Container";
 import { RepoCard, RepoCardSkeleton } from "components/elements/RepoCard";
 import { useEffect } from "react";
 import Squares from "components/decorations/Squares";
-import GitHubCalendar from "react-github-calendar";
 
 export default function GithubRepositories() {
  const { data: _Repos } = SWR("/api/github/repo/public/50");
@@ -27,25 +26,10 @@ export default function GithubRepositories() {
    <div className="fixed top-full right-full z-[-1] translate-x-1/2 -translate-y-1/4 transform lg:translate-x-1/2 xl:-translate-y-1/2">
     <Squares w="404" h="404" />
    </div>
-   <h1 className="mt-6 mb-2 flex items-center justify-center box-decoration-clone bg-clip-text px-8 text-center font-inter text-[2rem] font-semibold motion-reduce:transition-none">
+   <h1 className="mt-6 mb-8 flex items-center justify-center box-decoration-clone bg-clip-text px-8 text-center font-inter text-[2rem] font-semibold motion-reduce:transition-none">
     My work, from the beginning <span className="bg-gradient-to-r from-[#6310ff] to-[#1491ff] box-decoration-clone bg-clip-text text-fill-transparent dark:from-[#a2facf] dark:to-[#64acff]">.</span>
    </h1>
    <div id="cards">
-    <div className="mx-8">
-     <div className="card z-10 !m-[0_auto] !my-9 mx-8 hidden w-fit rounded-[10px] border-[1px] border-black/[15%] bg-white p-4 font-inter duration-200 motion-reduce:transition-none dark:border-white/[15%] dark:bg-[#08152b] md:block">
-      <GitHubCalendar
-       username={social.github.username}
-       theme={{
-        level0: "var(--calendar-default)",
-        level1: "#9be9a8",
-        level2: "#40c463",
-        level3: "#30a14e",
-        level4: "#216e39",
-       }}
-      ></GitHubCalendar>
-     </div>
-    </div>
-
     {_Repos ? (
      repos && (
       <div className="xl-grid-cols-4 grid grid-cols-1 gap-y-10 gap-x-6 px-8 text-center font-inter text-black dark:text-white md:grid-cols-2 md:gap-x-10 lg:grid-cols-3">