diff --git a/src/components/DependentImage.tsx b/src/components/DependentImage.tsx new file mode 100644 index 0000000..21c9763 --- /dev/null +++ b/src/components/DependentImage.tsx @@ -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 & 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 { + setLoaded(true) + }}/> +} + +export default DependentImage; \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f7d9e65..423e8b8 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -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 powerful and efficient tool that helps - you quickly and easily 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'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 = ({projects}: HomeStaticProps) => { return ( <>