Skip to content

Commit

Permalink
feat: add reveal comp
Browse files Browse the repository at this point in the history
  • Loading branch information
valcosmos committed Oct 20, 2024
1 parent e82cacf commit fc53a39
Show file tree
Hide file tree
Showing 8 changed files with 150 additions and 94 deletions.
77 changes: 40 additions & 37 deletions app/Main.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Link from '@/components/Link'
import Reveal from '@/components/Reveal'
import Tag from '@/components/Tag'
import siteMetadata from '@/data/siteMetadata'
import NewsletterForm from 'pliny/ui/NewsletterForm'
Expand All @@ -24,48 +25,50 @@ export default function Home({ posts }) {
const { slug, date, title, summary, tags } = post
return (
<li key={slug} className="py-12">
<article>
<div className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
<dl>
<dt className="sr-only">Published on</dt>
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
<time dateTime={date}>{formatDate(date, siteMetadata.locale)}</time>
</dd>
</dl>
<div className="space-y-5 xl:col-span-3">
<div className="space-y-6">
<div>
<h2 className="text-2xl font-bold leading-8 tracking-tight">
<Link
href={`/blog/${slug}`}
className="text-gray-900 dark:text-gray-100"
style={{ viewTransitionName: `post-title-${slug}` }}
>
{title}
</Link>
</h2>
<div className="flex flex-wrap">
{tags.map(tag => (
<Tag key={tag} text={tag} />
))}
<Reveal>
<article>
<div className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
<dl>
<dt className="sr-only">Published on</dt>
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
<time dateTime={date}>{formatDate(date, siteMetadata.locale)}</time>
</dd>
</dl>
<div className="space-y-5 xl:col-span-3">
<div className="space-y-6">
<div>
<h2 className="text-2xl font-bold leading-8 tracking-tight">
<Link
href={`/blog/${slug}`}
className="text-gray-900 dark:text-gray-100"
style={{ viewTransitionName: `post-title-${slug}` }}
>
{title}
</Link>
</h2>
<div className="flex flex-wrap">
{tags.map(tag => (
<Tag key={tag} text={tag} />
))}
</div>
</div>
<div className="prose max-w-none text-gray-500 dark:text-gray-400">
{summary}
</div>
</div>
<div className="prose max-w-none text-gray-500 dark:text-gray-400">
{summary}
<div className="text-base font-medium leading-6">
<Link
href={`/blog/${slug}`}
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
aria-label={`更多: "${title}"`}
>
更多 &rarr;
</Link>
</div>
</div>
<div className="text-base font-medium leading-6">
<Link
href={`/blog/${slug}`}
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
aria-label={`更多: "${title}"`}
>
更多 &rarr;
</Link>
</div>
</div>
</div>
</article>
</article>
</Reveal>
</li>
)
})}
Expand Down
9 changes: 6 additions & 3 deletions app/about/page.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { Authors } from 'contentlayer/generated'
import Reveal from '@/components/Reveal'
import AuthorLayout from '@/layouts/AuthorLayout'
import { genPageMetadata } from 'app/seo'
import { allAuthors } from 'contentlayer/generated'
Expand All @@ -12,8 +13,10 @@ export default function Page() {
const mainContent = coreContent(author)

return (
<AuthorLayout content={mainContent}>
<MDXLayoutRenderer code={author.body.code} />
</AuthorLayout>
<Reveal>
<AuthorLayout content={mainContent}>
<MDXLayoutRenderer code={author.body.code} />
</AuthorLayout>
</Reveal>
)
}
15 changes: 9 additions & 6 deletions app/blog/page.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Reveal from '@/components/Reveal'
import ListLayout from '@/layouts/ListLayoutWithTags'
import { genPageMetadata } from 'app/seo'
import { allBlogs } from 'contentlayer/generated'
Expand All @@ -20,11 +21,13 @@ export default function BlogPage() {
}

return (
<ListLayout
posts={posts}
initialDisplayPosts={initialDisplayPosts}
pagination={pagination}
title="所有文章"
/>
<Reveal>
<ListLayout
posts={posts}
initialDisplayPosts={initialDisplayPosts}
pagination={pagination}
title="所有文章"
/>
</Reveal>
)
}
47 changes: 24 additions & 23 deletions app/projects/page.tsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,36 @@
import Card from '@/components/Card'
import Reveal from '@/components/Reveal'
import projectsData from '@/data/projectsData'
import { genPageMetadata } from 'app/seo'

export const metadata = genPageMetadata({ title: 'Projects' })

export default function Projects() {
return (

<div>
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
lalala~
</h1>
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
一些小项目,希望能帮你少写几行代码😊
</p>
</div>
<div className="container py-12">
<div className="-m-4 flex flex-wrap">
{projectsData.map(d => (
<Card
key={d.title}
title={d.title}
description={d.description}
imgSrc={d.imgSrc}
href={d.href}
/>
))}
<Reveal>
<div>
<div className="space-y-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl md:leading-14">
lalala~
</h1>
<p className="text-lg leading-7 text-gray-500 dark:text-gray-400">
一些小项目,希望能帮你少写几行代码😊
</p>
</div>
<div className="container py-12">
<div className="-m-4 flex flex-wrap">
{projectsData.map(d => (
<Card
key={d.title}
title={d.title}
description={d.description}
imgSrc={d.imgSrc}
href={d.href}
/>
))}
</div>
</div>
</div>
</div>

</Reveal>
)
}
50 changes: 26 additions & 24 deletions app/tags/page.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Link from '@/components/Link'
import Reveal from '@/components/Reveal'
import Tag from '@/components/Tag'
import { genPageMetadata } from 'app/seo'
import tagData from 'app/tag-data.json'
Expand All @@ -11,31 +12,32 @@ export default async function Page() {
const tagKeys = Object.keys(tagCounts)
const sortedTags = tagKeys.sort((a, b) => tagCounts[b] - tagCounts[a])
return (

<div className="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6 md:divide-y-0">
<div className="space-x-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:border-r-2 md:px-6 md:text-6xl md:leading-14">
标签
</h1>
</div>
<div className="flex max-w-lg flex-wrap">
{tagKeys.length === 0 && 'No tags found.'}
{sortedTags.map((t) => {
return (
<div key={t} className="my-2 mr-5">
<Tag text={t} />
<Link
href={`/tags/${slug(t)}`}
className="-ml-2 text-sm font-semibold uppercase text-gray-600 dark:text-gray-300"
aria-label={`View posts tagged ${t}`}
>
{` (${tagCounts[t]})`}
</Link>
</div>
)
})}
<Reveal>
<div className="flex flex-col items-start justify-start divide-y divide-gray-200 dark:divide-gray-700 md:mt-24 md:flex-row md:items-center md:justify-center md:space-x-6 md:divide-y-0">
<div className="space-x-2 pb-8 pt-6 md:space-y-5">
<h1 className="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:border-r-2 md:px-6 md:text-6xl md:leading-14">
标签
</h1>
</div>
<div className="flex max-w-lg flex-wrap">
{tagKeys.length === 0 && 'No tags found.'}
{sortedTags.map((t) => {
return (
<div key={t} className="my-2 mr-5">
<Tag text={t} />
<Link
href={`/tags/${slug(t)}`}
className="-ml-2 text-sm font-semibold uppercase text-gray-600 dark:text-gray-300"
aria-label={`View posts tagged ${t}`}
>
{` (${tagCounts[t]})`}
</Link>
</div>
)
})}
</div>
</div>
</div>
</Reveal>

)
}
42 changes: 42 additions & 0 deletions components/Reveal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
'use client'

import type { ReactNode } from 'react'
import { motion, useAnimation, useInView } from 'framer-motion'
import React, { useEffect, useRef } from 'react'

interface RevealProps {
children: ReactNode
width?: string
}

export default function Reveal({ children, width = '100%' }: RevealProps) {
const ref = useRef(null)

const isInView = useInView(ref, { once: true })

const mainControls = useAnimation()

useEffect(() => {
if (isInView) {
mainControls.start('visible')
}
}, [isInView, mainControls])

return (
<div ref={ref} style={{ position: 'relative', width, overflow: 'hidden' }}>

<motion.div
variants={{
hidden: { opacity: 0, y: 75 },
visible: { opacity: 1, y: 0 },
}}
initial="hidden"
animate={mainControls}
transition={{ duration: 0.5, delay: 0.25 }}
>
{children}
</motion.div>

</div>
)
}
2 changes: 1 addition & 1 deletion components/Valcosmos.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react'
export default function Valcosmos() {
return (
<svg width="140" height="31" viewBox="0 0 140 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="valcosmos-stroke" d="M2.69118 20.6692L5.44816 15.3453C5.44816 15.3453 0.14627 26.632 2.69118 26.2061C5.23608 25.7801 14.1432 11.2991 18.3848 12.3639C22.6263 13.4286 29.3778 15.5006 27.7161 14.9193C26.0544 14.338 16.0496 15.888 14.5674 23.6506C13.0852 31.4131 27.704 20.1495 27.7161 18.5396C27.7161 18.5396 22.6427 24.8352 26.4436 26.2061C30.2445 27.577 41.9757 16.8673 41.7131 15.9841C41.7131 15.9841 52.741 5.76219 50.4082 2.56783C48.0753 -0.62652 40.6527 10.6602 39.3802 11.512C38.1078 12.3639 33.4397 22.1762 34.9267 26.2061C36.4136 30.2359 55.7101 17.0489 55.7101 17.0489C55.7101 17.0489 53.3772 11.3158 47.015 18.5396C40.6527 25.7634 45.5304 26.2061 45.5304 26.2061C45.5304 26.2061 54.0135 26.8449 56.7704 22.3728C59.5274 17.9007 67.3742 12.1509 66.9501 15.9841C66.5259 19.8174 60.1636 18.5396 60.1636 18.5396C60.1636 18.5396 55.498 25.5672 59.5274 26.8449C63.5568 28.1227 69.2829 19.8173 68.4346 17.9007C67.5863 15.9841 84.3403 14.9193 84.3403 14.9193C84.3403 14.9193 87.0972 9.80837 80.947 12.3639C74.7969 14.9193 75.4331 18.5396 75.4331 18.5396C75.4331 18.5396 80.9471 19.1785 80.3108 23.6506C79.6746 28.1227 76.0693 29.1875 71.8278 28.9745C67.5863 28.7615 89.218 11.2991 89.0059 15.9841C88.7938 20.6692 85.8161 27.1431 85.4006 26.2061C84.9852 25.269 96.4387 13.5444 98.1252 15.3453C98.1252 15.3453 92.6112 22.5858 94.0957 23.6506C95.5803 24.7154 104.43 13.2789 103.639 17.0489C102.849 20.8189 100.249 26.322 101.518 26.2061C106.076 27.8015 111.015 22.9465 119.121 15.9841C119.121 15.9841 114.879 12.5768 111.486 19.3914C108.093 26.2061 110.638 26.2061 110.638 26.2061C111.547 30.8495 121.726 23.6424 120.675 19.3914C119.625 15.1405 138.338 13.6641 137.995 11.512C137.653 9.35995 125.21 15.2776 127.18 18.5396C129.149 21.8016 132.306 18.6533 132.481 23.6506C132.657 28.6479 123.786 28.1227 123.786 28.1227" stroke="black" stroke-width="3" />
<path id="valcosmos-stroke" d="M2.69118 20.6692L5.44816 15.3453C5.44816 15.3453 0.14627 26.632 2.69118 26.2061C5.23608 25.7801 14.1432 11.2991 18.3848 12.3639C22.6263 13.4286 29.3778 15.5006 27.7161 14.9193C26.0544 14.338 16.0496 15.888 14.5674 23.6506C13.0852 31.4131 27.704 20.1495 27.7161 18.5396C27.7161 18.5396 22.6427 24.8352 26.4436 26.2061C30.2445 27.577 41.9757 16.8673 41.7131 15.9841C41.7131 15.9841 52.741 5.76219 50.4082 2.56783C48.0753 -0.62652 40.6527 10.6602 39.3802 11.512C38.1078 12.3639 33.4397 22.1762 34.9267 26.2061C36.4136 30.2359 55.7101 17.0489 55.7101 17.0489C55.7101 17.0489 53.3772 11.3158 47.015 18.5396C40.6527 25.7634 45.5304 26.2061 45.5304 26.2061C45.5304 26.2061 54.0135 26.8449 56.7704 22.3728C59.5274 17.9007 67.3742 12.1509 66.9501 15.9841C66.5259 19.8174 60.1636 18.5396 60.1636 18.5396C60.1636 18.5396 55.498 25.5672 59.5274 26.8449C63.5568 28.1227 69.2829 19.8173 68.4346 17.9007C67.5863 15.9841 84.3403 14.9193 84.3403 14.9193C84.3403 14.9193 87.0972 9.80837 80.947 12.3639C74.7969 14.9193 75.4331 18.5396 75.4331 18.5396C75.4331 18.5396 80.9471 19.1785 80.3108 23.6506C79.6746 28.1227 76.0693 29.1875 71.8278 28.9745C67.5863 28.7615 89.218 11.2991 89.0059 15.9841C88.7938 20.6692 85.8161 27.1431 85.4006 26.2061C84.9852 25.269 96.4387 13.5444 98.1252 15.3453C98.1252 15.3453 92.6112 22.5858 94.0957 23.6506C95.5803 24.7154 104.43 13.2789 103.639 17.0489C102.849 20.8189 100.249 26.322 101.518 26.2061C106.076 27.8015 111.015 22.9465 119.121 15.9841C119.121 15.9841 114.879 12.5768 111.486 19.3914C108.093 26.2061 110.638 26.2061 110.638 26.2061C111.547 30.8495 121.726 23.6424 120.675 19.3914C119.625 15.1405 138.338 13.6641 137.995 11.512C137.653 9.35995 125.21 15.2776 127.18 18.5396C129.149 21.8016 132.306 18.6533 132.481 23.6506C132.657 28.6479 123.786 28.1227 123.786 28.1227" stroke="black" strokeWidth="3" />
</svg>

)
Expand Down
2 changes: 2 additions & 0 deletions layouts/ListLayoutWithTags.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ export default function ListLayoutWithTags({
const { path, date, title, summary, tags } = post
return (
<li key={path} className="py-5">

<article className="flex flex-col space-y-2 xl:space-y-0">
<dl>
<dt className="sr-only">Published on</dt>
Expand All @@ -158,6 +159,7 @@ export default function ListLayoutWithTags({
</div>
</div>
</article>

</li>
)
})}
Expand Down

0 comments on commit fc53a39

Please sign in to comment.