LogoLogo
v1.5.2
v1.5.2
  • 🌸What is Petal Pro?
  • πŸ’‘Changelog
  • ⏫Upgrade guide
  • Guides
    • πŸš€Creating a web app from start to finish
  • πŸ‘©β€πŸ³Recipes
    • πŸ’How to apply a recipe with git cherry pick
    • #️⃣UUIDs
    • ✍️First/Last name
    • πŸ“¦NPM packages
    • πŸ—ΊοΈGoogle Maps
  • Fundamentals
    • πŸ’ΏInstallation
    • πŸ“‚Folder structure
    • πŸ—ƒοΈIncluded Pages
    • πŸ˜€Users & Authentication
    • 🏒Organizations & Multitenancy
    • 🧊Components
    • ⬛Dark mode
    • 🎨Branding
    • 🌱Seeding
    • πŸ“„Layouts & Menus
    • πŸ› οΈBackground Tasks and Jobs
    • πŸ”§Util & Helpers
    • πŸ“§Emails
    • πŸͺJavascript Hooks
    • πŸ“šExtra Hex Libraries
    • πŸ—οΈGenerators & Page Builder
    • πŸ—£οΈTranslations
    • πŸ–οΈContributing
    • πŸ›«Deployment
    • πŸ›‘οΈTesting
Powered by GitBook
On this page
  • Generators
  • mix petal.gen.live
  • mix petal.gen.html
  • Page Builder
  • Page Builder

Was this helpful?

  1. Fundamentals

Generators & Page Builder

PreviousExtra Hex LibrariesNextTranslations

Last updated 1 year ago

Was this helpful?

Generators

mix petal.gen.live

This produces the same files as Phoenix's mix phx.gen.live (). The only difference is that the templates use Tailwind and Petal Components. You can try it out with:

mix petal.gen.live Todos Todo todos label:string is_done:boolean

Add the routes from the output.

If you're wondering where to put the routes, you can search in the router file for the text "page_builder:live:protected", and add them straight after that line.

def PetalProWeb.Router do
  ...

  scope "/", PetalProWeb do
    pipe_through [
      :browser,
      :require_authenticated_user,
      :kick_user_if_suspended_or_deleted,
      :onboard_new_users
    ]
    
    live_session :require_authenticated_user,
      on_mount: {PetalProWeb.UserOnMountHooks, :require_authenticated_user} do
      ...
      
      # page_builder:live:protected
      live "/todos", TodoLive.Index, :index
      live "/todos/new", TodoLive.Index, :new
      live "/todos/:id/edit", TodoLive.Index, :edit
    
      live "/todos/:id", TodoLive.Show, :show
      live "/todos/:id/show/edit", TodoLive.Show, :edit
    end
  end
  ...
end

mix petal.gen.html

Example:

mix petal.gen.html Todos Todo todos label:string is_done:boolean

Page Builder

mix petal.gen.html

Page Builder

Usually, when you want to create a new page, you would have to create a new template file or live view file. Then you would create a route and point it either to the template's corresponding controller action, or directly to the live view.

To skip these steps, we made it so if you navigate to a path with no route on it then it will show what we call "The Page Builder" πŸ‘. The Page Builder is simply a form that helps you construct a page at that route. Submitting the form will result in the route being automatically added to the router.ex file and either a template or live view file is created for you.

Same file output as phx.gen.html (), but uses Petal Components and a layout from Pro.

The same as but designed for Petal Pro.

NOTE: In this version the Page Builder is unfortunately broken. Until we push a patch up you can download and unzip and put it in your priv dir in your application. Then it should work properly.

πŸ—οΈ
docs
docs
phx.gen.html
this file
After running the generator: the "index" screen
The "new todo" screen
After creating a new todo
The "show" page
Me creating a new page at the route "my-cool-new-page"