feat(assets): Adds component page and Tailwind support to CL

[leohentschker]

TLDR: Adds tailwind support to CourtListener

1. Adds a new target to the Dockerfile that enables building CSS
2. Adds the django-tailwind and django_browser_reload (in dev only) extensions
3. Adds in a private component page to preview contents
   

[leohentschker]

FYI @ERosendo -- draft PR here, I'll work through the CI failures and get things working!

[ERosendo]

We need to remove these lines. In #3134, we moved from a multi stage dockefile to a single image containing a helper script (docker-entrypoint.sh) that can be used to launch the different processes depending for different types of containers.

[ERosendo]

We can remove the target field. The combination of the command key and the ENTRYPOINT instruction within the Dockerfile effectively manages the execution of our various services.

[ERosendo]

I really liked what you did here.

I noticed that Django-tailwind often introduces an extra package.json and node_modules folder, which can sometimes complicate things. I appreciate your effort to streamline this by centralizing the commands within our existing package.json.

We were also considering moving input.css and tailwind.config.js to the assets folder for better organization. However, we encountered some errors when using the Django-tailwind commands.

can you please move these Tailwind-related files from the simple_pages folder to the assets folder and update the commands accordingly?

[leohentschker]

Good call, done!

[ERosendo]

Let's try using the global patterns from the beginning. I believe this will enhance our collaborative workflow. Since these patterns are general, this file won't require frequent updates with each new Tailwind component or page added in PR.

These are the patterns we use in the Big Cases Bot project:

module.exports = {
    content: [
        /**
         * HTML. Paths to Django template files that will contain Tailwind CSS classes.
         */

        /*  Templates within theme app (<tailwind_app_name>/templates), e.g. base.html. */
        '../templates/**/*.html',

        /*
         * Main templates directory of the project (BASE_DIR/templates).
         * Adjust the following line to match your project structure.
         */
        '../../templates/**/*.html',

        /*
         * Templates in other django apps (BASE_DIR/<any_app_name>/templates).
         * Adjust the following line to match your project structure.
         */
        '../../**/templates/**/*.html',
        '../../**/templates/**/*.svg',
    ],
}

We might need to take another look at those patterns after we consider the changes in https://github.com/freelawproject/courtlistener/pull/4931/files#r1919396611

[leohentschker]

Done! I believe this is still working.

[ERosendo]

Since there's no code currently added to the docker-entrypoint.sh file, here's a suggestion for what you could include as the tailwind-reload entry:

...
'web-dev')
    python /opt/courtlistener/manage.py migrate
    python /opt/courtlistener/manage.py createcachetable
    exec python /opt/courtlistener/manage.py runserver 0.0.0.0:8000
    ;;
+'tailwind-reload')
+   npm ci --prefix ./cl
+   exec npm run start --prefix ./cl --loglevel=verbose
+   ;;

[ERosendo]

Hey @leohentschker, I've added some initial comments to your code. I believe that addressing these should resolve the current CI failures.

Please let me know when you're ready for another review.

[mlissner]

Looking good. Nice to see this advancing!

[leohentschker]

Great on it @ERosendo ! Will have a PR for review for tomorrow AM.

[leohentschker]

TLDR: Turn complete on feedback from @ERosendo , a few questions remaining before I would feel comfortable merging this in

• How do styles get built and served in prod? Anything I could be pointed to / should we seek to address that in this PR (I also did some digging and don't see how this works on webpack)? My thought would be to add in an additional compose service for the prod build and add this as a requirement for cl-django.
• Are we comfortable mirroring how we specified the webpack command in docker-compose instead of adding to the docker-entrypoint.sh file?
• Let me know if I should make a fresh PR with collapsed changes post approval for git cleanliness

[ERosendo]

@leohentschker I've updated the PR to resolve the merge conflict. I'll review your code shortly.

Thank you for addressing the comments and making the necessary changes.

[ERosendo]

Let me know if I should make a fresh PR with collapsed changes post approval for git cleanliness

We can squash the changes in this PR into a single commit

[ERosendo]

@mlissner Here's a gif showing hot-reloading and Tailwind in action in CL:

Thanks @leohentschker

[elisa-a-v]

I tested it and the hot reload is very responsive and fast, and works both when changing the templates and when modifying the tailwind.config.js file, so that's pretty handy.

The only (very minor!) thing is I personally don't like it when the browser refreshes automatically because I've found myself needing to compare the same page in two different versions side-by-side, so I like to have control over when I see the new changes, but that's just personal preference. If y'all prefer it this way I say

All in all, I love this, thank you @leohentschker ! this will be sooo useful in the upcoming weeks 🙌🏽