nextia 6.0.2 → 6.0.4
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/LICENSE +1 -1
- package/README.md +5 -15
- package/package.json +14 -11
- package/src/lib.js +43 -55
- package/src/bin.js +0 -233
- package/src/template/README.md +0 -30
- package/src/template/_env.dev +0 -1
- package/src/template/_env.prod +0 -1
- package/src/template/_env.test +0 -1
- package/src/template/_gitignore +0 -9
- package/src/template/biome.json +0 -43
- package/src/template/package.json +0 -37
- package/src/template/public/error.html +0 -14
- package/src/template/public/logo.svg +0 -865
- package/src/template/src/assets/i18n/index.js +0 -8
- package/src/template/src/assets/img/image.jpg +0 -0
- package/src/template/src/components/I18n/index.jsx +0 -23
- package/src/template/src/components/Icon/index.jsx +0 -48
- package/src/template/src/components/Link/index.jsx +0 -14
- package/src/template/src/components/Translate/index.jsx +0 -31
- package/src/template/src/components/Translate/style.css +0 -2
- package/src/template/src/components/index.js +0 -6
- package/src/template/src/index.html +0 -18
- package/src/template/src/index.jsx +0 -5
- package/src/template/src/pages/demo/functions.js +0 -3
- package/src/template/src/pages/demo/index.jsx +0 -10
- package/src/template/src/pages/demo/style.css +0 -2
- package/src/template/src/pages/functions.js +0 -9
- package/src/template/src/pages/home/functions.js +0 -43
- package/src/template/src/pages/home/index.jsx +0 -10
- package/src/template/src/pages/home/style.css +0 -2
- package/src/template/src/pages/http/not-found/index.jsx +0 -19
- package/src/template/src/pages/http/not-found/style.css +0 -2
- package/src/template/src/pages/index.jsx +0 -65
- package/src/template/src/theme/animations.css +0 -30
- package/src/template/src/theme/fonts/Roboto-Regular.ttf +0 -0
- package/src/template/src/theme/fonts/index.css +0 -7
- package/src/template/src/theme/icons/icons.svg +0 -121
- package/src/template/src/theme/icons/index.css +0 -1
- package/src/template/src/theme/index.css +0 -40
- package/src/template/src/theme/util.css +0 -27
- package/src/template/src/utils/hooks.js +0 -23
- package/src/template/src/utils/index.js +0 -14
- package/src/template/vite.config.js +0 -97
|
Binary file
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { useFx } from 'nextia'
|
|
2
|
-
import i18nFile from 'assets/i18n'
|
|
3
|
-
|
|
4
|
-
export default function I18n({ value, args = [] }) {
|
|
5
|
-
const { context } = useFx()
|
|
6
|
-
|
|
7
|
-
try {
|
|
8
|
-
let text = value.split('.').reduce((ac, el) => ac[el], i18nFile)
|
|
9
|
-
text = text[i18nFile.locales.indexOf(context.state.i18n)]
|
|
10
|
-
|
|
11
|
-
if (args) {
|
|
12
|
-
text = text.replace(
|
|
13
|
-
/([{}])\\1|[{](.*?)(?:!(.+?))?[}]/g,
|
|
14
|
-
(match, literal, number) => args[number] || match
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
return text
|
|
19
|
-
} catch (e) {
|
|
20
|
-
console.error('Error in [il8n] => ' + value)
|
|
21
|
-
return value
|
|
22
|
-
}
|
|
23
|
-
}
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
import { useEffect, useRef } from 'react'
|
|
2
|
-
import icons from 'theme/icons/icons.svg?raw'
|
|
3
|
-
|
|
4
|
-
export default function Icon({
|
|
5
|
-
id,
|
|
6
|
-
className,
|
|
7
|
-
style,
|
|
8
|
-
width = '48',
|
|
9
|
-
height,
|
|
10
|
-
viewBox = '0 0 48 48',
|
|
11
|
-
fill = 'none',
|
|
12
|
-
stroke = 'currentColor',
|
|
13
|
-
strokeWidth = '2',
|
|
14
|
-
strokeLinecap = 'round',
|
|
15
|
-
strokeLinejoin = 'round',
|
|
16
|
-
...props
|
|
17
|
-
}) {
|
|
18
|
-
const ref = useRef()
|
|
19
|
-
|
|
20
|
-
useEffect(() => {
|
|
21
|
-
const svg = new window.DOMParser()
|
|
22
|
-
.parseFromString(icons, 'image/svg+xml')
|
|
23
|
-
.documentElement.getElementById(id)
|
|
24
|
-
|
|
25
|
-
if (svg) {
|
|
26
|
-
ref.current.innerHTML = svg.innerHTML
|
|
27
|
-
}
|
|
28
|
-
}, [id])
|
|
29
|
-
|
|
30
|
-
return (
|
|
31
|
-
<svg
|
|
32
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
33
|
-
ref={ref}
|
|
34
|
-
id={id}
|
|
35
|
-
className={className}
|
|
36
|
-
style={style}
|
|
37
|
-
width={width}
|
|
38
|
-
height={height}
|
|
39
|
-
viewBox={viewBox}
|
|
40
|
-
fill={fill}
|
|
41
|
-
stroke={stroke}
|
|
42
|
-
strokeWidth={strokeWidth}
|
|
43
|
-
strokeLinecap={strokeLinecap}
|
|
44
|
-
strokeLinejoin={strokeLinejoin}
|
|
45
|
-
{...props}
|
|
46
|
-
/>
|
|
47
|
-
)
|
|
48
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
|
|
3
|
-
export default function Link({ children, href, value = {}, ...props }) {
|
|
4
|
-
href ??= window.location.hash.split('?')[0]
|
|
5
|
-
value = Object.keys(value).length
|
|
6
|
-
? '?' + new URLSearchParams(value).toString()
|
|
7
|
-
: ''
|
|
8
|
-
|
|
9
|
-
return (
|
|
10
|
-
<a href={href + value} {...props}>
|
|
11
|
-
{children}
|
|
12
|
-
</a>
|
|
13
|
-
)
|
|
14
|
-
}
|
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import { useFx, css } from 'nextia'
|
|
3
|
-
import i18nFile from 'assets/i18n'
|
|
4
|
-
import './style.css'
|
|
5
|
-
|
|
6
|
-
export default function Translate({ className, style }) {
|
|
7
|
-
const { context } = useFx()
|
|
8
|
-
|
|
9
|
-
return (
|
|
10
|
-
<article
|
|
11
|
-
className={css('Translate-component', className, '')}
|
|
12
|
-
style={style}
|
|
13
|
-
>
|
|
14
|
-
<select
|
|
15
|
-
name="i18n"
|
|
16
|
-
value={context.state.i18n}
|
|
17
|
-
onChange={(e) => {
|
|
18
|
-
const { value } = e.target
|
|
19
|
-
context.fx.set({ i18n: value })
|
|
20
|
-
window.localStorage.setItem('i18n', value)
|
|
21
|
-
}}
|
|
22
|
-
>
|
|
23
|
-
{i18nFile.locales.map((e) => (
|
|
24
|
-
<option key={e} value={e} className="m-2">
|
|
25
|
-
{e}
|
|
26
|
-
</option>
|
|
27
|
-
))}
|
|
28
|
-
</select>
|
|
29
|
-
</article>
|
|
30
|
-
)
|
|
31
|
-
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html>
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="utf-8" />
|
|
6
|
-
<title>%VITE_TITLE%</title>
|
|
7
|
-
<link rel="shortcut icon" href="logo.svg" />
|
|
8
|
-
<meta name="version" content="%VERSION%" />
|
|
9
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
|
10
|
-
<link rel="stylesheet" href="theme/index.css" />
|
|
11
|
-
<script type="module" src="index.jsx"></script>
|
|
12
|
-
</head>
|
|
13
|
-
|
|
14
|
-
<body>
|
|
15
|
-
<div id="root"></div>
|
|
16
|
-
</body>
|
|
17
|
-
|
|
18
|
-
</html>
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React, { useEffect } from 'react'
|
|
2
|
-
import { useFx, css } from 'nextia'
|
|
3
|
-
import functions from './functions'
|
|
4
|
-
import './style.css'
|
|
5
|
-
|
|
6
|
-
export default function DemoPage() {
|
|
7
|
-
const { state, fx } = useFx(functions)
|
|
8
|
-
|
|
9
|
-
return <section className={css('DemoPage', '')}>DemoPage</section>
|
|
10
|
-
}
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
const initialState = {
|
|
2
|
-
channel: 7,
|
|
3
|
-
msg: 'https://sinuhe.dev',
|
|
4
|
-
data: { user: 'Sinuhe MB' },
|
|
5
|
-
myArray: ['A', 'B', 'C'],
|
|
6
|
-
setNameValue: 'name value',
|
|
7
|
-
form: {
|
|
8
|
-
funny: false,
|
|
9
|
-
gender: 'M',
|
|
10
|
-
name: {
|
|
11
|
-
firstName: 'Sinuhe',
|
|
12
|
-
lastName: 'Maceda'
|
|
13
|
-
},
|
|
14
|
-
year: 33,
|
|
15
|
-
moreArray: [[[50, 40, 10]]]
|
|
16
|
-
},
|
|
17
|
-
ls: {
|
|
18
|
-
users: [
|
|
19
|
-
{
|
|
20
|
-
name: 'sinuhe',
|
|
21
|
-
year: 33
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
name: 'alberto',
|
|
25
|
-
year: 20
|
|
26
|
-
}
|
|
27
|
-
]
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
function increment({ state, set }) {
|
|
32
|
-
set({ channel: state.channel + 1 })
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
function decrement({ state, set }) {
|
|
36
|
-
set({ channel: state.channel - 1 })
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
export default {
|
|
40
|
-
initialState,
|
|
41
|
-
increment,
|
|
42
|
-
decrement
|
|
43
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React, { useEffect } from 'react'
|
|
2
|
-
import './style.css'
|
|
3
|
-
import { useFx, css } from 'nextia'
|
|
4
|
-
import functions from './functions'
|
|
5
|
-
|
|
6
|
-
export default function HomePage() {
|
|
7
|
-
const { state, initialState, fx, context } = useFx(functions)
|
|
8
|
-
|
|
9
|
-
return <section className={css('HomePage', 'container')}>homePage</section>
|
|
10
|
-
}
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import React, { useEffect } from 'react'
|
|
2
|
-
import { css } from 'nextia'
|
|
3
|
-
import './style.css'
|
|
4
|
-
|
|
5
|
-
export default function HttpNotFoundPage() {
|
|
6
|
-
return (
|
|
7
|
-
<section
|
|
8
|
-
className={css('HttpNotFoundPage', 'd-flex justify-content-center')}
|
|
9
|
-
>
|
|
10
|
-
<div className="d-flex align-items-center">
|
|
11
|
-
<div className="d-flex flex-column">
|
|
12
|
-
<div className="text-center">
|
|
13
|
-
<h5>Not Found</h5>
|
|
14
|
-
</div>
|
|
15
|
-
</div>
|
|
16
|
-
</div>
|
|
17
|
-
</section>
|
|
18
|
-
)
|
|
19
|
-
}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useState, useRef, lazy } from 'react'
|
|
2
|
-
import { useFx, Context } from 'nextia'
|
|
3
|
-
import { Translate, I18n, Icon, Link } from 'components'
|
|
4
|
-
import functions from './functions.js'
|
|
5
|
-
import { startViewTransition, useQueryString } from 'utils'
|
|
6
|
-
|
|
7
|
-
export default function Pages() {
|
|
8
|
-
const self = useFx(functions)
|
|
9
|
-
const { state, fx } = self
|
|
10
|
-
|
|
11
|
-
const [Page, setPage] = useState()
|
|
12
|
-
const qs = useQueryString()
|
|
13
|
-
|
|
14
|
-
const ref = useRef()
|
|
15
|
-
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
const hash = ['', '#/'].includes(qs.hash) ? '#/home' : qs.hash
|
|
18
|
-
|
|
19
|
-
const page = lazy(async () => {
|
|
20
|
-
const path = hash.substring(2).split('/')
|
|
21
|
-
|
|
22
|
-
try {
|
|
23
|
-
if (path.length === 1) {
|
|
24
|
-
return await import(`./${path[0]}/index.jsx`)
|
|
25
|
-
} else if (path.length === 2) {
|
|
26
|
-
return await import(`./${path[0]}/${path[1]}/index.jsx`)
|
|
27
|
-
}
|
|
28
|
-
} catch (e) {
|
|
29
|
-
console.error(e)
|
|
30
|
-
return await import('./http/not-found/index.jsx')
|
|
31
|
-
}
|
|
32
|
-
})
|
|
33
|
-
|
|
34
|
-
startViewTransition(setPage(page), ref.current, 'fade')
|
|
35
|
-
}, [qs.hash])
|
|
36
|
-
|
|
37
|
-
return (
|
|
38
|
-
<Context value={self}>
|
|
39
|
-
<header style={{ display: 'flex', gap: '20px' }}>
|
|
40
|
-
<Icon id="globe" width="24" />
|
|
41
|
-
|
|
42
|
-
<Translate
|
|
43
|
-
value={state.i18nLocale}
|
|
44
|
-
onChange={(e) => fx.changeI18n(e)}
|
|
45
|
-
/>
|
|
46
|
-
|
|
47
|
-
<I18n value="page.name" args={['Sinuhe', 'Maceda', 'Bouchan']} />
|
|
48
|
-
|
|
49
|
-
<Link href="/" className="mr-2">
|
|
50
|
-
/
|
|
51
|
-
</Link>
|
|
52
|
-
<Link href="#/" className="mr-2">
|
|
53
|
-
/home
|
|
54
|
-
</Link>
|
|
55
|
-
<Link href="#/demo" className="mr-2">
|
|
56
|
-
/demo
|
|
57
|
-
</Link>
|
|
58
|
-
</header>
|
|
59
|
-
|
|
60
|
-
<main ref={ref} className="m-2">
|
|
61
|
-
{Page && <Page qs={qs.queryString} />}
|
|
62
|
-
</main>
|
|
63
|
-
</Context>
|
|
64
|
-
)
|
|
65
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
:root {
|
|
2
|
-
view-transition-name: none;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* fade
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
@keyframes fade {
|
|
10
|
-
0% {
|
|
11
|
-
opacity: var(--start, 1);
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
100% {
|
|
15
|
-
opacity: var(--end, 1);
|
|
16
|
-
}
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
::view-transition-new(fade),
|
|
20
|
-
::view-transition-old(fade) {
|
|
21
|
-
animation: fade ease 0.3s;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
::view-transition-new(fade) {
|
|
25
|
-
--start: 0;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
::view-transition-old(fade) {
|
|
29
|
-
--end: 0;
|
|
30
|
-
}
|
|
Binary file
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
-
<svg
|
|
3
|
-
width="256"
|
|
4
|
-
height="256"
|
|
5
|
-
viewBox="0 0 48 48"
|
|
6
|
-
fill="none"
|
|
7
|
-
color="white"
|
|
8
|
-
stroke="currentColor"
|
|
9
|
-
stroke-width="1"
|
|
10
|
-
stroke-linecap="round"
|
|
11
|
-
stroke-linejoin="round"
|
|
12
|
-
version="1.1"
|
|
13
|
-
id="icons"
|
|
14
|
-
sodipodi:docname="icons.svg"
|
|
15
|
-
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
|
|
16
|
-
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
17
|
-
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
18
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
19
|
-
xmlns:svg="http://www.w3.org/2000/svg">
|
|
20
|
-
<sodipodi:namedview
|
|
21
|
-
id="namedview"
|
|
22
|
-
pagecolor="#505050"
|
|
23
|
-
bordercolor="#ffffff"
|
|
24
|
-
borderopacity="1"
|
|
25
|
-
inkscape:showpageshadow="0"
|
|
26
|
-
inkscape:pageopacity="0"
|
|
27
|
-
inkscape:pagecheckerboard="1"
|
|
28
|
-
inkscape:deskcolor="#505050"
|
|
29
|
-
showgrid="false"
|
|
30
|
-
showguides="true"
|
|
31
|
-
inkscape:zoom="3.5672"
|
|
32
|
-
inkscape:cx="156.42521"
|
|
33
|
-
inkscape:cy="128.25185"
|
|
34
|
-
inkscape:current-layer="globe"
|
|
35
|
-
inkscape:window-width="2560"
|
|
36
|
-
inkscape:window-height="1080"
|
|
37
|
-
inkscape:window-x="2560"
|
|
38
|
-
inkscape:window-y="0"
|
|
39
|
-
inkscape:window-maximized="1" />
|
|
40
|
-
<defs
|
|
41
|
-
id="defs" />
|
|
42
|
-
<g
|
|
43
|
-
id="globe"
|
|
44
|
-
style="display:none">
|
|
45
|
-
<circle
|
|
46
|
-
cx="23.960287038110003"
|
|
47
|
-
cy="23.914597038110003"
|
|
48
|
-
r="18.23231994892"
|
|
49
|
-
id="circle1" />
|
|
50
|
-
<line
|
|
51
|
-
x1="6"
|
|
52
|
-
y1="24"
|
|
53
|
-
x2="42"
|
|
54
|
-
y2="24"
|
|
55
|
-
id="line1" />
|
|
56
|
-
<path
|
|
57
|
-
d="m 23.9603,5.6822471 c 4.4192,4.9926549 6.9306,11.4718789 7.0671,18.2323589 -0.1365,6.760478 -2.6479,13.23962 -7.0671,18.232339 -4.4193,-4.992719 -6.9307,-11.471861 -7.0672,-18.232339 0.1365,-6.76048 2.6479,-13.239704 7.0672,-18.2323589 z"
|
|
58
|
-
id="path1" />
|
|
59
|
-
</g>
|
|
60
|
-
<g
|
|
61
|
-
id="camera"
|
|
62
|
-
style="display:none;"
|
|
63
|
-
sodipodi:insensitive="true">
|
|
64
|
-
<path
|
|
65
|
-
d="m 44.2234,35.0688 c 0,1.9822 -1.6079,3.5891 -3.5913,3.5891 h -32.32145 c -1.98338,0 -3.59123,-1.6069 -3.59125,-3.5891 v -19.7405 c 0,-1.9822 1.60786,-3.5891 3.59125,-3.5891 h 7.18255 l 3.5913,-5.38381 h 10.7738 l 3.5913,5.38381 h 7.1825 c 1.9834,0 3.5913,1.6069 3.5913,3.5891 z"
|
|
66
|
-
id="path2" />
|
|
67
|
-
<circle
|
|
68
|
-
cx="24.709818"
|
|
69
|
-
cy="23.41984"
|
|
70
|
-
r="5.5424304"
|
|
71
|
-
id="circle2" />
|
|
72
|
-
</g>
|
|
73
|
-
<g
|
|
74
|
-
id="video"
|
|
75
|
-
style="display:none;"
|
|
76
|
-
sodipodi:insensitive="true">
|
|
77
|
-
<polygon
|
|
78
|
-
points="45.444025,13.035503 31.653955,23.006053 45.444025,32.976603 "
|
|
79
|
-
id="polygon35" />
|
|
80
|
-
<rect
|
|
81
|
-
x="2.1038051"
|
|
82
|
-
y="9.0472832"
|
|
83
|
-
width="29.55015"
|
|
84
|
-
height="27.91754"
|
|
85
|
-
rx="1.9999979"
|
|
86
|
-
ry="1.9999982"
|
|
87
|
-
id="rect35" />
|
|
88
|
-
</g>
|
|
89
|
-
<g
|
|
90
|
-
id="exit"
|
|
91
|
-
style="display:none"
|
|
92
|
-
sodipodi:insensitive="true">
|
|
93
|
-
<path
|
|
94
|
-
id="solid"
|
|
95
|
-
d="M 12,3.4 C 5.8,7.2 1.8,14 1.8,22 1.8,35 12,45 24,45 36,45 46,35 46,22 46,14 42,7.2 36,3.4" />
|
|
96
|
-
<path
|
|
97
|
-
id="animation"
|
|
98
|
-
d="M 12,3.4 C 5.8,7.2 1.8,14 1.8,22 1.8,35 12,45 24,45 36,45 46,35 46,22 46,14 42,7.2 36,3.4" />
|
|
99
|
-
<g
|
|
100
|
-
id="arrow">
|
|
101
|
-
<line
|
|
102
|
-
id="left"
|
|
103
|
-
x1="24"
|
|
104
|
-
y1="25"
|
|
105
|
-
x2="10"
|
|
106
|
-
y2="14" />
|
|
107
|
-
<line
|
|
108
|
-
id="center"
|
|
109
|
-
x1="24"
|
|
110
|
-
y1="1.3"
|
|
111
|
-
x2="24"
|
|
112
|
-
y2="25" />
|
|
113
|
-
<line
|
|
114
|
-
id="right"
|
|
115
|
-
x1="24"
|
|
116
|
-
y1="25"
|
|
117
|
-
x2="35"
|
|
118
|
-
y2="14" />
|
|
119
|
-
</g>
|
|
120
|
-
</g>
|
|
121
|
-
</svg>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
/* icons */
|
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
@import "./util.css";
|
|
2
|
-
@import "./fonts/index.css";
|
|
3
|
-
@import "./icons/index.css";
|
|
4
|
-
@import "./animations.css";
|
|
5
|
-
|
|
6
|
-
:root {
|
|
7
|
-
--primary-color: #344188;
|
|
8
|
-
--primary-color-50: #3441887a;
|
|
9
|
-
--link: #5fac9f;
|
|
10
|
-
--body-bg: #282c34;
|
|
11
|
-
--body-color: #a8a8a8;
|
|
12
|
-
--font-family: "Roboto";
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* html
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
html,
|
|
20
|
-
body {
|
|
21
|
-
background-color: var(--body-bg);
|
|
22
|
-
color: var(--body-color);
|
|
23
|
-
font-family: var(--font-family);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
a {
|
|
27
|
-
color: var(--link);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.mr-2 {
|
|
31
|
-
margin-right: 20px;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.m-2 {
|
|
35
|
-
margin: 20px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.p-2 {
|
|
39
|
-
padding: 20px;
|
|
40
|
-
}
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Scrollbar
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
@media (pointer: fine) {
|
|
6
|
-
::-webkit-scrollbar {
|
|
7
|
-
width: 14px;
|
|
8
|
-
height: 14px;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
::-webkit-scrollbar-thumb {
|
|
12
|
-
border-radius: 14px;
|
|
13
|
-
border: 3px solid transparent;
|
|
14
|
-
background-clip: content-box;
|
|
15
|
-
background-color: var(--primary-color);
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
::-webkit-scrollbar-thumb:hover {
|
|
19
|
-
background-color: var(--primary-color-50);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
::-webkit-scrollbar,
|
|
23
|
-
::-webkit-scrollbar-track,
|
|
24
|
-
::-webkit-scrollbar-corner {
|
|
25
|
-
background-color: transparent;
|
|
26
|
-
}
|
|
27
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react'
|
|
2
|
-
|
|
3
|
-
export function useQueryString() {
|
|
4
|
-
const getQueryString = () => ({
|
|
5
|
-
hash: window.location.hash.split('?')[0],
|
|
6
|
-
queryString: Object.fromEntries(
|
|
7
|
-
new URLSearchParams(window.location.hash.split('?')[1])
|
|
8
|
-
)
|
|
9
|
-
})
|
|
10
|
-
|
|
11
|
-
const [queryString, setQueryString] = useState(getQueryString())
|
|
12
|
-
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
window.addEventListener('popstate', () => setQueryString(getQueryString()))
|
|
15
|
-
return () => {
|
|
16
|
-
window.removeEventListener('popstate', () =>
|
|
17
|
-
setQueryString(getQueryString())
|
|
18
|
-
)
|
|
19
|
-
}
|
|
20
|
-
}, [])
|
|
21
|
-
|
|
22
|
-
return queryString
|
|
23
|
-
}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { useQueryString } from './hooks'
|
|
2
|
-
|
|
3
|
-
const env = import.meta.env
|
|
4
|
-
|
|
5
|
-
async function startViewTransition(fun = () => {}, ref, animation) {
|
|
6
|
-
if (!document.startViewTransition || env.VITE_VIEW_TRANSITION === 'false')
|
|
7
|
-
return fun()
|
|
8
|
-
|
|
9
|
-
ref.style.viewTransitionName = animation
|
|
10
|
-
await document.startViewTransition(fun).finished
|
|
11
|
-
ref.style.viewTransitionName = ''
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export { env, useQueryString, startViewTransition }
|