31 |
{e.preventDefault();e.target.click();}} />
32 |
33 | {cur_content}
34 |
35 |
36 |
37 | {this.props.stack.length>2 &&
38 |
39 | }
40 | {cur_title}
41 |
42 |
43 | );
44 | }
45 | }
--------------------------------------------------------------------------------
/src/Message.js:
--------------------------------------------------------------------------------
1 | import React, {useState, useEffect} from 'react';
2 | import {get_json, token_param} from './flows_api';
3 | import {Time, HAPI_DOMAIN} from './Common';
4 |
5 | const FOLD_LENGTH=100;
6 | function FoldedPre(props) {
7 | let [folded,set_folded]=useState(()=>props.text.length>FOLD_LENGTH);
8 |
9 | let showing_text=folded ? props.text.substr(0,FOLD_LENGTH) : props.text;
10 | return (
11 |
12 | {showing_text}
13 | {folded &&
14 | <>
15 | …
16 | set_folded(false)}>展开
17 |
18 | }
19 |
20 | );
21 | }
22 |
23 | export function MessageViewer(props) {
24 | let [res,set_res]=useState(null);
25 |
26 | useEffect(()=>{
27 | fetch(HAPI_DOMAIN+'/api/messages/list?role=msg'+token_param(props.token))
28 | .then(get_json)
29 | .then((json)=>{
30 | if(json.error)
31 | throw new Error(json.error_msg||json.error);
32 |
33 | set_res(json.data);
34 | })
35 | .catch((e)=>{
36 | alert('加载失败。'+e);
37 | });
38 | },[]);
39 |
40 | if(res===null)
41 | return (
42 |
43 | 正在获取……
44 |
45 | );
46 |
47 | return (
48 |
49 | {res.map((msg)=>(
50 |
51 |
52 |
53 | {msg.title||'通知'}
54 |
55 |
56 |
57 |
58 |
59 | ))}
60 | {res.length===0 &&
61 |
62 | 暂无系统消息
63 |
64 | }
65 |
66 | );
67 | }
--------------------------------------------------------------------------------
/src/Title.css:
--------------------------------------------------------------------------------
1 | .title-bar {
2 | z-index: 10;
3 | position: sticky;
4 | top: -6em;
5 | left: 0;
6 | width: 100%;
7 | height: 9em;
8 | background-color: rgba(255,255,255,.85);
9 | color: black;
10 | box-shadow: 0 0 25px rgba(0,0,0,.4);
11 | margin-bottom: 1em;
12 | backdrop-filter: blur(5px);
13 | }
14 | .root-no-blur .title-bar {
15 | backdrop-filter: unset;
16 | }
17 |
18 | .root-dark-mode .title-bar {
19 | background-color: hsla(0,0%,12%,.85);
20 | color: var(--foreground-dark);
21 | box-shadow: 0 0 5px rgba(255,255,255,.1);
22 | }
23 |
24 | .control-bar {
25 | display: flex;
26 | margin-top: .5em;
27 | line-height: 2em;
28 | }
29 |
30 | .control-btn {
31 | flex: 0 0 4.5em;
32 | text-align: center;
33 | color: black;
34 | border-radius: 5px;
35 | }
36 | .control-btn:hover {
37 | background-color: #666666;
38 | color: white;
39 | }
40 | .control-btn-label {
41 | margin-left: .25rem;
42 | font-size: .9em;
43 | vertical-align: .05em;
44 | }
45 | @media screen and (max-width: 900px) {
46 | .control-btn {
47 | flex: 0 0 2.5em;
48 | }
49 | .control-btn-label {
50 | display: none;
51 | }
52 | .control-search {
53 | padding: 0 .5em;
54 | }
55 | }
56 |
57 | .root-dark-mode .control-btn {
58 | color: var(--foreground-dark);
59 | opacity: .9;
60 | }
61 | .root-dark-mode .control-btn:hover {
62 | color: var(--foreground-dark);
63 | opacity: 1;
64 | }
65 |
66 | .control-search {
67 | flex: auto;
68 | color: black;
69 | background-color: rgba(255,255,255,.3) !important;
70 | margin: 0 .5em;
71 | min-width: 8em;
72 | }
73 |
74 | .control-search:focus {
75 | background-color: white !important;
76 | }
77 |
78 | .root-dark-mode .control-search {
79 | background-color: hsla(0,0%,35%,.6) !important;
80 | color: var(--foreground-dark);
81 | }
82 | .root-dark-mode .control-search:focus {
83 | background-color: hsl(0,0%,80%) !important;
84 | color: black !important;
85 | }
86 |
87 | .list-menu {
88 | text-align: center;
89 | }
90 |
91 | .help-desc-box p {
92 | margin: .5em;
93 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # The Seed
2 |
3 | A refined version of the front-end code used at PKU Helper.
4 |
5 | **Note that this repository does not belong to any website. Developers of this repository take no responsibility of contents on websites using it.**
6 |
7 | We do not provide any kind of tech support. Use at your own risk.
8 |
9 | ## Installation
10 |
11 | A corresponding backend server is required to host APIs for the front-end code.
12 | Visit [jimmielin/the-light](https://github.com/jimmielin/the-light) for setup instructions for backend server.
13 |
14 | Install `nodejs` and run `npm install` to install requirements.
15 |
16 | As a normal Create-React-App project, run `npm start` to start local dev server,
17 | and run `npm run build` to build production HTML files into `build` directory.
18 |
19 | You may need to run `git submodule init && git submodule update --remote` if submodule is not cloned.
20 |
21 | ## Customization and Configuration
22 |
23 | All branding information (e.g. website title, API domain, slogan) has been removed, and it is up to you to customize them.
24 |
25 | Those customizable variables start with `_BRAND` in their name.
26 | You can search for `_BRAND_` in `src` and `public` directory and replace all occurrences to the value you want.
27 |
28 | Moreover, `index.html` includes these vital parameters that you would mostly like to change:
29 |
30 | - `__WEBHOLE_HAPI_DOMAIN`: hole backend API domain, e.g. `https://hapi.your_domain.com`
31 | - `__WEBHOLE_GATEWAY_DOMAIN`: gateway domain for user management, e.g. `https://gateway.your_domain.com`
32 | - `__WEBHOLE_DEV_SERVER_FLAG`: set to `true` if it is a development environment (will show an alert on the page)
33 | - `__WEBHOLE_DISABLE_WEBP`: set to `true` if hole backend API does not support webp image format
34 |
35 | ## License
36 |
37 | This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
38 |
39 | This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the [GNU General Public License](https://www.gnu.org/licenses/gpl-3.0.zh-cn.html) for more details.
40 |
--------------------------------------------------------------------------------
/src/Welcome.css:
--------------------------------------------------------------------------------
1 | .box.login-box {
2 | font-size: 1rem;
3 | text-align: center;
4 | padding: 1em .25em;
5 | border-radius: 10px;
6 | }
7 |
8 | .login-box-background {
9 | color: black;
10 | background-color: rgba(255,255,255,.85);
11 | box-shadow: 0 0 30px rgba(255,255,255,.6);
12 | backdrop-filter: blur(5px);
13 | }
14 |
15 | .root-dark-mode .box.login-box-background {
16 | color: var(--foreground-dark);
17 | background-color: rgba(0,0,0,.7);
18 | box-shadow: 0 0 200px rgba(255,255,255,.4);
19 | }
20 | .login-box-btn {
21 | min-width: 12em;
22 | }
23 | .login-box p {
24 | margin: .5rem 0;
25 | }
26 |
27 | .login-box .login-box-title {
28 | font-size: 1.1em;
29 | margin-bottom: 1rem;
30 | }
31 |
32 | .title-bar-landing {
33 | height: 7em;
34 | position: unset;
35 | margin-bottom: 2em;
36 | }
37 |
38 | .landing-container {
39 | margin: 0 auto 4em auto;
40 | padding: 0 2em;
41 | max-width: 1100px;
42 | display: flex;
43 | flex-direction: row-reverse;
44 | }
45 |
46 | .landing-container-side {
47 | flex: 0 0 350px;
48 | margin-left: 2em;
49 | }
50 |
51 | .landing-container-content {
52 | flex: 1 1;
53 | }
54 |
55 | .landing-content {
56 | margin-top: 1rem;
57 | text-shadow: 0 0 6px black, 0 0 3px black, 0 0 2px black;
58 | }
59 | .landing-content h1 {
60 | font-size: 1.35em;
61 | }
62 | .landing-content p {
63 | font-size: 1.05em;
64 | }
65 | .landing-content a {
66 | color: unset;
67 | border-bottom: 1px solid white;
68 | margin-bottom: -1px;
69 | }
70 | .landing-content strong {
71 | font-weight: normal;
72 | color: #ffff88;
73 | }
74 |
75 | .bg-img-landing {
76 | filter: contrast(.9) brightness(0.75);
77 | }
78 |
79 | @media screen and (max-width: 950px) {
80 | .landing-container {
81 | padding: 0 .5em;
82 | }
83 | .landing-container-side {
84 | flex: 0 0 310px;
85 | margin-left: 1em;
86 | }
87 | .landing-content h1 {
88 | font-size: 1.2em;
89 | }
90 | .landing-content p {
91 | font-size: 1em;
92 | }
93 | .title-bar-landing {
94 | margin-bottom: .5em;
95 | }
96 | }
97 |
98 | @media screen and (max-width: 650px) {
99 | .landing-container {
100 | padding: 0 1.5em;
101 | }
102 | .landing-container {
103 | display: block;
104 | }
105 | .landing-container-side {
106 | margin-left: 0;
107 | }
108 | .title-bar-landing {
109 | margin-bottom: 1.5em;
110 | }
111 | .landing-content {
112 | margin-top: 1em;
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/src/icomoon.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'icomoon';
3 | src:
4 | url('fonts_9/icomoon.ttf?tud302') format('truetype'),
5 | url('fonts_9/icomoon.woff?tud302') format('woff'),
6 | url('fonts_9/icomoon.svg?tud302#icomoon') format('svg');
7 | font-weight: normal;
8 | font-style: normal;
9 | font-display: block;
10 | }
11 |
12 | .icon {
13 | /* use !important to prevent issues with browser extensions that change fonts */
14 | font-family: 'icomoon' !important;
15 | speak: never;
16 | font-style: normal;
17 | font-weight: normal;
18 | font-variant: normal;
19 | text-transform: none;
20 | line-height: 1;
21 | vertical-align: -.0625em;
22 |
23 | /* Better Font Rendering =========== */
24 | -webkit-font-smoothing: antialiased;
25 | -moz-osx-font-smoothing: grayscale;
26 | }
27 |
28 | .icon-send:before {
29 | content: "\e900";
30 | }
31 | .icon-pen:before {
32 | content: "\e908";
33 | }
34 | .icon-image:before {
35 | content: "\e90d";
36 | }
37 | .icon-mic:before {
38 | content: "\e91e";
39 | }
40 | .icon-textfile:before {
41 | content: "\e926";
42 | }
43 | .icon-history:before {
44 | content: "\e94d";
45 | }
46 | .icon-reply:before {
47 | content: "\e96b";
48 | }
49 | .icon-quote:before {
50 | content: "\e977";
51 | }
52 | .icon-loading:before {
53 | content: "\e979";
54 | }
55 | .icon-login:before {
56 | content: "\e98d";
57 | }
58 | .icon-settings:before {
59 | content: "\e994";
60 | }
61 | .icon-stats:before {
62 | content: "\e99b";
63 | }
64 | .icon-fire:before {
65 | content: "\e9a9";
66 | }
67 | .icon-locate:before {
68 | content: "\e9b3";
69 | }
70 | .icon-upload:before {
71 | content: "\e9c3";
72 | }
73 | .icon-flag:before {
74 | content: "\e9cc";
75 | }
76 | .icon-attention:before {
77 | content: "\e9d3";
78 | }
79 | .icon-star:before {
80 | content: "\e9d7";
81 | }
82 | .icon-star-ok:before {
83 | content: "\e9d9";
84 | }
85 | .icon-plus:before {
86 | content: "\ea0a";
87 | }
88 | .icon-about:before {
89 | content: "\ea0c";
90 | }
91 | .icon-close:before {
92 | content: "\ea0d";
93 | }
94 | .icon-logout:before {
95 | content: "\ea14";
96 | }
97 | .icon-play:before {
98 | content: "\ea15";
99 | }
100 | .icon-pause:before {
101 | content: "\ea16";
102 | }
103 | .icon-refresh:before {
104 | content: "\ea2e";
105 | }
106 | .icon-forward:before {
107 | content: "\ea42";
108 | }
109 | .icon-back:before {
110 | content: "\ea44";
111 | }
112 | .icon-order-rev:before {
113 | content: "\ea46";
114 | font-size: 1.2em;
115 | }
116 | .icon-order-rev-down:before {
117 | content: "\ea47";
118 | font-size: 1.2em;
119 | }
120 | .icon-github:before {
121 | content: "\eab0";
122 | }
123 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --foreground-dark: hsl(0,0%,93%);
3 | }
4 |
5 | body, textarea, pre {
6 | font-family: 'Segoe UI', '微软雅黑', 'Microsoft YaHei', sans-serif;
7 | }
8 |
9 | * {
10 | box-sizing: border-box;
11 | word-wrap: break-word;
12 | -webkit-overflow-scrolling: touch;
13 | }
14 |
15 | p, pre {
16 | margin: 0;
17 | }
18 |
19 | a {
20 | text-decoration: none;
21 | cursor: pointer;
22 | }
23 |
24 | pre {
25 | white-space: pre-line;
26 | }
27 |
28 | code {
29 | font-family: Consolas, Courier, monospace;
30 | }
31 |
32 | body {
33 | background-size: cover;
34 | user-select: none;
35 | background-color: #333;
36 | color: white;
37 | margin: 0;
38 | padding: 0;
39 | overflow-x: hidden;
40 | text-size-adjust: 100%;
41 | }
42 |
43 | body.root-dark-mode {
44 | background-color: black;
45 | }
46 |
47 | html::-webkit-scrollbar {
48 | display: none;
49 | }
50 | html {
51 | scrollbar-width: none;
52 | -ms-overflow-style: none;
53 | }
54 |
55 | :root {
56 | --var-link-color: #00c;
57 | }
58 | .root-dark-mode .box, .root-dark-mode .sidebar, .root-dark-mode .sidebar-title {
59 | --var-link-color: #9bf;
60 | }
61 |
62 | a, .link-color {
63 | color: var(--var-link-color);
64 | }
65 | a:not(.no-underline):hover {
66 | border-bottom: 1px solid var(--var-link-color);
67 | margin-bottom: -1px;
68 | }
69 |
70 | input, textarea {
71 | border-radius: 5px;
72 | border: 1px solid black;
73 | outline: none;
74 | margin: 0;
75 | }
76 | input {
77 | padding: 0 1em;
78 | line-height: 2em;
79 | }
80 |
81 | audio {
82 | vertical-align: middle;
83 | }
84 |
85 | button, .button {
86 | color: black;
87 | background-color: rgba(235,235,235,.5);
88 | border-radius: 5px;
89 | text-align: center;
90 | border: 1px solid black;
91 | line-height: 2em;
92 | margin: 0 .5rem;
93 | }
94 |
95 | .root-dark-mode button, .root-dark-mode .button {
96 | background-color: hsl(0,0%,30%);
97 | color: var(--foreground-dark);
98 | }
99 |
100 | button:hover, .button:hover {
101 | background-color: rgba(255,255,255,.7);
102 | }
103 |
104 | .root-dark-mode button:hover, .root-dark-mode .button:hover {
105 | background-color: hsl(0,0%,40%);
106 | }
107 |
108 | button:disabled, .button:disabled {
109 | background-color: rgba(128,128,128,.5);
110 | }
111 |
112 | .root-dark-mode button:disabled, .root-dark-mode .button:disabled {
113 | background-color: hsl(0,0%,20%);
114 | color: hsl(0,0%,60%);
115 | }
116 |
117 | .root-dark-mode input:not([type=file]), .root-dark-mode textarea {
118 | background-color: hsl(0,0%,30%);
119 | color: var(--foreground-dark);
120 | }
121 | .root-dark-mode input:not([type=file])::placeholder {
122 | color: var(--foreground-dark);
123 | }
--------------------------------------------------------------------------------
/src/Common.css:
--------------------------------------------------------------------------------
1 | .centered-line {
2 | overflow: hidden;
3 | text-align: center;
4 | }
5 |
6 | .centered-line::before,
7 | .centered-line::after {
8 | background-color: #000;
9 | content: "";
10 | display: inline-block;
11 | height: 1px;
12 | position: relative;
13 | vertical-align: middle;
14 | width: 50%;
15 | }
16 |
17 | .root-dark-mode .centered-line {
18 | color: var(--foreground-dark);
19 | }
20 | .root-dark-mode .centered-line::before, .root-dark-mode .centered-line::after {
21 | background-color: var(--foreground-dark);
22 | }
23 |
24 | .centered-line::before {
25 | right: 1em;
26 | margin-left: -50%;
27 | }
28 |
29 | .centered-line::after {
30 | left: 1em;
31 | margin-right: -50%;
32 | }
33 |
34 | .title-line {
35 | color: #fff;
36 | margin-top: 1em;
37 | }
38 | .title-line::before,
39 | .title-line::after {
40 | background-color: #fff;
41 | box-shadow: 0 1px 1px #000;
42 | }
43 |
44 | .root-dark-mode .title-line {
45 | color: var(--foreground-dark);
46 | }
47 | .root-dark-mode .title-line::before, .root-dark-mode .title-line::after {
48 | background-color: var(--foreground-dark);
49 | }
50 |
51 | .aux-margin {
52 | width: calc(100% - 2 * 50px);
53 | margin: 0 50px;
54 | }
55 | @media screen and (max-width: 1300px) {
56 | .aux-margin {
57 | width: calc(100% - 2 * 10px);
58 | margin: 0 10px;
59 | }
60 | }
61 |
62 | .title {
63 | font-size: 1.5em;
64 | height: 5.25rem;
65 | padding-top: 1rem;
66 | text-align: center;
67 | }
68 |
69 | .title-slogan {
70 | font-size: 1rem;
71 | }
72 |
73 | .clickable {
74 | cursor: pointer;
75 | }
76 |
77 | .bg-img {
78 | position: fixed;
79 | z-index: -1;
80 | top: 0;
81 | left: 0;
82 | width: 100%;
83 | height: 100%;
84 | }
85 |
86 | .root-dark-mode .bg-img {
87 | filter: brightness(.6);
88 | }
89 |
90 | .black-outline {
91 | text-shadow: /* also change .flow-item-row-with-prompt:hover::before */
92 | -1px -1px 0 rgba(0,0,0,.6),
93 | 0 -1px 0 rgba(0,0,0,.6),
94 | 1px -1px 0 rgba(0,0,0,.6),
95 | -1px 1px 0 rgba(0,0,0,.6),
96 | 0 1px 0 rgba(0,0,0,.6),
97 | 1px 1px 0 rgba(0,0,0,.6);
98 | }
99 |
100 | .search-query-highlight {
101 | border-bottom: 1px solid black;
102 | font-weight: bold;
103 | }
104 |
105 | .root-dark-mode .search-query-highlight {
106 | border-bottom: 1px solid white;
107 | }
108 |
109 | .url-pid-link {
110 | opacity: .6;
111 | }
112 |
113 | :root {
114 | --coloredspan-bgcolor-light: white;
115 | --coloredspan-bgcolor-dark: black;
116 | }
117 |
118 | .colored-span {
119 | background-color: var(--coloredspan-bgcolor-light);
120 | }
121 |
122 | .root-dark-mode .colored-span {
123 | background-color: var(--coloredspan-bgcolor-dark);
124 | }
125 |
126 | .icon+label {
127 | font-size: .9em;
128 | vertical-align: .05em;
129 | cursor: inherit;
130 | padding: 0 .1rem;
131 | margin-left: .1rem;
132 | }
133 |
134 | code.pre {
135 | white-space: pre;
136 | }
137 |
138 | .reply-nameplate {
139 | margin-right: .25rem;
140 | font-size: .85em;
141 | vertical-align: .07em;
142 | white-space: nowrap;
143 | }
--------------------------------------------------------------------------------
/src/text_splitter.js:
--------------------------------------------------------------------------------
1 | // regexp should match the WHOLE segmented part
2 | export const BARE_PID_RE=/(^|[^\d\u20e3\ufe0e\ufe0f])([1-9]\d{4,5})(?![\d\u20e3\ufe0e\ufe0f])/g;
3 | export const PFX_PID_RE=/(\$[1-9]\d{4,5})(?![\d\u20e3\ufe0e\ufe0f])/g;
4 | export const URL_PID_RE=/((?:https?:\/\/)?_BRAND_WWW_DOMAIN\/?#(?:#|%23)([1-9]\d{4,5}))(?!\d|\u20e3|\ufe0e|\ufe0f)/g;
5 | export const NORM_NICKNAME_RE=/(^|[^A-Za-z])((?:(?:Angry|Baby|Crazy|Diligent|Excited|Fat|Greedy|Hungry|Interesting|Jolly|Kind|Little|Magic|Naïve|Old|PKU|Quiet|Rich|Superman|THU|Undefined|Valuable|Wifeless|Xenial|Young|Zombie)\s)?(?:Alice|Bob|Carol|Dave|Eve|Francis|Grace|Hans|Isabella|Jason|Kate|Louis|Margaret|Nathan|Olivia|Paul|Queen|Richard|Susan|Thomas|Uma|Vivian|Winnie|Xander|Yasmine|Zach)|You Win(?: \d+)?|洞主)(?![A-Za-z])/gi;
6 | export const BRG_NICKNAME_RE=/(^|[^A-Za-z])((?:(?:Angry|Baby|Crazy|Diligent|Excited|Fat|Grievous|Hungry|Interesting|Jolly|Kind|Little|Magic|Naïve|Old|PKU|Quiet|Rich|Spencer|THU|Undefined|Valuable|Wifeless|Xenial|Young|Zombie)\s)?(?:Alice|Bob|Carol|Dave|Eve|Francis|Grace|Hermione|Isabella|Jason|Kate|Luke|Margaret|Nathan|Olivia|Paul|Queen|Richard|Susan|Thomas|Uma|Voldemort|Winnie|Xander|Yasmine|Zach)|You Win(?: \d+)?|洞主)(?![A-Za-z])/gi;
7 | export const URL_RE=/(^|[^.@a-zA-Z0-9_])((?:https?:\/\/)?(?:(?:[\w-]+\.)+[a-zA-Z]{2,3}|\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3})(?::\d{1,5})?(?:\/[\w~!@#$%^&*()\-_=+[\]{};:,./?|]*)?)(?![a-zA-Z0-9])/gi;
8 |
9 | // https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
10 | function escape_regex(string) {
11 | return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
12 | }
13 |
14 | function build_highlight_re(txt,split,option='g') {
15 | return txt ? new RegExp(`(${txt.split(split).filter((x)=>!!x).map(escape_regex).join('|')})`,option) : /^$/g;
16 | }
17 |
18 | export function build_hl_rules(search_term=null, bridge=false) {
19 | let ret=[];
20 |
21 | // ↑ higher priority
22 | if(!bridge) ret.push(['url_pid',URL_PID_RE]);
23 |
24 | ret.push(['url',URL_RE]);
25 |
26 | ret.push(['pid_prefixed',PFX_PID_RE]);
27 |
28 | if(!bridge) ret.push(['pid_bare',BARE_PID_RE]);
29 |
30 | if(bridge) ret.push(['nickname',BRG_NICKNAME_RE]);
31 | else ret.push(['nickname',NORM_NICKNAME_RE]);
32 |
33 | if(search_term) ret.push(['search',build_highlight_re(search_term,' ','gi')]);
34 |
35 | return ret;
36 | }
37 |
38 | export function clean_pid(s) {
39 | if(s.charAt(0)==='#' || s.charAt(0)==='$') return parseInt(s.substr(1));
40 | else return parseInt(s);
41 | }
42 |
43 | export function split_text(txt,rules) {
44 | // rules: [['name',/regex/],...]
45 | // return: [['name','part'],[null,'part'],...]
46 |
47 | txt=[[null,txt]];
48 | rules.forEach((rule)=>{
49 | let [name,regex]=rule;
50 | txt=[].concat.apply([],txt.map((part)=>{
51 | let [rule,content]=part;
52 | if(rule) // already tagged by previous rules
53 | return [part];
54 | else {
55 | //console.log(txt,content,name);
56 | return content
57 | .split(regex)
58 | .map((seg)=>(
59 | regex.test(seg) ? [name,seg] : [null,seg]
60 | ))
61 | .filter(([name,seg])=>(
62 | name!==null || seg
63 | ));
64 | }
65 | }));
66 | });
67 | return txt;
68 | }
69 |
--------------------------------------------------------------------------------
/src/PressureHelper.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import Pressure from 'pressure';
3 |
4 | import './PressureHelper.css';
5 |
6 | const THRESHOLD=.4;
7 | const MULTIPLIER=25;
8 | const BORDER_WIDTH=500; // also change css!
9 |
10 | export class PressureHelper extends Component {
11 | constructor(props) {
12 | super(props);
13 | this.state={
14 | level: 0,
15 | fired: false,
16 | };
17 | this.callback=props.callback;
18 | this.esc_interval=null;
19 | }
20 |
21 | do_fire() {
22 | if(this.esc_interval) {
23 | clearInterval(this.esc_interval);
24 | this.esc_interval=null;
25 | }
26 | this.setState({
27 | level: 1,
28 | fired: true,
29 | });
30 | this.callback();
31 | window.setTimeout(()=>{
32 | this.setState({
33 | level: 0,
34 | fired: false,
35 | });
36 | },300);
37 | }
38 |
39 | componentDidMount() {
40 | if(window.config.back_shortcut) {
41 | Pressure.set(document.body, {
42 | change: (force)=>{
43 | if(!this.state.fired) {
44 | if(force>=.999) {
45 | this.do_fire();
46 | }
47 | else
48 | this.setState({
49 | level: force,
50 | });
51 | }
52 | },
53 | end: ()=>{
54 | this.setState({
55 | level: 0,
56 | fired: false,
57 | });
58 | },
59 | }, {
60 | polyfill: false,
61 | only: 'touch',
62 | preventSelect: false,
63 | });
64 |
65 | document.addEventListener('keydown',(e)=>{
66 | if(!e.repeat && e.key==='Escape') {
67 | if(this.esc_interval)
68 | clearInterval(this.esc_interval);
69 | this.setState({
70 | level: THRESHOLD/2,
71 | },()=>{
72 | this.esc_interval=setInterval(()=>{
73 | let new_level=this.state.level+.1;
74 | if(new_level>=.999)
75 | this.do_fire();
76 | else
77 | this.setState({
78 | level: new_level,
79 | });
80 | },30);
81 | });
82 | }
83 | });
84 | document.addEventListener('keyup',(e)=>{
85 | if(e.key==='Escape') {
86 | if(this.esc_interval) {
87 | clearInterval(this.esc_interval);
88 | this.esc_interval=null;
89 | }
90 | this.setState({
91 | level: 0,
92 | });
93 | }
94 | });
95 | }
96 | }
97 |
98 | render() {
99 | const pad=MULTIPLIER*(this.state.level-THRESHOLD)-BORDER_WIDTH;
100 | return (
101 |
111 | )
112 | }
113 | }
--------------------------------------------------------------------------------
/src/Sidebar.css:
--------------------------------------------------------------------------------
1 | .sidebar-shadow {
2 | will-change: opacity;
3 | opacity: 0;
4 | background-color: black;
5 | pointer-events: none;
6 | transition: opacity 150ms ease-out;
7 | position: fixed;
8 | left: 0;
9 | top: 0;
10 | height: 100%;
11 | width: 100%;
12 | z-index: 20;
13 | }
14 | .sidebar-on .sidebar-shadow {
15 | opacity: .3;
16 | pointer-events: initial;
17 | }
18 | .sidebar-on .sidebar-shadow:active {
19 | opacity: .5;
20 | transition: unset;
21 | }
22 |
23 | .root-dark-mode .sidebar-on .sidebar-shadow {
24 | opacity: .65;
25 | }
26 | .root-dark-mode .sidebar-on .sidebar-shadow:active {
27 | opacity: .8;
28 | }
29 |
30 | .sidebar {
31 | user-select: text;
32 | position: fixed;
33 | top: 0;
34 | height: 100%;
35 | background-color: rgba(218,218,218,.9);
36 | overflow-y: auto;
37 | padding-top: 3em;
38 | padding-bottom: 1em;
39 | backdrop-filter: blur(5px);
40 | }
41 |
42 | .root-no-blur .sidebar {
43 | backdrop-filter: unset;
44 | }
45 |
46 | .root-dark-mode .sidebar {
47 | background-color: hsla(0,0%,5%,.75);
48 | }
49 |
50 | .sidebar, .sidebar-title {
51 | left: 700px;
52 | will-change: opacity, transform;
53 | z-index: 21;
54 | width: calc(100% - 700px);
55 | color: black;
56 | }
57 | .root-dark-mode .sidebar, .root-dark-mode .sidebar-title {
58 | color: var(--foreground-dark);
59 | }
60 |
61 | .sidebar-on .sidebar, .sidebar-on .sidebar-title {
62 | opacity: 1;
63 | animation: sidebar-fadein .12s cubic-bezier(0.15, 0.4, 0.6, 1);
64 | }
65 | .sidebar-off .sidebar, .sidebar-off .sidebar-title {
66 | visibility: hidden;
67 | pointer-events: none;
68 | backdrop-filter: none;
69 | animation: sidebar-fadeout .2s cubic-bezier(0.15, 0.4, 0.6, 1);
70 | }
71 | .sidebar-container {
72 | animation: sidebar-initial .25s linear; /* skip initial animation */
73 | }
74 |
75 | @keyframes sidebar-fadeout {
76 | from {
77 | visibility: visible;
78 | opacity: 1;
79 | transform: none;
80 | backdrop-filter: none;
81 | }
82 | to {
83 | visibility: visible;
84 | opacity: 0;
85 | transform: translateX(200px);
86 | backdrop-filter: none;
87 | }
88 | }
89 | @keyframes sidebar-fadein {
90 | from {
91 | opacity: 0;
92 | transform: translateX(120px);
93 | backdrop-filter: none;
94 | }
95 | to {
96 | opacity: 1;
97 | transform: none;
98 | backdrop-filter: none;
99 | }
100 | }
101 | @keyframes sidebar-initial {
102 | from {opacity: 0;}
103 | to {opacity: 0;}
104 | }
105 |
106 | .sidebar-title {
107 | text-shadow: 0 0 3px white;
108 | font-weight: bold;
109 | position: fixed;
110 | width: 100%;
111 | top: 0;
112 | line-height: 3em;
113 | padding-left: .5em;
114 | background-color: rgba(250,250,250,.8);
115 | pointer-events: none;
116 | backdrop-filter: blur(5px);
117 | box-shadow: 0 3px 5px rgba(0,0,0,.2);
118 | }
119 |
120 | .root-no-blur .sidebar-title {
121 | backdrop-filter: unset;
122 | }
123 |
124 | .root-dark-mode .sidebar-title {
125 | background-color: hsla(0,0%,18%,.85);
126 | text-shadow: 0 0 3px black;
127 | }
128 |
129 | .sidebar-title a {
130 | pointer-events: initial;
131 | }
132 |
133 | .sidebar, .sidebar-title {
134 | padding-left: 1em;
135 | padding-right: 1em;
136 | }
137 |
138 | @media screen and (max-width: 1300px) {
139 | .sidebar, .sidebar-title {
140 | left: calc(100% - 550px);
141 | width: 550px;
142 | padding-left: .5em;
143 | padding-right: .5em;
144 | }
145 | }
146 | @media screen and (max-width: 580px) {
147 | .sidebar, .sidebar-title {
148 | left: 27px;
149 | width: calc(100% - 27px);
150 | padding-left: .25em;
151 | padding-right: .25em;
152 | }
153 | }
154 |
155 | .sidebar-flow-item {
156 | display: block;
157 | }
158 | .sidebar-flow-item .box {
159 | width: 100%;
160 | }
--------------------------------------------------------------------------------
/src/Welcome.js:
--------------------------------------------------------------------------------
1 | import React, {useState} from 'react';
2 |
3 | import {GATEWAY_DOMAIN} from './Common';
4 | import {get_json} from './flows_api';
5 | import {bgimg_style} from './Config';
6 |
7 | import './Welcome.css';
8 |
9 | export function LandingPage(props) {
10 | let [username,set_username]=useState('');
11 | let [password,set_password]=useState('');
12 | let [loading,set_loading]=useState(false);
13 |
14 | function do_login() {
15 | set_loading(true);
16 | fetch(GATEWAY_DOMAIN+'/api/legacy/login',{
17 | method: 'post',
18 | headers: {
19 | 'Content-Type': 'application/json',
20 | },
21 | body: JSON.stringify({
22 | email: username,
23 | password: password,
24 | }),
25 | })
26 | .then(get_json)
27 | .then((json)=>{
28 | if(json.error)
29 | throw new Error(json.error_msg||json.error);
30 |
31 | set_loading(false);
32 | props.do_login(json.user_token);
33 | })
34 | .catch((e)=>{
35 | alert('登录失败。'+e);
36 | set_loading(false);
37 | });
38 | }
39 |
40 | function on_keypress(e) {
41 | if(e.key==='Enter')
42 | do_login();
43 | }
44 |
45 | return (
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | _BRAND_NAME
54 |
55 |
56 | _BRAND_SLOGAN
57 |
58 |
59 |
60 |
61 |
62 |
63 |
73 |
74 |
75 | 已经有账号？
76 |
77 |
78 |
82 |
83 |
84 |
88 |
89 |
90 |
93 |
94 |
95 |
96 |
97 | 忘记密码
98 |
99 |
100 |
101 |
102 |
103 |
104 |
_BRAND_LANDING_HEADER
105 |
106 | _BRAND_LANDING_BODY
107 |
108 |
_BRAND_LANDING_HEADER
109 |
110 | _BRAND_LANDING_BODY
111 |
112 |
117 |
118 |
119 |
120 |
121 | );
122 | }
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | // This optional code is used to register a service worker.
4 | // register() is not called by default.
5 |
6 | // This lets the app load faster on subsequent visits in production, and gives
7 | // it offline capabilities. However, it also means that developers (and users)
8 | // will only see deployed updates on subsequent visits to a page, after all the
9 | // existing tabs open on the page have been closed, since previously cached
10 | // resources are updated in the background.
11 |
12 | // To learn more about the benefits of this model and instructions on how to
13 | // opt-in, read http://bit.ly/CRA-PWA
14 |
15 | const isLocalhost = Boolean(
16 | window.location.hostname === 'localhost' ||
17 | // [::1] is the IPv6 localhost address.
18 | window.location.hostname === '[::1]' ||
19 | // 127.0.0.1/8 is considered localhost for IPv4.
20 | window.location.hostname.match(
21 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
22 | )
23 | );
24 |
25 | export function register(config) {
26 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
27 | // The URL constructor is available in all browsers that support SW.
28 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
29 | if (publicUrl.origin !== window.location.origin) {
30 | // Our service worker won't work if PUBLIC_URL is on a different origin
31 | // from what our page is served on. This might happen if a CDN is used to
32 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
33 | return;
34 | }
35 |
36 | window.addEventListener('load', () => {
37 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
38 |
39 | if (isLocalhost) {
40 | // This is running on localhost. Let's check if a service worker still exists or not.
41 | checkValidServiceWorker(swUrl, config);
42 |
43 | // Add some additional logging to localhost, pointing developers to the
44 | // service worker/PWA documentation.
45 | navigator.serviceWorker.ready.then(() => {
46 | console.log(
47 | 'This web app is being served cache-first by a service ' +
48 | 'worker. To learn more, visit http://bit.ly/CRA-PWA'
49 | );
50 | });
51 | } else {
52 | // Is not localhost. Just register service worker
53 | registerValidSW(swUrl, config);
54 | }
55 | });
56 | }
57 | }
58 |
59 | function registerValidSW(swUrl, config) {
60 | navigator.serviceWorker
61 | .register(swUrl)
62 | .then(registration => {
63 | registration.onupdatefound = () => {
64 | const installingWorker = registration.installing;
65 | if (installingWorker == null) {
66 | return;
67 | }
68 | installingWorker.onstatechange = () => {
69 | if (installingWorker.state === 'installed') {
70 | if (navigator.serviceWorker.controller) {
71 | if(window._webhole_show_alert)
72 | window._webhole_show_alert('pwa-update',{
73 | type: 'info',
74 | is_html: false,
75 | message: '发现新版本，下次访问时将更新',
76 | });
77 | setTimeout(()=>{
78 | installingWorker.postMessage({type: 'SKIP_WAITING'});
79 | },1000);
80 |
81 | // At this point, the updated precached content has been fetched,
82 | // but the previous service worker will still serve the older
83 | // content until all client tabs are closed.
84 | console.log(
85 | 'New content is available and will be used when all ' +
86 | 'tabs for this page are closed. See http://bit.ly/CRA-PWA.'
87 | );
88 |
89 | // Execute callback
90 | if (config && config.onUpdate) {
91 | config.onUpdate(registration);
92 | }
93 | } else {
94 | // At this point, everything has been precached.
95 | // It's the perfect time to display a
96 | // "Content is cached for offline use." message.
97 | console.log('Content is cached for offline use.');
98 |
99 | // Execute callback
100 | if (config && config.onSuccess) {
101 | config.onSuccess(registration);
102 | }
103 | }
104 | }
105 | };
106 | };
107 | })
108 | .catch(error => {
109 | console.error('Error during service worker registration:', error);
110 | });
111 | }
112 |
113 | function checkValidServiceWorker(swUrl, config) {
114 | // Check if the service worker can be found. If it can't reload the page.
115 | fetch(swUrl)
116 | .then(response => {
117 | // Ensure service worker exists, and that we really are getting a JS file.
118 | const contentType = response.headers.get('content-type');
119 | if (
120 | response.status === 404 ||
121 | (contentType != null && contentType.indexOf('javascript') === -1)
122 | ) {
123 | // No service worker found. Probably a different app. Reload the page.
124 | navigator.serviceWorker.ready.then(registration => {
125 | registration.unregister().then(() => {
126 | window.location.reload();
127 | });
128 | });
129 | } else {
130 | // Service worker found. Proceed as normal.
131 | registerValidSW(swUrl, config);
132 | }
133 | })
134 | .catch(() => {
135 | console.log(
136 | 'No internet connection found. Root is running in offline mode.'
137 | );
138 | });
139 | }
140 |
141 | export function unregister() {
142 | if ('serviceWorker' in navigator) {
143 | navigator.serviceWorker.ready.then(registration => {
144 | registration.unregister();
145 | });
146 | }
147 | }
148 |
--------------------------------------------------------------------------------
/src/flows_api.js:
--------------------------------------------------------------------------------
1 | import {HAPI_DOMAIN} from './Common';
2 | import {cache} from './cache';
3 |
4 | export function token_param(token) {
5 | return (
6 | '&jsapiver='+encodeURIComponent((process.env.REACT_APP_BUILD_INFO||'null')+'-'+(Math.floor(+new Date()/7200000)*2))+
7 | (token ? ('&user_token='+token) : '')
8 | );
9 | }
10 |
11 | export function get_json(res) {
12 | if(!res.ok) throw Error(`网络错误 ${res.status} ${res.statusText}`);
13 | return (
14 | res
15 | .text()
16 | .then((t)=>{
17 | try {
18 | return JSON.parse(t);
19 | } catch(e) {
20 | console.error('json parse error');
21 | console.trace(e);
22 | console.log(t);
23 | throw new SyntaxError('JSON Parse Error '+t.substr(0,50));
24 | }
25 | })
26 | );
27 | }
28 |
29 | function add_variant(li) {
30 | li.forEach((item)=>{
31 | item.variant={};
32 | });
33 | }
34 | export const API={
35 | load_replies: (pid,token,color_picker)=>{
36 | pid=parseInt(pid);
37 | return fetch(
38 | HAPI_DOMAIN+'/api/holes/view/'+pid+
39 | '?role=reply'+ // add a pseudo parameter because token_param starts with '&'
40 | token_param(token)
41 | )
42 | .then(get_json)
43 | .then((json)=>{
44 | if(json.error) {
45 | throw new Error(json.error_msg||json.error);
46 | }
47 |
48 | cache().put(pid,json.post_data.hot,json);
49 |
50 | // also change load_replies_with_cache!
51 | json.post_data.variant={};
52 | json.data=json.data
53 | .map((info)=>{
54 | info._display_color=color_picker.get(info.name);
55 | info.variant={};
56 | return info;
57 | });
58 |
59 | return json;
60 | });
61 | },
62 |
63 | load_replies_with_cache: (pid,token,color_picker,cache_version)=> {
64 | pid=parseInt(pid);
65 | return cache().get(pid,cache_version)
66 | .then(([json,reason])=>{
67 | if(json) {
68 | // also change load_replies!
69 | json.post_data.variant={};
70 | json.data=json.data
71 | .map((info)=>{
72 | info._display_color=color_picker.get(info.name);
73 | info.variant={};
74 | return info;
75 | });
76 |
77 | return json;
78 | }
79 | else {
80 | return API.load_replies(pid,token,color_picker).then((json)=>{
81 | if(reason==='expired')
82 | json.post_data.variant.new_reply=true;
83 | return json;
84 | });
85 | }
86 | });
87 | },
88 |
89 | set_attention: (pid,attention,token)=>{
90 | return fetch(
91 | HAPI_DOMAIN+'/api/holes/attention/do/'+encodeURIComponent(pid)+
92 | '?switch='+(attention?'1':'0')+
93 | token_param(token),
94 | {method: 'PUT'}
95 | )
96 | .then(get_json)
97 | .then((json)=>{
98 | cache().delete(pid);
99 | if(json.error) {
100 | alert(json.error_msg||json.error);
101 | throw new Error(json.error);
102 | }
103 | json.data.variant={};
104 | return json;
105 | });
106 | },
107 |
108 | report: (item_type,id,report_type,reason,token)=>{
109 | if(item_type!=='hole' && item_type!=='comment') throw Error('bad type');
110 | return fetch(HAPI_DOMAIN+'/api/'+item_type+'s/flag/'+id+'?role=report'+token_param(token), {
111 | method: 'POST',
112 | headers: {
113 | 'Content-Type': 'application/json',
114 | },
115 | body: JSON.stringify({
116 | content: reason,
117 | type: report_type,
118 | }),
119 | })
120 | .then(get_json)
121 | .then((json)=>{
122 | if(json.error)
123 | throw new Error(json.error_msg||json.error);
124 |
125 | return json;
126 | });
127 | },
128 |
129 | get_list: (after,token)=>{
130 | return fetch(
131 | HAPI_DOMAIN+'/api/holes/list/'+(after||0)+
132 | '?limit=30'+
133 | token_param(token)
134 | )
135 | .then(get_json)
136 | .then((json)=>{
137 | if(json.error)
138 | throw new Error(json.error_msg||json.error);
139 |
140 | add_variant(json.data);
141 | return json;
142 | });
143 | },
144 |
145 | get_search: (after,keyword,token)=>{
146 | return fetch(
147 | HAPI_DOMAIN+'/api/holes/search/'+after+
148 | '?keywords='+encodeURIComponent(keyword)+
149 | token_param(token)
150 | )
151 | .then(get_json)
152 | .then((json)=>{
153 | if(json.error)
154 | throw new Error(json.error_msg||json.error);
155 |
156 | add_variant(json.data);
157 | return json;
158 | });
159 | },
160 |
161 | get_attention: (after,token)=>{
162 | return fetch(
163 | HAPI_DOMAIN+'/api/holes/attention/'+after+
164 | '?limit=30'+
165 | token_param(token)
166 | )
167 | .then(get_json)
168 | .then((json)=>{
169 | if(json.error)
170 | throw new Error(json.error_msg||json.error);
171 |
172 | add_variant(json.data);
173 | return json;
174 | });
175 | },
176 | };
--------------------------------------------------------------------------------
/src/Title.js:
--------------------------------------------------------------------------------
1 | import React, {Component, PureComponent} from 'react';
2 | import {InfoSidebar, PostForm} from './UserAction';
3 | import {TokenCtx} from './UserAction';
4 |
5 | import './Title.css';
6 |
7 | const flag_re=/^\/\/setflag ([a-zA-Z0-9_]+)=(.*)$/;
8 |
9 | class ControlBar extends PureComponent {
10 | constructor(props) {
11 | super(props);
12 | this.state={
13 | search_text: '',
14 | };
15 | this.set_mode=props.set_mode;
16 |
17 | this.on_change_bound=this.on_change.bind(this);
18 | this.on_keypress_bound=this.on_keypress.bind(this);
19 | this.do_refresh_bound=this.do_refresh.bind(this);
20 | this.do_attention_bound=this.do_attention.bind(this);
21 | }
22 |
23 | componentDidMount() {
24 | if(window.location.hash) {
25 | let text=decodeURIComponent(window.location.hash).substr(1);
26 | if(text.lastIndexOf('?')!==-1)
27 | text=text.substr(0,text.lastIndexOf('?')); // fuck wechat '#param?nsukey=...'
28 | this.setState({
29 | search_text: text,
30 | }, ()=>{
31 | this.on_keypress({key: 'Enter'});
32 | });
33 | }
34 | }
35 |
36 | on_change(event) {
37 | this.setState({
38 | search_text: event.target.value,
39 | });
40 | }
41 |
42 | on_keypress(event) {
43 | if(event.key==='Enter') {
44 | let flag_res=flag_re.exec(this.state.search_text);
45 | if(flag_res) {
46 | if(flag_res[2]) {
47 | localStorage[flag_res[1]]=flag_res[2];
48 | alert('Set Flag '+flag_res[1]+'='+flag_res[2]+'\nYou may need to refresh this webpage.');
49 | } else {
50 | delete localStorage[flag_res[1]];
51 | alert('Clear Flag '+flag_res[1]+'\nYou may need to refresh this webpage.');
52 | }
53 | return;
54 | }
55 |
56 | event.target.blur();
57 |
58 | if(!this.state.search_text) {
59 | this.set_mode('list',null);
60 | return;
61 | }
62 |
63 | const mode=/^[#$]\d+$/.test(this.state.search_text) ? 'single' : 'search';
64 | this.set_mode(mode,this.state.search_text||'');
65 | }
66 | }
67 |
68 | do_refresh() {
69 | window.scrollTo(0,0);
70 | this.setState({
71 | search_text: '',
72 | });
73 | this.set_mode('list',null);
74 | }
75 |
76 | do_attention() {
77 | window.scrollTo(0,0);
78 | this.setState({
79 | search_text: '',
80 | });
81 | this.set_mode('attention',null);
82 | }
83 |
84 | render() {
85 | return (
86 |
{({value: token})=>(
87 |
125 | )}
126 | )
127 | }
128 | }
129 |
130 | export function Title(props) {
131 | return (
132 |
133 | {/*
*/}
134 |
135 |
136 |
137 |
138 | props.show_sidebar(
139 | '_BRAND_NAME',
140 |
141 | )}>
142 | _BRAND_NAME
143 |
144 |
145 |
146 | _BRAND_SLOGAN
147 |
148 |
149 |
150 |
151 |
152 | )
153 | }
--------------------------------------------------------------------------------
/src/cache.js:
--------------------------------------------------------------------------------
1 | const HOLE_CACHE_DB_NAME='webhole_cache_db';
2 | const CACHE_DB_VER=1;
3 | const MAINTENANCE_STEP=150;
4 | const MAINTENANCE_COUNT=1000;
5 |
6 | //const ENC_KEY=42;
7 |
8 | class Cache {
9 | constructor() {
10 | this.db=null;
11 | this.added_items_since_maintenance=0;
12 | this.encrypt=this.encrypt.bind(this);
13 | this.decrypt=this.decrypt.bind(this);
14 | const open_req=indexedDB.open(HOLE_CACHE_DB_NAME,CACHE_DB_VER);
15 | open_req.onerror=console.error.bind(console);
16 | open_req.onupgradeneeded=(event)=>{
17 | console.log('comment cache db upgrade');
18 | const db=event.target.result;
19 | const store=db.createObjectStore('comment',{
20 | keyPath: 'pid',
21 | });
22 | store.createIndex('last_access','last_access',{unique: false});
23 | };
24 | open_req.onsuccess=(event)=>{
25 | console.log('comment cache db loaded');
26 | this.db=event.target.result;
27 | setTimeout(this.maintenance.bind(this),1);
28 | };
29 | }
30 |
31 | // use window.hole_cache.encrypt() only after cache is loaded!
32 | encrypt(pid,data) {
33 | let s=JSON.stringify(data);
34 | return s;
35 | /*
36 | let o='';
37 | for(let i=0,key=(ENC_KEY^pid)%128;i
{
74 | if(!this.db)
75 | return resolve([null,'fail']);
76 | let get_req,store;
77 | try {
78 | const tx=this.db.transaction(['comment'],'readwrite');
79 | store=tx.objectStore('comment');
80 | get_req=store.get(pid);
81 | } catch(e) { // ios sometimes fail at here, just ignore it
82 | console.error(e);
83 | resolve([null,'fail']);
84 | }
85 | get_req.onsuccess=()=>{
86 | let res=get_req.result;
87 | if(!res || !res.data_str) {
88 | //console.log('comment cache miss',pid);
89 | resolve([null,'miss']);
90 | } else if(target_version===res.version) { // hit
91 | console.log('comment cache hit',pid);
92 | res.last_access=(+new Date());
93 | store.put(res);
94 | let data=this.decrypt(pid,res.data_str);
95 | resolve([data,'hit']); // obj or null
96 | } else { // expired
97 | console.log('comment cache expired',pid,': ver',res.version,'target',target_version);
98 | store.delete(pid);
99 | resolve([null,'expired']);
100 | }
101 | };
102 | get_req.onerror=(e)=>{
103 | console.warn('comment cache indexeddb open failed');
104 | console.error(e);
105 | resolve([null,'fail']);
106 | };
107 | });
108 | }
109 |
110 | put(pid,target_version,data) {
111 | pid=parseInt(pid);
112 | return new Promise((resolve,reject)=>{
113 | if(!this.db)
114 | return resolve();
115 | try {
116 | const tx=this.db.transaction(['comment'],'readwrite');
117 | const store=tx.objectStore('comment');
118 | store.put({
119 | pid: pid,
120 | version: target_version,
121 | data_str: this.encrypt(pid,data),
122 | last_access: +new Date(),
123 | });
124 | if(++this.added_items_since_maintenance===MAINTENANCE_STEP)
125 | setTimeout(this.maintenance.bind(this),1);
126 | } catch(e) {
127 | console.error(e);
128 | return resolve();
129 | }
130 | });
131 | }
132 |
133 | delete(pid) {
134 | pid=parseInt(pid);
135 | return new Promise((resolve,reject)=>{
136 | if(!this.db)
137 | return resolve();
138 | let req;
139 | try {
140 | const tx=this.db.transaction(['comment'],'readwrite');
141 | const store=tx.objectStore('comment');
142 | req=store.delete(pid);
143 | } catch(e) {
144 | console.error(e);
145 | return resolve();
146 | }
147 | //console.log('comment cache delete',pid);
148 | req.onerror=()=>{
149 | console.warn('comment cache delete failed ',pid);
150 | return resolve();
151 | };
152 | req.onsuccess=()=>resolve();
153 | });
154 | }
155 |
156 | maintenance() {
157 | if(!this.db)
158 | return;
159 | const tx=this.db.transaction(['comment'],'readwrite');
160 | const store=tx.objectStore('comment');
161 | let count_req=store.count();
162 | count_req.onsuccess=()=>{
163 | let count=count_req.result;
164 | if(count>MAINTENANCE_COUNT) {
165 | console.log('comment cache db maintenance',count);
166 | store.index('last_access').openKeyCursor().onsuccess=(e)=>{
167 | let cur=e.target.result;
168 | if(cur) {
169 | //console.log('maintenance: delete',cur);
170 | store.delete(cur.primaryKey);
171 | if(--count>MAINTENANCE_COUNT)
172 | cur.continue();
173 | }
174 | };
175 | } else {
176 | console.log('comment cache db no need to maintenance',count);
177 | }
178 | this.added_items_since_maintenance=0;
179 | };
180 | count_req.onerror=console.error.bind(console);
181 | }
182 |
183 | clear() {
184 | if(!this.db)
185 | return;
186 | try {
187 | indexedDB.deleteDatabase(HOLE_CACHE_DB_NAME);
188 | console.log('delete comment cache db');
189 | } catch(e) {
190 | console.error(e);
191 | }
192 | }
193 | };
194 |
195 | export function cache() {
196 | if(!window.hole_cache)
197 | window.hole_cache=new Cache();
198 | return window.hole_cache;
199 | }
--------------------------------------------------------------------------------
/src/Flows.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --box-bgcolor-light: hsl(0,0%,97%);
3 | --box-bgcolor-dark: hsl(0,0%,16%);
4 | }
5 |
6 | .box {
7 | background-color: var(--box-bgcolor-light);
8 | color: black;
9 | border-radius: 5px;
10 | margin: 1em 0;
11 | padding: .5em;
12 | box-shadow: 0 2px 5px rgba(0,0,0,.4);
13 | }
14 |
15 | .root-dark-mode .box {
16 | background-color: var(--box-bgcolor-dark);
17 | color: var(--foreground-dark);
18 | box-shadow: 0 0 2px rgba(255,255,255,.25), 0 0 7px rgba(0,0,0,.15);
19 | }
20 |
21 | .box-tip {
22 | min-width: 100px;
23 | z-index: 1;
24 | text-align: center;
25 | }
26 |
27 | .box-danger {
28 | background-color: #d44;
29 | color: white;
30 | text-shadow: 0 0 2px black;
31 | }
32 | .root-dark-mode .box-danger {
33 | background-color: #c44;
34 | color: var(--foreground-dark);
35 | }
36 |
37 | .box-warning {
38 | background-color: #db8e14;
39 | color: white;
40 | text-shadow: 0 0 2px black;
41 | }
42 | .root-dark-mode .box-warning {
43 | background-color: #b47209;
44 | text-shadow: 0 0 2px black;
45 | }
46 |
47 | .box-danger a, .box-warning a {
48 | color: #ddf;
49 | }
50 | .box-danger a:hover, .box-warning a:hover {
51 | border-bottom: 1px solid #ddf;
52 | }
53 |
54 | .left-container .flow-item {
55 | display: inline-block;
56 | width: 600px;
57 | float: left;
58 | }
59 |
60 | .flow-reply-row {
61 | display: inline-flex;
62 | align-items: flex-start;
63 | width: calc(100% - 625px);
64 | margin-left: -25px;
65 | padding-left: 18px;
66 | overflow-x: auto;
67 | }
68 |
69 | .sidebar-flow-item .flow-item pre, .sidebar-flow-item .flow-reply pre {
70 | cursor: text;
71 | }
72 |
73 | .flow-reply-row::-webkit-scrollbar {
74 | display: none;
75 | }
76 | .flow-reply-row {
77 | scrollbar-width: none;
78 | -ms-overflow-style: none;
79 | }
80 |
81 | .flow-reply-row:empty {
82 | margin: 0 !important;
83 | display: none;
84 | }
85 |
86 | .flow-item-row::after {
87 | content: "";
88 | display: block;
89 | clear: both;
90 | }
91 |
92 | .left-container .flow-reply {
93 | flex: 0 0 300px;
94 | max-height: 12.5em;
95 | margin-right: -7px;
96 | overflow-y: hidden;
97 | }
98 |
99 | .left-container .flow-item {
100 | margin-left: 50px;
101 | }
102 |
103 | @media screen and (min-width: 1301px) {
104 | .left-container .flow-item-row-with-prompt:hover::before {
105 | content: '>>';
106 | position: absolute;
107 | left: 10px;
108 | margin-top: 1.5em;
109 | color: white;
110 | text-shadow: /* copied from .black-outline */
111 | -1px -1px 0 rgba(0,0,0,.6),
112 | 0 -1px 0 rgba(0,0,0,.6),
113 | 1px -1px 0 rgba(0,0,0,.6),
114 | -1px 1px 0 rgba(0,0,0,.6),
115 | 0 1px 0 rgba(0,0,0,.6),
116 | 1px 1px 0 rgba(0,0,0,.6);
117 | font-family: 'Consolas', 'Courier', monospace;
118 | }
119 | }
120 |
121 | @media screen and (max-width: 1300px) {
122 | .left-container .flow-item {
123 | margin-left: 10px;
124 | }
125 |
126 | .flow-reply-row {
127 | width: calc(100% - 485px);
128 | }
129 |
130 | .left-container .flow-item {
131 | width: 500px;
132 | }
133 |
134 | .flow-item-row:hover::before {
135 | display: none;
136 | }
137 | }
138 |
139 | @media screen and (max-width: 900px) {
140 | .left-container .flow-item {
141 | display: block;
142 | width: calc(100vw - 20px);
143 | max-width: 500px;
144 | float: none;
145 | }
146 |
147 | .flow-reply-row {
148 | display: flex;
149 | width: 100% !important;
150 | margin-left: 0;
151 | padding-left: 30px;
152 | margin-top: -2.5em;
153 | margin-bottom: -1em;
154 | }
155 | }
156 |
157 | .left-container .flow-item-row {
158 | cursor: default;
159 | }
160 |
161 | .box-header, .box-footer {
162 | font-size: .8em;
163 | }
164 |
165 | .flow-item-row p.img {
166 | text-align: center;
167 | margin: .5em 5px 0 5px;
168 | }
169 | .flow-item-row p.img img {
170 | max-width: 100%;
171 | box-shadow: 0 1px 5px rgba(0,0,0,.4);
172 | }
173 |
174 | .left-container .flow-item-row p.img img {
175 | max-height: calc(25vh + 15em);
176 | }
177 | .sidebar .flow-item p.img img {
178 | max-height: 160vh;
179 | }
180 | .sidebar .flow-reply p.img img {
181 | max-height: calc(20vh + 10em);
182 | }
183 |
184 | .root-dark-mode .flow-item-row p.img img {
185 | filter: brightness(85%);
186 | }
187 |
188 | .box-header-badge {
189 | float: right;
190 | margin: 0 .5em;
191 | }
192 |
193 | .flow-item-dot {
194 | position: relative;
195 | top: calc(-.5em - 3px);
196 | left: calc(-.5em - 3px);
197 | width: 9px;
198 | height: 9px;
199 | margin-bottom: -9px;
200 | border-radius: 50%;
201 | box-shadow: 1px 1px 5px rgba(0,0,0,.5);
202 | display: none;
203 | }
204 |
205 | .flow-item-dot-post {
206 | background-color: #ffcc77;
207 | }
208 | .root-dark-mode .flow-item-dot-post {
209 | background-color: #eebb66;
210 | }
211 |
212 | .flow-item-dot-comment {
213 | background-color: #aaddff;
214 | }
215 | .root-dark-mode .flow-item-dot-comment {
216 | background-color: #99ccee;
217 | }
218 |
219 | .left-container .flow-item-dot {
220 | display: block;
221 | }
222 |
223 | .box-content {
224 | padding: .5em 0;
225 | }
226 |
227 | .left-container .box-content {
228 | max-height: calc(100vh + 15em);
229 | overflow-y: hidden;
230 | }
231 |
232 | .box-id {
233 | color: #666666;
234 | }
235 |
236 | .root-dark-mode .box-id {
237 | color: #bbbbbb;
238 | }
239 |
240 | .box-id a:hover::before {
241 | content: "复制全文";
242 | position: relative;
243 | width: 5em;
244 | height: 1.3em;
245 | line-height: 1.3em;
246 | margin-bottom: -1.3em;
247 | border-radius: 3px;
248 | text-align: center;
249 | top: -1.5em;
250 | display: block;
251 | color: white;
252 | background-color: rgba(0,0,0,.6);
253 | pointer-events: none;
254 | }
255 |
256 | .flow-item-row-quote {
257 | opacity: .9;
258 | filter: brightness(90%);
259 | }
260 |
261 | .root-dark-mode .flow-item-row-quote {
262 | opacity: .7;
263 | filter: unset;
264 | }
265 |
266 | .flow-item-quote>.box {
267 | margin-left: 2.5em;
268 | max-height: 15em;
269 | overflow-y: hidden;
270 | }
271 |
272 | .flow-item-quote .flow-item-dot,
273 | .flow-item-quote .box-id a:hover::before {
274 | display: none;
275 | }
276 |
277 | .quote-tip {
278 | margin-top: .5em;
279 | margin-bottom: -10em; /* so that it will not block reply bar */
280 | float: left;
281 | display: flex;
282 | flex-direction: column;
283 | width: 2.5em;
284 | text-align: center;
285 | color: white;
286 | }
287 |
288 | .box-header-tag {
289 | color: white;
290 | background-color: #00c;
291 | font-weight: bold;
292 | border-radius: 3px;
293 | margin-right: .25em;
294 | padding: 0 .25em;
295 | }
296 |
297 | .root-dark-mode .box-header-tag {
298 | background-color: #00a;
299 | }
300 |
301 | .filter-name-bar {
302 | animation: slide-in-from-top .15s ease-out;
303 | position: sticky;
304 | top: 1em;
305 | }
306 |
307 | @keyframes slide-in-from-top {
308 | 0% {opacity: 0; transform: translateY(-50%);}
309 | 100% {opacity: 1;}
310 | }
311 |
312 | .reply-header-badge {
313 | float: right;
314 | padding: .5em .2em .5em .2em;
315 | margin: -.5em -.2em -.5em .2em;
316 | opacity: .45;
317 | }
318 | .reply-header-badge:hover {
319 | opacity: 1;
320 | }
321 |
322 | p.img {
323 | position: relative;
324 | }
325 | .img-placeholder {
326 | background-color: #888;
327 | }
328 | .img-real {
329 | position: absolute;
330 | box-shadow: unset; /* will show in .img-placeholder */
331 | }
332 |
333 | .flow-variant-warning {
334 | color: red;
335 | font-weight: bold;
336 | }
337 |
338 | .report-toolbar button {
339 | line-height: 2em;
340 | margin: .2em .5em .2em 0;
341 | min-width: 4em;
342 | }
343 | .report-reason {
344 | font-size: .9em;
345 | }
346 |
347 | .flow-hint {
348 | opacity: .6;
349 | font-size: .8em;
350 | }
351 |
352 | .box-header-text {
353 | opacity: .6;
354 | }
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {SwitchTransition, CSSTransition} from 'react-transition-group';
3 | import {Flow, load_single_meta} from './Flows';
4 | import {Title} from './Title';
5 | import {Alerts} from './Alerts';
6 | import {Sidebar} from './Sidebar';
7 | import {PressureHelper} from './PressureHelper';
8 | import {TokenCtx} from './UserAction';
9 | import {load_config,bgimg_style} from './Config';
10 | import {HAPI_DOMAIN} from './Common';
11 | import {LandingPage} from './Welcome';
12 | import {cache} from './cache';
13 | import {get_json} from './flows_api';
14 |
15 | import './App.css';
16 |
17 | const MAX_SIDEBAR_STACK_SIZE=10;
18 | const USER_INFO_REFRESH_INTV_MS=60000;
19 |
20 | function listen_darkmode(override) { // override: true/false/undefined
21 | function update_color_scheme() {
22 | if(override===undefined ? window.matchMedia('(prefers-color-scheme: dark)').matches : override)
23 | document.body.classList.add('root-dark-mode');
24 | else
25 | document.body.classList.remove('root-dark-mode');
26 | }
27 |
28 | update_color_scheme();
29 | window.matchMedia('(prefers-color-scheme: dark)').addListener(()=>{
30 | update_color_scheme();
31 | });
32 | }
33 |
34 | const DEFAULT_USER_INFO={entitlements: [], alerts: [], version: '...', remember_token: null};
35 |
36 | class App extends Component {
37 | constructor(props) {
38 | super(props);
39 | load_config();
40 | listen_darkmode({default: undefined, light: false, dark: true}[window.config.color_scheme]);
41 | this.state={
42 | sidebar_stack: [[null,null]], // list of [status, content]
43 | mode: 'list', // list, single, search, attention
44 | search_text: null,
45 | flow_render_key: +new Date(),
46 | user_token: localStorage['WEBHOLE_TOKEN']||null,
47 | user_info: DEFAULT_USER_INFO,
48 | user_info_status: 'loading',
49 | user_info_lasttime: -USER_INFO_REFRESH_INTV_MS,
50 | };
51 | this.show_sidebar_bound=this.show_sidebar.bind(this);
52 | this.set_mode_bound=this.set_mode.bind(this);
53 | this.on_pressure_bound=this.on_pressure.bind(this);
54 | }
55 |
56 | componentDidMount() {
57 | cache(); // init db first
58 |
59 | window._webhole_show_hole=(...args)=>{
60 | // delay execution so user_token always gets the latest value
61 | load_single_meta(this.show_sidebar.bind(this),this.state.user_token)(...args);
62 | };
63 |
64 | if(this.state.user_token)
65 | this.get_user_info(this.state.user_token);
66 |
67 | if(!window.config.blur_effect)
68 | document.body.classList.add('root-no-blur');
69 | }
70 |
71 | get_user_info(token) {
72 | this.setState({
73 | //user_info: DEFAULT_USER_INFO,
74 | user_info_status: 'loading',
75 | });
76 | console.log('get user info');
77 | fetch(HAPI_DOMAIN+'/api/users/info?user_token='+encodeURIComponent(token))
78 | .then(get_json)
79 | .then((res)=>{
80 | if(res.error)
81 | throw new Error(res.error_msg||res.error)
82 |
83 | this.setState({
84 | user_info: res,
85 | user_info_status: 'done',
86 | user_info_lasttime: (+new Date()),
87 | });
88 | })
89 | .catch((e)=>{
90 | console.error('failed to load user info',e);
91 | this.setState({
92 | user_info_status: 'failed',
93 | });
94 | });
95 | }
96 |
97 | do_login(token) {
98 | this.setState({user_token: token});
99 | localStorage['WEBHOLE_TOKEN']=token;
100 | this.get_user_info(token);
101 | }
102 |
103 | static is_darkmode() {
104 | if(window.config.color_scheme==='dark') return true;
105 | if(window.config.color_scheme==='light') return false;
106 | else { // 'default'
107 | return window.matchMedia('(prefers-color-scheme: dark)').matches;
108 | }
109 | }
110 |
111 | on_pressure() {
112 | if(this.state.sidebar_stack.length>1)
113 | this.show_sidebar(null,null,'clear');
114 | else
115 | this.set_mode('list',null);
116 | }
117 |
118 | show_sidebar(title,content,mode='push') {
119 | this.setState((prevState)=>{
120 | let ns=prevState.sidebar_stack.slice();
121 | if(mode==='push') {
122 | if(ns.length>MAX_SIDEBAR_STACK_SIZE)
123 | ns.splice(1,1);
124 | ns=ns.concat([[title,content]]);
125 | } else if(mode==='pop') {
126 | if(ns.length===1) return;
127 | ns.pop();
128 | } else if(mode==='replace') {
129 | ns.pop();
130 | ns=ns.concat([[title,content]]);
131 | } else if(mode==='clear') {
132 | ns=[[null,null]];
133 | } else
134 | throw new Error('bad show_sidebar mode');
135 | return {
136 | sidebar_stack: ns,
137 | };
138 | });
139 | }
140 |
141 | set_mode(mode,search_text) {
142 | this.setState({
143 | mode: mode,
144 | search_text: search_text,
145 | flow_render_key: +new Date(),
146 | });
147 | if((+new Date())-this.state.user_info_lasttime>USER_INFO_REFRESH_INTV_MS && this.state.user_token && this.state.user_info_status!=='loading')
148 | this.get_user_info(this.state.user_token);
149 | }
150 |
151 | render() {
152 | if(!this.state.user_token)
153 | return (
154 |
155 | );
156 |
157 | return (
158 | {
164 | delete localStorage['WEBHOLE_TOKEN'];
165 | this.setState({
166 | user_token: null,
167 | user_info: DEFAULT_USER_INFO,
168 | });
169 | },
170 | }}>
171 |
172 |
173 |
174 | {(token)=>(
175 |
176 | {this.state.user_info_status==='failed' &&
177 |
183 | }
184 |
185 |
186 |
187 |
190 |
191 |
192 |
193 |
141 |
142 | 夜间模式：
143 |
148 | #color_scheme
149 |
150 |
151 | 选择浅色或深色模式，深色模式下将会调暗图片亮度
152 |
153 |
180 |
181 |
186 |
187 |
188 | {this.props.description}
189 |
190 |
220 |
224 |
225 |
226 |
227 |
228 |
229 |
232 |
233 |
236 |
237 |
240 |
241 |
40 |
41 | set_content(e.target.value)} />
42 |
43 | );
44 | }
45 |
46 | function PortletSetText(props) {
47 | let [content,set_content]=useState(props.info.text);
48 | let [loading,set_loading]=useState(false);
49 |
50 | function submit() {
51 | set_loading(true);
52 | fetch(HAPI_DOMAIN+'/api/'+(props.is_reply?'comment':'hole')+'s/edit/'+props.id+'?role=text'+token_param(props.token), {
53 | method: 'post',
54 | headers: {
55 | 'Content-Type': 'application/json',
56 | },
57 | body: JSON.stringify({
58 | text: content,
59 | }),
60 | })
61 | .then(get_json)
62 | .then((json)=>{
63 | set_loading(false);
64 | if(json.error)
65 | alert(json.error_msg || json.error);
66 | else
67 | alert('提交成功');
68 | })
69 | .catch((e)=>{
70 | alert('Error: '+e);
71 | set_loading(false);
72 | });
73 | }
74 |
75 | return (
76 |
77 |
78 |
79 |