geminabox 3.1.1 → 4.0.0

data/public/master.css

@@ -1,161 +1,431 @@
-@import "https://fonts.googleapis.com/css?family=Droid+Sans+Mono";
+@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap";
 
-body {
-  background: #ddd;
-  color: #444;
-  font-size: 1.2em;
-  font-family: "helvetica neue", sans-serif;
-  margin: 0;
+* {
+  box-sizing: border-box;
 }
 
-small {
-  color: #999;
-  font-size: 60%;
+body {
+  margin: 0;
+  padding: 36px 20px;
+  background: #e7e7ea;
+  color: #444;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
 }
 
 a {
+  color: #1a4fd6;
   text-decoration: none;
-  color: #00a;
 }
 
 a:hover {
-  color: #00f;
+  color: #123aa3;
+  text-decoration: underline;
 }
 
-a#more_link {
-  font-size: 0.7em;
-  line-height: 1.2;
-  vertical-align: bottom;
+code {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  /* JetBrains Mono otherwise draws "~>" as an arrow glyph. */
+  font-variant-ligatures: none;
 }
 
 form {
   margin: 0;
 }
 
-code {
-  font-size: 0.7em;
-  font-family: "Droid Sans Mono", monospace;
-}
-
 #content {
-  background: #fff;
-  border: 1px solid #ccc;
-  width: 600px;
+  max-width: 940px;
   margin: 0 auto;
-  overflow: hidden;
-  padding: 0.5em 0 1em 0;
-  text-align: center;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.06),
+    0 10px 30px rgba(0, 0, 0, 0.05);
+  padding: 52px 56px;
 }
 
 #content h1 {
   margin: 0;
-  color: #a00;
-  font-weight: 600;
-  text-shadow: #aaa 1px 1px 1px;
+  text-align: center;
+  font-size: 46px;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  color: #a11212;
+}
+
+.intro {
+  max-width: 640px;
+  margin: 36px auto 0;
+  text-align: center;
+}
+
+.hint {
+  margin: 26px 0 10px;
+  font-size: 13px;
+  color: #8a8a8f;
+}
+
+.intro .hint:first-child {
+  margin-top: 0;
+}
+
+code.command {
+  display: block;
+  font-size: 14px;
+  color: #2a2a2e;
+  background: #f5f5f6;
+  border: 1px solid #ececee;
+  border-radius: 8px;
+  padding: 12px 16px;
+  line-height: 1.9;
+  overflow-x: auto;
+}
+
+code.command.snippet {
+  text-align: left;
+  white-space: pre;
+}
+
+.upload-link {
+  text-align: center;
+  margin: 40px 0 8px;
+}
+
+.upload-link a {
+  font-size: 24px;
+  font-weight: 700;
+}
+
+nav#alpha_index {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 6px 14px;
+  margin: 28px 0 40px;
+  font-size: 16px;
+  text-transform: uppercase;
+}
+
+nav#alpha_index a {
+  font-weight: 700;
 }
 
-h2 {
-  font-weight: 200;
-  font-size: 1em;
-  color: #000;
-  margin: 0 0 0.5em 0;
-  padding: 0.3em 0;
-  background: #aaa;
-  border-radius: 0.5em 0.5em 0 0;
-  -moz-border-radius: 0.5em 0.5em 0 0;
-  -webkit-border-radius: 0.5em 0.5em 0 0;
+nav#alpha_index span {
+  color: #b7b7bc;
 }
 
 ul.gemlist {
   list-style: none;
-  margin-top: 0em;
-  margin-bottom: 2em;
-  margin-left: 0;
-  margin-right: 0;
+  margin: 0;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
 }
 
-ul.gemlist li {
-  margin: 1em;
-  background: #eee;
-  border-radius: 0.5em;
-  -moz-border-radius: 0.5em;
-  -webkit-border-radius: 0.5em;
-  position: relative;
+.gem-card {
+  border: 1px solid #ececee;
+  border-radius: 10px;
   overflow: hidden;
 }
 
-ul.gemlist li strong {
-  display: block;
-  font-size: 1.2em;
-}
-
-ul.gemlist li .delete-form {
-  position: relative;
-  margin: 2px 0;
-}
-ul.gemlist li button,
-ul.gemlist li a.download {
-  display: none;
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  border-radius: 0.5em 0 0 0.5em;
-  -moz-border-radius: 0.5em 0 0 0.5em;
-  -webkit-border-radius: 0.5em 0 0 0.5em;
-  background: #c55;
-  border: 0;
-  color: #fff;
+.card-header {
+  background: #f6f6f7;
+  color: #1a1a1a;
+  border-bottom: 1px solid #ececee;
+  padding: 24px;
+  text-align: center;
+  scroll-margin-top: 12px;
+}
+
+.card-header h2 {
   margin: 0;
-  font-size: 8pt;
-  padding: 3px;
+  font-size: 22px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-header .permalink {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #b5b5ba;
+  opacity: 0;
+  transition:
+    opacity 0.15s ease,
+    color 0.15s ease;
+}
+
+.gem-card:hover .permalink,
+.card-header .permalink:focus-visible {
+  opacity: 1;
+}
+
+.card-header .permalink:hover {
+  color: #333;
+}
+
+.card-body {
+  padding: 24px;
+  background: #fbfbfc;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.version-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
+  background: #f4f4f5;
+  border: 1px solid #ececed;
+  border-radius: 8px;
+  padding: 9px 12px;
+}
+
+.version-row:hover {
+  background: #eef0f4;
+}
+
+.version-row code {
+  font-size: 13.5px;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.version-row small.platform {
+  flex-shrink: 0;
+  margin-left: auto;
+  font-size: 12px;
+  color: #8a8a8f;
+}
+
+.version-row .actions {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  flex-shrink: 0;
+}
+
+.version-row .actions button.copy-command {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 28px;
+  padding: 0;
+  border: 1px solid #d9d9dc;
+  background: #fff;
+  border-radius: 6px;
   cursor: pointer;
+  color: #6b6b70;
 }
 
-ul.gemlist li a.download {
-  background: #5c5;
-  border-radius: 0.5em 0 0 0.5em;
-  -moz-border-radius: 0.5em 0 0 0.5em;
-  -webkit-border-radius: 0 0.5em 0.5em 0;
-  left: 0;
-  right: auto;
+.version-row .actions button.copy-command:hover {
+  background: #eef0f4;
+  color: #333;
 }
 
-ul.gemlist li:hover button,
-ul.gemlist li:hover a.download {
-  margin: 0;
-  display: block;
+.version-row .actions button.copy-command.copied {
+  color: #3fa34d;
+  border-color: #bfe3c5;
+}
+
+.version-row .actions a.download {
+  font-size: 12px;
+  font-weight: 600;
+  color: #fff;
+  background: #3fa34d;
+  padding: 5px 12px;
+  border-radius: 6px;
 }
 
-.details {
+.version-row .actions a.download:hover {
+  background: #358841;
+  color: #fff;
+  text-decoration: none;
+}
+
+.version-row .actions button[type="submit"] {
+  font-size: 12px;
+  font-weight: 600;
+  font-family: inherit;
+  color: #fff;
+  background: #d94f4f;
+  border: 0;
+  padding: 5px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.version-row .actions button[type="submit"]:hover {
+  background: #c23e3e;
+}
+
+.more-link {
+  text-align: center;
+  padding: 6px 0 2px;
+}
+
+.more-link a {
+  font-weight: 600;
+}
+
+.card-footer {
+  padding: 24px;
+  background: #f0f0f2;
+  border-top: 1px solid #ececee;
+  text-align: center;
+}
+
+.card-footer p {
   margin: 0;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #4a4a4e;
+}
+
+.card-footer p.author {
+  margin-top: 8px;
+  color: #666;
+}
+
+.card-footer p.author a {
+  font-weight: 500;
+}
+
+.back-link {
+  margin: 0 0 24px;
+}
+
+.upload-form {
+  text-align: center;
+  margin-top: 24px;
+}
+
+.upload-form input[type="file"] {
+  font-size: 14px;
+}
+
+.upload-form input[type="submit"] {
+  font-size: 14px;
+  font-weight: 600;
+  font-family: inherit;
+  color: #fff;
+  background: #1a4fd6;
+  border: 0;
+  padding: 9px 18px;
+  border-radius: 8px;
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.upload-form input[type="submit"]:hover {
+  background: #123aa3;
+}
+
+@media (max-width: 700px) {
+  body {
+    padding: 16px 8px;
+  }
+
+  #content {
+    padding: 28px 20px;
+  }
+
+  #content h1 {
+    font-size: 32px;
+  }
+}
+
+dialog#delete-confirm {
+  width: min(468px, calc(100vw - 48px));
+  border: 0;
+  border-radius: 14px;
+  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
+  padding: 0;
   overflow: hidden;
-  margin-top: 1em;
-  font-size: 0.7em;
-  border-radius: 0 0 0.5em 0.5em;
-  -moz-border-radius: 0 0 0.5em 0.5em;
-  -webkit-border-radius: 0 0 0.5em 0.5em;
-  border-top: 1px dashed #ddd;
-  background: #ddd;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+}
+
+dialog#delete-confirm::backdrop {
+  background: rgba(20, 20, 24, 0.42);
+  backdrop-filter: blur(2px);
+}
+
+.delete-confirm-body {
+  display: flex;
+  gap: 16px;
+  padding: 28px 28px 22px;
+  text-align: left;
 }
 
-#alpha_index {
-  font-size: 0.8em;
-  margin-top: 1em;
-  color: #aaa;
+.delete-confirm-body .accent {
+  flex-shrink: 0;
+  width: 4px;
+  border-radius: 4px;
+  background: #d94f4f;
 }
 
-.gem-version p {
+.delete-confirm-body h3 {
+  margin: 0 0 12px;
+  font-size: 18px;
+  font-weight: 700;
+  color: #1a1a1a;
+  line-height: 1.35;
+  text-wrap: pretty;
+}
+
+.delete-confirm-body p {
   margin: 0;
-  padding: 1px 0;
-  border: 0;
-  font-weight: normal;
-  font-style: normal;
-  font-size: 100%;
-  line-height: 1;
-  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #55555b;
+  text-wrap: pretty;
+}
+
+.delete-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 28px;
+  background: #f6f6f7;
+  border-top: 1px solid #ececee;
+}
+
+.delete-confirm-actions button {
+  font-size: 14px;
+  font-weight: 600;
+  padding: 9px 18px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.delete-confirm-actions .cancel {
+  color: #333;
+  background: #fff;
+  border: 1px solid #d3d3d7;
+}
+
+.delete-confirm-actions .cancel:hover {
+  background: #eef0f4;
+}
+
+.delete-confirm-actions .danger {
+  color: #fff;
+  background: #d94f4f;
+  border: 1px solid #d94f4f;
+  white-space: nowrap;
 }
 
-.gem-version small.platform {
-  padding: 0 0 0 15px;
+.delete-confirm-actions .danger:hover {
+  background: #c23e3e;
+  border-color: #c23e3e;
 }

data/public/master.js

@@ -1,11 +1,134 @@
-[].forEach.call(document.querySelectorAll("form.delete-form"), function (el) {
-  el.addEventListener(
-    "submit",
-    function (ev) {
-      if (!confirm("Are you sure you want to delete this gem?")) {
-        ev.preventDefault();
-      }
-    },
-    false
+(function () {
+  var dialog = document.getElementById("delete-confirm");
+
+  function confirmationText(form) {
+    var name = form.getAttribute("data-gem-name");
+    var version = form.getAttribute("data-version");
+    var platform = form.getAttribute("data-platform");
+
+    if (!name || !version) {
+      return {
+        title: "Permanently delete this version from the server?",
+        body:
+          "This can't be undone, and projects that depend on this exact " +
+          "version will no longer be able to install it. The version number " +
+          "stays available, so it can be uploaded again afterward."
+      };
+    }
+
+    var full = name + " " + version;
+    if (platform && !/^ruby/i.test(platform)) {
+      full += " (" + platform + ")";
+    }
+    return {
+      title: "Permanently delete " + full + " from this server?",
+      body:
+        "This can't be undone, and projects that depend on this exact " +
+        "version will no longer be able to install it. The version number " +
+        "itself stays available: you can upload a new " +
+        name +
+        " " +
+        version +
+        " afterward."
+    };
+  }
+
+  function openDialog(form) {
+    var text = confirmationText(form);
+    dialog.querySelector("h3").textContent = text.title;
+    dialog.querySelector("p").textContent = text.body;
+    dialog.showModal();
+
+    dialog.querySelector("button.danger").onclick = function () {
+      dialog.close();
+      form.submit();
+    };
+  }
+
+  if (dialog) {
+    dialog.querySelector("button.cancel").addEventListener(
+      "click",
+      function () {
+        dialog.close();
+      },
+      false
+    );
+    // A click on the backdrop targets the dialog element itself.
+    dialog.addEventListener(
+      "click",
+      function (ev) {
+        if (ev.target === dialog) {
+          dialog.close();
+        }
+      },
+      false
+    );
+  }
+
+  var CHECK_ICON =
+    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" ' +
+    'stroke="#3fa34d" stroke-width="2.5" stroke-linecap="round" ' +
+    'stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';
+
+  function copyText(text) {
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard.writeText(text);
+      return;
+    }
+    // Plain-http deployments have no navigator.clipboard.
+    var scratch = document.createElement("textarea");
+    scratch.value = text;
+    scratch.setAttribute("readonly", "");
+    scratch.style.position = "absolute";
+    scratch.style.left = "-9999px";
+    document.body.appendChild(scratch);
+    scratch.select();
+    try {
+      document.execCommand("copy");
+    } catch (e) {}
+    document.body.removeChild(scratch);
+  }
+
+  [].forEach.call(
+    document.querySelectorAll("button.copy-command"),
+    function (button) {
+      var originalIcon = button.innerHTML;
+      button.addEventListener(
+        "click",
+        function () {
+          var code = button.closest(".version-row").querySelector("code");
+          copyText(code.textContent.replace(/\s+/g, " ").trim());
+          button.innerHTML = CHECK_ICON;
+          button.classList.add("copied");
+          clearTimeout(button.__copyTimer);
+          button.__copyTimer = setTimeout(function () {
+            button.innerHTML = originalIcon;
+            button.classList.remove("copied");
+          }, 1200);
+        },
+        false
+      );
+    }
   );
-});
+
+  [].forEach.call(
+    document.querySelectorAll("form.delete-form"),
+    function (form) {
+      form.addEventListener(
+        "submit",
+        function (ev) {
+          if (dialog && typeof dialog.showModal === "function") {
+            ev.preventDefault();
+            openDialog(form);
+          } else {
+            var text = confirmationText(form);
+            if (!confirm(text.title + "\n\n" + text.body)) {
+              ev.preventDefault();
+            }
+          }
+        },
+        false
+      );
+    }
+  );
+})();

data/views/_version_row.erb

@@ -0,0 +1,16 @@
+<div class="version-row">
+  <code>gem "<%= h(version.name) %>", "~> <%= h(version.number) %>"</code>
+  <% unless version.platform =~ /^ruby/i %>
+    <small class="platform"><%= h(version.platform) %></small>
+  <% end %>
+  <div class="actions">
+    <button type="button" class="copy-command" title="Copy Gemfile line" aria-label="Copy Gemfile line"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="11" height="11" rx="2"></rect><rect x="4" y="4" width="11" height="11" rx="2"></rect></svg></button>
+    <a class="download" href="<%= h(url("/gems/#{version.gemfile_name}.gem")) %>">download</a>
+    <% if @allow_delete %>
+    <form class="delete-form" method="post" action="<%= h(url("/gems/#{version.gemfile_name}.gem")) %>" data-gem-name="<%= h(version.name) %>" data-version="<%= h(version.number) %>" data-platform="<%= h(version.platform) %>">
+      <input type="hidden" name="_method" value="DELETE" />
+      <button type="submit">delete</button>
+    </form>
+    <% end %>
+  </div>
+</div>