allow mounting changed themes into docker container

.dockerignore

@@ -7,7 +7,8 @@
 !config-example.yaml
 !dist/mark.min.js
 !dist/*.min.js
-!dist/*.png
+!dist/theme/*.png
+!dist/theme/*.css
 !Makefile
 !package-lock.json
 !package.json

.gitignore

@@ -5,3 +5,4 @@
 /dist/*.html
 /node_modules/
 !/dist/*.min.js
+.idea/

README.md

@@ -36,7 +36,14 @@ The full list of supported data sources:
 ### Using Docker
 
 1. Download and customize [`config.yaml`](https://github.com/duolingo/metasearch/raw/master/config.yaml)
-1. In the local directory that contains `config.yaml`, run `docker run -p 3000:3000 -v "$PWD:/data" duolingo/metasearch`
+2. In the local directory that contains `config.yaml`, run `docker run -p 3000:3000 -v "$PWD:/data" duolingo/metasearch`
+
+#### Theming
+
+1. In order to customize the theme, place the [`theme`](https://github.com/duolingo/metasearch/tree/master/dist/theme)
+directory in a local folder
+2. Customize the contents of the theme folder
+3. mount the `theme` folder in the docker container: `docker run -p 3000:3000 -v "$PWD:/code/dist/theme" ...`
 
 ### Using Git, Make, and Node.js
 

dist/theme/theme.css

@@ -0,0 +1,6 @@
+/* apply style customizations in this file */
+/* */
+/* e.g. to change the primary text color: */
+/*:root {*/
+/*	--primary-text-color: red;*/
+/*}*/

src/ui/index.html

@@ -16,8 +16,9 @@
       gtag("config", "<%= metasearch.TRACKING_ID %>");
     </script>
     <% } %>
-    <link href="/favicon.png" rel="shortcut icon" type="image/x-icon" />
+    <link href="/theme/favicon.png" rel="shortcut icon" type="image/x-icon" />
     <link rel="stylesheet" type="text/css" href="/styles.css" />
+    <link rel="stylesheet" type="text/css" href="/theme/theme.css" />
     <script src="/mark.min.js" type="text/javascript"></script>
     <script src="/react.production.min.js" type="text/javascript"></script>
     <script src="/react-dom.production.min.js" type="text/javascript"></script>

src/ui/styles.scss

@@ -157,7 +157,7 @@ mark {
 }
 
 .submit {
-  background: url(/favicon.png) no-repeat 10px center;
+  background: url(/theme/favicon.png) no-repeat 10px center;
   background-size: 20px;
   border: 2px solid var(--border-color);
   border-left: 0;

src/ui/ui.tsx

@@ -90,7 +90,7 @@ const Settings = ({
         )
       : null}
     <a href="javascript:;" onClick={onToggleTheme} title="Toggle dark theme">
-      <img src="/theme.png" />
+      <img src="/theme/theme.png" />
     </a>
   </div>
 );