Skip to content

Commit e17a619

Browse files
alexellisalexellis
committed
Colour and links updates as per feedback
Thanks @welteki Signed-off-by: Alex Ellis (OpenFaaS Ltd) <alexellis2@gmail.com>
1 parent a247d98 commit e17a619

2 files changed

Lines changed: 49 additions & 46 deletions

File tree

‎_includes/cli.html‎

Lines changed: 44 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,28 @@ <h3 class="text-center text-3xl leading-8 font-extrabold tracking-tight text-gra
99
</p>
1010
</div>
1111

12-
<div class="mt-8 rounded-3xl border border-gray-800 bg-gray-900 shadow-2xl p-3 sm:p-4">
12+
<div class="mt-8 rounded-3xl border border-gray-200 bg-white shadow-xl p-3 sm:p-4">
1313
<div class="flex flex-wrap justify-center gap-3" data-cli-tabs>
14-
<button type="button" class="cli-tab-button px-4 py-2 rounded-full border border-indigo-500 bg-indigo-500 text-white text-sm font-medium" data-cli-tab="uplink">Uplink</button>
15-
<button type="button" class="cli-tab-button px-4 py-2 rounded-full border border-gray-700 bg-gray-800 text-gray-300 text-sm font-medium hover:text-white" data-cli-tab="https">HTTPS</button>
16-
<button type="button" class="cli-tab-button px-4 py-2 rounded-full border border-gray-700 bg-gray-800 text-gray-300 text-sm font-medium hover:text-white" data-cli-tab="tcp">TCP</button>
17-
<button type="button" class="cli-tab-button px-4 py-2 rounded-full border border-gray-700 bg-gray-800 text-gray-300 text-sm font-medium hover:text-white" data-cli-tab="kubernetes">Kubernetes</button>
14+
<button type="button" class="cli-tab-button px-4 py-2 rounded-full border border-gray-900 bg-gray-900 text-white text-sm font-medium" data-cli-tab="uplink">Uplink</button>
15+
<button type="button" class="cli-tab-button px-4 py-2 rounded-full border border-gray-300 bg-white text-gray-700 text-sm font-medium hover:border-gray-400 hover:text-gray-900" data-cli-tab="https">HTTPS</button>
16+
<button type="button" class="cli-tab-button px-4 py-2 rounded-full border border-gray-300 bg-white text-gray-700 text-sm font-medium hover:border-gray-400 hover:text-gray-900" data-cli-tab="tcp">TCP</button>
17+
<button type="button" class="cli-tab-button px-4 py-2 rounded-full border border-gray-300 bg-white text-gray-700 text-sm font-medium hover:border-gray-400 hover:text-gray-900" data-cli-tab="kubernetes">Kubernetes</button>
1818
</div>
1919

2020
<div class="mt-4">
21-
<section class="cli-panel rounded-2xl shadow-2xl overflow-hidden border border-gray-800 bg-gray-950" data-cli-panel="uplink">
22-
<div class="px-5 py-3 border-b border-gray-800 bg-gray-900 flex items-center justify-between">
21+
<section class="cli-panel rounded-2xl shadow-2xl overflow-hidden border border-gray-800 bg-gray-900" data-cli-panel="uplink">
22+
<div class="px-5 py-3 border-b border-gray-700 bg-gray-800 flex items-center justify-between">
2323
<div class="flex items-center gap-2">
2424
<span class="h-3 w-3 rounded-full bg-red-400"></span>
2525
<span class="h-3 w-3 rounded-full bg-yellow-400"></span>
2626
<span class="h-3 w-3 rounded-full bg-green-400"></span>
2727
</div>
2828
<div class="text-xs font-mono text-gray-400">uplink.example.com</div>
2929
</div>
30-
<div class="px-6 py-5 border-b border-gray-800">
31-
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
32-
<div>
33-
<h4 class="text-2xl font-extrabold text-white">Connect a customer environment to your SaaS</h4>
34-
<p class="mt-2 text-base leading-7 text-gray-300">Create a tenant-scoped tunnel, hand the customer a command, then consume the service privately from inside your cluster.</p>
35-
</div>
36-
<a href="https://docs.inlets.dev/uplink/become-a-provider/" class="text-sm font-medium text-indigo-300 hover:text-white">Read the Uplink docs →</a>
30+
<div class="px-6 py-5 border-b border-gray-700 bg-gray-900">
31+
<div>
32+
<h4 class="text-2xl font-extrabold text-white">Connect a customer environment to your SaaS</h4>
33+
<p class="mt-2 text-base leading-7 text-gray-300">Create a tenant-scoped tunnel, hand the customer a command, then consume the service privately from inside your cluster.</p>
3734
</div>
3835
</div>
3936
<pre class="px-6 py-6 overflow-x-auto font-mono text-[13px] leading-7 text-gray-100 whitespace-pre-wrap"><code># tunnel resource
@@ -53,25 +50,28 @@ <h4 class="text-2xl font-extrabold text-white">Connect a customer environment to
5350
--token-file ./token.txt
5451

5552
# private access from inside the cluster
53+
kubectl run -t -i curl --rm \
54+
--image ghcr.io/openfaas/curl:latest /bin/sh
55+
5656
curl -i http://acmeco.tunnels:8000</code></pre>
57+
<div class="px-6 py-4 border-t border-gray-700 bg-gray-800">
58+
<a href="https://docs.inlets.dev/uplink/become-a-provider/" class="text-sm font-medium text-indigo-300 hover:text-white">Read the Uplink docs →</a>
59+
</div>
5760
</section>
5861

59-
<section class="cli-panel hidden rounded-2xl shadow-2xl overflow-hidden border border-gray-800 bg-gray-950" data-cli-panel="https">
60-
<div class="px-5 py-3 border-b border-gray-800 bg-gray-900 flex items-center justify-between">
62+
<section class="cli-panel hidden rounded-2xl shadow-2xl overflow-hidden border border-gray-800 bg-gray-900" data-cli-panel="https">
63+
<div class="px-5 py-3 border-b border-gray-700 bg-gray-800 flex items-center justify-between">
6164
<div class="flex items-center gap-2">
6265
<span class="h-3 w-3 rounded-full bg-red-400"></span>
6366
<span class="h-3 w-3 rounded-full bg-yellow-400"></span>
6467
<span class="h-3 w-3 rounded-full bg-green-400"></span>
6568
</div>
6669
<div class="text-xs font-mono text-gray-400">api.example.com</div>
6770
</div>
68-
<div class="px-6 py-5 border-b border-gray-800">
69-
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
70-
<div>
71-
<h4 class="text-2xl font-extrabold text-white">Self-host HTTPS for a local app</h4>
72-
<p class="mt-2 text-base leading-7 text-gray-300">Provision a public tunnel server with inletsctl, then connect your local HTTP service using your own domain.</p>
73-
</div>
74-
<a href="https://docs.inlets.dev/tutorial/automated-http-server/" class="text-sm font-medium text-indigo-300 hover:text-white">HTTP tunnel guide →</a>
71+
<div class="px-6 py-5 border-b border-gray-700 bg-gray-900">
72+
<div>
73+
<h4 class="text-2xl font-extrabold text-white">Self-host HTTPS for a local app</h4>
74+
<p class="mt-2 text-base leading-7 text-gray-300">Provision a public tunnel server with inletsctl, then connect your local HTTP service using your own domain.</p>
7575
</div>
7676
</div>
7777
<pre class="px-6 py-6 overflow-x-auto font-mono text-[13px] leading-7 text-gray-100 whitespace-pre-wrap"><code>$ inletsctl create \
@@ -86,24 +86,24 @@ <h4 class="text-2xl font-extrabold text-white">Self-host HTTPS for a local app</
8686
--upstream "api.example.com=http://127.0.0.1:3000"
8787

8888
$ curl "https://api.example.com/v1/import"</code></pre>
89+
<div class="px-6 py-4 border-t border-gray-700 bg-gray-800">
90+
<a href="https://docs.inlets.dev/tutorial/automated-http-server/" class="text-sm font-medium text-indigo-300 hover:text-white">HTTP tunnel guide →</a>
91+
</div>
8992
</section>
9093

91-
<section class="cli-panel hidden rounded-2xl shadow-2xl overflow-hidden border border-gray-800 bg-gray-950" data-cli-panel="tcp">
92-
<div class="px-5 py-3 border-b border-gray-800 bg-gray-900 flex items-center justify-between">
94+
<section class="cli-panel hidden rounded-2xl shadow-2xl overflow-hidden border border-gray-800 bg-gray-900" data-cli-panel="tcp">
95+
<div class="px-5 py-3 border-b border-gray-700 bg-gray-800 flex items-center justify-between">
9396
<div class="flex items-center gap-2">
9497
<span class="h-3 w-3 rounded-full bg-red-400"></span>
9598
<span class="h-3 w-3 rounded-full bg-yellow-400"></span>
9699
<span class="h-3 w-3 rounded-full bg-green-400"></span>
97100
</div>
98101
<div class="text-xs font-mono text-gray-400">178.62.70.130</div>
99102
</div>
100-
<div class="px-6 py-5 border-b border-gray-800">
101-
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
102-
<div>
103-
<h4 class="text-2xl font-extrabold text-white">Expose multiple TCP ports without SaaS tunnel limits</h4>
104-
<p class="mt-2 text-base leading-7 text-gray-300">Provision a TCP tunnel VM with inletsctl, then connect local services such as webhooks or SSH over the same tunnel.</p>
105-
</div>
106-
<a href="https://inlets.dev/blog/2023/05/04/expose-local-tcp-ports.html" class="text-sm font-medium text-indigo-300 hover:text-white">TCP use-case →</a>
103+
<div class="px-6 py-5 border-b border-gray-700 bg-gray-900">
104+
<div>
105+
<h4 class="text-2xl font-extrabold text-white">Expose multiple TCP ports without SaaS tunnel limits</h4>
106+
<p class="mt-2 text-base leading-7 text-gray-300">Provision a TCP tunnel VM with inletsctl, then connect local services such as webhooks or SSH over the same tunnel.</p>
107107
</div>
108108
</div>
109109
<pre class="px-6 py-6 overflow-x-auto font-mono text-[13px] leading-7 text-gray-100 whitespace-pre-wrap"><code>$ inletsctl create \
@@ -119,24 +119,24 @@ <h4 class="text-2xl font-extrabold text-white">Expose multiple TCP ports without
119119

120120
$ curl "http://178.62.70.130:8080/function/webhook"
121121
$ ssh -p 2222 "pi@178.62.70.130"</code></pre>
122+
<div class="px-6 py-4 border-t border-gray-700 bg-gray-800">
123+
<a href="https://inlets.dev/blog/2023/05/04/expose-local-tcp-ports.html" class="text-sm font-medium text-indigo-300 hover:text-white">TCP use-case →</a>
124+
</div>
122125
</section>
123126

124-
<section class="cli-panel hidden rounded-2xl shadow-2xl overflow-hidden border border-gray-800 bg-gray-950" data-cli-panel="kubernetes">
125-
<div class="px-5 py-3 border-b border-gray-800 bg-gray-900 flex items-center justify-between">
127+
<section class="cli-panel hidden rounded-2xl shadow-2xl overflow-hidden border border-gray-800 bg-gray-900" data-cli-panel="kubernetes">
128+
<div class="px-5 py-3 border-b border-gray-700 bg-gray-800 flex items-center justify-between">
126129
<div class="flex items-center gap-2">
127130
<span class="h-3 w-3 rounded-full bg-red-400"></span>
128131
<span class="h-3 w-3 rounded-full bg-yellow-400"></span>
129132
<span class="h-3 w-3 rounded-full bg-green-400"></span>
130133
</div>
131134
<div class="text-xs font-mono text-gray-400">kubernetes / loadbalancer</div>
132135
</div>
133-
<div class="px-6 py-5 border-b border-gray-800">
134-
<div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-3">
135-
<div>
136-
<h4 class="text-2xl font-extrabold text-white">Expose a local Kubernetes service</h4>
137-
<p class="mt-2 text-base leading-7 text-gray-300">Install the inlets-operator Helm chart, then create a LoadBalancer service and wait for a public IP.</p>
138-
</div>
139-
<a href="https://github.com/inlets/inlets-operator/" class="text-sm font-medium text-indigo-300 hover:text-white">inlets-operator →</a>
136+
<div class="px-6 py-5 border-b border-gray-700 bg-gray-900">
137+
<div>
138+
<h4 class="text-2xl font-extrabold text-white">Expose a local Kubernetes service</h4>
139+
<p class="mt-2 text-base leading-7 text-gray-300">Install the inlets-operator Helm chart, then create a LoadBalancer service and wait for a public IP.</p>
140140
</div>
141141
</div>
142142
<pre class="px-6 py-6 overflow-x-auto font-mono text-[13px] leading-7 text-gray-100 whitespace-pre-wrap"><code># Install the inlets-operator Helm chart, then:
@@ -149,6 +149,9 @@ <h4 class="text-2xl font-extrabold text-white">Expose a local Kubernetes service
149149
service/nginx-1 LoadBalancer 192.168.226.216 104.248.163.242 80/TCP 78s
150150

151151
$ curl -s "http://104.248.163.242:80/"</code></pre>
152+
<div class="px-6 py-4 border-t border-gray-700 bg-gray-800">
153+
<a href="https://github.com/inlets/inlets-operator/" class="text-sm font-medium text-indigo-300 hover:text-white">inlets-operator →</a>
154+
</div>
152155
</section>
153156
</div>
154157
</div>

‎js/main.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,12 +46,12 @@ function initCliTabs() {
4646
buttons.forEach(function(button) {
4747
var isActive = button.getAttribute('data-cli-tab') === name;
4848

49-
button.classList.toggle('bg-indigo-500', isActive);
50-
button.classList.toggle('border-indigo-500', isActive);
49+
button.classList.toggle('bg-gray-900', isActive);
50+
button.classList.toggle('border-gray-900', isActive);
5151
button.classList.toggle('text-white', isActive);
52-
button.classList.toggle('bg-gray-800', !isActive);
53-
button.classList.toggle('border-gray-700', !isActive);
54-
button.classList.toggle('text-gray-300', !isActive);
52+
button.classList.toggle('bg-white', !isActive);
53+
button.classList.toggle('border-gray-300', !isActive);
54+
button.classList.toggle('text-gray-700', !isActive);
5555
});
5656

5757
panels.forEach(function(panel) {

0 commit comments

Comments
 (0)