@bbki.ng/site 1.5.12 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -0
- package/index.html +7 -1
- package/package.json +3 -3
- package/src/app.tsx +4 -2
- package/src/components/DelayFadeIn/DelayFadeIn.tsx +28 -0
- package/src/components/article/index.tsx +9 -3
- package/src/components/index.tsx +4 -1
- package/src/global_loading_state_provider.tsx +11 -4
- package/src/hooks/useLoadingIndicator.ts +1 -0
- package/src/hooks/use_font_loading.ts +39 -0
- package/src/main.css +7 -0
- package/src/pages/extensions/txt/index.tsx +1 -0
- package/vite.config.js +14 -1
package/CHANGELOG.md
CHANGED
package/index.html
CHANGED
|
@@ -31,10 +31,16 @@
|
|
|
31
31
|
<link rel="mask-icon" href="/favicon.svg" color="#FFFFFF" />
|
|
32
32
|
<meta name="theme-color" content="#ffffff" />
|
|
33
33
|
<meta charset="UTF-8" />
|
|
34
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
35
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
36
|
+
<link
|
|
37
|
+
href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap"
|
|
38
|
+
rel="stylesheet"
|
|
39
|
+
/>
|
|
34
40
|
</head>
|
|
35
41
|
|
|
36
42
|
<body class="h-full m-0 flex flex-col font-mono">
|
|
37
|
-
<div id="root" class="flex-grow"></div>
|
|
43
|
+
<div id="root" class="flex-grow noto-serif"></div>
|
|
38
44
|
<script type="module" src="/src/main.tsx"></script>
|
|
39
45
|
</body>
|
|
40
46
|
</html>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bbki.ng/site",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"description": "code behind bbki.ng",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
"url": "git+https://github.com/bbbottle/bbki.ng.git"
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
|
-
"@bbki.ng/components": "workspace:2.
|
|
19
|
+
"@bbki.ng/components": "workspace:2.5.0",
|
|
20
20
|
"@supabase/supabase-js": "^1.35.4",
|
|
21
21
|
"classnames": "2.3.1",
|
|
22
22
|
"react": "^18.0.0",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"swr": "^2.2.5"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@bbki.ng/stylebase": "workspace:0.
|
|
31
|
+
"@bbki.ng/stylebase": "workspace:0.4.0",
|
|
32
32
|
"@mdx-js/mdx": "2.0.0-next.9",
|
|
33
33
|
"@mdx-js/react": "^1.6.22",
|
|
34
34
|
"@mdx-js/rollup": "3.0.0",
|
package/src/app.tsx
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React, { useContext } from "react";
|
|
2
2
|
import { Outlet, Route, Routes } from "react-router-dom";
|
|
3
|
-
import { Nav, NotFound, Page } from "@bbki.ng/components";
|
|
3
|
+
import { Nav, NotFound, Page, BlurCover } from "@bbki.ng/components";
|
|
4
4
|
import { HotKeyNav } from "./components";
|
|
5
5
|
import { threeColWrapper } from "@/components/with_wrapper";
|
|
6
6
|
import { Cover } from "./pages";
|
|
@@ -26,7 +26,7 @@ import { Pochacco, PochaccoPose } from "@/components/Pochacco/Pochacco";
|
|
|
26
26
|
import { Role, useRole } from "@/hooks/use_role";
|
|
27
27
|
|
|
28
28
|
const Layout = () => {
|
|
29
|
-
const { isLoading } = useContext(GlobalLoadingContext);
|
|
29
|
+
const { isLoading, isFontLoading } = useContext(GlobalLoadingContext);
|
|
30
30
|
const role = useRole();
|
|
31
31
|
const isQueen = role === Role.QUEEN;
|
|
32
32
|
return (
|
|
@@ -46,6 +46,8 @@ const Layout = () => {
|
|
|
46
46
|
}
|
|
47
47
|
main={<Outlet />}
|
|
48
48
|
/>
|
|
49
|
+
<BlurCover status={isFontLoading ? "show" : "silent"} />
|
|
50
|
+
{/*<BlurCover status="show" />*/}
|
|
49
51
|
</>
|
|
50
52
|
);
|
|
51
53
|
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React, { useEffect } from "react";
|
|
2
|
+
import cls from "classnames";
|
|
3
|
+
|
|
4
|
+
export type DelayFadeInProps = {
|
|
5
|
+
children: any;
|
|
6
|
+
delay: number;
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
export const DelayFadeIn = (props: DelayFadeInProps) => {
|
|
10
|
+
const [show, setShow] = React.useState(false);
|
|
11
|
+
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
const id = setTimeout(() => {
|
|
14
|
+
setShow(true);
|
|
15
|
+
}, props.delay);
|
|
16
|
+
|
|
17
|
+
return () => {
|
|
18
|
+
clearTimeout(id);
|
|
19
|
+
};
|
|
20
|
+
}, []);
|
|
21
|
+
|
|
22
|
+
const className = cls("transition-opacity", {
|
|
23
|
+
"opacity-100": show,
|
|
24
|
+
"opacity-0": !show,
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
return <div className={className}>{props.children}</div>;
|
|
28
|
+
};
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import React, { ReactElement } from "react";
|
|
2
2
|
import { Tags, Article } from "@bbki.ng/components";
|
|
3
3
|
import { ROUTES } from "@/constants";
|
|
4
|
+
import { DelayFadeIn } from "@/components/DelayFadeIn/DelayFadeIn";
|
|
4
5
|
|
|
5
6
|
type ArticlePageProps = {
|
|
6
7
|
tags?: string[];
|
|
7
8
|
title: string;
|
|
8
9
|
description?: any;
|
|
9
10
|
headless?: boolean;
|
|
11
|
+
className?: string;
|
|
10
12
|
children: ReactElement;
|
|
11
13
|
};
|
|
12
14
|
|
|
@@ -21,11 +23,15 @@ export const ArticlePage = (props: ArticlePageProps) => {
|
|
|
21
23
|
}
|
|
22
24
|
|
|
23
25
|
return (
|
|
24
|
-
|
|
25
|
-
<Article
|
|
26
|
+
<DelayFadeIn delay={200}>
|
|
27
|
+
<Article
|
|
28
|
+
title={title}
|
|
29
|
+
description={description}
|
|
30
|
+
className={props.className}
|
|
31
|
+
>
|
|
26
32
|
<article className="prose mb-20">{props.children}</article>
|
|
27
33
|
</Article>
|
|
28
34
|
{tagNames && <Tags tags={tags} />}
|
|
29
|
-
|
|
35
|
+
</DelayFadeIn>
|
|
30
36
|
);
|
|
31
37
|
};
|
package/src/components/index.tsx
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { LinkList } from "@bbki.ng/components";
|
|
3
|
+
import { DelayFadeIn } from "@/components/DelayFadeIn/DelayFadeIn";
|
|
3
4
|
|
|
4
5
|
export { DisabledText, SmallDisabledText } from "./disabled_text";
|
|
5
6
|
|
|
@@ -30,7 +31,9 @@ export { MySuspense } from "./my_suspense";
|
|
|
30
31
|
export const CenterLinkList = (props: any) => {
|
|
31
32
|
return (
|
|
32
33
|
<div className="flex justify-center">
|
|
33
|
-
<
|
|
34
|
+
<DelayFadeIn delay={200}>
|
|
35
|
+
<LinkList {...props} />
|
|
36
|
+
</DelayFadeIn>
|
|
34
37
|
</div>
|
|
35
38
|
);
|
|
36
39
|
};
|
|
@@ -4,25 +4,32 @@ import React, {
|
|
|
4
4
|
useState,
|
|
5
5
|
Dispatch,
|
|
6
6
|
SetStateAction,
|
|
7
|
-
useEffect,
|
|
8
7
|
} from "react";
|
|
9
|
-
import {
|
|
8
|
+
import { useFontLoading } from "@/hooks/use_font_loading";
|
|
10
9
|
|
|
11
10
|
type LoadingContext = {
|
|
12
11
|
isLoading: boolean;
|
|
12
|
+
isFontLoading: boolean;
|
|
13
13
|
setIsLoading: Dispatch<SetStateAction<boolean>>;
|
|
14
14
|
};
|
|
15
15
|
|
|
16
16
|
export const GlobalLoadingContext = createContext<LoadingContext>({
|
|
17
|
+
isFontLoading: false,
|
|
17
18
|
isLoading: false,
|
|
18
19
|
setIsLoading: () => false,
|
|
19
20
|
});
|
|
20
21
|
|
|
21
22
|
export const GlobalLoadingStateProvider = (props: { children: ReactNode }) => {
|
|
22
23
|
const [isLoading, setIsLoading] = useState(false);
|
|
23
|
-
|
|
24
|
+
const isFontLoading = useFontLoading();
|
|
24
25
|
return (
|
|
25
|
-
<GlobalLoadingContext.Provider
|
|
26
|
+
<GlobalLoadingContext.Provider
|
|
27
|
+
value={{
|
|
28
|
+
isLoading,
|
|
29
|
+
setIsLoading,
|
|
30
|
+
isFontLoading,
|
|
31
|
+
}}
|
|
32
|
+
>
|
|
26
33
|
{props.children}
|
|
27
34
|
</GlobalLoadingContext.Provider>
|
|
28
35
|
);
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { useEffect, useState } from "react";
|
|
2
|
+
|
|
3
|
+
export const useFontLoading = () => {
|
|
4
|
+
const [isFontLoading, setIsFontLoading] = useState(false);
|
|
5
|
+
|
|
6
|
+
const handleFontLoading = () => {
|
|
7
|
+
setIsFontLoading(true);
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
const handleFontLoadingDone = () => {
|
|
11
|
+
// delay 200ms
|
|
12
|
+
setTimeout(() => {
|
|
13
|
+
setIsFontLoading(false);
|
|
14
|
+
}, 500);
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
useEffect(() => {
|
|
18
|
+
document.fonts.onloadingdone = handleFontLoadingDone;
|
|
19
|
+
document.fonts.onloadingerror = handleFontLoadingDone;
|
|
20
|
+
document.fonts.ready.then(handleFontLoading);
|
|
21
|
+
document.fonts.onloading = handleFontLoading;
|
|
22
|
+
|
|
23
|
+
// check font ready
|
|
24
|
+
if (document.fonts.status === "loaded") {
|
|
25
|
+
handleFontLoadingDone();
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
console.log(document.fonts.status);
|
|
29
|
+
|
|
30
|
+
return () => {
|
|
31
|
+
document.fonts.onloadingdone = null;
|
|
32
|
+
document.fonts.onloadingerror = null;
|
|
33
|
+
document.fonts.ready.then(() => {});
|
|
34
|
+
document.fonts.onloading = null;
|
|
35
|
+
};
|
|
36
|
+
}, [document.fonts.status]);
|
|
37
|
+
|
|
38
|
+
return isFontLoading;
|
|
39
|
+
};
|
package/src/main.css
CHANGED
|
@@ -5,6 +5,7 @@ import { usePosts } from "@/hooks/use_posts";
|
|
|
5
5
|
import { CenterLinkList } from "@/components";
|
|
6
6
|
import { useAuthed } from "@/hooks/use_authed";
|
|
7
7
|
import { useFile2Post } from "@/hooks/use_file_to_post";
|
|
8
|
+
import { DelayFadeIn } from "@/components/DelayFadeIn/DelayFadeIn";
|
|
8
9
|
|
|
9
10
|
type TxtProps = {
|
|
10
11
|
title?: string;
|
package/vite.config.js
CHANGED
|
@@ -61,7 +61,6 @@ export default defineConfig({
|
|
|
61
61
|
],
|
|
62
62
|
devOptions: {
|
|
63
63
|
enabled: false,
|
|
64
|
-
/* other options */
|
|
65
64
|
},
|
|
66
65
|
workbox: {
|
|
67
66
|
cleanupOutdatedCaches: true,
|
|
@@ -81,6 +80,20 @@ export default defineConfig({
|
|
|
81
80
|
},
|
|
82
81
|
},
|
|
83
82
|
},
|
|
83
|
+
{
|
|
84
|
+
urlPattern: /^https:\/\/fonts\.gstatic.com\.com\/.*/i,
|
|
85
|
+
handler: "CacheFirst",
|
|
86
|
+
options: {
|
|
87
|
+
cacheName: "fonts",
|
|
88
|
+
expiration: {
|
|
89
|
+
maxEntries: 100,
|
|
90
|
+
maxAgeSeconds: 60 * 60 * 24 * 365, // <== 365 days
|
|
91
|
+
},
|
|
92
|
+
cacheableResponse: {
|
|
93
|
+
statuses: [0, 200],
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
},
|
|
84
97
|
],
|
|
85
98
|
},
|
|
86
99
|
manifest: {
|