refactor

.env.example

@@ -1,10 +1,7 @@
-AIRTABLE_API_KEY=
-AIRTABLE_BASE_ID=
 RAINDROP_ACCESS_TOKEN=
 UNSPLASH_ACCESS_KEY=
 GOOGLE_CLIENT_EMAIL=
 GOOGLE_PRIVATE_KEY=
-GUMROAD_API_KEY=
 UPSTASH_REDIS_REST_URL=
 UPSTASH_REDIS_REST_TOKEN=
 NEXT_PUBLIC_API_URL=http://localhost:3000/api/

components/a.tsx

@@ -4,11 +4,11 @@ import { ReactNode } from "react";
 export type Props = {
   children: ReactNode;
   href: string;
-  blank: boolean;
+  blank?: boolean;
   className?: string;
 };
 
-function A({ children, href, blank, className, ...props }: Props) {
+function A({ children, href, blank = true, className, ...props }: Props) {
   const isBlank = blank
     ? {
         rel: "noopener noreferrer",

components/bookmark-card.tsx

@@ -1,58 +1,24 @@
 import A from "components/a";
-import IconUp from "components/icons/up";
 import type { IBookmark } from "types/Bookmark";
 import { parseISO, formatDistanceToNowStrict } from "date-fns";
 import { tr } from "date-fns/locale";
-import useFetch from "use-http";
-
-function BookmarkCard({
-  bookmark,
-  vote,
-}: {
-  bookmark: IBookmark;
-  vote: boolean;
-}) {
-  const apiPath = `bookmark/vote/${bookmark._id}`;
-  const { data = { count: 0 } } = useFetch(apiPath, vote ? [] : null);
-  const { patch, response } = useFetch(apiPath);
-
-  const onVote = async () => {
-    await patch();
-    if (!response.ok) alert(response.data.message);
-  };
 
+function BookmarkCard({ bookmark }: { bookmark: IBookmark }) {
   return (
-    <article className="flex items-center py-4 space-x-6">
-      {vote && (
-        <button
-          className="
-        flex-shrink-0 flex flex-col items-center justify-center border border-gray-200 w-10 h-12 rounded
-        dark:border-gray-700
-        transition duration-100 hover:shadow-md hover:-translate-y-0.5"
-          onClick={onVote}
-        >
-          <IconUp />
-          <span className="-mt-1 font-bold text-sm">{data?.count || 0}</span>
-        </button>
-      )}
-
-      <div>
-        <h3 className="font-semibold text-highlight">
-          <A href={bookmark.link} blank>
-            {bookmark.title}
-          </A>
-        </h3>
+    <article className="py-4">
+      <h3 className="font-semibold text-highlight">
+        <A href={bookmark.link}>{bookmark.title}</A>
+      </h3>
 
-        <div className="mt-1 flex items-center space-x-2 text-gray-500">
-          <span>{bookmark.domain}</span>
-          <span className="opacity-50">•</span>
-          <span>
-            {formatDistanceToNowStrict(parseISO(bookmark.created), {
-              addSuffix: true,
-              locale: tr,
-            })}
-          </span>
-        </div>
+      <div className="mt-1 flex items-center space-x-2 text-zinc-500">
+        <span>{bookmark.domain}</span>
+        <span className="opacity-50">•</span>
+        <span>
+          {formatDistanceToNowStrict(parseISO(bookmark.created), {
+            addSuffix: true,
+            locale: tr,
+          })}
+        </span>
       </div>
     </article>
   );

components/bookmark-layout.tsx

@@ -24,20 +24,14 @@ export default function BookmarkLayout({ data, year, onlyThisWeek = false }) {
           <div key={date} className="mt-20">
             <h4
               className="
-              text-2xl text-gray-400
-              dark:text-gray-500"
+              text-2xl text-zinc-400
+              dark:text-zinc-500"
             >
               {date}. Hafta, {year}
             </h4>
-            <div className="mt-6 divide-y divide-gray-100 dark:divide-gray-800">
+            <div className="mt-6 divide-y divide-zinc-100 dark:divide-zinc-800">
               {data[date].map((item) => {
-                return (
-                  <BookmarkCard
-                    key={item._id}
-                    bookmark={item}
-                    vote={onlyThisWeek}
-                  />
-                );
+                return <BookmarkCard key={item._id} bookmark={item} />;
               })}
             </div>
           </div>
@@ -47,8 +41,8 @@ export default function BookmarkLayout({ data, year, onlyThisWeek = false }) {
           <div className="mt-16">
             <Link href={`/bookmarks/${getYear(new Date())}`}>
               <a
-                className="py-3 px-4 bg-gray-50 border border-gray-200 rounded
-              dark:bg-gray-800 dark:border-gray-700"
+                className="py-3 px-4 bg-zinc-50 border border-zinc-200 rounded
+              dark:bg-zinc-800 dark:border-zinc-700"
               >
                 Tüm listeyi görüntüle →
               </a>

components/footer.tsx

@@ -7,9 +7,7 @@ function Footer() {
       <div className="c-small">
         <p>
           Bu web sitesinin kaynak kodlarına{" "}
-          <A href="https://github.com/ademilter/homepage" blank>
-            Github üzerinden
-          </A>{" "}
+          <A href="https://github.com/ademilter/homepage">Github üzerinden</A>{" "}
           ulaşabilirsiniz.
         </p>
       </div>

components/header.tsx

@@ -5,7 +5,6 @@ const MENU = {
   "/": "Giriş",
   "/videos": "Eğitimler",
   "/photos": "Fotoğraf",
-  // "/desk": "Masam",
   "/bookmarks": "Yer imleri",
 };
 
@@ -30,7 +29,7 @@ function Header() {
                 setTheme(resolvedTheme === "dark" ? "light" : "dark")
               }
             >
-              {resolvedTheme === "dark" ? "🌞" : "🌚"}
+              {resolvedTheme === "dark" ? "🌝" : "🌚"}
             </button>
           </nav>
         </div>

components/metric-card.tsx

@@ -6,16 +6,10 @@ function MetricCard({ children, href = "", data, prefix = "" }) {
   return (
     <div
       className="
-      border border-gray-200 rounded-xl p-4
-      dark:border-gray-700"
+      border border-zinc-200 rounded-xl p-4
+      dark:border-zinc-700"
     >
-      {href ? (
-        <A href={href} blank>
-          {children}
-        </A>
-      ) : (
-        children
-      )}
+      {href ? <A href={href}>{children}</A> : children}
       <p className="mt-1 text-3xl font-bold spacing-sm text-highlight">
         {prefix}
         {commaNumber(data)}

components/nav-item.tsx

@@ -12,7 +12,7 @@ function NavItem({ href, children }) {
         className={cx(
           "px-2 py-1 rounded",
           isActive &&
-            "text-gray-900 bg-gray-100 dark:text-white dark:bg-gray-800"
+            "text-zinc-900 bg-zinc-100 dark:text-white dark:bg-zinc-800"
         )}
       >
         {children}

components/photos.tsx

@@ -24,7 +24,7 @@ function Photos({ data }) {
       {data.map((item) => {
         return (
           <div key={item.id} className="photos-item mb-8">
-            <A href={item.links.html} blank>
+            <A href={item.links.html}>
               <NextImage
                 src={item.urls.regular}
                 alt={item.description}

components/social.tsx

@@ -11,9 +11,9 @@ function SocialButton({ href, children }) {
       href={href}
       blank
       className="
-      flex items-center p-3 bg-gray-200 text-gray-600 rounded-full transition-colors
+      flex items-center p-3 bg-zinc-200 text-zinc-600 rounded-full transition-colors
       hover:bg-opacity-75
-      dark:bg-gray-700 dark:text-gray-300"
+      dark:bg-zinc-700 dark:text-zinc-300"
     >
       {children}
     </A>

components/video-card.tsx

@@ -13,7 +13,7 @@ export default function VideoCard({ title, url, itemsCount }) {
         check ? "opacity-50" : ""
       )}
     >
-      <label className="flex items-center justify-center w-5 h-5 border border-gray-300 rounded shadow-sm text-gray-900 dark:border-gray-600 dark:text-gray-200 cursor-pointer">
+      <label className="flex items-center justify-center w-5 h-5 border border-zinc-300 rounded shadow-sm text-zinc-900 dark:border-zinc-600 dark:text-zinc-200 cursor-pointer">
         <input
           className="absolute opacity-0 pointer-events-none"
           type="checkbox"
@@ -30,7 +30,7 @@ export default function VideoCard({ title, url, itemsCount }) {
       </a>
 
       {itemsCount > -1 && (
-        <span className="text-sm py-0.5 px-2 bg-gray-100 text-gray-500 rounded dark:bg-gray-800 dark:text-gray-500">
+        <span className="text-sm py-0.5 px-2 bg-zinc-100 text-zinc-500 rounded dark:bg-zinc-800 dark:text-zinc-500">
           {`${itemsCount} Videos`}
         </span>
       )}

lib/raindrop.ts

@@ -1,5 +1,5 @@
 import type { IBookmark } from "types/Bookmark";
-import { format, getYear, parseISO } from "date-fns";
+import { format, parseISO } from "date-fns";
 import groupBy from "lodash.groupby";
 
 export default class Raindrop {

next.config.js

@@ -1,21 +1,8 @@
-// const withPWA = require("next-pwa");
-const { PHASE_DEVELOPMENT_SERVER } = require("next/constants");
-
-const nextConfig = (phase) => {
-  const isDev = phase === PHASE_DEVELOPMENT_SERVER;
-
+const nextConfig = (_) => {
   return {
-    swcMinify: true,
-    env: {
-      API_URL: isDev ? "http://localhost:3000" : "https://ademilter.com",
-    },
     images: {
-      domains: ["dl.airtable.com", "images.unsplash.com"],
+      domains: ["images.unsplash.com"],
     },
-    // pwa: {
-    //   dest: "public",
-    //   disable: isDev,
-    // },
   };
 };
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ademilter-website",
   "description": "my personal website",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "author": "Adem ilter <[email protected]>",
   "license": "MIT",
   "scripts": {
@@ -11,31 +11,28 @@
   },
   "dependencies": {
     "@sindresorhus/slugify": "^2.1.0",
-    "@upstash/redis": "^1.0.1",
-    "airtable": "^0.11.2",
     "classnames": "^2.3.1",
     "colcade": "^0.2.0",
     "comma-number": "^2.1.0",
     "date-fns": "^2.28.0",
-    "dotenv": "^16.0.0",
-    "framer-motion": "^3.10.6",
-    "googleapis": "^96.0.0",
+    "framer-motion": "^6.2.9",
+    "googleapis": "^100.0.0",
     "lodash.groupby": "^4.6.0",
     "ms": "^2.1.3",
-    "next": "^12.1.0",
+    "next": "^12.1.4",
     "next-themes": "^0.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "tailwindcss": "^2.2.19",
+    "tailwindcss": "^3.0.23",
     "use-http": "^1.0.26"
   },
   "devDependencies": {
-    "@types/node": "^17.0.21",
-    "@types/react": "^17.0.40",
-    "@types/react-dom": "^17.0.13",
-    "autoprefixer": "^10.4.2",
-    "postcss": "^8.4.8",
-    "prettier": "^2.5.1",
-    "typescript": "^4.6.2"
+    "@types/node": "^17.0.23",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "autoprefixer": "^10.4.4",
+    "postcss": "^8.4.12",
+    "prettier": "^2.6.2",
+    "typescript": "^4.6.3"
   }
 }

pages/_app.tsx

@@ -2,7 +2,7 @@ import Head from "next/head";
 import Header from "components/header";
 import Footer from "components/footer";
 import { ThemeProvider } from "next-themes";
-import { Provider, CachePolicies } from "use-http";
+import { Provider } from "use-http";
 
 import "styles/globals.css";
 

pages/_document.tsx

@@ -91,8 +91,8 @@ export default class MyDocument extends NextDocument {
         </Head>
 
         <body
-          className="bg-white text-gray-600 antialiased
-      dark:bg-gray-900 dark:text-gray-400"
+          className="bg-white text-zinc-600 antialiased
+      dark:bg-zinc-900 dark:text-zinc-400"
         >
           <Main />
           <NextScript />