Replace Hugo shortcodes

This commit is contained in:
Catherine Luse
2022-09-09 19:43:45 -07:00
parent 878aa86c1a
commit 82667d93f9
50 changed files with 1139 additions and 128 deletions
+263
View File
@@ -0,0 +1,263 @@
import React from 'react';
const PortsCustomNodes = () => (
<table>
<thead>
<tr>
<th>From / To</th>
<th>Rancher Nodes</th>
<th>etcd Plane Nodes</th>
<th>Control Plane Nodes</th>
<th>Worker Plane Nodes</th>
<th>External Rancher Load Balancer</th>
<th>Internet</th>
</tr>
</thead>
<tbody>
<tr>
<td >Rancher Nodes <sup>(1)</sup></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>git.rancher.io</td>
</tr>
<tr>
<td rowspan="6">etcd Plane Nodes</td>
<td rowspan="6" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP <sup>(3)</sup></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>2379 TCP</td>
<td></td>
<td></td>
<td rowspan="5" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP</td>
<td></td>
</tr>
<tr>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>2380 TCP</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>6443 TCP</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>8472 UDP</td>
<td></td>
</tr>
<tr>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>4789 UDP <sup>(6)</sup></td>
<td></td>
</tr>
<tr>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>9099 TCP <sup>(4)</sup></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="8">Control Plane Nodes</td>
<td rowspan="8" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP <sup>(3)</sup></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>2379 TCP</td>
<td></td>
<td></td>
<td rowspan="7" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP</td>
<td></td>
</tr>
<tr>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>2380 TCP</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>6443 TCP</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>8472 UDP</td>
<td></td>
</tr>
<tr>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>4789 UDP <sup>(6)</sup></td>
<td></td>
</tr>
<tr>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>10250 TCP</td>
<td></td>
</tr>
<tr>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>9099 TCP <sup>(4)</sup></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>10254 TCP <sup>(4)</sup></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="5">Worker Plane Nodes</td>
<td rowspan="5" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP <sup>(3)</sup></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>6443 TCP</td>
<td></td>
<td rowspan="4" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP</td>
<td></td>
</tr>
<tr>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>8472 UDP</td>
<td></td>
</tr>
<tr>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>4789 UDP <sup>(6)</sup></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>9099 TCP <sup>(4)</sup></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>10254 TCP <sup>(4)</sup></td>
<td></td>
</tr>
<tr>
<td>Kubernetes API Clients</td>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>6443 TCP <sup>(5)</sup></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3">Workload Clients or Load Balancer</td>
<td></td>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>30000-32767 TCP / UDP<br/>(nodeport)</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>80 TCP (Ingress)</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP (Ingress)</td>
<td></td>
</tr>
<tr>
<td colspan="7">Notes:<br/><br/>1. Nodes running standalone server or Rancher HA deployment.<br/>2. Required to fetch Rancher chart library.<br/>3. Only without external load balancer in front of Rancher.<br/>4. Local traffic to the node itself (not across nodes).<br/>5. Only if Authorized Cluster Endpoints are activated.<br/>6. Only if using Overlay mode on Windows cluster.
</td>
</tr>
</tbody>
</table>
)
export default PortsCustomNodes;
+257
View File
@@ -0,0 +1,257 @@
import React from 'react';
const PortsIaasNodes = () => (
<table style={{
"border-style": 'solid'
}}>
<thead>
<tr>
<th>From / To</th>
<th>Rancher Nodes</th>
<th>etcd Plane Nodes</th>
<th>Control Plane Nodes</th>
<th>Worker Plane Nodes</th>
<th>External Rancher Load Balancer</th>
<th>Internet</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Rancher Nodes <sup>(1)</sup></td>
<td></td>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>22 TCP</td>
<td></td>
<td rowspan="2" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>git.rancher.io</td>
</tr>
<tr>
<td></td>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>2376 TCP</td>
<td></td>
</tr>
<tr>
<td rowspan="5">etcd Plane Nodes</td>
<td rowspan="5" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP <sup>(3)</sup></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>2379 TCP</td>
<td></td>
<td></td>
<td rowspan="5" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP</td>
<td></td>
</tr>
<tr>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>2380 TCP</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>6443 TCP</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>8472 UDP</td>
<td></td>
</tr>
<tr>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>9099 TCP <sup>(4)</sup></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="7">Control Plane Nodes</td>
<td rowspan="7" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP <sup>(3)</sup></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>2379 TCP</td>
<td></td>
<td></td>
<td rowspan="7" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP</td>
<td></td>
</tr>
<tr>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>2380 TCP</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>6443 TCP</td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>8472 UDP</td>
<td></td>
</tr>
<tr>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>10250 TCP</td>
<td></td>
</tr>
<tr>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>9099 TCP <sup>(4)</sup></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>10254 TCP <sup>(4)</sup></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="4">Worker Plane Nodes</td>
<td rowspan="4" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP <sup>(3)</sup></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>6443 TCP</td>
<td></td>
<td rowspan="4" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP</td>
<td></td>
</tr>
<tr>
<td colspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>8472 UDP</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>9099 TCP <sup>(4)</sup></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>10254 TCP <sup>(4)</sup></td>
<td></td>
</tr>
<tr>
<td>Kubernetes API Clients</td>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>6443 TCP <sup>(5)</sup></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="3">Workload Clients or Load Balancer</td>
<td></td>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>30000-32767 TCP / UDP<br/>(nodeport)</td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>80 TCP (Ingress)</td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP (Ingress)</td>
<td></td>
</tr>
<tr>
<td
colspan="7">Notes:
<br/>
<br/>1. Nodes running standalone server or Rancher HA deployment.<br/>2. Required to fetch Rancher chart library.<br/>3. Only without external load balancer in front of Rancher.
<br/>4. Local traffic to the node itself (not across nodes).<br/>5. Only if Authorized Cluster Endpoints are activated.
</td>
</tr>
</tbody>
</table>
)
export default PortsIaasNodes
+82
View File
@@ -0,0 +1,82 @@
import React from 'react';
const PortsImportedHosted = () => (
<table>
<thead>
<tr>
<th>From / To</th>
<th>Rancher Nodes</th>
<th>Hosted / Imported Cluster</th>
<th>External Rancher Load Balancer</th>
<th>Internet</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Rancher Nodes <sup>(1)</sup></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>Kubernetes API <br/>Endpoint Port <sup>(2)</sup></td>
<td></td>
<td rowspan="3" style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>git.rancher.io</td>
</tr>
<tr>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>8443 TCP</td>
<td></td>
</tr>
<tr>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>9443 TCP</td>
<td></td>
</tr>
<tr>
<td>Hosted / Imported Cluster</td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP <sup>(4)(5)</sup></td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>443 TCP <sup>(5)</sup></td>
<td></td>
</tr>
<tr>
<td>Kubernetes API Clients</td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>Cluster / Provider Specific <sup>(6)</sup></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Workload Client</td>
<td></td>
<td style={{
"background-color": "#3497DA",
color: "#ffffff"
}}>Cluster / Provider Specific <sup>(7)</sup></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="5">Notes:<br/><br/>1. Nodes running standalone server or Rancher HA deployment.<br/>2. Only for hosted clusters.<br/>3. Required to fetch Rancher chart library.<br/>4. Only without external load balancer.<br/>5. From worker nodes.<br/>6. For direct access to the Kubernetes API without Rancher.<br/>7. Usually Ingress backed by infrastructure load balancer and/or nodeport.</td>
</tr>
</tbody>
</table>
)
export default PortsImportedHosted;
+120
View File
@@ -0,0 +1,120 @@
import React from 'react';
const SslFaqHa = () => (
<div>
<h3 id="pem">How Do I Know if My Certificates are in PEM Format?</h3>
<p>You can recognize the PEM format by the following traits:</p>
<ul>
<li>The file begins with the following header:<br /> <code>-----BEGIN CERTIFICATE-----</code></li>
<li>The header is followed by a long string of characters. Like, really long.</li>
<li>The file ends with a footer:<br /> <code>-----END CERTIFICATE-----</code></li>
</ul>
<p><strong>PEM Certificate Example:</strong></p>
<pre style={{
color: "#f8f8f2",
"background-color": "#272822",
"-moz-tab-size" :4,
"-o-tab-size" :4,
"tab-size":4
}}>
----BEGIN CERTIFICATE-----
MIIGVDCCBDygAwIBAgIJAMiIrEm29kRLMA0GCSqGSIb3DQEBCwUAMHkxCzAJBgNV
... more lines
VWQqljhfacYPgp8KJUJENQ9h5hZ2nSCrI+W00Jcw4QcEdCI8HL5wmg==
-----END CERTIFICATE-----
</pre>
<h3 id="base64">How Can I Encode My PEM Files in base64?</h3>
<p>To encode your certificates in base64:</p>
<ol>
<li>Change directory to where the PEM file resides.</li>
<li>Run one of the following commands. Replace <code>FILENAME</code> with the name of your certificate.
<pre style={{
color: "#f8f8f2",
"background-color": "#272822",
"-moz-tab-size" :4,
"-o-tab-size" :4,
"tab-size":4
}}>
# MacOS
cat FILENAME | base64
# Linux
cat FILENAME | base64 -w0
# Windows
certutil -encode FILENAME FILENAME.base64
</pre>
</li>
</ol>
<h3 id="base64">How Can I Verify My Generated base64 String For The Certificates?</h3>
<p>To decode your certificates in base64:</p>
<ol>
<li>Copy the generated base64 string.</li>
<li>Run one of the following commands. Replace <code>YOUR_BASE64_STRING</code> with the previously copied base64
string.
<pre style={{
color: "#f8f8f2",
"background-color": "#272822",
"-moz-tab-size" :4,
"-o-tab-size" :4,
"tab-size":4
}}>
# MacOS
echo YOUR_BASE64_STRING | base64 -D
# Linux
echo YOUR_BASE64_STRING | base64 -d
# Windows
certutil -decode FILENAME.base64 FILENAME.verify
</pre>
</li>
</ol>
<h3 id="cert-order">What is the Order of Certificates if I Want to Add My Intermediate(s)?</h3>
<p>The order of adding certificates is as follows:</p>
<pre style={{
color: "#f8f8f2",
"background-color": "#272822",
"-moz-tab-size" :4,
"-o-tab-size" :4,
"tab-size":4
}}>
-----BEGIN CERTIFICATE-----
%YOUR_CERTIFICATE%
-----END CERTIFICATE-----
-----BEGIN CERTIFICATE-----
%YOUR_INTERMEDIATE_CERTIFICATE%
-----END CERTIFICATE-----
</pre>
<h3 id="validate-cert-chain">How Do I Validate My Certificate Chain?</h3>
<p>You can validate the certificate chain by using the <code>openssl</code> binary. If the output of the command (see
the command example below) ends with <code>Verify return code: 0 (ok)</code>, your certificate chain is valid. The
<code>ca.pem</code> file must be the same as you added to the <code>rancher/rancher</code> container. When using a
certificate signed by a recognized Certificate Authority, you can omit the <code>-CAfile</code> parameter.</p>
<p>Command:</p>
<pre style={{
color: "#f8f8f2",
"background-color": "#272822",
"-moz-tab-size" :4,
"-o-tab-size" :4,
"tab-size":4
}}>
openssl s_client -CAfile ca.pem -connect rancher.yourdomain.com:443 -servername rancher.yourdomain.com
...
Verify return code: 0 (ok)
</pre>
</div>
)
export default SslFaqHa
+24
View File
@@ -0,0 +1,24 @@
import React from "react";
import PropTypes from "prop-types";
// This code was authored by bravemaster619 https://dev.to/bravemaster619/simplest-way-to-embed-a-youtube-video-in-your-react-app-3bk2
const YoutubeEmbed = ({ id }) => (
<div className="video-responsive">
<iframe
width="853"
height="480"
src={`https://www.youtube.com/embed/${id}`}
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
title="Embedded youtube"
/>
</div>
);
YoutubeEmbed.propTypes = {
embedId: PropTypes.string.isRequired
};
export default YoutubeEmbed;