Skip to content

Phoenix Ash Tailwind Flowbite Svelte Skeleton TipTap Mermaid Mash-Up

License

Notifications You must be signed in to change notification settings

dev-guy/phoenix-ash-svelte-flowbite

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

PhoenixashTailwind CSSFlowbiteSvelteYjsSkeletonTipTapMilkdownMermaid

Previous Versions

Video

phoenix-ash-2023-05-26.mp4

Introduction

This is a web browser application demonstrating:

License

MIT

Help and additional information

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

Requirements

Postgres

Install Postgres

nvm

Elixir

Restart your terminal after installing Elixir.

Installing stable Elixir on MacOS

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
  1. Install Tailwind Scrollbar Hide Plugin
  2. 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

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

About

Phoenix Ash Tailwind Flowbite Svelte Skeleton TipTap Mermaid Mash-Up

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published