Adds dynamically generated installation instructions
This commit is contained in:
Alicia Sykes
226
src/lib/InstallationInstructions.svelte
Normal file
226
src/lib/InstallationInstructions.svelte
Normal file
@@ -0,0 +1,226 @@
|
||||
<script lang="ts">
|
||||
|
||||
import { templatesUrl, gitHubRepo } from '$src/constants';
|
||||
import type { Template, Volume, Service } from '$src/Types';
|
||||
|
||||
export let portainerTemplate: Template | null = null;
|
||||
export let portainerServices: Service[] | null = null;
|
||||
|
||||
const copyToClipboard = (content: string) => {
|
||||
navigator.clipboard.writeText(content);
|
||||
};
|
||||
|
||||
const generateDockerRunCommand = (template: Template) => {
|
||||
let command = `docker run -d \\ \n`;
|
||||
if (template.ports) {
|
||||
template.ports.forEach((port) => {
|
||||
command += ` -p ${port} \\\n`;
|
||||
});
|
||||
}
|
||||
if (template.env) {
|
||||
template.env.forEach((env) => {
|
||||
command += ` -e ${env.name}=\${${env.name}} \\\n`;
|
||||
});
|
||||
}
|
||||
if (template.volumes) {
|
||||
template.volumes.forEach((volume: Volume) => {
|
||||
const readOnly = volume.readonly ? ":ro" : "";
|
||||
command += ` -v ${volume.bind}:${volume.container}${readOnly} \\\n`;
|
||||
});
|
||||
}
|
||||
if (template.restart_policy) {
|
||||
command += ` --restart=${template.restart_policy} \\\n`;
|
||||
}
|
||||
command += ` ${template.image}`;
|
||||
return command;
|
||||
};
|
||||
|
||||
const generateDockerRunCommands = (stack: Service[]) => {
|
||||
const commands = stack.map((service) => {
|
||||
let cmd = `docker run --name ${service.name} -d \\\n`;
|
||||
if (service.command) {
|
||||
cmd += ` ${service.command} \\\n`;
|
||||
}
|
||||
if (service.env) {
|
||||
service.env.forEach((envVar) => {
|
||||
cmd += ` -e "${envVar.value}" \\\n`;
|
||||
});
|
||||
}
|
||||
if (service.ports) {
|
||||
service.ports.forEach((port) => {
|
||||
cmd += ` -p ${port} \\\n`;
|
||||
});
|
||||
}
|
||||
if (service.volumes) {
|
||||
service.volumes.forEach((volume) => {
|
||||
cmd += ` -v ${volume.bind}:${volume.container} \\\n`;
|
||||
});
|
||||
}
|
||||
if (service.restart_policy) {
|
||||
cmd += ` --restart=${service.restart_policy} \\\n`;
|
||||
}
|
||||
cmd += ` ${service.image}`;
|
||||
return cmd;
|
||||
});
|
||||
return commands;
|
||||
}
|
||||
|
||||
const dockerRunCommand = portainerTemplate?.image ? generateDockerRunCommand(portainerTemplate) : null;
|
||||
const dockerRunCommands = portainerServices && !dockerRunCommand ? generateDockerRunCommands(portainerServices) : null;
|
||||
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<h2>Installation</h2>
|
||||
|
||||
<h3>Via Portainer</h3>
|
||||
<ol>
|
||||
<li>
|
||||
Ensure both
|
||||
<a href="https://docs.docker.com/engine/install/">Docker</a> and
|
||||
<a href="https://www.portainer.io/installation/">Portainer</a> are installed, and up-to-date
|
||||
</li>
|
||||
<li>Log into your Portainer web UI
|
||||
<li>Under Settings → App Templates, paste the below URL</li>
|
||||
<li>Head to Home → App Templates, and the list of apps will show up</li>
|
||||
<li>Select the app you wish to deploy, fill in any config options, and hit Deploy</li>
|
||||
</ol>
|
||||
|
||||
<h4>Template Import URL</h4>
|
||||
<pre>{templatesUrl}</pre>
|
||||
<button on:click={() => copyToClipboard(templatesUrl)}>Copy</button>
|
||||
|
||||
<details>
|
||||
<summary>Show Me</summary>
|
||||
<img class="demo" src="https://i.ibb.co/XxGRjrs/portainer-templates-installation.gif" alt="demo" />
|
||||
</details>
|
||||
|
||||
{#if dockerRunCommand}
|
||||
<hr />
|
||||
<h3>Via Docker Run</h3>
|
||||
<div class="docker-run-command">
|
||||
<button class="docker-command-copy" on:click={() => copyToClipboard(dockerRunCommand)}>Copy</button>
|
||||
<pre>{dockerRunCommand}</pre>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if dockerRunCommands}
|
||||
<hr />
|
||||
<h3>Via Docker Run</h3>
|
||||
|
||||
{#each dockerRunCommands as command, index}
|
||||
<h4>Service #{index + 1} - {portainerServices[index].name}</h4>
|
||||
<div class="docker-run-command">
|
||||
<button class="docker-command-copy" on:click={() => copyToClipboard(command)}>Copy</button>
|
||||
<pre>{command}</pre>
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
{/if}
|
||||
|
||||
<hr />
|
||||
<h3>Alternative Methods</h3>
|
||||
<p>For more installation options, see the <a href={gitHubRepo}>Documentation</a> in the GitHub repo</p>
|
||||
|
||||
</section>
|
||||
|
||||
<style lang="scss">
|
||||
section {
|
||||
background: var(--card);
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
margin: 1rem auto;
|
||||
max-width: 1000px;
|
||||
transition: all 0.2s ease-in-out;
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 2rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
h4 {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
ol {
|
||||
margin: 0.5rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
li {
|
||||
counter-increment: item;
|
||||
}
|
||||
li:before {
|
||||
content: counter(item);
|
||||
color: var(--accent);
|
||||
margin-right: 0.5rem;
|
||||
font-weight: 600;
|
||||
width: 1ch;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
opacity: 0.5;
|
||||
margin: 1.5rem auto;
|
||||
height: 2px;
|
||||
border: none;
|
||||
background: var(--accent);
|
||||
}
|
||||
pre {
|
||||
background: var(--card-2);
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
width: fit-content;
|
||||
margin: 0.5rem 0;
|
||||
display: inline;
|
||||
border-radius: 6px;
|
||||
}
|
||||
button {
|
||||
background: var(--background);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
color: var(--foreground);
|
||||
font-family: Kanit;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
&:hover {
|
||||
background: var(--gradient);
|
||||
transform: scale(1.1) rotate(-1deg);
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: var(--accent);
|
||||
}
|
||||
details {
|
||||
summary {
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
&:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.demo {
|
||||
display: block;
|
||||
margin: 0.5rem auto;
|
||||
border-radius: 6px;
|
||||
max-width: 50rem;
|
||||
}
|
||||
.docker-run-command {
|
||||
background: var(--card-2);
|
||||
position: relative;
|
||||
padding: 0.5rem;
|
||||
.docker-command-copy {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
9
src/routes/usage/+page.svelte
Normal file
9
src/routes/usage/+page.svelte
Normal file
@@ -0,0 +1,9 @@
|
||||
<script lang="ts">
|
||||
import InstallationInstructions from '$lib/InstallationInstructions.svelte';
|
||||
import Header from '$lib/Header.svelte';
|
||||
import Footer from '$lib/Footer.svelte';
|
||||
</script>
|
||||
|
||||
<Header />
|
||||
<InstallationInstructions />
|
||||
<Footer bottom />
|
||||
Reference in New Issue
Block a user