Skip to content

feat: initial shimmer setup on winning projects #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: initial shimmer setup on winning projects #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 49 additions & 0 deletions app/components/border-beam.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { cn } from "@/util/cn";

interface BorderBeamProps {
className?: string;
size?: number;
duration?: number;
borderWidth?: number;
anchor?: number;
colorFrom?: string;
colorTo?: string;
delay?: number;
}

export const BorderBeam = ({
className,
size = 200,
duration = 15,
anchor = 90,
borderWidth = 1.5,
colorFrom = "#ffaa40",
colorTo = "#9c40ff",
delay = 0,
}: BorderBeamProps) => {
return (
<div
style={
{
"--size": size,
"--duration": duration,
"--anchor": anchor,
"--border-width": borderWidth,
"--color-from": colorFrom,
"--color-to": colorTo,
"--delay": `-${delay}s`,
} as React.CSSProperties
}
className={cn(
"pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",

// mask styles
"![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",

// pseudo styles
"after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
className
)}
/>
);
};
6 changes: 5 additions & 1 deletion app/projects/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { Card } from "../components/card";
import { Article } from "./article";
import { Redis } from "@upstash/redis";
import { Eye, GithubIcon } from "lucide-react";
import { BorderBeam } from "../components/border-beam";

const redis = Redis.fromEnv();

Expand Down Expand Up @@ -63,6 +64,7 @@ export default async function ProjectsPage() {

<div className="grid grid-cols-1 gap-8 mx-auto lg:grid-cols-2 ">
<Card>
<BorderBeam />
<Link href={`/projects/${winners.top1.slug}`}>
<article className="relative w-full h-full p-4 md:p-8">
<div className="flex items-center justify-between gap-2">
Expand Down Expand Up @@ -109,8 +111,9 @@ export default async function ProjectsPage() {
</Card>

<div className="flex flex-col w-full gap-8 mx-auto border-t border-gray-900/10 lg:mx-0 lg:border-t-0 ">
{[winners.top2, winners.top3].map((project) => (
{[winners.top2, winners.top3].map((project, index) => (
<Card key={project.slug}>
<BorderBeam delay={index * 6} />
<Article
project={project}
views={views[project.slug] ?? 0}
Expand All @@ -126,6 +129,7 @@ export default async function ProjectsPage() {
</div>

<Card key={featured.slug}>
<BorderBeam delay={12} />
<Link href={`https://github.com/dorelljames/event-ni/pull/5`}>
<div className="mt-2 flex items-center justify-between gap-2">
<span className="ml-2 text-xs text-zinc-100 bg-green-900 px-2 py-1 rounded-md">
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
"@next/font": "^13.5.4",
"@next/mdx": "^13.5.4",
"@upstash/redis": "^1.23.3",
"clsx": "^2.1.1",
"contentlayer": "^0.3.4",
"framer-motion": "^10.16.4",
"lucide-react": "^0.284.0",
Expand All @@ -25,6 +26,7 @@
"rehype-pretty-code": "^0.10.1",
"rehype-slug": "^6.0.0",
"remark-gfm": "3.0.1",
"tailwind-merge": "^2.5.4",
"typescript": "^5.2.2"
},
"devDependencies": {
Expand Down
17 changes: 17 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

210 changes: 108 additions & 102 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,110 +2,116 @@ const defaultTheme = require("tailwindcss/defaultTheme");

/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./mdx-components.tsx",
"content/**/*.mdx",
],
content: [
"./app/**/*.{js,ts,jsx,tsx}",
"./mdx-components.tsx",
"content/**/*.mdx",
],

theme: {
extend: {
typography: {
DEFAULT: {
css: {
"code::before": {
content: '""',
},
"code::after": {
content: '""',
},
},
},
quoteless: {
css: {
"blockquote p:first-of-type::before": { content: "none" },
"blockquote p:first-of-type::after": { content: "none" },
},
},
},
fontFamily: {
sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans],
display: ["var(--font-calsans)"],
},
backgroundImage: {
"gradient-radial":
"radial-gradient(50% 50% at 50% 50%, var(--tw-gradient-stops))",
},
animation: {
"fade-in": "fade-in 3s ease-in-out forwards",
title: "title 3s ease-out forwards",
"fade-left": "fade-left 3s ease-in-out forwards",
"fade-right": "fade-right 3s ease-in-out forwards",
},
keyframes: {
"fade-in": {
"0%": {
opacity: "0%",
},
"75%": {
opacity: "0%",
},
"100%": {
opacity: "100%",
},
},
"fade-left": {
"0%": {
transform: "translateX(100%)",
opacity: "0%",
},
theme: {
extend: {
typography: {
DEFAULT: {
css: {
"code::before": {
content: '""',
},
"code::after": {
content: '""',
},
},
},
quoteless: {
css: {
"blockquote p:first-of-type::before": { content: "none" },
"blockquote p:first-of-type::after": { content: "none" },
},
},
},
fontFamily: {
sans: ["var(--font-inter)", ...defaultTheme.fontFamily.sans],
display: ["var(--font-calsans)"],
},
backgroundImage: {
"gradient-radial":
"radial-gradient(50% 50% at 50% 50%, var(--tw-gradient-stops))",
},
animation: {
"border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
"fade-in": "fade-in 3s ease-in-out forwards",
title: "title 3s ease-out forwards",
"fade-left": "fade-left 3s ease-in-out forwards",
"fade-right": "fade-right 3s ease-in-out forwards",
},
keyframes: {
"fade-in": {
"0%": {
opacity: "0%",
},
"75%": {
opacity: "0%",
},
"100%": {
opacity: "100%",
},
},
"fade-left": {
"0%": {
transform: "translateX(100%)",
opacity: "0%",
},

"30%": {
transform: "translateX(0%)",
opacity: "100%",
},
"100%": {
opacity: "0%",
},
},
"fade-right": {
"0%": {
transform: "translateX(-100%)",
opacity: "0%",
},
"30%": {
transform: "translateX(0%)",
opacity: "100%",
},
"100%": {
opacity: "0%",
},
},
"fade-right": {
"0%": {
transform: "translateX(-100%)",
opacity: "0%",
},

"30%": {
transform: "translateX(0%)",
opacity: "100%",
},
"100%": {
opacity: "0%",
},
},
title: {
"0%": {
"line-height": "0%",
"letter-spacing": "0.25em",
opacity: "0",
},
"25%": {
"line-height": "0%",
opacity: "0%",
},
"80%": {
opacity: "100%",
},
"30%": {
transform: "translateX(0%)",
opacity: "100%",
},
"100%": {
opacity: "0%",
},
},
title: {
"0%": {
"line-height": "0%",
"letter-spacing": "0.25em",
opacity: "0",
},
"25%": {
"line-height": "0%",
opacity: "0%",
},
"80%": {
opacity: "100%",
},

"100%": {
"line-height": "100%",
opacity: "100%",
},
},
},
},
},
plugins: [
require("@tailwindcss/typography"),
require("tailwindcss-debug-screens"),
],
"100%": {
"line-height": "100%",
opacity: "100%",
},
},
"border-beam": {
"100%": {
"offset-distance": "100%",
},
},
},
},
},
plugins: [
require("@tailwindcss/typography"),
require("tailwindcss-debug-screens"),
],
};
6 changes: 6 additions & 0 deletions util/cn.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}