Update framer-motion to version 11.11.9

This commit is contained in:
mr. M 2024-10-22 18:38:31 +02:00
parent fdab3ff426
commit 05fc64ef6d
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
13 changed files with 432 additions and 125 deletions

57
package-lock.json generated
View file

@ -30,7 +30,7 @@
"cobe": "^0.6.3",
"dotenv": "^16.4.5",
"feed": "^4.2.2",
"framer-motion": "^11.3.24",
"framer-motion": "^11.11.9",
"lucide-react": "^0.400.0",
"moment": "^2.30.1",
"next": "14.2.4",
@ -11649,10 +11649,9 @@
}
},
"node_modules/framer-motion": {
"version": "11.5.4",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.4.tgz",
"integrity": "sha512-E+tb3/G6SO69POkdJT+3EpdMuhmtCh9EWuK4I1DnIC23L7tFPrl8vxP+LSovwaw6uUr73rUbpb4FgK011wbRJQ==",
"license": "MIT",
"version": "11.11.9",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.9.tgz",
"integrity": "sha512-XpdZseuCrZehdHGuW22zZt3SF5g6AHJHJi7JwQIigOznW4Jg1n0oGPMJQheMaKLC+0rp5gxUKMRYI6ytd3q4RQ==",
"dependencies": {
"tslib": "^2.4.0"
},
@ -21049,8 +21048,52 @@
"peer": true
},
"node_modules/zen-website": {
"resolved": "",
"link": true
"version": "0.1.0",
"resolved": "file:",
"dependencies": {
"@hookform/resolvers": "^3.9.0",
"@radix-ui/react-accordion": "^1.2.0",
"@radix-ui/react-alert-dialog": "^1.1.2",
"@radix-ui/react-checkbox": "^1.1.1",
"@radix-ui/react-dialog": "^1.1.1",
"@radix-ui/react-dropdown-menu": "^2.1.1",
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-navigation-menu": "^1.2.0",
"@radix-ui/react-scroll-area": "^1.1.0",
"@radix-ui/react-select": "^2.1.1",
"@radix-ui/react-slider": "^1.2.0",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.0",
"@supabase/supabase-js": "^2.45.1",
"@vercel/postgres": "^0.9.0",
"canvas-confetti": "^1.9.3",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"cobe": "^0.6.3",
"dotenv": "^16.4.5",
"feed": "^4.2.2",
"framer-motion": "^11.3.24",
"lucide-react": "^0.400.0",
"moment": "^2.30.1",
"next": "14.2.4",
"next-themes": "^0.3.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-hook-form": "^7.52.2",
"react-markdown": "^9.0.1",
"react-spring": "^9.7.4",
"react-sticky-box": "^2.0.5",
"react-sticky-el": "^2.1.0",
"styled-components": "^6.1.12",
"tailwind-merge": "^2.5.1",
"tailwindcss-animate": "^1.0.7",
"zen-website": "file:",
"zod": "^3.23.8"
},
"engines": {
"node": ">=20.0.0"
}
},
"node_modules/zod": {
"version": "3.23.8",

View file

@ -38,7 +38,7 @@
"cobe": "^0.6.3",
"dotenv": "^16.4.5",
"feed": "^4.2.2",
"framer-motion": "^11.3.24",
"framer-motion": "^11.11.9",
"lucide-react": "^0.400.0",
"moment": "^2.30.1",
"next": "14.2.4",

View file

@ -5,11 +5,13 @@ import { releaseNotes } from "@/lib/release-notes";
export default function ReleaseNotePage() {
React.useEffect(() => {
const searchParams = new URLSearchParams(window.location.search);
const version = searchParams.get("v");
const version = searchParams.get("v");
if (version === "latest") {
return window.location.replace(`/release-notes/${releaseNotes[0].version}`);
}
window.location.replace(`/release-notes#${version}`);
return window.location.replace(
`/release-notes/${releaseNotes[0].version}`,
);
}
window.location.replace(`/release-notes#${version}`);
}, []);
return null;

View file

@ -1,12 +1,20 @@
import s from "./styles.module.css";
import { LockKeyholeIcon, Paintbrush2Icon, RabbitIcon } from "lucide-react";
import WordRotate from "../ui/word-rotate";
export default function CoolHeaderText() {
return (
<>
<div className="relative mb-3 mt-5 -translate-y-4 animate-fade-in text-balance bg-gradient-to-br from-30% to-black/40 bg-clip-text py-6 text-5xl font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] dark:from-white dark:to-white/40 sm:text-6xl md:text-7xl lg:text-8xl">
<h1 className={s.title}>Stay focused, browse faster with Zen</h1>
<div className="my-5">
<h1 className="text-6xl font-bold text-muted-foreground duration-200">
The browser<br className="hidden md:block"/> made for your
<span style={{ transform: "translateY(5px)" }} className="inline-block ml-5 w-24">
<span className="bg-purple-100 bg-green-100 bg-blue-100 dark:border-2 dark:bg-transparent dark:border-purple-700 dark:border-green-700 dark:border-blue-700 hidden">{/* Forwards the color to the WordRotate component */}</span>
<WordRotate className="text-base w-full" words={["privacy", "experience", "speed"]} duration={2000} colors={["purple", "green", "blue"]}
icons={[<LockKeyholeIcon className="w-5 h-5 mr-2" />, <Paintbrush2Icon className="w-5 h-5 mr-2" />, <RabbitIcon className="w-5 h-5 mr-2" />]} />
</span>
</h1>
</div>
<div className="pointer-events-none absolute right-20 top-[-5px] mt-12 hidden h-fit w-fit !rotate-[15deg] transform animate-fade-in rounded-full border-2 bg-surface px-3 py-1 opacity-0 shadow [--animation-delay:400ms] md:block">
<div className="pointer-events-none absolute right-[-125px] top-[-140px] mt-12 hidden h-fit w-fit !rotate-[15deg] transform animate-fade-in rounded-full border-2 bg-surface px-3 py-1 opacity-0 shadow [--animation-delay:400ms] md:block">
Alpha Version
</div>
</>

View file

@ -10,14 +10,3 @@
}
}
.title {
background-clip: text;
background-image: linear-gradient(90deg, #0077e7, #01d8d1);
-webkit-background-clip: text;
color: transparent;
filter: hue-rotate(0deg);
animation: hueShift 10s infinite linear 1s;
padding-bottom: 8px;
user-select: none;
cursor: default;
}

View file

@ -368,10 +368,7 @@ export default function Features() {
rel="noopener noreferrer"
target="_blank"
>
<Button
className="ml-8"
variant="ghost"
>
<Button className="ml-8" variant="ghost">
Ko-fi <ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
</Button>
</a>

View file

@ -111,11 +111,7 @@ export default function Footer() {
<a href="/about">About Us</a>
</li>
<li className="mt-2">
<a
href="/privacy-policy"
>
Privacy Policy
</a>
<a href="/privacy-policy">Privacy Policy</a>
</li>
</ul>
</div>
@ -145,18 +141,12 @@ export default function Footer() {
<h2 className="text-md mt-8 font-bold opacity-80">Support Us</h2>
<ul className="mt-4 font-normal opacity-70">
<li>
<a
target="_blank"
href="https://patreon.com/zen_browser"
>
<a target="_blank" href="https://patreon.com/zen_browser">
Patreon
</a>
</li>
<li className="mt-2">
<a
target="_blank"
href="https://ko-fi.com/zen_browser"
>
<a target="_blank" href="https://ko-fi.com/zen_browser">
Ko-fi
</a>
</li>

View file

@ -0,0 +1,118 @@
import { ny } from "@/lib/utils";
import Marquee from "./ui/marquee";
import { ExternalLinkIcon } from "lucide-react";
const firstRow = [
{
username: "@zfcsoftware",
body: "An excellent browser. Chrome and firefox are so...",
url: "https://x.com/zfcsoftware/status/1848077438120865863",
},
{
username: "@DanielJoeba",
body: "Try Zen Browser, you won't be disappointed",
url: "https://x.com/DanielJoeba/status/1847751519677944189",
},
{
username: "@WiissttaaLive",
body: "It's crazy how good @zen_browser is! 😵",
url: "https://x.com/WiissttaaLive/status/1848552152827933145",
},
{
username: "@yildirimsertbas",
body: "The best Firefox-based browser I've ever used. Keep improving it.",
url: "https://x.com/yildirimsertbas/status/1846614652102545438",
},
{
username: "@RedyfXbl",
body: "I've been using zen for about a month now, it's SO GOOD.",
url: "https://x.com/RedyfXbl/status/1845152612171059433",
},
{
username: "@pillzzu",
body: "Cherry on top are the insane customization options...",
url: "https://x.com/pillzzu/status/1847312014755942650",
},
];
const secondRow = [
{
username: "@jonah@neat.computer",
body: "They are actually building the browser I want to exist.",
url: "https://fosstodon.org/@jonah@neat.computer/113298508764568459",
},
{
username: "@Flaky@furry.engineer",
body: "Zen has never failed to impress me every update",
url: "https://fosstodon.org/@Flaky@furry.engineer/113350790004617529",
},
{
username: "@alvan@500.social",
body: "...more than a month probably. It has definitely gotten better.",
url: "https://fosstodon.org/@alvan@500.social/113225351120568209",
},
{
username: "The Register",
body: "Zen Browser is a no-Google zone that offers tiling nirvana",
url: "https://www.theregister.com/2024/09/02/zen_firefox_fork_alpha/",
},
{
username: "TechHut",
body: "Zen browser is making me DITCH Microsoft Edge",
url: "https://techhut.tv/zen-browser-better-firefox/",
},
];
function ReviewCard({
username,
body,
url,
}: {
username: string;
body: string;
url?: string;
}) {
return (
<a
className="relative w-64 cursor-pointer overflow-hidden rounded-lg bg-surface p-4 shadow"
href={url}
target="_blank"
>
<div className="flex flex-row items-center gap-2">
<div className="flex w-full justify-between">
<p className="text-xs font-medium dark:text-white/90">{username}</p>
<ExternalLinkIcon className="h-4 w-4 text-gray-500 dark:text-white/40" />
</div>
</div>
<blockquote className="mt-2 text-sm text-muted-foreground">
{body}
</blockquote>
</a>
);
}
function HeaderMarquee() {
return (
<div
className="absolute relative mb-52 flex size-full w-full flex-col items-center justify-center overflow-hidden"
style={{
transform: "translateY(-10%)",
}}
>
<Marquee pauseOnHover className="w-full [--duration:20s]">
{firstRow.map((review) => (
<ReviewCard key={review.username} {...review} />
))}
</Marquee>
<Marquee pauseOnHover className="w-full [--duration:20s]" reverse>
{secondRow.map((review) => (
<ReviewCard key={review.username} {...review} />
))}
</Marquee>
<div className="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"></div>
<div className="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-background"></div>
</div>
);
}
export default HeaderMarquee;

View file

@ -3,19 +3,20 @@ import { Button } from "./ui/button";
import { ChevronDown } from "lucide-react";
import CoolHeaderText from "./cool-header-text/cool-header-text";
import Link from "next/link";
import HeaderMarquee from "./header-marquee";
export default function Header() {
return (
<>
<section
id="hero"
className="relative mx-auto flex min-h-screen max-w-7xl flex-col justify-center px-6 text-center md:px-8"
className="relative mx-auto flex min-h-screen max-w-7xl flex-col justify-center px-6 text-center md:mt-[-50px] md:px-8"
>
<div className="relative">
<CoolHeaderText />
</div>
<p className="mb-12 -translate-y-4 animate-fade-in text-balance text-lg tracking-tight text-gray-400 opacity-0 [--animation-delay:400ms] md:text-xl">
<p className="mb-16 mt-2 -translate-y-4 animate-fade-in text-balance text-base tracking-tight text-gray-400 opacity-0 [--animation-delay:400ms] md:text-base">
Beautifully designed, privacy-focused, and packed with features.
<br className="hidden md:block" /> We care about your experience, not
We care about<br className="hidden md:block" />your experience, not
your data.
</p>
<div className="flex w-full flex-col justify-center md:flex-row">
@ -35,6 +36,7 @@ export default function Header() {
</Link>
</div>
</section>
<HeaderMarquee />
</>
);
}

View file

@ -0,0 +1,51 @@
import { ny } from "@/lib/utils";
interface MarqueeProps {
className?: string;
reverse?: boolean;
pauseOnHover?: boolean;
children?: React.ReactNode;
vertical?: boolean;
repeat?: number;
[key: string]: any;
}
export default function Marquee({
className,
reverse,
pauseOnHover = false,
children,
vertical = false,
repeat = 4,
...props
}: MarqueeProps) {
return (
<div
{...props}
className={ny(
"group flex overflow-hidden p-2 [--duration:40s] [--gap:1rem] [gap:var(--gap)]",
{
"flex-row": !vertical,
"flex-col": vertical,
},
className,
)}
>
{Array(repeat)
.fill(0)
.map((_, i) => (
<div
key={i}
className={ny("flex shrink-0 justify-around [gap:var(--gap)]", {
"animate-marquee flex-row": !vertical,
"animate-marquee-vertical flex-col": vertical,
"group-hover:[animation-play-state:paused]": pauseOnHover,
"[animation-direction:reverse]": reverse,
})}
>
{children}
</div>
))}
</div>
);
}

View file

@ -0,0 +1,55 @@
'use client'
import type { HTMLMotionProps } from 'framer-motion'
import { AnimatePresence, motion } from 'framer-motion'
import React, { useEffect, useState } from 'react'
import { ny } from '@/lib/utils'
interface WordRotateProps {
words: string[]
duration?: number
framerProps?: HTMLMotionProps<'h1'>
className?: string
colors?: string[]
icons?: React.ReactNode[]
}
export default function WordRotate({
words,
duration = 2500,
framerProps = {
initial: { opacity: 0, y: -50 },
animate: { opacity: 1, y: 0 },
exit: { opacity: 0, y: 50 },
transition: { duration: 0.25, ease: 'easeOut' },
},
className,
colors,
icons,
}: WordRotateProps) {
const [index, setIndex] = useState(0)
useEffect(() => {
const interval = setInterval(() => {
setIndex(prevIndex => (prevIndex + 1) % words.length)
}, duration)
// Clean up interval on unmount
return () => clearInterval(interval)
}, [words, duration])
return (
<div className="overflow-hidden inline-block">
<AnimatePresence mode="wait">
<motion.h1
key={words[index]}
className={ny(className, `text-${colors?.[index] ?? 'primary'}-500 flex items-center bg-${colors?.[index] ?? 'primary'}-100 dark:bg-transparent dark:border-2 dark:border-${colors?.[index] ?? 'primary'}-700 rounded-full px-4 py-2`)}
{...framerProps}
>
{icons?.[index]}
{words[index]}
</motion.h1>
</AnimatePresence>
</div>
)
}

View file

@ -1169,26 +1169,26 @@ export const releaseNotes: ReleaseNote[] = [
"Allow VAAPI/FMPEG APIs only for linux",
"Twilight will now display the proper name on .desktop files",
"Added a better icon selection for workspaces, enhancing more icons",
"Created a \"Force container workspace\" option. Basically, force each container to belong to acertain workspace.",
'Created a "Force container workspace" option. Basically, force each container to belong to acertain workspace.',
"Bookmarks are now opened in the workspace's default container",
"Allow tab unloader to ignore picture-in-picture tabs",
],
fixes: [
{
description: "Disabled forcing hardware accelerating, causing issues for some unsupported GPUs",
description:
"Disabled forcing hardware accelerating, causing issues for some unsupported GPUs",
},
{
description: "Fixed compact mode overlapping the tabs",
},
{
description: "Fixed browser bottom padding misaligns",
issue: 2007
issue: 2007,
},
{
description:
"sidebar is blank when there's a moving video/picture on other open tabs",
issue: 1900
issue: 1900,
},
{
description:
@ -1196,20 +1196,23 @@ export const releaseNotes: ReleaseNote[] = [
issue: 1925,
},
{
description: "Fixed 'Sidebar is very thin making stuff not appear correctly'",
description:
"Fixed 'Sidebar is very thin making stuff not appear correctly'",
issue: 2015,
},
{
description: "Fixed 'Tabs sidebar Expand on Hover casuses jank with latest UI'",
description:
"Fixed 'Tabs sidebar Expand on Hover casuses jank with latest UI'",
issue: 2033,
},
{
description: "Applied patches to fix mfsa2024-53 security issue",
},
{
description: "Major issue with zen sidebar disapering and not re-appearing on restart",
issue: 1979
}
description:
"Major issue with zen sidebar disapering and not re-appearing on restart",
issue: 1979,
},
],
},
{
@ -1217,7 +1220,8 @@ export const releaseNotes: ReleaseNote[] = [
date: "15/10/2024",
image: false,
workflowId: 11349525400,
extra: "This release is a small patch to fix some issues on keyboard shortcuts that were introduced in the previous release.",
extra:
"This release is a small patch to fix some issues on keyboard shortcuts that were introduced in the previous release.",
fixes: [
{
description: "Fixed keyboard shortcuts not working in macos",
@ -1230,74 +1234,80 @@ export const releaseNotes: ReleaseNote[] = [
description: "Fixed reseting shortcuts not working",
},
{
description: "Fixed settings UI when night theme is enabled while having a light website displayed",
description:
"Fixed settings UI when night theme is enabled while having a light website displayed",
},
{
description: "Fixed about page linking 'global comunity' to a mozilla page",
}
description:
"Fixed about page linking 'global comunity' to a mozilla page",
},
],
features: [
"About page will now display the firefox version used",
"Disabled forcing container grouping for workspaces",
],
},
{
{
version: "1.0.1-a.11",
date: "19/10/2024",
image: true,
workflowId: 11412027026,
extra: "This release brings some quality of life improvements and new features to Workspaces.",
fixes: [
{
description: "Fixed right side tab bar not working (macOS)",
issue: 334
},
{
description: "Fixed compact mode moving titlebar buttons (macOS)",
issue: 1872
},
{
description: "Fixed expand on hover moving sites",
issue: 2033
},
{
description: "Fixed About Zen showing incorrect Firefox version",
issue: 2150
},
{
description: "Fixed workspace icon picker no longer showing (Windows)",
issue: 2121
},
{
description: "Fixed inconsistent padding on toolbar buttons",
issue: 2176
},
{
description: "Fixed workspace buttons lacking top and bottom padding when placed on the toolbar",
issue: 2184
},
{
description: "Allow reserved keyboard shortcuts to be changed"
},
{
description: "Fixed display issue for shortcuts with certain keybinds (macOS)",
issue: 2189
}
],
features: [
"Improved light theme",
"Changed split view button icon",
"Added reordering mode to workspaces",
"Added button to disable all active Zen Mods",
"Workspace icon picker now supports all emojis by default"
]
},
extra:
"This release brings some quality of life improvements and new features to Workspaces.",
fixes: [
{
description: "Fixed right side tab bar not working (macOS)",
issue: 334,
},
{
description: "Fixed compact mode moving titlebar buttons (macOS)",
issue: 1872,
},
{
description: "Fixed expand on hover moving sites",
issue: 2033,
},
{
description: "Fixed About Zen showing incorrect Firefox version",
issue: 2150,
},
{
description: "Fixed workspace icon picker no longer showing (Windows)",
issue: 2121,
},
{
description: "Fixed inconsistent padding on toolbar buttons",
issue: 2176,
},
{
description:
"Fixed workspace buttons lacking top and bottom padding when placed on the toolbar",
issue: 2184,
},
{
description: "Allow reserved keyboard shortcuts to be changed",
},
{
description:
"Fixed display issue for shortcuts with certain keybinds (macOS)",
issue: 2189,
},
],
features: [
"Improved light theme",
"Changed split view button icon",
"Added reordering mode to workspaces",
"Added button to disable all active Zen Mods",
"Workspace icon picker now supports all emojis by default",
],
},
{
version: "1.0.1-a.12",
date: "19/10/2024",
image: false,
workflowId: 11419764479,
extra: "This release is a small release that fixes some annoying bugs, and adds some small improvements.\n\nThese releases will commonly mostly contain bug fixes and small improvements as our current goal right now is to stabilize the browser.\n\nThanks everyone for the feedback!",
extra:
"This release is a small release that fixes some annoying bugs, and adds some small improvements.\n\nThese releases will commonly mostly contain bug fixes and small improvements as our current goal right now is to stabilize the browser.\n\nThanks everyone for the feedback!",
features: [
"FIxed always rendering the split view overlay, pottentially fixing huge speed issues",
"Disabled 'all' webrender options by default, performance increase for unsuported GPUs",
@ -1310,7 +1320,8 @@ export const releaseNotes: ReleaseNote[] = [
description: "Fixed tab overlflow changing the height of the web view",
},
{
description: "Fixed 'cancel' button for workspaces creation not working",
description:
"Fixed 'cancel' button for workspaces creation not working",
},
{
description: "Creating tabs wont flash-bang the user anymore",

View file

@ -12,7 +12,7 @@ const config = {
prefix: "",
theme: {
container: {
center: true,
center: "true",
padding: "2rem",
screens: {
"2xl": "1400px",
@ -73,8 +73,12 @@ const config = {
},
keyframes: {
rainbow: {
"0%": { "background-position": "0%" },
"100%": { "background-position": "200%" },
"0%": {
"background-position": "0%",
},
"100%": {
"background-position": "200%",
},
},
orbit: {
"0%": {
@ -98,12 +102,20 @@ const config = {
},
},
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
from: {
height: "0",
},
to: {
height: "var(--radix-accordion-content-height)",
},
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
from: {
height: "var(--radix-accordion-content-height)",
},
to: {
height: "0",
},
},
"border-beam": {
"100%": {
@ -124,12 +136,24 @@ const config = {
},
},
"fade-in": {
from: { opacity: "0", transform: "translateY(-10px)" },
to: { opacity: "1", transform: "none" },
from: {
opacity: "0",
transform: "translateY(-10px)",
},
to: {
opacity: "1",
transform: "none",
},
},
"fade-up": {
from: { opacity: "0", transform: "translateY(20px)" },
to: { opacity: "1", transform: "none" },
from: {
opacity: "0",
transform: "translateY(20px)",
},
to: {
opacity: "1",
transform: "none",
},
},
shimmer: {
"0%, 90%, 100%": {
@ -140,12 +164,28 @@ const config = {
},
},
marquee: {
from: { transform: "translateX(0)" },
to: { transform: "translateX(calc(-100% - var(--gap)))" },
from: {
transform: "translateX(0)",
},
to: {
transform: "translateX(calc(-100% - var(--gap)))",
},
},
"marquee-vertical": {
from: { transform: "translateY(0)" },
to: { transform: "translateY(calc(-100% - var(--gap)))" },
from: {
transform: "translateY(0)",
},
to: {
transform: "translateY(calc(-100% - var(--gap)))",
},
},
"marquee-vertical": {
from: {
transform: "translateY(0)",
},
to: {
transform: "translateY(calc(-100% - var(--gap)))",
},
},
},
animation: {
@ -160,6 +200,7 @@ const config = {
shimmer: "shimmer 8s infinite",
marquee: "marquee var(--duration) infinite linear",
"marquee-vertical": "marquee-vertical var(--duration) linear infinite",
"marquee-vertical": "marquee-vertical var(--duration) linear infinite",
},
},
},