aboutsummaryrefslogtreecommitdiff
path: root/FrontEnd/src/views/home
diff options
context:
space:
mode:
Diffstat (limited to 'FrontEnd/src/views/home')
-rw-r--r--FrontEnd/src/views/home/TimelineListView.tsx97
-rw-r--r--FrontEnd/src/views/home/WebsiteIntroduction.tsx77
-rw-r--r--FrontEnd/src/views/home/index.css42
-rw-r--r--FrontEnd/src/views/home/index.tsx78
4 files changed, 0 insertions, 294 deletions
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<TimelineListItemProps> = ({ timeline }) => {
- return (
- <div className="home-timeline-list-item home-timeline-list-item-timeline">
- <svg className="home-timeline-list-item-line" viewBox="0 0 120 100">
- <path
- d="M 80,50 m 0,-12 a 12 12 180 1 1 0,24 12 12 180 1 1 0,-24 z M 60,0 h 40 v 100 h -40 z"
- fillRule="evenodd"
- fill="#007bff"
- />
- </svg>
- <div>
- {timeline.timelineOwner}/{timeline.timelineName}
- </div>
- <Link to={`${timeline.timelineOwner}/${timeline.timelineName}`}>
- <IconButton icon="arrow-right" className="ms-3" />
- </Link>
- </div>
- );
-};
-
-const TimelineListArrow: React.FC = () => {
- return (
- <div>
- <div className="home-timeline-list-item">
- <svg className="home-timeline-list-item-line" viewBox="0 0 120 60">
- <path d="M 60,0 h 40 v 20 l -20,20 l -20,-20 z" fill="#007bff" />
- </svg>
- </div>
- <div className="home-timeline-list-item">
- <svg
- className="home-timeline-list-item-line home-timeline-list-loading-head"
- viewBox="0 0 120 40"
- >
- <path
- d="M 60,10 l 20,20 l 20,-20"
- fill="none"
- stroke="#007bff"
- strokeWidth="5"
- />
- </svg>
- </div>
- </div>
- );
-};
-
-interface TimelineListViewProps {
- headerText?: I18nText;
- timelines?: TimelineBookmark[];
-}
-
-const TimelineListView: React.FC<TimelineListViewProps> = ({
- headerText,
- timelines,
-}) => {
- const { t } = useTranslation();
-
- return (
- <div className="home-timeline-list">
- <div className="home-timeline-list-item">
- <svg className="home-timeline-list-item-line" viewBox="0 0 120 120">
- <path
- d="M 0,20 Q 80,20 80,80 l 0,40"
- stroke="#007bff"
- strokeWidth="40"
- fill="none"
- />
- </svg>
- <h3>{convertI18nText(headerText, t)}</h3>
- </div>
- {timelines != null
- ? timelines.map((t) => (
- <TimelineListItem
- key={`${t.timelineOwner}/${t.timelineName}`}
- timeline={t}
- />
- ))
- : null}
- <TimelineListArrow />
- </div>
- );
-};
-
-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 (
- <div className={className} style={style}>
- <h2>
- 欢迎来到<strong>时间线</strong>！🎉🎉🎉
- </h2>
- <p>
- 本网站由无数个独立的时间线构成，每一个时间线都是一个消息列表，类似于一个聊天软件（比如QQ）。
- </p>
- <p>
- 如果你拥有一个账号，<Link to="/login">登陆</Link>
- 后你可以自由地在属于你的时间线中发送内容，支持markdown和上传图片哦！你可以创建一个新的时间线来开启一个新的话题。你也可以设置相关权限，只让一部分人能看到时间线的内容。
- </p>
- <p>
- 如果你没有账号，那么你可以去浏览一下公开的时间线，比如下面这些站长设置的高光时间线。
- </p>
- <p>
- 鉴于这个网站在我的小型服务器上部署，所以没有开放注册。如果你也想把这个服务部署到自己的服务器上，你可以在
- <Link to="/about">关于</Link>页面找到一些信息。
- </p>
- <p>
- <small className="text-secondary">
- 这一段介绍是我的对象抱怨多次我的网站他根本看不明白之后加的，希望你能顺利看懂这个网站的逻辑！😅
- </small>
- </p>
- </div>
- );
- } else {
- return (
- <div className={className} style={style}>
- <h2>
- Welcome to <strong>Timeline</strong>!🎉🎉🎉
- </h2>
- <p>
- This website consists of many individual timelines. Each timeline is a
- list of messages just like a chat app.
- </p>
- <p>
- If you do have an account, you can <Link to="/login">login</Link> 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.
- </p>
- <p>
- If you don&apos;t have an account, you can view some public timelines
- like highlight timelines below set by website manager.
- </p>
- <p>
- 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 <Link to="/about">about</Link>{" "}
- page.
- </p>
- <p>
- <small className="text-secondary">
- 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!😅
- </small>
- </p>
- </div>
- );
- }
-};
-
-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<string>("");
-
- const [highlightTimelineState, setHighlightTimelineState] = React.useState<
- "loading" | "done" | "error"
- >("loading");
- const [highlightTimelines, setHighlightTimelines] = React.useState<
- Page<TimelineBookmark> | 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 (
- <>
- <SearchInput
- className="mx-2 my-3 home-search"
- value={navText}
- onChange={setNavText}
- onButtonClick={() => {
- navigate(`search?q=${navText}`);
- }}
- alwaysOneline
- />
- <WebsiteIntroduction className="m-2" />
- <TimelineListView
- headerText={highlightTimelineMessageMap[highlightTimelineState]}
- timelines={highlightTimelines?.items}
- />
- </>
- );
-};
-
-export default HomeV2;
generated by cgit v1.2.3 (git 2.46.0) at 2025-09-28 21:42:39 +0000