diff --git a/components/Lenis.js b/components/Lenis.js new file mode 100644 index 00000000..27f1d5d9 --- /dev/null +++ b/components/Lenis.js @@ -0,0 +1,36 @@ +/** + * 鼠标滚动阻尼感 + */ +import { useEffect } from 'react' +// import anime from 'animejs' +import { siteConfig } from '@/lib/config' +import { loadExternalResource } from '@/lib/utils' + +/** + * 鼠标点击烟花特效 + * @returns + */ +const Lenis = () => { + + useEffect(() => { + // 异步加载 + async function loadLenis() { + loadExternalResource( + 'https://unpkg.com/lenis@1.2.3/dist/lenis.mjs', + 'js' + ).then(() => { + console.log('Lenis',window.Lenis) + }) + } + + loadLenis() + + return () => { + // 在组件卸载时清理资源 + } + }, []) + + return <> +} + +export default Lenis diff --git a/themes/proxio/components/About.js b/themes/proxio/components/About.js new file mode 100644 index 00000000..6ae4abe9 --- /dev/null +++ b/themes/proxio/components/About.js @@ -0,0 +1,188 @@ +/* eslint-disable @next/next/no-img-element */ +/* eslint-disable react/no-unescaped-entities */ +import { siteConfig } from '@/lib/config' +import Link from 'next/link' + +/** + * 首页的关于模块 + */ +export const About = () => { + return ( + <> + {/* */} +
+
+
+
+ {/* 左侧的文字说明板块 */} +
+
+

+ {siteConfig('PROXIO_CAREER_TITLE')} +

+

+ + + {siteConfig('PROXIO_CAREER_BUTTON_TEXT')} + +
+
+ + {/* 右侧的图片海报 */} +
+
+
+
+ about image +
+
+ +
+
+ about image +
+ +
+
+ + {siteConfig('PROXIO_CAREER_TIPS_1')} + + + {siteConfig('PROXIO_CAREER_TIPS_2')} + + + {siteConfig('PROXIO_CAREER_TIPS_3')} + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+
+ {/* */} + + ) +} diff --git a/themes/proxio/components/Announcement.js b/themes/proxio/components/Announcement.js new file mode 100644 index 00000000..2a72cea0 --- /dev/null +++ b/themes/proxio/components/Announcement.js @@ -0,0 +1,30 @@ +// import { useGlobal } from '@/lib/global' +import dynamic from 'next/dynamic' + +const NotionPage = dynamic(() => import('@/components/NotionPage')) + +/** + * Magzine主题的公告 + */ +const Announcement = ({ post, className }) => { + // const { locale } = useGlobal() + if (post?.blockMap) { + return ( +
+
+ {/*
{locale.COMMON.ANNOUNCEMENT}
*/} + {post && ( +
+ +
+ )} +
+
+ ) + } else { + return <> + } +} +export default Announcement diff --git a/themes/proxio/components/ArticleLock.js b/themes/proxio/components/ArticleLock.js new file mode 100644 index 00000000..3a5f4b4c --- /dev/null +++ b/themes/proxio/components/ArticleLock.js @@ -0,0 +1,53 @@ +import { useGlobal } from '@/lib/global' +import { useEffect, useRef } from 'react' + +/** + * 加密文章校验组件 + * @param {password, validPassword} props + * @param password 正确的密码 + * @param validPassword(bool) 回调函数，校验正确回调入参为true + * @returns + */ +export const ArticleLock = props => { + const { validPassword } = props + const { locale } = useGlobal() + + const submitPassword = () => { + const p = document.getElementById('password') + if (!validPassword(p?.value)) { + const tips = document.getElementById('tips') + if (tips) { + tips.innerHTML = '' + tips.innerHTML = `
${locale.COMMON.PASSWORD_ERROR}
` + } + } + } + + const passwordInputRef = useRef(null) + useEffect(() => { + // 选中密码输入框并将其聚焦 + passwordInputRef.current.focus() + }, []) + + return
+
+
{locale.COMMON.ARTICLE_LOCK_TIPS}
+
+ { + if (e.key === 'Enter') { + submitPassword() + } + }} + ref={passwordInputRef} // 绑定ref到passwordInputRef变量 + className='outline-none w-full text-sm pl-5 rounded-l transition focus:shadow-lg font-light leading-10 text-black dark:bg-gray-500 bg-gray-50' + > +
+  {locale.COMMON.SUBMIT} +
+
+
+
+
+
+} diff --git a/themes/proxio/components/BackToTopButton.js b/themes/proxio/components/BackToTopButton.js new file mode 100644 index 00000000..f6876021 --- /dev/null +++ b/themes/proxio/components/BackToTopButton.js @@ -0,0 +1,75 @@ +import throttle from 'lodash.throttle' +import { useCallback, useEffect } from 'react' + +/** + * 回顶按钮 + * @returns + */ +export const BackToTopButton = () => { + useEffect(() => { + Math.easeInOutQuad = function (t, b, c, d) { + t /= d / 2 + if (t < 1) return (c / 2) * t * t + b + t-- + return (-c / 2) * (t * (t - 2) - 1) + b + } + + window.addEventListener('scroll', navBarScollListener) + return () => { + window.removeEventListener('scroll', navBarScollListener) + } + }, []) + + // 滚动监听 + const throttleMs = 200 + const navBarScollListener = useCallback( + throttle(() => { + const scrollY = window.scrollY + // 显示或隐藏返回顶部按钮 + const backToTop = document.querySelector('.back-to-top') + if (backToTop) { + backToTop.style.display = scrollY > 50 ? 'flex' : 'none' + } + }, throttleMs) + ) + + // ====== scroll top js + function scrollTo(element, to = 0, duration = 500) { + const start = element.scrollTop + const change = to - start + const increment = 20 + let currentTime = 0 + + const animateScroll = () => { + currentTime += increment + + const val = Math.easeInOutQuad(currentTime, start, change, duration) + + element.scrollTop = val + + if (currentTime < duration) { + setTimeout(animateScroll, increment) + } + } + + animateScroll() + } + + function scrollTop() { + if (document) { + scrollTo(document.documentElement) + } + } + + return ( + <> + {/* */} + + + + {/* */} + + ) +} diff --git a/themes/proxio/components/Banner.js b/themes/proxio/components/Banner.js new file mode 100644 index 00000000..18370a2d --- /dev/null +++ b/themes/proxio/components/Banner.js @@ -0,0 +1,49 @@ +/** + * 页面顶部宣传栏 + * @returns + */ +export const Banner = ({ title, description }) => { + return ( + <> + {/* */} +
+
+
+
+
+
+

+ {title} +

+

+ {description} +

+ + {/* */} +
+
+
+
+
+ {/* */} + + ) +} diff --git a/themes/proxio/components/Blog.js b/themes/proxio/components/Blog.js new file mode 100644 index 00000000..5d516fd7 --- /dev/null +++ b/themes/proxio/components/Blog.js @@ -0,0 +1,74 @@ +/* eslint-disable @next/next/no-img-element */ +import LazyImage from '@/components/LazyImage' +import { siteConfig } from '@/lib/config' +import Link from 'next/link' + +/** + * 博文列表 + * @param {*} param0 + * @returns + */ +export const Blog = ({ posts }) => { + return ( + <> + {/* */} +
+
+ {/* 区块标题文字 */} +
+
+
+ + {siteConfig('PROXIO_BLOG_TITLE')} + +

+ {siteConfig('PROXIO_BLOG_TEXT_1')} +

+
+
+
+ {/* 博客列表 此处优先展示3片文章 */} +
+ {posts?.map((item, index) => { + return ( +
+
+
+ {item.pageCoverThumbnail && ( + + + + )} +
+
+ + {item.publishDay} + +

+ + {item.title} + +

+

+ {item.summary} +

+
+
+
+ ) + })} +
+
+
+ {/* */} + + ) +} diff --git a/themes/proxio/components/Brand.js b/themes/proxio/components/Brand.js new file mode 100644 index 00000000..11d8d4c3 --- /dev/null +++ b/themes/proxio/components/Brand.js @@ -0,0 +1,39 @@ +/* eslint-disable @next/next/no-img-element */ + +import { siteConfig } from '@/lib/config' + +/** + * 合作伙伴 + * @returns + */ +export const Brand = () => { + const brands = siteConfig('PROXIO_BRANDS') + return ( + <> + {/* */} +
+
+
+ {brands?.map((item, index) => { + return ( + + {item.TITLE} + {item.TITLE} + + ) + })} +
+
+
+ {/* */} + + ) +} diff --git a/themes/proxio/components/CTA.js b/themes/proxio/components/CTA.js new file mode 100644 index 00000000..830d38ce --- /dev/null +++ b/themes/proxio/components/CTA.js @@ -0,0 +1,112 @@ +import { siteConfig } from '@/lib/config' +import Link from 'next/link' + +/** + * CTA，用于创建一个呼吁用户行动的部分（Call To Action，简称 CTA）。 + * 该组件通过以下方式激励用户进行特定操作 + * 用户的公告栏内容将在此显示 + **/ +export const CTA = () => { + if (!siteConfig('PROXIO_CTA_ENABLE')) { + return <> + } + return ( + <> + {/* */} +
+
+
+
+
+
+

+ {siteConfig('PROXIO_CTA_TITLE')} + + {siteConfig('PROXIO_CTA_TITLE_2')} + +

+

+ {siteConfig('PROXIO_CTA_DESCRIPTION')} +

+ {siteConfig('PROXIO_CTA_BUTTON') && ( + <> + + {siteConfig('PROXIO_CTA_BUTTON_TEXT')} + + + )} +
+
+
+
+
+
+ + + + + + + + + + + + + + +
+
+ {/* */} + + ) +} diff --git a/themes/proxio/components/Contact.js b/themes/proxio/components/Contact.js new file mode 100644 index 00000000..80916f34 --- /dev/null +++ b/themes/proxio/components/Contact.js @@ -0,0 +1,100 @@ +import { siteConfig } from '@/lib/config' +import CONFIG from '../config' +import { SVGEmail } from './svg/SVGEmail' +import { SVGLocation } from './svg/SVGLocation' + +/* eslint-disable react/no-unescaped-entities */ +export const Contact = () => { + const url = siteConfig('PROXIO_CONTACT_MSG_EXTERNAL_URL') + return ( + <> + {/* */} +
+
+
+
+
+ {/* 联系方式左侧文字 */} +
+
+
+ + {siteConfig('PROXIO_CONTACT_TITLE')} + +

+ {siteConfig('PROXIO_CONTACT_TEXT')} +

+
+
+
+
+ +
+
+
+ {siteConfig( + 'PROXIO_CONTACT_LOCATION_TITLE', + null, + CONFIG + )} +
+

+ {siteConfig( + 'PROXIO_CONTACT_LOCATION_TEXT', + null, + CONFIG + )} +

+
+
+
+
+ +
+
+
+ {siteConfig( + 'PROXIO_CONTACT_EMAIL_TITLE', + null, + CONFIG + )} +
+

+ {siteConfig('PROXIO_CONTACT_EMAIL_TEXT')} +

+
+
+
+
+
+ + {url && url !== '' && ( + <> + {/* 联系方式右侧留言 */} +
+
+ {/* 自定义的留言表单 、 需要对接接口 */} + {/* */} + {/* 嵌入外部表单 */} + +
+
+ + )} +
+
+
+ {/* */} + + ) +} diff --git a/themes/proxio/components/DarkModeButton.js b/themes/proxio/components/DarkModeButton.js new file mode 100644 index 00000000..9d4ceef1 --- /dev/null +++ b/themes/proxio/components/DarkModeButton.js @@ -0,0 +1,84 @@ +import { useGlobal } from '@/lib/global'; +import { useRouter } from 'next/router'; + +export const DarkModeButton = () => { + const { toggleDarkMode } = useGlobal() + const router = useRouter() + return <> + + +} diff --git a/themes/proxio/components/FAQ.js b/themes/proxio/components/FAQ.js new file mode 100644 index 00000000..fb741345 --- /dev/null +++ b/themes/proxio/components/FAQ.js @@ -0,0 +1,120 @@ +import { siteConfig } from '@/lib/config' +import { useEffect } from 'react' +import { SVGCircleBG } from './svg/SVGCircleBG' +import { SVGQuestion } from './svg/SVGQuestion' + +export const FAQ = () => { + useEffect(() => { + // ===== Faq accordion + const faqs = document.querySelectorAll('.single-faq') + faqs.forEach(el => { + el.querySelector('.faq-btn').addEventListener('click', () => { + el.querySelector('.icon').classList.toggle('rotate-180') + el.querySelector('.faq-content').classList.toggle('hidden') + }) + }) + }) + return ( + <> + {/* */} +
+
+
+
+
+ + {siteConfig('PROXIO_FAQ_TITLE')} + +

+ {siteConfig('PROXIO_FAQ_TEXT_1')} +

+

+ {siteConfig('PROXIO_FAQ_TEXT_2')} +

+
+
+
+ +
+
+
+
+ +
+
+

+ {siteConfig('PROXIO_FAQ_1_QUESTION')} +

+

+
+
+
+
+ +
+
+

+ {siteConfig('PROXIO_FAQ_2_QUESTION')} +

+

+
+
+
+ +
+
+
+ +
+
+

+ {siteConfig('PROXIO_FAQ_3_QUESTION')} +

+

+
+
+
+
+ +
+
+

+ {siteConfig('PROXIO_FAQ_4_QUESTION')} +

+

+
+
+
+
+
+ + {/* 背景图案 */} +
+ + + + + + +
+
+ {/* */} + + ) +} diff --git a/themes/proxio/components/Features.js b/themes/proxio/components/Features.js new file mode 100644 index 00000000..49e5ec75 --- /dev/null +++ b/themes/proxio/components/Features.js @@ -0,0 +1,115 @@ +import { siteConfig } from '@/lib/config' +import { SVGDesign } from './svg/SVGDesign' +import { SVGEssential } from './svg/SVGEssential' +import { SVGGifts } from './svg/SVGGifts' +import { SVGTemplate } from './svg/SVGTemplate' +import Link from 'next/link' +/** + * 产品特性相关，将显示在首页中 + * @returns + */ +export const Features = () => { + return ( + <> + {/* */} +
+
+
+
+
+ + {siteConfig('PROXIO_FEATURE_TITLE')} + +

+ {siteConfig('PROXIO_FEATURE_TEXT_1')} +

+

+ {siteConfig('PROXIO_FEATURE_TEXT_2')} +

+
+
+
+
+
+
+
+ + +
+

+ {siteConfig('PROXIO_FEATURE_1_TITLE_1')} +

+

+ {siteConfig('PROXIO_FEATURE_1_TEXT_1')} +

+ + {siteConfig('PROXIO_FEATURE_1_BUTTON_TEXT')} + +
+
+
+
+
+ + +
+

+ {siteConfig('PROXIO_FEATURE_2_TITLE_1')} +

+

+ {siteConfig('PROXIO_FEATURE_2_TEXT_1')} +

+ + {siteConfig('PROXIO_FEATURE_2_BUTTON_TEXT')} + +
+
+
+
+
+ + +
+

+ {siteConfig('PROXIO_FEATURE_3_TITLE_1')} +

+

+ {siteConfig('PROXIO_FEATURE_3_TEXT_1')} +

+ + {siteConfig('PROXIO_FEATURE_3_BUTTON_TEXT')} + +
+
+
+
+
+ + +
+

+ {siteConfig('PROXIO_FEATURE_4_TITLE_1')} +

+

+ {siteConfig('PROXIO_FEATURE_4_TEXT_1')} +

+ + {siteConfig('PROXIO_FEATURE_3_BUTTON_TEXT')} + +
+
+
+
+
+ {/* */} + + ) +} diff --git a/themes/proxio/components/Footer.js b/themes/proxio/components/Footer.js new file mode 100644 index 00000000..427f913c --- /dev/null +++ b/themes/proxio/components/Footer.js @@ -0,0 +1,168 @@ +import { siteConfig } from '@/lib/config' +import SocialButton from '@/themes/fukasawa/components/SocialButton' +import { Logo } from './Logo' +import { SVGFooterCircleBG } from './svg/SVGFooterCircleBG' +import Link from 'next/link' + +/* eslint-disable @next/next/no-img-element */ +export const Footer = props => { + const footerPostCount = siteConfig('PROXIO_FOOTER_POST_COUNT', 2) + const latestPosts = props?.latestPosts + ? props?.latestPosts.slice(0, footerPostCount) + : [] + const PROXIO_FOOTER_LINK_GROUP = siteConfig('PROXIO_FOOTER_LINK_GROUP', []) + return ( + <> + {/* */} + + {/* */} + + ) +} diff --git a/themes/proxio/components/Header.js b/themes/proxio/components/Header.js new file mode 100644 index 00000000..2abfed8f --- /dev/null +++ b/themes/proxio/components/Header.js @@ -0,0 +1,73 @@ +/* eslint-disable no-unreachable */ +import DashboardButton from '@/components/ui/dashboard/DashboardButton' +import { siteConfig } from '@/lib/config' +import { useGlobal } from '@/lib/global' +import { SignedIn, SignedOut, UserButton } from '@clerk/nextjs' +import throttle from 'lodash.throttle' +import Link from 'next/link' +import { useRouter } from 'next/router' +import { useCallback, useEffect, useState } from 'react' +import { DarkModeButton } from './DarkModeButton' +import { Logo } from './Logo' +import { MenuList } from './MenuList' + +/** + * 顶部导航栏 + */ +export const Header = props => { + const router = useRouter() + const { isDarkMode } = useGlobal() + const [buttonTextColor, setColor] = useState( + router.route === '/' ? 'text-white' : '' + ) + + const enableClerk = process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY + + useEffect(() => { + if (isDarkMode || router.route === '/') { + setColor('text-white') + } else { + setColor('') + } + // ======= Sticky + window.addEventListener('scroll', navBarScollListener) + return () => { + window.removeEventListener('scroll', navBarScollListener) + } + }, [isDarkMode]) + + // 滚动监听 + const throttleMs = 200 + const navBarScollListener = useCallback( + throttle(() => { + // eslint-disable-next-line camelcase + const ud_header = document.querySelector('.ud-header') + const scrollY = window.scrollY + // 控制台输出当前滚动位置和 sticky 值 + if (scrollY > 0) { + ud_header?.classList?.add('sticky') + } else { + ud_header?.classList?.remove('sticky') + } + }, throttleMs) + ) + + return ( + <> + {/* */} +
+
+
+ {/* Logo */} + + {/* 右侧菜单 */} +
+ +
+
+
+
+ {/* */} + + ) +} diff --git a/themes/proxio/components/Hero.js b/themes/proxio/components/Hero.js new file mode 100644 index 00000000..eb52d56a --- /dev/null +++ b/themes/proxio/components/Hero.js @@ -0,0 +1,72 @@ +/* eslint-disable @next/next/no-img-element */ +import LazyImage from '@/components/LazyImage' +import { siteConfig } from '@/lib/config' +import CONFIG from '../config' +import Link from 'next/link' + +/** + * 英雄大图区块 + */ +export const Hero = props => { + const config = props?.NOTION_CONFIG || CONFIG + const pageCover = props?.siteInfo?.pageCover + const bannerImage = siteConfig('PROXIO_HERO_BANNER_IMAGE', null, config) || pageCover + const bannerIframe = siteConfig('PROXIO_HERO_BANNER_IFRAME_URL',null,config) + return ( + <> + {/* */} +
+ {/* 横幅图片 */} + {!bannerIframe && bannerImage && ( + + )} +