Skip to content

Commit 663cfa7

Browse files
dawsontothdawsontoth
committed
feat: Guide to Fabric
https://harperdb.atlassian.net/browse/STUDIO-456
1 parent 1405776 commit 663cfa7

File tree

14 files changed

+431
-125
lines changed

14 files changed

+431
-125
lines changed

‎public/running.css‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
}
5+
6+
#app-bg-color,
7+
#app-bg-grid {
8+
bottom: 0;
9+
left: 0;
10+
position: fixed;
11+
right: 0;
12+
top: 0;
13+
z-index: -2;
14+
}
15+
16+
#app-bg-color {
17+
background: linear-gradient(45deg, #312556, #403b8a, #7a3a87);
18+
}
19+
20+
#app-bg-grid {
21+
inset: 0;
22+
height: 100%;
23+
width: 100%;
24+
opacity: 0.05;
25+
}
26+
27+
.orb-container {
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
min-height: 100vh; /* Centers the orb vertically */
32+
}
33+
34+
.orb {
35+
background-color: hsl(151.07, 49.12%, 55.29%);
36+
border-radius: 50%;
37+
animation: pulse 15s ease-in-out forwards;
38+
opacity: 0.01;
39+
}
40+
41+
@keyframes pulse {
42+
0% {
43+
opacity: 0.01;
44+
transform: scale(1);
45+
box-shadow: 0 0 0 hsla(151.07, 49.12%, 55.29%, 0);
46+
}
47+
50% {
48+
opacity: 0.1;
49+
transform: scale(1.2);
50+
box-shadow: 0 0 30px hsla(151.07, 49.12%, 55.29%, 0.9);
51+
}
52+
100% {
53+
opacity: 0;
54+
transform: scale(1);
55+
box-shadow: 0 0 0 hsla(151.07, 49.12%, 55.29%, 0);
56+
}
57+
}
58+
59+
#content {
60+
display: flex;
61+
flex-direction: column;
62+
justify-content: center;
63+
align-items: center;
64+
font-family: helvetica, sans-serif;
65+
color: #efefef;
66+
line-height: 1.5;
67+
max-width: 800px;
68+
margin: 0 auto;
69+
padding: 5em;
70+
}
71+
72+
a {
73+
color: hsl(0, 0%, 80%);
74+
75+
&:hover {
76+
color: hsl(0, 0%, 95%);
77+
}
78+
}
79+
80+
h1 {
81+
margin-bottom: 0.5em;
82+
}
83+
84+
.card {
85+
background: hsl(0, 0%, 95%);
86+
border-radius: 6px;
87+
color: black;
88+
box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
89+
margin: 1em 0;
90+
91+
padding: 1em 2em 1em 1em;
92+
93+
svg {
94+
width: 4em;
95+
height: 2em;
96+
margin-top: 0.25em;
97+
}
98+
99+
p {
100+
margin: 1em 0 0.5em;
101+
}
102+
103+
a {
104+
display: inline-block;
105+
color: white;
106+
background-color: black;
107+
border-radius: 1em;
108+
padding: 0.5em 2em;
109+
margin: 0.5em 0;
110+
text-decoration: none;
111+
box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.2);
112+
transition: all 0.3s ease-in-out;
113+
114+
&:hover {
115+
background-color: hsla(0, 0%, 0%, 0.8);
116+
box-shadow: 0 4px 8px hsla(0, 0%, 0%, 0.4);
117+
}
118+
}
119+
}
120+
121+
.badge {
122+
color: hsl(232.92, 80.9%, 60.98%);
123+
background: hsl(240, 100%, 88.43%);
124+
border: 1px solid hsl(241.05, 100%, 77.65%);
125+
border-radius: 0.5em;
126+
align-self: center;
127+
font-size: 0.75em;
128+
padding: 0.25em 0.5em;
129+
}
130+
131+
.flex-row {
132+
display: flex;
133+
flex-direction: row;
134+
gap: 1em;
135+
align-items: flex-start;
136+
}
137+
138+
.code-snippet {
139+
background-color: black;
140+
border-radius: 0.5em;
141+
padding: 0.5em 2em;
142+
color: white;
143+
144+
code {
145+
font-family: Consolas, Courier New, serif;
146+
white-space: pre-wrap;
147+
}
148+
}

‎public/running.html‎

Lines changed: 84 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -5,86 +5,98 @@
55
<link rel="icon" type="image/svg+xml" href="/HDBDogOnly.svg" />
66
<link rel="icon" type="dynamic-favicon" href="/favicon_purple.png" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<style>
9-
* {
10-
padding: 0;
11-
margin: 0;
12-
}
8+
<link rel="stylesheet" href="./running.css" type="text/css" />
9+
</head>
1310

14-
#app-bg-color,
15-
#app-bg-dots {
16-
bottom: 0;
17-
height: 100vh;
18-
left: 0;
19-
position: fixed;
20-
right: 0;
21-
top: 0;
22-
width: 100vw;
23-
}
11+
<body>
2412

25-
#app-bg-color {
26-
background: linear-gradient(45deg, #312556, #403b8a, #7a3a87) !important;
27-
z-index: -2;
28-
}
13+
<div id="content">
2914

30-
#app-bg-dots {
31-
background: radial-gradient(#403b8a 1px, transparent 0);
32-
background-size: 3px 3px;
33-
z-index: -1;
34-
}
15+
<img src="/HDBDogOnly.svg" width="100px" height="100px" alt="Harper Logo" />
3516

36-
#content {
37-
display: flex;
38-
flex-direction: column;
39-
justify-content: center;
40-
align-items: center;
41-
width: 100vw;
42-
height: 100vh;
43-
font-family: helvetica, sans-serif;
44-
color: #efefef;
45-
font-size: 12px;
46-
line-height: 1.5;
47-
}
17+
<h1>Server is Running!</h1>
18+
<p>
19+
Your Harper server is up and running. Choose how you'd like to get started:
20+
</p>
4821

49-
ul {
50-
margin: 0;
51-
padding-inline-start: 10px;
52-
}
22+
<div class="card flex-row">
23+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="hsl(232.92, 80.9%, 60.98%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sparkles w-6 h-6 text-blue-600 flex-shrink-0 mt-1" aria-hidden="true">
24+
<path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"></path>
25+
<path d="M20 3v4"></path>
26+
<path d="M22 5h-4"></path>
27+
<path d="M4 17v2"></path>
28+
<path d="M5 18H3"></path>
29+
</svg>
5330

54-
a {
55-
color: #efefef;
56-
}
31+
<div>
32+
<div class="flex-row">
33+
<h2>Connect to Harper Fabric</h2>
34+
<span class="badge">
35+
Most Popular
36+
</span>
37+
</div>
38+
<p>
39+
Connect your server to Harper Fabric for cloud management, monitoring, and seamless collaboration.
40+
Access your instance from anywhere with full observability.
41+
</p>
42+
<a id="connectToHarperFabricAnchor" href="https://fabric.harper.fast/" target="_blank">
43+
Connect to Harper Fabric
44+
</a>
45+
</div>
46+
</div>
5747

58-
hr {
59-
width: 153px;
60-
background-color: #efefef;
61-
/* Modern Browsers */
62-
border: 0 none;
63-
color: #efefef;
64-
height: 1px !important;
65-
overflow: hidden;
66-
margin: 10px 0;
67-
}
68-
</style>
69-
</head>
48+
<div class="card flex-row">
49+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-terminal w-6 h-6 text-slate-600 flex-shrink-0 mt-1" aria-hidden="true">
50+
<path d="M12 19h8"></path>
51+
<path d="m4 17 6-6-6-6"></path>
52+
</svg>
7053

71-
<body>
72-
<div id="content">
73-
<img src="/HDBDogOnly.svg" width="100px" height="100px" alt="Harper Logo" />
74-
<hr />
75-
Harper is running!
76-
<hr />
77-
Ready to learn more?
78-
<ul>
79-
<li><a href="https://studio.harperdb.io" target="_blank" rel="noopener noreferrer">
80-
Harper Studio</a></li>
81-
<li><a href="https://docs.harperdb.io" target="_blank" rel="noopener noreferrer">
82-
Harper Documentation</a></li>
83-
<li><a href="https://api.harperdb.io/" target="_blank" rel="noopener noreferrer">
84-
Harper API Examples</a></li>
85-
</ul>
54+
<div>
55+
<h2>Manage Harper Offline</h2>
56+
<p>
57+
Prefer to work locally? Enable Harper Studio to configure and manage your instance
58+
directly from your development environment.
59+
</p>
60+
<p>
61+
Turn on localStudio in your harperdb-config.yaml:
62+
</p>
63+
<div class="code-snippet">
64+
<code content="yaml">localStudio:
65+
enabled: true</code>
66+
</div>
67+
<p>
68+
Then refresh this page!
69+
</p>
70+
</div>
71+
</div>
72+
73+
<!-- {/* Footer */}-->
74+
<div class="text-center text-slate-500">
75+
<p>
76+
Need help?
77+
<a href="https://docs.harperdb.io/docs" target="_blank" rel="noopener noreferrer">
78+
Check out our docs.
79+
</a>
80+
</p>
81+
</div>
82+
83+
</div>
84+
85+
<div id="app-bg-color">
86+
<div class="orb-container">
87+
<div class="orb"></div>
88+
</div>
8689
</div>
87-
<div id="app-bg-color"></div>
88-
<div id="app-bg-dots"></div>
90+
<svg id="app-bg-grid" xmlns="http://www.w3.org/2000/svg">
91+
<defs>
92+
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
93+
<animateTransform attributeType="xml" attributeName="patternTransform" type="translate" from="0 0" to="-40 -40"
94+
begin="0" dur="5s" repeatCount="indefinite"></animateTransform>
95+
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" />
96+
</pattern>
97+
</defs>
98+
<rect width="100%" height="100%" fill="url(#grid)" />
99+
</svg>
100+
<script src="./running.js" async></script>
89101
</body>
90102
</html>

0 commit comments

Comments
 (0)