joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(image): Improved image loading and optimization

Browse Source
This commit is contained in:
Pushpank Dhruw
2024-08-22 21:01:27 +05:30
parent e424bd7559
commit ba5028f72d
2 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
next.config.mjs
View File

@@ -1,10 +1,19 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: 'https',
hostname: 'raw.githubusercontent.com',
},
],
},
experimental: {
serverActions: {
// edit: updated to new key. Was previously `allowedForwardedHosts`
allowedOrigins: ['localhost:3000', 'get-zen.vercel.app'],
},
},
};

9
src/components/theme-card.tsx
View File

@@ -1,7 +1,7 @@
import Image from "next/image";
import { getThemeAuthorLink, ZenTheme } from "@/lib/themes";
import styled from "styled-components";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";
import { Button } from "./ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./ui/dialog";import { Button } from "./ui/button";
const ThemeCardWrapepr = styled.div`
`;
@@ -15,8 +15,9 @@ export default function ThemeCard({
<ThemeCardWrapepr onClick={(event) => {
if (event.target instanceof HTMLAnchorElement) return;
window.open(`/themes/${theme.id}`, "_self");
}} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none hover:border-blue-500 hover:shadow-lg">
<img src={theme.image} alt={theme.name} className="w-full h-32 object-cover rounded-lg border shadow" />
}} className="flex flex-col justify-start p-5 rounded-lg shadow-sm bg-muted dark:bg-muted/50 border border-grey-900 dark:border-muted w-full hover:shadow-lg transition duration-300 ease-in-out hover:bg-muted/100 hover:border-blue-500 cursor-pointer select-none ">
<Image src={theme.image} alt={theme.name} width={500} height={500} quality={100}
className="w-full h-32 object-cover rounded-lg border shadow" />
<h2 className="text-xl font-bold mt-4 overflow-ellipsis text-start">{theme.name}</h2>
<div className="flex mt-2">
{theme.homepage && (