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

Revamp descriptions, select long/short description on breakpoint

Browse Source
This commit is contained in:
Xevion
2022-12-25 15:15:39 -06:00
parent adfc22a2b8
commit dce8a2bc3c
4 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -9,6 +9,7 @@
"start": "next start"
},
"dependencies": {
"@kodingdotninja/use-tailwind-breakpoint": "^0.0.5",
"@tanstack/react-query": "^4.16.0",
"@trpc/client": "^10.0.0",
"@trpc/next": "^10.0.0",

25
src/pages/index.tsx
View File

@@ -1,13 +1,15 @@
import {GetStaticPropsContext, type NextPage} from "next";
import Head from "next/head";
import React from "react";
import React, {useEffect} from "react";
import ItemCard from "../components/ItemCard";
import {getPlaiceholder} from "plaiceholder";
import {useBreakpointValue} from "../utils/helpers";
interface Project {
title: string;
banner: string;
description: string;
longDescription: string;
shortDescription: string;
}
type ProjectWithBlur = Project & { bannerBlur: string };
@@ -22,14 +24,15 @@ export async function getStaticProps(context: GetStaticPropsContext) {
{
title: "Phototag",
banner: "/phototag.png",
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.`
longDescription: `Using Google's Vision API and supporting metadata formats on Windows, Phototag makes it easy to quickly add rich, descriptive tags to your photos, saving you time and effort.`,
shortDescription: "Effortlessly add rich & descriptive tags to your photos with Phototag."
},
{
title: "Paths",
banner: "/paths.png",
description: ""
shortDescription: "Discover the power of graph traversal algorithms with my interactive application.",
longDescription: `Discover the power of graph traversal algorithms with my interactive Unity application!
Easily generate and edit graphs, create mazes, and experiment with different algorithm configurations to find the most efficient path.`
}
].map(async project => {
const {base64} = await getPlaiceholder(project.banner, {size: 16});
@@ -47,6 +50,13 @@ export async function getStaticProps(context: GetStaticPropsContext) {
}
const Home: NextPage<HomeStaticProps> = ({projects}: HomeStaticProps) => {
const useLong = useBreakpointValue("sm", true, false);
// use-tailwind-breakpoint
useEffect(() => {
typeof window !== "undefined" ? window.dispatchEvent(new Event("resize")) : null;
}, []);
return (
<>
<Head>
@@ -60,7 +70,8 @@ const Home: NextPage<HomeStaticProps> = ({projects}: HomeStaticProps) => {
<div className="flex h-full m-1 flex-col justify-start gap-y-4">
{
projects.map((project, index) =>
<ItemCard key={index} {...project} />
<ItemCard key={index} {...project}
description={useLong ? project.longDescription : project.shortDescription}/>
)
}
</div>

10
src/utils/helpers.ts
View File

@@ -1,3 +1,7 @@
import create from "@kodingdotninja/use-tailwind-breakpoint";
import resolveConfig from "tailwindcss/resolveConfig";
import tailwindConfig from "./../../tailwind.config.cjs";
export function classNames(...classes: (string | null | undefined)[]) {
return classes.filter(Boolean).join(" ");
}
@@ -14,4 +18,8 @@ const hoverableQuery: MediaQueryList | null = isClient() ? window.matchMedia('(h
export function isHoverable() {
return hoverableQuery?.matches;
}
}
const config = resolveConfig(tailwindConfig);
export const {useBreakpoint, useBreakpointValue, useBreakpointEffect} = create(config.theme!.screens);

5
yarn.lock
View File

@@ -51,6 +51,11 @@
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
"@kodingdotninja/use-tailwind-breakpoint@^0.0.5":
version "0.0.5"
resolved "https://registry.yarnpkg.com/@kodingdotninja/use-tailwind-breakpoint/-/use-tailwind-breakpoint-0.0.5.tgz#f3319448c33572e2e810700e6f2c4e219cf3b54a"
integrity sha512-7h52zL+l+14u9diyjVcGoS5NRIwrc6euIGlHDwtJXlrR3h31RNyTrOfimy7PJTvS4fFdNgbzyrNcGfhj3sDRfQ==
"@next/env@13.0.2":
version "13.0.2"
resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.2.tgz#5fbd7b4146175ae406edfb4a38b62de8c880c09d"