Coder Social home page Coder Social logo

traefik-themepark's Introduction

theme.park Traefik Plugin

Apply themes from theme.park to supported applications.

All credit for design and styling to the various contributors to https://github.com/GilbN/theme.park!

Features

Here is a list of features: (current [x], planned [ ], and potential ?)

  • Support for all supported themes and apps in theme.park
  • Supports service side compression:
    • gzip - gzip
    • deflate - zlib
    • ? br - brotli (currently unsupported in Yaegi for Traefik plugins)
  • Limits the HTTP queries which are touched by plugin to improve performance
  • Updates requests to limit requests' Accept-Encoding to include only supported systems

Configuration

Static

pilot:
  token: "xxxx"

experimental:
    plugins:
        themepark:
            moduleName: "github.com/packruler/traefik-themepark"
            version: "v1.2.2"

Dynamic

To configure the theme.park plugin you should create a middleware in your dynamic configuration as explained here. The following example creates and uses the themepark middleware plugin to replace all foo occurences by bar in the HTTP response body.

The app and theme values passed to the plugin should match the <style> tag provided in the Installation section. The example below would match Installation section having the following <style> tag.

<link rel="stylesheet" type="text/css" href="https://theme-park.dev/css/base/sonarr/dark.css">

http:
  routers:
    my-router:
      rule: "Host(`localhost`)"
      middlewares:
        - "sonarr-dark"
      service: "my-service"

  middlewares:
    sonarr-dark:
      plugin:
        themepark:
          # The name of the supported application listed on https://docs.theme-park.dev/themes.
          app: sonarr

          # The name of the supported theme listed on https://docs.theme-park.dev/theme-options/ or https://docs.theme-park.dev/community-themes/
          theme: dark

          # baseUrl is optional if you want to use a self-hosted version of theme.park
          baseUrl: https://theme-park.domain.tld

          # This currently only supports '4k-logo' and 'darker' addons. Future addons that follow a similar syntax will work as well.
          # For refernce: https://docs.theme-park.dev/themes/addons/
          addons:
            - sonarr-4k-logo
    radarr-theme:
      plugin:
        themepark:
          # The name of the supported application listed on https://docs.theme-park.dev/themes.
          app: radarr

          # If using the 'darker' addon the theme MUST be excluded or set to 'base'
          theme: base

          # Multiple addons can be included at the same time
          addons:
            - radarr-darker
            - radarr-4k-logo

  services:
    my-service:
      loadBalancer:
        servers:
          - url: "http://127.0.0.1"

How Does This Work?

This is an extension of the rewrite-body plugin I created based on Traefik's plugin-rewritebody to add support for compressed content.

That said, this plugin is more focused on theme.park support and allows more targetted middleware logic. This means the overhead added by the plugin's logic is very limited. You can read more about that in the process section.

Process

Supported Requests

For any updates to be attempted the following conditions must be met by the incoming request:

  • Accept header must include text/html
  • HTTP Method must be GET

These conditions are intended to drastically limit the HTTP queries that are touched by this plugin. At this time these conditions properly cover all tested applications.

Supported Responses

Assuming Supported Request conditions have been met, the following conditions must be met by the resulting response:

  • Content-Type must be text/html
  • Content-Encoding must be a support compression (gzip, deflate, or identity)

traefik-themepark's People

Contributors

darkfella91 avatar packruler avatar saltydk avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

traefik-themepark's Issues

[Traefik Plugin Catalog] Plugin Analyzer has detected a problem.

The plugin was not imported into Traefik Plugin Catalog.

Cause:

failed to get the latest tag: missing tag/version

Traefik Plugin Analyzer will restart when you will close this issue.

If you believe there is a problem with the Analyzer or this issue is the result of a false positive, please contact us.

Feature: Support for Theme Addons

Is your feature request related to a problem? Please describe.
Request to add support for the Theme Addons https://docs.theme-park.dev/themes/addons/

Describe the solution you'd like
Additional yaml entry for addons:

Describe alternatives you've considered
N/A

Additional context
Add any other context or screenshots about the feature request here.

[Traefik Plugin Catalog] Plugin Analyzer has detected a problem.

The plugin was not imported into Traefik Plugin Catalog.

Cause:

failed to create temp GOPATH: mkdir /tmp/traefik-plugin-gop4104546181: read-only file system

Traefik Plugin Analyzer will restart when you will close this issue.

If you believe there is a problem with the Analyzer or this issue is the result of a false positive, please contact us.

Improve Safari address bar thumbing

Is your feature request related to a problem? Please describe.
In Safari the address bar is not being themed according to the theme.park theme. I.e. it's orange in Prowlarr

Describe the solution you'd like
Unsure of what's the best approach to do this, it might be needed to overwrite or remove <meta name="theme-color" content="....">

More info: https://css-tricks.com/meta-theme-color-and-trickery/

Additional context

Screenshot 2022-10-21 at 18 59 32

EDIT
If not possible to pull the proper color from the css layers, I'd be happy to have a field where I could send the color value I want to see in the address bar.

Multiples arr instances

Possible to add support for multiples arr docker instances like hostname:radarr and hostname:radarr4k or sonarr and sonarr4k?

thanks

Readarr alternate logo

It looks like the something is messing with the path for the readarr alt-logo. I can't track it down myself but it appears the web request is asking for readarr-readarr-* instead of just readarr-*.

Config in docker-compose is ' - traefik.http.middlewares.readarr-audiobook-nord.plugin.themepark.addons=readarr-alt-logo
'
Plugin Version: 1.3.1

Jellyfin should be included in the list of body base applications

Describe the bug
The Jellyfin application should be included in the list of body based application, as it loads its own styles from the body.

Relevant Config
Workaround is to add the following to configure the middleware for Jellyfin:
traefik.http.middlewares.jellyfin-themepark.plugin.traefik-themepark.target=</body>

Expected behavior
The style link to be added in the body.

Actual behavior
The style link is added in the head.

Server (please complete the following information):

  • OS: Docker on Raspberry Pi 4
  • Traefik Version 2.9.6
  • Plugin Version 1.2.2

Themes not applying properly for some apps like Sonarr

Describe the bug
Themes don't apply to all parts of the WebUI for certain apps like Sonarr

Relevant Config
Any specific information about regex used. Specific information about
HTTP query would be appreciated as well!

Expected behavior
The navigation bars on the left and top side of the WebUI should be properly themed but they are using the original Dark theme of sonarr instead, only the middle part of the web ui get the theme applied to.

Actual behavior
It has to do something with subfiltering applying to the head tag instead of the body tag, as far as i understood.

Logs
Any logs from your Treafik logs would be greatly appreciated!!

You can add the following to your Traefik config:

log:
  level: DEBUG

Then look for logs that end with:

module=github.com/packruler/rewrite-body plugin=plugin-rewritebody

Server (please complete the following information):

  • OS: TrueNAS Scale 23.10.2
  • Traefik Version 2.11.0
  • Plugin Version 1.3.1

Additional context
Add any other context about the problem here.

Fix VueTorrent and other </body> based matching apps

Describe the bug
VueTorrent will not work on initial load but will work on a hard refresh.

Relevant Config
TrueNAS Scale instance

Current HTML result

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="mobile-web-app-capable" content="yes"><meta name="viewport" content="width=device-width,initial-scale=1"><!--[if IE]><link rel="icon" type="image/png" href="./favicon.ico?s=1"><![endif]--><link rel="icon" href="./icons/favicon.svg" sizes="any" type="image/svg+xml"><title>qBittorrent</title><meta name="description" content="The sleekest looking WEBUI for qBittorrent made with Vuejs!"><meta property="og:image" content="./icons/android-chrome-maskable-512x512.png?s=22"><meta property="og:description" content="torrent universal server for remote download."><meta property="og:title" content="WELCOME :: VUE TORRENT"><script defer="defer" src="js/chunk-vendors.a5b83856.js"></script><script defer="defer" src="js/app.75207d8a.js"></script><link href="css/chunk-vendors.7301e792.css" rel="stylesheet"><link href="css/app.759eceb8.css" rel="stylesheet"><link rel="icon" type="image/svg+xml" href="img/icons/favicon.svg"><link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png?s=22"><link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png?s=22"><link rel="manifest" href="manifest.json"><meta name="theme-color" content="#597566"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="default"><meta name="apple-mobile-web-app-title" content="VueTorrent"><link rel="apple-touch-icon" href="./icons/apple-touch-icon.png?s=22"><link rel="mask-icon" href="./icons/safari-pinned-tab.svg?s=22" color="#597566"><meta name="msapplication-TileImage" content="img/icons/msapplication-icon-144x144.png"><meta name="msapplication-TileColor" content="#000000"></head><body><noscript><strong>We're sorry but VueTorrent doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

Add CSP header handling

Is your feature request related to a problem? Please describe.
qBitorrent and other apps use CSP headers that block loading the CSS styles

Describe the solution you'd like
The system should automatically update CSP headers to allow

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.