From 6531104224eb368dcbda30e59350e3ff5e2667bb Mon Sep 17 00:00:00 2001
From: Dirk Wilden <dirk.wilden@device-insight.com>
Date: Fri, 4 Feb 2022 08:25:20 +0100
Subject: [PATCH] allow mounting changed themes into docker container

---
 .dockerignore                |   3 ++-
 .gitignore                   |   1 +
 README.md                    |   9 ++++++++-
 dist/{ => theme}/favicon.png | Bin
 dist/theme/theme.css         |   6 ++++++
 dist/{ => theme}/theme.png   | Bin
 src/ui/index.html            |   3 ++-
 src/ui/styles.scss           |   2 +-
 src/ui/ui.tsx                |   2 +-
 9 files changed, 21 insertions(+), 5 deletions(-)
 rename dist/{ => theme}/favicon.png (100%)
 create mode 100644 dist/theme/theme.css
 rename dist/{ => theme}/theme.png (100%)

diff --git a/.dockerignore b/.dockerignore
index 899586c..66266e4 100644
--- a/.dockerignore
+++ b/.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
diff --git a/.gitignore b/.gitignore
index 6b2cc1d..b2ef66a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,3 +5,4 @@
 /dist/*.html
 /node_modules/
 !/dist/*.min.js
+.idea/
diff --git a/README.md b/README.md
index 711074d..87eb6d7 100644
--- a/README.md
+++ b/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
 
diff --git a/dist/favicon.png b/dist/theme/favicon.png
similarity index 100%
rename from dist/favicon.png
rename to dist/theme/favicon.png
diff --git a/dist/theme/theme.css b/dist/theme/theme.css
new file mode 100644
index 0000000..fca0a06
--- /dev/null
+++ b/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;*/
+/*}*/
diff --git a/dist/theme.png b/dist/theme/theme.png
similarity index 100%
rename from dist/theme.png
rename to dist/theme/theme.png
diff --git a/src/ui/index.html b/src/ui/index.html
index d0a0f93..e1da6c6 100644
--- a/src/ui/index.html
+++ b/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>
diff --git a/src/ui/styles.scss b/src/ui/styles.scss
index f24cdde..0553c62 100644
--- a/src/ui/styles.scss
+++ b/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;
diff --git a/src/ui/ui.tsx b/src/ui/ui.tsx
index d7fadbb..8ff5f91 100644
--- a/src/ui/ui.tsx
+++ b/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>
 );