Skip to content

Commit

Permalink
Merge pull request #101 from czue/develop
Browse files Browse the repository at this point in the history 
Next release draft
  • Loading branch information
@czue
czue authored Oct 31, 2024
2 parents 9a231be + 9c4f737 commit e3df803
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 29 deletions.
90 changes: 65 additions & 25 deletions css/tailwind.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@

As of version 2022.8 Pegasus officially supports [Tailwind CSS](https://tailwindcss.com/) (Version 3).

## Demo
Here's a quick overview of what it looks like:
## Demo and Overview

Here's a quick overview of using TailwindCSS in Pegasus

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; margin-bottom: 1em;">
<iframe src="https://www.youtube.com/embed/mNxVfmoDaOQ" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
<iframe src="https://www.youtube.com/embed/vPtxNWx21bw" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>

## Development
Expand Down Expand Up @@ -34,28 +35,33 @@ Components from daisyUI can be brought in as needed by your app.
A full list of available components can be found at the [daisyUI component library](https://daisyui.com/components/).


## Changing your theme
### Changing your themes

DaisyUI offers a number of out-of-the-box themes you can use in your Pegasus app.
To change themes, first make sure the theme is enabled in your `tailwind.config.js` with a `daisyui` section like this:
Pegasus ships with the default DaisyUI light and dark themes which are used for regular and dark mode, respectively.
But DaisyUI offers a number of [out-of-the-box themes](https://daisyui.com/docs/themes/) you can use in your Pegasus app.
To change themes, make sure the theme is enabled in your `tailwind.config.js`'s `daisyui` section,
and specify the default dark mode theme if necessary:

```
```javascript
module.exports = {
//...
// changes the themes to "cupcake" and "coffee"
daisyui: {
themes: ["light", "dark", "cupcake"],
themes: ["cupcake", "coffee"],
},
// sets the "coffee" theme as the one used for dark mode
darkMode: ["class", '[data-theme="coffee"]'],
}
```
After changing these values you will have to [rebuild your front end](../front-end.md#building-in-development).

(The defaults are "light" and "dark".)
Finally, you will also have to update the default themes in your `settings.py`:

After adding your theme, rebuild your front end, and then add a `data-theme` attribute to
your `<html>` declaration in `templates/web/base.html`.

```html
<html data-theme="cupcake"></html>
```
LIGHT_THEME = "cupcake"
DARK_THEME = "coffee"
```

After this, your app should be fully styled in the new themes!

For a list of the available themes, and information about creating your on theme,
see the [daisyUI theme documentation](https://daisyui.com/docs/themes/) and their online [theme generator](https://daisyui.com/theme-generator/).
Expand Down Expand Up @@ -87,25 +93,59 @@ daisyui: {

## Other products / themes

### Flowbite
### shadcn

[Flowbite](https://flowbite.com/) is a library with many great UI components---most of which are free and open source.
[shadcn/ui](https://ui.shadcn.com/) is a React component library for Tailwind.
It includes many out-of-the-box components that you can install and use in your projects.

As of version 2024.11 Pegasus ships with a demo dashboard using shadcn.
To enable the dashboard you have to build with the Tailwind CSS framework and check the "Use Shadcn"
checkbox in your project settings.

Here's a screenshot:

![Shadcn Demo Dashboard](/images/css/shadcn-demo.png)

Flowbite can easily be added to a Pegasus project by installing it via `npm` and adding it to your global `site.js` and
`tailwind.config.js` files.
The dashboard is [a hybrid single-page React app](https://www.saaspegasus.com/guides/modern-javascript-for-django-developers/integrating-django-react/)
served by Django.
It uses the same colors as the DaisyUI theme, and will update when you change your theme,
and has many interactive components.
However it is *not* connected to any backend data---it is just a UI example.

You can use [this git patch file](https://gist.github.com/czue/73cec7ff562aff0943e55538fe9b4550#file-flowbite-patch)
as a starting point and apply it to your project by running:
#### Working with shadcn

The dashboard can be found in `assets/javascript/shadcn-dashboard`.
Shadcn components are stored in the `assets/javascript/components/ui` folder.

Components can be imported in other JavaScript files using the same import path syntax used by the dashboard:

```javascript
import { Button } from "@/components/ui/button"
```

You can use the [shadcn cli](https://ui.shadcn.com/docs/cli) to create components,
however it currently creates them in the wrong folder (this is surprisingly hard to change).
So adding a component is a two step process:

```
git apply flowbite.patch
npx shadcn@latest add badge
mv components/ui/* assets/javascript/components/ui/
```

This demonstrates basic installation and enabling the [datepicker plugin](https://flowbite.com/docs/plugins/datepicker/).
After that you should be able to import and use your component in your React code.

### Flowbite

[Flowbite](https://flowbite.com/) is a library with many great UI components---most of which are free and open source.
Also, unlike shadcn, it does *not* use React---making it a great fit for Django templates and htmx projects.

After applying the patch you will need to run `npm install` and `npm run dev-watch` to enable it on all pages.
As of version 2024.11 Pegasus ships with the option to enable flowbite, along with a page demonstrating
some sample components.
To enable Flowbite, choose Tailwind CSS and check the "Use Flowbite" checkbox in your project settings.

If you build with the Pegasus examples, you should be able to see the datepicker at [http://localhost:8000/pegasus/forms/](http://localhost:8000/pegasus/forms/).
If you enable this setting, flowbite will automatically be installed and you can drop
flowbite components into any Django template.
The reference page has an example of a few of these components.

### Tailwind UI

Expand Down
Binary file added images/css/shadcn-demo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions python.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ After finishing your edits, rebuild your `requirements.txt` file by running:
pip-compile requirements/requirements.in
# docker version
docker compose exec web pip-compile requirements/requirements.in
make pip-compile
```

After running this you should see the package and its dependencies added to the `requirements.txt` file.
Expand All @@ -168,7 +168,7 @@ To upgrade a package, you can run the following command. In this example we are
pip-compile --upgrade-package django requirements/requirements.in
# docker version
docker compose exec web pip-compile --upgrade-package django requirements/requirements.in
make pip-complie ARGS="--upgrade-package django"
```

To upgrade *all* packages, you can run:
Expand All @@ -178,7 +178,7 @@ To upgrade *all* packages, you can run:
pip-compile --upgrade requirements/requirements.in
# docker version
docker compose exec web pip-compile --upgrade requirements/requirements.in
make pip-compile ARGS="--upgrade"
```

From there you can install the new dependencies, as [described below](#installing-packages).
Expand Down Expand Up @@ -214,7 +214,7 @@ make requirements

Behind the scenes this will:

1. Rebuild all your `-requirements.txt` files from your `-requirements.in` files with `pip-compile`.
1. Rebuild all your `-requirements.txt` files from your `-requirements.in` files with `uv`.
2. Rebuild your containers (installing the new packages).
3. Restart your containers.

Expand Down
76 changes: 76 additions & 0 deletions release-notes.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,82 @@ Version History and Release Notes

Releases of [SaaS Pegasus: The Django SaaS Boilerplate](https://www.saaspegasus.com/) are documented here.

## Version 2024.11

This is a feature release with an emphasis on improving the Tailwind CSS experience with Pegasus.

Watch the video below for a demo, or read on for the highlights.

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto; margin-bottom: 1em;">
<iframe src="https://www.youtube.com/embed/vPtxNWx21bw" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe>
</div>

### Dark mode improvements

A dark mode selector was added to the navigation, allowing users to easily toggle between light, dark,
and "system default" mode.
The user's selection is preserved server-side in the session object, which also helps to prevent flickering across page loads.

### Better Theme Support

It's now easier than ever to change your project's theme.
Each project now supports a default light and dark theme which will be used throughout the site.
The default themes need only be changed in `tailwind.config.js`, and `settings.py` and everything else is taken care of.

See the updated [tailwind theme documentation](./css/tailwind.md#changing-your-themes) for more details.

### New shadcn integration and demo dashboard

A new build setting allows you to build your project with [shadcn/ui](https://ui.shadcn.com/) installed.
Shadcn is a great and versatile component library for React and Tailwind, but it is difficult to integrate it
into a Django project without building a separate front end.
Now Pegasus takes care of that integration for you, and provides a reference dashboard implementation of how to
work with the library.

The reference dashboard is a hybrid single-page React app served by Django.
It uses the same colors as the DaisyUI theme, and will update when you change your theme,
and has many interactive components.
However, it is not connected to any backend data—it is just a UI example.

Read more in the [shadcn docs here](./css/tailwind.md#shadcn).

### New flowbite integration and demo component page

Another new build setting allows you to build your project with [flowbite](https://flowbite.com/) installed.
Flowbite is another great component library for Tailwind and does *not* use React---making
it a great fit for htmx projects.
If you enable this setting, flowbite will automatically be installed and you can drop
flowbite components into any Django template.
The reference page has an example of a few of these components.

Read more in the [flowbite docs here](./css/tailwind.md#flowbite).

### Other updates

- **Upgraded all Python packages to their latest versions.**
- **[uv](https://docs.astral.sh/uv/) is now used to install Python packages in Docker files and Github actions.**
- Also updated `make pip-compile` target to use `uv`.
- This resulted in minor changes to all `requirements.txt` files.
- **Team invitation pages now prompt a user to log in instead of sign up if the email is associated with a known account.**
(Thanks Daniel for suggesting!)
- Your configured Github username, if available, will be used in a few places instead of a default value.
(Thanks Richard for suggesting!)
- Added `bg-base-100` to the `<body>` tag of the base template and removed it from other components where it was
now redundant. This improves theming support when themes heavily modify the base color. (Tailwind builds only)
- Added equals signs to `ENV` declarations in production Docker files, for consistency. (Thanks Denis for suggesting!)
- Slightly improved the styling of the e-commerce app.
- Overhauled the [Tailwind CSS documentation](./css/tailwind.md).

**Updates to the CLI ([release notes](https://github.com/saaspegasus/pegasus-cli/releases))**

- Fixed a bug on certain environments where the `pegasus` command conflicted with a local `pegasus` folder,
causing import errors running the CLI.
- Apps created with `startapp` now use a `POST` for deletion instead of a `GET`.
- Deletion now includes a modal confirmation (Tailwind and Bulma builds only).


*Nov 1, 2024*

## Version 2024.10

This release upgrades Kamal deployment to Kamal 2 and dramatically simplifies the Kamal deployment process.
Expand Down

0 comments on commit e3df803

Please sign in to comment.