Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix liquid template copy component 1337 #1348

Merged
merged 8 commits into from
Oct 23, 2023
Merged

Fix liquid template copy component 1337 #1348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a1d1cc1
leverage liquid template system for copy component
JayKay24 Aug 6, 2023
92ca9f6
leverage copy-to-clipboard.html in help-modal.html
JayKay24 Aug 6, 2023
4149a16
refactor help-modal.html
vishalvivekm Oct 23, 2023
38a1d75
Retain comments
vishalvivekm Oct 23, 2023
3008a27
Refactor copy-to-clipboard components in getting-started.html
vishalvivekm Oct 23, 2023
0d485f4
Apply suggestions from code review
vishalvivekm Oct 23, 2023
dd91182
Apply suggestions from code review
vishalvivekm Oct 23, 2023
a29620c
fix issues
vishalvivekm Oct 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions _includes/copy-to-clipboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!-- copy to clipboard -->
<a
class="btn tooltip"
data-clipboard-target="{{ include.clipboard_target }}"
data-clipboard-text="{{ include.clipboard_text }}"
onmouseout="resetCopyText(this)"
style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;"
>
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">
Copy to clipboard
</span>
</a>
123 changes: 29 additions & 94 deletions _includes/getting-started.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,27 +93,17 @@ <h3>Bash using Mac or Linux</h3>

<p>Install on Kubernetes</p>

<div id="start-k8s" class="highlight-code">
<code class="code-box"> $ curl -L https://meshery.io/install | PLATFORM=kubernetes bash - </code>
<!-- copy to clipboard -->
<a class="btn tooltip" data-clipboard-target="#start-k8s" data-clipboard-text="curl -L https://meshery.io/install | PLATFORM=kubernetes bash -"
onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
</div>
<div id="start-k8s" class="highlight-code">
<code class="code-box"> $ curl -L https://meshery.io/install | PLATFORM=kubernetes bash - </code>
{% include copy-to-clipboard.html clipboard_target="#start-k8s" clipboard_text="curl -L https://meshery.io/install | PLATFORM=kubernetes bash -" %}
</div>

<p>Install on Docker</p>
<p>Install on Docker</p>

<div id="start-docker" class="highlight-code">
<code class="code-box"> $ curl -L https://meshery.io/install | PLATFORM=docker bash - </code>
<!-- copy to clipboard -->
<a class="btn tooltip" data-clipboard-target="#start-docker" data-clipboard-text="curl -L https://meshery.io/install | PLATFORM=docker bash -"
onmouseout="resetCopyText(this)" style="position:absolute; top: 0.10rem; right: 0.5rem; font-size: 22px;">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
</div>
{% include copy-to-clipboard.html clipboard_target="#start-docker" clipboard_text="curl -L https://meshery.io/install | PLATFORM=docker bash -" %}
</div>

</div>
</div>
Expand All @@ -127,13 +117,8 @@ <h3>Brew User:</h3>
<div id="start-brew" class="highlight-code">
<code class="code-box"> $ brew install mesheryctl
$ mesheryctl system start</code>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-brew"
data-clipboard-text="brew install mesheryctl
mesheryctl system start" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
{% include copy-to-clipboard.html clipboard_target="#start-brew" clipboard_text="brew install mesheryctl
mesheryctl system start" %}
</div>
</div>
</div>
Expand All @@ -151,25 +136,15 @@ <h4 style="font-size: 1.5em;">Use mesheryctl</h4>
<div id="start-helm-v3" class="highlight-code">
<code class="code-box">mesheryctl system context create docker --platform docker --set
mesheryctl system start</code>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-helm-v3"
data-clipboard-text="mesheryctl system context create docker --platform docker --set
mesheryctl system start" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
{% include copy-to-clipboard.html clipboard_target="#start-helm-v3" clipboard_text="mesheryctl system context create docker --platform docker --set
mesheryctl system start" %}
</div>

<!-- Docker extension for Meshery -->
<h4 style="font-size: 1.5em;"> Use Docker Extension for Meshery</h4>
<div id="start-helm-v3" class="highlight-code">
<code class="code-box">docker extension install meshery/docker-extension-meshery:stable-latest</code>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-helm-v3"
data-clipboard-text="docker extension install meshery/docker-extension-meshery:stable-latest" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
{% include copy-to-clipboard.html clipboard_target="#start-helm-v3" clipboard_text="docker extension install meshery/docker-extension-meshery:stable-latest" %}
</div>
</div>
</div>
Expand All @@ -186,13 +161,8 @@ <h4 style="font-size: 1.5em;">Use mesheryctl</h4>
<div id="start-helm-v3" class="highlight-code">
<code class="code-box">mesheryctl system context create k8s --platform kubernetes --set
mesheryctl system start</code>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-helm-v3"
data-clipboard-text="mesheryctl system context create k8s --platform kubernetes --set
mesheryctl system start" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
{% include copy-to-clipboard.html clipboard_target="#start-helm-v3" clipboard_text="mesheryctl system context create k8s --platform kubernetes --set
mesheryctl system start" %}
</div>
</div>
</div>
Expand All @@ -208,14 +178,9 @@ <h4 style="font-size: 1.5em;">Using Scoop</h4>
<code class="code-box"> $ scoop bucket add mesheryctl https://github.com/layer5io/scoop-bucket.git
$ scoop install mesheryctl
$ mesheryctl system start </code>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-windows"
data-clipboard-text="scoop bucket add mesheryctl https://github.com/layer5io/scoop-bucket.git
{% include copy-to-clipboard.html clipboard_target="#start-windows" clipboard_text="scoop bucket add mesheryctl https://github.com/layer5io/scoop-bucket.git
scoop install mesheryctl
mesheryctl system start " onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
mesheryctl system start " %}
</div>
</div>

Expand All @@ -225,13 +190,7 @@ <h4 style="font-size: 1.5em;">Using Binary</h4>
</p>
<div id="start-windows" class="highlight-code">
<code class="code-box"> $ mesheryctl system start </code>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-windows"
data-clipboard-text="mesheryctl system start" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>

{% include copy-to-clipboard.html clipboard_target="#start-windows" clipboard_text="mesheryctl system start" %}
</div>

</div>
Expand All @@ -247,13 +206,8 @@ <h4 style="font-size: 1.5em;">Use mesheryctl</h4>
<div id="start-helm-v3" class="highlight-code">
<code class="code-box"> mesheryctl system config aks
mesheryctl system start </code>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-helm-v3"
data-clipboard-text="mesheryctl system context create k8s -p kubernetes -s
mesheryctl system start" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
{% include copy-to-clipboard.html clipboard_target="#start-helm-v3" clipboard_text="mesheryctl system context create k8s -p kubernetes -s
mesheryctl system start" %}
</div>
</div>
</div>
Expand All @@ -267,12 +221,7 @@ <h4 style="font-size: 1.5em;">Get mesheryctl</h4>
<h4 style="font-size: 1.5em;">Use mesheryctl</h4>
<div id="start-helm-v3" class="highlight-code">
<code class="code-box"> mesheryctl system config minikube </code>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-helm-v3"
data-clipboard-text="mesheryctl system config minikube" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
{% include copy-to-clipboard.html clipboard_target="#start-helm-v3" clipboard_text="mesheryctl system config minikube" %}
</div>
</div>
</div>
Expand Down Expand Up @@ -328,15 +277,10 @@ <h3>Using Helm</h3>
helm install meshery-operator meshery/meshery-operator -n meshery
helm install meshery meshery/meshery -n meshery
</code>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-helm-v3"
data-clipboard-text="kubectl create ns meshery
helm repo add meshery https://meshery.io/charts/
helm install meshery-operator meshery/meshery-operator -n meshery
helm install meshery meshery/meshery -n meshery" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
{% include copy-to-clipboard.html clipboard_target="#start-helm-v3" clipboard_text="kubectl create ns meshery
helm repo add meshery https://meshery.io/charts/
helm install meshery-operator meshery/meshery-operator -n meshery
helm install meshery meshery/meshery -n meshery" %}
</div>
<p style="font-size: 1em;">Don't forget to grab a copy of mesheryctl. Install with <a onclick="displayCode('bash');">Bash</a>, <a onclick="displayCode('brew');">Brew</a>, or <a onclick="displayCode('windows');">Scoop</a>.</p>
</div>
Expand All @@ -352,13 +296,9 @@ <h4 style="font-size: 1.5em;">Get mesheryctl</h4>
<h4 style="font-size: 1.5em;">Using mesheryctl</h4>
<div id="start-helm-v3" class="highlight-code">
<code class="code-box"> mesheryctl system config gke --token *PATH_TO_TOKEN* </code>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-helm-v3"
data-clipboard-text="mesheryctl system config gke
mesheryctl system start" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
mesheryctl system start </code>
{% include copy-to-clipboard.html clipboard_target="#start-helm-v3" clipboard_text="mesheryctl system config gke
mesheryctl system start" %}
</div>
</div>
</div>
Expand All @@ -374,13 +314,8 @@ <h4 style="font-size: 1.5em;">Use mesheryctl</h4>
<div id="start-helm-v3" class="highlight-code">
<code class="code-box"> mesheryctl system config eks
mesheryctl system start </code>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-helm-v3"
data-clipboard-text="mesheryctl system config eks
mesheryctl system start" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
{% include copy-to-clipboard.html clipboard_target="#start-helm-v3" clipboard_text="mesheryctl system config eks
mesheryctl system start" %}
</div>
</div>
</div>
Expand Down
24 changes: 6 additions & 18 deletions _includes/help-modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,36 +111,24 @@ <h3>Meshery CLI</h3>
<p class="code-box" style="height: 40px; line-height: 15px; color: white"><code style="position: absolute;">
mesheryctl pattern apply -f [file | URL]
</code></p>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-pattern"
data-clipboard-text="mesheryctl pattern apply -f [file | URL]" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
<!-- copy to clipboard -->
{% include copy-to-clipboard.html clipboard_target="#start-pattern" clipboard_text="mesheryctl pattern apply -f [file | URL]" %}
vishalvivekm marked this conversation as resolved.
Show resolved Hide resolved
</div>
<p>2. Onboard an application.</p>
<div id="start-app" class="highlight-code">
<p class="code-box" style="height: 40px; line-height: 15px; color: white"><code style="position: absolute;">
mesheryctl app onboard -f [file-path]
</code></p>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-app"
data-clipboard-text="mesheryctl app onboard -f [file-path]" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
<!-- copy to clipboard -->
{% include copy-to-clipboard.html clipboard_target="#start-app" clipboard_text="mesheryctl app onboard -f [file-path]" %}
vishalvivekm marked this conversation as resolved.
Show resolved Hide resolved
</div>
<p>3. Apply a WASM filter file.</p>
<div id="start-pattern" class="highlight-code">
<p class="code-box" style="height: 40px; line-height: 15px; color: white"><code style="position: absolute;">
mesheryctl exp filter apply --file [GitHub Link]
</code></p>
<!-- copy to clipboard -->
<a class="btn tooltip" style="position: absolute; top:0.10rem; right: 0.5rem; font-size: 22px;" data-clipboard-target="#start-pattern"
data-clipboard-text="mesheryctl exp filter apply --file [GitHub Link]" onmouseout="resetCopyText(this)">
<i class="far fa-copy"></i>
<span class="tooltiptext" style="font-size: 15px; width: 140px; height: 40px; padding: 0; line-height: 40px; top: 2rem; left: -80px;">Copy to clipboard</span>
</a>
<!-- copy to clipboard -->
{% include copy-to-clipboard.html clipboard_target="#start-pattern" clipboard_text="mesheryctl exp filter apply --file [GitHub Link]" %}
vishalvivekm marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>

Expand Down