From 26e8981ebe893784e3559b164edad48832ae500a Mon Sep 17 00:00:00 2001 From: Ieuan Jenkins Date: Tue, 24 Jun 2025 09:48:53 +0100 Subject: [PATCH 1/8] Add docker configuration files Similar to cc/search repo --- config/site.conf | 38 ++++++++++++++++++++++++++++++++++++++ dev/node/Dockerfile | 6 ++++++ dev/web/Dockerfile | 19 +++++++++++++++++++ docker-compose.yml | 39 +++++++++++++++++++++++++++++++++++++++ 4 files changed, 102 insertions(+) create mode 100644 config/site.conf create mode 100644 dev/node/Dockerfile create mode 100644 dev/web/Dockerfile create mode 100644 docker-compose.yml diff --git a/config/site.conf b/config/site.conf new file mode 100644 index 00000000..e468ef07 --- /dev/null +++ b/config/site.conf @@ -0,0 +1,38 @@ + + RewriteEngine On + + # Set conservative/secure defaults + + AllowOverride None + DirectoryIndex index.html + Options -Indexes + + # Git + + Require all denied + + # Subversion + + Require all denied + + # Deny access to accidental uploads of macOS-specific directories and files + # .DS_Store + + Require all denied + + # resource forks + + Require all denied + + + DocumentRoot /usr/local/apache2/htdocs + + # Also serve HTML files without .html extension + RewriteCond %{REQUEST_FILENAME}.html -f + RewriteRule !.*\.html$ %{REQUEST_FILENAME}.html [L] + + + ErrorDocument 404 /404.html + + +# vim: ft=apache ts=4 sw=4 sts=4 sr noet diff --git a/dev/node/Dockerfile b/dev/node/Dockerfile new file mode 100644 index 00000000..06c29e81 --- /dev/null +++ b/dev/node/Dockerfile @@ -0,0 +1,6 @@ +# https://docs.docker.com/engine/reference/builder/ + +# https://hub.docker.com/_/node +FROM node:bookworm-slim + +RUN npm install --global prettier diff --git a/dev/web/Dockerfile b/dev/web/Dockerfile new file mode 100644 index 00000000..89c79dfb --- /dev/null +++ b/dev/web/Dockerfile @@ -0,0 +1,19 @@ +# https://docs.docker.com/engine/reference/builder/ + +# https://hub.docker.com/_/httpd +FROM httpd:2.4 + +# Update Apache2 configuration + +# Set ServerName to prevent warning +RUN sed -e's/^#ServerName.*/ServerName static/' -i'' \ + /usr/local/apache2/conf/httpd.conf + +# Enable mod_rewrite +# https://httpd.apache.org/docs/2.4/mod/mod_rewrite.html +RUN sed -e's/^#LoadModule rewrite/LoadModule rewrite/' -i'' \ + /usr/local/apache2/conf/httpd.conf + +# Include site configuration +RUN echo 'Include conf/config/site.conf' \ + | tee -a /usr/local/apache2/conf/httpd.conf diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 00000000..1dbfa392 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,39 @@ +name: chooser +services: + web: + build: + context: . + dockerfile: dev/web/Dockerfile + # Use Bash instad of sh (Dash) for improved signal handling + command: /bin/bash -c " + echo 'Starting static webserver at http://127.0.0.1:8080/'; + /usr/local/bin/httpd-foreground + " + container_name: cc-chooser-web + ports: + - "8080:80" + restart: on-failure + volumes: + # Mount site configuration directory + - "./config:/usr/local/apache2/conf/config:ro" + # Mount website directory + - "./src:/usr/local/apache2/htdocs:ro" + + node: + build: + context: . + dockerfile: dev/node/Dockerfile + # Continue running until shutdown (this allows docker compose exec which is + # much faster than docker compose run) + # Thank you: https://serverfault.com/a/1084975 + command: /bin/sh -c " + trap 'exit' TERM; + echo 'Run the following command to format files with Prettier:'; + echo ' docker compose exec node prettier --write src/'; + while true; do sleep 1; done + " + container_name: cc-chooser-node + volumes: + # Mount repository to working directory + - "./:/opt" + working_dir: /opt From 7335757735d5caefa71cee1ed139a4974746282d Mon Sep 17 00:00:00 2001 From: Ieuan Jenkins Date: Tue, 24 Jun 2025 09:49:40 +0100 Subject: [PATCH 2/8] Add prettier configuration to match search repo Ignore vocabulary directory from upstream --- .prettierignore | 4 ++++ .prettierrc.yaml | 8 ++++++++ 2 files changed, 12 insertions(+) create mode 100644 .prettierignore create mode 100644 .prettierrc.yaml diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..d42a10c5 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,4 @@ +# https://prettier.io/docs/en/ignore.html + +# Ignore Vocabulary files (formatting handled upstream) +src/vocabulary/ diff --git a/.prettierrc.yaml b/.prettierrc.yaml new file mode 100644 index 00000000..8637e4ec --- /dev/null +++ b/.prettierrc.yaml @@ -0,0 +1,8 @@ +# https://prettier.io/docs/en/options.html#print-width +printWidth: 79 + +# https://prettier.io/docs/en/options.html#bracket-line +bracketSameLine: true + +# https://prettier.io/docs/en/options.html#single-attribute-per-line +singleAttributePerLine: true From be52872233ae0e873cd0cc88b5d53ba23dd5a646 Mon Sep 17 00:00:00 2001 From: Ieuan Jenkins Date: Tue, 24 Jun 2025 09:55:49 +0100 Subject: [PATCH 3/8] Update README with docker-compose details --- README.md | 48 +++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 39 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index ac1c123b..1be45e92 100644 --- a/README.md +++ b/README.md @@ -54,22 +54,52 @@ Once changes are implemented here, they need to be updated within the `/chooser` Final production changes are deployed within vocabulary-theme Releases, updated within [`index-dev-env`][index-dev-env], and finally deployed to `index__stage` and then `index__prod` environments; going LIVE at `https://creativecommons.org/chooser`. -## Setup -1. open the `src/index.html` file within a browser to view the Chooser. +### Setting up the Project -[cc-legal-tools-app]: https://github.com/creativecommons/cc-legal-tools-app -[cc-legal-tools-data]: https://github.com/creativecommons/cc-legal-tools-data -[index-dev-env]: https://github.com/creativecommons/index-dev-env -[index-prototype]: https://github.com/creativecommons/index-prototype -[vocabulary]: https://github.com/creativecommons/vocabulary -[vocabulary-theme]: https://github.com/creativecommons/vocabulary-theme +For information on learning and installing the prerequisite technologies for this project, please see [Foundational technologies — Creative Commons Open Source][found-tech]. +[found-tech]: https://opensource.creativecommons.org/contributing-code/foundational-tech/ + +### Docker Compose Setup + +Use the following instructions to start the Project with docker compose. + +1. Navigate to the creativecommons/chooser Project that you have cloned +2. **Run the containers** + + ```shell + docker compose up + ``` + +3. After running the above command, Docker will use the `docker-compose.yml` file and Build a local environment for you +4. Navigate to http://localhost:8080 in your browser and the app would be running. +5. **stop the containers** + + To stop the app from running, simply open an another instance of terminal and type: + + ```shell + docker compose down + ``` + + or + + You can simply revisit the existing terminal which is running the container + and type `CTRL + C` + + +### Format with Prettier + +Run the following command to format files with Prettier: + +```shell +docker compose exec node prettier --write src/ +``` ## Structure The initial markup is rendered via the `index.html` file. Visual display is derived from the `style.css` rules. Styles extend from `src/vocabulary`. -On initlialization the `scripts.js` functions set the correct fieldsets to default display; based on user provided actions through the stepper fieldsets will display or hide, exposing the relevant pathways to getting a `tool` recommendation. Correct pathways are located within the `rawStatePathRoutes` array. When a correct pathway matches the current `state`, the appropriate `tool` is matched and recommended, if the current state is not a known pathway the `tool` is set to `unknown` until the required input is given. +On initialization the `scripts.js` functions set the correct fieldsets to default display; based on user provided actions through the stepper fieldsets will display or hide, exposing the relevant pathways to getting a `tool` recommendation. Correct pathways are located within the `rawStatePathRoutes` array. When a correct pathway matches the current `state`, the appropriate `tool` is matched and recommended, if the current state is not a known pathway the `tool` is set to `unknown` until the required input is given. The main `tool` recommendation content is pulled via the appropriate `