Skip to content

Commit

Permalink
style: dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@rockbenben
rockbenben committed Dec 6, 2024
1 parent af4c519 commit 39b2317
Show file tree
Hide file tree
Showing 7 changed files with 309 additions and 241 deletions.
5 changes: 5 additions & 0 deletions docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,11 @@ const config = {
// Replace with your project's social card
// image: 'img/docusaurus-social-card.jpg',
// autocorrect: false,
colorMode: {
defaultMode: "dark",
disableSwitch: false,
respectPrefersColorScheme: false,
},
metadata: [
{
name: "keywords",
Expand Down
98 changes: 55 additions & 43 deletions src/pages/_components/PromptPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useContext, useState, useCallback, useMemo } from "react";
import { Card, Typography, Tag, Tooltip, Space, Row, Col, Badge, Button } from "antd";
import { Card, Typography, Tag, Tooltip, Space, Row, Col, Badge, Button, ConfigProvider, theme } from "antd";
import { LinkOutlined, CopyOutlined, CheckOutlined } from "@ant-design/icons";
import Layout from "@theme/Layout";
import Link from "@docusaurus/Link";
Expand Down Expand Up @@ -37,50 +37,62 @@ function PromptPage({ prompt }) {
await updateCopyCount(prompt.id);
}, [prompt, currentLanguage]);

const isDarkMode = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark";

return (
<Layout title={title} description={remark}>
<Row justify="center" style={{ marginTop: "20px" }}>
<Col xs={24} sm={22} md={20} lg={18} xl={16}>
<Card
className="shadow--md"
title={
<span>
{title} <Badge count={"Weight: " + weight} style={{ backgroundColor: "#52c41a" }} />
<Button icon={copied ? <CheckOutlined /> : <CopyOutlined />} onClick={handleCopyClick} style={{ marginLeft: "6px" }}>
{copied ? <Translate id="theme.CodeBlock.copied">已复制</Translate> : <Translate id="theme.CodeBlock.copy">复制</Translate>}
</Button>
</span>
}
extra={
website && (
<a href={website}>
<LinkOutlined />
</a>
)
}>
<Typography.Paragraph style={{ color: "#595959" }}>👉 {remark}</Typography.Paragraph>
<Tooltip title={<Translate id="tooltip.switchLang">点击切换显示语言</Translate>}>
<Typography.Paragraph onClick={handleParagraphClick} style={{ cursor: "pointer", color: "#595959", maxHeight: "500px", overflowY: "auto" }}>
{mainPrompt}
<ConfigProvider
theme={{
token: {
colorPrimary: "#397e6a",
},
cssVar: true,
hashed: false,
algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
}}>
<Layout title={title} description={remark}>
<Row justify="center" style={{ marginTop: "20px" }}>
<Col xs={24} sm={22} md={20} lg={18} xl={16}>
<Card
className="shadow--md"
title={
<span>
{title} <Badge count={"Weight: " + weight} style={{ backgroundColor: "#52c41a" }} />
<Button icon={copied ? <CheckOutlined /> : <CopyOutlined />} onClick={handleCopyClick} style={{ marginLeft: "6px" }}>
{copied ? <Translate id="theme.CodeBlock.copied">已复制</Translate> : <Translate id="theme.CodeBlock.copy">复制</Translate>}
</Button>
</span>
}
extra={
website && (
<a href={website}>
<LinkOutlined />
</a>
)
}>
<Typography.Paragraph style={{ color: "#595959" }}>👉 {remark}</Typography.Paragraph>
<Tooltip title={<Translate id="tooltip.switchLang">点击切换显示语言</Translate>}>
<Typography.Paragraph onClick={handleParagraphClick} style={{ cursor: "pointer", maxHeight: "500px", overflowY: "auto" }}>
{mainPrompt}
</Typography.Paragraph>
</Tooltip>
<Space wrap>
{tags.map((tag) => (
<Link to={`/?tags=${tag}`} key={tag}>
<Tag color="blue">{tag}</Tag>
</Link>
))}
</Space>
<Typography.Paragraph style={{ color: "gray", fontSize: "0.9em", marginTop: "20px" }}>
<Translate id="comments.info">请在下方回复您对本提示词的意见、想法或分享。</Translate>
</Typography.Paragraph>
</Tooltip>
<Space wrap>
{tags.map((tag) => (
<Link to={`/?tags=${tag}`} key={tag}>
<Tag color="blue">{tag}</Tag>
</Link>
))}
</Space>
<Typography.Paragraph style={{ color: "gray", fontSize: "0.9em", marginTop: "20px" }}>
<Translate id="comments.info">请在下方回复您对本提示词的意见、想法或分享。</Translate>
</Typography.Paragraph>
<AdComponent type="transverse" />
<ShareButtons shareUrl={shareUrl} title={`${title}: ${remark}`} popOver={true} />
<Comments pageId={prompt.id} currentUserId={userAuth?.data?.id || 0} type="page" />
</Card>
</Col>
</Row>
</Layout>
<AdComponent type="transverse" />
<ShareButtons shareUrl={shareUrl} title={`${title}: ${remark}`} popOver={true} />
<Comments pageId={prompt.id} currentUserId={userAuth?.data?.id || 0} type="page" />
</Card>
</Col>
</Row>
</Layout>
</ConfigProvider>
);
}

Expand Down
242 changes: 127 additions & 115 deletions src/pages/community-prompts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import ShareButtons from "@site/src/pages/_components/ShareButtons";
import AdComponent from "@site/src/pages/_components/AdComponent";
import { AuthContext, AuthProvider } from "@site/src/pages/_components/AuthContext";
import Layout from "@theme/Layout";
import { Modal, Typography, Tooltip, message, Pagination, Dropdown, Space, Button, Input } from "antd";
import { Modal, Typography, Tooltip, message, Pagination, Dropdown, Space, Button, Input, ConfigProvider, theme } from "antd";
import { UpOutlined, DownOutlined, HomeOutlined, CopyOutlined, HeartOutlined, LoginOutlined } from "@ant-design/icons";

const { Search } = Input;
Expand Down Expand Up @@ -173,128 +173,140 @@ const CommunityPrompts = () => {

const truncate = (str, num) => (str.length <= num ? str : `${str.slice(0, num)}...`);

const isDarkMode = typeof document !== "undefined" && document.documentElement.getAttribute("data-theme") === "dark";

return (
<Layout title={TITLE} description={DESCRIPTION}>
<main className="margin-vert--lg" style={{ maxWidth: "1200px", margin: "auto" }}>
<Space wrap style={{ marginBottom: "20px" }}>
<Link to="/">
<HomeOutlined /> <Translate id="link.home">返回首页</Translate>
</Link>
{userAuth ? (
<Link to="/user/favorite">
<HeartOutlined /> <Translate id="link.myfavorite">我的收藏</Translate>
<ConfigProvider
theme={{
token: {
colorPrimary: "#397e6a",
},
cssVar: true,
hashed: false,
algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
}}>
<Space wrap style={{ marginBottom: "20px" }}>
<Link to="/">
<HomeOutlined /> <Translate id="link.home">返回首页</Translate>
</Link>
) : (
<Button onClick={() => setOpen(true)}>
<LoginOutlined /> <Translate id="button.login">登录</Translate>
</Button>
)}
<Dropdown.Button icon={<DownOutlined />} menu={fieldMenuProps}>
{sortField === "id" ? <Translate id="field.id">发布时间</Translate> : <Translate id="field.upvoteDifference">支持度</Translate>}
</Dropdown.Button>
<Dropdown.Button icon={<DownOutlined />} menu={orderMenuProps}>
{sortOrder === "asc" ? <Translate id="order.ascending">升序</Translate> : <Translate id="order.descending">降序</Translate>}
</Dropdown.Button>
<Search placeholder="Search" onSearch={onSearch} style={{ width: 200 }} allowClear />
</Space>
<ul className="clean-list showcaseList_Cwj2">
{userprompts.map((UserPrompt, index) => (
<li key={UserPrompt.id} className="card shadow--md">
<div className={clsx("card__body")} style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100%" }}>
<div>
<div className={clsx(styles.showcaseCardHeader)}>
<div className={`${styles.showcaseCardTitle} ${styles.shortEllipsis}`}>
<span className={styles.showcaseCardLink} style={{ color: "var(--ifm-color-primary)" }}>
{UserPrompt.title}
</span>
<span style={{ fontSize: "12px", color: "#999", marginLeft: "10px" }}>@{UserPrompt.owner}</span>
{userAuth ? (
<Link to="/user/favorite">
<HeartOutlined /> <Translate id="link.myfavorite">我的收藏</Translate>
</Link>
) : (
<Button onClick={() => setOpen(true)}>
<LoginOutlined /> <Translate id="button.login">登录</Translate>
</Button>
)}
<Dropdown.Button icon={<DownOutlined />} menu={fieldMenuProps}>
{sortField === "id" ? <Translate id="field.id">发布时间</Translate> : <Translate id="field.upvoteDifference">支持度</Translate>}
</Dropdown.Button>
<Dropdown.Button icon={<DownOutlined />} menu={orderMenuProps}>
{sortOrder === "asc" ? <Translate id="order.ascending">升序</Translate> : <Translate id="order.descending">降序</Translate>}
</Dropdown.Button>
<Search placeholder="Search" onSearch={onSearch} style={{ width: 200 }} allowClear />
</Space>
<ul className="clean-list showcaseList_Cwj2">
{userprompts.map((UserPrompt, index) => (
<li key={UserPrompt.id} className="card shadow--md">
<div className={clsx("card__body")} style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", height: "100%" }}>
<div>
<div className={clsx(styles.showcaseCardHeader)}>
<div className={`${styles.showcaseCardTitle} ${styles.shortEllipsis}`}>
<span className={styles.showcaseCardLink} style={{ color: "var(--ifm-color-primary)" }}>
{UserPrompt.title}
</span>
<span style={{ fontSize: "12px", color: "#999", marginLeft: "10px" }}>@{UserPrompt.owner}</span>
</div>
</div>
{UserPrompt.remark && <p className={styles.showcaseCardBody}>👉 {UserPrompt.remark}</p>}
<p className={styles.showcaseCardBody}>
{UserPrompt.notes ? (
<Tooltip placement="bottom" title={truncate(UserPrompt.notes, 300)} overlayStyle={{ maxWidth: 450 }}>
{UserPrompt.description}
</Tooltip>
) : (
UserPrompt.description
)}
</p>
</div>
{UserPrompt.remark && <p className={styles.showcaseCardBody}>👉 {UserPrompt.remark}</p>}
<p className={styles.showcaseCardBody}>
{UserPrompt.notes ? (
<Tooltip placement="bottom" title={truncate(UserPrompt.notes, 300)} overlayStyle={{ maxWidth: 450 }}>
{UserPrompt.description}
<div style={{ display: "flex", justifyContent: "space-between" }}>
<Button.Group>
<Tooltip title={translate({ id: "theme.CodeBlock.copy", message: "复制" })}>
<Button type="default" onClick={() => handleCopyClick(index)}>
<CopyOutlined />
{copiedIndex === index && <Translate id="theme.CodeBlock.copied">已复制</Translate>}
</Button>
</Tooltip>
) : (
UserPrompt.description
)}
</p>
</div>
<div style={{ display: "flex", justifyContent: "space-between" }}>
<Button.Group>
<Tooltip title={translate({ id: "theme.CodeBlock.copy", message: "复制" })}>
<Button type="default" onClick={() => handleCopyClick(index)}>
<CopyOutlined />
{copiedIndex === index && <Translate id="theme.CodeBlock.copied">已复制</Translate>}
</Button>
</Tooltip>
<Tooltip title={translate({ message: "收藏" })}>
<Button
type="default"
onClick={() => {
if (!userAuth) {
message.error("Please log in to vote and bookmark.");
return;
}
vote(UserPrompt.id, "upvote");
bookmark(UserPrompt.id);
}}>
<HeartOutlined />
</Button>
</Tooltip>
</Button.Group>
<Button.Group>
<Tooltip title={translate({ id: "upvote", message: "赞" })}>
<Button
type="default"
onClick={() => {
if (!userAuth) {
message.error("Please log in to vote and bookmark.");
return;
}
vote(UserPrompt.id, "upvote");
}}>
<UpOutlined />
{votedUpPromptIds.includes(UserPrompt.id) ? (UserPrompt.upvotes || 0) + 1 : UserPrompt.upvotes || 0}
</Button>
</Tooltip>
<Tooltip title={translate({ id: "downvote", message: "踩" })}>
<Button
type="default"
onClick={() => {
if (!userAuth) {
message.error("Please log in to vote and bookmark.");
return;
}
vote(UserPrompt.id, "downvote");
}}>
<DownOutlined />
{votedDownPromptIds.includes(UserPrompt.id) ? (UserPrompt.downvotes || 0) + 1 : UserPrompt.downvotes || 0}
</Button>
</Tooltip>
</Button.Group>
<Tooltip title={translate({ message: "收藏" })}>
<Button
type="default"
onClick={() => {
if (!userAuth) {
message.error("Please log in to vote and bookmark.");
return;
}
vote(UserPrompt.id, "upvote");
bookmark(UserPrompt.id);
}}>
<HeartOutlined />
</Button>
</Tooltip>
</Button.Group>
<Button.Group>
<Tooltip title={translate({ id: "upvote", message: "赞" })}>
<Button
type="default"
onClick={() => {
if (!userAuth) {
message.error("Please log in to vote and bookmark.");
return;
}
vote(UserPrompt.id, "upvote");
}}>
<UpOutlined />
{votedUpPromptIds.includes(UserPrompt.id) ? (UserPrompt.upvotes || 0) + 1 : UserPrompt.upvotes || 0}
</Button>
</Tooltip>
<Tooltip title={translate({ id: "downvote", message: "踩" })}>
<Button
type="default"
onClick={() => {
if (!userAuth) {
message.error("Please log in to vote and bookmark.");
return;
}
vote(UserPrompt.id, "downvote");
}}>
<DownOutlined />
{votedDownPromptIds.includes(UserPrompt.id) ? (UserPrompt.downvotes || 0) + 1 : UserPrompt.downvotes || 0}
</Button>
</Tooltip>
</Button.Group>
</div>
</div>
</div>
</li>
))}
</ul>
<AdComponent type="transverse" />
<div style={{ display: "flex", justifyContent: "center" }}>
<Pagination current={currentPage} pageSize={pageSize} total={total} showQuickJumper showSizeChanger={false} onChange={onChangePage} />
</div>
<div style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}>
<Text type="secondary" style={{ color: "var(--ifm-color-secondary)", fontSize: "10px" }}>
{translate({
message:
"本页面展示的提示词均由网友分享和上传，我们无法保证内容的准确性、质量或完整性，同时也不对因内容引发的任何法律责任承担责任。如果发现有侵权或者其他问题，可以联系我们进行处理。我们将在收到通知后尽快处理。",
})}
</Text>
</div>
<Modal open={open} footer={null} onCancel={() => setOpen(false)}>
<LoginComponent />
</Modal>
<ShareButtons shareUrl={Shareurl} title={TITLE} popOver={false} />
</li>
))}
</ul>
<AdComponent type="transverse" />
<div style={{ display: "flex", justifyContent: "center" }}>
<Pagination current={currentPage} pageSize={pageSize} total={total} showQuickJumper showSizeChanger={false} onChange={onChangePage} />
</div>
<div style={{ display: "flex", justifyContent: "center", marginTop: "10px" }}>
<Text type="secondary" style={{ color: "var(--ifm-color-secondary)", fontSize: "10px" }}>
{translate({
message:
"本页面展示的提示词均由网友分享和上传，我们无法保证内容的准确性、质量或完整性，同时也不对因内容引发的任何法律责任承担责任。如果发现有侵权或者其他问题，可以联系我们进行处理。我们将在收到通知后尽快处理。",
})}
</Text>
</div>
<Modal open={open} footer={null} onCancel={() => setOpen(false)}>
<LoginComponent />
</Modal>
<ShareButtons shareUrl={Shareurl} title={TITLE} popOver={false} />
</ConfigProvider>
</main>
</Layout>
);
Expand Down
Loading

0 comments on commit 39b2317

Please sign in to comment.