website - some section component refactoring and adding code samples
This commit is contained in:
RJ Spiker
Jack Pearkes
parent
1f68f0a4f3
commit
c9691dfcbc
BIN
website/source/assets/images/consul-connect/distributed-locks-and-semaphores.png (Stored with Git LFS)
Normal file
BIN
website/source/assets/images/consul-connect/distributed-locks-and-semaphores.png (Stored with Git LFS)
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -7,7 +7,7 @@
|
|||
@import 'components/_hero';
|
||||
@import 'components/_logo-grid';
|
||||
@import 'components/_section';
|
||||
@import 'components/_text-image';
|
||||
@import 'components/_text-asset';
|
||||
@import 'components/_timeline';
|
||||
@import 'components/_use-cases';
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,11 @@
|
|||
background: #f7f8fa !important; //TODO - !important is to override the `#page-home section` #fff background;
|
||||
}
|
||||
|
||||
&.bg-dark {
|
||||
background: #252937 !important; //TODO - !important is to override the `#page-home section` #fff background;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.border-top {
|
||||
border-top: 1px solid #e5e6eb;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,103 @@
|
|||
.g-text-asset {
|
||||
align-content: space-between;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 (-$site-gutter-padding);
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
& > div:first-child > div {
|
||||
margin-left: auto;
|
||||
padding: 0 32px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
margin-bottom: -96px;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 $site-gutter-padding;
|
||||
width: 50%;
|
||||
|
||||
&:first-child > div {
|
||||
margin-left: 0;
|
||||
padding: 0 0 0 32px;
|
||||
max-width: 454px;
|
||||
|
||||
& a {
|
||||
color: #1563ff;
|
||||
}
|
||||
|
||||
& svg {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
&.code-sample > div {
|
||||
box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
|
||||
color: $white;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
background: #252937;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
|
||||
display: block;
|
||||
font-size: 1.6rem;
|
||||
padding: 13px 0 11px 24px;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #1e212a;
|
||||
font-size: 1.4rem;
|
||||
padding: 16px 24px 32px;
|
||||
width: 100%;
|
||||
|
||||
code {
|
||||
background: #1e212a;
|
||||
border-radius: 0;
|
||||
color: $white;
|
||||
white-space: pre;
|
||||
|
||||
&.keyword {
|
||||
color: #be5580;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.logos {
|
||||
justify-content: center;
|
||||
|
||||
& > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& img {
|
||||
margin: 29px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
& > img {
|
||||
width: 100%;
|
||||
|
||||
&.shadow {
|
||||
box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
.g-text-image {
|
||||
align-content: space-between;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 (-$site-gutter-padding);
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
& > div > div:last-child {
|
||||
margin-left: 0;
|
||||
padding: 0 0 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
&.large {
|
||||
margin-bottom: -96px;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
|
||||
&.shadow {
|
||||
box-shadow: 0 40px 48px -20px rgba(63, 68, 85, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
& > div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 0 $site-gutter-padding;
|
||||
width: 50%;
|
||||
|
||||
& > div:last-child {
|
||||
margin-left: auto;
|
||||
padding: 0 32px 0 0;
|
||||
max-width: 454px;
|
||||
|
||||
& a {
|
||||
color: #1563ff;
|
||||
}
|
||||
|
||||
& svg {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -46,10 +46,7 @@ description: |-
|
|||
<div class='intro'>
|
||||
<h2>Features</h2>
|
||||
</div>
|
||||
<div class='g-text-image reverse'>
|
||||
<div>
|
||||
<img class="shadow" src='/assets/images/consul-connect/code-sample-2.png' alt='Automation through Codification'>
|
||||
</div>
|
||||
<div class='g-text-asset large'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Key/Value Store</h3>
|
||||
|
|
@ -59,16 +56,16 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/health-checks.png' alt='Service Registry'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/code-sample-2.png' alt='Workflows, not Technologies'>
|
||||
</div>
|
||||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Transaction Support</h3>
|
||||
|
|
@ -78,16 +75,30 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='code-sample'>
|
||||
<div>
|
||||
<span>Code Sample</span>
|
||||
<div class="code">
|
||||
<code>$ curl \
|
||||
--request POST \
|
||||
--data \
|
||||
'{
|
||||
"Name": "api",
|
||||
"Service": {
|
||||
"Service": "api",
|
||||
</code><code class='keyword'>"Tags"</code><code>: ["v1.2.3"],
|
||||
"Failover": {
|
||||
"Datacenters": ["dc1", "dc2"]</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image reverse'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/code-sample-2.png' alt='Open and Extensible'>
|
||||
</div>
|
||||
<div class='g-text-asset'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Blocking Queries / Edge-Triggered Requests</h3>
|
||||
|
|
@ -97,16 +108,30 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='code-sample'>
|
||||
<div>
|
||||
<span>Code Sample</span>
|
||||
<div class='code'>
|
||||
<code class='keyword'>$ curl \</code><code>
|
||||
--request POST \
|
||||
--data \
|
||||
'{
|
||||
"Name": "api",
|
||||
"Service": {
|
||||
"Service": "api",
|
||||
"Tags": ["v1.2.3"],
|
||||
"Failover": {
|
||||
"Datacenters": ["dc1", "dc2"]</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/code-sample-2.png' alt='Workflows, not Technologies'>
|
||||
</div>
|
||||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Watches</h3>
|
||||
|
|
@ -116,16 +141,30 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='code-sample'>
|
||||
<div>
|
||||
<span>Code Sample</span>
|
||||
<div class='code'>
|
||||
<code class='keyword'>$ curl \</code><code>
|
||||
--request POST \
|
||||
--data \
|
||||
'{
|
||||
"Name": "api",
|
||||
"Service": {
|
||||
"Service": "api",
|
||||
"Tags": ["v1.2.3"],
|
||||
"Failover": {
|
||||
"Datacenters": ["dc1", "dc2"]</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image large reverse'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/health-checks.png' alt='Service Registry'>
|
||||
</div>
|
||||
<div class='g-text-asset'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Distributed Locks and Semaphores</h3>
|
||||
|
|
@ -135,6 +174,9 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/distributed-locks-and-semaphores.png' alt='Service Registry'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -41,15 +41,18 @@ description: |-
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section g-carousel-section bg-dark'>
|
||||
<div class="intro">
|
||||
<h3>Case Studies</h3>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='intro'>
|
||||
<h2>Features</h2>
|
||||
</div>
|
||||
<div class='g-text-image large reverse'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/service-registry.png' alt='Service Registry'>
|
||||
</div>
|
||||
<div class='g-text-asset large'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Service Registry</h3>
|
||||
|
|
@ -59,16 +62,16 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/service-registry.png' alt='Service Registry'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image'>
|
||||
<div>
|
||||
<img class="shadow" src='/assets/images/consul-connect/code-sample-2.png' alt='DNS Query Interface'>
|
||||
</div>
|
||||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>DNS Query Interface</h3>
|
||||
|
|
@ -78,16 +81,30 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='code-sample'>
|
||||
<div>
|
||||
<span>Code Sample</span>
|
||||
<div class='code'>
|
||||
<code class='keyword'>$ curl \</code><code>
|
||||
--request POST \
|
||||
--data \
|
||||
'{
|
||||
"Name": "api",
|
||||
"Service": {
|
||||
"Service": "api",
|
||||
"Tags": ["v1.2.3"],
|
||||
"Failover": {
|
||||
"Datacenters": ["dc1", "dc2"]</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image reverse'>
|
||||
<div>
|
||||
<img class="shadow" src='/assets/images/consul-connect/code-sample-2.png' alt='HTTP API with Edge Triggers'>
|
||||
</div>
|
||||
<div class='g-text-asset'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>HTTP API with Edge Triggers</h3>
|
||||
|
|
@ -97,16 +114,30 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='code-sample'>
|
||||
<div>
|
||||
<span>Code Sample</span>
|
||||
<div class='code'>
|
||||
<code class='keyword'>$ curl \</code><code>
|
||||
--request POST \
|
||||
--data \
|
||||
'{
|
||||
"Name": "api",
|
||||
"Service": {
|
||||
"Service": "api",
|
||||
"Tags": ["v1.2.3"],
|
||||
"Failover": {
|
||||
"Datacenters": ["dc1", "dc2"]</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image'>
|
||||
<div>
|
||||
<img class='shadow' src='/assets/images/consul-connect/code-sample-3.png' alt='Multi Datacenter'>
|
||||
</div>
|
||||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Multi Datacenter</h3>
|
||||
|
|
@ -116,16 +147,30 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='code-sample'>
|
||||
<div>
|
||||
<span>Code Sample</span>
|
||||
<div class='code'>
|
||||
<code class='keyword'>$ curl \</code><code>
|
||||
--request POST \
|
||||
--data \
|
||||
'{
|
||||
"Name": "api",
|
||||
"Service": {
|
||||
"Service": "api",
|
||||
"Tags": ["v1.2.3"],
|
||||
"Failover": {
|
||||
"Datacenters": ["dc1", "dc2"]</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image large reverse'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/health-checks.png' alt='Service Registry'>
|
||||
</div>
|
||||
<div class='g-text-asset large'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Health Checks</h3>
|
||||
|
|
@ -135,6 +180,9 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/health-checks.png' alt='Service Registry'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -74,30 +74,28 @@ description: |-
|
|||
<div class='intro'>
|
||||
<h2>Principles of Consul</h2>
|
||||
</div>
|
||||
<div class='g-text-image reverse'>
|
||||
<div>
|
||||
<img class='shadow' src='/assets/images/consul-connect/code-sample-1.png' alt='Automation through Codification'>
|
||||
</div>
|
||||
<div class='g-text-asset'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Automation through Codification</h3>
|
||||
<p>Codify and automate service authorization policy.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section bg-light border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/workflows-not-technologies.png' alt='Workflows, not Technologies'>
|
||||
</div>
|
||||
<div>
|
||||
<div class='code-sample'>
|
||||
<div>
|
||||
<h3>Workflows, not Technologies</h3>
|
||||
<p>Connect services across any runtime platform and public or private cloud. Connect services from Kubernetes to VMs, Containers to Serverless functions.</p>
|
||||
<span>Code Sample</span>
|
||||
<div class="code">
|
||||
<code>$ curl \
|
||||
--request POST \
|
||||
--data \
|
||||
'{
|
||||
"Name": "api",
|
||||
"Service": {
|
||||
"Service": "api",
|
||||
</code><code class='keyword'>"Tags"</code><code>: ["v1.2.3"],
|
||||
"Failover": {
|
||||
"Datacenters": ["dc1", "dc2"]</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -106,10 +104,23 @@ description: |-
|
|||
|
||||
<section class='g-section bg-light border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image reverse'>
|
||||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/open-and-extensible.png' alt='Open and Extensible'>
|
||||
<div>
|
||||
<h3>Workflows, not Technologies</h3>
|
||||
<p>Connect services across any runtime platform and public or private cloud. Connect services from Kubernetes to VMs, Containers to Serverless functions.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/workflows-not-technologies.png' alt='Workflows, not Technologies'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section bg-light border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-asset'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Open and Extensible</h3>
|
||||
|
|
@ -120,6 +131,9 @@ description: |-
|
|||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/open-and-extensible.png' alt='Open and Extensible'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -47,10 +47,7 @@ description: |-
|
|||
<div class='intro'>
|
||||
<h2>Features</h2>
|
||||
</div>
|
||||
<div class='g-text-image large reverse'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/service-access-graph.png' alt='Service Access Graph '>
|
||||
</div>
|
||||
<div class='g-text-asset large'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Service Access Graph </h3>
|
||||
|
|
@ -60,16 +57,16 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/service-access-graph.png' alt='Service Access Graph '>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image'>
|
||||
<div>
|
||||
<img class="shadow" src='/assets/images/consul-connect/code-sample-2.png' alt='DNS Query Interface'>
|
||||
</div>
|
||||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Secure services across any runtime platform</h3>
|
||||
|
|
@ -79,16 +76,30 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='code-sample'>
|
||||
<div>
|
||||
<span>Code Sample</span>
|
||||
<div class='code'>
|
||||
<code class='keyword'>$ curl \</code><code>
|
||||
--request POST \
|
||||
--data \
|
||||
'{
|
||||
"Name": "api",
|
||||
"Service": {
|
||||
"Service": "api",
|
||||
"Tags": ["v1.2.3"],
|
||||
"Failover": {
|
||||
"Datacenters": ["dc1", "dc2"]</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image reverse'>
|
||||
<div>
|
||||
<img class="shadow" src='/assets/images/consul-connect/code-sample-2.png' alt='DNS Query Interface'>
|
||||
</div>
|
||||
<div class='g-text-asset'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Certificate-Based Service Identity</h3>
|
||||
|
|
@ -98,16 +109,19 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='logos'>
|
||||
<div>
|
||||
<img src='/assets/images/consul-connect/logos/vault.png' alt='Vault'>
|
||||
<img src='/assets/images/consul-connect/logos/spiffe.png' alt='Spiffe'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class='g-section border-top'>
|
||||
<div class='g-container'>
|
||||
<div class='g-text-image'>
|
||||
<div>
|
||||
<img class="shadow" src='/assets/images/consul-connect/code-sample-2.png' alt='DNS Query Interface'>
|
||||
</div>
|
||||
<div class='g-text-asset reverse'>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Encrypted communication</h3>
|
||||
|
|
@ -117,6 +131,23 @@ description: |-
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class='code-sample'>
|
||||
<div>
|
||||
<span>Code Sample</span>
|
||||
<div class='code'>
|
||||
<code class='keyword'>$ curl \</code><code>
|
||||
--request POST \
|
||||
--data \
|
||||
'{
|
||||
"Name": "api",
|
||||
"Service": {
|
||||
"Service": "api",
|
||||
"Tags": ["v1.2.3"],
|
||||
"Failover": {
|
||||
"Datacenters": ["dc1", "dc2"]</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue