CSH ThemeSwitcher

A service that allows the user to preview and select a bootstrap theme which can then be pulled to other services via an api to allow a continuous, user customised experience across various CSH services.

Themeswitcher uses node and express to serve the static site and preform api routing, OIDC for authentication, AngularJS for a responsive frontend, and bootstrap for styling.

API

https://themeswitcher.csh.rit.edu/api/get Redirects to the currently logged in member's theme.

https://themeswitcher.csh.rit.edu/api/colour Returns the theme's primary colour, e.g. #ffffff

Implement as:

<link rel="stylesheet" href="https://themeswitcher.csh.rit.edu/api/get" media="screen">

Contributing

Pull Requests

To contribute to themeswitcher, please fork this repository and submit a pull request. If it is a significant change (more than a couple lines) please create a new branch. Excluding ReadMe changes, pull requests to site will not be accepted.

Environment Variables

Create a .env file in the root directory using the following template. Contact an RTP to get the necessary secrets.

CLIENT_ID=themeswitcher
CLIENT_SECRET=
DEFAULT_CSS=csh-bootstrap-bootstrap
EXPRESS_SESSION_SECRET=
PORT=8080
HOST=http://localhost:8080
DB_URI=mongodb://themes:2cvtwcdye837nscp38@mongodb-theme:27017/themes?authSource=admin

For local development, the DB_URI is already populated with the URI to use the mongo image created in the docker compose. If you know what you're doing you can host and use your own DB, but why would you do that when there's one right here?

Viewing Local Database

If you're developing locally, viewing the database contents for debugging can be achieved using the following commands:

1. Authenticate into the database

 docker exec -it mongodb-theme mongosh -u themes -p <yourpasswordhere> --authenticationDatabase admin

2. Select the themes table

use themes

3. view the members collection and return JSON data

 db.members.find().pretty()

Issues

As themeswitcher is hosted on GitHub, it uses GitHub's issue tracker to document issues. Please open any issues there.

Adding Themes

Themes are stored in /pub/data/themes.json in the style of

  {
    "name": "Material",
    "shortName": "csh-material-bootstrap",
    "cdn": "https://s3.csh.rit.edu/csh-material-bootstrap/4.0.0/dist/csh-material-bootstrap.min.css",
    "colour": "b0197e"
  },

If you'd like to add a theme, add it to themes.json in the same pattern, detailed below.

• name: The string to display in the selector. This is how your theme is identified to users.
• shortName: A string to identify your theme to the api. Cannot include spaces.
• cdn: The url to the minified stylesheet.
• colour: The primary colour of the theme.

All themes should be bootstrap ~>4.1.2