refactor: remove BlockCategory pages, and BlockPreview components
This commit is contained in:
javayhu
parent
fa4b9a19a1
commit
4bad9714fa
@ -1,16 +0,0 @@
|
||||
import { categories } from '@/components/tailark/blocks';
|
||||
import BlocksNav from '@/components/tailark/blocks-nav';
|
||||
import type { PropsWithChildren } from 'react';
|
||||
|
||||
/**
|
||||
* The locale inconsistency issue has been fixed in the BlocksNav component
|
||||
*/
|
||||
export default function BlockCategoryLayout({ children }: PropsWithChildren) {
|
||||
return (
|
||||
<>
|
||||
<BlocksNav categories={categories} />
|
||||
|
||||
<main>{children}</main>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,54 +0,0 @@
|
||||
import BlockPreview from '@/components/tailark/block-preview';
|
||||
import { blocks, categories } from '@/components/tailark/blocks';
|
||||
import { constructMetadata } from '@/lib/metadata';
|
||||
import { getUrlWithLocale } from '@/lib/urls/urls';
|
||||
import type { Metadata } from 'next';
|
||||
import type { Locale } from 'next-intl';
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import { notFound } from 'next/navigation';
|
||||
|
||||
export const dynamic = 'force-static';
|
||||
export const revalidate = 3600;
|
||||
|
||||
export async function generateStaticParams() {
|
||||
return categories.map((category) => ({
|
||||
category: category,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: Locale; category: string }>;
|
||||
}): Promise<Metadata | undefined> {
|
||||
const { locale, category } = await params;
|
||||
const t = await getTranslations({ locale, namespace: 'Metadata' });
|
||||
return constructMetadata({
|
||||
title: category + ' | ' + t('title'),
|
||||
description: t('description'),
|
||||
canonicalUrl: getUrlWithLocale(`/blocks/${category}`, locale),
|
||||
});
|
||||
}
|
||||
|
||||
interface BlockCategoryPageProps {
|
||||
params: Promise<{ category: string }>;
|
||||
}
|
||||
|
||||
export default async function BlockCategoryPage({
|
||||
params,
|
||||
}: BlockCategoryPageProps) {
|
||||
const { category } = await params;
|
||||
const categoryBlocks = blocks.filter((b) => b.category === category);
|
||||
|
||||
if (categoryBlocks.length === 0) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{categoryBlocks.map((block, index) => (
|
||||
<BlockPreview {...block} key={index} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -1,368 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { useCopyToClipboard } from '@/hooks/use-clipboard';
|
||||
import { isUrlCached } from '@/lib/serviceWorker';
|
||||
import { cn } from '@/lib/utils';
|
||||
import * as RadioGroup from '@radix-ui/react-radio-group';
|
||||
import { Check, Code2, Copy, Eye, Maximize, Terminal } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import type React from 'react';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import {
|
||||
Panel,
|
||||
PanelGroup,
|
||||
PanelResizeHandle,
|
||||
type ImperativePanelGroupHandle,
|
||||
} from 'react-resizable-panels';
|
||||
import { useMedia } from 'use-media';
|
||||
|
||||
export interface BlockPreviewProps {
|
||||
code?: string;
|
||||
preview: string;
|
||||
title: string;
|
||||
category: string;
|
||||
previewOnly?: boolean;
|
||||
}
|
||||
|
||||
const radioItem =
|
||||
'rounded-(--radius) duration-200 flex items-center justify-center h-8 px-2.5 gap-2 transition-[color] data-[state=checked]:bg-muted';
|
||||
|
||||
const DEFAULTSIZE = 100;
|
||||
const SMSIZE = 30;
|
||||
const MDSIZE = 62;
|
||||
const LGSIZE = 82;
|
||||
|
||||
const getCacheKey = (src: string) => `iframe-cache-${src}`;
|
||||
|
||||
const titleToNumber = (title: string): number => {
|
||||
const titles = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen", "twenty"];
|
||||
return titles.indexOf(title.toLowerCase()) + 1;
|
||||
};
|
||||
|
||||
export const BlockPreview: React.FC<BlockPreviewProps> = ({
|
||||
code,
|
||||
preview,
|
||||
title,
|
||||
category,
|
||||
previewOnly,
|
||||
}) => {
|
||||
const [width, setWidth] = useState(DEFAULTSIZE);
|
||||
const [mode, setMode] = useState<'preview' | 'code'>('preview');
|
||||
const [iframeHeight, setIframeHeight] = useState(0);
|
||||
const [shouldLoadIframe, setShouldLoadIframe] = useState(false);
|
||||
const [cachedHeight, setCachedHeight] = useState<number | null>(null);
|
||||
const [isIframeCached, setIsIframeCached] = useState(false);
|
||||
|
||||
const terminalCode = `pnpm dlx shadcn@canary add https://nsui.irung.me/r/${category}-${titleToNumber(title)}.json`;
|
||||
const { copied, copy } = useCopyToClipboard({ code: code as string, title, category, eventName: 'block_copy' })
|
||||
const { copied: cliCopied, copy: cliCopy } = useCopyToClipboard({ code: terminalCode, title, category, eventName: 'block_cli_copy' })
|
||||
|
||||
const ref = useRef<ImperativePanelGroupHandle>(null);
|
||||
const isLarge = useMedia('(min-width: 1024px)');
|
||||
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null);
|
||||
const observer = useRef<IntersectionObserver | null>(null);
|
||||
const blockRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
observer.current = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting) {
|
||||
setShouldLoadIframe(true);
|
||||
observer.current?.disconnect();
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (blockRef.current) {
|
||||
observer.current.observe(blockRef.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
observer.current?.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const checkCache = async () => {
|
||||
try {
|
||||
const isCached = await isUrlCached(preview);
|
||||
setIsIframeCached(isCached);
|
||||
if (isCached) {
|
||||
setShouldLoadIframe(true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking cache status:', error);
|
||||
}
|
||||
};
|
||||
|
||||
checkCache();
|
||||
|
||||
try {
|
||||
const cacheKey = getCacheKey(preview);
|
||||
const cached = localStorage.getItem(cacheKey);
|
||||
if (cached) {
|
||||
const { height, timestamp } = JSON.parse(cached);
|
||||
const now = Date.now();
|
||||
if (now - timestamp < 24 * 60 * 60 * 1000) {
|
||||
setCachedHeight(height);
|
||||
setIframeHeight(height);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error retrieving cache:', error);
|
||||
}
|
||||
}, [preview]);
|
||||
|
||||
useEffect(() => {
|
||||
const iframe = iframeRef.current;
|
||||
if (!iframe || !shouldLoadIframe) return;
|
||||
|
||||
const handleLoad = () => {
|
||||
try {
|
||||
const contentHeight = iframe.contentWindow!.document.body.scrollHeight;
|
||||
setIframeHeight(contentHeight);
|
||||
|
||||
const cacheKey = getCacheKey(preview);
|
||||
const cacheValue = JSON.stringify({
|
||||
height: contentHeight,
|
||||
timestamp: Date.now(),
|
||||
});
|
||||
localStorage.setItem(cacheKey, cacheValue);
|
||||
} catch (e) {
|
||||
console.error('Error accessing iframe content:', e);
|
||||
}
|
||||
};
|
||||
|
||||
iframe.addEventListener('load', handleLoad);
|
||||
return () => {
|
||||
iframe.removeEventListener('load', handleLoad);
|
||||
};
|
||||
}, [shouldLoadIframe, preview]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!blockRef.current || shouldLoadIframe) return;
|
||||
|
||||
const linkElement = document.createElement('link');
|
||||
linkElement.rel = 'preload';
|
||||
linkElement.href = preview;
|
||||
linkElement.as = 'document';
|
||||
|
||||
if (
|
||||
!document.head.querySelector(`link[rel="preload"][href="${preview}"]`)
|
||||
) {
|
||||
document.head.appendChild(linkElement);
|
||||
}
|
||||
|
||||
return () => {
|
||||
const existingLink = document.head.querySelector(
|
||||
`link[rel="preload"][href="${preview}"]`
|
||||
);
|
||||
if (existingLink) {
|
||||
document.head.removeChild(existingLink);
|
||||
}
|
||||
};
|
||||
}, [preview, shouldLoadIframe]);
|
||||
|
||||
return (
|
||||
<section className="group mb-16 border-b [--color-border:color-mix(in_oklab,var(--color-zinc-200)_75%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-zinc-800)_60%,transparent)]">
|
||||
<div className="relative border-y">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-x-4 -top-14 bottom-0 mx-auto max-w-7xl lg:inset-x-0"
|
||||
>
|
||||
<div className="to-(--color-border) absolute bottom-0 left-0 top-0 w-px bg-gradient-to-b from-transparent to-75%"></div>
|
||||
<div className="to-(--color-border) absolute bottom-0 right-0 top-0 w-px bg-gradient-to-b from-transparent to-75%"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mx-auto flex max-w-7xl justify-between py-1.5 pl-8 pr-6 [--color-border:var(--color-zinc-200)] md:py-2 lg:pl-6 lg:pr-2 dark:[--color-border:var(--color-zinc-800)]">
|
||||
<div className="-ml-3 flex items-center gap-3">
|
||||
{code && (
|
||||
<>
|
||||
<RadioGroup.Root className="flex gap-0.5">
|
||||
<RadioGroup.Item
|
||||
onClick={() => setMode('preview')}
|
||||
aria-label="Block preview"
|
||||
value="100"
|
||||
checked={mode == 'preview'}
|
||||
className={radioItem}
|
||||
>
|
||||
<Eye className="size-3.5 sm:opacity-50" />
|
||||
<span className="hidden text-[13px] sm:block">Preview</span>
|
||||
</RadioGroup.Item>
|
||||
|
||||
<RadioGroup.Item
|
||||
onClick={() => setMode('code')}
|
||||
aria-label="Code"
|
||||
value="0"
|
||||
checked={mode == 'code'}
|
||||
className={radioItem}
|
||||
>
|
||||
<Code2 className="size-3.5 sm:opacity-50" />
|
||||
<span className="hidden text-[13px] sm:block">Code</span>
|
||||
</RadioGroup.Item>
|
||||
</RadioGroup.Root>
|
||||
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="hidden !h-4 lg:block"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{previewOnly && (
|
||||
<>
|
||||
{' '}
|
||||
<span className="ml-2 text-sm capitalize">{title}</span>
|
||||
<Separator orientation="vertical" className="!h-4" />{' '}
|
||||
</>
|
||||
)}
|
||||
{/* <Button asChild variant="ghost" size="sm" className="size-8">
|
||||
<Link href={preview} passHref target="_blank">
|
||||
<Maximize className="size-4" />
|
||||
</Link>
|
||||
</Button> */}
|
||||
<Separator
|
||||
orientation="vertical"
|
||||
className="hidden !h-4 lg:block"
|
||||
/>
|
||||
<span className="text-muted-foreground hidden text-sm lg:block">
|
||||
{width < MDSIZE
|
||||
? 'Mobile'
|
||||
: width < LGSIZE
|
||||
? 'Tablet'
|
||||
: 'Desktop'}
|
||||
</span>{' '}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
{code && (
|
||||
<>
|
||||
<Button
|
||||
onClick={cliCopy}
|
||||
size="sm"
|
||||
className="size-8 shadow-none md:w-fit"
|
||||
variant="outline"
|
||||
aria-label="copy code">
|
||||
{cliCopied ? <Check className="size-4" /> : <Terminal className="!size-3.5" />}
|
||||
<span className="hidden font-mono text-xs md:block">
|
||||
pnpm dlx shadcn@canary add {category}-{titleToNumber(title)}
|
||||
</span>
|
||||
</Button>
|
||||
<Separator className="!h-4" orientation="vertical" />
|
||||
{/* <OpenInV0Button
|
||||
{...{ title, category }}
|
||||
block={`${category}-${titleToNumber(title)}`}
|
||||
/> */}
|
||||
<Separator className="!h-4" orientation="vertical" />
|
||||
|
||||
<Button
|
||||
onClick={copy}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
aria-label="copy code"
|
||||
className="size-8">
|
||||
{copied ? <Check className="size-4" /> : <Copy className="!size-3.5" />}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{!code && (
|
||||
<span className="hidden font-mono text-sm md:block">
|
||||
{/* pnpm dlx shadcn@canary add */}{category}-{titleToNumber(title)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<div
|
||||
aria-hidden
|
||||
className="absolute inset-x-4 -bottom-14 mx-auto h-14 max-w-7xl lg:inset-x-0"
|
||||
>
|
||||
<div className="from-(--color-border) absolute bottom-0 left-0 top-0 w-px bg-gradient-to-b"></div>
|
||||
<div className="from-(--color-border) absolute bottom-0 right-0 top-0 w-px bg-gradient-to-b"></div>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 mx-auto max-w-7xl px-4 lg:border-r lg:px-0">
|
||||
<div
|
||||
className={cn(
|
||||
'bg-white dark:bg-transparent',
|
||||
mode == 'code' && 'hidden'
|
||||
)}
|
||||
>
|
||||
<PanelGroup direction="horizontal" tagName="div" ref={ref}>
|
||||
<Panel
|
||||
id={`block-${title}`}
|
||||
order={1}
|
||||
onResize={(size) => {
|
||||
setWidth(Number(size));
|
||||
}}
|
||||
defaultSize={DEFAULTSIZE}
|
||||
minSize={SMSIZE}
|
||||
className="h-fit border-x"
|
||||
>
|
||||
<div ref={blockRef}>
|
||||
{shouldLoadIframe ? (
|
||||
<iframe
|
||||
key={`${category}-${title}-iframe`}
|
||||
loading={isIframeCached ? 'eager' : 'lazy'}
|
||||
allowFullScreen
|
||||
ref={iframeRef}
|
||||
title={title}
|
||||
height={cachedHeight || iframeHeight}
|
||||
className={cn(
|
||||
'h-(--iframe-height) block min-h-56 w-full duration-200 will-change-auto',
|
||||
!cachedHeight &&
|
||||
'@starting:opacity-0 @starting:blur-xl',
|
||||
isIframeCached && '!opacity-100 !blur-none'
|
||||
)}
|
||||
src={preview}
|
||||
id={`block-${title}`}
|
||||
style={
|
||||
{
|
||||
'--iframe-height': `${cachedHeight || iframeHeight}px`,
|
||||
display: 'block',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="flex min-h-56 items-center justify-center">
|
||||
<div className="border-primary size-6 animate-spin rounded-full border-2 border-t-transparent" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Panel>
|
||||
|
||||
{isLarge && (
|
||||
<>
|
||||
<PanelResizeHandle className="relative w-2 before:absolute before:inset-0 before:m-auto before:h-12 before:w-1 before:rounded-full before:bg-zinc-300 before:transition-[height,background] hover:before:h-16 hover:before:bg-zinc-400 focus:before:bg-zinc-400 dark:before:bg-zinc-600 dark:hover:before:bg-zinc-500 dark:focus:before:bg-zinc-400" />
|
||||
<Panel
|
||||
id={`code-${title}`}
|
||||
order={2}
|
||||
defaultSize={100 - DEFAULTSIZE}
|
||||
className="-mr-[0.5px] ml-px"
|
||||
></Panel>
|
||||
</>
|
||||
)}
|
||||
</PanelGroup>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-transparent">
|
||||
{/* {mode == 'code' && (
|
||||
<CodeBlock
|
||||
code={code as string}
|
||||
lang="tsx"
|
||||
maxHeight={iframeHeight}
|
||||
/>
|
||||
)} */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlockPreview;
|
||||
Loading…
Reference in New Issue
Block a user