FBR : registry.fedoraproject.org restyle + podman

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

 



Dear all,

This is quite a big patch that some simple restyling to registry.fp.o (Add the fedora logo) and also add the podman pull command as an option. (see screenshot attached)
It also adding the possibility to copy the pull command (podman or docker) to the clipboard.

+1s ?

Thanks
Clément
From 961592f837521dc7fa639015519c5497549d325a Mon Sep 17 00:00:00 2001
From: Clement Verna <cverna@xxxxxxxxxxxx>
Date: Sun, 2 Sep 2018 12:20:33 +0200
Subject: [PATCH 1/1] Restyle the Container Registry page.

This commit adds a Title and the Fedora Logo to the registry page.
It also adds support for the podman pull command. It is now possible
to copy to the clipboard the command.

Signed-off-by: Clement Verna <cverna@xxxxxxxxxxxx>
---
 files/reg-server/fedora.png        | Bin 0 -> 6265 bytes
 files/reg-server/repositories.html |  71 +++++---
 files/reg-server/styles.css        | 265 +++++++++++++++++++++++++++++
 tasks/reg-server.yml               |  14 ++
 4 files changed, 329 insertions(+), 21 deletions(-)
 create mode 100644 files/reg-server/fedora.png
 create mode 100644 files/reg-server/styles.css

diff --git a/files/reg-server/fedora.png b/files/reg-server/fedora.png
new file mode 100644
index 0000000000000000000000000000000000000000..eeeb70c868b11d695e9e3f85614ef042c130d52f
GIT binary patch
literal 6265
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
bydeU^=@nlB-gscY3E&iDRHf@BO+o(y@zgy|

literal 0
HcmV?d00001

diff --git a/files/reg-server/repositories.html b/files/reg-server/repositories.html
index 572fbc6ef..d5c75dd0b 100644
--- a/files/reg-server/repositories.html
+++ b/files/reg-server/repositories.html
@@ -3,17 +3,28 @@
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
 <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<!--[if gt IE 8]><!-->
+<html class="no-js">
+<!--<![endif]-->
+
 <head>
     <meta charset="utf-8">
-    <base href="/" >
+    <base href="/">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>{{ .RegistryDomain }}</title>
+    <title>Fedora Container Registry</title>
     <link rel="icon" type="image/ico" href="/favicon.ico">
     <link rel="stylesheet" href="/css/styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"; integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU"
+        crossorigin="anonymous">
 </head>
+
 <body>
-    <h1>{{ .RegistryDomain }}</h1>
+    <div>
+        <h1>
+            <img src="/fedora.png"> Fedora Container Registry
+        </h1>
+    </div>
+    <h3>{{ .RegistryDomain }}</h3>
     <form>
         <input name="filter" type="search"><a class="clear">clear</a>
     </form>
@@ -28,14 +39,19 @@
             <tr>
                 <td valign="top">
                     <a href="/repo/{{ $value.Name | urlquery }}/tags">
-                    {{ $value.Name }}
+                        {{ $value.Name }}
                     </a>
                 </td>
 
                 <td align="right" nowrap>
-                    <a href="/repo/{{ $value.Name | urlquery }}/tags">
-                    <code>docker pull {{ $value.URI }}</code>
-                    </a>
+                    <div>
+                        <input type="text" value="podman pull {{ $value.URI }}" id="podman-input-{{ $key }}">
+                        <i class="fa fa-clipboard"></i>
+                    </div>
+                    <div>
+                        <input type="text" value="docker pull {{ $value.URI }}" id="docker-input-{{ $key }}">
+                        <i class="fa fa-clipboard"></i>
+                    </div>
                 </td>
             </tr>
             {{ end }}
@@ -45,25 +61,38 @@
     <div class="footer">
         <p>Last Updated: {{ .LastUpdated }}</p>
         <p>
-        Fedora Container Layered Images brought to you by the
-        <a href="https://fedoraproject.org/wiki/Atomic_WG";>Fedora Atomic Working
-        Group</a>
+            Fedora Container Layered Images brought to you by the
+            <a href="https://fedoraproject.org/wiki/Container_SIG";>Fedora Container SIG
+            </a>
         </p>
         <p>
-        <a href="https://github.com/jessfraz/reg/tree/master/server";>reg-server
-            was originally written and is maintained upstream by</a>
-        <a href="https://twitter.com/jessfraz";>@jessfraz</a>
+            <a href="https://github.com/jessfraz/reg/tree/master/server";>reg-server was originally written and is maintained
+                upstream by</a>
+            <a href="https://twitter.com/jessfraz";>@jessfraz</a>
         </p>
-    </div><!--/.footer-->
+    </div>
+    <!--/.footer-->
     <script src="/js/scripts.js"></script>
     <script>
-(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-ga('create', 'UA-29404280-12', 'jessfraz.com');
-ga('send', 'pageview');
+        (function () {
+            let clipboards = document.querySelectorAll('.fa-clipboard'); //Select all copy to clipboard icons
+            clipboards.forEach((item, idx) => {
+                item.addEventListener('click', (e => {
+                    if (idx % 2 === 0) { //If the id is even copy the podman command
+                        let copyText = document.getElementById('podman-input-' + (idx / 2).toString());
+                        copyText.select();
+                        document.execCommand('copy');
+                    }
+                    else { //Else copy the docker command
+                        let copyText = document.getElementById('docker-input-' + ((idx - 1) / 2).toString());
+                        copyText.select();
+                        document.execCommand('copy');
+                    }
+                }), false); //End of the click listener
+            }); // Add an click listener to all clipboard icons
+        })();
     </script>
 </body>
+
 </html>
 {{end}}
diff --git a/files/reg-server/styles.css b/files/reg-server/styles.css
new file mode 100644
index 000000000..4880df9d2
--- /dev/null
+++ b/files/reg-server/styles.css
@@ -0,0 +1,265 @@
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300');
+/* Have to use @import for the font, as you can only specify a single stylesheet */
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+html {
+  min-height: 100%;
+  border-top: 10px solid #ECEEF1;
+  border-bottom: 10px solid #ECEEF1;
+  color: #61666c;
+  font-weight: 300;
+  font-size: 1em;
+  font-family: 'Open Sans', sans-serif;
+  line-height: 2em;
+}
+body {
+  padding: 20px;
+  -webkit-backface-visibility: hidden;
+}
+code {
+  font-family: Inconsolata,monospace;
+}
+a {
+  color: #61666c;
+  text-decoration: none;
+}
+a:hover {
+  color: #2a2a2a;
+}
+/*------------------------------------*\
+    Wrapper
+\*------------------------------------*/
+.wrapper {
+  margin: 0 auto;
+  padding-top: 20px;
+  max-width: 800px;
+}
+/*------------------------------------*\
+    Demo block
+\*------------------------------------*/
+.block {
+  font-size: .875em;
+  margin: 20px 0;
+  padding: 20px;
+  color: #9099A3;
+}
+h1 {
+  font-weight: 200;
+  text-align: center;
+  font-size: 1.4em;
+  line-height: 3em;
+  font-family: 'Museo Slab', 'Open Sans', monospace;
+}
+h3{
+  font-weight: 100;
+  text-align: center;
+  font-size: 1.2em;
+  line-height: 3em;
+  font-family: 'Museo Slab', 'Open Sans', monospace;
+}
+
+form {
+  text-align: center;
+}
+input {
+  margin: 0 auto;
+  font-size: 100%;
+  vertical-align: middle;
+  *overflow: visible;
+  line-height: normal;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 18px;
+  display: inline-block;
+  height: 20px;
+  padding: 4px 32px 4px 6px;
+  margin-bottom: 9px;
+  font-size: 14px;
+  line-height: 20px;
+  color: #555555;
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+  width: 196px;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
+  transition: border linear 0.2s, box-shadow linear 0.2s;
+  background: url('search.svg') no-repeat 211px center;
+  background-size: auto 20px;
+}
+input:focus {
+  border-color: rgba(82, 168, 236, 0.8);
+  outline: 0;
+  outline: thin dotted \9;
+  /* IE6-9 */
+
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+input::-moz-focus-inner {
+  padding: 0;
+  border: 0;
+}
+input[type="search"] {
+  margin-top: 20px;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  -webkit-appearance: textfield;
+  -webkit-transition: all 300ms ease-in;
+  -moz-transition: all 300ms ease-in;
+  -ms-transition: all 300ms ease-in;
+  -o-transition: all 300ms ease-in;
+  transition: all 300ms ease-in;
+}
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+input[type="text"]{
+  width: 100%;
+  background: none;
+}
+a.clear,
+a.clear:link,
+a.clear:visited {
+  color: #666;
+  padding: 2px 0 2px 0;
+  font-weight: 400;
+  font-size: 14px;
+  margin: 0px 0 0 20px;
+  line-height: 14px;
+  display: inline-block;
+  border-bottom: transparent 1px solid;
+  vertical-align: -10px;
+  -webkit-transition: all 300ms ease-in;
+  -moz-transition: all 300ms ease-in;
+  -ms-transition: all 300ms ease-in;
+  -o-transition: all 300ms ease-in;
+  transition: all 300ms ease-in;
+}
+a.clear:hover {
+  text-decoration: none;
+  color: #333;
+  cursor: pointer;
+}
+/*------------------------------------*\
+    Table (directory listing)
+\*------------------------------------*/
+table {
+  border-collapse: collapse;
+  font-size: .875em;
+  max-width: 100%;
+  margin: 20px auto 0px auto;
+}
+tr {
+  outline: 0;
+  border: 0;
+}
+tr:hover td {
+  background: #f6f6f6;
+}
+th {
+  text-align: left;
+  font-size: 1em;
+  padding-right: 20px;
+}
+/* 2nd Column: Filename */
+th + th {
+  width: 65%;
+}
+/* 3rd Column: Last Modified */
+/* 4th Column: Size */
+th + th + th + th {
+  width: 5%;
+}
+tr td:first-of-type {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+td {
+  padding: 5px 0;
+  outline: 0;
+  border: 0;
+  border-bottom: 1px solid #edf1f5;
+  vertical-align: middle;
+  text-align: left;
+  -webkit-transition: background 300ms ease-in;
+  -moz-transition: background 300ms ease-in;
+  -ms-transition: background 300ms ease-in;
+  -o-transition: background 300ms ease-in;
+  transition: background 300ms ease-in;
+}
+td:last-child,
+th:last-child {
+  text-align: right;
+  padding-right: 5px;
+}
+td a {
+  display: block;
+}
+tr.parent a {
+  color: #9099A3;
+}
+.parent a:hover {
+  color: #2a2a2a;
+}
+
+/*------------------------------------*\
+    Loading Indicator
+\*------------------------------------*/
+.signal {
+  border: 2px solid #333;
+  border-radius: 15px;
+  height: 15px;
+  left: 50%;
+  margin: -8px 0 0 -8px;
+  opacity: 0;
+  top: 50%;
+  width: 15px;
+  float: right;
+  animation: pulsate 1s ease-out;
+  animation-iteration-count: infinite;
+}
+
+@keyframes pulsate {
+  0% {
+    transform: scale(.1);
+    opacity: 0.0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1.2);
+    opacity: 0;
+  }
+}
+
+/*------------------------------------*\
+    Footer
+\*------------------------------------*/
+.footer {
+  text-align: center;
+  font-size: .75em;
+  margin-top: 50px;
+}
+img {
+  outline: none;
+  border: none;
+  height: 3em;
+  max-width: 100%;
+}
diff --git a/tasks/reg-server.yml b/tasks/reg-server.yml
index 1173bff04..b984518b3 100644
--- a/tasks/reg-server.yml
+++ b/tasks/reg-server.yml
@@ -34,3 +34,17 @@
   when: env == "staging"
   tags:
   - regserver
+
+  - name: Copy fedora icon
+  copy:
+    src: "{{files}}/reg-server/fedora.png"
+    dest: "/var/lib/reg-server/static/fedora.png"
+  tags:
+  - regserver
+
+  - name: Copy custom styles.css
+  copy:
+    src: "{{files}}/reg-server/styles.css"
+    dest: "/var/lib/reg-server/static/css/styles.css"
+  tags:
+  - regserver
-- 
2.17.1

Attachment: Screenshot_2018-09-03 Fedora Container Registry.png
Description: PNG image

_______________________________________________
infrastructure mailing list -- infrastructure@xxxxxxxxxxxxxxxxxxxxxxx
To unsubscribe send an email to infrastructure-leave@xxxxxxxxxxxxxxxxxxxxxxx
Fedora Code of Conduct: https://getfedora.org/code-of-conduct.html
List Guidelines: https://fedoraproject.org/wiki/Mailing_list_guidelines
List Archives: https://lists.fedoraproject.org/archives/list/infrastructure@xxxxxxxxxxxxxxxxxxxxxxx

[Index of Archives]     [Fedora Development]     [Fedora Users]     [Fedora Desktop]     [Fedora SELinux]     [Yosemite News]     [KDE Users]

  Powered by Linux