xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-06 05:17:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

DependentImage component, base64 blurred image, static prop injection

Browse Source
This commit is contained in:
Xevion
2022-12-24 21:10:33 -06:00
parent 601f4681ad
commit 17b9fba278
2 changed files with 55 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/DependentImage.tsx Normal file
View File

@@ -0,0 +1,26 @@
import Image, {ImageProps} from "next/image";
import {useMemo, useState} from "react";
type DependentProps = {
className?: string | ((loaded: boolean) => string);
}
type DependentImageProps = Omit<ImageProps, "className"> & DependentProps;
const DependentImage = (props: DependentImageProps) => {
const [loaded, setLoaded] = useState(false)
const {className} = props;
const renderedClassName = useMemo(() => {
if (className === undefined) return "";
if (typeof className === "function") return className(loaded);
return className;
}, [loaded, className])
return <Image {...props}
className={renderedClassName}
onLoadingComplete={() => {
setLoaded(true)
}}/>
}
export default DependentImage;

39
src/pages/index.tsx
View File

@@ -1,33 +1,52 @@
import {type NextPage} from "next"; import {GetStaticPropsContext, type NextPage} from "next";
import Head from "next/head"; import Head from "next/head";
import React from "react"; import React from "react";
import ItemCard from "../components/ItemCard"; import ItemCard from "../components/ItemCard";
import {getPlaiceholder} from "plaiceholder";
interface Project { interface Project {
title: string; title: string;
banner: string; banner: string;
description: React.ReactNode; description: string;
} }
const Home: NextPage = () => { type ProjectWithBlur = Project & { bannerBlur: string };
const projects: Project[] = [
type HomeStaticProps = {
projects: ProjectWithBlur[];
}
export async function getStaticProps(context: GetStaticPropsContext) {
const projects = [
{ {
title: "Phototag", title: "Phototag",
banner: "/phototag.png", banner: "/phototag.png",
description: <> description: `Phototag is a **powerful** and **efficient** tool that helps you **quickly** and **easily** describe your photos with
Phototag is a <b>powerful</b> and <b>efficient</b> tool that helps
you <b>quickly</b> and <b>easily</b> describe your photos with
tags. Using Google&apos;s advanced Vision API, Phototag can automatically generate tags for your photos, tags. Using Google&apos;s advanced Vision API, Phototag can automatically generate tags for your photos,
making it faster and easier to organize and search for your images. making it faster and easier to organize and search for your images.`
</>
}, },
{ {
title: "Paths", title: "Paths",
banner: "/paths.png", banner: "/paths.png",
description: "" description: ""
} }
] ].map(async project => {
const {base64} = await getPlaiceholder(project.banner, {size: 16});
return {
...project,
bannerBlur: base64
};
})
return {
props: {
projects: await Promise.all(projects)
}
}
}
const Home: NextPage<HomeStaticProps> = ({projects}: HomeStaticProps) => {
return ( return (
<> <>
<Head> <Head>