xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2025-12-06 03:17:08 -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 React from "react";
import ItemCard from "../components/ItemCard";
import {getPlaiceholder} from "plaiceholder";
interface Project {
title: string;
banner: string;
description: React.ReactNode;
description: string;
}
const Home: NextPage = () => {
const projects: Project[] = [
type ProjectWithBlur = Project & { bannerBlur: string };
type HomeStaticProps = {
projects: ProjectWithBlur[];
}
export async function getStaticProps(context: GetStaticPropsContext) {
const projects = [
{
title: "Phototag",
banner: "/phototag.png",
description: <>
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
description: `Phototag is a **powerful** and **efficient** tool that helps you **quickly** and **easily** describe your photos with
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",
banner: "/paths.png",
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 (
<>
<Head>