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 = {
|
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>
|
||||||
|
|
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);
|
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`}
|
||||||
|
|
Loading…
Reference in a new issue