Add support for multilanguage blog
This commit is contained in:
parent
aefec76267
commit
39f35f7d5f
2 changed files with 46 additions and 7 deletions
|
@ -3,9 +3,10 @@ import { PostPreview } from "./post-preview";
|
|||
|
||||
type Props = {
|
||||
posts: Post[];
|
||||
lang: string;
|
||||
};
|
||||
|
||||
export function MoreStories({ posts }: Props) {
|
||||
export function MoreStories({ posts, lang }: Props) {
|
||||
return (
|
||||
<section>
|
||||
<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) => (
|
||||
<PostPreview
|
||||
key={post.slug}
|
||||
title={post.title}
|
||||
title={typeof post.title === "string" ? post.title : post.title[lang]}
|
||||
coverImage={post.coverImage}
|
||||
date={post.date}
|
||||
author={post.author}
|
||||
slug={post.slug}
|
||||
excerpt={post.excerpt}
|
||||
excerpt={typeof post.excerpt === "string" ? post.excerpt : post.excerpt[lang]}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
|
46
cursor.jsx
46
cursor.jsx
|
@ -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);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('mouseenter', handleMouseEnter);
|
||||
window.removeEventListener('mouseleave', handleMouseLeave);
|
||||
|
||||
window.removeEventListener('mousemove', moveCursor);
|
||||
|
||||
window.removeEventListener('pointerdown', handlePointer, false)
|
||||
};
|
||||
}, []);
|
||||
|
||||
const isTouchDevice = "ontouchstart" in window;
|
||||
|
||||
useEffect(() => {
|
||||
const htmlElement = document.documentElement;
|
||||
if (isCursorEnabled & !isTouchDevice) {
|
||||
if (isCursorEnabled) {
|
||||
htmlElement.classList.add('custom-cursor-enabled-env');
|
||||
} else {
|
||||
htmlElement.classList.remove('custom-cursor-enabled-env');
|
||||
|
@ -57,7 +95,7 @@ export function CursorProvider ({ hidden, enabled, children }) {
|
|||
return (
|
||||
<>
|
||||
<CursorContext.Provider value={{isCustomCursorHidden: isCursorHidden, isCustomCursorEnabled: isCursorEnabled, toggleCursor, toggleCursorEnabled}}>
|
||||
{isCursorEnabled & !isTouchDevice ?
|
||||
{isCursorEnabled ?
|
||||
<div
|
||||
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`}
|
||||
|
|
Loading…
Reference in a new issue