Update JS deps, move to algolia v3, move to plausible analytics, add frontend build system

Author: Seldaek

.gitignore

@@ -1,8 +1,11 @@
+/.parcel-cache/
+/node_modules/
 /composer-src/
 /web/composer.phar
 /web/composer.phar.sig
 /web/version
 /web/versions
+/web/build/*.map
 /bin/
 
 ###> symfony/framework-bundle ###

README.md

@@ -7,3 +7,11 @@ change a file in the doc directory. Documentation sources can be browsed
 at https://github.com/composer/composer/tree/main/doc
 
 Documentation is then automatically generated on getcomposer.org
+
+## JS / CSS
+
+To change JS and CSS, make sure you run `npm install` first and then use
+`npm run dev` or `npm run build` to build new assets from the sources.
+
+The output of build should be committed to be deployed, but please do not commit
+it if you are sending a pull request.

web/css/style.css renamed to css/style.css

@@ -3,7 +3,7 @@
  */
 
 article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
-audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio, canvas, video { display: inline-block; }
 audio:not([controls]) { display: none; }
 [hidden] { display: none; }
 
@@ -42,10 +42,9 @@ figure { margin: 0; }
 form { margin: 0; }
 fieldset { border: 0; margin: 0; padding: 0; }
 label { cursor: pointer; }
-legend { border: 0; *margin-left: -7px; padding: 0; }
-button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
-button, input { line-height: normal; *overflow: visible; }
-table button, table input { *overflow: auto; }
+legend { border: 0; padding: 0; }
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; }
+button, input { line-height: normal; }
 button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
 input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
 input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
@@ -134,8 +133,6 @@ h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor {
   display: inline-block;
   width: 200px;
   border: 1px solid #ccc;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
   border-radius: 4px;
   padding: 10px;
   margin: 10px;
@@ -151,8 +148,6 @@ h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor {
 blockquote {
   background: #ddf;
   border: 1px solid #ddf;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
   border-radius: 4px;
   margin: 0 20px;
   padding: 10px;
@@ -175,8 +170,6 @@ blockquote p {
 
 code:not([class*="language-"]) {
   border: 1px solid #ccc;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
   border-radius: 3px;
   padding: 0px 4px;
   display: inline-block;
@@ -211,7 +204,7 @@ li .tagline {
 }
 
 .fork-and-edit {
-  background: url("../img/github.gif") no-repeat scroll 0 0 transparent;
+  background: url("../web/img/github.gif") no-repeat scroll 0 0 transparent;
   font-style: italic;
   height: 40px;
   margin: 40px auto 0;
@@ -238,27 +231,7 @@ th, td {
 }
 
 #searchbar {
-  text-align: right;
-}
-
-input#docsearch {
-  width: 260px;
-  padding: 4px 4px 2px 4px;
-  box-shadow: 0px 5px 6px -2px #fafafa;
-  border-radius: 3px;
-  border: 1px solid #dedede;
-  padding: 0.4em 0.8em;
-  background-color: #fbfbff;
-  transition: all 0.2s ease;
-}
-
-input#docsearch:focus {
-  box-shadow: 0px 5px 6px -2px #e6e6e6;
-  border-color: #b4b4b4;
-}
-
-.ds-dropdown-menu {
-  width: 600px;
+  float: right;
 }
 
 h1 .latest {

js/app.js

@@ -0,0 +1,59 @@
+import docsearch from '@docsearch/js';
+import Plausible from 'plausible-tracker'
+import '@docsearch/css';
+import 'prismjs/themes/prism.css';
+import '../css/style.css';
+import 'prismjs';
+import 'prismjs/components/prism-markup-templating';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-json';
+import 'prismjs/components/prism-json5';
+import 'prismjs/components/prism-javascript';
+
+function processQuery(query) {
+    var parts = query.split(' ');
+
+    parts = parts.map(function (part, index) {
+        var word = part.trim();
+
+        // quote --foo args so they are not parsed as negations but rather return actual results
+        if (word.length >= 2 && word[0] === '-' && word[1] === '-') {
+            word = '"' + word + (index === parts.length - 1 ? '' : '"');
+        }
+        // quote -x args
+        if (word.length == 2 && word[0] === '-') {
+            word = '"' + word + (index === parts.length - 1 ? '' : '"');
+        }
+
+        return word;
+    });
+
+    return parts.join(' ');
+}
+
+if (document.getElementById('docsearch')) {
+    docsearch({
+        container: '#docsearch',
+        appId: 'DLYN25JSFJ',
+        indexName: 'getcomposer',
+        apiKey: '59b32c5fdb7d9198939d01eebcc4ecab',
+        transformSearchClient: (searchClient) => {
+          return {
+            ...searchClient,
+            search: (spec) => {
+                let f = spec[0].query;
+                spec[0].query = processQuery(spec[0].query);
+
+                return searchClient.search(spec);
+            }
+          };
+        },
+    });
+}
+
+const plausible = Plausible({
+  domain: 'getcomposer.org',
+  apiHost: 'https://getcomposer.org',
+});
+plausible.trackPageview();