Installed tailwind, added components page, created toy components with django-components and embedded Vue #4800

ashkonf · 2024-12-08T23:36:59Z

…h django-components and embedded Vue

CLAassistant · 2024-12-08T23:37:06Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.

Ashkon Farhangi seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

for more information, see https://pre-commit.ci

mlissner · 2024-12-11T04:49:35Z

@ashkonf, can you please sign the CLA per the instructions above?

mlissner

OK, this PR has a lot of bits to it to make things work, and most of it is so complicated/fragile I can barely figure it out. I think @ERosendo might have some better intuition, since he set up tailwind on Bots.law, but I did make a number of comments for things I noticed.

I think we should approach this PR in two steps:

Focus on cleaning up the various configurations, settings, installations, etc, so they're polished and optimized.

As part of this, I think we'll want to include the reloader in our docker-compose.yaml file, similar to how big cases does it.
Dial in the implementation of the two components, so we can see the parts that really matter.

@ashkonf, can you work on the comments I've made so far, and @ERosendo, can you review after that, please?

mlissner · 2024-12-11T04:55:14Z

cl/simple_pages/views.py

@@ -456,6 +457,10 @@ async def latest_terms(request: HttpRequest) -> HttpResponse:
    )


+async def components(request: HttpRequest) -> HttpResponse:
+    return TemplateResponse(request, "components.html", {"private": False})


Let's make this private, actually:

Suggested change

return TemplateResponse(request, "components.html", {"private": False})

return TemplateResponse(request, "components.html", {"private": True})

mlissner · 2024-12-11T05:00:14Z

cl/urls.py

+    path(
+        "__reload__/",
+        include("django_browser_reload.urls"),
+    ),


In bots.law, we did this inside the block on line 98 checking if we're testing:

if settings.DEVELOPMENT: urlpatterns.append( path("__reload__/", include("django_browser_reload.urls")), ) if not settings.TESTING: urlpatterns.append( path("__debug__/", include("debug_toolbar.urls")), )

mlissner · 2024-12-11T05:01:32Z

theme/static/css/dist/styles.css

I'm surprised to see such a large CSS file. Isn't the tailwind idea that we only ship the CSS we use?

mlissner · 2024-12-14T22:50:51Z

cl/assets/templates/base.html

@@ -54,6 +54,10 @@

  <link href="{% static "css/font-awesome.css" %}" rel="stylesheet">

+  <link href="{% static "css/app.css" %}" rel="stylesheet">
+  {% tailwind_css %}
+  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


We never rely on a CDN this way. We have our own and it's more secure not to trust others. I think it'd probably also fail our CSP rules (but not sure).

mlissner · 2024-12-14T22:52:18Z

cl/package.json

@@ -49,6 +49,7 @@
    "webpack-dev-server": "^4.10.0"
  },
  "dependencies": {
+    "@tailwindcss/cli": "^4.0.0-beta.6",


We'll need to add some of this stuff to our docker-compose file. The Big Cases bot has a good example of how to do it, IIRC. That way, we'll get hot reload and all that fun stuff without having to run extra stuff.

mlissner · 2024-12-14T23:00:53Z

cl/assets/templates/base.html

@@ -54,6 +54,10 @@

  <link href="{% static "css/font-awesome.css" %}" rel="stylesheet">

+  <link href="{% static "css/app.css" %}" rel="stylesheet">


I'm finding this a bit weird. We link to app.css, which imports tailwindcss. Gotta be a better way. I think Bots.law just has:

{% tailwind_preload_css %} {% tailwind_css %}

Honestly not sure what the preload vs. regular do, but definitely simpler/cleaner?

mlissner · 2024-12-14T23:01:29Z

cl/simple_pages/templates/components.html

@@ -0,0 +1,31 @@
+{% extends "base.html" %}
+{% load humanize %}


I don't think you need humanize, do you?

mlissner · 2024-12-14T23:01:43Z

cl/simple_pages/templates/components.html

+{% load component_tags %}
+{% load static %}
+
+{% block title %}Components – CourtListener.com{% endblock %}


Nit:

Suggested change

{% block title %}Components – CourtListener.com{% endblock %}

{% block title %}Components Library – CourtListener.com{% endblock %}

mlissner · 2024-12-14T23:01:57Z

cl/simple_pages/templates/components.html

+
+{% block content %}
+  <div class="col-xs-12">
+    <h1 class="">Components</h1>


Suggested change

<h1 class="">Components</h1>

<h1 class="">Components Library</h1>

mlissner · 2024-12-14T23:02:19Z

cl/simple_pages/templates/components.html

Let's add a paragraph to this page explaining what it's for and why it exists.

mlissner · 2024-12-14T23:09:04Z

I'm setting this for Eduardo's next sprint, but Ashkon, if you can address my suggestions before then, that'd be great.

installed tailwind, added components page, created toy components wit…

c162c12

…h django-components and embedded Vue

ashkonf requested a review from albertisfu December 8, 2024 23:37

This was referenced Dec 8, 2024

Create blank components page #4736

Open

Add tailwind to dev and prod environments for CourtListener #4741

Open

[pre-commit.ci] auto fixes from pre-commit.com hooks

c6acf59

for more information, see https://pre-commit.ci

ashkonf mentioned this pull request Dec 8, 2024

Analyze using Vue vs. Django-Components #4738

Open

ashkonf requested review from mlissner and albertisfu and removed request for albertisfu December 8, 2024 23:43

fixed dup tailwing config files

cb6537d

mlissner requested changes Dec 14, 2024

View reviewed changes

mlissner assigned ERosendo Dec 14, 2024

mlissner assigned ashkonf and unassigned ERosendo Dec 14, 2024

This was referenced Dec 22, 2024

#4736 (1/2) Create components page to act as a playground for new tailwind components leohentschker/courtlistener#2

Open

feat(styles) #4736 (1/2) creating private components page #4852

Open

mlissner assigned ERosendo and unassigned ashkonf Dec 23, 2024

mlissner requested review from ERosendo and removed request for albertisfu December 23, 2024 17:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Installed tailwind, added components page, created toy components with django-components and embedded Vue #4800

Installed tailwind, added components page, created toy components with django-components and embedded Vue #4800

ashkonf commented Dec 8, 2024 •

edited

Loading

CLAassistant commented Dec 8, 2024

mlissner commented Dec 11, 2024

mlissner left a comment

mlissner Dec 11, 2024

mlissner Dec 11, 2024

mlissner Dec 11, 2024

mlissner Dec 14, 2024

mlissner Dec 14, 2024

mlissner Dec 14, 2024

mlissner Dec 14, 2024

mlissner Dec 14, 2024

mlissner Dec 14, 2024

mlissner Dec 14, 2024

mlissner commented Dec 14, 2024

	return TemplateResponse(request, "components.html", {"private": False})
	return TemplateResponse(request, "components.html", {"private": True})

		@@ -54,6 +54,10 @@

		<link href="{% static "css/font-awesome.css" %}" rel="stylesheet">

		<link href="{% static "css/app.css" %}" rel="stylesheet">

		@@ -0,0 +1,31 @@
		{% extends "base.html" %}
		{% load humanize %}

	{% block title %}Components – CourtListener.com{% endblock %}
	{% block title %}Components Library – CourtListener.com{% endblock %}

	<h1 class="">Components</h1>
	<h1 class="">Components Library</h1>

Installed tailwind, added components page, created toy components with django-components and embedded Vue #4800

Are you sure you want to change the base?

Installed tailwind, added components page, created toy components with django-components and embedded Vue #4800

Conversation

ashkonf commented Dec 8, 2024 • edited Loading

CLAassistant commented Dec 8, 2024

mlissner commented Dec 11, 2024

mlissner left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mlissner commented Dec 14, 2024

ashkonf commented Dec 8, 2024 •

edited

Loading