├── test ├── test_helper.exs ├── better_big_canvas_web │ ├── views │ │ ├── layout_view_test.exs │ │ └── error_view_test.exs │ └── live │ │ └── page_live_test.exs └── support │ ├── channel_case.ex │ └── conn_case.ex ├── assets ├── .babelrc ├── static │ ├── favicon.ico │ ├── images │ │ ├── arrow.png │ │ ├── logo.png │ │ ├── phoenix.png │ │ └── return.png │ └── robots.txt ├── js │ ├── canvas.js │ ├── pickr.js │ └── app.js ├── package.json ├── webpack.config.js └── css │ ├── app.scss │ └── phoenix.css ├── draw_example.gif ├── realtime_example.gif ├── .formatter.exs ├── lib ├── better_big_canvas_web │ ├── views │ │ ├── layout_view.ex │ │ ├── board_view.ex │ │ ├── canvas_view.ex │ │ ├── error_view.ex │ │ └── error_helpers.ex │ ├── templates │ │ ├── layout │ │ │ ├── app.html.eex │ │ │ ├── live.html.leex │ │ │ └── root.html.leex │ │ ├── board │ │ │ └── board_live.html.leex │ │ └── canvas │ │ │ └── canvas_live.html.leex │ ├── live │ │ ├── reset_live.ex │ │ ├── board_component.ex │ │ ├── canvas_live.ex │ │ ├── board_live.ex │ │ └── canvas_component.ex │ ├── gettext.ex │ ├── router.ex │ ├── channels │ │ └── user_socket.ex │ ├── telemetry.ex │ └── endpoint.ex ├── better_big_canvas │ ├── database.ex │ ├── square.ex │ └── application.ex ├── better_big_canvas.ex └── better_big_canvas_web.ex ├── Dockerfile ├── config ├── test.exs ├── prod.secret.exs ├── config.exs ├── dev.exs └── prod.exs ├── priv └── gettext │ ├── en │ └── LC_MESSAGES │ │ └── errors.po │ └── errors.pot ├── .gitignore ├── .github └── workflows │ └── ci.yml ├── LICENSE.md ├── mix.exs ├── README.md └── mix.lock /test/test_helper.exs: -------------------------------------------------------------------------------- 1 | ExUnit.start() 2 | -------------------------------------------------------------------------------- /assets/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /draw_example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianTovar/better-big-canvas/HEAD/draw_example.gif -------------------------------------------------------------------------------- /realtime_example.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianTovar/better-big-canvas/HEAD/realtime_example.gif -------------------------------------------------------------------------------- /assets/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianTovar/better-big-canvas/HEAD/assets/static/favicon.ico -------------------------------------------------------------------------------- /.formatter.exs: -------------------------------------------------------------------------------- 1 | [ 2 | import_deps: [:phoenix], 3 | inputs: ["*.{ex,exs}", "{config,lib,test}/**/*.{ex,exs}"] 4 | ] 5 | -------------------------------------------------------------------------------- /assets/static/images/arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianTovar/better-big-canvas/HEAD/assets/static/images/arrow.png -------------------------------------------------------------------------------- /assets/static/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianTovar/better-big-canvas/HEAD/assets/static/images/logo.png -------------------------------------------------------------------------------- /assets/static/images/phoenix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianTovar/better-big-canvas/HEAD/assets/static/images/phoenix.png -------------------------------------------------------------------------------- /assets/static/images/return.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChristianTovar/better-big-canvas/HEAD/assets/static/images/return.png -------------------------------------------------------------------------------- /lib/better_big_canvas_web/views/layout_view.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.LayoutView do 2 | use BetterBigCanvasWeb, :view 3 | end 4 | -------------------------------------------------------------------------------- /lib/better_big_canvas/database.ex: -------------------------------------------------------------------------------- 1 | use Amnesia 2 | 3 | defdatabase Database do 4 | deftable( 5 | Square, 6 | [{:id, autoincrement}, :data], 7 | type: :ordered_set 8 | ) 9 | end 10 | -------------------------------------------------------------------------------- /assets/static/robots.txt: -------------------------------------------------------------------------------- 1 | # See http://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file 2 | # 3 | # To ban all spiders from the entire site uncomment the next two lines: 4 | # User-agent: * 5 | # Disallow: / 6 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/views/board_view.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.BoardView do 2 | use BetterBigCanvasWeb, :view 3 | 4 | @spec row_enumerable :: [non_neg_integer()] 5 | def row_enumerable, do: Enum.map(0..19, &(&1 * 20)) 6 | end 7 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/views/canvas_view.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.CanvasView do 2 | use BetterBigCanvasWeb, :view 3 | 4 | @spec row_enumerable :: [non_neg_integer()] 5 | def row_enumerable, do: Enum.map(0..29, &(&1 * 30)) 6 | end 7 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM bitwalker/alpine-elixir-phoenix:latest 2 | 3 | WORKDIR /app 4 | COPY . . 5 | RUN rm -rf _build deps assets/node_modules 6 | RUN cd assets && npm install && cd ../ && mix do deps.get, compile, phx.digest 7 | USER root 8 | EXPOSE 4000 9 | 10 | CMD ["mix", "phx.server"] 11 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/templates/layout/app.html.eex: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | <%= @inner_content %> 5 |
6 | -------------------------------------------------------------------------------- /lib/better_big_canvas.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvas do 2 | @moduledoc """ 3 | BetterBigCanvas keeps the contexts that define your domain 4 | and business logic. 5 | 6 | Contexts are also responsible for managing your data, regardless 7 | if it comes from the database, an external API or others. 8 | """ 9 | end 10 | -------------------------------------------------------------------------------- /config/test.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # We don't run a server during test. If one is required, 4 | # you can enable the server option below. 5 | config :better_big_canvas, BetterBigCanvasWeb.Endpoint, 6 | http: [port: 4002], 7 | server: false 8 | 9 | # Print only warnings and errors during test 10 | config :logger, level: :warn 11 | -------------------------------------------------------------------------------- /test/better_big_canvas_web/views/layout_view_test.exs: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.LayoutViewTest do 2 | use BetterBigCanvasWeb.ConnCase, async: true 3 | 4 | # When testing helpers, you may want to import Phoenix.HTML and 5 | # use functions such as safe_to_string() to convert the helper 6 | # result into an HTML string. 7 | # import Phoenix.HTML 8 | end 9 | -------------------------------------------------------------------------------- /assets/js/canvas.js: -------------------------------------------------------------------------------- 1 | export const Canvas = (hook, pixels) => { 2 | const canvas = document.getElementById(hook.el.id); 3 | let ctx = canvas.getContext("2d"); 4 | 5 | for (let x = 0; x < 30; x++) { 6 | for (let y = 0; y < 30; y++) { 7 | ctx.fillStyle = pixels[y]; 8 | ctx.fillRect(y, x, 1, 1); 9 | } 10 | pixels.splice(0, 30); 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /priv/gettext/en/LC_MESSAGES/errors.po: -------------------------------------------------------------------------------- 1 | ## `msgid`s in this file come from POT (.pot) files. 2 | ## 3 | ## Do not add, change, or remove `msgid`s manually here as 4 | ## they're tied to the ones in the corresponding POT file 5 | ## (with the same domain). 6 | ## 7 | ## Use `mix gettext.extract --merge` or `mix gettext.merge` 8 | ## to merge POT files into PO files. 9 | msgid "" 10 | msgstr "" 11 | "Language: en\n" 12 | -------------------------------------------------------------------------------- /priv/gettext/errors.pot: -------------------------------------------------------------------------------- 1 | ## This is a PO Template file. 2 | ## 3 | ## `msgid`s here are often extracted from source code. 4 | ## Add new translations manually only if they're dynamic 5 | ## translations that can't be statically extracted. 6 | ## 7 | ## Run `mix gettext.extract` to bring this file up to 8 | ## date. Leave `msgstr`s empty as changing them here has no 9 | ## effect: edit them in PO (`.po`) files instead. 10 | 11 | -------------------------------------------------------------------------------- /test/better_big_canvas_web/live/page_live_test.exs: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.PageLiveTest do 2 | use BetterBigCanvasWeb.ConnCase 3 | 4 | import Phoenix.LiveViewTest 5 | 6 | test "disconnected and connected render", %{conn: conn} do 7 | {:ok, page_live, disconnected_html} = live(conn, "/") 8 | assert disconnected_html =~ "Welcome to Phoenix!" 9 | assert render(page_live) =~ "Welcome to Phoenix!" 10 | end 11 | end 12 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/templates/layout/live.html.leex: -------------------------------------------------------------------------------- 1 |
2 | 5 | 6 | 9 | 10 | <%= @inner_content %> 11 |
12 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/templates/board/board_live.html.leex: -------------------------------------------------------------------------------- 1 |
2 |
3 | <%= for i <- row_enumerable() do %> 4 |
5 | <%= for j <- 1..20 do %> 6 |
7 | <%= live_component @socket, BetterBigCanvasWeb.BoardComponent, id: i + j, version: UUID.uuid4() %> 8 |
9 | <% end %> 10 |
11 | <% end %> 12 |
13 |
14 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/live/reset_live.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.ResetLive do 2 | use Phoenix.LiveView, layout: {BetterBigCanvasWeb.LayoutView, "live.html"} 3 | 4 | alias BetterBigCanvas.Square 5 | 6 | @impl true 7 | def mount(_params, _session, socket) do 8 | Square.create_and_populate() 9 | 10 | {:ok, socket} 11 | end 12 | 13 | @impl true 14 | def render(assigns) do 15 | ~L""" 16 |

Canvas Reset!

17 | """ 18 | end 19 | end 20 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/live/board_component.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.BoardComponent do 2 | use Phoenix.LiveComponent 3 | 4 | def render(assigns) do 5 | ~L""" 6 |
7 | 8 |
9 | """ 10 | end 11 | 12 | def handle_event("clicked", _, socket), 13 | do: {:noreply, push_redirect(socket, to: "/#{socket.assigns.id}")} 14 | end 15 | -------------------------------------------------------------------------------- /test/better_big_canvas_web/views/error_view_test.exs: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.ErrorViewTest do 2 | use BetterBigCanvasWeb.ConnCase, async: true 3 | 4 | # Bring render/3 and render_to_string/3 for testing custom views 5 | import Phoenix.View 6 | 7 | test "renders 404.html" do 8 | assert render_to_string(BetterBigCanvasWeb.ErrorView, "404.html", []) == "Not Found" 9 | end 10 | 11 | test "renders 500.html" do 12 | assert render_to_string(BetterBigCanvasWeb.ErrorView, "500.html", []) == 13 | "Internal Server Error" 14 | end 15 | end 16 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/views/error_view.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.ErrorView do 2 | use BetterBigCanvasWeb, :view 3 | 4 | # If you want to customize a particular status code 5 | # for a certain format, you may uncomment below. 6 | # def render("500.html", _assigns) do 7 | # "Internal Server Error" 8 | # end 9 | 10 | # By default, Phoenix returns the status message from 11 | # the template name. For example, "404.html" becomes 12 | # "Not Found". 13 | def template_not_found(template, _assigns) do 14 | Phoenix.Controller.status_message_from_template(template) 15 | end 16 | end 17 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/live/canvas_live.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.CanvasLive do 2 | use Phoenix.LiveView, layout: {BetterBigCanvasWeb.LayoutView, "live.html"} 3 | 4 | alias BetterBigCanvasWeb.CanvasView 5 | 6 | @impl true 7 | def mount(%{"id" => id}, _session, socket), 8 | do: {:ok, assign(socket, pickr_color: "#2B1AD3", parent_id: id)} 9 | 10 | @impl true 11 | def render(assigns), do: Phoenix.View.render(CanvasView, "canvas_live.html", assigns) 12 | 13 | @impl true 14 | def handle_event("select-color", %{"color" => new_color}, socket), 15 | do: {:noreply, assign(socket, pickr_color: new_color)} 16 | end 17 | -------------------------------------------------------------------------------- /assets/js/pickr.js: -------------------------------------------------------------------------------- 1 | import Pickr from "@simonwep/pickr"; 2 | import "@simonwep/pickr/dist/themes/nano.min.css"; 3 | 4 | export const ColorPickr = (hook) => { 5 | const pickr = Pickr.create({ 6 | el: hook.el, 7 | theme: "nano", 8 | closeOnScroll: true, 9 | closeWithKey: "Escape", 10 | position: "right-start", 11 | default: "#2B1AD3", 12 | components: { 13 | hue: true, 14 | 15 | interaction: { 16 | input: true, 17 | }, 18 | }, 19 | }); 20 | 21 | pickr.on("change", (instance) => { 22 | const selectedColor = instance.toHEXA().toString(); 23 | pickr.applyColor(); 24 | hook.pushEvent("select-color", { color: selectedColor }); 25 | }); 26 | }; 27 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/gettext.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.Gettext do 2 | @moduledoc """ 3 | A module providing Internationalization with a gettext-based API. 4 | 5 | By using [Gettext](https://hexdocs.pm/gettext), 6 | your module gains a set of macros for translations, for example: 7 | 8 | import BetterBigCanvasWeb.Gettext 9 | 10 | # Simple translation 11 | gettext("Here is the string to translate") 12 | 13 | # Plural translation 14 | ngettext("Here is the string to translate", 15 | "Here are the strings to translate", 16 | 3) 17 | 18 | # Domain-based translation 19 | dgettext("errors", "Here is the error message to translate") 20 | 21 | See the [Gettext Docs](https://hexdocs.pm/gettext) for detailed usage. 22 | """ 23 | use Gettext, otp_app: :better_big_canvas 24 | end 25 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/router.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.Router do 2 | use BetterBigCanvasWeb, :router 3 | 4 | import Plug.BasicAuth 5 | 6 | pipeline :browser do 7 | plug :accepts, ["html"] 8 | plug :fetch_session 9 | plug :fetch_live_flash 10 | plug :put_root_layout, {BetterBigCanvasWeb.LayoutView, :root} 11 | plug :protect_from_forgery 12 | plug :put_secure_browser_headers 13 | end 14 | 15 | pipeline :api do 16 | plug :accepts, ["json"] 17 | end 18 | 19 | pipeline :protected do 20 | plug :basic_auth, 21 | Application.compile_env(:better_big_canvas, :basic_auth) || 22 | [username: "username", password: "password"] 23 | end 24 | 25 | scope "/reset", BetterBigCanvasWeb do 26 | pipe_through [:browser, :protected] 27 | 28 | live "/", ResetLive 29 | end 30 | 31 | scope "/", BetterBigCanvasWeb do 32 | pipe_through :browser 33 | 34 | live "/", BoardLive 35 | live "/:id", CanvasLive 36 | end 37 | end 38 | -------------------------------------------------------------------------------- /lib/better_big_canvas/square.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvas.Square do 2 | require Amnesia 3 | require Amnesia.Helper 4 | require Exquisite 5 | require Database.Square 6 | 7 | alias Database.Square 8 | 9 | @board_range 1..400 10 | @canvas_range 0..899 11 | @white "#FFFFFF" 12 | 13 | def update(data, id) do 14 | Amnesia.transaction do 15 | Square.write(%Square{data: data, id: id}) 16 | end 17 | end 18 | 19 | def read(id) do 20 | Amnesia.transaction do 21 | id 22 | |> Square.read() 23 | |> Map.get(:data) 24 | end 25 | end 26 | 27 | def create_and_populate do 28 | :mnesia.stop() 29 | :mnesia.delete_schema([node()]) 30 | :mnesia.create_schema([node()]) 31 | :mnesia.start() 32 | :mnesia.create_table(Square, attributes: [:id, :data], disc_only_copies: [node()]) 33 | 34 | Enum.each(@board_range, &update(set_data(), &1)) 35 | end 36 | 37 | defp set_data, do: Enum.map(@canvas_range, &{String.to_atom("#{&1}"), @white}) 38 | end 39 | -------------------------------------------------------------------------------- /assets/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "repository": {}, 3 | "description": " ", 4 | "license": "MIT", 5 | "scripts": { 6 | "deploy": "webpack --mode production", 7 | "watch": "webpack --mode development --watch" 8 | }, 9 | "dependencies": { 10 | "@simonwep/pickr": "^1.8.1", 11 | "nprogress": "^0.2.0", 12 | "phoenix": "file:../deps/phoenix", 13 | "phoenix_html": "file:../deps/phoenix_html", 14 | "phoenix_live_view": "file:../deps/phoenix_live_view" 15 | }, 16 | "devDependencies": { 17 | "@babel/core": "^7.14.6", 18 | "@babel/preset-env": "^7.14.7", 19 | "babel-loader": "^8.2.2", 20 | "copy-webpack-plugin": "^5.1.2", 21 | "css-loader": "^3.4.2", 22 | "hard-source-webpack-plugin": "^0.13.1", 23 | "mini-css-extract-plugin": "^0.9.0", 24 | "node-sass": "^4.13.1", 25 | "optimize-css-assets-webpack-plugin": "^5.0.8", 26 | "sass-loader": "^8.0.2", 27 | "terser-webpack-plugin": "^2.3.8", 28 | "webpack": "4.41.5", 29 | "webpack-cli": "^3.3.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/templates/layout/root.html.leex: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= csrf_meta_tag() %> 8 | <%= live_title_tag assigns[:page_title] || "Better Big Canvas" %> 9 | "/> 10 | 11 | 12 | 13 |
14 |
15 | 18 | Coded with 🖤 by Christian Tovar 19 |
20 |
21 | <%= @inner_content %> 22 | 23 | 24 | -------------------------------------------------------------------------------- /config/prod.secret.exs: -------------------------------------------------------------------------------- 1 | # In this file, we load production configuration and secrets 2 | # from environment variables. You can also hardcode secrets, 3 | # although such is generally not recommended and you have to 4 | # remember to add this file to your .gitignore. 5 | use Mix.Config 6 | 7 | secret_key_base = 8 | System.get_env("SECRET_KEY_BASE") || 9 | raise """ 10 | environment variable SECRET_KEY_BASE is missing. 11 | You can generate one by calling: mix phx.gen.secret 12 | """ 13 | 14 | config :better_big_canvas, BetterBigCanvasWeb.Endpoint, 15 | http: [ 16 | port: String.to_integer(System.get_env("PORT") || "4000"), 17 | transport_options: [socket_opts: [:inet6]] 18 | ], 19 | secret_key_base: secret_key_base 20 | 21 | # ## Using releases (Elixir v1.9+) 22 | # 23 | # If you are doing OTP releases, you need to instruct Phoenix 24 | # to start each relevant endpoint: 25 | # 26 | # config :better_big_canvas, BetterBigCanvasWeb.Endpoint, server: true 27 | # 28 | # Then you can assemble a release by calling `mix release`. 29 | # See `mix help release` for more information. 30 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # The directory Mix will write compiled artifacts to. 2 | /_build/ 3 | 4 | # If you run "mix test --cover", coverage assets end up here. 5 | /cover/ 6 | 7 | # The directory Mix downloads your dependencies sources to. 8 | /deps/ 9 | 10 | # Where 3rd-party dependencies like ExDoc output generated docs. 11 | /doc/ 12 | 13 | # Ignore .fetch files in case you like to edit your project deps locally. 14 | /.fetch 15 | 16 | # If the VM crashes, it generates a dump, let's ignore it too. 17 | erl_crash.dump 18 | 19 | # Also ignore archive artifacts (built via "mix archive.build"). 20 | *.ez 21 | 22 | # Ignore package tarball (built via "mix hex.build"). 23 | better_big_canvas-*.tar 24 | 25 | # If NPM crashes, it generates a log, let's ignore it too. 26 | npm-debug.log 27 | 28 | # The directory NPM downloads your dependencies sources to. 29 | /assets/node_modules/ 30 | 31 | # Since we are building assets from assets/, 32 | # we ignore priv/static. You may want to comment 33 | # this depending on your deployment strategy. 34 | /priv/static/ 35 | 36 | # Ignore various stuff 37 | /.elixir_ls 38 | .DS_Store 39 | /Mnesia.* -------------------------------------------------------------------------------- /config/config.exs: -------------------------------------------------------------------------------- 1 | # This file is responsible for configuring your application 2 | # and its dependencies with the aid of the Mix.Config module. 3 | # 4 | # This configuration file is loaded before any dependency and 5 | # is restricted to this project. 6 | 7 | # General application configuration 8 | use Mix.Config 9 | 10 | # Configures the endpoint 11 | config :better_big_canvas, BetterBigCanvasWeb.Endpoint, 12 | url: [host: "localhost"], 13 | secret_key_base: "uv/buTPcK4FLF/sVn+wTXnmbbeDxfr5CwvYT0Vn4EpVdFgKkyZrpcGxXX4rh2pe5", 14 | render_errors: [view: BetterBigCanvasWeb.ErrorView, accepts: ~w(html json), layout: false], 15 | pubsub_server: BetterBigCanvas.PubSub, 16 | live_view: [signing_salt: "2XSw0mjn"] 17 | 18 | # Configures Elixir's Logger 19 | config :logger, :console, 20 | format: "$time $metadata[$level] $message\n", 21 | metadata: [:request_id] 22 | 23 | # Use Jason for JSON parsing in Phoenix 24 | config :phoenix, :json_library, Jason 25 | 26 | # Import environment specific config. This must remain at the bottom 27 | # of this file so it overrides the configuration defined above. 28 | import_config "#{Mix.env()}.exs" 29 | -------------------------------------------------------------------------------- /test/support/channel_case.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.ChannelCase do 2 | @moduledoc """ 3 | This module defines the test case to be used by 4 | channel tests. 5 | 6 | Such tests rely on `Phoenix.ChannelTest` and also 7 | import other functionality to make it easier 8 | to build common data structures and query the data layer. 9 | 10 | Finally, if the test case interacts with the database, 11 | we enable the SQL sandbox, so changes done to the database 12 | are reverted at the end of every test. If you are using 13 | PostgreSQL, you can even run database tests asynchronously 14 | by setting `use BetterBigCanvasWeb.ChannelCase, async: true`, although 15 | this option is not recommended for other databases. 16 | """ 17 | 18 | use ExUnit.CaseTemplate 19 | 20 | using do 21 | quote do 22 | # Import conveniences for testing with channels 23 | import Phoenix.ChannelTest 24 | import BetterBigCanvasWeb.ChannelCase 25 | 26 | # The default endpoint for testing 27 | @endpoint BetterBigCanvasWeb.Endpoint 28 | end 29 | end 30 | 31 | setup _tags do 32 | :ok 33 | end 34 | end 35 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: [ master ] 6 | pull_request: 7 | branches: [ master ] 8 | 9 | jobs: 10 | test: 11 | runs-on: ubuntu-latest 12 | name: CI 13 | strategy: 14 | matrix: 15 | otp: ['24.0.1'] 16 | elixir: ['1.12.0'] 17 | env: 18 | MIX_ENV: test 19 | 20 | steps: 21 | - uses: actions/checkout@v2 22 | 23 | - name: Set up Elixir 24 | uses: erlef/setup-elixir@v1 25 | with: 26 | elixir-version: ${{ matrix.elixir }} 27 | otp-version: ${{matrix.otp}} 28 | 29 | - name: Restore dependencies cache 30 | uses: actions/cache@v2 31 | id: mix-cache 32 | with: 33 | path: deps 34 | key: ${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}-mix-${{ hashFiles('**/mix.lock') }} 35 | restore-keys: ${{ runner.os }}-${{ matrix.otp }}-${{ matrix.elixir }}-mix- 36 | 37 | - name: Install dependencies 38 | run: mix deps.get 39 | 40 | - name: Format Code 41 | run: mix format --check-formatted 42 | 43 | - name: Compile Code 44 | run: mix compile --warnings-as-errors 45 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Christian Tovar 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /lib/better_big_canvas/application.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvas.Application do 2 | # See https://hexdocs.pm/elixir/Application.html 3 | # for more information on OTP Applications 4 | @moduledoc false 5 | 6 | use Application 7 | 8 | def start(_type, _args) do 9 | children = [ 10 | # Start the Telemetry supervisor 11 | BetterBigCanvasWeb.Telemetry, 12 | # Start the PubSub system 13 | {Phoenix.PubSub, name: BetterBigCanvas.PubSub}, 14 | # Start the Endpoint (http/https) 15 | BetterBigCanvasWeb.Endpoint 16 | # Start a worker by calling: BetterBigCanvas.Worker.start_link(arg) 17 | # {BetterBigCanvas.Worker, arg} 18 | ] 19 | 20 | # See https://hexdocs.pm/elixir/Supervisor.html 21 | # for other strategies and supported options 22 | opts = [strategy: :one_for_one, name: BetterBigCanvas.Supervisor] 23 | Supervisor.start_link(children, opts) 24 | end 25 | 26 | # Tell Phoenix to update the endpoint configuration 27 | # whenever the application is updated. 28 | def config_change(changed, _new, removed) do 29 | BetterBigCanvasWeb.Endpoint.config_change(changed, removed) 30 | :ok 31 | end 32 | end 33 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/live/board_live.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.BoardLive do 2 | use Phoenix.LiveView, layout: {BetterBigCanvasWeb.LayoutView, "live.html"} 3 | 4 | alias BetterBigCanvasWeb.{BoardView, BoardComponent} 5 | alias BetterBigCanvas.Square 6 | 7 | @impl true 8 | def mount(_params, _session, socket) do 9 | if connected?(socket), do: Phoenix.PubSub.subscribe(BetterBigCanvas.PubSub, "update") 10 | 11 | {:ok, socket} 12 | end 13 | 14 | @impl true 15 | def render(assigns), do: Phoenix.View.render(BoardView, "board_live.html", assigns) 16 | 17 | @impl true 18 | def handle_info(%{id: id}, socket) do 19 | send_update(BoardComponent, id: id, version: UUID.uuid4()) 20 | 21 | {:noreply, socket} 22 | end 23 | 24 | @impl true 25 | def handle_event("canvas-mounted", %{"id" => id}, socket), 26 | do: {:noreply, push_event(socket, "pixels", %{id: id, pixels: get_pixels(id)})} 27 | 28 | def handle_event("canvas-ready", %{"id" => id}, socket), 29 | do: {:noreply, push_event(socket, "new-pixels", %{id: id, pixels: get_pixels(id)})} 30 | 31 | defp get_pixels(id) do 32 | id 33 | |> String.to_integer() 34 | |> Square.read() 35 | |> Keyword.values() 36 | end 37 | end 38 | -------------------------------------------------------------------------------- /test/support/conn_case.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.ConnCase do 2 | @moduledoc """ 3 | This module defines the test case to be used by 4 | tests that require setting up a connection. 5 | 6 | Such tests rely on `Phoenix.ConnTest` and also 7 | import other functionality to make it easier 8 | to build common data structures and query the data layer. 9 | 10 | Finally, if the test case interacts with the database, 11 | we enable the SQL sandbox, so changes done to the database 12 | are reverted at the end of every test. If you are using 13 | PostgreSQL, you can even run database tests asynchronously 14 | by setting `use BetterBigCanvasWeb.ConnCase, async: true`, although 15 | this option is not recommended for other databases. 16 | """ 17 | 18 | use ExUnit.CaseTemplate 19 | 20 | using do 21 | quote do 22 | # Import conveniences for testing with connections 23 | import Plug.Conn 24 | import Phoenix.ConnTest 25 | import BetterBigCanvasWeb.ConnCase 26 | 27 | alias BetterBigCanvasWeb.Router.Helpers, as: Routes 28 | 29 | # The default endpoint for testing 30 | @endpoint BetterBigCanvasWeb.Endpoint 31 | end 32 | end 33 | 34 | setup _tags do 35 | {:ok, conn: Phoenix.ConnTest.build_conn()} 36 | end 37 | end 38 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/channels/user_socket.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.UserSocket do 2 | use Phoenix.Socket 3 | 4 | ## Channels 5 | # channel "room:*", BetterBigCanvasWeb.RoomChannel 6 | 7 | # Socket params are passed from the client and can 8 | # be used to verify and authenticate a user. After 9 | # verification, you can put default assigns into 10 | # the socket that will be set for all channels, ie 11 | # 12 | # {:ok, assign(socket, :user_id, verified_user_id)} 13 | # 14 | # To deny connection, return `:error`. 15 | # 16 | # See `Phoenix.Token` documentation for examples in 17 | # performing token verification on connect. 18 | @impl true 19 | def connect(_params, socket, _connect_info) do 20 | {:ok, socket} 21 | end 22 | 23 | # Socket id's are topics that allow you to identify all sockets for a given user: 24 | # 25 | # def id(socket), do: "user_socket:#{socket.assigns.user_id}" 26 | # 27 | # Would allow you to broadcast a "disconnect" event and terminate 28 | # all active sockets and channels for a given user: 29 | # 30 | # BetterBigCanvasWeb.Endpoint.broadcast("user_socket:#{user.id}", "disconnect", %{}) 31 | # 32 | # Returning `nil` makes this socket anonymous. 33 | @impl true 34 | def id(_socket), do: nil 35 | end 36 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/templates/canvas/canvas_live.html.leex: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | <%= for i <- row_enumerable() do %> 6 |
7 | <%= for j <- 0..29 do %> 8 |
9 | <%= live_component @socket, BetterBigCanvasWeb.CanvasComponent, id: i + j, pickr_color: @pickr_color, parent_id: @parent_id %> 10 |
11 | <% end %> 12 |
13 | <% end %> 14 |
15 |
16 | 17 | 18 |
19 |
20 |
21 | 22 |
23 | 24 |
25 |
26 |
27 | " alt="Arrow"/> 28 |
29 |
30 | 31 | 32 |
33 |
34 | " alt="Return"/> 35 |
36 |
37 | 38 |
39 |
40 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/live/canvas_component.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.CanvasComponent do 2 | use Phoenix.LiveComponent 3 | 4 | alias BetterBigCanvas.Square 5 | 6 | def update(assigns, socket) do 7 | current_color = get_current_color(assigns) 8 | 9 | {:ok, assign(socket, Map.put(assigns, :color, current_color))} 10 | end 11 | 12 | def render(assigns) do 13 | ~L""" 14 |
style=<%= "background-color:#{@color};" %>>
15 | """ 16 | end 17 | 18 | def handle_event("click", _, %{assigns: assigns} = socket) do 19 | update_color(assigns) 20 | 21 | {:noreply, assign(socket, color: assigns.pickr_color)} 22 | end 23 | 24 | defp get_canvas_data(id) do 25 | id 26 | |> String.to_integer() 27 | |> Square.read() 28 | end 29 | 30 | defp get_current_color(%{parent_id: parent_id, id: id}) do 31 | parent_id 32 | |> get_canvas_data() 33 | |> Keyword.get(String.to_atom("#{id}")) 34 | end 35 | 36 | defp update_color(%{pickr_color: new_color, parent_id: parent_id, id: id}) do 37 | parent_id 38 | |> get_canvas_data() 39 | |> Keyword.replace!(String.to_atom("#{id}"), new_color) 40 | |> Square.update(String.to_integer(parent_id)) 41 | 42 | Phoenix.PubSub.broadcast(BetterBigCanvas.PubSub, "update", %{id: String.to_integer(parent_id)}) 43 | end 44 | end 45 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/telemetry.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.Telemetry do 2 | use Supervisor 3 | import Telemetry.Metrics 4 | 5 | def start_link(arg) do 6 | Supervisor.start_link(__MODULE__, arg, name: __MODULE__) 7 | end 8 | 9 | @impl true 10 | def init(_arg) do 11 | children = [ 12 | # Telemetry poller will execute the given period measurements 13 | # every 10_000ms. Learn more here: https://hexdocs.pm/telemetry_metrics 14 | {:telemetry_poller, measurements: periodic_measurements(), period: 10_000} 15 | # Add reporters as children of your supervision tree. 16 | # {Telemetry.Metrics.ConsoleReporter, metrics: metrics()} 17 | ] 18 | 19 | Supervisor.init(children, strategy: :one_for_one) 20 | end 21 | 22 | def metrics do 23 | [ 24 | # Phoenix Metrics 25 | summary("phoenix.endpoint.stop.duration", 26 | unit: {:native, :millisecond} 27 | ), 28 | summary("phoenix.router_dispatch.stop.duration", 29 | tags: [:route], 30 | unit: {:native, :millisecond} 31 | ), 32 | 33 | # VM Metrics 34 | summary("vm.memory.total", unit: {:byte, :kilobyte}), 35 | summary("vm.total_run_queue_lengths.total"), 36 | summary("vm.total_run_queue_lengths.cpu"), 37 | summary("vm.total_run_queue_lengths.io") 38 | ] 39 | end 40 | 41 | defp periodic_measurements do 42 | [ 43 | # A module, function and arguments to be invoked periodically. 44 | # This function must call :telemetry.execute/3 and a metric must be added above. 45 | # {BetterBigCanvasWeb, :count_users, []} 46 | ] 47 | end 48 | end 49 | -------------------------------------------------------------------------------- /assets/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const glob = require('glob'); 3 | const HardSourceWebpackPlugin = require('hard-source-webpack-plugin'); 4 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 5 | const TerserPlugin = require('terser-webpack-plugin'); 6 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); 7 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 8 | 9 | module.exports = (env, options) => { 10 | const devMode = options.mode !== 'production'; 11 | 12 | return { 13 | optimization: { 14 | minimizer: [ 15 | new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }), 16 | new OptimizeCSSAssetsPlugin({}) 17 | ] 18 | }, 19 | entry: { 20 | 'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']) 21 | }, 22 | output: { 23 | filename: '[name].js', 24 | path: path.resolve(__dirname, '../priv/static/js'), 25 | publicPath: '/js/' 26 | }, 27 | devtool: devMode ? 'eval-cheap-module-source-map' : undefined, 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.js$/, 32 | exclude: /node_modules/, 33 | use: { 34 | loader: 'babel-loader' 35 | } 36 | }, 37 | { 38 | test: /\.[s]?css$/, 39 | use: [ 40 | MiniCssExtractPlugin.loader, 41 | 'css-loader', 42 | 'sass-loader', 43 | ], 44 | } 45 | ] 46 | }, 47 | plugins: [ 48 | new MiniCssExtractPlugin({ filename: '../css/app.css' }), 49 | new CopyWebpackPlugin([{ from: 'static/', to: '../' }]) 50 | ] 51 | .concat(devMode ? [new HardSourceWebpackPlugin()] : []) 52 | } 53 | }; 54 | -------------------------------------------------------------------------------- /assets/css/app.scss: -------------------------------------------------------------------------------- 1 | /* This file is for your main application css. */ 2 | @import "./phoenix.css"; 3 | @import "../node_modules/nprogress/nprogress.css"; 4 | 5 | /* LiveView specific classes for your customizations */ 6 | .phx-no-feedback.invalid-feedback, 7 | .phx-no-feedback .invalid-feedback { 8 | display: none; 9 | } 10 | 11 | .phx-click-loading { 12 | opacity: 0.5; 13 | transition: opacity 1s ease-out; 14 | } 15 | 16 | .phx-disconnected { 17 | cursor: wait; 18 | } 19 | .phx-disconnected * { 20 | pointer-events: none; 21 | } 22 | 23 | // BBC 24 | .row { 25 | margin: 0 !important; 26 | width: 30px; 27 | } 28 | .column { 29 | padding: 0 !important; 30 | } 31 | .board { 32 | margin: auto; 33 | border-style: solid; 34 | border-color: black; 35 | border-width: 1px; 36 | height: 602px; 37 | width: 602px; 38 | } 39 | .board-square { 40 | border-color: rgba(128, 128, 128, 0.08); 41 | border-width: 1px; 42 | height: 30px; 43 | width: 30px; 44 | 45 | &:hover { 46 | background-color: rgba(0, 0, 0, 0.05); 47 | border-color: black; 48 | } 49 | } 50 | .canvas-square { 51 | border-color: rgba(128, 128, 128, 0.08); 52 | border-width: 1px; 53 | height: 20px; 54 | width: 20px; 55 | 56 | &:hover { 57 | background-color: rgba(0, 0, 0, 0.05); 58 | border-color: black; 59 | } 60 | } 61 | .pickr-button { 62 | width: 30px !important; 63 | height: 30px !important; 64 | margin-bottom: -910px !important; 65 | margin-left: 590px !important; 66 | } 67 | .arrow { 68 | width: 160px !important; 69 | height: 200px !important; 70 | margin-top: -580px; 71 | margin-left: 650px; 72 | } 73 | .return { 74 | width: 200px !important; 75 | height: 240px !important; 76 | margin-left: -280px; 77 | margin-top: -600px; 78 | } 79 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/views/error_helpers.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.ErrorHelpers do 2 | @moduledoc """ 3 | Conveniences for translating and building error messages. 4 | """ 5 | 6 | use Phoenix.HTML 7 | 8 | @doc """ 9 | Generates tag for inlined form input errors. 10 | """ 11 | def error_tag(form, field) do 12 | Enum.map(Keyword.get_values(form.errors, field), fn error -> 13 | content_tag(:span, translate_error(error), 14 | class: "invalid-feedback", 15 | phx_feedback_for: input_id(form, field) 16 | ) 17 | end) 18 | end 19 | 20 | @doc """ 21 | Translates an error message using gettext. 22 | """ 23 | def translate_error({msg, opts}) do 24 | # When using gettext, we typically pass the strings we want 25 | # to translate as a static argument: 26 | # 27 | # # Translate "is invalid" in the "errors" domain 28 | # dgettext("errors", "is invalid") 29 | # 30 | # # Translate the number of files with plural rules 31 | # dngettext("errors", "1 file", "%{count} files", count) 32 | # 33 | # Because the error messages we show in our forms and APIs 34 | # are defined inside Ecto, we need to translate them dynamically. 35 | # This requires us to call the Gettext module passing our gettext 36 | # backend as first argument. 37 | # 38 | # Note we use the "errors" domain, which means translations 39 | # should be written to the errors.po file. The :count option is 40 | # set by Ecto and indicates we should also apply plural rules. 41 | if count = opts[:count] do 42 | Gettext.dngettext(BetterBigCanvasWeb.Gettext, "errors", msg, msg, count, opts) 43 | else 44 | Gettext.dgettext(BetterBigCanvasWeb.Gettext, "errors", msg, opts) 45 | end 46 | end 47 | end 48 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web/endpoint.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb.Endpoint do 2 | use Phoenix.Endpoint, otp_app: :better_big_canvas 3 | 4 | # The session will be stored in the cookie and signed, 5 | # this means its contents can be read but not tampered with. 6 | # Set :encryption_salt if you would also like to encrypt it. 7 | @session_options [ 8 | store: :cookie, 9 | key: "_better_big_canvas_key", 10 | signing_salt: "t6+dIyEi" 11 | ] 12 | 13 | socket "/socket", BetterBigCanvasWeb.UserSocket, 14 | websocket: true, 15 | longpoll: false 16 | 17 | socket "/live", Phoenix.LiveView.Socket, websocket: [connect_info: [session: @session_options]] 18 | 19 | # Serve at "/" the static files from "priv/static" directory. 20 | # 21 | # You should set gzip to true if you are running phx.digest 22 | # when deploying your static files in production. 23 | plug Plug.Static, 24 | at: "/", 25 | from: :better_big_canvas, 26 | gzip: false, 27 | only: ~w(css fonts images js favicon.ico robots.txt) 28 | 29 | # Code reloading can be explicitly enabled under the 30 | # :code_reloader configuration of your endpoint. 31 | if code_reloading? do 32 | socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket 33 | plug Phoenix.LiveReloader 34 | plug Phoenix.CodeReloader 35 | end 36 | 37 | plug Phoenix.LiveDashboard.RequestLogger, 38 | param_key: "request_logger", 39 | cookie_key: "request_logger" 40 | 41 | plug Plug.RequestId 42 | plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint] 43 | 44 | plug Plug.Parsers, 45 | parsers: [:urlencoded, :multipart, :json], 46 | pass: ["*/*"], 47 | json_decoder: Phoenix.json_library() 48 | 49 | plug Plug.MethodOverride 50 | plug Plug.Head 51 | plug Plug.Session, @session_options 52 | plug BetterBigCanvasWeb.Router 53 | end 54 | -------------------------------------------------------------------------------- /mix.exs: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvas.MixProject do 2 | use Mix.Project 3 | 4 | def project do 5 | [ 6 | app: :better_big_canvas, 7 | version: "0.1.0", 8 | elixir: "~> 1.7", 9 | elixirc_paths: elixirc_paths(Mix.env()), 10 | compilers: [:phoenix, :gettext] ++ Mix.compilers(), 11 | start_permanent: Mix.env() == :prod, 12 | aliases: aliases(), 13 | deps: deps() 14 | ] 15 | end 16 | 17 | # Configuration for the OTP application. 18 | # 19 | # Type `mix help compile.app` for more information. 20 | def application do 21 | [ 22 | mod: {BetterBigCanvas.Application, []}, 23 | extra_applications: [:logger, :runtime_tools] 24 | ] 25 | end 26 | 27 | # Specifies which paths to compile per environment. 28 | defp elixirc_paths(:test), do: ["lib", "test/support"] 29 | defp elixirc_paths(_), do: ["lib"] 30 | 31 | # Specifies your project dependencies. 32 | # 33 | # Type `mix help deps` for examples and options. 34 | defp deps do 35 | [ 36 | {:phoenix, "~> 1.5.4"}, 37 | {:phoenix_live_view, "~> 0.14.2"}, 38 | {:floki, ">= 0.0.0", only: :test}, 39 | {:phoenix_html, "~> 2.11"}, 40 | {:phoenix_live_reload, "~> 1.2", only: :dev}, 41 | {:phoenix_live_dashboard, "~> 0.2"}, 42 | {:telemetry_metrics, "~> 0.4"}, 43 | {:telemetry_poller, "~> 0.4"}, 44 | {:gettext, "~> 0.11"}, 45 | {:jason, "~> 1.0"}, 46 | {:plug_cowboy, "~> 2.0"}, 47 | {:elixir_uuid, "~> 1.2"}, 48 | {:amnesia, "~> 0.2.8"} 49 | ] 50 | end 51 | 52 | # Aliases are shortcuts or tasks specific to the current project. 53 | # For example, to install project dependencies and perform other setup tasks, run: 54 | # 55 | # $ mix setup 56 | # 57 | # See the documentation for `Mix` for more info on aliases. 58 | defp aliases do 59 | [ 60 | setup: ["deps.get", "cmd npm install --prefix assets"] 61 | ] 62 | end 63 | end 64 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Better Big Canvas 2 | 3 | [![Worflow Badge](https://github.com/ChristianTovar/better-big-canvas/workflows/CI/badge.svg)](https://github.com/ChristianTovar/better-big-canvas/actions) 4 | [![License badge](https://img.shields.io/hexpm/l/repo_example.svg)](https://github.com/ChristianTovar/ygo/blob/master/LICENSE.txt) 5 | 6 | ## Description 7 | 8 | __Better Big Canvas__ is an improved version of Tech Lead's __Big Canvas__ written in Elixir from scratch. It uses Phoenix LiveView for server side rendering and supports real-time pubsub drawing support. For more information regarding how this application was implemented, visit the following [post](https://blog.kommit.co/improving-techleads-big-canvas-1fca6806c0ac). 9 | 10 | --- 11 | ## Getting Started 12 | 13 | To start __Better Big Canvas__: 14 | 15 | * Install dependencies with `mix deps.get` 16 | * Install Node.js dependencies with `npm install` inside the `assets` directory 17 | * Start Phoenix endpoint with `mix phx.server` 18 | * Create/Reset the mnesia database by visiting [`localhost:4000/reset`](http://localhost:4000/reset) 19 | 20 | Now you can visit [`localhost:4000`](http://localhost:4000) from your browser, enjoy drawing to your heart's content! 21 | 22 | --- 23 | ## Drawing Example 24 | 25 | Click on any square from the main board, you'll be redirected to a canvas where you can draw anything you want. If you return to the main board, you can preview what you just drew, take a look: 26 | 27 | ![Draw Example](draw_example.gif) 28 | 29 | ## Real-Time Example 30 | 31 | One of the main features of __Better Big Canvas__, is the ability to update the previews of the main board in real-time! Everytime you update a canvas, the changes will be immediately reflected on the correspoding preview canvas of the board. Here's an example of 2 browser windows opened at the same time, if a canvas is edited, the main board will reflect those changes: 32 | 33 | ![Draw Example](realtime_example.gif) 34 | 35 | ## License 36 | 37 | MIT. See the [`LICENSE.md`](LICENSE.md) in this repository for more details. 38 | -------------------------------------------------------------------------------- /config/dev.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # For development, we disable any cache and enable 4 | # debugging and code reloading. 5 | # 6 | # The watchers configuration can be used to run external 7 | # watchers to your application. For example, we use it 8 | # with webpack to recompile .js and .css sources. 9 | config :better_big_canvas, BetterBigCanvasWeb.Endpoint, 10 | http: [port: 4000], 11 | debug_errors: true, 12 | code_reloader: true, 13 | check_origin: false, 14 | watchers: [ 15 | node: [ 16 | "node_modules/webpack/bin/webpack.js", 17 | "--mode", 18 | "development", 19 | "--watch-stdin", 20 | cd: Path.expand("../assets", __DIR__) 21 | ] 22 | ] 23 | 24 | # ## SSL Support 25 | # 26 | # In order to use HTTPS in development, a self-signed 27 | # certificate can be generated by running the following 28 | # Mix task: 29 | # 30 | # mix phx.gen.cert 31 | # 32 | # Note that this task requires Erlang/OTP 20 or later. 33 | # Run `mix help phx.gen.cert` for more information. 34 | # 35 | # The `http:` config above can be replaced with: 36 | # 37 | # https: [ 38 | # port: 4001, 39 | # cipher_suite: :strong, 40 | # keyfile: "priv/cert/selfsigned_key.pem", 41 | # certfile: "priv/cert/selfsigned.pem" 42 | # ], 43 | # 44 | # If desired, both `http:` and `https:` keys can be 45 | # configured to run both http and https servers on 46 | # different ports. 47 | 48 | # Watch static and templates for browser reloading. 49 | config :better_big_canvas, BetterBigCanvasWeb.Endpoint, 50 | live_reload: [ 51 | patterns: [ 52 | ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$", 53 | ~r"priv/gettext/.*(po)$", 54 | ~r"lib/better_big_canvas_web/(live|views)/.*(ex)$", 55 | ~r"lib/better_big_canvas_web/templates/.*(eex)$" 56 | ] 57 | ] 58 | 59 | # Do not include metadata nor timestamps in development logs 60 | config :logger, :console, format: "[$level] $message\n" 61 | 62 | # Set a higher stacktrace during development. Avoid configuring such 63 | # in production as building large stacktraces may be expensive. 64 | config :phoenix, :stacktrace_depth, 20 65 | 66 | # Initialize plugs at runtime for faster development compilation 67 | config :phoenix, :plug_init_mode, :runtime 68 | -------------------------------------------------------------------------------- /config/prod.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # For production, don't forget to configure the url host 4 | # to something meaningful, Phoenix uses this information 5 | # when generating URLs. 6 | # 7 | # Note we also include the path to a cache manifest 8 | # containing the digested version of static files. This 9 | # manifest is generated by the `mix phx.digest` task, 10 | # which you should run after static files are built and 11 | # before starting your production server. 12 | config :better_big_canvas, BetterBigCanvasWeb.Endpoint, 13 | url: [host: "example.com", port: 80], 14 | cache_static_manifest: "priv/static/cache_manifest.json" 15 | 16 | # Do not print debug messages in production 17 | config :logger, level: :info 18 | 19 | # Basic HTTP Authentication 20 | config :better_big_canvas, :basic_auth, 21 | username: System.get_env("USERNAME"), 22 | password: System.get_env("PASSWORD") 23 | 24 | # ## SSL Support 25 | # 26 | # To get SSL working, you will need to add the `https` key 27 | # to the previous section and set your `:url` port to 443: 28 | # 29 | # config :better_big_canvas, BetterBigCanvasWeb.Endpoint, 30 | # ... 31 | # url: [host: "example.com", port: 443], 32 | # https: [ 33 | # port: 443, 34 | # cipher_suite: :strong, 35 | # keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"), 36 | # certfile: System.get_env("SOME_APP_SSL_CERT_PATH"), 37 | # transport_options: [socket_opts: [:inet6]] 38 | # ] 39 | # 40 | # The `cipher_suite` is set to `:strong` to support only the 41 | # latest and more secure SSL ciphers. This means old browsers 42 | # and clients may not be supported. You can set it to 43 | # `:compatible` for wider support. 44 | # 45 | # `:keyfile` and `:certfile` expect an absolute path to the key 46 | # and cert in disk or a relative path inside priv, for example 47 | # "priv/ssl/server.key". For all supported SSL configuration 48 | # options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1 49 | # 50 | # We also recommend setting `force_ssl` in your endpoint, ensuring 51 | # no data is ever sent via http, always redirecting to https: 52 | # 53 | # config :better_big_canvas, BetterBigCanvasWeb.Endpoint, 54 | # force_ssl: [hsts: true] 55 | # 56 | # Check `Plug.SSL` for all available options in `force_ssl`. 57 | 58 | # Finally import the config/prod.secret.exs which loads secrets 59 | # and configuration from environment variables. 60 | import_config "prod.secret.exs" 61 | -------------------------------------------------------------------------------- /assets/js/app.js: -------------------------------------------------------------------------------- 1 | // We need to import the CSS so that webpack will load it. 2 | // The MiniCssExtractPlugin is used to separate it out into 3 | // its own CSS file. 4 | import "../css/app.scss"; 5 | 6 | // webpack automatically bundles all modules in your 7 | // entry points. Those entry points can be configured 8 | // in "webpack.config.js". 9 | // 10 | // Import deps with the dep name or local files with a relative path, for example: 11 | // 12 | // import {Socket} from "phoenix" 13 | // import socket from "./socket" 14 | // 15 | import "phoenix_html"; 16 | import { Socket } from "phoenix"; 17 | import NProgress from "nprogress"; 18 | import { LiveSocket } from "phoenix_live_view"; 19 | import { ColorPickr } from "./pickr"; 20 | import { Canvas } from "./canvas"; 21 | 22 | let Hooks = {}; 23 | 24 | Hooks.ColorPickr = { 25 | mounted() { 26 | ColorPickr(this); 27 | }, 28 | }; 29 | 30 | Hooks.Canvas = { 31 | mounted() { 32 | this.handleEvent("pixels", ({ id, pixels }) => { 33 | if (id == this.el.id) { 34 | Canvas(this, pixels); 35 | } 36 | }); 37 | 38 | this.pushEvent("canvas-mounted", { id: this.el.id }); 39 | }, 40 | beforeUpdate() { 41 | this.handleEvent("new-pixels", ({ id, pixels }) => { 42 | if (id == this.el.id && pixels.length) { 43 | Canvas(this, pixels); 44 | } 45 | }); 46 | 47 | this.pushEvent("canvas-ready", { id: this.el.id }); 48 | }, 49 | }; 50 | 51 | Hooks.OnClick = { 52 | mounted() { 53 | const element = this.el; 54 | 55 | element.addEventListener("mouseover", (event) => { 56 | if (event.buttons) { 57 | this.pushEventTo(`#${element.id}`, "click", {}); 58 | } 59 | }); 60 | 61 | element.addEventListener("mousedown", (event) => { 62 | this.pushEventTo(`#${element.id}`, "click", {}); 63 | }); 64 | }, 65 | }; 66 | 67 | let csrfToken = document 68 | .querySelector("meta[name='csrf-token']") 69 | .getAttribute("content"); 70 | let liveSocket = new LiveSocket("/live", Socket, { 71 | params: { _csrf_token: csrfToken }, 72 | hooks: Hooks, 73 | }); 74 | 75 | // Show progress bar on live navigation and form submits 76 | window.addEventListener("phx:page-loading-start", (info) => NProgress.start()); 77 | window.addEventListener("phx:page-loading-stop", (info) => NProgress.done()); 78 | 79 | // connect if there are any LiveViews on the page 80 | liveSocket.connect(); 81 | 82 | // expose liveSocket on window for web console debug logs and latency simulation: 83 | // >> liveSocket.enableDebug() 84 | // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session 85 | // >> liveSocket.disableLatencySim() 86 | window.liveSocket = liveSocket; 87 | -------------------------------------------------------------------------------- /lib/better_big_canvas_web.ex: -------------------------------------------------------------------------------- 1 | defmodule BetterBigCanvasWeb do 2 | @moduledoc """ 3 | The entrypoint for defining your web interface, such 4 | as controllers, views, channels and so on. 5 | 6 | This can be used in your application as: 7 | 8 | use BetterBigCanvasWeb, :controller 9 | use BetterBigCanvasWeb, :view 10 | 11 | The definitions below will be executed for every view, 12 | controller, etc, so keep them short and clean, focused 13 | on imports, uses and aliases. 14 | 15 | Do NOT define functions inside the quoted expressions 16 | below. Instead, define any helper function in modules 17 | and import those modules here. 18 | """ 19 | 20 | def controller do 21 | quote do 22 | use Phoenix.Controller, namespace: BetterBigCanvasWeb 23 | 24 | import Plug.Conn 25 | import BetterBigCanvasWeb.Gettext 26 | alias BetterBigCanvasWeb.Router.Helpers, as: Routes 27 | end 28 | end 29 | 30 | def view do 31 | quote do 32 | use Phoenix.View, 33 | root: "lib/better_big_canvas_web/templates", 34 | namespace: BetterBigCanvasWeb 35 | 36 | # Import convenience functions from controllers 37 | import Phoenix.Controller, 38 | only: [get_flash: 1, get_flash: 2, view_module: 1, view_template: 1] 39 | 40 | # Include shared imports and aliases for views 41 | unquote(view_helpers()) 42 | end 43 | end 44 | 45 | def live_view do 46 | quote do 47 | use Phoenix.LiveView, 48 | layout: {BetterBigCanvasWeb.LayoutView, "live.html"} 49 | 50 | unquote(view_helpers()) 51 | end 52 | end 53 | 54 | def live_component do 55 | quote do 56 | use Phoenix.LiveComponent 57 | 58 | unquote(view_helpers()) 59 | end 60 | end 61 | 62 | def router do 63 | quote do 64 | use Phoenix.Router 65 | 66 | import Plug.Conn 67 | import Phoenix.Controller 68 | import Phoenix.LiveView.Router 69 | end 70 | end 71 | 72 | def channel do 73 | quote do 74 | use Phoenix.Channel 75 | import BetterBigCanvasWeb.Gettext 76 | end 77 | end 78 | 79 | defp view_helpers do 80 | quote do 81 | # Use all HTML functionality (forms, tags, etc) 82 | use Phoenix.HTML 83 | 84 | # Import LiveView helpers (live_render, live_component, live_patch, etc) 85 | import Phoenix.LiveView.Helpers 86 | 87 | # Import basic rendering functionality (render, render_layout, etc) 88 | import Phoenix.View 89 | 90 | import BetterBigCanvasWeb.ErrorHelpers 91 | import BetterBigCanvasWeb.Gettext 92 | alias BetterBigCanvasWeb.Router.Helpers, as: Routes 93 | end 94 | end 95 | 96 | @doc """ 97 | When used, dispatch to the appropriate controller/view/etc. 98 | """ 99 | defmacro __using__(which) when is_atom(which) do 100 | apply(__MODULE__, which, []) 101 | end 102 | end 103 | -------------------------------------------------------------------------------- /mix.lock: -------------------------------------------------------------------------------- 1 | %{ 2 | "amnesia": {:hex, :amnesia, "0.2.8", "81199a1c4c8db886cfb8ea159f746d5ffdb188bee96cb944f63bdb4465b09fa0", [:mix], [{:exquisite, "~> 0.1.7", [hex: :exquisite, repo: "hexpm", optional: false]}], "hexpm", "6037898c974457809ffa1f9a74cccab8f48c99b206aee9b3fc7bb3af73b06b14"}, 3 | "cowboy": {:hex, :cowboy, "2.9.0", "865dd8b6607e14cf03282e10e934023a1bd8be6f6bacf921a7e2a96d800cd452", [:make, :rebar3], [{:cowlib, "2.11.0", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "1.8.0", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "2c729f934b4e1aa149aff882f57c6372c15399a20d54f65c8d67bef583021bde"}, 4 | "cowboy_telemetry": {:hex, :cowboy_telemetry, "0.3.1", "ebd1a1d7aff97f27c66654e78ece187abdc646992714164380d8a041eda16754", [:rebar3], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "3a6efd3366130eab84ca372cbd4a7d3c3a97bdfcfb4911233b035d117063f0af"}, 5 | "cowlib": {:hex, :cowlib, "2.11.0", "0b9ff9c346629256c42ebe1eeb769a83c6cb771a6ee5960bd110ab0b9b872063", [:make, :rebar3], [], "hexpm", "2b3e9da0b21c4565751a6d4901c20d1b4cc25cbb7fd50d91d2ab6dd287bc86a9"}, 6 | "elixir_uuid": {:hex, :elixir_uuid, "1.2.1", "dce506597acb7e6b0daeaff52ff6a9043f5919a4c3315abb4143f0b00378c097", [:mix], [], "hexpm", "f7eba2ea6c3555cea09706492716b0d87397b88946e6380898c2889d68585752"}, 7 | "exquisite": {:hex, :exquisite, "0.1.10", "e3ca4f8b812696a40a6da3bcd4e9861cef879ee2eb239d5485b0f96885fc9fba", [:mix], [], "hexpm", "0af9319851f1e21dd4adab812c82247f05e11cc19820fa17cc74afd696e2313c"}, 8 | "file_system": {:hex, :file_system, "0.2.10", "fb082005a9cd1711c05b5248710f8826b02d7d1784e7c3451f9c1231d4fc162d", [:mix], [], "hexpm", "41195edbfb562a593726eda3b3e8b103a309b733ad25f3d642ba49696bf715dc"}, 9 | "floki": {:hex, :floki, "0.31.0", "f05ee8a8e6a3ced4e62beeb2c79a63bc8e12ab98fbaaf6e6a3d9b76b1278e23f", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "b05afa372f5c345a5bf240ac25ea1f0f3d5fcfd7490ac0beeb4a203f9444891e"}, 10 | "gettext": {:hex, :gettext, "0.18.2", "7df3ea191bb56c0309c00a783334b288d08a879f53a7014341284635850a6e55", [:mix], [], "hexpm", "f9f537b13d4fdd30f3039d33cb80144c3aa1f8d9698e47d7bcbcc8df93b1f5c5"}, 11 | "html_entities": {:hex, :html_entities, "0.5.2", "9e47e70598da7de2a9ff6af8758399251db6dbb7eebe2b013f2bbd2515895c3c", [:mix], [], "hexpm", "c53ba390403485615623b9531e97696f076ed415e8d8058b1dbaa28181f4fdcc"}, 12 | "jason": {:hex, :jason, "1.2.2", "ba43e3f2709fd1aa1dce90aaabfd039d000469c05c56f0b8e31978e03fa39052", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "18a228f5f0058ee183f29f9eae0805c6e59d61c3b006760668d8d18ff0d12179"}, 13 | "mime": {:hex, :mime, "1.6.0", "dabde576a497cef4bbdd60aceee8160e02a6c89250d6c0b29e56c0dfb00db3d2", [:mix], [], "hexpm", "31a1a8613f8321143dde1dafc36006a17d28d02bdfecb9e95a880fa7aabd19a7"}, 14 | "phoenix": {:hex, :phoenix, "1.5.9", "a6368d36cfd59d917b37c44386e01315bc89f7609a10a45a22f47c007edf2597", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 2.13 or ~> 3.0", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.0", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:plug, "~> 1.10", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 1.0 or ~> 2.2", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.1.2 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "7e4bce20a67c012f1fbb0af90e5da49fa7bf0d34e3a067795703b74aef75427d"}, 15 | "phoenix_html": {:hex, :phoenix_html, "2.14.3", "51f720d0d543e4e157ff06b65de38e13303d5778a7919bcc696599e5934271b8", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "efd697a7fff35a13eeeb6b43db884705cba353a1a41d127d118fda5f90c8e80f"}, 16 | "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.3.6", "6d031e9e5fa8c671e582539e8acd549c4d6e0e90aa704f6644a4a1f5fb334608", [:mix], [{:ecto_psql_extras, "~> 0.4.1 or ~> 0.5", [hex: :ecto_psql_extras, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 2.14.1 or ~> 2.15", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.14.3", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:telemetry_metrics, "~> 0.4.0 or ~> 0.5.0 or ~> 0.6.0", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "55c891eb9cb344d6685c21f452806f54be6a660bbc090c94f65f287e8b4de002"}, 17 | "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.3.2", "812bb593fb85ab54876265379f162934c276fca04234c6b3e8bbd32a2bfbfdba", [:mix], [{:file_system, "~> 0.2.1 or ~> 0.3", [hex: :file_system, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.4", [hex: :phoenix, repo: "hexpm", optional: false]}], "hexpm", "6d6f1d3592b677d5f3d0cb743c7c322eb52d975b4ef09cb4a1273bbc9da4249e"}, 18 | "phoenix_live_view": {:hex, :phoenix_live_view, "0.14.8", "1419f2612d5623207bfd9760c110f46cc5be05173dd6b5dc019500f93b692027", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix, "~> 1.5.3", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4.2 or ~> 0.5", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "889660bdc113a6fe84fd1b840443e86d9c6bd0b851e8f3a8581c916bbc7a2099"}, 19 | "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.0.0", "a1ae76717bb168cdeb10ec9d92d1480fec99e3080f011402c0a2d68d47395ffb", [:mix], [], "hexpm", "c52d948c4f261577b9c6fa804be91884b381a7f8f18450c5045975435350f771"}, 20 | "plug": {:hex, :plug, "1.11.1", "f2992bac66fdae679453c9e86134a4201f6f43a687d8ff1cd1b2862d53c80259", [:mix], [{:mime, "~> 1.0", [hex: :mime, repo: "hexpm", optional: false]}, {:plug_crypto, "~> 1.1.1 or ~> 1.2", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "23524e4fefbb587c11f0833b3910bfb414bf2e2534d61928e920f54e3a1b881f"}, 21 | "plug_cowboy": {:hex, :plug_cowboy, "2.5.0", "51c998f788c4e68fc9f947a5eba8c215fbb1d63a520f7604134cab0270ea6513", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:cowboy_telemetry, "~> 0.3", [hex: :cowboy_telemetry, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "5b2c8925a5e2587446f33810a58c01e66b3c345652eeec809b76ba007acde71a"}, 22 | "plug_crypto": {:hex, :plug_crypto, "1.2.2", "05654514ac717ff3a1843204b424477d9e60c143406aa94daf2274fdd280794d", [:mix], [], "hexpm", "87631c7ad914a5a445f0a3809f99b079113ae4ed4b867348dd9eec288cecb6db"}, 23 | "ranch": {:hex, :ranch, "1.8.0", "8c7a100a139fd57f17327b6413e4167ac559fbc04ca7448e9be9057311597a1d", [:make, :rebar3], [], "hexpm", "49fbcfd3682fab1f5d109351b61257676da1a2fdbe295904176d5e521a2ddfe5"}, 24 | "telemetry": {:hex, :telemetry, "0.4.3", "a06428a514bdbc63293cd9a6263aad00ddeb66f608163bdec7c8995784080818", [:rebar3], [], "hexpm", "eb72b8365ffda5bed68a620d1da88525e326cb82a75ee61354fc24b844768041"}, 25 | "telemetry_metrics": {:hex, :telemetry_metrics, "0.6.0", "da9d49ee7e6bb1c259d36ce6539cd45ae14d81247a2b0c90edf55e2b50507f7b", [:mix], [{:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "5cfe67ad464b243835512aa44321cee91faed6ea868d7fb761d7016e02915c3d"}, 26 | "telemetry_poller": {:hex, :telemetry_poller, "0.5.1", "21071cc2e536810bac5628b935521ff3e28f0303e770951158c73eaaa01e962a", [:rebar3], [{:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "4cab72069210bc6e7a080cec9afffad1b33370149ed5d379b81c7c5f0c663fd4"}, 27 | } 28 | -------------------------------------------------------------------------------- /assets/css/phoenix.css: -------------------------------------------------------------------------------- 1 | /* Includes some default style for the starter application. 2 | * This can be safely deleted to start fresh. 3 | */ 4 | 5 | /* Milligram v1.3.0 https://milligram.github.io 6 | * Copyright (c) 2017 CJ Patoilo Licensed under the MIT license 7 | */ 8 | 9 | *,*:after,*:before{box-sizing:inherit}html{box-sizing:border-box;font-size:62.5%}body{color:#000000;font-family:'Helvetica', 'Arial', sans-serif;font-size:1.6em;font-weight:300;line-height:1.6}blockquote{border-left:0.3rem solid #d1d1d1;margin-left:0;margin-right:0;padding:1rem 1.5rem}blockquote *:last-child{margin-bottom:0}.button,button,input[type='button'],input[type='reset'],input[type='submit']{background-color:#0069d9;border:0.1rem solid #0069d9;border-radius:.4rem;color:#fff;cursor:pointer;display:inline-block;font-size:1.1rem;font-weight:700;height:3.8rem;letter-spacing:.1rem;line-height:3.8rem;padding:0 3.0rem;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap}.button:focus,.button:hover,button:focus,button:hover,input[type='button']:focus,input[type='button']:hover,input[type='reset']:focus,input[type='reset']:hover,input[type='submit']:focus,input[type='submit']:hover{background-color:#606c76;border-color:#606c76;color:#fff;outline:0}.button[disabled],button[disabled],input[type='button'][disabled],input[type='reset'][disabled],input[type='submit'][disabled]{cursor:default;opacity:.5}.button[disabled]:focus,.button[disabled]:hover,button[disabled]:focus,button[disabled]:hover,input[type='button'][disabled]:focus,input[type='button'][disabled]:hover,input[type='reset'][disabled]:focus,input[type='reset'][disabled]:hover,input[type='submit'][disabled]:focus,input[type='submit'][disabled]:hover{background-color:#0069d9;border-color:#0069d9}.button.button-outline,button.button-outline,input[type='button'].button-outline,input[type='reset'].button-outline,input[type='submit'].button-outline{background-color:transparent;color:#0069d9}.button.button-outline:focus,.button.button-outline:hover,button.button-outline:focus,button.button-outline:hover,input[type='button'].button-outline:focus,input[type='button'].button-outline:hover,input[type='reset'].button-outline:focus,input[type='reset'].button-outline:hover,input[type='submit'].button-outline:focus,input[type='submit'].button-outline:hover{background-color:transparent;border-color:#606c76;color:#606c76}.button.button-outline[disabled]:focus,.button.button-outline[disabled]:hover,button.button-outline[disabled]:focus,button.button-outline[disabled]:hover,input[type='button'].button-outline[disabled]:focus,input[type='button'].button-outline[disabled]:hover,input[type='reset'].button-outline[disabled]:focus,input[type='reset'].button-outline[disabled]:hover,input[type='submit'].button-outline[disabled]:focus,input[type='submit'].button-outline[disabled]:hover{border-color:inherit;color:#0069d9}.button.button-clear,button.button-clear,input[type='button'].button-clear,input[type='reset'].button-clear,input[type='submit'].button-clear{background-color:transparent;border-color:transparent;color:#0069d9}.button.button-clear:focus,.button.button-clear:hover,button.button-clear:focus,button.button-clear:hover,input[type='button'].button-clear:focus,input[type='button'].button-clear:hover,input[type='reset'].button-clear:focus,input[type='reset'].button-clear:hover,input[type='submit'].button-clear:focus,input[type='submit'].button-clear:hover{background-color:transparent;border-color:transparent;color:#606c76}.button.button-clear[disabled]:focus,.button.button-clear[disabled]:hover,button.button-clear[disabled]:focus,button.button-clear[disabled]:hover,input[type='button'].button-clear[disabled]:focus,input[type='button'].button-clear[disabled]:hover,input[type='reset'].button-clear[disabled]:focus,input[type='reset'].button-clear[disabled]:hover,input[type='submit'].button-clear[disabled]:focus,input[type='submit'].button-clear[disabled]:hover{color:#0069d9}code{background:#f4f5f6;border-radius:.4rem;font-size:86%;margin:0 .2rem;padding:.2rem .5rem;white-space:nowrap}pre{background:#f4f5f6;border-left:0.3rem solid #0069d9;overflow-y:hidden}pre>code{border-radius:0;display:block;padding:1rem 1.5rem;white-space:pre}hr{border:0;border-top:0.1rem solid #f4f5f6;margin:3.0rem 0}input[type='email'],input[type='number'],input[type='password'],input[type='search'],input[type='tel'],input[type='text'],input[type='url'],textarea,select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:0.1rem solid #d1d1d1;border-radius:.4rem;box-shadow:none;box-sizing:inherit;height:3.8rem;padding:.6rem 1.0rem;width:100%}input[type='email']:focus,input[type='number']:focus,input[type='password']:focus,input[type='search']:focus,input[type='tel']:focus,input[type='text']:focus,input[type='url']:focus,textarea:focus,select:focus{border-color:#0069d9;outline:0}select{background:url('data:image/svg+xml;utf8,') center right no-repeat;padding-right:3.0rem}select:focus{background-image:url('data:image/svg+xml;utf8,')}textarea{min-height:6.5rem}label,legend{display:block;font-size:1.6rem;font-weight:700;margin-bottom:.5rem}fieldset{border-width:0;padding:0}input[type='checkbox'],input[type='radio']{display:inline}.label-inline{display:inline-block;font-weight:normal;margin-left:.5rem}.row{display:flex;flex-direction:column;padding:0;width:100%}.row.row-no-padding{padding:0}.row.row-no-padding>.column{padding:0}.row.row-wrap{flex-wrap:wrap}.row.row-top{align-items:flex-start}.row.row-bottom{align-items:flex-end}.row.row-center{align-items:center}.row.row-stretch{align-items:stretch}.row.row-baseline{align-items:baseline}.row .column{display:block;flex:1 1 auto;margin-left:0;max-width:100%;width:100%}.row .column.column-offset-10{margin-left:10%}.row .column.column-offset-20{margin-left:20%}.row .column.column-offset-25{margin-left:25%}.row .column.column-offset-33,.row .column.column-offset-34{margin-left:33.3333%}.row .column.column-offset-50{margin-left:50%}.row .column.column-offset-66,.row .column.column-offset-67{margin-left:66.6666%}.row .column.column-offset-75{margin-left:75%}.row .column.column-offset-80{margin-left:80%}.row .column.column-offset-90{margin-left:90%}.row .column.column-10{flex:0 0 10%;max-width:10%}.row .column.column-20{flex:0 0 20%;max-width:20%}.row .column.column-25{flex:0 0 25%;max-width:25%}.row .column.column-33,.row .column.column-34{flex:0 0 33.3333%;max-width:33.3333%}.row .column.column-40{flex:0 0 40%;max-width:40%}.row .column.column-50{flex:0 0 50%;max-width:50%}.row .column.column-60{flex:0 0 60%;max-width:60%}.row .column.column-66,.row .column.column-67{flex:0 0 66.6666%;max-width:66.6666%}.row .column.column-75{flex:0 0 75%;max-width:75%}.row .column.column-80{flex:0 0 80%;max-width:80%}.row .column.column-90{flex:0 0 90%;max-width:90%}.row .column .column-top{align-self:flex-start}.row .column .column-bottom{align-self:flex-end}.row .column .column-center{-ms-grid-row-align:center;align-self:center}@media (min-width: 40rem){.row{flex-direction:row;margin-left:-1.0rem;width:calc(100% + 2.0rem)}.row .column{margin-bottom:inherit;padding:0 1.0rem}}a{color:#0069d9;text-decoration:none}a:focus,a:hover{color:#606c76}dl,ol,ul{list-style:none;margin-top:0;padding-left:0}dl dl,dl ol,dl ul,ol dl,ol ol,ol ul,ul dl,ul ol,ul ul{font-size:90%;margin:1.5rem 0 1.5rem 3.0rem}ol{list-style:decimal inside}ul{list-style:circle inside}.button,button,dd,dt,li{margin-bottom:1.0rem}fieldset,input,select,textarea{margin-bottom:1.5rem}blockquote,dl,figure,form,ol,p,pre,table,ul{margin-bottom:2.5rem}table{border-spacing:0;width:100%}td,th{border-bottom:0.1rem solid #e1e1e1;padding:1.2rem 1.5rem;text-align:left}td:first-child,th:first-child{padding-left:0}td:last-child,th:last-child{padding-right:0}b,strong{font-weight:bold}p{margin-top:0}h1,h2,h3,h4,h5,h6{font-weight:300;letter-spacing:-.1rem;margin-bottom:2.0rem;margin-top:0}h1{font-size:4.6rem;line-height:1.2}h2{font-size:3.6rem;line-height:1.25}h3{font-size:2.8rem;line-height:1.3}h4{font-size:2.2rem;letter-spacing:-.08rem;line-height:1.35}h5{font-size:1.8rem;letter-spacing:-.05rem;line-height:1.5}h6{font-size:1.6rem;letter-spacing:0;line-height:1.4}img{max-width:100%}.clearfix:after{clear:both;content:' ';display:table}.float-left{float:left}.float-right{float:right} 10 | 11 | /* General style */ 12 | h1 { 13 | font-size: 3.6rem; 14 | line-height: 1.25; 15 | } 16 | h2 { 17 | font-size: 2.8rem; 18 | line-height: 1.3; 19 | } 20 | h3 { 21 | font-size: 2.2rem; 22 | letter-spacing: -0.08rem; 23 | line-height: 1.35; 24 | } 25 | h4 { 26 | font-size: 1.8rem; 27 | letter-spacing: -0.05rem; 28 | line-height: 1.5; 29 | } 30 | h5 { 31 | font-size: 1.6rem; 32 | letter-spacing: 0; 33 | line-height: 1.4; 34 | } 35 | h6 { 36 | font-size: 1.4rem; 37 | letter-spacing: 0; 38 | line-height: 1.2; 39 | } 40 | pre { 41 | padding: 1em; 42 | } 43 | 44 | .container { 45 | margin: 0 auto; 46 | max-width: 80rem; 47 | padding: 0 11rem; 48 | position: relative; 49 | width: 100%; 50 | } 51 | select { 52 | width: auto; 53 | } 54 | 55 | /* Phoenix promo and logo */ 56 | .phx-hero { 57 | border-bottom: 1px solid #e3e3e3; 58 | background: #eee; 59 | border-radius: 6px; 60 | } 61 | .phx-logo { 62 | min-width: 300px; 63 | display: block; 64 | } 65 | .phx-logo img { 66 | width: auto; 67 | display: block; 68 | } 69 | 70 | /* Headers */ 71 | header { 72 | width: 100%; 73 | background: #fdfdfd; 74 | border-bottom: 1px solid #eaeaea; 75 | margin-bottom: 4rem; 76 | } 77 | header section { 78 | align-items: center; 79 | display: flex; 80 | flex-direction: column; 81 | justify-content: space-between; 82 | } 83 | 84 | @media (min-width: 40rem) { 85 | /* Small devices (landscape phones, 576px and up) */ 86 | header section { 87 | flex-direction: row; 88 | } 89 | header nav ul { 90 | margin: 1rem; 91 | } 92 | .phx-logo { 93 | flex-basis: 527px; 94 | margin: 2rem 1rem; 95 | } 96 | } 97 | --------------------------------------------------------------------------------