@remyyy/create-velox 0.0.16 → 0.0.18
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/package.json +1 -1
- package/templates/vanilla-js/package.json +1 -1
- package/templates/vanilla-js/src/App.jsx +60 -35
- package/templates/vanilla-js/src/components/Card.jsx +23 -5
- package/templates/vanilla-js/src/components/Header.jsx +32 -12
- package/templates/vanilla-js/src/style.css +80 -38
- package/templates/vanilla-ts/package.json +1 -1
- package/templates/vanilla-ts/src/App.tsx +60 -35
- package/templates/vanilla-ts/src/components/Card.tsx +23 -5
- package/templates/vanilla-ts/src/components/Header.tsx +32 -12
- package/templates/vanilla-ts/src/style.css +75 -33
package/package.json
CHANGED
|
@@ -9,61 +9,87 @@ function Dashboard() {
|
|
|
9
9
|
|
|
10
10
|
createEffect(() => {
|
|
11
11
|
const c = count();
|
|
12
|
-
|
|
12
|
+
const timestamp = new Date().toLocaleTimeString('en-GB');
|
|
13
|
+
setLogs(prev => [`[${timestamp}] Updated state to ${c}`, ...prev].slice(0, 6));
|
|
13
14
|
});
|
|
14
15
|
|
|
15
16
|
return (
|
|
16
17
|
<div className="layout">
|
|
17
18
|
<Header />
|
|
18
19
|
|
|
19
|
-
<section>
|
|
20
|
-
<h1 style={{
|
|
21
|
-
|
|
20
|
+
<section style={{ marginBottom: '5rem' }}>
|
|
21
|
+
<h1 style={{
|
|
22
|
+
fontSize: '4.5rem',
|
|
23
|
+
fontWeight: 900,
|
|
24
|
+
marginBottom: '1rem',
|
|
25
|
+
letterSpacing: '-0.05em',
|
|
26
|
+
lineHeight: 1,
|
|
27
|
+
color: 'white'
|
|
28
|
+
}}>
|
|
29
|
+
Professional <br />
|
|
30
|
+
<span style={{ color: 'var(--color-primary)' }}>Reactive Engineering.</span>
|
|
22
31
|
</h1>
|
|
23
|
-
<p style={{
|
|
24
|
-
|
|
25
|
-
|
|
32
|
+
<p style={{
|
|
33
|
+
color: 'var(--color-text-secondary)',
|
|
34
|
+
fontSize: '1.2rem',
|
|
35
|
+
maxWidth: '600px',
|
|
36
|
+
fontWeight: 500
|
|
37
|
+
}}>
|
|
38
|
+
High-performance interfaces powered by atomic reactivity.
|
|
39
|
+
Zero virtual DOM. Zero abstraction overhead. Pure excellence.
|
|
26
40
|
</p>
|
|
27
41
|
</section>
|
|
28
42
|
|
|
29
43
|
<div className="grid">
|
|
30
|
-
<Card title="
|
|
44
|
+
<Card title="Reactive Engine">
|
|
31
45
|
<div style={{
|
|
32
|
-
fontSize: '
|
|
33
|
-
fontWeight:
|
|
34
|
-
color: '
|
|
35
|
-
|
|
46
|
+
fontSize: '6rem',
|
|
47
|
+
fontWeight: 900,
|
|
48
|
+
color: 'white',
|
|
49
|
+
marginBottom: '1.5rem',
|
|
50
|
+
fontVariantNumeric: 'tabular-nums',
|
|
51
|
+
letterSpacing: '-0.06em'
|
|
36
52
|
}}>
|
|
37
53
|
{count}
|
|
38
54
|
</div>
|
|
39
|
-
<div style={{ display: 'flex', gap: '0.
|
|
55
|
+
<div style={{ display: 'flex', gap: '0.75rem' }}>
|
|
40
56
|
<button onClick={() => setCount(c => c + 1)}>Increment</button>
|
|
41
|
-
<button onClick={() => setCount(c => c - 1)}>Decrement</button>
|
|
57
|
+
<button className="secondary" onClick={() => setCount(c => c - 1)}>Decrement</button>
|
|
42
58
|
</div>
|
|
43
59
|
</Card>
|
|
44
60
|
|
|
45
|
-
<Card title="
|
|
61
|
+
<Card title="Kernel Feed">
|
|
46
62
|
<div style={{
|
|
47
|
-
background: '#
|
|
48
|
-
padding: '
|
|
49
|
-
borderRadius: '
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
63
|
+
background: '#010409',
|
|
64
|
+
padding: '1.25rem',
|
|
65
|
+
borderRadius: '6px',
|
|
66
|
+
fontSize: '0.8rem',
|
|
67
|
+
height: '180px',
|
|
68
|
+
overflow: 'hidden',
|
|
69
|
+
fontFamily: 'var(--font-mono)',
|
|
70
|
+
border: '1px solid var(--color-border)',
|
|
71
|
+
color: 'var(--color-text-secondary)'
|
|
54
72
|
}}>
|
|
55
73
|
<For each={logs}>
|
|
56
|
-
{(log) => <div style={{
|
|
74
|
+
{(log) => <div style={{ marginBottom: '0.4rem' }}> <span style={{ color: 'var(--color-primary)' }}>λ</span> {log}</div>}
|
|
57
75
|
</For>
|
|
58
76
|
</div>
|
|
59
77
|
</Card>
|
|
60
78
|
|
|
61
|
-
<Card title="
|
|
62
|
-
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.
|
|
63
|
-
<div
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
79
|
+
<Card title="Quick Stats">
|
|
80
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', fontSize: '0.9rem', fontWeight: 600 }}>
|
|
81
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.6rem' }}>
|
|
82
|
+
<span style={{ color: 'var(--color-text-secondary)' }}>PACKAGE_SIZE</span>
|
|
83
|
+
<span style={{ color: 'var(--color-primary)' }}>< 3KB</span>
|
|
84
|
+
</div>
|
|
85
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.6rem' }}>
|
|
86
|
+
<span style={{ color: 'var(--color-text-secondary)' }}>UPDATE_SPEED</span>
|
|
87
|
+
<span>O(1)</span>
|
|
88
|
+
</div>
|
|
89
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.6rem' }}>
|
|
90
|
+
<span style={{ color: 'var(--color-text-secondary)' }}>VIRTUAL_DOM</span>
|
|
91
|
+
<span style={{ color: '#ff7b72' }}>ZERO</span>
|
|
92
|
+
</div>
|
|
67
93
|
</div>
|
|
68
94
|
</Card>
|
|
69
95
|
</div>
|
|
@@ -73,21 +99,20 @@ function Dashboard() {
|
|
|
73
99
|
|
|
74
100
|
function Features() {
|
|
75
101
|
const features = [
|
|
76
|
-
{ name: "
|
|
77
|
-
{ name: "Fine-Grained Reactivity", desc: "Only
|
|
78
|
-
{ name: "
|
|
79
|
-
{ name: "JavaScript First", desc: "Simple API for modern JS." }
|
|
102
|
+
{ name: "Direct Compilation", desc: "Velox templates compile directly to surgical DOM operations, skipping all intermediate diffing layers." },
|
|
103
|
+
{ name: "Fine-Grained Reactivity", desc: "Built with atomic signals. Only the exact parts of the UI that depend on data are updated." },
|
|
104
|
+
{ name: "Production Ready", desc: "Includes everything needed for scale: routing, state, and SSR support as standard." }
|
|
80
105
|
];
|
|
81
106
|
|
|
82
107
|
return (
|
|
83
108
|
<div className="layout">
|
|
84
109
|
<Header />
|
|
85
|
-
<h2 style={{ fontSize: '2rem', marginBottom: '
|
|
110
|
+
<h2 style={{ fontSize: '2rem', fontWeight: 800, marginBottom: '4rem', letterSpacing: '-0.04em' }}>Engineering Manifesto</h2>
|
|
86
111
|
<div className="grid">
|
|
87
112
|
<For each={() => features}>
|
|
88
113
|
{(item) => (
|
|
89
114
|
<Card title={item.name}>
|
|
90
|
-
<p
|
|
115
|
+
<p>{item.desc}</p>
|
|
91
116
|
</Card>
|
|
92
117
|
)}
|
|
93
118
|
</For>
|
|
@@ -3,14 +3,32 @@ export const Card = (props) => {
|
|
|
3
3
|
<div style={{
|
|
4
4
|
background: 'var(--color-surface)',
|
|
5
5
|
border: '1px solid var(--color-border)',
|
|
6
|
-
borderRadius: '
|
|
7
|
-
padding: '
|
|
6
|
+
borderRadius: '6px',
|
|
7
|
+
padding: '2rem',
|
|
8
8
|
display: 'flex',
|
|
9
9
|
flexDirection: 'column',
|
|
10
10
|
gap: '1rem',
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
11
|
+
height: '100%',
|
|
12
|
+
transition: 'border-color 0.15s ease'
|
|
13
|
+
}}
|
|
14
|
+
onMouseEnter={(e) => e.currentTarget.style.borderColor = 'var(--color-border-bright)'}
|
|
15
|
+
onMouseLeave={(e) => e.currentTarget.style.borderColor = 'var(--color-border)'}
|
|
16
|
+
>
|
|
17
|
+
{props.title && (
|
|
18
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
19
|
+
<div style={{ width: '4px', height: '16px', background: 'var(--color-primary)' }} />
|
|
20
|
+
<h3 style={{
|
|
21
|
+
fontSize: '1rem',
|
|
22
|
+
fontWeight: 800,
|
|
23
|
+
color: 'white',
|
|
24
|
+
}}>
|
|
25
|
+
{props.title}
|
|
26
|
+
</h3>
|
|
27
|
+
</div>
|
|
28
|
+
)}
|
|
29
|
+
<div style={{ color: 'var(--color-text-secondary)', fontSize: '0.9rem', lineHeight: 1.6 }}>
|
|
30
|
+
{props.children}
|
|
31
|
+
</div>
|
|
14
32
|
</div>
|
|
15
33
|
);
|
|
16
34
|
};
|
|
@@ -1,27 +1,47 @@
|
|
|
1
|
-
import { Link } from '@remyyy/velox';
|
|
1
|
+
import { Link, useLocation } from '@remyyy/velox';
|
|
2
2
|
|
|
3
3
|
export function Header() {
|
|
4
|
+
const location = useLocation();
|
|
5
|
+
|
|
6
|
+
const isActive = (path) => location.pathname === path;
|
|
7
|
+
|
|
4
8
|
return (
|
|
5
9
|
<header style={{
|
|
6
10
|
display: 'flex',
|
|
7
11
|
alignItems: 'center',
|
|
8
12
|
justifyContent: 'space-between',
|
|
9
|
-
marginBottom: '
|
|
10
|
-
|
|
11
|
-
|
|
13
|
+
marginBottom: '6rem',
|
|
14
|
+
paddingBottom: '2.5rem',
|
|
15
|
+
borderBottom: '2px solid var(--color-primary)',
|
|
12
16
|
}}>
|
|
13
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: '
|
|
17
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
14
18
|
<div style={{
|
|
15
19
|
width: '32px', height: '32px',
|
|
16
|
-
|
|
17
|
-
borderRadius: '6px'
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
backgroundColor: 'var(--color-primary)',
|
|
21
|
+
borderRadius: '6px',
|
|
22
|
+
display: 'flex',
|
|
23
|
+
alignItems: 'center',
|
|
24
|
+
justifyContent: 'center',
|
|
25
|
+
fontWeight: 900,
|
|
26
|
+
color: 'var(--color-bg)',
|
|
27
|
+
fontSize: '1.2rem'
|
|
28
|
+
}}>V</div>
|
|
29
|
+
<span style={{ fontSize: '1.25rem', fontWeight: 800, letterSpacing: '-0.04em' }}>
|
|
30
|
+
VELOX<span style={{ color: 'var(--color-primary)' }}>_</span>CORE
|
|
31
|
+
</span>
|
|
20
32
|
</div>
|
|
21
33
|
|
|
22
|
-
<nav style={{ display: 'flex', gap: '
|
|
23
|
-
<Link to="/"
|
|
24
|
-
|
|
34
|
+
<nav style={{ display: 'flex', gap: '3rem' }}>
|
|
35
|
+
<Link to="/" style={{
|
|
36
|
+
color: isActive('/') ? 'var(--color-primary)' : 'var(--color-text-primary)',
|
|
37
|
+
fontWeight: isActive('/') ? '700' : '600',
|
|
38
|
+
transition: 'all 0.2s ease'
|
|
39
|
+
}}>Terminal</Link>
|
|
40
|
+
<Link to="/features" style={{
|
|
41
|
+
color: isActive('/features') ? 'var(--color-primary)' : 'var(--color-text-secondary)',
|
|
42
|
+
fontWeight: isActive('/features') ? '700' : '600',
|
|
43
|
+
transition: 'all 0.2s ease'
|
|
44
|
+
}}>Library</Link>
|
|
25
45
|
</nav>
|
|
26
46
|
</header>
|
|
27
47
|
);
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--font-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
--color-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
--color-
|
|
11
|
-
|
|
12
|
-
--color-
|
|
13
|
-
|
|
2
|
+
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
|
3
|
+
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
4
|
+
|
|
5
|
+
/* Midnight Slate (Professional, Dark, Colorful) */
|
|
6
|
+
--color-bg: #02040a;
|
|
7
|
+
/* Absolute Black-Ink */
|
|
8
|
+
--color-surface: #0d1117;
|
|
9
|
+
/* Dark Slate */
|
|
10
|
+
--color-surface-hover: #161b22;
|
|
11
|
+
--color-border: #21262d;
|
|
12
|
+
--color-border-bright: #30363d;
|
|
13
|
+
|
|
14
|
+
--color-primary: #58a6ff;
|
|
15
|
+
/* Sophisticated Blue */
|
|
16
|
+
--color-primary-dim: rgba(88, 166, 255, 0.1);
|
|
17
|
+
--color-text-primary: #f0f6fc;
|
|
18
|
+
--color-text-secondary: #8b949e;
|
|
19
|
+
--color-text-dim: #484f58;
|
|
14
20
|
}
|
|
15
21
|
|
|
16
22
|
* {
|
|
@@ -21,55 +27,91 @@
|
|
|
21
27
|
|
|
22
28
|
body {
|
|
23
29
|
margin: 0;
|
|
24
|
-
min-width: 320px;
|
|
25
30
|
min-height: 100vh;
|
|
26
31
|
background-color: var(--color-bg);
|
|
27
32
|
color: var(--color-text-primary);
|
|
28
|
-
font-family: var(--font-
|
|
29
|
-
line-height: 1.
|
|
30
|
-
font-synthesis: none;
|
|
31
|
-
text-rendering: optimizeLegibility;
|
|
33
|
+
font-family: var(--font-sans);
|
|
34
|
+
line-height: 1.6;
|
|
32
35
|
-webkit-font-smoothing: antialiased;
|
|
33
36
|
}
|
|
34
37
|
|
|
35
38
|
a {
|
|
36
|
-
font-weight: 500;
|
|
37
39
|
color: var(--color-primary);
|
|
38
40
|
text-decoration: none;
|
|
39
|
-
|
|
41
|
+
font-weight: 600;
|
|
42
|
+
transition: all 0.2s ease;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
a:hover {
|
|
43
|
-
|
|
46
|
+
text-decoration: underline;
|
|
44
47
|
}
|
|
45
48
|
|
|
46
49
|
button {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
font-family:
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
background: var(--color-primary);
|
|
51
|
+
color: #0d1117;
|
|
52
|
+
border: 1px solid var(--color-primary);
|
|
53
|
+
padding: 0.6rem 1.5rem;
|
|
54
|
+
border-radius: 6px;
|
|
55
|
+
font-family: var(--font-sans);
|
|
56
|
+
font-weight: 700;
|
|
57
|
+
font-size: 0.85rem;
|
|
55
58
|
cursor: pointer;
|
|
56
|
-
transition: all 0.
|
|
59
|
+
transition: all 0.2s ease;
|
|
57
60
|
}
|
|
58
61
|
|
|
59
62
|
button:hover {
|
|
60
|
-
|
|
61
|
-
|
|
63
|
+
filter: brightness(1.1);
|
|
64
|
+
box-shadow: 0 4px 12px var(--color-primary-dim);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
button.secondary {
|
|
68
|
+
background: var(--color-surface);
|
|
69
|
+
color: var(--color-text-primary);
|
|
70
|
+
border: 1px solid var(--color-border);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
button.secondary:hover {
|
|
74
|
+
background: var(--color-surface-hover);
|
|
75
|
+
border-color: var(--color-text-secondary);
|
|
62
76
|
}
|
|
63
77
|
|
|
64
78
|
.layout {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
79
|
+
max-width: 1000px;
|
|
80
|
+
margin: 0 auto;
|
|
81
|
+
padding: 6rem 2rem;
|
|
68
82
|
}
|
|
69
83
|
|
|
70
84
|
.grid {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
85
|
+
display: grid;
|
|
86
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
87
|
+
gap: 1rem;
|
|
88
|
+
margin-top: 4rem;
|
|
75
89
|
}
|
|
90
|
+
|
|
91
|
+
code {
|
|
92
|
+
font-family: var(--font-mono);
|
|
93
|
+
font-size: 0.85em;
|
|
94
|
+
background: var(--color-surface-hover);
|
|
95
|
+
padding: 0.2rem 0.4rem;
|
|
96
|
+
border-radius: 4px;
|
|
97
|
+
color: var(--color-primary);
|
|
98
|
+
border: 1px solid var(--color-border);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Custom Scrollbar */
|
|
102
|
+
::-webkit-scrollbar {
|
|
103
|
+
width: 6px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
::-webkit-scrollbar-track {
|
|
107
|
+
background: var(--color-bg);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
::-webkit-scrollbar-thumb {
|
|
111
|
+
background: var(--color-border-bright);
|
|
112
|
+
border-radius: 10px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
::-webkit-scrollbar-thumb:hover {
|
|
116
|
+
background: var(--color-text-dim);
|
|
117
|
+
}
|
|
@@ -9,61 +9,87 @@ function Dashboard() {
|
|
|
9
9
|
|
|
10
10
|
createEffect(() => {
|
|
11
11
|
const c = count();
|
|
12
|
-
|
|
12
|
+
const timestamp = new Date().toLocaleTimeString('en-GB');
|
|
13
|
+
setLogs(prev => [`[${timestamp}] Updated state to ${c}`, ...prev].slice(0, 6));
|
|
13
14
|
});
|
|
14
15
|
|
|
15
16
|
return (
|
|
16
17
|
<div className="layout">
|
|
17
18
|
<Header />
|
|
18
19
|
|
|
19
|
-
<section>
|
|
20
|
-
<h1 style={{
|
|
21
|
-
|
|
20
|
+
<section style={{ marginBottom: '5rem' }}>
|
|
21
|
+
<h1 style={{
|
|
22
|
+
fontSize: '4.5rem',
|
|
23
|
+
fontWeight: 900,
|
|
24
|
+
marginBottom: '1rem',
|
|
25
|
+
letterSpacing: '-0.05em',
|
|
26
|
+
lineHeight: 1,
|
|
27
|
+
color: 'white'
|
|
28
|
+
}}>
|
|
29
|
+
Professional <br />
|
|
30
|
+
<span style={{ color: 'var(--color-primary)' }}>Reactive Engineering.</span>
|
|
22
31
|
</h1>
|
|
23
|
-
<p style={{
|
|
24
|
-
|
|
25
|
-
|
|
32
|
+
<p style={{
|
|
33
|
+
color: 'var(--color-text-secondary)',
|
|
34
|
+
fontSize: '1.2rem',
|
|
35
|
+
maxWidth: '600px',
|
|
36
|
+
fontWeight: 500
|
|
37
|
+
}}>
|
|
38
|
+
High-performance interfaces powered by atomic reactivity.
|
|
39
|
+
Zero virtual DOM. Zero abstraction overhead. Pure excellence.
|
|
26
40
|
</p>
|
|
27
41
|
</section>
|
|
28
42
|
|
|
29
43
|
<div className="grid">
|
|
30
|
-
<Card title="
|
|
44
|
+
<Card title="Reactive Engine">
|
|
31
45
|
<div style={{
|
|
32
|
-
fontSize: '
|
|
33
|
-
fontWeight:
|
|
34
|
-
color: '
|
|
35
|
-
|
|
46
|
+
fontSize: '6rem',
|
|
47
|
+
fontWeight: 900,
|
|
48
|
+
color: 'white',
|
|
49
|
+
marginBottom: '1.5rem',
|
|
50
|
+
fontVariantNumeric: 'tabular-nums',
|
|
51
|
+
letterSpacing: '-0.06em'
|
|
36
52
|
}}>
|
|
37
53
|
{count}
|
|
38
54
|
</div>
|
|
39
|
-
<div style={{ display: 'flex', gap: '0.
|
|
55
|
+
<div style={{ display: 'flex', gap: '0.75rem' }}>
|
|
40
56
|
<button onClick={() => setCount(c => c + 1)}>Increment</button>
|
|
41
|
-
<button onClick={() => setCount(c => c - 1)}>Decrement</button>
|
|
57
|
+
<button className="secondary" onClick={() => setCount(c => c - 1)}>Decrement</button>
|
|
42
58
|
</div>
|
|
43
59
|
</Card>
|
|
44
60
|
|
|
45
|
-
<Card title="
|
|
61
|
+
<Card title="Kernel Feed">
|
|
46
62
|
<div style={{
|
|
47
|
-
background: '#
|
|
48
|
-
padding: '
|
|
49
|
-
borderRadius: '
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
63
|
+
background: '#010409',
|
|
64
|
+
padding: '1.25rem',
|
|
65
|
+
borderRadius: '6px',
|
|
66
|
+
fontSize: '0.8rem',
|
|
67
|
+
height: '180px',
|
|
68
|
+
overflow: 'hidden',
|
|
69
|
+
fontFamily: 'var(--font-mono)',
|
|
70
|
+
border: '1px solid var(--color-border)',
|
|
71
|
+
color: 'var(--color-text-secondary)'
|
|
54
72
|
}}>
|
|
55
73
|
<For each={logs}>
|
|
56
|
-
{(log) => <div style={{
|
|
74
|
+
{(log) => <div style={{ marginBottom: '0.4rem' }}> <span style={{ color: 'var(--color-primary)' }}>λ</span> {log}</div>}
|
|
57
75
|
</For>
|
|
58
76
|
</div>
|
|
59
77
|
</Card>
|
|
60
78
|
|
|
61
|
-
<Card title="
|
|
62
|
-
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.
|
|
63
|
-
<div
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
79
|
+
<Card title="Quick Stats">
|
|
80
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem', fontSize: '0.9rem', fontWeight: 600 }}>
|
|
81
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.6rem' }}>
|
|
82
|
+
<span style={{ color: 'var(--color-text-secondary)' }}>PACKAGE_SIZE</span>
|
|
83
|
+
<span style={{ color: 'var(--color-primary)' }}>< 3KB</span>
|
|
84
|
+
</div>
|
|
85
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.6rem' }}>
|
|
86
|
+
<span style={{ color: 'var(--color-text-secondary)' }}>UPDATE_SPEED</span>
|
|
87
|
+
<span>O(1)</span>
|
|
88
|
+
</div>
|
|
89
|
+
<div style={{ display: 'flex', justifyContent: 'space-between', borderBottom: '1px solid var(--color-border)', paddingBottom: '0.6rem' }}>
|
|
90
|
+
<span style={{ color: 'var(--color-text-secondary)' }}>VIRTUAL_DOM</span>
|
|
91
|
+
<span style={{ color: '#ff7b72' }}>ZERO</span>
|
|
92
|
+
</div>
|
|
67
93
|
</div>
|
|
68
94
|
</Card>
|
|
69
95
|
</div>
|
|
@@ -73,21 +99,20 @@ function Dashboard() {
|
|
|
73
99
|
|
|
74
100
|
function Features() {
|
|
75
101
|
const features = [
|
|
76
|
-
{ name: "
|
|
77
|
-
{ name: "Fine-Grained Reactivity", desc: "Only
|
|
78
|
-
{ name: "
|
|
79
|
-
{ name: "TypeScript First", desc: "Written in TS for TS developers." }
|
|
102
|
+
{ name: "Direct Compilation", desc: "Velox templates compile directly to surgical DOM operations, skipping all intermediate diffing layers." },
|
|
103
|
+
{ name: "Fine-Grained Reactivity", desc: "Built with atomic signals. Only the exact parts of the UI that depend on data are updated." },
|
|
104
|
+
{ name: "Production Ready", desc: "Includes everything needed for scale: routing, state, and SSR support as standard." }
|
|
80
105
|
];
|
|
81
106
|
|
|
82
107
|
return (
|
|
83
108
|
<div className="layout">
|
|
84
109
|
<Header />
|
|
85
|
-
<h2 style={{ fontSize: '2rem', marginBottom: '
|
|
110
|
+
<h2 style={{ fontSize: '2rem', fontWeight: 800, marginBottom: '4rem', letterSpacing: '-0.04em' }}>Engineering Manifesto</h2>
|
|
86
111
|
<div className="grid">
|
|
87
112
|
<For each={() => features}>
|
|
88
113
|
{(item) => (
|
|
89
114
|
<Card title={item.name}>
|
|
90
|
-
<p
|
|
115
|
+
<p>{item.desc}</p>
|
|
91
116
|
</Card>
|
|
92
117
|
)}
|
|
93
118
|
</For>
|
|
@@ -5,14 +5,32 @@ export const Card: Component = (props) => {
|
|
|
5
5
|
<div style={{
|
|
6
6
|
background: 'var(--color-surface)',
|
|
7
7
|
border: '1px solid var(--color-border)',
|
|
8
|
-
borderRadius: '
|
|
9
|
-
padding: '
|
|
8
|
+
borderRadius: '6px',
|
|
9
|
+
padding: '2rem',
|
|
10
10
|
display: 'flex',
|
|
11
11
|
flexDirection: 'column',
|
|
12
12
|
gap: '1rem',
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
height: '100%',
|
|
14
|
+
transition: 'border-color 0.15s ease'
|
|
15
|
+
}}
|
|
16
|
+
onMouseEnter={(e: any) => e.currentTarget.style.borderColor = 'var(--color-border-bright)'}
|
|
17
|
+
onMouseLeave={(e: any) => e.currentTarget.style.borderColor = 'var(--color-border)'}
|
|
18
|
+
>
|
|
19
|
+
{props.title && (
|
|
20
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
|
|
21
|
+
<div style={{ width: '4px', height: '16px', background: 'var(--color-primary)' }} />
|
|
22
|
+
<h3 style={{
|
|
23
|
+
fontSize: '1rem',
|
|
24
|
+
fontWeight: 800,
|
|
25
|
+
color: 'white',
|
|
26
|
+
}}>
|
|
27
|
+
{props.title}
|
|
28
|
+
</h3>
|
|
29
|
+
</div>
|
|
30
|
+
)}
|
|
31
|
+
<div style={{ color: 'var(--color-text-secondary)', fontSize: '0.9rem', lineHeight: 1.6 }}>
|
|
32
|
+
{props.children}
|
|
33
|
+
</div>
|
|
16
34
|
</div>
|
|
17
35
|
);
|
|
18
36
|
};
|
|
@@ -1,27 +1,47 @@
|
|
|
1
|
-
import { Link } from '@remyyy/velox';
|
|
1
|
+
import { Link, useLocation } from '@remyyy/velox';
|
|
2
2
|
|
|
3
3
|
export function Header() {
|
|
4
|
+
const location = useLocation();
|
|
5
|
+
|
|
6
|
+
const isActive = (path: string) => location.pathname === path;
|
|
7
|
+
|
|
4
8
|
return (
|
|
5
9
|
<header style={{
|
|
6
10
|
display: 'flex',
|
|
7
11
|
alignItems: 'center',
|
|
8
12
|
justifyContent: 'space-between',
|
|
9
|
-
marginBottom: '
|
|
10
|
-
|
|
11
|
-
|
|
13
|
+
marginBottom: '6rem',
|
|
14
|
+
paddingBottom: '2.5rem',
|
|
15
|
+
borderBottom: '2px solid var(--color-primary)',
|
|
12
16
|
}}>
|
|
13
|
-
<div style={{ display: 'flex', alignItems: 'center', gap: '
|
|
17
|
+
<div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
|
|
14
18
|
<div style={{
|
|
15
19
|
width: '32px', height: '32px',
|
|
16
|
-
|
|
17
|
-
borderRadius: '6px'
|
|
18
|
-
|
|
19
|
-
|
|
20
|
+
backgroundColor: 'var(--color-primary)',
|
|
21
|
+
borderRadius: '6px',
|
|
22
|
+
display: 'flex',
|
|
23
|
+
alignItems: 'center',
|
|
24
|
+
justifyContent: 'center',
|
|
25
|
+
fontWeight: 900,
|
|
26
|
+
color: 'var(--color-bg)',
|
|
27
|
+
fontSize: '1.2rem'
|
|
28
|
+
}}>V</div>
|
|
29
|
+
<span style={{ fontSize: '1.25rem', fontWeight: 800, letterSpacing: '-0.04em' }}>
|
|
30
|
+
VELOX<span style={{ color: 'var(--color-primary)' }}>_</span>CORE
|
|
31
|
+
</span>
|
|
20
32
|
</div>
|
|
21
33
|
|
|
22
|
-
<nav style={{ display: 'flex', gap: '
|
|
23
|
-
<Link to="/"
|
|
24
|
-
|
|
34
|
+
<nav style={{ display: 'flex', gap: '3rem' }}>
|
|
35
|
+
<Link to="/" style={{
|
|
36
|
+
color: isActive('/') ? 'var(--color-primary)' : 'var(--color-text-primary)',
|
|
37
|
+
fontWeight: isActive('/') ? '700' : '600',
|
|
38
|
+
transition: 'all 0.2s ease'
|
|
39
|
+
}}>Terminal</Link>
|
|
40
|
+
<Link to="/features" style={{
|
|
41
|
+
color: isActive('/features') ? 'var(--color-primary)' : 'var(--color-text-secondary)',
|
|
42
|
+
fontWeight: isActive('/features') ? '700' : '600',
|
|
43
|
+
transition: 'all 0.2s ease'
|
|
44
|
+
}}>Library</Link>
|
|
25
45
|
</nav>
|
|
26
46
|
</header>
|
|
27
47
|
);
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
:root {
|
|
2
|
-
--font-
|
|
2
|
+
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
|
|
3
|
+
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
--color-
|
|
6
|
-
|
|
7
|
-
--color-
|
|
5
|
+
/* Midnight Slate (Professional, Dark, Colorful) */
|
|
6
|
+
--color-bg: #02040a;
|
|
7
|
+
/* Absolute Black-Ink */
|
|
8
|
+
--color-surface: #0d1117;
|
|
9
|
+
/* Dark Slate */
|
|
10
|
+
--color-surface-hover: #161b22;
|
|
11
|
+
--color-border: #21262d;
|
|
12
|
+
--color-border-bright: #30363d;
|
|
8
13
|
|
|
9
|
-
--color-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
--color-primary: #
|
|
13
|
-
--color-
|
|
14
|
+
--color-primary: #58a6ff;
|
|
15
|
+
/* Sophisticated Blue */
|
|
16
|
+
--color-primary-dim: rgba(88, 166, 255, 0.1);
|
|
17
|
+
--color-text-primary: #f0f6fc;
|
|
18
|
+
--color-text-secondary: #8b949e;
|
|
19
|
+
--color-text-dim: #484f58;
|
|
14
20
|
}
|
|
15
21
|
|
|
16
22
|
* {
|
|
@@ -21,55 +27,91 @@
|
|
|
21
27
|
|
|
22
28
|
body {
|
|
23
29
|
margin: 0;
|
|
24
|
-
min-width: 320px;
|
|
25
30
|
min-height: 100vh;
|
|
26
31
|
background-color: var(--color-bg);
|
|
27
32
|
color: var(--color-text-primary);
|
|
28
|
-
font-family: var(--font-
|
|
29
|
-
line-height: 1.
|
|
30
|
-
font-synthesis: none;
|
|
31
|
-
text-rendering: optimizeLegibility;
|
|
33
|
+
font-family: var(--font-sans);
|
|
34
|
+
line-height: 1.6;
|
|
32
35
|
-webkit-font-smoothing: antialiased;
|
|
33
36
|
}
|
|
34
37
|
|
|
35
38
|
a {
|
|
36
|
-
font-weight: 500;
|
|
37
39
|
color: var(--color-primary);
|
|
38
40
|
text-decoration: none;
|
|
39
|
-
|
|
41
|
+
font-weight: 600;
|
|
42
|
+
transition: all 0.2s ease;
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
a:hover {
|
|
43
|
-
|
|
46
|
+
text-decoration: underline;
|
|
44
47
|
}
|
|
45
48
|
|
|
46
49
|
button {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
font-family:
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
background: var(--color-primary);
|
|
51
|
+
color: #0d1117;
|
|
52
|
+
border: 1px solid var(--color-primary);
|
|
53
|
+
padding: 0.6rem 1.5rem;
|
|
54
|
+
border-radius: 6px;
|
|
55
|
+
font-family: var(--font-sans);
|
|
56
|
+
font-weight: 700;
|
|
57
|
+
font-size: 0.85rem;
|
|
55
58
|
cursor: pointer;
|
|
56
|
-
transition: all 0.
|
|
59
|
+
transition: all 0.2s ease;
|
|
57
60
|
}
|
|
58
61
|
|
|
59
62
|
button:hover {
|
|
60
|
-
|
|
61
|
-
|
|
63
|
+
filter: brightness(1.1);
|
|
64
|
+
box-shadow: 0 4px 12px var(--color-primary-dim);
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
button.secondary {
|
|
68
|
+
background: var(--color-surface);
|
|
69
|
+
color: var(--color-text-primary);
|
|
70
|
+
border: 1px solid var(--color-border);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
button.secondary:hover {
|
|
74
|
+
background: var(--color-surface-hover);
|
|
75
|
+
border-color: var(--color-text-secondary);
|
|
62
76
|
}
|
|
63
77
|
|
|
64
78
|
.layout {
|
|
65
|
-
max-width:
|
|
79
|
+
max-width: 1000px;
|
|
66
80
|
margin: 0 auto;
|
|
67
|
-
padding: 2rem;
|
|
81
|
+
padding: 6rem 2rem;
|
|
68
82
|
}
|
|
69
83
|
|
|
70
84
|
.grid {
|
|
71
85
|
display: grid;
|
|
72
86
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
73
|
-
gap:
|
|
74
|
-
margin-top:
|
|
87
|
+
gap: 1rem;
|
|
88
|
+
margin-top: 4rem;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
code {
|
|
92
|
+
font-family: var(--font-mono);
|
|
93
|
+
font-size: 0.85em;
|
|
94
|
+
background: var(--color-surface-hover);
|
|
95
|
+
padding: 0.2rem 0.4rem;
|
|
96
|
+
border-radius: 4px;
|
|
97
|
+
color: var(--color-primary);
|
|
98
|
+
border: 1px solid var(--color-border);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
/* Custom Scrollbar */
|
|
102
|
+
::-webkit-scrollbar {
|
|
103
|
+
width: 6px;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
::-webkit-scrollbar-track {
|
|
107
|
+
background: var(--color-bg);
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
::-webkit-scrollbar-thumb {
|
|
111
|
+
background: var(--color-border-bright);
|
|
112
|
+
border-radius: 10px;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
::-webkit-scrollbar-thumb:hover {
|
|
116
|
+
background: var(--color-text-dim);
|
|
75
117
|
}
|