Skip to content

Commit ee38d4b

Browse files
YasInvolvedYasInvolved
committed
showcase slide
1 parent d834413 commit ee38d4b

File tree

13 files changed

+162
-51
lines changed

13 files changed

+162
-51
lines changed

‎app/components/LatestCommits.tsx‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
"use client"
2+
3+
import { useEffect, useState } from "react"
4+
import Image from "next/image"
5+
import Link from "next/link"
6+
7+
type Commit = {
8+
sha: string,
9+
node_id: string,
10+
author?: {
11+
avatar_url: string,
12+
login: string,
13+
html_url: string
14+
}
15+
commit: {
16+
author: {
17+
name: string,
18+
email: string,
19+
date: string
20+
},
21+
message: string,
22+
},
23+
html_url: string
24+
}
25+
26+
export default function LatestCommits({ repo }: { repo: string }) {
27+
const [data, setData] = useState<null | Commit[]>()
28+
const [locale, setLocale] = useState("en-US")
29+
30+
useEffect(() => {
31+
async function fetchData() {
32+
const response = await (await fetch(`https://api.github.com/repos/Devsh-Graphics-Programming/${repo}/commits?per_page=10`)).json()
33+
setData(response)
34+
}
35+
36+
setLocale(navigator.language)
37+
fetchData()
38+
}, [repo])
39+
40+
function makeDicebearUrl(nick: string) {
41+
return `https://api.dicebear.com/9.x/initials/png?seed=${nick}`
42+
}
43+
44+
function makeRepoUrl(repo: string) {
45+
return `https://github.com/Devsh-Graphics-Programming/${repo}`
46+
}
47+
48+
return (
49+
<div className="flex flex-col gap-4 rounded-lg border border-[#181818] p-4">
50+
<h3>Latest commits in <Link href={makeRepoUrl(repo)} className="hover:underline hover:text-teal-200 transition-colors duration-300">{repo}</Link></h3>
51+
<div className="flex flex-col gap-1">
52+
{data && data.map((commit, index) => (
53+
<div className="grid grid-cols-3" key={index}>
54+
<Link href={commit.author ? commit.author.html_url : commit.html_url} className="flex flex-row gap-2">
55+
<Image
56+
src={commit.author ? commit.author.avatar_url : makeDicebearUrl(commit.commit.author.name)}
57+
alt={commit.author ? commit.author.login : commit.commit.author.name}
58+
width={26}
59+
height={26}
60+
className="rounded-full aspect-square w-[24px] h-[24px]"
61+
/>
62+
<span className="hover:underline hover:text-teal-200 transition-colors duration-300">{commit.commit.author.name}</span>
63+
</Link>
64+
<span className="font-thin text-neutral-300">{new Date(commit.commit.author.date).toLocaleDateString(locale)}</span>
65+
<Link href={commit.html_url} className="hover:underline hover:text-teal-200 transition-colors duration-300 font-thin line-clamp-1">{commit.commit.message}</Link>
66+
</div>
67+
))}
68+
</div>
69+
</div>
70+
)
71+
}

‎app/nabla/AnimatedImage.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
"use client"
2+
3+
import { motion, AnimationControls, TargetAndTransition, Transition, VariantLabels } from "framer-motion"
4+
import Image, { ImageProps } from "next/image"
5+
import React, { useState, useRef, useEffect } from "react"
6+
7+
interface AnimatedImageProps extends ImageProps
8+
{
9+
visible?: boolean | AnimationControls | TargetAndTransition | VariantLabels,
10+
invisible?: boolean | AnimationControls | TargetAndTransition | VariantLabels,
11+
transition?: Transition
12+
}
13+
14+
export default function AnimatedImage(props: AnimatedImageProps) {
15+
const [isVisible, setIsVisible] = useState(false);
16+
const imageRef = useRef(null);
17+
18+
useEffect(() => {
19+
const image = imageRef.current;
20+
21+
const observer = new IntersectionObserver(
22+
([entry]) => {
23+
setIsVisible(entry.isIntersecting)
24+
},
25+
{
26+
root: null,
27+
rootMargin: '0px',
28+
threshold: 1
29+
}
30+
);
31+
32+
if (imageRef.current) {
33+
observer.observe(imageRef.current)
34+
};
35+
36+
return () => {
37+
if (image) {
38+
observer.unobserve(image)
39+
}
40+
}
41+
}, [])
42+
43+
const AnimatedImage = motion.create(Image);
44+
return <AnimatedImage
45+
ref={imageRef}
46+
src={props.src} alt={props.alt}
47+
width={props.width}
48+
height={props.height}
49+
animate={isVisible ? props.visible : props.invisible}
50+
transition={props.transition}
51+
className={props.className}
52+
/>
53+
}

‎app/nabla/page.tsx‎

Lines changed: 35 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
11
import devshLogo from "@/public/devsh_transparent_1920.png"
2-
import nablaScreenshot1 from "@/public/nabla/nabla_screenshot1.jpg"
3-
// import nablaScreenshot2 from "@/public/nabla/nabla_screenshot2.gif"
2+
import nablaScreenshot1 from "@/public/nabla_screenshot1.jpg"
43

54
import Image from "next/image"
65
import Slide from "./slide"
76
import TextBlock from "../components/TextBlock"
87
import Link from "next/link"
8+
import fs from 'node:fs/promises'
9+
import { join } from 'node:path'
10+
11+
export default async function Page() {
12+
const publicDir = join(process.cwd(), "public", "nabla");
13+
const files = await fs.readdir(publicDir)
914

10-
export default function Page() {
1115
return (
1216
<div id="scroll-override" className="w-full h-full max-h-full max-w-full overflow-y-auto snap-y snap-mandatory">
1317
<Slide
@@ -18,7 +22,7 @@ export default function Page() {
1822
>
1923
<Image src={devshLogo} alt="Nabla Logo" className="aspect-square w-[240px] xl:w-[480px]"/>
2024
<TextBlock>
21-
<Link href="https://github.com/Devsh-Graphics-Programming/Nabla">Nabla</Link> (previously called <Link href="https://github.com/buildaworldnet/IrrlichtBAW">IrrlichtBaW</Link>) is a new renovated version of older Irrlicht engine. The name change to Nabla allows for using Nabla side by side with the legacy Irrlicht and IrrlichtBaW engines. The project currently aims for a thread-able and Vulkan-centered API, the Vulkan backend is almost complete, and OpenGL and ES backends are currently in maintenance mode.
25+
<Link href="https://github.com/Devsh-Graphics-Programming/Nabla" className="hover:text-teal-200 transition-colors duration-300">Nabla</Link> (previously called <Link href="https://github.com/buildaworldnet/IrrlichtBAW" className="hover:text-teal-200 transition-colors duration-300">IrrlichtBaW</Link>) is a new renovated version of older Irrlicht engine. The name change to Nabla allows for using Nabla side by side with the legacy Irrlicht and IrrlichtBaW engines. The project currently aims for a thread-able and Vulkan-centered API, the Vulkan backend is almost complete, and OpenGL and ES backends are currently in maintenance mode.
2226
</TextBlock>
2327
</Slide>
2428
<Slide
@@ -58,13 +62,37 @@ export default function Page() {
5862
</div>
5963
<Image src={nablaScreenshot1} alt="Nabla Screenshot 1" className="aspect-[9/16] w-full max-h-full object-cover max-lg:hidden"/>
6064
</Slide>
61-
{/* WIP <Slide
65+
<Slide
6266
visible={{ opacity: 1 }}
6367
invisible={{ opacity: 0 }}
6468
transition={{ duration: 0.5 }}
69+
className="container mx-auto flex flex-col items-center justify-center gap-4 px-4 lg:px-8 py-2"
6570
>
66-
<Image src={nablaScreenshot2} alt="Nabla Screenshot 2"/>
67-
</Slide> */}
71+
<h1>Showcase</h1>
72+
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-h-full overflow-y-scroll">
73+
{files.map((file, index) => (
74+
<div key={index} className="relative w-full h-full aspect-video">
75+
<Image
76+
src={`/nabla/${file}`}
77+
width={1280}
78+
height={720}
79+
alt="Showcase screenshot"
80+
className="object-contain"
81+
/>
82+
</div>
83+
))}
84+
</div>
85+
</Slide>
86+
{/* <Slide
87+
visible={{ opacity: 1 }}
88+
invisible={{ opacity: 0 }}
89+
transition={{ duration: 0.5 }}
90+
className="container mx-auto flex flex-col items-center justify-center gap-4 px-4 lg:px-8 py-2"
91+
>
92+
<div className="max-w-xl">
93+
<LatestCommits repo="Nabla"/>
94+
</div>
95+
</Slide> WIP*/}
6896
</div>
6997
)
7098
}

‎app/nabla/slide.tsx‎

Lines changed: 1 addition & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -4,49 +4,6 @@ import React, { useState, useRef, useEffect, ReactNode } from "react"
44
import AnimatedContainer from "../components/AnimatedContainer"
55
import { AnimationControls, TargetAndTransition, Transition, VariantLabels } from "framer-motion";
66

7-
// const Slide = React.forwardRef<AnimatedContainerProps, SlideProps>((props, ref) => {
8-
// const [isVisible, setIsVisible] = useState(false);
9-
// const containerRef = useRef<HTMLDivElement>(null);
10-
11-
// useEffect(() => {
12-
// const observer = new IntersectionObserver(
13-
// ([entry]) => {
14-
// setIsVisible(entry.isIntersecting);
15-
// },
16-
// {
17-
// root: null,
18-
// rootMargin: '0px',
19-
// threshold: 1
20-
// }
21-
// );
22-
23-
// if (containerRef.current) {
24-
// observer.observe(containerRef.current);
25-
// }
26-
27-
// return () => {
28-
// if (containerRef.current) {
29-
// observer.unobserve(containerRef.current)
30-
// }
31-
// }
32-
// }, [])
33-
34-
// return (
35-
// <AnimatedContainer
36-
// ref={ref}
37-
// className={`w-full h-full max-h-full snap-center snap-always ${props.className}`}
38-
// animate={isVisible ? props.visible : props.invisible}
39-
// {...props}
40-
// >
41-
// <div id="visibility-wrapper" ref={containerRef}>
42-
// {props.children}
43-
// </div>
44-
// </AnimatedContainer>
45-
// )
46-
// })
47-
48-
// export default Slide;
49-
507
type SlideProps = {
518
children?: ReactNode,
529
className?: string,
@@ -89,7 +46,7 @@ export default function Slide(props: SlideProps) {
8946
ref={containerRef}
9047
animate={isVisible ? props.visible : props.invisible}
9148
transition={props.transition}
92-
className={`w-full h-full snap-center snap-always ${props.className}`}
49+
className={`w-full h-full max-w-full max-h-fit snap-center snap-always ${props.className}`}
9350
>
9451
{props.children}
9552
</AnimatedContainer>

‎app/opengraph-image.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* eslint-disable @next/next/no-img-element*/
2+
13
import { ImageResponse } from "next/og";
24
import { readFile } from "fs/promises";
35
import { join } from "path";

‎public/nabla/fluid.gif‎

9.32 MB
Loading

‎public/nabla/imgui.png‎

2.04 MB
Loading

‎public/nabla/nabla_screenshot2.gif‎

-15.5 MB
Binary file not shown.

‎public/nabla/rt_screenshot.jpg‎

814 KB
Loading

‎public/nabla/rt_screenshot1.jpg‎

226 KB
Loading

0 commit comments

Comments
 (0)