morzaram / ash-svelte-flowbite Goto Github PK

View Code? Open in Web Editor NEW

This project forked from dev-guy/phoenix-ash-svelte-flowbite

0.0 0.0 0.0 465 KB

License: MIT License

JavaScript 6.70% Elixir 77.28% CSS 0.18% HTML 3.21% Svelte 12.64%

ash-svelte-flowbite's Introduction

Phoenix Ash Flowbite Svelte TipTap Mash-Up

Introduction

A web browser application demonstrating:

Video

Demo (MP4)

License

MIT

Help and additional information

Join the Ash Discord Server

Requirements

Postgres

Install Postgres

nvm

Install nvm
Restart your terminal

Elixir

Restart your terminal after installing Elixir.

MacOS

Install Homebrew
Restart your terminal

You can use brew to install Elixir but asdf is preferred by the Elixir community.

Either: brew install elixir or:

brew install 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
# Find the current versions of erlang and elixir:
# asdf list-all erlang
# asdf list-all elixir
asdf plugin add erlang
KERL_BUILD_DOCS=yes asdf install erlang 25.3 # For VSCode's Elixir language server extension
asdf global erlang 25.3
asdf plugin add elixir
asdf install elixir 1.14.4-otp-25
asdf global elixir 1.14.4-otp-25

Usage

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

Open a browser to http://localhost:4000

Notes

package.json contains JavaScript dependencies that are installed as Hex packages. This is apparently needed for Svelte SSR.

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

Need another component? Add it to package.json!
LiveSvelte elements that use most Flowbite-Svelte components must contain ssr={false}; otherwise, runtime errors will occur
You will get warnings from Flowbite-Svelte that can be ignored (for now):

▲ [WARNING] A11y: The attribute 'aria-expanded' is not supported by the role 'heading'. This role is implicit on the element <h2>. [plugin esbuild-svelte]

    node_modules/flowbite-svelte/accordions/AccordionItem.svelte:43:4:
      43 │ 41: </script>
         ╵     ~~~~~~~~~

42:
43: <h2 aria-expanded={open} class="group">
        ^