From 7d35572561152f06440c81a4fae012986aabcbfb Mon Sep 17 00:00:00 2001 From: Igor Kowalczyk Date: Sun, 16 Apr 2023 23:05:02 +0200 Subject: [PATCH] Run everything on edge --- app/api/contact/route.js | 2 + app/api/github/repositories/list/route.js | 2 + app/api/github/repositories/popular/route.js | 2 + .../user/contributions/[...year]/route.js | 2 + app/api/github/user/contributions/route.js | 2 + .../github/user/contributions/years/route.js | 2 + app/api/github/user/route.js | 2 + app/api/og/route.js | 6 +- app/api/technologies/route.js | 6 +- app/page.jsx | 4 +- app/repositories/page.jsx | 9 ++- components/elements/GlowEffect.jsx | 76 +------------------ config.js | 2 +- package.json | 3 +- pnpm-lock.yaml | 13 ++++ 15 files changed, 44 insertions(+), 89 deletions(-) diff --git a/app/api/contact/route.js b/app/api/contact/route.js index 0065ca1a2..a1dff8b91 100644 --- a/app/api/contact/route.js +++ b/app/api/contact/route.js @@ -1,5 +1,7 @@ import isEmail from "validator/lib/isEmail"; +export const runtime = "edge"; + export async function POST(request) { const clonedStream = request.clone(); const { email, name, message } = await clonedStream.json(); diff --git a/app/api/github/repositories/list/route.js b/app/api/github/repositories/list/route.js index 7d41d0e53..fec720e6c 100644 --- a/app/api/github/repositories/list/route.js +++ b/app/api/github/repositories/list/route.js @@ -3,6 +3,8 @@ import { GetRepos } from "lib/graphQl"; // Type: [private, public] // Count: Number of repos to return [min 0, max 50] +export const runtime = "edge"; + export async function GET(request) { const start = Date.now(); let { type, count } = Object.fromEntries(new URL(request.url.replaceAll("&%3B", "&")).searchParams.entries()); diff --git a/app/api/github/repositories/popular/route.js b/app/api/github/repositories/popular/route.js index a3f10501c..7ce6b6314 100644 --- a/app/api/github/repositories/popular/route.js +++ b/app/api/github/repositories/popular/route.js @@ -1,5 +1,7 @@ import { GetPopular } from "lib/graphQl"; +export const runtime = "edge"; + export async function GET() { const start = Date.now(); const data = await GetPopular(); diff --git a/app/api/github/user/contributions/[...year]/route.js b/app/api/github/user/contributions/[...year]/route.js index c2f95fcbb..1f3dbeb01 100644 --- a/app/api/github/user/contributions/[...year]/route.js +++ b/app/api/github/user/contributions/[...year]/route.js @@ -1,5 +1,7 @@ import { getTotalYears, getTotalContributionsForYear } from "lib/graphQl"; +export const runtime = "edge"; + export async function GET(request, { params }) { const start = Date.now(); const year = params.year; diff --git a/app/api/github/user/contributions/route.js b/app/api/github/user/contributions/route.js index 83c13ed30..cef118283 100644 --- a/app/api/github/user/contributions/route.js +++ b/app/api/github/user/contributions/route.js @@ -1,5 +1,7 @@ import { getTotalContributionsForYears } from "lib/graphQl"; +export const runtime = "edge"; + export async function GET() { const start = Date.now(); const user = await getTotalContributionsForYears(); diff --git a/app/api/github/user/contributions/years/route.js b/app/api/github/user/contributions/years/route.js index 1a4d5f454..ed218a068 100644 --- a/app/api/github/user/contributions/years/route.js +++ b/app/api/github/user/contributions/years/route.js @@ -1,5 +1,7 @@ import { getTotalYears } from "lib/graphQl"; +export const runtime = "edge"; + export async function GET() { const start = Date.now(); const user = await getTotalYears(); diff --git a/app/api/github/user/route.js b/app/api/github/user/route.js index e6927b39f..0a3515d41 100644 --- a/app/api/github/user/route.js +++ b/app/api/github/user/route.js @@ -1,5 +1,7 @@ import { GetUserData } from "/lib/graphQl"; +export const runtime = "edge"; + export async function GET() { const start = Date.now(); const user = await GetUserData(); diff --git a/app/api/og/route.js b/app/api/og/route.js index 811ded4c2..61a208479 100644 --- a/app/api/og/route.js +++ b/app/api/og/route.js @@ -1,6 +1,8 @@ import { ImageResponse } from "next/server"; import { parseISO } from "/lib/utils"; +export const runtime = "edge"; + const fontPoppinsBold = fetch(new URL("/public/fonts/bold.ttf", import.meta.url)).then((res) => res.arrayBuffer()); export async function GET(request) { @@ -76,7 +78,3 @@ export async function GET(request) { } ); } - -export const config = { - runtime: "edge", -}; diff --git a/app/api/technologies/route.js b/app/api/technologies/route.js index 068e1b9ea..2dedf3abf 100644 --- a/app/api/technologies/route.js +++ b/app/api/technologies/route.js @@ -1,5 +1,7 @@ import { technologies } from "config"; +export const runtime = "edge"; + export async function GET() { return new Response(JSON.stringify(technologies), { status: 200, @@ -8,7 +10,3 @@ export async function GET() { }, }); } - -export const config = { - runtime: "edge", -}; diff --git a/app/page.jsx b/app/page.jsx index 87fdd7894..f9bfdccce 100644 --- a/app/page.jsx +++ b/app/page.jsx @@ -126,12 +126,12 @@ export default async function HomePage() {

Most Popular Projects.

- +
{reposData && reposData.map((repo) => { return repo.node.owner.login == "IgorKowalczyk" ? : null; })} - +
diff --git a/app/repositories/page.jsx b/app/repositories/page.jsx index 3b2ccd26c..0dbc00f74 100644 --- a/app/repositories/page.jsx +++ b/app/repositories/page.jsx @@ -1,8 +1,9 @@ import Squares from "components/decorations/Squares"; -import { GlowEffect } from "components/elements/GlowEffect"; import { RepoCard } from "components/elements/RepoCard"; import { GetRepos } from "lib/graphQl"; +export const runtime = "edge"; + export const metadata = { title: "Github Repositories", }; @@ -22,11 +23,11 @@ export default async function GithubRepositories() {
{repositories && ( - +
{repositories?.map((repo) => ( - + ))} - +
)}
diff --git a/components/elements/GlowEffect.jsx b/components/elements/GlowEffect.jsx index 9a6bb138c..8d3bfa369 100644 --- a/components/elements/GlowEffect.jsx +++ b/components/elements/GlowEffect.jsx @@ -1,81 +1,11 @@ "use client"; -import "styles/cards.css"; -import { useEffect, useRef } from "react"; +import Tilt from "react-parallax-tilt"; export function GlowEffect({ children, className }) { - const cardContainerRef = useRef(null); - - useEffect(() => { - const cardContainerElement = cardContainerRef.current; - let currentCardElement = null; - - function handleMousemove(e) { - const glowSetting = localStorage.getItem("glow"); - const cardElement = e.target.closest(".card"); - if (!cardElement) return; - - if (currentCardElement !== cardElement) { - if (currentCardElement) { - currentCardElement.style.transition = ""; - currentCardElement.style.transform = ""; - } - currentCardElement = cardElement; - } - - if (glowSetting === "false") { - currentCardElement.style.setProperty("--mouse-x", null); - currentCardElement.style.setProperty("--mouse-y", null); - return; - } - - function getTiltX(dy, height) { - const halfHeight = height / 2; - const normalizedDy = Math.min(Math.max(dy, -halfHeight), halfHeight); - return (-normalizedDy / halfHeight) * 2; - } - - function getTiltY(dx, width) { - const halfWidth = width / 2; - const normalizedDx = Math.min(Math.max(dx, -halfWidth), halfWidth); - return (normalizedDx / halfWidth) * -2; - } - - const rect = cardElement.getBoundingClientRect(); - const cardCenterX = rect.left + rect.width / 2; - const cardCenterY = rect.top + rect.height / 2; - const dx = e.clientX - cardCenterX; - const dy = e.clientY - cardCenterY; - - const tiltX = getTiltX(dy, rect.height); - const tiltY = getTiltY(dx, rect.width); - - currentCardElement.style.setProperty("--mouse-x", `${e.clientX - rect.left}px`); - currentCardElement.style.setProperty("--mouse-y", `${e.clientY - rect.top}px`); - currentCardElement.style.transform = `perspective(700px) rotateX(${tiltX}deg) rotateY(${tiltY}deg)`; - } - - function handleMouseleave() { - if (currentCardElement) { - currentCardElement.style.transform = ""; - currentCardElement = null; - } - } - - if (typeof window !== "undefined" && cardContainerRef.current) { - cardContainerElement.addEventListener("mousemove", handleMousemove); - cardContainerElement.addEventListener("mouseleave", handleMouseleave); - } - - return () => { - cardContainerElement.removeEventListener("mousemove", handleMousemove); - cardContainerElement.removeEventListener("mouseleave", handleMouseleave); - }; - }, [cardContainerRef]); - return ( -
+ {children} -
+ ); } diff --git a/config.js b/config.js index c8e323240..8cc8c37cc 100644 --- a/config.js +++ b/config.js @@ -166,7 +166,7 @@ export const footer = { }, { title: "Contact", - href: "/#contact", + href: "/contact", }, ], }, diff --git a/package.json b/package.json index 8f3d64c08..722f5a203 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "igorkowalczyk-portfolio", "description": "My portfolio built on Next.js", - "version": "4.1.0", + "version": "4.2.0", "private": true, "scripts": { "start": "next start", @@ -34,6 +34,7 @@ "plaiceholder": "2.5.0", "react": "18.2.0", "react-dom": "18.2.0", + "react-parallax-tilt": "^1.7.128", "react-wrap-balancer": "0.4.0", "reading-time": "1.5.0", "rehype-autolink-headings": "6.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7bc943c49..919606bb4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -52,6 +52,9 @@ dependencies: react-dom: specifier: 18.2.0 version: 18.2.0(react@18.2.0) + react-parallax-tilt: + specifier: ^1.7.128 + version: 1.7.128(react-dom@18.2.0)(react@18.2.0) react-wrap-balancer: specifier: 0.4.0 version: 0.4.0(react@18.2.0) @@ -4597,6 +4600,16 @@ packages: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} dev: true + /react-parallax-tilt@1.7.128(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-JsKdSlicpg8iyKS9nB49kZz7Bj3iznTBH72/fyDA9b3DewraQbUnuyNOieL6H4czu3BPtuM2thaLkpR07bDjng==} + peerDependencies: + react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 + react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /react-wrap-balancer@0.4.0(react@18.2.0): resolution: {integrity: sha512-MUsROihHd7bFHCo9kCOifKDYBEZPgKTyGvfa8RcwRQKtT2cL7Um9Cc8A7GvuT8t3np7LAGsEkzdEyJdKrr5lVQ==} peerDependencies: