Add support for multilanguage blog

This commit is contained in:
killerboss 2024-10-31 22:16:00 +01:00
parent aefec76267
commit 39f35f7d5f
2 changed files with 46 additions and 7 deletions

View file

@ -3,9 +3,10 @@ import { PostPreview } from "./post-preview";
type Props = { type Props = {
posts: Post[]; posts: Post[];
lang: string;
}; };
export function MoreStories({ posts }: Props) { export function MoreStories({ posts, lang }: Props) {
return ( return (
<section> <section>
<h2 className="mb-8 text-5xl md:text-7xl font-bold tracking-tighter leading-tight"> <h2 className="mb-8 text-5xl md:text-7xl font-bold tracking-tighter leading-tight">
@ -15,12 +16,12 @@ export function MoreStories({ posts }: Props) {
{posts.map((post) => ( {posts.map((post) => (
<PostPreview <PostPreview
key={post.slug} key={post.slug}
title={post.title} title={typeof post.title === "string" ? post.title : post.title[lang]}
coverImage={post.coverImage} coverImage={post.coverImage}
date={post.date} date={post.date}
author={post.author} author={post.author}
slug={post.slug} slug={post.slug}
excerpt={post.excerpt} excerpt={typeof post.excerpt === "string" ? post.excerpt : post.excerpt[lang]}
/> />
))} ))}
</div> </div>

View file

@ -36,18 +36,56 @@ export function CursorProvider ({ hidden, enabled, children }) {
} }
}; };
const handlePointer = (event) => {
switch (event.pointerType) {
case "mouse":
setIsCursorEnabled(true);
break;
case "pen":
setIsCursorEnabled(false);
break;
case "touch":
setIsCursorEnabled(false);
break;
default:
setIsCursorEnabled(false);
console.log(`pointerType ${event.pointerType} is not supported`);
}
};
window.addEventListener(
"pointerdown",
handlePointer,
false,
);
const handleMouseEnter = () => {
setIsCursorInViewport(true);
};
const handleMouseLeave = () => {
setIsCursorInViewport(false);
};
// Aggiungi gli eventi di mouse
window.addEventListener('mouseenter', handleMouseEnter);
window.addEventListener('mouseleave', handleMouseLeave);
window.addEventListener('mousemove', moveCursor); window.addEventListener('mousemove', moveCursor);
return () => { return () => {
window.removeEventListener('mouseenter', handleMouseEnter);
window.removeEventListener('mouseleave', handleMouseLeave);
window.removeEventListener('mousemove', moveCursor); window.removeEventListener('mousemove', moveCursor);
window.removeEventListener('pointerdown', handlePointer, false)
}; };
}, []); }, []);
const isTouchDevice = "ontouchstart" in window;
useEffect(() => { useEffect(() => {
const htmlElement = document.documentElement; const htmlElement = document.documentElement;
if (isCursorEnabled & !isTouchDevice) { if (isCursorEnabled) {
htmlElement.classList.add('custom-cursor-enabled-env'); htmlElement.classList.add('custom-cursor-enabled-env');
} else { } else {
htmlElement.classList.remove('custom-cursor-enabled-env'); htmlElement.classList.remove('custom-cursor-enabled-env');
@ -57,7 +95,7 @@ export function CursorProvider ({ hidden, enabled, children }) {
return ( return (
<> <>
<CursorContext.Provider value={{isCustomCursorHidden: isCursorHidden, isCustomCursorEnabled: isCursorEnabled, toggleCursor, toggleCursorEnabled}}> <CursorContext.Provider value={{isCustomCursorHidden: isCursorHidden, isCustomCursorEnabled: isCursorEnabled, toggleCursor, toggleCursorEnabled}}>
{isCursorEnabled & !isTouchDevice ? {isCursorEnabled ?
<div <div
ref={cursorRef} ref={cursorRef}
className={`pointer-events-none fixed top-0 left-0 ${isCursorHidden || !isCursorEnabled || !isCursorInViewport ? 'invisible' : ''} w-10 h-10 bg-white rounded-full z-50 mix-blend-difference`} className={`pointer-events-none fixed top-0 left-0 ${isCursorHidden || !isCursorEnabled || !isCursorInViewport ? 'invisible' : ''} w-10 h-10 bg-white rounded-full z-50 mix-blend-difference`}