livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-12-13 07:19:25 +08:00
Code Issues Projects Releases Packages Wiki Activity

Revamp explore section

Browse source
This commit is contained in:
José Valim 2022-08-28 19:08:43 +02:00
parent 713d1a55be
commit ed9c0e5a1e
3 changed files with 14 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
lib/livebook/notebook/explore.ex
View file

@ -39,7 +39,7 @@ defmodule Livebook.Notebook.Explore do
welcome_config = %{ welcome_config = %{
path: Path.join(__DIR__, "explore/intro_to_livebook.livemd"), path: Path.join(__DIR__, "explore/intro_to_livebook.livemd"),
details: %{ details: %{
description: "Get to know Livebook, see how it works and explore its features.", description: "Get to know Livebook, see how it works, and explore its features.",
cover_url: "/images/logo.png" cover_url: "/images/logo.png"
} }
} }
@ -53,14 +53,14 @@ defmodule Livebook.Notebook.Explore do
], ],
details: %{ details: %{
description: description:
"A fast-paced introduction to the Elixir language by building distributed data-transfer portals.", "A fast-paced introduction to Elixir by building distributed data-transfer portals.",
cover_url: "/images/elixir-portal.jpeg" cover_url: "/images/elixir-portal.jpeg"
} }
}, },
%{ %{
path: Path.join(__DIR__, "explore/elixir_and_livebook.livemd"), path: Path.join(__DIR__, "explore/elixir_and_livebook.livemd"),
details: %{ details: %{
description: "Learn how to use some of Elixir and Livebook's unique features together.", description: "Learn how to use some of their unique features together.",
cover_url: "/images/elixir.png" cover_url: "/images/elixir.png"
} }
}, },
@ -68,7 +68,7 @@ defmodule Livebook.Notebook.Explore do
path: Path.join(__DIR__, "explore/intro_to_kino.livemd"), path: Path.join(__DIR__, "explore/intro_to_kino.livemd"),
details: %{ details: %{
description: description:
"Make your notebooks interactive with inputs, controls, and more with the Kino package.", "Make your notebooks interactive with inputs, controls, and more.",
cover_url: "/images/kino.png" cover_url: "/images/kino.png"
} }
}, },

20
lib/livebook_web/live/explore_live.ex
View file

@ -29,16 +29,17 @@ defmodule LivebookWeb.ExploreLive do
current_user={@current_user} current_user={@current_user}
saved_hubs={@saved_hubs} saved_hubs={@saved_hubs}
> >
<div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-md mx-auto space-y-8"> <div class="px-4 sm:px-8 md:px-16 pt-4 sm:py-7 max-w-screen-lg mx-auto space-y-4">
<div> <div>
<PageHelpers.title text="Explore" /> <PageHelpers.title text="Explore" />
<p class="mt-4 text-gray-700"> <p class="mt-4 mb-8 text-gray-700">
Check out a number of examples showcasing various parts of the Elixir ecosystem. Check out a number of examples showcasing various parts of the Elixir ecosystem.<br />
Click on any notebook you like and start playing around with it! Click on any notebook you like and start playing around with it!
</p> </p>
</div> </div>
<div class="p-8 bg-gray-900 rounded-2xl flex space-x-4 shadow-xl"> <div id="welcome-to-livebook" class="p-8 bg-gray-900 rounded-2xl flex flex-col sm:flex-row space-y-8 sm:space-y-0 space-x-0 sm:space-x-8 items-center shadow-xl">
<div class="self-end max-w-sm"> <img src={@lead_notebook_info.details.cover_url} width="100" alt="livebook" />
<div>
<h3 class="text-xl text-gray-50 font-semibold"> <h3 class="text-xl text-gray-50 font-semibold">
<%= @lead_notebook_info.title %> <%= @lead_notebook_info.title %>
</h3> </h3>
@ -46,17 +47,14 @@ defmodule LivebookWeb.ExploreLive do
<%= @lead_notebook_info.details.description %> <%= @lead_notebook_info.details.description %>
</p> </p>
<div class="mt-4"> <div class="mt-4">
<%= live_patch("Let's go", <%= live_patch("Open notebook",
to: Routes.explore_path(@socket, :notebook, @lead_notebook_info.slug), to: Routes.explore_path(@socket, :notebook, @lead_notebook_info.slug),
class: "button-base button-blue" class: "button-base button-blue"
) %> ) %>
</div> </div>
</div> </div>
<div class="grow hidden md:flex flex items-center justify-center">
<img src={@lead_notebook_info.details.cover_url} height="120" width="120" alt="livebook" />
</div>
</div> </div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<% # Note: it's fine to use stateless components in this comprehension, <% # Note: it's fine to use stateless components in this comprehension,
# because @notebook_infos never change %> # because @notebook_infos never change %>
<%= for info <- @notebook_infos do %> <%= for info <- @notebook_infos do %>
@ -74,7 +72,7 @@ defmodule LivebookWeb.ExploreLive do
defp notebook_group(assigns) do defp notebook_group(assigns) do
~H""" ~H"""
<div> <div>
<div class="p-8 rounded-2xl border border-gray-300 flex flex-col sm:flex-row space-y-8 sm:space-y-0 space-x-0 sm:space-x-8 items-center"> <div class="p-8 mt-16 rounded-2xl border border-gray-300 flex flex-col sm:flex-row space-y-8 sm:space-y-0 space-x-0 sm:space-x-8 items-center">
<img src={@group_info.cover_url} width="100" /> <img src={@group_info.cover_url} width="100" />
<div> <div>
<div class="inline-flex px-2 py-0.5 bg-gray-200 rounded-3xl text-gray-700 text-xs font-medium"> <div class="inline-flex px-2 py-0.5 bg-gray-200 rounded-3xl text-gray-700 text-xs font-medium">

2
test/livebook_web/live/explore_live_test.exs
View file

@ -8,7 +8,7 @@ defmodule LivebookWeb.ExploreLiveTest do
assert {:error, {:live_redirect, %{to: to}}} = assert {:error, {:live_redirect, %{to: to}}} =
view view
|> element(~s{a}, "Let's go") |> element(~s{#welcome-to-livebook a}, "Open notebook")
|> render_click() |> render_click()
assert to =~ "/sessions/" assert to =~ "/sessions/"