Thank you. I am working on a reboot of that one. Back when I did it I was new to LiveView and there are things I would like to do differently now- both in backend and frontend.
code-shoily
code-shoily
I was working on this one for Spawnfest. (That code isn’t as polished… yet)
https://github.com/spawnfest/lotus
While it was planned and done in the span of 48 hours, I realize given time and guidance i can pull if off. I will be using the Covid19 Dashboard reboot as test-bed for that. UIKit is a great UI framework and getting a Surface wrapper for it was easier than I feared.
the_wildgoose
Hey! This sounds excellent! Note that I hit an error following the instructions in the readme. Using a Mac, recent elixir/erlang, I do “mix deps.get”, then “mix dev” and it ends like this:
Generated surface_catalogue app
** (ArgumentError) unknown application: :lotus
(elixir 1.12.3) lib/application.ex:893: Application.app_dir/1
(surface 0.5.0) lib/mix/tasks/compile/surface.ex:139: Mix.Tasks.Compile.Surface.app_modules/1
(surface 0.5.0) lib/mix/tasks/compile/surface.ex:59: anonymous fn/2 in Mix.Tasks.Compile.Surface.get_colocated_assets/0
(elixir 1.12.3) lib/enum.ex:2385: Enum."-reduce/3-lists^foldl/2-0-"/3
(surface 0.5.0) lib/mix/tasks/compile/surface.ex:16: Mix.Tasks.Compile.Surface.run/1
(mix 1.12.3) lib/mix/task.ex:394: anonymous fn/3 in Mix.Task.run_task/3
(mix 1.12.3) lib/mix/tasks/compile.all.ex:92: Mix.Tasks.Compile.All.run_compiler/2
(mix 1.12.3) lib/mix/tasks/compile.all.ex:72: Mix.Tasks.Compile.All.compile/4
However, notwithstanding that, this sounds really interesting. I think surface potentially makes for the ultimate “wiki” language. I’ve been chasing various ideas for static websites for many years, and it’s always a problem to use wiki shortcuts as you inevitably get boxed in when you want to wrap more complex UI components. The surface approach is great for hiding all the implementation details within the fewest XML alike enclosing blocks.
How do you rate UIKit vs Bulma/Bootstrap for this use case though? There seems like a reasonable amount of overlap? I’m not familiar with UIKit, what is it’s advantage?
code-shoily
Which means I did a pretty bad job at writing that Readme :facepalm: I’ll get back to you later today on this.
cvkmohan
Is rendering a Phoenix Component in a Surface View possible?
defmodule AppWeb.Shared do
def logo(assigns)
<img src={Routes.static_path(@conn, "/images/logo.svg")}/>
end
end
defmodule AppWeb.Shared.Components.Navbar do
use AppWeb, :surface_component
def render(assigns) do
~F"""
<.AppWeb.logo />
"""
end
end
Something like this is possible?
cvkmohan
Not sure if they are same. The link you gave suggests that we use sigil F instead of sigil H. Once we use sigil H, that component is not usable in regular heex.
My question was how to use a phoenix component inside surface component.
odix67
ok, this is more or less answered in followup post (170), as the mentioned branch is already merged into master, give it try.
maz
Can a Surface LiveComponent(or Surface.LiveView) detect the socket.assigns.uploads that LiveView Upload assigns to the socket with allow_uploads()?
I’m making a page where I use the <%= live_file_input @uploads.photo %> tag in a Surface Component and I’m getting this error:
== Compilation error in file lib/faithful_word_web/components/new_upload_form.ex ==
** (Surface.Compiler.ParseError) lib/faithful_word_web/components/new_upload_form.ex:35:13: expected attribute name
(surface 0.5.0) lib/surface/compiler/tokenizer.ex:502: Surface.Compiler.Tokenizer.handle_attribute/5
(surface 0.5.0) lib/surface/compiler/parser.ex:39: Surface.Compiler.Parser.parse!/2
(surface 0.5.0) lib/surface/compiler.ex:103: Surface.Compiler.compile/5
(surface 0.5.0) expanding macro: Surface.sigil_F/2
lib/faithful_word_web/components/new_upload_form.ex:31: FaithfulWordWeb.Components.NewUploadForm.render/1
(elixir 1.12.2) lib/kernel/parallel_compiler.ex:319: anonymous fn/4 in Kernel.ParallelCompiler.spawn_workers/7
on the parent page this is the code I use to assign the socket:
{:ok, allow_upload(socket, :photo, accept: ~w(.png .jpg .jpeg), external: &presign_entry/2), temporary_assigns: [posts: [], new_posts: [], new_media_items: []]}
and inside the ~F"“” body I have:
<NewUploadForm id="new-upload-form" submit="upload_submit" uploads={@uploads} />
new_upload_form.ex:
defmodule FaithfulWordWeb.Components.NewUploadForm do
use Surface.LiveComponent
alias FaithfulWordWeb.Components.{
Button
}
alias Surface.Components.{
Form
}
alias Surface.Components.Form.{
Field,
TextInput,
Select,
}
@doc "Post data"
prop uploads, :map, required: true
@doc "On form submit event"
prop submit, :event, required: true
def render(assigns) do
~F"""
<Form for={:uploads} submit={@submit} class="rounded-xl shadow-xl overflow-hidden bg-gray-700">
<div class="flex flex-row">
<div class="flex-1 px-4 py-3 border-none text-sm font-medium placeholder-gray-400 text-white bg-gray-700 rounded-none group outline-none focus:outline-none focus:ring-0 w-full">
<%= live_file_input @uploads.photo %>
</div>
<Button type="submit" class="rounded-none bg-gray-700 hover:bg-gray-600">Upload</Button>
</div>
</Form>
"""
end
end
dependencies:
phoenix 1.6.0
phoenix_ecto 4.3.0
phoenix_html 3.0.0 RETIRED!
(security) The :class attribute in content_tag and in class={@class} for HEEx is not escaped against XSS
phoenix_live_dashboard 0.5.0
phoenix_live_reload 1.3.3
phoenix_live_session 0.1.3
phoenix_live_view 0.16.0
phoenix_pubsub 2.0.0
phoenix_view 1.0.0
surface 0.5.0