xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2026-01-31 12:26:39 -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
package.json
+1
View File
@@ -9,6 +9,7 @@
"start": "next start" "start": "next start"
}, },
"dependencies": { "dependencies": {
"@kodingdotninja/use-tailwind-breakpoint": "^0.0.5",
"@tanstack/react-query": "^4.16.0", "@tanstack/react-query": "^4.16.0",
"@trpc/client": "^10.0.0", "@trpc/client": "^10.0.0",
"@trpc/next": "^10.0.0", "@trpc/next": "^10.0.0",
src/pages/index.tsx
+18 -7
View File
@@ -1,13 +1,15 @@
import {GetStaticPropsContext, 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, {useEffect} from "react";
import ItemCard from "../components/ItemCard"; import ItemCard from "../components/ItemCard";
import {getPlaiceholder} from "plaiceholder"; import {getPlaiceholder} from "plaiceholder";
import {useBreakpointValue} from "../utils/helpers";
interface Project { interface Project {
title: string; title: string;
banner: string; banner: string;
description: string; longDescription: string;
shortDescription: string;
} }
type ProjectWithBlur = Project & { bannerBlur: string }; type ProjectWithBlur = Project & { bannerBlur: string };
@@ -22,14 +24,15 @@ export async function getStaticProps(context: GetStaticPropsContext) {
{ {
title: "Phototag", title: "Phototag",
banner: "/phototag.png", banner: "/phototag.png",
description: `Phototag is a **powerful** and **efficient** tool that helps you **quickly** and **easily** describe your photos with 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.`,
tags. Using Google's advanced Vision API, Phototag can automatically generate tags for your photos, shortDescription: "Effortlessly add rich & descriptive tags to your photos with Phototag."
making it faster and easier to organize and search for your images.`
}, },
{ {
title: "Paths", title: "Paths",
banner: "/paths.png", 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 => { ].map(async project => {
const {base64} = await getPlaiceholder(project.banner, {size: 16}); 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 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 ( return (
<> <>
<Head> <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"> <div className="flex h-full m-1 flex-col justify-start gap-y-4">
{ {
projects.map((project, index) => projects.map((project, index) =>
<ItemCard key={index} {...project} /> <ItemCard key={index} {...project}
description={useLong ? project.longDescription : project.shortDescription}/>
) )
} }
</div> </div>
src/utils/helpers.ts
+8
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)[]) { export function classNames(...classes: (string | null | undefined)[]) {
return classes.filter(Boolean).join(" "); return classes.filter(Boolean).join(" ");
} }
@@ -15,3 +19,7 @@ const hoverableQuery: MediaQueryList | null = isClient() ? window.matchMedia('(h
export function isHoverable() { export function isHoverable() {
return hoverableQuery?.matches; return hoverableQuery?.matches;
} }
const config = resolveConfig(tailwindConfig);
export const {useBreakpoint, useBreakpointValue, useBreakpointEffect} = create(config.theme!.screens);
yarn.lock
+5
View File
@@ -51,6 +51,11 @@
resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45" resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== 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": "@next/env@13.0.2":
version "13.0.2" version "13.0.2"
resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.2.tgz#5fbd7b4146175ae406edfb4a38b62de8c880c09d" resolved "https://registry.yarnpkg.com/@next/env/-/env-13.0.2.tgz#5fbd7b4146175ae406edfb4a38b62de8c880c09d"