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:

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

Upgrading npm packages

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

Other

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

Sync styles between Svelte and Pyro components - details

Credits

Prosemirror-adapter Svelte Example

dev-guy / phoenix-ash-svelte-flowbite

readme