xfy/DefectingCat.github.io
1
0
Fork 0
mirror of https://github.com/DefectingCat/DefectingCat.github.io synced 2025-07-15 08:41:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: markdown styles

Browse Source 
threejs animations
This commit is contained in:
xfy
2025-05-19 16:08:26 +08:00
parent 6b97a52472
commit 7e2fb03efd
18 changed files with 47 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/g/[id]/page.tsx
View File

@ -33,7 +33,7 @@ export default async function Page({
priority priority
width={32} width={32}
height={32} height={32}
className="rounded-lg-full " className="rounded-full "
/> />
<h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap text-ellipsis"> <h1 className="ml-2 overflow-hidden text-xl whitespace-nowrap text-ellipsis">
<Link href="/gists"> <Link href="/gists">

8
app/g/loading.tsx
View File

@ -7,7 +7,7 @@ const loading = () => {
<div className="flex items-center py-1 "> <div className="flex items-center py-1 ">
<div <div
className={clsx( className={clsx(
'w-8 h-8 rounded-lg-full', 'w-8 h-8 rounded-full',
'bg-gray-200 animate-pulse dark:bg-rua-gray-600', 'bg-gray-200 animate-pulse dark:bg-rua-gray-600',
)} )}
></div> ></div>
@ -21,7 +21,7 @@ const loading = () => {
<div <div
className={clsx( className={clsx(
'w-32 h-5 bg-gray-200', 'w-32 h-5 bg-gray-200',
'animate-pulse rounded-lg-md', 'animate-pulse rounded-lg',
'dark:bg-rua-gray-600', 'dark:bg-rua-gray-600',
)} )}
></div> ></div>
@ -29,7 +29,7 @@ const loading = () => {
<div <div
className={clsx( className={clsx(
'w-32 h-5 bg-gray-200', 'w-32 h-5 bg-gray-200',
'animate-pulse rounded-lg-md', 'animate-pulse rounded-lg',
'dark:bg-rua-gray-600', 'dark:bg-rua-gray-600',
)} )}
></div> ></div>
@ -40,7 +40,7 @@ const loading = () => {
<div <div
className={clsx( className={clsx(
'w-32 h-4 bg-gray-200', 'w-32 h-4 bg-gray-200',
'animate-pulse rounded-lg-md', 'animate-pulse rounded-lg',
'dark:bg-rua-gray-600', 'dark:bg-rua-gray-600',
)} )}
></div> ></div>

1
app/p/[slug]/page.tsx
View File

@ -11,7 +11,6 @@ import rehypeHighlight from 'rehype-highlight';
import rehypeSlug from 'rehype-slug'; import rehypeSlug from 'rehype-slug';
import remarkGfm from 'remark-gfm'; import remarkGfm from 'remark-gfm';
import { Post } from 'types'; import { Post } from 'types';
import 'styles/rua.css';
const PostToc = dynamic(() => import('components/post/post-toc')); const PostToc = dynamic(() => import('components/post/post-toc'));
const PostCommnetLine = dynamic( const PostCommnetLine = dynamic(

35
app/page.tsx
View File

@ -12,24 +12,23 @@ export const metadata = {
export default function Page() { export default function Page() {
return ( return (
<main className="flex items-stretch justify-center flex-1 text-xl"> <main className="flex items-stretch justify-center flex-1 text-xl">
<div className="flex flex-col w-full max-w-4xl px-4 py-24 text-2xl"> <div className="text-6xl flex items-center">
<h1 className="flex pb-4 text-5xl"> <span
<span className={clsx('font-semibold font-Lobster', styles.gradient)}> className={clsx(
Hi there 'font-semibold font-Lobster tracking-wide',
</span> styles.gradient,
<span className="ml-3"> )}
<Image >
src="/images/img/hands.svg" Hello World!
alt="hands" </span>
width={36} <span className="ml-3">
height={36} <Image
/> src="/images/img/hands.svg"
</span> alt="hands"
</h1> width={36}
height={36}
<div className="relative flex flex-1 w-full h-full"> />
<HomeModel /> </span>
</div>
</div> </div>
</main> </main>
); );

12
components/models/cloud-model.tsx
View File

@ -27,17 +27,11 @@ const CloudModel = () => {
}; };
const [_, api] = useSpring( const [_, api] = useSpring(
{ {
from: { z: camera.position.z,
z: camera.position.z,
},
config: { config: {
duration: 1200, duration: 1200,
easing: easings.easeOutCirc, easing: easings.easeOutCirc,
}, },
to: {
z: camera.position.z - 5.2,
},
pause: true,
onChange: (e) => { onChange: (e) => {
camera.position.z = Number(e.value.z); camera.position.z = Number(e.value.z);
}, },
@ -78,7 +72,9 @@ const CloudModel = () => {
window.addEventListener('touchmove', moveHandler); window.addEventListener('touchmove', moveHandler);
setTimeout(() => { setTimeout(() => {
api.resume(); api.start({
z: camera.position.z - 5.2,
});
setDarkMode(); setDarkMode();
}, 1000); }, 1000);

2
components/pages/blog/post-card-loading.tsx
View File

@ -5,7 +5,7 @@ const PostCardLoading = () => {
return ( return (
<article <article
className={clsx( className={clsx(
'rounded-lg-xl py-4 px-5 md:p-7 ', 'rounded-lg py-4 px-5 md:p-7 ',
'hover:bg-sky-100 hover:bg-opacity-50', 'hover:bg-sky-100 hover:bg-opacity-50',
'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100', 'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
'flex justify-between text-gray-800 ', 'flex justify-between text-gray-800 ',

4
components/pages/blog/post-card.tsx
View File

@ -13,13 +13,13 @@ const PostCard = ({ post }: Props) => {
<Link href={`/p/${post.slug}`} passHref> <Link href={`/p/${post.slug}`} passHref>
<article <article
className={clsx( className={clsx(
'rounded-lg-xl py-4 px-5 md:p-7 ', 'rounded-lg py-4 px-5 md:p-7 ',
'hover:bg-sky-100 hover:bg-opacity-50', 'hover:bg-sky-100 hover:bg-opacity-50',
// 'hover:bg-rua-gray-100 hover:bg-opacity-10', // 'hover:bg-rua-gray-100 hover:bg-opacity-10',
'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100', 'dark:hover:bg-rua-gray-800 dark:hover:bg-opacity-100',
'flex justify-between text-gray-800', 'flex justify-between text-gray-800',
'mb-4 dark:text-gray-200', 'mb-4 dark:text-gray-200',
'flex-col', 'flex-col transition-all duration-300',
)} )}
> >
<div className="flex justify-between"> <div className="flex justify-between">

2
components/pages/dark-mode-btn.tsx
View File

@ -42,7 +42,7 @@ const DarkModeBtn = () => {
<button> <button>
<div <div
className={clsx( className={clsx(
'w-5 h-5 rounded-lg-md animate-pulse', 'w-5 h-5 rounded-md animate-pulse',
'bg-gray-300 dark:bg-gray-500', 'bg-gray-300 dark:bg-gray-500',
)} )}
></div> ></div>

2
components/pages/friends/friend-card.tsx
View File

@ -7,7 +7,7 @@ const FriendCard = ({ friend }: { friend: Friend }) => {
<a href={friend.link} target="_blank"> <a href={friend.link} target="_blank">
<div <div
className={clsx( className={clsx(
'py-3 px-4 rounded-lg-xl bg-slate-100', 'py-3 px-4 rounded-lg bg-slate-100',
'hover:bg-slate-200', 'hover:bg-slate-200',
'transition-all duration-300', 'transition-all duration-300',
'flex items-center cursor-pointer', 'flex items-center cursor-pointer',

6
components/pages/gists/gists-code-skeleton.tsx
View File

@ -22,21 +22,21 @@ const GistsCode = () => {
className={clsx( className={clsx(
'box-border inline-block', 'box-border inline-block',
'w-[13px] h-[13px] mr-2', 'w-[13px] h-[13px] mr-2',
'rounded-lg-full bg-[#ce5347]', 'rounded-lg bg-[#ce5347]',
)} )}
></div> ></div>
<div <div
className={clsx( className={clsx(
'box-border inline-block', 'box-border inline-block',
'w-[13px] h-[13px] mr-2', 'w-[13px] h-[13px] mr-2',
'rounded-lg-full bg-[#d6a243]', 'rounded-lg bg-[#d6a243]',
)} )}
></div> ></div>
<div <div
className={clsx( className={clsx(
'box-border inline-block', 'box-border inline-block',
'w-[13px] h-[13px]', 'w-[13px] h-[13px]',
'rounded-lg-full bg-[#58a942]', 'rounded-lg bg-[#58a942]',
)} )}
></div> ></div>
</div> </div>

6
components/pages/gists/gists-code.tsx
View File

@ -47,21 +47,21 @@ const GistsCode = ({ file, showFileName = false }: Props) => {
className={clsx( className={clsx(
'box-border inline-block', 'box-border inline-block',
'w-[13px] h-[13px] mr-2', 'w-[13px] h-[13px] mr-2',
'rounded-lg-full bg-[#ce5347]', 'rounded-full bg-[#ce5347]',
)} )}
></div> ></div>
<div <div
className={clsx( className={clsx(
'box-border inline-block', 'box-border inline-block',
'w-[13px] h-[13px] mr-2', 'w-[13px] h-[13px] mr-2',
'rounded-lg-full bg-[#d6a243]', 'rounded-full bg-[#d6a243]',
)} )}
></div> ></div>
<div <div
className={clsx( className={clsx(
'box-border inline-block', 'box-border inline-block',
'w-[13px] h-[13px]', 'w-[13px] h-[13px]',
'rounded-lg-full bg-[#58a942]', 'rounded-full bg-[#58a942]',
)} )}
></div> ></div>
</div> </div>

2
components/pages/gists/gists-skeleton.tsx
View File

@ -8,7 +8,7 @@ const GistSkeleton = () => {
<div className="flex items-center py-1 "> <div className="flex items-center py-1 ">
<div <div
className={clsx( className={clsx(
'w-8 h-8 rounded-lg-full', 'w-8 h-8 rounded-lg',
'animate-pulse bg-gray-300', 'animate-pulse bg-gray-300',
'dark:bg-gray-400 ', 'dark:bg-gray-400 ',
)} )}

2
components/pages/gists/user-info-skeleton.tsx
View File

@ -15,7 +15,7 @@ const UserInfoLoading = () => {
<div <div
className={clsx( className={clsx(
'w-16 h-16 mr-4 overflow-hidden', 'w-16 h-16 mr-4 overflow-hidden',
'md:w-72 md:h-72 bg-gray-200 rounded-lg-full', 'md:w-72 md:h-72 bg-gray-200 rounded-lg',
'animate-pulse dark:bg-rua-gray-800', 'animate-pulse dark:bg-rua-gray-800',
)} )}
></div> ></div>

2
components/pages/gists/user-info.tsx
View File

@ -27,7 +27,7 @@ const UserInfo = async () => {
src={avatar} src={avatar}
alt="Avatar" alt="Avatar"
priority priority
className="rounded-lg-full" className="rounded-full"
/> />
</div> </div>

6
components/pages/nav-bar.tsx
View File

@ -90,7 +90,7 @@ const HeadBar = () => {
className={clsx( className={clsx(
'font-semibold', 'font-semibold',
'text-3xl tracking-widest', 'text-3xl tracking-widest',
'select-none', 'select-none font-Lobster',
)} )}
> >
RUA! RUA!
@ -106,7 +106,7 @@ const HeadBar = () => {
<nav <nav
className={clsx( className={clsx(
'text-lg md:block', 'text-lg md:block',
'bg-white rounded-lg-md', 'bg-white rounded-lg',
'dark:bg-rua-gray-800', 'dark:bg-rua-gray-800',
'absolute md:static', 'absolute md:static',
'p-5 right-6 top-14', 'p-5 right-6 top-14',
@ -154,7 +154,7 @@ const HeadBar = () => {
<div <div
className={clsx( className={clsx(
'w-[164.453px] h-[30px]', 'w-[164.453px] h-[30px]',
'bg-[#ebedf0] rounded-lg-[40px] animate-pulse', 'bg-[#ebedf0] rounded-[40px] animate-pulse',
)} )}
></div> ></div>
)} )}

2
components/post/copy-button.tsx
View File

@ -24,7 +24,7 @@ const CopyButton = forwardRef<HTMLButtonElement, CopyButtonProps>(
ref={ref} ref={ref}
className={clsx( className={clsx(
'flex items-center justify-center', 'flex items-center justify-center',
'border rounded-lg-md', 'border rounded-lg',
'p-[6px] opacity-0', 'p-[6px] opacity-0',
'group-hover:opacity-100', 'group-hover:opacity-100',
'transition-opacity dark:border-gray-700', 'transition-opacity dark:border-gray-700',

4
components/rua/rua-sandpack.tsx
View File

@ -14,7 +14,7 @@ const RUASandpack = ({ ...rest }: Props) => {
if (!mounted) { if (!mounted) {
return ( return (
<div className="my-2 rounded-lg-[0.5em] overflow-hidden"> <div className="my-2 rounded-[0.5em] overflow-hidden">
<Sandpack <Sandpack
{...rest} {...rest}
options={{ options={{
@ -29,7 +29,7 @@ const RUASandpack = ({ ...rest }: Props) => {
return ( return (
<> <>
<div className="my-2 rounded-lg-[0.5em] overflow-hidden"> <div className="my-2 rounded-[0.5em] overflow-hidden">
<Sandpack <Sandpack
{...rest} {...rest}
theme={ theme={

2
components/rua/tab/index.tsx
View File

@ -38,7 +38,7 @@ const Tab = ({ defaultValue, children }: Props) => {
key={child.props.label} key={child.props.label}
onClick={() => handleSwitch(child.props.value)} onClick={() => handleSwitch(child.props.value)}
className={clsx( className={clsx(
'px-5 py-3 rounded-lg-t-lg', 'px-5 py-3 rounded-t-lg',
child.props.value === currentValue && child.props.value === currentValue &&
'text-teal-500 border-b-[3px] border-teal-500', 'text-teal-500 border-b-[3px] border-teal-500',
'select-none cursor-pointer', 'select-none cursor-pointer',