emacs-elpa-diffs
[Top][All Lists]
Advanced
[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

[elpa] new-master d2d8dd0 080/128: Better generated HTML pages

From: Stefan Monnier
Subject: [elpa] new-master d2d8dd0 080/128: Better generated HTML pages
Date: Mon, 14 Dec 2020 15:39:36 -0500 (EST) 
branch: new-master
commit d2d8dd08c077a37abec92a6c4c45a06230d86402
Author: Nicolas Petton <nicolas@petton.fr>
Commit: Nicolas Petton <nicolas@petton.fr>

    Better generated HTML pages
    
    * admin/archive-contents.el: Better HTML generation.
    * html/index.html: Improvements of the page.
    * html/javascript/jquery.filtertable.min.js:
    * html/layout.css: New css rules
    * html/favicon.png:
    * html/images/elpa-small.png:
    * html/images/elpa.png:
    * html/javascript/jquery.min.js:
    * html/javascript/package-search.js: New files.
---
 html/favicon.png                          | Bin 0 -> 624 bytes
 html/images/elpa-small.png                | Bin 0 -> 1694 bytes
 html/images/elpa.png                      | Bin 0 -> 9096 bytes
 html/index.html                           | 100 +++++++----
 html/javascript/jquery.filtertable.min.js |  13 ++
 html/javascript/jquery.min.js             |   5 +
 html/javascript/package-search.js         |   6 +
 html/layout.css                           | 282 ++++++++++++++++++++++++------
 8 files changed, 313 insertions(+), 93 deletions(-)

diff --git a/html/favicon.png b/html/favicon.png
new file mode 100644
index 0000000..6b139ea
Binary files /dev/null and b/html/favicon.png differ
diff --git a/html/images/elpa-small.png b/html/images/elpa-small.png
new file mode 100644
index 0000000..4fdf2e7
Binary files /dev/null and b/html/images/elpa-small.png differ
diff --git a/html/images/elpa.png b/html/images/elpa.png
new file mode 100644
index 0000000..238480c
Binary files /dev/null and b/html/images/elpa.png differ
diff --git a/html/index.html b/html/index.html
index 4afe884..187e89c 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,39 +1,65 @@
-<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
+<!doctype html>
 <html>
-<head>
-  <title>GNU Emacs Lisp Package Archive</title>
-  <link rel="icon" type="image/png" href="gnu-head-mini.png">
-  <link rel="stylesheet" type="text/css" href="layout.css">
-</head>
-<body>
-
-<h1>GNU Emacs Lisp Package Archive</h1>
-
-<p>
-This is the default package repository for 
-<a href="http://www.gnu.org/software/emacs/";>GNU Emacs</a>.
-</p>
-
-<p>
-To use it, type <tt>M-x list-packages</tt> in Emacs.
-(This requires Emacs version 24.1 or higher.) <br/>
-Since you'll probably want to use your installed packages, it's also
-<a 
href="https://www.gnu.org/software/emacs/manual/html_node/emacs/Package-Installation.html#Package-Installation";>recommended</a>
-that you add <code>(package-initialize)</code> somewhere
-in your <code>~/.emacs</code> file.
-</p>
-
-<p>Or you can just browse the <a href="packages/">list of packages</a>.</p>
-
-<p>
-Packages are managed through the
-<a href="http://git.savannah.gnu.org/cgit/emacs/elpa.git";>GNU ELPA 
repository</a>
-(see the <a href="https://savannah.gnu.org/projects/emacs";>GNU Emacs project 
page</a>
-for clone instructions).  <br>
-To contribute new packages refer to the
-<a 
href="http://git.savannah.gnu.org/cgit/emacs/elpa.git/plain/README";>README</a>.
-</p>
-
-<!-- <p> You can grab the <a href="emacs-packages-latest.tgz">latest package 
snapshot</a>. -->
-</body>
+    <head>
+        <title>GNU Emacs Lisp Package Archive</title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <link rel="shortcut icon" type="image/png" href="favicon.png">
+        <link rel="stylesheet" href="//code.cdn.mozilla.net/fonts/fira.css">
+        <link rel="stylesheet" type="text/css" href="layout.css">
+        <meta name="viewport" 
content="initial-scale=1.0,maximum-scale=1.0,width=device-width" />
+    </head>
+
+    <body>
+        <div class="wrapper">
+            <div class="header">
+                <div class="container">
+                    <img src="images/elpa.png" alt="ELPA"/>
+                    <h1>GNU Emacs Lisp Package Archive</h1>
+
+                    <p>
+                        The default package repository for 
+                        <a href="http://www.gnu.org/software/emacs/";>GNU 
Emacs</a>.
+                    </p>                
+                </div>
+            </div>
+
+            <div class="container">
+                <p>
+                    To use it, type <tt>M-x list-packages</tt> in Emacs.
+                    (This requires Emacs version 24.1 or higher.) <br/>
+                    
+                    Since you'll probably want to use your installed packages, 
it's also
+                    <a 
href="https://www.gnu.org/software/emacs/manual/html_node/emacs/Package-Installation.html#Package-Installation";>recommended</a>
+                    that you add <code>(package-initialize)</code> somewhere
+                    in your <code>~/.emacs</code> file.
+                </p>
+
+                <p class="centered"><a class="button" href="packages/">Browse 
the packages</a></p>
+
+                <p>
+                    Packages are managed through the
+                    <a 
href="http://git.savannah.gnu.org/cgit/emacs/elpa.git";>GNU ELPA repository</a>
+                    (see the <a 
href="https://savannah.gnu.org/projects/emacs";>GNU Emacs project page</a>
+                    for clone instructions).
+                </p>
+                
+                <p>
+                    To contribute new packages refer to the
+                    <a 
href="http://git.savannah.gnu.org/cgit/emacs/elpa.git/plain/README";>README</a>.
+                </p>
+
+                <!-- <p> You can grab the <a 
href="emacs-packages-latest.tgz">latest package snapshot</a>. -->            
+            </div>
+            <div class="push"></div>
+        </div>
+
+        <div class="footer">
+            <div class="container">
+                <p>
+                    Copyright 2015 Free Software Foundation, Inc.
+                </p>
+            </div>
+        </div>
+
+    </body>
 </html>
diff --git a/html/javascript/jquery.filtertable.min.js 
b/html/javascript/jquery.filtertable.min.js
new file mode 100644
index 0000000..fe3b588
--- /dev/null
+++ b/html/javascript/jquery.filtertable.min.js
@@ -0,0 +1,13 @@
+/**
+ * jquery.filterTable
+ *
+ * This plugin will add a search filter to tables. When typing in the filter,
+ * any rows that do not contain the filter will be hidden.
+ *
+ * Utilizes bindWithDelay() if available. 
https://github.com/bgrins/bindWithDelay
+ *
+ * @version v1.5.5
+ * @author Sunny Walker, swalker@hawaii.edu
+ * @license MIT
+ */
+!function($){var 
e=$.fn.jquery.split("."),t=parseFloat(e[0]),n=parseFloat(e[1]);2>t&&8>n?($.expr[":"].filterTableFind=function(e,t,n){return
 
$(e).text().toUpperCase().indexOf(n[3].toUpperCase())>=0},$.expr[":"].filterTableFindAny=function(e,t,n){var
 i=n[3].split(/[\s,]/),r=[];return $.each(i,function(e,t){var 
n=t.replace(/^\s+|\s$/g,"");n&&r.push(n)}),r.length?function(e){var t=!1;return 
$.each(r,function(n,i){return 
$(e).text().toUpperCase().indexOf(i.toUpperCase())>=0?(t=!0,!1):void 0} [...]
\ No newline at end of file
diff --git a/html/javascript/jquery.min.js b/html/javascript/jquery.min.js
new file mode 100644
index 0000000..0f60b7b
--- /dev/null
+++ b/html/javascript/jquery.min.js
@@ -0,0 +1,5 @@
+/*! jQuery v1.11.3 | (c) 2005, 2015 jQuery Foundation, Inc. | 
jquery.org/license */
+!function(a,b){"object"==typeof module&&"object"==typeof 
module.exports?module.exports=a.document?b(a,!0):function(a){if(!a.document)throw
 new Error("jQuery requires a window with a document");return 
b(a)}:b(a)}("undefined"!=typeof window?window:this,function(a,b){var 
c=[],d=c.slice,e=c.concat,f=c.push,g=c.indexOf,h={},i=h.toString,j=h.hasOwnProperty,k={},l="1.11.3",m=function(a,b){return
 new 
m.fn.init(a,b)},n=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,o=/^-ms-/,p=/-([\da-z])/gi,q=function(a,b
 [...]
+
+return!0}function Q(a,b,d,e){if(m.acceptData(a)){var 
f,g,h=m.expando,i=a.nodeType,j=i?m.cache:a,k=i?a[h]:a[h]&&h;if(k&&j[k]&&(e||j[k].data)||void
 0!==d||"string"!=typeof b)return 
k||(k=i?a[h]=c.pop()||m.guid++:h),j[k]||(j[k]=i?{}:{toJSON:m.noop}),("object"==typeof
 b||"function"==typeof 
b)&&(e?j[k]=m.extend(j[k],b):j[k].data=m.extend(j[k].data,b)),g=j[k],e||(g.data||(g.data={}),g=g.data),void
 0!==d&&(g[m.camelCase(b)]=d),"string"==typeof 
b?(f=g[b],null==f&&(f=g[m.camelCase(b)])):f=g,f}}fu [...]
+return new 
Za.prototype.init(a,b,c,d,e)}m.Tween=Za,Za.prototype={constructor:Za,init:function(a,b,c,d,e,f){this.elem=a,this.prop=c,this.easing=e||"swing",this.options=b,this.start=this.now=this.cur(),this.end=d,this.unit=f||(m.cssNumber[c]?"":"px")},cur:function(){var
 a=Za.propHooks[this.prop];return 
a&&a.get?a.get(this):Za.propHooks._default.get(this)},run:function(a){var 
b,c=Za.propHooks[this.prop];return 
this.options.duration?this.pos=b=m.easing[this.easing](a,this.options.duration*a,
 [...]
diff --git a/html/javascript/package-search.js 
b/html/javascript/package-search.js
new file mode 100644
index 0000000..4713404
--- /dev/null
+++ b/html/javascript/package-search.js
@@ -0,0 +1,6 @@
+$(document).ready(function() {
+       $('table').filterTable({
+               label: '',
+               placeholder: 'Search packages...'
+       });
+});
diff --git a/html/layout.css b/html/layout.css
index f6c1395..0744ab9 100644
--- a/html/layout.css
+++ b/html/layout.css
@@ -1,87 +1,257 @@
-/* This is heavily cut-down version of http://www.gnu.org/layout.css */
+/* Begin of reset */
 
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* End of reset */
+
+body {
+  font-family: "fira sans", sans;
+  line-height: 1.5em;
+  font-size: 1.2em;
+  color: #333;
+}
+
+html, body {
+  height: 100%;
+}
+.wrapper {
+  min-height: 100%;
+  height: auto !important; /* This line and the next line are not necessary 
unless you need IE6 support */
+  height: 100%;
+  margin: 0 auto -50px; /* the bottom margin is the negative value of the 
footer's height */
+}
+.footer, .push {
+  height: 50px; /* .push must be the same height as .footer */
+}
+
+h1 {
+  font-size: 2em;
+  margin: 0.4em;
+}
 
-/*
-layout.css -- css stylesheet used on www.gnu.org
+h2 {
+  font-size: 1.2em;
+  margin: 1.2em 0px;
+}
 
-Copyright (C) 2006, 2007, 2008, 2009 Free Software Foundation
+a {
+  color: #c73a6c;
+  text-decoration: underline;
+}
 
-Permission is hereby granted, free of charge, to any person
-obtaining a copy of this software and associated documentation
-files (the "Software"), to deal in the Software without
-restriction, including without limitation the rights to use,
-copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the
-Software is furnished to do so, subject to the following
-conditions:
+a:hover {
+  color: white;
+  background-color: #973066;
+  text-decoration: none;
+}
 
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-*/
+tt, code {
+  background-color: rgb(238, 238, 238);
+  border: 1px solid rgb(187, 187, 187);
+  padding: 0px 6px;
+  border-radius: 4px;
+}
 
-html, body{
-        padding: 0;
-        color: #35382a;
-        max-width: 58em; margin: 0 auto 0; position: relative; min-width: 
902px;
-        padding-left: 10px; padding-right: 10px;
-        background-color: #fff;  padding-bottom: 1.8em;  margin-top: 0.5em; 
+p {
+  margin-bottom: 2em;
 }
 
-body{
-    font-family: sans-serif;
+p.centered {
+  text-align: center;
+  margin: 3em 0;
 }
 
-a:hover{ color: red; }
+.button {
+  border: 2px solid;
+  padding: 10px;
+  border-radius: 10px;
+  text-decoration: none;
+  font-weight: bold;
+  font-size: 1.2em;
+}
 
-h1 {
- background-color: #3465a4; color: white; font-size: 2em;
- margin-bottom: 0.3em; font-weight:bold; text-align: center; line-height: 
1.6em; }
+.container {
+  padding: 80px 20px;
+  width: 960px;
+  margin: 0 auto;
+}
 
-h2, h3, {line-height: 1.5em;}
+.header {
+  color: white;
+  text-align: center;
+  background-color: #bb3955;
+  background:  #bb3955 linear-gradient(135deg, #c73a6c, #bb3955, #973066) 
repeat scroll 0% 0%;
+  border-bottom: 6px solid #691240;
+}
+
+.header p {
+  margin: 0;
+}
+
+.header a {
+  color: rgb(240, 255, 135);
+  text-decoration: none;
+}
+
+.header a:hover {
+  color: rgb(240, 255, 135);
+  text-decoration: underline;
+  background: transparent;
+}
+
+.header.small {
+  text-align: left;
+  border-width: 3px;
+}
+
+.header.small h1 {
+  display: inline;
+  font-size: 1.5em;
+  margin: 0;
+  background: url(images/elpa-small.png) center left no-repeat;
+  padding: 10px;
+  padding-left: 120px;
+}
+
+.header.small .container {
+  padding: 20px;
+}
 
-h2{ font-size: 1.6em; }
+input[type="search"] {
+  border: 3px solid #ddd;
+  padding: 10px;
+  width: 100%;
+  font-size: 1.1em;
+  background: #fcfcfc;
+}
 
-h3{ font-size: 1.3em; }
+input[type="search"]:focus {
+  border-color: #bbb;
+  background: #fafafa;
+}
 
-img{ border: 0; }
+input[type="search"][placeholder] {
+  color: #666;
+}
 
-.nocenter{ text-align: left; }
+.filter-table .quick { margin-left: 0.5em; font-size: 0.8em; text-decoration: 
none; }
+.fitler-table .quick:hover { text-decoration: underline; }
+td.alt { background-color: #ffc; background-color: rgba(255, 255, 0, 0.2); }
 
-ul { list-style: square; margin-left: 1.4em; list-style-image:url(bullet.gif); 
 }
+td, th {
+  padding: 6px;
+}
 
-ol{ list-style: decimal; margin-left: 1.9em; }
+th {
+  text-align: left;
+  border-bottom: 2px solid #ddd;
+  background: #fafafa;
+  font-weight: bold;
+}
 
-li, dd,  p{
-    padding-bottom: 1em; line-height: 1.5em; }
+td {
+  border-bottom: 1px solid #ddd;
+}
 
-dt{ font-weight: bold;  }
+.footer {
+  border-top: 1px solid #999;
+  text-align:center;
+  font-size: 0.9em;
+  background-color: #eee;
+  color: #666;
+}
 
-pre {
-padding-left: 1.5em;
-padding-right: 1.5em;
-margin-top: 1em;
-margin-bottom: 1em;
-font-size: 0.9em;
-display: block;
-background-color: #eeeeee;
-color: #000000;
-font-family: monospace;
+.footer .container {
+  padding: 5px;
 }
 
-strong, b{ font-weight: bold; }
+.footer p {
+  margin: 5px;
+  font-size: .8em;
+}
 
-em, i, var{ font-style: italic; }
+@media screen and (max-width: 999px) {
+  .container {
+    width: 600px;
+  }
+}
 
-blockquote{ margin: 1em; font-style: italic; }
+@media screen and (max-width: 639px) {
+  body {
+    font-size: 1em;
+  }
 
-code, kbd, samp, tt{ font-family: monospace; }
+  table {
+    width: 100%;
+  }
+  
+  .container {
+    width: 90%;
+    padding: 40px 5%;
+  }
 
-.center{ text-align:center; }
+  h1 {
+    font-size: 1.4em;
+  }
 
-.big{ font-size: 130%; padding-top: 0.7em; }
+  .header img {
+    width: 300px;
+  }
 
-.inline-list li { display: inline }
+  td:last-child, th:last-child {
+    display: none;
+  }
+}
 
-.highlight{background-color: #ff6;}
+@media screen and (max-width: 439px) {
 
-h2 a{color: yellow !important;}
+  .header img {
+    width: 250px;
+  }
+  
+  h1 {
+    font-size: 1.2em;
+  }
+}
reply via email to
[Prev in Thread] Current Thread [Next in Thread]