livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-02-26 16:05:27 +08:00
Code Issues Projects Releases Packages Wiki Activity

Set up assets and layout (#2)

Browse source
This commit is contained in:
Jonatan Kłosko 2021-01-07 22:13:17 +01:00 committed by GitHub
parent 2dd88ec017
commit 5877180934
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
24 changed files with 5946 additions and 862 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
assets/css/app.css Normal file
View file

@ -0,0 +1,6 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "../node_modules/nprogress/nprogress.css";
@import "./live_view.css";

16
assets/css/app.scss → assets/css/live_view.css
View file

@ -1,8 +1,5 @@
/* This file is for your main application css. */
@import "./phoenix.css";
@import "../node_modules/nprogress/nprogress.css";
/* LiveView specific classes for your customizations */
.phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback {
display: none;
@ -13,15 +10,15 @@
transition: opacity 1s ease-out;
}
.phx-disconnected{
.phx-disconnected {
cursor: wait;
}
.phx-disconnected *{
.phx-disconnected * {
pointer-events: none;
}
.phx-modal {
opacity: 1!important;
opacity: 1 !important;
position: fixed;
z-index: 1;
left: 0;
@ -29,8 +26,8 @@
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.phx-modal-content {
@ -55,7 +52,6 @@
cursor: pointer;
}
/* Alerts and form errors */
.alert {
padding: 15px;

558
assets/css/phoenix.css
View file

File diff suppressed because one or more lines are too long

40
assets/js/app.js
View file

@ -1,35 +1,27 @@
// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
import "../css/app.scss"
import "../css/app.css";
// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import deps with the dep name or local files with a relative path, for example:
//
// import {Socket} from "phoenix"
// import socket from "./socket"
//
import "phoenix_html"
import {Socket} from "phoenix"
import NProgress from "nprogress"
import {LiveSocket} from "phoenix_live_view"
import "phoenix_html";
import { Socket } from "phoenix";
import NProgress from "nprogress";
import { LiveSocket } from "phoenix_live_view";
let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
const csrfToken = document
.querySelector("meta[name='csrf-token']")
.getAttribute("content");
const liveSocket = new LiveSocket("/live", Socket, {
params: { _csrf_token: csrfToken },
});
// Show progress bar on live navigation and form submits
window.addEventListener("phx:page-loading-start", info => NProgress.start())
window.addEventListener("phx:page-loading-stop", info => NProgress.done())
window.addEventListener("phx:page-loading-start", (info) => NProgress.start());
window.addEventListener("phx:page-loading-stop", (info) => NProgress.done());
// connect if there are any LiveViews on the page
liveSocket.connect()
liveSocket.connect();
// expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug()
// >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session
// >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket
window.liveSocket = liveSocket;

5948
assets/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

12
assets/package.json
View file

@ -4,7 +4,9 @@
"license": "MIT",
"scripts": {
"deploy": "webpack --mode production",
"watch": "webpack --mode development --watch"
"watch": "webpack --mode development --watch",
"format": "prettier --trailing-comma es5 --write {js,css}/**/*.{js,json,css,scss,md}",
"test": "jest --watch"
},
"dependencies": {
"phoenix": "file:../deps/phoenix",
@ -15,14 +17,18 @@
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"autoprefixer": "^10.2.0",
"babel-loader": "^8.0.0",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"sass-loader": "^8.0.2",
"node-sass": "^4.13.1",
"hard-source-webpack-plugin": "^0.13.1",
"jest": "^26.6.3",
"mini-css-extract-plugin": "^0.9.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss": "^8.2.3",
"postcss-loader": "^4.1.0",
"prettier": "^2.2.1",
"tailwindcss": "^2.0.2",
"terser-webpack-plugin": "^2.3.2",
"webpack": "4.41.5",
"webpack-cli": "^3.3.2"

6
assets/postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
};

16
assets/tailwind.config.js Normal file
View file

@ -0,0 +1,16 @@
module.exports = {
purge: [
'../lib/**/*.ex',
'../lib/**/*.leex',
'../lib/**/*.eex',
'./js/**/*.js'
],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}

2
assets/webpack.config.js
View file

@ -39,7 +39,7 @@ module.exports = (env, options) => {
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
'postcss-loader',
],
}
]

0
lib/live_book_web/controllers/.gitkeep Normal file
View file

7
lib/live_book_web/controllers/page_controller.ex
View file

@ -1,7 +0,0 @@
defmodule LiveBookWeb.PageController do
use LiveBookWeb, :controller
def index(conn, _params) do
render(conn, "index.html")
end
end

3
lib/live_book_web/endpoint.ex
View file

@ -10,8 +10,7 @@ defmodule LiveBookWeb.Endpoint do
signing_salt: "SqUy8vWM"
]
socket "/live", Phoenix.LiveView.Socket,
websocket: [connect_info: [session: @session_options]]
socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]]
# Serve at "/" the static files from "priv/static" directory.
#

12
lib/live_book_web/live/home_live.ex Normal file
View file

@ -0,0 +1,12 @@
defmodule LiveBookWeb.HomeLive do
use LiveBookWeb, :live_view
@impl true
def render(assigns) do
~L"""
<div class="container p-4 flex justify-center">
<h1 class="text-2xl">Welcome to LiveBook</h1>
</div>
"""
end
end

39
lib/live_book_web/live/page_live.ex
View file

@ -1,39 +0,0 @@
defmodule LiveBookWeb.PageLive do
use LiveBookWeb, :live_view
@impl true
def mount(_params, _session, socket) do
{:ok, assign(socket, query: "", results: %{})}
end
@impl true
def handle_event("suggest", %{"q" => query}, socket) do
{:noreply, assign(socket, results: search(query), query: query)}
end
@impl true
def handle_event("search", %{"q" => query}, socket) do
case search(query) do
%{^query => vsn} ->
{:noreply, redirect(socket, external: "https://hexdocs.pm/#{query}/#{vsn}")}
_ ->
{:noreply,
socket
|> put_flash(:error, "No dependencies found matching \"#{query}\"")
|> assign(results: %{}, query: query)}
end
end
defp search(query) do
if not LiveBookWeb.Endpoint.config(:code_reloader) do
raise "action disabled when not in development"
end
for {app, desc, vsn} <- Application.started_applications(),
app = to_string(app),
String.starts_with?(app, query) and not List.starts_with?(desc, ~c"ERTS"),
into: %{},
do: {app, vsn}
end
end

48
lib/live_book_web/live/page_live.html.leex
View file

@ -1,48 +0,0 @@
<section class="phx-hero">
<h1>Welcome to Phoenix!</h1>
<p>Peace of mind from prototype to production</p>
<form phx-change="suggest" phx-submit="search">
<input type="text" name="q" value="<%= @query %>" placeholder="Live dependency search" list="results" autocomplete="off"/>
<datalist id="results">
<%= for {app, _vsn} <- @results do %>
<option value="<%= app %>"><%= app %></option>
<% end %>
</datalist>
<button type="submit" phx-disable-with="Searching...">Go to Hexdocs</button>
</form>
</section>
<section class="row">
<article class="column">
<h2>Resources</h2>
<ul>
<li>
<a href="https://hexdocs.pm/phoenix/overview.html">Guides &amp; Docs</a>
</li>
<li>
<a href="https://github.com/phoenixframework/phoenix">Source</a>
</li>
<li>
<a href="https://github.com/phoenixframework/phoenix/blob/v1.5/CHANGELOG.md">v1.5 Changelog</a>
</li>
</ul>
</article>
<article class="column">
<h2>Help</h2>
<ul>
<li>
<a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
</li>
<li>
<a href="https://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on Freenode IRC</a>
</li>
<li>
<a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
</li>
<li>
<a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a>
</li>
</ul>
</article>
</section>

2
lib/live_book_web/router.ex
View file

@ -17,7 +17,7 @@ defmodule LiveBookWeb.Router do
scope "/", LiveBookWeb do
pipe_through :browser
live "/", PageLive, :index
live "/", HomeLive
end
# Other scopes may use custom stacks.

22
lib/live_book_web/templates/layout/live.html.leex
View file

@ -1,11 +1,19 @@
<main role="main" class="container">
<p class="alert alert-info" role="alert"
phx-click="lv:clear-flash"
phx-value-key="info"><%= live_flash(@flash, :info) %></p>
<nav class="flex items-center justify-between px-2 py-3 bg-purple-600">
<div class="w-full px-8">
<%= live_redirect "LiveBook", to: "/", class: "text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-no-wrap uppercase text-white" %>
</div>
</nav>
<p class="alert alert-danger" role="alert"
phx-click="lv:clear-flash"
phx-value-key="error"><%= live_flash(@flash, :error) %></p>
<main role="main" class="container mx-auto flex flex-col align-center">
<div>
<p class="alert alert-info" role="alert"
phx-click="lv:clear-flash"
phx-value-key="info"><%= live_flash(@flash, :info) %></p>
<p class="alert alert-danger" role="alert"
phx-click="lv:clear-flash"
phx-value-key="error"><%= live_flash(@flash, :error) %></p>
</div>
<%= @inner_content %>
</main>

13
lib/live_book_web/templates/layout/root.html.leex
View file

@ -10,19 +10,6 @@
<script defer phx-track-static type="text/javascript" src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
</head>
<body>
<header>
<section class="container">
<nav role="navigation">
<ul>
<li><a href="https://hexdocs.pm/phoenix/overview.html">Get Started</a></li>
</ul>
</nav>
<a href="https://phoenixframework.org/" class="phx-logo">
<img src="<%= Routes.static_path(@conn, "/images/phoenix.png") %>" alt="Phoenix Framework Logo"/>
</a>
</section>
</header>
<%= @inner_content %>
</body>
</html>

38
lib/live_book_web/templates/page/index.html.eex
View file

@ -1,38 +0,0 @@
<section class="phx-hero">
<h1>Welcome to Phoenix!</h1>
<p>Peace of mind from prototype to production</p>
</section>
<section class="row">
<article class="column">
<h2>Resources</h2>
<ul>
<li>
<a href="https://hexdocs.pm/phoenix/overview.html">Guides &amp; Docs</a>
</li>
<li>
<a href="https://github.com/phoenixframework/phoenix">Source</a>
</li>
<li>
<a href="https://github.com/phoenixframework/phoenix/blob/v1.5/CHANGELOG.md">v1.5 Changelog</a>
</li>
</ul>
</article>
<article class="column">
<h2>Help</h2>
<ul>
<li>
<a href="https://elixirforum.com/c/phoenix-forum">Forum</a>
</li>
<li>
<a href="https://webchat.freenode.net/?channels=elixir-lang">#elixir-lang on Freenode IRC</a>
</li>
<li>
<a href="https://twitter.com/elixirphoenix">Twitter @elixirphoenix</a>
</li>
<li>
<a href="https://elixir-slackin.herokuapp.com/">Elixir on Slack</a>
</li>
</ul>
</article>
</section>

3
lib/live_book_web/views/page_view.ex
View file

@ -1,3 +0,0 @@
defmodule LiveBookWeb.PageView do
use LiveBookWeb, :view
end

0
test/live_book_web/controllers/.gitkeep Normal file
View file

8
test/live_book_web/controllers/page_controller_test.exs
View file

@ -1,8 +0,0 @@
defmodule LiveBookWeb.PageControllerTest do
use LiveBookWeb.ConnCase
test "GET /", %{conn: conn} do
conn = get(conn, "/")
assert html_response(conn, 200) =~ "Welcome to Phoenix!"
end
end

6
test/live_book_web/live/page_live_test.exs → test/live_book_web/live/home_live_test.exs
View file

@ -1,11 +1,11 @@
defmodule LiveBookWeb.PageLiveTest do
defmodule LiveBookWeb.HomeLiveTest do
use LiveBookWeb.ConnCase
import Phoenix.LiveViewTest
test "disconnected and connected render", %{conn: conn} do
{:ok, page_live, disconnected_html} = live(conn, "/")
assert disconnected_html =~ "Welcome to Phoenix!"
assert render(page_live) =~ "Welcome to Phoenix!"
assert disconnected_html =~ "Welcome to LiveBook"
assert render(page_live) =~ "Welcome to LiveBook"
end
end

3
test/live_book_web/views/page_view_test.exs
View file

@ -1,3 +0,0 @@
defmodule LiveBookWeb.PageViewTest do
use LiveBookWeb.ConnCase, async: true
end