Add facebook Open Graph Url and image. Fix PATH env conflict with Vercel environment

This commit is contained in:
txs
2022-04-04 08:13:18 +08:00
parent 305a476f6f
commit ebdaf4273f
33 changed files with 901 additions and 469 deletions

View File

@@ -11,32 +11,48 @@ const BlogPostCard = ({ post, showSummary }) => {
const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
const { locale } = useGlobal()
return (
<div key={post.id} className='animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 '>
<div
key={post.id}
className="animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 "
>
<div className="lg:p-8 p-4 flex flex-col w-full">
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<a
className={
'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'
}
>
{post.title}
</a>
</Link>
<div className='lg:p-8 p-4 flex flex-col w-full'>
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<a className={'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'}>
{post.title}
</a>
</Link>
<div
className={
'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'
}
>
<div className="text-sm py-1">{post.date.start_date}</div>
{CONFIG_MEDIUM.POST_LIST_CATEGORY && (
<CategoryItem category={post.category} />
)}
{CONFIG_MEDIUM.POST_LIST_TAG &&
post?.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
<div className={'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'}>
<div className='text-sm py-1'>{post.date.start_date}</div>
{ CONFIG_MEDIUM.POST_LIST_CATEGORY && <CategoryItem category={post.category}/>}
{ CONFIG_MEDIUM.POST_LIST_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
</div>
<div className="flex"></div>
<div className='flex'>
</div>
{(!showPreview || showSummary) && <p className='my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
{(!showPreview || showSummary) && (
<p className="my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary}
</p>}
</p>
)}
{showPreview && <div className='overflow-ellipsis truncate'>
{showPreview && (
<div className="overflow-ellipsis truncate">
<NotionRenderer
bodyClassName='max-h-full'
bodyClassName="max-h-full"
recordMap={post.blockMap}
mapPageUrl={mapPageUrl}
components={{
@@ -45,20 +61,20 @@ const BlogPostCard = ({ post, showSummary }) => {
collection: Collection
}}
/>
<div className='pointer-events-none border-t pt-8 border-dashed'>
<div className='w-full justify-start flex'>
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<a className='hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer'>
{locale.COMMON.ARTICLE_DETAIL}
<i className='ml-1 fas fa-angle-right'/></a>
</Link>
</div>
<div className="pointer-events-none border-t pt-8 border-dashed">
<div className="w-full justify-start flex">
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<a className="hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer">
{locale.COMMON.ARTICLE_DETAIL}
<i className="ml-1 fas fa-angle-right" />
</a>
</Link>
</div>
</div> }
</div>
</div>
</div>
)}
</div>
</div>
)
}

View File

@@ -16,22 +16,38 @@ const PaginationSimple = ({ page, totalPage }) => {
const currentPage = +page
const showNext = currentPage < totalPage
return (
<div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
<Link
href={ {
pathname: (currentPage === 2 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
} } passHref >
<div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
<Link
href={{
pathname:
currentPage === 2
? `${BLOG.SUB_PATH || '/'}`
: `/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<a
rel='prev'
className={`${currentPage === 1 ? 'invisible' : 'block'} text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
rel="prev"
className={`${
currentPage === 1 ? 'invisible' : 'block'
} text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
>
{locale.PAGINATION.PREV}
</a>
</Link>
<Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
<Link
href={{
pathname: `/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<a
rel='next'
className={`${+showNext ? 'block' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
rel="next"
className={`${
+showNext ? 'block' : 'invisible'
} text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
>
{locale.PAGINATION.NEXT}
</a>