Phoenix Ash Tailwind Svelte Yjs Flowbite Skeleton TipTap Milkdown Mermaid Mash-Up

Previous Versions

• April 2023: With Flowbite-Svelte

Video

May 26 2023

Introduction

This is a web browser application demonstrating:

• Phoenix 1.7
• pnpm Replaces npm because it's faster
• esbuild 0.19
• TailwindCSS 3.3
• Phoenix LiveView 0.18
• Ash Framework 2.9
  • Ash Authentication
• Pyro
  • Toggle dark and light themes using Pyro
  • Custom Pyro overrides to match Svelte Skeleton (partially implemented)
• Flowbite 1.8 Tailwind CSS Components
  • Application Shell with header and responsive left sidebar
  • Date Picker on the home page
  • Menu
  • Tooltips
    • 
• Svelte 4 via LiveSvelte 0.11
  • Support Sass/Scss/PostCSS
  • CRDT counter with Yjs
  • LiveSvelte Counter is similar to the increment/decrement example. It communicates with the backend via Websockets. Uses the convenient ~V sigil.
  • Mermaid diagram editor in a .svelte file (dead view)
  • TipTap 2.1 (dead view) with task list plugin
  • Milkdown 7.2 (dead view) with Markdown, Mermaid, and collaboration via Yjs
  • Kanban board (dead view)
• Svelte Skeleton 2
  • Theme and styles provided by Skeleton
  • Tabs
  • Accordion (dead view)
  • Toast (dead view)
• Replace Cowboy with Bandit 1.0

License

MIT

Help and additional information

Join the Ash Discord Server and check out the Pyro channel.

Requirements

Postgres

Install Postgres

nvm

• Install nvm
• Restart your terminal

Elixir

Restart your terminal after installing Elixir.

Installing stable Elixir on MacOS

• Install Homebrew
• Restart your terminal
• brew install elixir

Installing bleeding-edge Elixir on MacOS with asdf

This might work better with VSCode language servers for Elixir. Or it might not work at all.

This currently fails to build erlang-ssl-fun.

brew install autoconf wxwidgets libxslt fop [email protected] asdf
# I use zsh. Change the following line to >> ~/.bashrc if you use bash.
echo -e "\n. $(brew --prefix asdf)/libexec/asdf.sh" >> ${ZDOTDIR:-~}/.zshrc
# Restart your terminal
asdf plugin add erlang https://github.com/asdf-vm/asdf-erlang.git
# To install more docs, add the following at the beginning:
# KERL_INSTALL_MANPAGES=yes KERL_INSTALL_HTMLDOCS=yes
KERL_CONFIGURE_OPTIONS="--disable-debug --without-javac --with-ssl=$(brew --prefix [email protected])" KERL_BUILD_DOCS=yes asdf install erlang 26.0.1
asdf global erlang 26.0.1
asdf plugin add elixir
asdf install elixir 1.15.0
asdf global elixir 1.15.0

Rust (for Rustler) - not yet needed

See https://www.rust-lang.org/tools/install

Visual Studio Code Configuration

Tailwind CSS Intellisence

vscode-tailwindcss

  "tailwindCSS.experimental.configFile": "./assets/tailwind.config.js"

Usage

git clone https://github.com/dev-guy/phoenix-ash-svelte-flowbite.git
cd phoenix-ash-svelte-flowbite
nvm install
npm install -g @pnpm/exe
mix local.hex
mix local.rebar
mix tailwind.install
mix setup
# Register the version of esbuild installed by pnpm
mix esbuild.install
mix phx.server

Open a browser to http://localhost:4000

Notes

• Svelte Skeleton
  • Svelte Skeleton implements styles and themes that can also be used with Phoenix comonents
  • The theme is specified in assets/tailwind.config.js. It is also specified in root.html.heex via data-theme=
  • Skeleton's surface, primary, secondary, tertiary, success, warning, and error colors were incorporated with Pyro's components for a consistent look across Pyro and Skeleton components
• LiveSvelte
  • Svelte delivers many client-side UX niceties such as animations. Combining LiveView and Svelte is 10x!
  • LiveSvelte video
  • Need another Svelte or JavaScript component? Just add it to package.json!
  • .svelte files are located in assets/svelte
  • <style> elements that need Postcss etc. should use lang="scss" instead of type="text/scss"
  • SSR has been disabled temporarily because there are too many crashes
    • LiveSvelte elements that use most Svelte Skeleton components must specify ssr={false}
  • Using @apply in <style> blocks in Svelte files is a bad idea
  • Beware Svelte-Kit $app dependencies!
  • Until editors understand that ~V is for Svelte, using .svelte files will have a better DX. Plus ~V doesn't work with dead views.
  • package.json contains JavaScript dependencies that are installed as Hex packages. This is apparently needed for SSR.

    "live_svelte": "file:../deps/live_svelte",
    "pyro": "file:../deps/pyro",
    "phoenix": "file:../deps/phoenix",
    "phoenix_html": "file:../deps/phoenix_html",
    "phoenix_live_view": "file:../deps/phoenix_live_view"

References

Guides

1. Install Phoenix
2. Install Ash Authentication
3. Install Pyro
4. Install Flowbite for Phoenix
5. Install LiveSvelte
6. Install Svelte Skeleton

• Skeleton 2 migration guide
• Include PurgeCSS
• Read about Flowbite and Skeleton

7. Install Tailwind Scrollbar Hide Plugin
8. LiveView feels faster with a delayed loading indicator

Upgrading npm packages

1. esbuild: modify config.exs
2. tailwindcss: modify config.exs
3. node (see .nvmrc): build.js (see target:)

Other

• Why all JS dependencies are devDependencies
• Phoenix and Third-Party JS Packages
• ElixirConf 2022 - Ryan Cooke - E2E Reactivity - using Svelte with Phoenix LiveView
• Getting Started: Phoenix 1.7 with Svelte

Milkdown Collaborative Editing

Tabbed collaboration works out of the box. Cross-browser collaboration requires running a WebRTC server:

nvm i
cd assets
PORT=4444 npx y-webrtc server.js

TODO

1. Sync styles between Svelte and Pyro components - details

Credits

1. Prosemirror-adapter Svelte Example