From 0e183074b326cf04a23ae1f1ba8dcc56166df485 Mon Sep 17 00:00:00 2001 From: crupest Date: Thu, 20 Jul 2023 20:44:15 +0800 Subject: ... --- FrontEnd/src/views/about/author-avatar.png | Bin 12038 -> 0 bytes FrontEnd/src/views/about/github.png | Bin 4268 -> 0 bytes FrontEnd/src/views/about/index.css | 4 - FrontEnd/src/views/about/index.tsx | 143 ------------------------ FrontEnd/src/views/common/Card.css | 7 +- FrontEnd/src/views/common/Card.tsx | 26 ++--- FrontEnd/src/views/common/index.css | 5 +- FrontEnd/src/views/common/theme.css | 2 +- FrontEnd/src/views/home/TimelineListView.tsx | 97 ---------------- FrontEnd/src/views/home/WebsiteIntroduction.tsx | 77 ------------- FrontEnd/src/views/home/index.css | 42 ------- FrontEnd/src/views/home/index.tsx | 78 ------------- 12 files changed, 17 insertions(+), 464 deletions(-) delete mode 100644 FrontEnd/src/views/about/author-avatar.png delete mode 100644 FrontEnd/src/views/about/github.png delete mode 100644 FrontEnd/src/views/about/index.css delete mode 100644 FrontEnd/src/views/about/index.tsx delete mode 100644 FrontEnd/src/views/home/TimelineListView.tsx delete mode 100644 FrontEnd/src/views/home/WebsiteIntroduction.tsx delete mode 100644 FrontEnd/src/views/home/index.css delete mode 100644 FrontEnd/src/views/home/index.tsx (limited to 'FrontEnd/src/views') diff --git a/FrontEnd/src/views/about/author-avatar.png b/FrontEnd/src/views/about/author-avatar.png deleted file mode 100644 index d890d8d0..00000000 Binary files a/FrontEnd/src/views/about/author-avatar.png and /dev/null differ diff --git a/FrontEnd/src/views/about/github.png b/FrontEnd/src/views/about/github.png deleted file mode 100644 index ea6ff545..00000000 Binary files a/FrontEnd/src/views/about/github.png and /dev/null differ diff --git a/FrontEnd/src/views/about/index.css b/FrontEnd/src/views/about/index.css deleted file mode 100644 index 2574f4b7..00000000 --- a/FrontEnd/src/views/about/index.css +++ /dev/null @@ -1,4 +0,0 @@ -.about-link-icon { - width: 1.2em; - height: 1.2em; -} diff --git a/FrontEnd/src/views/about/index.tsx b/FrontEnd/src/views/about/index.tsx deleted file mode 100644 index 093da894..00000000 --- a/FrontEnd/src/views/about/index.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import { useTranslation, Trans } from "react-i18next"; - -import authorAvatarUrl from "./author-avatar.png"; -import githubLogoUrl from "./github.png"; - -import Card from "../common/Card"; - -import "./index.css"; - -const frontendCredits: { - name: string; - url: string; -}[] = [ - { - name: "reactjs", - url: "https://reactjs.org", - }, - { - name: "typescript", - url: "https://www.typescriptlang.org", - }, - { - name: "bootstrap", - url: "https://getbootstrap.com", - }, - { - name: "vite", - url: "https://vitejs.dev", - }, - { - name: "eslint", - url: "https://eslint.org", - }, - { - name: "prettier", - url: "https://prettier.io", - }, - { - name: "pepjs", - url: "https://github.com/jquery/PEP", - }, -]; - -const backendCredits: { - name: string; - url: string; -}[] = [ - { - name: "ASP.NET Core", - url: "https://dotnet.microsoft.com/learn/aspnet/what-is-aspnet-core", - }, - { name: "sqlite", url: "https://sqlite.org" }, - { - name: "ImageSharp", - url: "https://github.com/SixLabors/ImageSharp", - }, -]; - -export default function AboutPage() { - const { t } = useTranslation(); - - return ( -
- -

{t("about.author.title")}

-
-
- -

- {t("about.author.name")} - crupest -

-

- {t("about.author.introduction")} - {t("about.author.introductionContent")} -

-
-

- {t("about.author.links")} - - - -

-
- - -

{t("about.site.title")}

-

- - 01234 - 56 - -

-

- - {t("about.site.repo")} - -

- - -

{t("about.credits.title")}

-

{t("about.credits.content")}

-

{t("about.credits.frontend")}

-
    - {frontendCredits.map((item, index) => { - return ( -
  • - - {item.name} - -
    • - ); - })} -
  • ...
    • -
-

{t("about.credits.backend")}

-
    - {backendCredits.map((item, index) => { - return ( -
  • - - {item.name} - -
    • - ); - })} -
  • ...
    • -
- -
- ); -} diff --git a/FrontEnd/src/views/common/Card.css b/FrontEnd/src/views/common/Card.css index fa470130..98cb4cdd 100644 --- a/FrontEnd/src/views/common/Card.css +++ b/FrontEnd/src/views/common/Card.css @@ -1,10 +1,9 @@ .cru-card { - border: 1px solid; - border-color: #e9ecef; border-radius: var(--cru-card-border-radius); + background-color: var(--cru-primary-container-color); transition: all 0.3s; } .cru-card:hover { - border-color: var(--cru-primary-color); -} \ No newline at end of file + border-color: var(--cru-primary-1-color); +} diff --git a/FrontEnd/src/views/common/Card.tsx b/FrontEnd/src/views/common/Card.tsx index ebbce77e..50632006 100644 --- a/FrontEnd/src/views/common/Card.tsx +++ b/FrontEnd/src/views/common/Card.tsx @@ -1,19 +1,21 @@ +import { ComponentPropsWithoutRef, Ref } from "react"; import classNames from "classnames"; -import * as React from "react"; import "./Card.css"; -function _Card( - { - className, - children, - ...otherProps - }: React.PropsWithChildren>, - ref: React.ForwardedRef -): React.ReactElement | null { +interface CardProps extends ComponentPropsWithoutRef<"div"> { + containerRef: Ref; +} + +export default function Card({ + className, + children, + containerRef, + ...otherProps +}: CardProps) { return (
@@ -21,7 +23,3 @@ function _Card(
); } - -const Card = React.forwardRef(_Card); - -export default Card; diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css index 789a0f05..eb82c4bf 100644 --- a/FrontEnd/src/views/common/index.css +++ b/FrontEnd/src/views/common/index.css @@ -10,10 +10,7 @@ body { font-family: var(--cru-default-font-family); background: var(--cru-surface-color); color: var(--cru-surface-on-color); -} - -button { - background-color: unset; + line-height: 1.2; } .cru-text-center { diff --git a/FrontEnd/src/views/common/theme.css b/FrontEnd/src/views/common/theme.css index 9c9e1645..3ad45996 100644 --- a/FrontEnd/src/views/common/theme.css +++ b/FrontEnd/src/views/common/theme.css @@ -2,5 +2,5 @@ :root { --cru-default-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - --cru-card-border-radius: 8px; + --cru-card-border-radius: 4px; } \ No newline at end of file diff --git a/FrontEnd/src/views/home/TimelineListView.tsx b/FrontEnd/src/views/home/TimelineListView.tsx deleted file mode 100644 index fbcdc9b0..00000000 --- a/FrontEnd/src/views/home/TimelineListView.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import * as React from "react"; -import { useTranslation } from "react-i18next"; -import { Link } from "react-router-dom"; - -import { convertI18nText, I18nText } from "@/common"; - -import { TimelineBookmark } from "@/http/bookmark"; - -import IconButton from "../common/button/IconButton"; - -interface TimelineListItemProps { - timeline: TimelineBookmark; -} - -const TimelineListItem: React.FC = ({ timeline }) => { - return ( -
- - - -
- {timeline.timelineOwner}/{timeline.timelineName} -
- - - -
- ); -}; - -const TimelineListArrow: React.FC = () => { - return ( -
-
- - - -
-
- - - -
-
- ); -}; - -interface TimelineListViewProps { - headerText?: I18nText; - timelines?: TimelineBookmark[]; -} - -const TimelineListView: React.FC = ({ - headerText, - timelines, -}) => { - const { t } = useTranslation(); - - return ( -
-
- - - -

{convertI18nText(headerText, t)}

-
- {timelines != null - ? timelines.map((t) => ( - - )) - : null} - -
- ); -}; - -export default TimelineListView; diff --git a/FrontEnd/src/views/home/WebsiteIntroduction.tsx b/FrontEnd/src/views/home/WebsiteIntroduction.tsx deleted file mode 100644 index e843c325..00000000 --- a/FrontEnd/src/views/home/WebsiteIntroduction.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import * as React from "react"; -import { useTranslation } from "react-i18next"; -import { Link } from "react-router-dom"; - -const WebsiteIntroduction: React.FC<{ - className?: string; - style?: React.CSSProperties; -}> = ({ className, style }) => { - const { i18n } = useTranslation(); - - if (i18n.language.startsWith("zh")) { - return ( -
-

- 欢迎来到时间线！🎉🎉🎉 -

-

- 本网站由无数个独立的时间线构成，每一个时间线都是一个消息列表，类似于一个聊天软件（比如QQ）。 -

-

- 如果你拥有一个账号，登陆 - 后你可以自由地在属于你的时间线中发送内容，支持markdown和上传图片哦！你可以创建一个新的时间线来开启一个新的话题。你也可以设置相关权限，只让一部分人能看到时间线的内容。 -

-

- 如果你没有账号，那么你可以去浏览一下公开的时间线，比如下面这些站长设置的高光时间线。 -

-

- 鉴于这个网站在我的小型服务器上部署，所以没有开放注册。如果你也想把这个服务部署到自己的服务器上，你可以在 - 关于页面找到一些信息。 -

-

- - 这一段介绍是我的对象抱怨多次我的网站他根本看不明白之后加的，希望你能顺利看懂这个网站的逻辑！😅 - -

-
- ); - } else { - return ( -
-

- Welcome to Timeline!🎉🎉🎉 -

-

- This website consists of many individual timelines. Each timeline is a - list of messages just like a chat app. -

-

- If you do have an account, you can login and - post messages, which supports Markdown and images, in your timelines. - You can also create a new timeline to open a new topic. You can set - the permission of a timeline to only allow specified people to see the - content of the timeline. -

-

- If you don't have an account, you can view some public timelines - like highlight timelines below set by website manager. -

-

- Since this website is hosted on my tiny server, so account registry is - not opened. If you want to host this service on your own server, you - can find some useful information on about{" "} - page. -

-

- - This introduction is added after my lover complained a lot of times - about the obscuration of my website. May you understand the logic of - it!😅 - -

-
- ); - } -}; - -export default WebsiteIntroduction; diff --git a/FrontEnd/src/views/home/index.css b/FrontEnd/src/views/home/index.css deleted file mode 100644 index 89d36f0d..00000000 --- a/FrontEnd/src/views/home/index.css +++ /dev/null @@ -1,42 +0,0 @@ -.home-timeline-list-item { - display: flex; - align-items: center; -} - -.home-timeline-list-item-timeline { - transition: background 0.8s; - animation: 0.8s home-timeline-list-item-timeline-enter; -} -.home-timeline-list-item-timeline:hover { - background: #e9ecef; -} - -@keyframes home-timeline-list-item-timeline-enter { - from { - transform: translate(-100%, 0); - opacity: 0; - } -} -.home-timeline-list-item-line { - width: 80px; - flex-shrink: 0; -} - -@keyframes home-timeline-list-loading-head-animation { - from { - transform: translate(0, -30px); - opacity: 1; - } - to { - opacity: 0; - } -} -.home-timeline-list-loading-head { - animation: 1s infinite home-timeline-list-loading-head-animation; -} - -@media (min-width: 576px) { - .home-search { - float: right; - } -} diff --git a/FrontEnd/src/views/home/index.tsx b/FrontEnd/src/views/home/index.tsx deleted file mode 100644 index 3c80fb0c..00000000 --- a/FrontEnd/src/views/home/index.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import * as React from "react"; -import { useNavigate } from "react-router-dom"; - -import { highlightTimelineUsername } from "@/common"; - -import { Page } from "@/http/common"; -import { getHttpBookmarkClient, TimelineBookmark } from "@/http/bookmark"; - -import SearchInput from "../common/SearchInput"; -import TimelineListView from "./TimelineListView"; -import WebsiteIntroduction from "./WebsiteIntroduction"; - -import "./index.css"; - -const highlightTimelineMessageMap = { - loading: "home.loadingHighlightTimelines", - done: "home.loadedHighlightTimelines", - error: "home.errorHighlightTimelines", -} as const; - -const HomeV2: React.FC = () => { - const navigate = useNavigate(); - - const [navText, setNavText] = React.useState(""); - - const [highlightTimelineState, setHighlightTimelineState] = React.useState< - "loading" | "done" | "error" - >("loading"); - const [highlightTimelines, setHighlightTimelines] = React.useState< - Page | undefined - >(); - - React.useEffect(() => { - if (highlightTimelineState === "loading") { - let subscribe = true; - void getHttpBookmarkClient() - .list(highlightTimelineUsername) - .then( - (data) => { - if (subscribe) { - setHighlightTimelineState("done"); - setHighlightTimelines(data); - } - }, - () => { - if (subscribe) { - setHighlightTimelineState("error"); - setHighlightTimelines(undefined); - } - } - ); - return () => { - subscribe = false; - }; - } - }, [highlightTimelineState]); - - return ( - <> - { - navigate(`search?q=${navText}`); - }} - alwaysOneline - /> - - - - ); -}; - -export default HomeV2; -- cgit v1.2.3