security

Signed-off-by: Lee Calcote <[email protected]>

assets/scss/_image-modal_project.scss

@@ -0,0 +1,68 @@
+/* The markdown image container */
+.md__image {
+  cursor: pointer;
+}
+
+/* The Modal (background) */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 4em;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: black;
+}
+
+/* Modal Content */
+.modal-content {
+  position: relative;
+  background-color: black;
+  margin: auto;
+  padding: 0;
+  width: 90%;
+  max-width: 1400px;
+}
+
+.modal-pic {
+  display: flex;
+  align-content: center;
+  cursor: pointer;
+}
+
+/* The Close Button */
+/* Optimized for accessibility by using a button named close but 
+  shifting the close text out of the button and only showing x */
+.modal-close {
+  color: white;
+  background-color: black;
+  position: absolute;
+  top: .5em;
+  right: .5em;
+  font-size: 2em;
+  font-weight: bold;
+  height: 1em;
+  width: 1em;
+  text-indent: 10em;
+  overflow: hidden;
+  border: 0;
+}
+
+.modal-close::after {
+  position: absolute;
+  line-height: 0.5;
+  top: 0.2em;
+  left: 0.1em;
+  text-indent: 0;
+  content: "\00D7"
+}
+
+.modal-close:hover,
+.modal-close:focus {
+  color: #999;
+  text-decoration: none;
+  cursor: pointer;
+}

assets/scss/_styles_project.scss

@@ -1,5 +1,6 @@
 @import 'fonts';
 @import 'content_project';
+@import 'image-modal_project.scss';
 
 .navbar-brand  {
   margin: 1.5rem;

content/en/cloud/security/_index.md

@@ -7,9 +7,9 @@ categories: [Security]
 tags: [permissions]
 ---
 
-{{% pageinfo %}}
-Page under construction.
-{{% /pageinfo %}}
+{{< figure src="roles-overview.svg" >}}
+{{< figure src="role-provider-admin.svg" link="images/role-provider-admin.svg"  width="100%"  >}}
+
 
 <!-- Think about your project’s features and use cases. Use these to choose your core tasks. Each granular use case (enable x, configure y) should have a corresponding tasks page or tasks page section. Users should be able to quickly refer to your core tasks when they need to find out how to do one specific thing, rather than having to look for the instructions in a bigger tutorial or example. Think of your tasks pages as a cookbook with different procedures your users can combine to create something more substantial.
 

content/en/cloud/security/keys.md

@@ -12,13 +12,6 @@ tags: [keys, permissions]
 Page under construction.
 {{% /pageinfo %}}
 
-{{ $image := .Resources.GetMatch "roles-overview.svg" }}
-
-
-{{ with $image }}
-  <img src="{{ .RelPermalink  }}" width="{{ .Width }}" height="{{ .Height }}">
-{{ end }}
-
 <!-- Text can be **bold**, _italic_, or ~~strikethrough~~. [Links](https://gohugo.io) should be blue with no underlines (unless hovered over).
 
 There should be whitespace between paragraphs. Vape migas chillwave sriracha poutine try-hard distillery. Tattooed shabby chic small batch, pabst art party heirloom letterpress air plant pop-up. Sustainable chia skateboard art party banjo cardigan normcore affogato vexillologist quinoa meggings man bun master cleanse shoreditch readymade. Yuccie prism four dollar toast tbh cardigan iPhone, tumblr listicle live-edge VHS. Pug lyft normcore hot chicken biodiesel, actually keffiyeh thundercats photo booth pour-over twee fam food truck microdosing banh mi. Vice activated charcoal raclette unicorn live-edge post-ironic. Heirloom vexillologist coloring book, beard deep v letterpress echo park humblebrag tilde.

content/en/cloud/security/roles.md

@@ -7,16 +7,36 @@ categories: [Security]
 tags: [roles, permissions]
 ---
 
-{{% pageinfo %}}
-Page under construction.
-{{% /pageinfo %}}
+## Provider Admin Role
 
+{{< cardpane >}}
+{{% card header="Provider Admin Role" %}}
+<img src="/cloud/security/images/role-provider-admin.svg" link="images/role-provider-admin.svg"  width="100%"  />
+{{% /card %}}
+{{% card %}}
 
-<img alt="test" src="/cloud/security/roles-overview.svg" />
+**What is the purpose of this role?**
 
-{{ with .Resources.GetMatch "roles-overview.svg" }}
-  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
-{{ end }}
+- Used for administration of Layer5 Cloud.
+- Used for debugging and monitoring.
+- Applicable to platform engineering team and on-prem users.
+
+**Who can assign this role?**
+- Provider Admins
+
+**When this role first assigned?**
+- On ☁️ boot-up (using build args)
+
+**How many instances of these roles?**
+- Min: 1, Max: many (based on plan)
+
+**Who can remove assignment of this role?**
+- Provider Admins
+
+**What permissions does this role have?**
+- Can perform CRUD on all resources
+{{% /card %}}
+{{< /cardpane >}}
 
 <!-- Text can be **bold**, _italic_, or ~~strikethrough~~. [Links](https://gohugo.io) should be blue with no underlines (unless hovered over).
 

content/en/cloud/tutorials/sharing-a-workspace.md

@@ -1,7 +1,7 @@
 ---
 title: Sharing a Workspace
 description: >
-  A short lead description about this content page. It can be **bold** or _italic_ and can be split over multiple paragraphs.
+  Learn how to control access to workspaces and their resources.
 date: 2023-10-30
 weight: 5
 ---
@@ -10,7 +10,7 @@ weight: 5
 Page under construction.
 {{% /pageinfo %}}
 
-Text can be **bold**, _italic_, or ~~strikethrough~~. [Links](https://gohugo.io) should be blue with no underlines (unless hovered over).
+<!-- Text can be **bold**, _italic_, or ~~strikethrough~~. [Links](https://gohugo.io) should be blue with no underlines (unless hovered over).
 
 There should be whitespace between paragraphs. Vape migas chillwave sriracha poutine try-hard distillery. Tattooed shabby chic small batch, pabst art party heirloom letterpress air plant pop-up. Sustainable chia skateboard art party banjo cardigan normcore affogato vexillologist quinoa meggings man bun master cleanse shoreditch readymade. Yuccie prism four dollar toast tbh cardigan iPhone, tumblr listicle live-edge VHS. Pug lyft normcore hot chicken biodiesel, actually keffiyeh thundercats photo booth pour-over twee fam food truck microdosing banh mi. Vice activated charcoal raclette unicorn live-edge post-ironic. Heirloom vexillologist coloring book, beard deep v letterpress echo park humblebrag tilde.
 
@@ -233,4 +233,4 @@ Stumptown PBR&B keytar plaid street art, forage XOXO pitchfork selvage affogato
 
 ```
 This is the final element on the page and there should be no margin below this.
-```
+``` -->

content/en/cloud/workspaces/_index.md

@@ -66,7 +66,7 @@ See "[Teams](/extensions/team-management)" section for more information.
 - Connections can be assigned to one or more environments.
 - Same connection can be assigned to multiple environments.
 
-See "[Connections](/concepts/connections)" section for more information.
+See [Connections in Meshery Docs](https://docs.meshery.io/concepts/connections) section for more information.
 
 ## Best Practices
 

layouts/_default/_markup/render-image.html

@@ -0,0 +1,12 @@
+<!-- Images that use the standard image format for markdown will be displayed in a 
+  magnific modal popup. Use format ![alt text](/path/to/image.img) -->
+<!-- Place this file in layouts > _default > _markup > render-image.html -->
+<!-- Also place the image-modal.css and partial/image-modal.html appropriately. -->
+<!-- Id for the image on the page is set to a random 6 numbers, chosen from 1 to 500 -->
+<!-- Onclick opens the modal, and displays/overlays the the image that has the id for the 
+  clicked image. -->
+<!-- from: https://gist.github.com/zjeaton/0cdd7e4bed9d292ab6f3d76b0369f16d -->
+
+<div class="md__image">
+    <img id="{{ first 6 (shuffle (seq 1 500)) }}" src="{{ .Destination | safeURL }}" onclick="openModal(this.id)" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
+</div>

layouts/_default/baseof.html

@@ -14,5 +14,6 @@
       {{ partial "footer.html" . }}
     </div>
     {{ partialCached "scripts.html" . }}
+    {{ partialCached "image-modal.html" . }}
   </body>
 </html>

layouts/partials/image-modal.html

@@ -0,0 +1,36 @@
+<!-- Place in layouts > partials > image-modal.html -->
+<!-- Use the partial at the bottom of any page in which you want magnific pop-up images,
+  or simply place at the bottom of baseof.html -->
+<!-- Modal will open upon clicking the image. Modal will close with clicking the x or image. -->
+
+<!-- The Modal -->
+<div id="myModal" class="modal">
+    <button class="modal-close" onclick="closeModal()">close</button>
+    <div class="modal-content">
+      <img class="modal-pic" id="modalPic" onclick="closeModal()" style="max-width: 100%; max-height: 80vh; margin: auto;">
+    </div>
+  </div>
+
+  <script>
+  // Open the Modal
+  function openModal(clicked_id) {
+    var src = document.getElementById(clicked_id).src;
+    if (src.includes("#")) {
+      src = src.substring(0, src.indexOf( "#" ));
+    };
+    document.getElementById("modalPic").src = src;
+    document.getElementById("myModal").style.display = "block";
+    // Ensures the site footer is not shown if front of the modal. Remove if this is not an issue or
+    // there is no footer. "site-footer" id can also be changed appropriately.
+    document.getElementById("site-footer").style.display = "hidden";
+  }
+
+  // Close the Modal
+  function closeModal() { 
+    // prevents flashing last modal image while new id is loading on open
+    document.getElementById("modalPic").src = "";
+    document.getElementById("myModal").style.display = "none";
+    // See note above regarding the footer 
+    document.getElementById("site-footer").style.display = "block";
+  }
+  </script>