CSS in .env file not working?

jzohrab / lute

DEPRECATED: LUTE (Learning Using Texts) is a self-hosted web app for learning language through reading, based on Learning with Texts (LWT)

The Unlicense

118 stars 10 forks source link

CSS in .env file not working? #31

Closed jzohrab closed 1 year ago

jzohrab commented 1 year ago

Both YeYueMX and King-Awgwa have reported this. I thought it was working, but maybe not!

jzohrab commented 1 year ago

This works for me in a non-docker environment.

.env file section:

CUSTOM_STYLES="
  span.textitem { font-size: 30px; }
"

The rendered page (source) has the following:

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Reading "La casa de los espíritus"</title>
...
    <link rel="stylesheet" type="text/css" href="/css/styles.css">
    <style>
      /* Overrides specified in .env CUSTOM_STYLES. */

  span.textitem { font-size: 30px; }

    </style>
...
</head>

and the page renders ok:

Checking docker now.

jzohrab commented 1 year ago

Docker config looks a bit off, but I'm not sure.

With the .env file like this:

CUSTOM_STYLES="
  span.textitem { font-size: 30px; }
"

docker compose config shows this for the environment variables:

    environment:
      APP_ENV: prod
...
      BACKUP_WARN: "no"
      CUSTOM_STYLES: |2

          span.textitem { font-size: 30px; }
      DATABASE_URL: sqlite:///%kernel.project_dir%/data/test_lute.db
      DB_FILENAME: '%kernel.project_dir%/data/test_lute.db'

That CUSTOM_STYLES: |2 looks strange.

And then the page when rendered just has this in the html head:

<style>
      /* Overrides specified in .env CUSTOM_STYLES. */

    </style>

jzohrab commented 1 year ago

Changing the .env file so that the style is all in one line (CUSTOM_STYLES="span.textitem { font-size: 30px; }") makes the docker compose config look better ( CUSTOM_STYLES: 'span.textitem { font-size: 30px; }'), but the html element is still empty.

jzohrab commented 1 year ago

Twig not reading the environment vars, even though they appear to be present. Editing the base.html:

    <h1>HELLO THERE</h1>
    <h1>{{ app.request.server.get('DATABASE_URL') }}</h1>

Only the HELLO THERE showed up.

jzohrab commented 1 year ago

Fixed in develop branch, commit 4e8172d9909e7de3585f6d350733e92b384f720d

jzohrab commented 1 year ago

This still needs some work. The solution implemented works well if you have the CUSTOM_STYLES key in your '.env' file, but throws an error if you don't. This would be annoying for existing users upgrading their Lute instance.

I could release it now with a note, but I'd rather sort out a better way to do it. I don't want upgrades to be rocky, sets a bad example and could be a real annoyance. I know I personally would find it annoying :-) so I'll see if I can come up with a better solution for it.

A few possibilities, each with non-trivial work:

move the "custom styles" back to a styles-override.css folder, and mount that folder into the docker container. That might be the easiest in some ways, but then the code for non-docker uses would have to do ... something.
come up with a way to have the custom styles env var be a blank string if not present. Maybe using something like https://symfony.com/doc/current/configuration/env_var_processors.html#custom-environment-variable-processors, though that is lacking some documentation.
store the css in the database :-) and add a UI for people to edit it. This seems like overkill.

jzohrab commented 1 year ago

Changed back to css in separate file, this time in the /data folder. Documentation in the wiki, https://github.com/jzohrab/lute/wiki/Customizing-Styles. The whole data folder is mounted in Docker, so when the file is changed, any running container immediately sees the change.