├── .env ├── assets ├── .babelrc ├── static │ ├── favicon.ico │ ├── images │ │ └── phoenix.png │ └── robots.txt ├── package.json ├── js │ └── app.js ├── webpack.config.js └── css │ ├── app.scss │ └── phoenix.css ├── test ├── test_helper.exs ├── app_web │ ├── views │ │ ├── layout_view_test.exs │ │ └── error_view_test.exs │ └── live │ │ ├── page_live_test.exs │ │ └── post_live_test.exs ├── support │ ├── channel_case.ex │ ├── conn_case.ex │ └── data_case.ex └── app │ └── timeline_test.exs ├── lib ├── app_web │ ├── views │ │ ├── layout_view.ex │ │ ├── error_view.ex │ │ └── error_helpers.ex │ ├── templates │ │ └── layout │ │ │ ├── app.html.eex │ │ │ ├── live.html.leex │ │ │ └── root.html.leex │ ├── live │ │ ├── post_live │ │ │ ├── form_component.html.leex │ │ │ ├── show.ex │ │ │ ├── index.html.leex │ │ │ ├── show.html.leex │ │ │ ├── index.ex │ │ │ ├── form_component.ex │ │ │ └── post_component.ex │ │ ├── modal_component.ex │ │ ├── live_helpers.ex │ │ ├── page_live.ex │ │ └── page_live.html.leex │ ├── gettext.ex │ ├── channels │ │ └── user_socket.ex │ ├── router.ex │ ├── endpoint.ex │ └── telemetry.ex ├── app │ ├── repo.ex │ ├── timeline │ │ └── post.ex │ ├── application.ex │ └── timeline.ex ├── app.ex └── app_web.ex ├── priv ├── repo │ ├── migrations │ │ ├── .formatter.exs │ │ └── 20201002221058_create_posts.exs │ └── seeds.exs └── gettext │ ├── en │ └── LC_MESSAGES │ │ └── errors.po │ └── errors.pot ├── .formatter.exs ├── Dockerfile ├── docker-compose.yml ├── config ├── test.exs ├── config.exs ├── prod.secret.exs ├── prod.exs └── dev.exs ├── .gitignore ├── README.md ├── mix.exs └── mix.lock /.env: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env" 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /test/test_helper.exs: -------------------------------------------------------------------------------- 1 | ExUnit.start() 2 | Ecto.Adapters.SQL.Sandbox.mode(App.Repo, :manual) 3 | -------------------------------------------------------------------------------- /lib/app_web/views/layout_view.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.LayoutView do 2 | use AppWeb, :view 3 | end 4 | -------------------------------------------------------------------------------- /priv/repo/migrations/.formatter.exs: -------------------------------------------------------------------------------- 1 | [ 2 | import_deps: [:ecto_sql], 3 | inputs: ["*.exs"] 4 | ] 5 | -------------------------------------------------------------------------------- /assets/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stereobooster/elixir-example/main/assets/static/favicon.ico -------------------------------------------------------------------------------- /assets/static/images/phoenix.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stereobooster/elixir-example/main/assets/static/images/phoenix.png -------------------------------------------------------------------------------- /lib/app/repo.ex: -------------------------------------------------------------------------------- 1 | defmodule App.Repo do 2 | use Ecto.Repo, 3 | otp_app: :app, 4 | adapter: Ecto.Adapters.Postgres 5 | end 6 | -------------------------------------------------------------------------------- /.formatter.exs: -------------------------------------------------------------------------------- 1 | [ 2 | import_deps: [:ecto, :phoenix], 3 | inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs}"], 4 | subdirectories: ["priv/*/migrations"] 5 | ] 6 | -------------------------------------------------------------------------------- /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/app_web/templates/layout/app.html.eex: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | <%= @inner_content %> 5 |
6 | -------------------------------------------------------------------------------- /lib/app.ex: -------------------------------------------------------------------------------- 1 | defmodule App do 2 | @moduledoc """ 3 | App 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 | -------------------------------------------------------------------------------- /test/app_web/views/layout_view_test.exs: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.LayoutViewTest do 2 | use AppWeb.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 | -------------------------------------------------------------------------------- /lib/app_web/live/post_live/form_component.html.leex: -------------------------------------------------------------------------------- 1 |

<%= @title %>

2 | 3 | <%= f = form_for @changeset, "#", 4 | id: "post-form", 5 | phx_target: @myself, 6 | phx_change: "validate", 7 | phx_submit: "save" %> 8 | 9 | <%= textarea f, :body %> 10 | <%= error_tag f, :body %> 11 | 12 | <%= submit "Save", phx_disable_with: "Saving..." %> 13 | 14 | -------------------------------------------------------------------------------- /priv/repo/migrations/20201002221058_create_posts.exs: -------------------------------------------------------------------------------- 1 | defmodule App.Repo.Migrations.CreatePosts do 2 | use Ecto.Migration 3 | 4 | def change do 5 | create table(:posts) do 6 | add :username, :string 7 | add :body, :string 8 | add :likes_count, :integer 9 | add :reposts_count, :integer 10 | 11 | timestamps() 12 | end 13 | 14 | end 15 | end 16 | -------------------------------------------------------------------------------- /priv/repo/seeds.exs: -------------------------------------------------------------------------------- 1 | # Script for populating the database. You can run it as: 2 | # 3 | # mix run priv/repo/seeds.exs 4 | # 5 | # Inside the script, you can read and write to any of your 6 | # repositories directly: 7 | # 8 | # App.Repo.insert!(%App.SomeSchema{}) 9 | # 10 | # We recommend using the bang functions (`insert!`, `update!` 11 | # and so on) as they will fail if something goes wrong. 12 | -------------------------------------------------------------------------------- /test/app_web/live/page_live_test.exs: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.PageLiveTest do 2 | use AppWeb.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/app_web/templates/layout/live.html.leex: -------------------------------------------------------------------------------- 1 |
2 | 5 | 6 | 9 | 10 | <%= @inner_content %> 11 |
12 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM elixir:1.9.1 2 | 3 | ENV PHX_VERSION 1.5.5 4 | ENV NODE_MAJOR 12 5 | 6 | ENV APP_HOME /app 7 | RUN mkdir $APP_HOME 8 | WORKDIR $APP_HOME 9 | 10 | RUN set -x &&\ 11 | mix local.hex --force &&\ 12 | mix local.rebar --force &&\ 13 | mix archive.install hex phx_new $PHX_VERSION --force &&\ 14 | curl -sL https://deb.nodesource.com/setup_$NODE_MAJOR.x | bash - &&\ 15 | apt-get install -y nodejs inotify-tools 16 | -------------------------------------------------------------------------------- /test/app_web/views/error_view_test.exs: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.ErrorViewTest do 2 | use AppWeb.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(AppWeb.ErrorView, "404.html", []) == "Not Found" 9 | end 10 | 11 | test "renders 500.html" do 12 | assert render_to_string(AppWeb.ErrorView, "500.html", []) == "Internal Server Error" 13 | end 14 | end 15 | -------------------------------------------------------------------------------- /lib/app/timeline/post.ex: -------------------------------------------------------------------------------- 1 | defmodule App.Timeline.Post do 2 | use Ecto.Schema 3 | import Ecto.Changeset 4 | 5 | schema "posts" do 6 | field :body, :string 7 | field :likes_count, :integer, default: 0 8 | field :reposts_count, :integer, default: 0 9 | field :username, :string, default: "test user" 10 | 11 | timestamps() 12 | end 13 | 14 | @doc false 15 | def changeset(post, attrs) do 16 | post 17 | |> cast(attrs, [:body]) 18 | |> validate_required([:body]) 19 | |> validate_length(:body, min: 2, max: 280) 20 | end 21 | end 22 | -------------------------------------------------------------------------------- /lib/app_web/views/error_view.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.ErrorView do 2 | use AppWeb, :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/app_web/live/post_live/show.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.PostLive.Show do 2 | use AppWeb, :live_view 3 | 4 | alias App.Timeline 5 | 6 | @impl true 7 | def mount(_params, _session, socket) do 8 | {:ok, socket} 9 | end 10 | 11 | @impl true 12 | def handle_params(%{"id" => id}, _, socket) do 13 | {:noreply, 14 | socket 15 | |> assign(:page_title, page_title(socket.assigns.live_action)) 16 | |> assign(:post, Timeline.get_post!(id))} 17 | end 18 | 19 | defp page_title(:show), do: "Show Post" 20 | defp page_title(:edit), do: "Edit Post" 21 | end 22 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: "3" 2 | volumes: 3 | node_modules: 4 | build: 5 | services: 6 | db: 7 | image: postgres:11-alpine 8 | environment: 9 | - POSTGRES_PASSWORD=postgres 10 | - POSTGRES_DB=hello_dev 11 | web: 12 | build: . 13 | env_file: .env 14 | command: mix phx.server 15 | volumes: 16 | - .:/app 17 | - node_modules:/app/assets/node_modules 18 | - build:/app/_build 19 | ports: 20 | - "4000:4000" 21 | depends_on: 22 | - db 23 | adminer: 24 | image: adminer 25 | restart: always 26 | ports: 27 | - 8080:8080 28 | depends_on: 29 | - db 30 | -------------------------------------------------------------------------------- /lib/app_web/live/post_live/index.html.leex: -------------------------------------------------------------------------------- 1 |

Timeline

2 | 3 | <%= if @live_action in [:new, :edit] do %> 4 | <%= live_modal @socket, AppWeb.PostLive.FormComponent, 5 | id: @post.id || :new, 6 | title: @page_title, 7 | action: @live_action, 8 | post: @post, 9 | return_to: Routes.post_index_path(@socket, :index) %> 10 | <% end %> 11 | 12 |
13 | <%= for post <- @posts do %> 14 | <%= live_component @socket, AppWeb.PostLive.PostComponent, id: post.id, post: post %> 15 | <% end %> 16 |
17 | 18 | 19 | <%= live_patch "New Post", to: Routes.post_index_path(@socket, :new) %> 20 | -------------------------------------------------------------------------------- /config/test.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # Configure your database 4 | # 5 | # The MIX_TEST_PARTITION environment variable can be used 6 | # to provide built-in test partitioning in CI environment. 7 | # Run `mix help test` for more information. 8 | config :app, App.Repo, 9 | username: "postgres", 10 | password: "postgres", 11 | database: "app_test#{System.get_env("MIX_TEST_PARTITION")}", 12 | hostname: "localhost", 13 | pool: Ecto.Adapters.SQL.Sandbox 14 | 15 | # We don't run a server during test. If one is required, 16 | # you can enable the server option below. 17 | config :app, AppWeb.Endpoint, 18 | http: [port: 4002], 19 | server: false 20 | 21 | # Print only warnings and errors during test 22 | config :logger, level: :warn 23 | -------------------------------------------------------------------------------- /lib/app_web/live/modal_component.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.ModalComponent do 2 | use AppWeb, :live_component 3 | 4 | @impl true 5 | def render(assigns) do 6 | ~L""" 7 |
13 | 14 |
15 | <%= live_patch raw("×"), to: @return_to, class: "phx-modal-close" %> 16 | <%= live_component @socket, @component, @opts %> 17 |
18 |
19 | """ 20 | end 21 | 22 | @impl true 23 | def handle_event("close", _, socket) do 24 | {:noreply, push_patch(socket, to: socket.assigns.return_to)} 25 | end 26 | end 27 | -------------------------------------------------------------------------------- /lib/app_web/gettext.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.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 AppWeb.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: :app 24 | end 25 | -------------------------------------------------------------------------------- /lib/app_web/live/live_helpers.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.LiveHelpers do 2 | import Phoenix.LiveView.Helpers 3 | 4 | @doc """ 5 | Renders a component inside the `AppWeb.ModalComponent` component. 6 | 7 | The rendered modal receives a `:return_to` option to properly update 8 | the URL when the modal is closed. 9 | 10 | ## Examples 11 | 12 | <%= live_modal @socket, AppWeb.PostLive.FormComponent, 13 | id: @post.id || :new, 14 | action: @live_action, 15 | post: @post, 16 | return_to: Routes.post_index_path(@socket, :index) %> 17 | """ 18 | def live_modal(socket, component, opts) do 19 | path = Keyword.fetch!(opts, :return_to) 20 | modal_opts = [id: :modal, return_to: path, component: component, opts: opts] 21 | live_component(socket, AppWeb.ModalComponent, modal_opts) 22 | end 23 | end 24 | -------------------------------------------------------------------------------- /lib/app_web/live/post_live/show.html.leex: -------------------------------------------------------------------------------- 1 |

Show Post

2 | 3 | <%= if @live_action in [:edit] do %> 4 | <%= live_modal @socket, AppWeb.PostLive.FormComponent, 5 | id: @post.id, 6 | title: @page_title, 7 | action: @live_action, 8 | post: @post, 9 | return_to: Routes.post_show_path(@socket, :show, @post) %> 10 | <% end %> 11 | 12 | 35 | 36 | <%= live_patch "Edit", to: Routes.post_show_path(@socket, :edit, @post), class: "button" %> 37 | <%= live_redirect "Back", to: Routes.post_index_path(@socket, :index) %> 38 | -------------------------------------------------------------------------------- /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 | "phoenix": "file:../deps/phoenix", 11 | "phoenix_html": "file:../deps/phoenix_html", 12 | "phoenix_live_view": "file:../deps/phoenix_live_view", 13 | "nprogress": "^0.2.0" 14 | }, 15 | "devDependencies": { 16 | "@babel/core": "^7.0.0", 17 | "@babel/preset-env": "^7.0.0", 18 | "babel-loader": "^8.0.0", 19 | "copy-webpack-plugin": "^5.1.1", 20 | "css-loader": "^3.4.2", 21 | "sass-loader": "^8.0.2", 22 | "node-sass": "^4.13.1", 23 | "hard-source-webpack-plugin": "^0.13.1", 24 | "mini-css-extract-plugin": "^0.9.0", 25 | "optimize-css-assets-webpack-plugin": "^5.0.1", 26 | "terser-webpack-plugin": "^2.3.2", 27 | "webpack": "4.41.5", 28 | "webpack-cli": "^3.3.2" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /.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 | app-*.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 | -------------------------------------------------------------------------------- /lib/app/application.ex: -------------------------------------------------------------------------------- 1 | defmodule App.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 Ecto repository 11 | App.Repo, 12 | # Start the Telemetry supervisor 13 | AppWeb.Telemetry, 14 | # Start the PubSub system 15 | {Phoenix.PubSub, name: App.PubSub}, 16 | # Start the Endpoint (http/https) 17 | AppWeb.Endpoint 18 | # Start a worker by calling: App.Worker.start_link(arg) 19 | # {App.Worker, arg} 20 | ] 21 | 22 | # See https://hexdocs.pm/elixir/Supervisor.html 23 | # for other strategies and supported options 24 | opts = [strategy: :one_for_one, name: App.Supervisor] 25 | Supervisor.start_link(children, opts) 26 | end 27 | 28 | # Tell Phoenix to update the endpoint configuration 29 | # whenever the application is updated. 30 | def config_change(changed, _new, removed) do 31 | AppWeb.Endpoint.config_change(changed, removed) 32 | :ok 33 | end 34 | end 35 | -------------------------------------------------------------------------------- /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 | config :app, 11 | ecto_repos: [App.Repo] 12 | 13 | # Configures the endpoint 14 | config :app, AppWeb.Endpoint, 15 | url: [host: "localhost"], 16 | secret_key_base: "abym5+S4OezFwCM/IbX6fFDFnI+b0oKKfzKlq9pq9lq5kkzmYeMD9tN+rFbXf661", 17 | render_errors: [view: AppWeb.ErrorView, accepts: ~w(html json), layout: false], 18 | pubsub_server: App.PubSub, 19 | live_view: [signing_salt: "cc2vvfZF"] 20 | 21 | # Configures Elixir's Logger 22 | config :logger, :console, 23 | format: "$time $metadata[$level] $message\n", 24 | metadata: [:request_id] 25 | 26 | # Use Jason for JSON parsing in Phoenix 27 | config :phoenix, :json_library, Jason 28 | 29 | # Import environment specific config. This must remain at the bottom 30 | # of this file so it overrides the configuration defined above. 31 | import_config "#{Mix.env()}.exs" 32 | -------------------------------------------------------------------------------- /lib/app_web/channels/user_socket.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.UserSocket do 2 | use Phoenix.Socket 3 | 4 | ## Channels 5 | # channel "room:*", AppWeb.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 | # AppWeb.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/app_web/live/page_live.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.PageLive do 2 | use AppWeb, :live_view 3 | 4 | @impl true 5 | def mount(_params, _session, socket) do 6 | {:ok, assign(socket, query: "", results: %{})} 7 | end 8 | 9 | @impl true 10 | def handle_event("suggest", %{"q" => query}, socket) do 11 | {:noreply, assign(socket, results: search(query), query: query)} 12 | end 13 | 14 | @impl true 15 | def handle_event("search", %{"q" => query}, socket) do 16 | case search(query) do 17 | %{^query => vsn} -> 18 | {:noreply, redirect(socket, external: "https://hexdocs.pm/#{query}/#{vsn}")} 19 | 20 | _ -> 21 | {:noreply, 22 | socket 23 | |> put_flash(:error, "No dependencies found matching \"#{query}\"") 24 | |> assign(results: %{}, query: query)} 25 | end 26 | end 27 | 28 | defp search(query) do 29 | if not AppWeb.Endpoint.config(:code_reloader) do 30 | raise "action disabled when not in development" 31 | end 32 | 33 | for {app, desc, vsn} <- Application.started_applications(), 34 | app = to_string(app), 35 | String.starts_with?(app, query) and not List.starts_with?(desc, ~c"ERTS"), 36 | into: %{}, 37 | do: {app, vsn} 38 | end 39 | end 40 | -------------------------------------------------------------------------------- /test/support/channel_case.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.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 AppWeb.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 AppWeb.ChannelCase 25 | 26 | # The default endpoint for testing 27 | @endpoint AppWeb.Endpoint 28 | end 29 | end 30 | 31 | setup tags do 32 | :ok = Ecto.Adapters.SQL.Sandbox.checkout(App.Repo) 33 | 34 | unless tags[:async] do 35 | Ecto.Adapters.SQL.Sandbox.mode(App.Repo, {:shared, self()}) 36 | end 37 | 38 | :ok 39 | end 40 | end 41 | -------------------------------------------------------------------------------- /lib/app_web/templates/layout/root.html.leex: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%= csrf_meta_tag() %> 8 | <%= live_title_tag assigns[:page_title] || "App", suffix: " · Phoenix Framework" %> 9 | "/> 10 | 11 | 12 | 13 |
14 |
15 | 23 | 26 |
27 |
28 | <%= @inner_content %> 29 | 30 | 31 | -------------------------------------------------------------------------------- /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 | database_url = 8 | System.get_env("DATABASE_URL") || 9 | raise """ 10 | environment variable DATABASE_URL is missing. 11 | For example: ecto://USER:PASS@HOST/DATABASE 12 | """ 13 | 14 | config :app, App.Repo, 15 | # ssl: true, 16 | url: database_url, 17 | pool_size: String.to_integer(System.get_env("POOL_SIZE") || "10") 18 | 19 | secret_key_base = 20 | System.get_env("SECRET_KEY_BASE") || 21 | raise """ 22 | environment variable SECRET_KEY_BASE is missing. 23 | You can generate one by calling: mix phx.gen.secret 24 | """ 25 | 26 | config :app, AppWeb.Endpoint, 27 | http: [ 28 | port: String.to_integer(System.get_env("PORT") || "4000"), 29 | transport_options: [socket_opts: [:inet6]] 30 | ], 31 | secret_key_base: secret_key_base 32 | 33 | # ## Using releases (Elixir v1.9+) 34 | # 35 | # If you are doing OTP releases, you need to instruct Phoenix 36 | # to start each relevant endpoint: 37 | # 38 | # config :app, AppWeb.Endpoint, server: true 39 | # 40 | # Then you can assemble a release by calling `mix release`. 41 | # See `mix help release` for more information. 42 | -------------------------------------------------------------------------------- /test/support/conn_case.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.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 AppWeb.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 AppWeb.ConnCase 26 | 27 | alias AppWeb.Router.Helpers, as: Routes 28 | 29 | # The default endpoint for testing 30 | @endpoint AppWeb.Endpoint 31 | end 32 | end 33 | 34 | setup tags do 35 | :ok = Ecto.Adapters.SQL.Sandbox.checkout(App.Repo) 36 | 37 | unless tags[:async] do 38 | Ecto.Adapters.SQL.Sandbox.mode(App.Repo, {:shared, self()}) 39 | end 40 | 41 | {:ok, conn: Phoenix.ConnTest.build_conn()} 42 | end 43 | end 44 | -------------------------------------------------------------------------------- /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 | 20 | let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") 21 | let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}}) 22 | 23 | // Show progress bar on live navigation and form submits 24 | window.addEventListener("phx:page-loading-start", info => NProgress.start()) 25 | window.addEventListener("phx:page-loading-stop", info => NProgress.done()) 26 | 27 | // connect if there are any LiveViews on the page 28 | liveSocket.connect() 29 | 30 | // expose liveSocket on window for web console debug logs and latency simulation: 31 | // >> liveSocket.enableDebug() 32 | // >> liveSocket.enableLatencySim(1000) // enabled for duration of browser session 33 | // >> liveSocket.disableLatencySim() 34 | window.liveSocket = liveSocket 35 | 36 | -------------------------------------------------------------------------------- /lib/app_web/router.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.Router do 2 | use AppWeb, :router 3 | 4 | pipeline :browser do 5 | plug :accepts, ["html"] 6 | plug :fetch_session 7 | plug :fetch_live_flash 8 | plug :put_root_layout, {AppWeb.LayoutView, :root} 9 | plug :protect_from_forgery 10 | plug :put_secure_browser_headers 11 | end 12 | 13 | pipeline :api do 14 | plug :accepts, ["json"] 15 | end 16 | 17 | scope "/", AppWeb do 18 | pipe_through :browser 19 | 20 | live "/", PageLive, :index 21 | 22 | live "/posts", PostLive.Index, :index 23 | live "/posts/new", PostLive.Index, :new 24 | live "/posts/:id/edit", PostLive.Index, :edit 25 | 26 | live "/posts/:id", PostLive.Show, :show 27 | live "/posts/:id/show/edit", PostLive.Show, :edit 28 | end 29 | 30 | # Other scopes may use custom stacks. 31 | # scope "/api", AppWeb do 32 | # pipe_through :api 33 | # end 34 | 35 | # Enables LiveDashboard only for development 36 | # 37 | # If you want to use the LiveDashboard in production, you should put 38 | # it behind authentication and allow only admins to access it. 39 | # If your application does not have an admins-only section yet, 40 | # you can use Plug.BasicAuth to set up some basic authentication 41 | # as long as you are also using SSL (which you should anyway). 42 | if Mix.env() in [:dev, :test] do 43 | import Phoenix.LiveDashboard.Router 44 | 45 | scope "/" do 46 | pipe_through :browser 47 | live_dashboard "/dashboard", metrics: AppWeb.Telemetry 48 | end 49 | end 50 | end 51 | -------------------------------------------------------------------------------- /lib/app_web/live/post_live/index.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.PostLive.Index do 2 | use AppWeb, :live_view 3 | 4 | alias App.Timeline 5 | alias App.Timeline.Post 6 | 7 | @impl true 8 | def mount(_params, _session, socket) do 9 | if connected?(socket), do: Timeline.subscribe() 10 | 11 | {:ok, assign(socket, :posts, list_posts()), temporary_assigns: [posts: []]} 12 | end 13 | 14 | @impl true 15 | def handle_params(params, _url, socket) do 16 | {:noreply, apply_action(socket, socket.assigns.live_action, params)} 17 | end 18 | 19 | defp apply_action(socket, :edit, %{"id" => id}) do 20 | socket 21 | |> assign(:page_title, "Edit Post") 22 | |> assign(:post, Timeline.get_post!(id)) 23 | end 24 | 25 | defp apply_action(socket, :new, _params) do 26 | socket 27 | |> assign(:page_title, "New Post") 28 | |> assign(:post, %Post{}) 29 | end 30 | 31 | defp apply_action(socket, :index, _params) do 32 | socket 33 | |> assign(:page_title, "Listing Posts") 34 | |> assign(:post, nil) 35 | end 36 | 37 | @impl true 38 | def handle_event("delete", %{"id" => id}, socket) do 39 | post = Timeline.get_post!(id) 40 | {:ok, _} = Timeline.delete_post(post) 41 | 42 | {:noreply, assign(socket, :posts, list_posts())} 43 | end 44 | 45 | defp list_posts do 46 | Timeline.list_posts() 47 | end 48 | 49 | @impl true 50 | def handle_info({:post_created, post}, socket) do 51 | {:noreply, update(socket, :posts, fn posts -> [post | posts] end)} 52 | end 53 | 54 | 55 | @impl true 56 | def handle_info({:post_updated, post}, socket) do 57 | {:noreply, update(socket, :posts, fn posts -> [post | posts] end)} 58 | end 59 | end 60 | -------------------------------------------------------------------------------- /lib/app_web/live/page_live.html.leex: -------------------------------------------------------------------------------- 1 |
2 |

<%= gettext "Welcome to %{name}!", name: "Phoenix" %>

3 |

Peace of mind from prototype to production

4 | 5 |
6 | 7 | 8 | <%= for {app, _vsn} <- @results do %> 9 | 10 | <% end %> 11 | 12 | 13 |
14 |
15 | 16 |
17 |
18 |

Resources

19 | 30 |
31 |
32 |

Help

33 | 47 |
48 |
49 | -------------------------------------------------------------------------------- /lib/app_web/live/post_live/form_component.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.PostLive.FormComponent do 2 | use AppWeb, :live_component 3 | 4 | alias App.Timeline 5 | 6 | @impl true 7 | def update(%{post: post} = assigns, socket) do 8 | changeset = Timeline.change_post(post) 9 | 10 | {:ok, 11 | socket 12 | |> assign(assigns) 13 | |> assign(:changeset, changeset)} 14 | end 15 | 16 | @impl true 17 | def handle_event("validate", %{"post" => post_params}, socket) do 18 | changeset = 19 | socket.assigns.post 20 | |> Timeline.change_post(post_params) 21 | |> Map.put(:action, :validate) 22 | 23 | {:noreply, assign(socket, :changeset, changeset)} 24 | end 25 | 26 | def handle_event("save", %{"post" => post_params}, socket) do 27 | save_post(socket, socket.assigns.action, post_params) 28 | end 29 | 30 | defp save_post(socket, :edit, post_params) do 31 | case Timeline.update_post(socket.assigns.post, post_params) do 32 | {:ok, _post} -> 33 | {:noreply, 34 | socket 35 | |> put_flash(:info, "Post updated successfully") 36 | |> push_redirect(to: socket.assigns.return_to)} 37 | 38 | {:error, %Ecto.Changeset{} = changeset} -> 39 | {:noreply, assign(socket, :changeset, changeset)} 40 | end 41 | end 42 | 43 | defp save_post(socket, :new, post_params) do 44 | case Timeline.create_post(post_params) do 45 | {:ok, _post} -> 46 | {:noreply, 47 | socket 48 | |> put_flash(:info, "Post created successfully") 49 | |> push_redirect(to: socket.assigns.return_to)} 50 | 51 | {:error, %Ecto.Changeset{} = changeset} -> 52 | {:noreply, assign(socket, changeset: changeset)} 53 | end 54 | end 55 | end 56 | -------------------------------------------------------------------------------- /lib/app_web/views/error_helpers.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.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(AppWeb.Gettext, "errors", msg, msg, count, opts) 43 | else 44 | Gettext.dgettext(AppWeb.Gettext, "errors", msg, opts) 45 | end 46 | end 47 | end 48 | -------------------------------------------------------------------------------- /test/support/data_case.ex: -------------------------------------------------------------------------------- 1 | defmodule App.DataCase do 2 | @moduledoc """ 3 | This module defines the setup for tests requiring 4 | access to the application's data layer. 5 | 6 | You may define functions here to be used as helpers in 7 | your tests. 8 | 9 | Finally, if the test case interacts with the database, 10 | we enable the SQL sandbox, so changes done to the database 11 | are reverted at the end of every test. If you are using 12 | PostgreSQL, you can even run database tests asynchronously 13 | by setting `use App.DataCase, async: true`, although 14 | this option is not recommended for other databases. 15 | """ 16 | 17 | use ExUnit.CaseTemplate 18 | 19 | using do 20 | quote do 21 | alias App.Repo 22 | 23 | import Ecto 24 | import Ecto.Changeset 25 | import Ecto.Query 26 | import App.DataCase 27 | end 28 | end 29 | 30 | setup tags do 31 | :ok = Ecto.Adapters.SQL.Sandbox.checkout(App.Repo) 32 | 33 | unless tags[:async] do 34 | Ecto.Adapters.SQL.Sandbox.mode(App.Repo, {:shared, self()}) 35 | end 36 | 37 | :ok 38 | end 39 | 40 | @doc """ 41 | A helper that transforms changeset errors into a map of messages. 42 | 43 | assert {:error, changeset} = Accounts.create_user(%{password: "short"}) 44 | assert "password is too short" in errors_on(changeset).password 45 | assert %{password: ["password is too short"]} = errors_on(changeset) 46 | 47 | """ 48 | def errors_on(changeset) do 49 | Ecto.Changeset.traverse_errors(changeset, fn {message, opts} -> 50 | Regex.replace(~r"%{(\w+)}", message, fn _, key -> 51 | opts |> Keyword.get(String.to_existing_atom(key), key) |> to_string() 52 | end) 53 | end) 54 | end 55 | end 56 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /lib/app_web/live/post_live/post_component.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.PostLive.PostComponent do 2 | use AppWeb, :live_component 3 | 4 | def render(assigns) do 5 | ~L""" 6 |
7 |
8 |
9 |
10 |
11 |
12 | @<%= @post.username %> 13 |
14 | <%= @post.body %> 15 |
16 |
17 | 18 |
19 |
20 | 21 | Likes <%= @post.likes_count %> 22 | 23 |
24 |
25 | 26 | Repost <%= @post.reposts_count %> 27 | 28 |
29 |
30 | <%= live_patch to: Routes.post_index_path(@socket, :edit, @post.id) do %> 31 | Edit 32 | <% end %> 33 | <%= link to: "#", phx_click: "delete", phx_value_id: @post.id, data: [confirm: "Are you sure?"] do %> 34 | Delte 35 | <% end %> 36 |
37 |
38 |
39 | """ 40 | end 41 | 42 | def handle_event("like", _, socket) do 43 | App.Timeline.inc_likes(socket.assigns.post) 44 | {:noreply, socket} 45 | end 46 | 47 | def handle_event("repost", _, socket) do 48 | App.Timeline.inc_reposts(socket.assigns.post) 49 | {:noreply, socket} 50 | end 51 | end 52 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # App 2 | 3 | To start your Phoenix server: 4 | 5 | - Install dependencies with `mix deps.get` 6 | - Create and migrate your database with `mix ecto.setup` 7 | - Install Node.js dependencies with `npm install` inside the `assets` directory 8 | - Start Phoenix endpoint with `mix phx.server` 9 | 10 | Now you can visit [`localhost:4000`](http://localhost:4000) from your browser. 11 | 12 | Ready to run in production? Please [check our deployment guides](https://hexdocs.pm/phoenix/deployment.html). 13 | 14 | ## Learn more 15 | 16 | - Official website: https://www.phoenixframework.org/ 17 | - Guides: https://hexdocs.pm/phoenix/overview.html 18 | - Docs: https://hexdocs.pm/phoenix 19 | - Forum: https://elixirforum.com/c/phoenix-forum 20 | - Source: https://github.com/phoenixframework/phoenix 21 | 22 | ## Steps 23 | 24 | https://youtu.be/MZvmYaFkNJI 25 | 26 | ``` 27 | docker-compose run web mix phx.new . --live 28 | ``` 29 | 30 | Change config 31 | 32 | ``` 33 | # Configure your database 34 | config :hello, Hello.Repo, 35 | username: "postgres", 36 | password: "postgres", 37 | database: "hello_dev", 38 | hostname: "db", 39 | show_sensitive_data_on_connection_error: true, 40 | pool_size: 10 41 | ``` 42 | 43 | ``` 44 | docker-compose run web mix phx.gen.live Timeline Post posts username body likes_count:integer reposts_count:integer 45 | ``` 46 | 47 | Add routes 48 | 49 | ``` 50 | live "/posts", PostLive.Index, :index 51 | live "/posts/new", PostLive.Index, :new 52 | live "/posts/:id/edit", PostLive.Index, :edit 53 | 54 | live "/posts/:id", PostLive.Show, :show 55 | live "/posts/:id/show/edit", PostLive.Show, :edit 56 | ``` 57 | 58 | ``` 59 | docker-compose up 60 | ``` 61 | 62 | To edit database: http://localhost:8080/?pgsql=db&username=postgres&db=hello_dev&ns=public 63 | -------------------------------------------------------------------------------- /lib/app_web/endpoint.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.Endpoint do 2 | use Phoenix.Endpoint, otp_app: :app 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: "_app_key", 10 | signing_salt: "ODtVZUW/" 11 | ] 12 | 13 | socket "/socket", AppWeb.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: :app, 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 | plug Phoenix.Ecto.CheckRepoStatus, otp_app: :app 36 | end 37 | 38 | plug Phoenix.LiveDashboard.RequestLogger, 39 | param_key: "request_logger", 40 | cookie_key: "request_logger" 41 | 42 | plug Plug.RequestId 43 | plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint] 44 | 45 | plug Plug.Parsers, 46 | parsers: [:urlencoded, :multipart, :json], 47 | pass: ["*/*"], 48 | json_decoder: Phoenix.json_library() 49 | 50 | plug Plug.MethodOverride 51 | plug Plug.Head 52 | plug Plug.Session, @session_options 53 | plug AppWeb.Router 54 | end 55 | -------------------------------------------------------------------------------- /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 | .phx-modal { 24 | opacity: 1!important; 25 | position: fixed; 26 | z-index: 1; 27 | left: 0; 28 | top: 0; 29 | width: 100%; 30 | height: 100%; 31 | overflow: auto; 32 | background-color: rgb(0,0,0); 33 | background-color: rgba(0,0,0,0.4); 34 | } 35 | 36 | .phx-modal-content { 37 | background-color: #fefefe; 38 | margin: 15% auto; 39 | padding: 20px; 40 | border: 1px solid #888; 41 | width: 80%; 42 | } 43 | 44 | .phx-modal-close { 45 | color: #aaa; 46 | float: right; 47 | font-size: 28px; 48 | font-weight: bold; 49 | } 50 | 51 | .phx-modal-close:hover, 52 | .phx-modal-close:focus { 53 | color: black; 54 | text-decoration: none; 55 | cursor: pointer; 56 | } 57 | 58 | 59 | /* Alerts and form errors */ 60 | .alert { 61 | padding: 15px; 62 | margin-bottom: 20px; 63 | border: 1px solid transparent; 64 | border-radius: 4px; 65 | } 66 | .alert-info { 67 | color: #31708f; 68 | background-color: #d9edf7; 69 | border-color: #bce8f1; 70 | } 71 | .alert-warning { 72 | color: #8a6d3b; 73 | background-color: #fcf8e3; 74 | border-color: #faebcc; 75 | } 76 | .alert-danger { 77 | color: #a94442; 78 | background-color: #f2dede; 79 | border-color: #ebccd1; 80 | } 81 | .alert p { 82 | margin-bottom: 0; 83 | } 84 | .alert:empty { 85 | display: none; 86 | } 87 | .invalid-feedback { 88 | color: #a94442; 89 | display: block; 90 | margin: -1rem 0 2rem; 91 | } 92 | -------------------------------------------------------------------------------- /lib/app_web/telemetry.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.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 | # Database Metrics 34 | summary("app.repo.query.total_time", unit: {:native, :millisecond}), 35 | summary("app.repo.query.decode_time", unit: {:native, :millisecond}), 36 | summary("app.repo.query.query_time", unit: {:native, :millisecond}), 37 | summary("app.repo.query.queue_time", unit: {:native, :millisecond}), 38 | summary("app.repo.query.idle_time", unit: {:native, :millisecond}), 39 | 40 | # VM Metrics 41 | summary("vm.memory.total", unit: {:byte, :kilobyte}), 42 | summary("vm.total_run_queue_lengths.total"), 43 | summary("vm.total_run_queue_lengths.cpu"), 44 | summary("vm.total_run_queue_lengths.io") 45 | ] 46 | end 47 | 48 | defp periodic_measurements do 49 | [ 50 | # A module, function and arguments to be invoked periodically. 51 | # This function must call :telemetry.execute/3 and a metric must be added above. 52 | # {AppWeb, :count_users, []} 53 | ] 54 | end 55 | end 56 | -------------------------------------------------------------------------------- /mix.exs: -------------------------------------------------------------------------------- 1 | defmodule App.MixProject do 2 | use Mix.Project 3 | 4 | def project do 5 | [ 6 | app: :app, 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: {App.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.5"}, 37 | {:phoenix_ecto, "~> 4.1"}, 38 | {:ecto_sql, "~> 3.4"}, 39 | {:postgrex, ">= 0.0.0"}, 40 | {:phoenix_live_view, "~> 0.14.6"}, 41 | {:floki, ">= 0.27.0", only: :test}, 42 | {:phoenix_html, "~> 2.11"}, 43 | {:phoenix_live_reload, "~> 1.2", only: :dev}, 44 | {:phoenix_live_dashboard, "~> 0.2"}, 45 | {:telemetry_metrics, "~> 0.4"}, 46 | {:telemetry_poller, "~> 0.4"}, 47 | {:gettext, "~> 0.11"}, 48 | {:jason, "~> 1.0"}, 49 | {:plug_cowboy, "~> 2.0"} 50 | ] 51 | end 52 | 53 | # Aliases are shortcuts or tasks specific to the current project. 54 | # For example, to install project dependencies and perform other setup tasks, run: 55 | # 56 | # $ mix setup 57 | # 58 | # See the documentation for `Mix` for more info on aliases. 59 | defp aliases do 60 | [ 61 | setup: ["deps.get", "ecto.setup", "cmd npm install --prefix assets"], 62 | "ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"], 63 | "ecto.reset": ["ecto.drop", "ecto.setup"], 64 | test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"] 65 | ] 66 | end 67 | end 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 :app, AppWeb.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 | # ## SSL Support 20 | # 21 | # To get SSL working, you will need to add the `https` key 22 | # to the previous section and set your `:url` port to 443: 23 | # 24 | # config :app, AppWeb.Endpoint, 25 | # ... 26 | # url: [host: "example.com", port: 443], 27 | # https: [ 28 | # port: 443, 29 | # cipher_suite: :strong, 30 | # keyfile: System.get_env("SOME_APP_SSL_KEY_PATH"), 31 | # certfile: System.get_env("SOME_APP_SSL_CERT_PATH"), 32 | # transport_options: [socket_opts: [:inet6]] 33 | # ] 34 | # 35 | # The `cipher_suite` is set to `:strong` to support only the 36 | # latest and more secure SSL ciphers. This means old browsers 37 | # and clients may not be supported. You can set it to 38 | # `:compatible` for wider support. 39 | # 40 | # `:keyfile` and `:certfile` expect an absolute path to the key 41 | # and cert in disk or a relative path inside priv, for example 42 | # "priv/ssl/server.key". For all supported SSL configuration 43 | # options, see https://hexdocs.pm/plug/Plug.SSL.html#configure/1 44 | # 45 | # We also recommend setting `force_ssl` in your endpoint, ensuring 46 | # no data is ever sent via http, always redirecting to https: 47 | # 48 | # config :app, AppWeb.Endpoint, 49 | # force_ssl: [hsts: true] 50 | # 51 | # Check `Plug.SSL` for all available options in `force_ssl`. 52 | 53 | # Finally import the config/prod.secret.exs which loads secrets 54 | # and configuration from environment variables. 55 | import_config "prod.secret.exs" 56 | -------------------------------------------------------------------------------- /config/dev.exs: -------------------------------------------------------------------------------- 1 | use Mix.Config 2 | 3 | # Configure your database 4 | config :app, App.Repo, 5 | username: "postgres", 6 | password: "postgres", 7 | database: "hello_dev", 8 | hostname: "db", 9 | show_sensitive_data_on_connection_error: true, 10 | pool_size: 10 11 | 12 | # For development, we disable any cache and enable 13 | # debugging and code reloading. 14 | # 15 | # The watchers configuration can be used to run external 16 | # watchers to your application. For example, we use it 17 | # with webpack to recompile .js and .css sources. 18 | config :app, AppWeb.Endpoint, 19 | http: [port: 4000], 20 | debug_errors: true, 21 | code_reloader: true, 22 | check_origin: false, 23 | watchers: [ 24 | node: [ 25 | "node_modules/webpack/bin/webpack.js", 26 | "--mode", 27 | "development", 28 | "--watch-stdin", 29 | cd: Path.expand("../assets", __DIR__) 30 | ] 31 | ] 32 | 33 | # ## SSL Support 34 | # 35 | # In order to use HTTPS in development, a self-signed 36 | # certificate can be generated by running the following 37 | # Mix task: 38 | # 39 | # mix phx.gen.cert 40 | # 41 | # Note that this task requires Erlang/OTP 20 or later. 42 | # Run `mix help phx.gen.cert` for more information. 43 | # 44 | # The `http:` config above can be replaced with: 45 | # 46 | # https: [ 47 | # port: 4001, 48 | # cipher_suite: :strong, 49 | # keyfile: "priv/cert/selfsigned_key.pem", 50 | # certfile: "priv/cert/selfsigned.pem" 51 | # ], 52 | # 53 | # If desired, both `http:` and `https:` keys can be 54 | # configured to run both http and https servers on 55 | # different ports. 56 | 57 | # Watch static and templates for browser reloading. 58 | config :app, AppWeb.Endpoint, 59 | live_reload: [ 60 | patterns: [ 61 | ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$", 62 | ~r"priv/gettext/.*(po)$", 63 | ~r"lib/app_web/(live|views)/.*(ex)$", 64 | ~r"lib/app_web/templates/.*(eex)$" 65 | ] 66 | ] 67 | 68 | # Do not include metadata nor timestamps in development logs 69 | config :logger, :console, format: "[$level] $message\n" 70 | 71 | # Set a higher stacktrace during development. Avoid configuring such 72 | # in production as building large stacktraces may be expensive. 73 | config :phoenix, :stacktrace_depth, 20 74 | 75 | # Initialize plugs at runtime for faster development compilation 76 | config :phoenix, :plug_init_mode, :runtime 77 | -------------------------------------------------------------------------------- /test/app/timeline_test.exs: -------------------------------------------------------------------------------- 1 | defmodule App.TimelineTest do 2 | use App.DataCase 3 | 4 | alias App.Timeline 5 | 6 | describe "posts" do 7 | alias App.Timeline.Post 8 | 9 | @valid_attrs %{body: "some body", likes_count: 42, reposts_count: 42, username: "some username"} 10 | @update_attrs %{body: "some updated body", likes_count: 43, reposts_count: 43, username: "some updated username"} 11 | @invalid_attrs %{body: nil, likes_count: nil, reposts_count: nil, username: nil} 12 | 13 | def post_fixture(attrs \\ %{}) do 14 | {:ok, post} = 15 | attrs 16 | |> Enum.into(@valid_attrs) 17 | |> Timeline.create_post() 18 | 19 | post 20 | end 21 | 22 | test "list_posts/0 returns all posts" do 23 | post = post_fixture() 24 | assert Timeline.list_posts() == [post] 25 | end 26 | 27 | test "get_post!/1 returns the post with given id" do 28 | post = post_fixture() 29 | assert Timeline.get_post!(post.id) == post 30 | end 31 | 32 | test "create_post/1 with valid data creates a post" do 33 | assert {:ok, %Post{} = post} = Timeline.create_post(@valid_attrs) 34 | assert post.body == "some body" 35 | assert post.likes_count == 42 36 | assert post.reposts_count == 42 37 | assert post.username == "some username" 38 | end 39 | 40 | test "create_post/1 with invalid data returns error changeset" do 41 | assert {:error, %Ecto.Changeset{}} = Timeline.create_post(@invalid_attrs) 42 | end 43 | 44 | test "update_post/2 with valid data updates the post" do 45 | post = post_fixture() 46 | assert {:ok, %Post{} = post} = Timeline.update_post(post, @update_attrs) 47 | assert post.body == "some updated body" 48 | assert post.likes_count == 43 49 | assert post.reposts_count == 43 50 | assert post.username == "some updated username" 51 | end 52 | 53 | test "update_post/2 with invalid data returns error changeset" do 54 | post = post_fixture() 55 | assert {:error, %Ecto.Changeset{}} = Timeline.update_post(post, @invalid_attrs) 56 | assert post == Timeline.get_post!(post.id) 57 | end 58 | 59 | test "delete_post/1 deletes the post" do 60 | post = post_fixture() 61 | assert {:ok, %Post{}} = Timeline.delete_post(post) 62 | assert_raise Ecto.NoResultsError, fn -> Timeline.get_post!(post.id) end 63 | end 64 | 65 | test "change_post/1 returns a post changeset" do 66 | post = post_fixture() 67 | assert %Ecto.Changeset{} = Timeline.change_post(post) 68 | end 69 | end 70 | end 71 | -------------------------------------------------------------------------------- /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 | 13 | ## From Ecto.Changeset.cast/4 14 | msgid "can't be blank" 15 | msgstr "" 16 | 17 | ## From Ecto.Changeset.unique_constraint/3 18 | msgid "has already been taken" 19 | msgstr "" 20 | 21 | ## From Ecto.Changeset.put_change/3 22 | msgid "is invalid" 23 | msgstr "" 24 | 25 | ## From Ecto.Changeset.validate_acceptance/3 26 | msgid "must be accepted" 27 | msgstr "" 28 | 29 | ## From Ecto.Changeset.validate_format/3 30 | msgid "has invalid format" 31 | msgstr "" 32 | 33 | ## From Ecto.Changeset.validate_subset/3 34 | msgid "has an invalid entry" 35 | msgstr "" 36 | 37 | ## From Ecto.Changeset.validate_exclusion/3 38 | msgid "is reserved" 39 | msgstr "" 40 | 41 | ## From Ecto.Changeset.validate_confirmation/3 42 | msgid "does not match confirmation" 43 | msgstr "" 44 | 45 | ## From Ecto.Changeset.no_assoc_constraint/3 46 | msgid "is still associated with this entry" 47 | msgstr "" 48 | 49 | msgid "are still associated with this entry" 50 | msgstr "" 51 | 52 | ## From Ecto.Changeset.validate_length/3 53 | msgid "should be %{count} character(s)" 54 | msgid_plural "should be %{count} character(s)" 55 | msgstr[0] "" 56 | msgstr[1] "" 57 | 58 | msgid "should have %{count} item(s)" 59 | msgid_plural "should have %{count} item(s)" 60 | msgstr[0] "" 61 | msgstr[1] "" 62 | 63 | msgid "should be at least %{count} character(s)" 64 | msgid_plural "should be at least %{count} character(s)" 65 | msgstr[0] "" 66 | msgstr[1] "" 67 | 68 | msgid "should have at least %{count} item(s)" 69 | msgid_plural "should have at least %{count} item(s)" 70 | msgstr[0] "" 71 | msgstr[1] "" 72 | 73 | msgid "should be at most %{count} character(s)" 74 | msgid_plural "should be at most %{count} character(s)" 75 | msgstr[0] "" 76 | msgstr[1] "" 77 | 78 | msgid "should have at most %{count} item(s)" 79 | msgid_plural "should have at most %{count} item(s)" 80 | msgstr[0] "" 81 | msgstr[1] "" 82 | 83 | ## From Ecto.Changeset.validate_number/3 84 | msgid "must be less than %{number}" 85 | msgstr "" 86 | 87 | msgid "must be greater than %{number}" 88 | msgstr "" 89 | 90 | msgid "must be less than or equal to %{number}" 91 | msgstr "" 92 | 93 | msgid "must be greater than or equal to %{number}" 94 | msgstr "" 95 | 96 | msgid "must be equal to %{number}" 97 | msgstr "" 98 | -------------------------------------------------------------------------------- /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 | ## From Ecto.Changeset.cast/4 12 | msgid "can't be blank" 13 | msgstr "" 14 | 15 | ## From Ecto.Changeset.unique_constraint/3 16 | msgid "has already been taken" 17 | msgstr "" 18 | 19 | ## From Ecto.Changeset.put_change/3 20 | msgid "is invalid" 21 | msgstr "" 22 | 23 | ## From Ecto.Changeset.validate_acceptance/3 24 | msgid "must be accepted" 25 | msgstr "" 26 | 27 | ## From Ecto.Changeset.validate_format/3 28 | msgid "has invalid format" 29 | msgstr "" 30 | 31 | ## From Ecto.Changeset.validate_subset/3 32 | msgid "has an invalid entry" 33 | msgstr "" 34 | 35 | ## From Ecto.Changeset.validate_exclusion/3 36 | msgid "is reserved" 37 | msgstr "" 38 | 39 | ## From Ecto.Changeset.validate_confirmation/3 40 | msgid "does not match confirmation" 41 | msgstr "" 42 | 43 | ## From Ecto.Changeset.no_assoc_constraint/3 44 | msgid "is still associated with this entry" 45 | msgstr "" 46 | 47 | msgid "are still associated with this entry" 48 | msgstr "" 49 | 50 | ## From Ecto.Changeset.validate_length/3 51 | msgid "should be %{count} character(s)" 52 | msgid_plural "should be %{count} character(s)" 53 | msgstr[0] "" 54 | msgstr[1] "" 55 | 56 | msgid "should have %{count} item(s)" 57 | msgid_plural "should have %{count} item(s)" 58 | msgstr[0] "" 59 | msgstr[1] "" 60 | 61 | msgid "should be at least %{count} character(s)" 62 | msgid_plural "should be at least %{count} character(s)" 63 | msgstr[0] "" 64 | msgstr[1] "" 65 | 66 | msgid "should have at least %{count} item(s)" 67 | msgid_plural "should have at least %{count} item(s)" 68 | msgstr[0] "" 69 | msgstr[1] "" 70 | 71 | msgid "should be at most %{count} character(s)" 72 | msgid_plural "should be at most %{count} character(s)" 73 | msgstr[0] "" 74 | msgstr[1] "" 75 | 76 | msgid "should have at most %{count} item(s)" 77 | msgid_plural "should have at most %{count} item(s)" 78 | msgstr[0] "" 79 | msgstr[1] "" 80 | 81 | ## From Ecto.Changeset.validate_number/3 82 | msgid "must be less than %{number}" 83 | msgstr "" 84 | 85 | msgid "must be greater than %{number}" 86 | msgstr "" 87 | 88 | msgid "must be less than or equal to %{number}" 89 | msgstr "" 90 | 91 | msgid "must be greater than or equal to %{number}" 92 | msgstr "" 93 | 94 | msgid "must be equal to %{number}" 95 | msgstr "" 96 | -------------------------------------------------------------------------------- /lib/app_web.ex: -------------------------------------------------------------------------------- 1 | defmodule AppWeb 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 AppWeb, :controller 9 | use AppWeb, :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: AppWeb 23 | 24 | import Plug.Conn 25 | import AppWeb.Gettext 26 | alias AppWeb.Router.Helpers, as: Routes 27 | end 28 | end 29 | 30 | def view do 31 | quote do 32 | use Phoenix.View, 33 | root: "lib/app_web/templates", 34 | namespace: AppWeb 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: {AppWeb.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 AppWeb.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 | import AppWeb.LiveHelpers 87 | 88 | # Import basic rendering functionality (render, render_layout, etc) 89 | import Phoenix.View 90 | 91 | import AppWeb.ErrorHelpers 92 | import AppWeb.Gettext 93 | alias AppWeb.Router.Helpers, as: Routes 94 | end 95 | end 96 | 97 | @doc """ 98 | When used, dispatch to the appropriate controller/view/etc. 99 | """ 100 | defmacro __using__(which) when is_atom(which) do 101 | apply(__MODULE__, which, []) 102 | end 103 | end 104 | -------------------------------------------------------------------------------- /lib/app/timeline.ex: -------------------------------------------------------------------------------- 1 | defmodule App.Timeline do 2 | @moduledoc """ 3 | The Timeline context. 4 | """ 5 | 6 | import Ecto.Query, warn: false 7 | alias App.Repo 8 | 9 | alias App.Timeline.Post 10 | 11 | @doc """ 12 | Returns the list of posts. 13 | 14 | ## Examples 15 | 16 | iex> list_posts() 17 | [%Post{}, ...] 18 | 19 | """ 20 | def list_posts do 21 | Repo.all(from p in Post, order_by: [desc: p.id]) 22 | end 23 | 24 | def inc_likes(%Post{id: id}) do 25 | {1, [post]} = 26 | from(p in Post, where: p.id == ^id, select: p) 27 | |> Repo.update_all(inc: [likes_count: 1]) 28 | 29 | broadcast({:ok, post}, :post_updated) 30 | end 31 | 32 | def inc_reposts(%Post{id: id}) do 33 | {1, [post]} = 34 | from(p in Post, where: p.id == ^id, select: p) 35 | |> Repo.update_all(inc: [reposts_count: 1]) 36 | 37 | broadcast({:ok, post}, :post_updated) 38 | end 39 | 40 | @doc """ 41 | Gets a single post. 42 | 43 | Raises `Ecto.NoResultsError` if the Post does not exist. 44 | 45 | ## Examples 46 | 47 | iex> get_post!(123) 48 | %Post{} 49 | 50 | iex> get_post!(456) 51 | ** (Ecto.NoResultsError) 52 | 53 | """ 54 | def get_post!(id), do: Repo.get!(Post, id) 55 | 56 | @doc """ 57 | Creates a post. 58 | 59 | ## Examples 60 | 61 | iex> create_post(%{field: value}) 62 | {:ok, %Post{}} 63 | 64 | iex> create_post(%{field: bad_value}) 65 | {:error, %Ecto.Changeset{}} 66 | 67 | """ 68 | def create_post(attrs \\ %{}) do 69 | %Post{} 70 | |> Post.changeset(attrs) 71 | |> Repo.insert() 72 | |> broadcast(:post_created) 73 | end 74 | 75 | @doc """ 76 | Updates a post. 77 | 78 | ## Examples 79 | 80 | iex> update_post(post, %{field: new_value}) 81 | {:ok, %Post{}} 82 | 83 | iex> update_post(post, %{field: bad_value}) 84 | {:error, %Ecto.Changeset{}} 85 | 86 | """ 87 | def update_post(%Post{} = post, attrs) do 88 | post 89 | |> Post.changeset(attrs) 90 | |> Repo.update() 91 | |> broadcast(:post_updated) 92 | end 93 | 94 | @doc """ 95 | Deletes a post. 96 | 97 | ## Examples 98 | 99 | iex> delete_post(post) 100 | {:ok, %Post{}} 101 | 102 | iex> delete_post(post) 103 | {:error, %Ecto.Changeset{}} 104 | 105 | """ 106 | def delete_post(%Post{} = post) do 107 | Repo.delete(post) 108 | end 109 | 110 | @doc """ 111 | Returns an `%Ecto.Changeset{}` for tracking post changes. 112 | 113 | ## Examples 114 | 115 | iex> change_post(post) 116 | %Ecto.Changeset{data: %Post{}} 117 | 118 | """ 119 | def change_post(%Post{} = post, attrs \\ %{}) do 120 | Post.changeset(post, attrs) 121 | end 122 | 123 | def subscribe do 124 | Phoenix.PubSub.subscribe(App.PubSub, "posts") 125 | end 126 | 127 | defp broadcast({:error, _reason} = error, _event), do: error 128 | defp broadcast({:ok, post}, event) do 129 | Phoenix.PubSub.broadcast(App.PubSub, "posts", {event, post}) 130 | {:ok, post} 131 | end 132 | end 133 | -------------------------------------------------------------------------------- /test/app_web/live/post_live_test.exs: -------------------------------------------------------------------------------- 1 | defmodule AppWeb.PostLiveTest do 2 | use AppWeb.ConnCase 3 | 4 | import Phoenix.LiveViewTest 5 | 6 | alias App.Timeline 7 | 8 | @create_attrs %{body: "some body", likes_count: 42, reposts_count: 42, username: "some username"} 9 | @update_attrs %{body: "some updated body", likes_count: 43, reposts_count: 43, username: "some updated username"} 10 | @invalid_attrs %{body: nil, likes_count: nil, reposts_count: nil, username: nil} 11 | 12 | defp fixture(:post) do 13 | {:ok, post} = Timeline.create_post(@create_attrs) 14 | post 15 | end 16 | 17 | defp create_post(_) do 18 | post = fixture(:post) 19 | %{post: post} 20 | end 21 | 22 | describe "Index" do 23 | setup [:create_post] 24 | 25 | test "lists all posts", %{conn: conn, post: post} do 26 | {:ok, _index_live, html} = live(conn, Routes.post_index_path(conn, :index)) 27 | 28 | assert html =~ "Listing Posts" 29 | assert html =~ post.body 30 | end 31 | 32 | test "saves new post", %{conn: conn} do 33 | {:ok, index_live, _html} = live(conn, Routes.post_index_path(conn, :index)) 34 | 35 | assert index_live |> element("a", "New Post") |> render_click() =~ 36 | "New Post" 37 | 38 | assert_patch(index_live, Routes.post_index_path(conn, :new)) 39 | 40 | assert index_live 41 | |> form("#post-form", post: @invalid_attrs) 42 | |> render_change() =~ "can't be blank" 43 | 44 | {:ok, _, html} = 45 | index_live 46 | |> form("#post-form", post: @create_attrs) 47 | |> render_submit() 48 | |> follow_redirect(conn, Routes.post_index_path(conn, :index)) 49 | 50 | assert html =~ "Post created successfully" 51 | assert html =~ "some body" 52 | end 53 | 54 | test "updates post in listing", %{conn: conn, post: post} do 55 | {:ok, index_live, _html} = live(conn, Routes.post_index_path(conn, :index)) 56 | 57 | assert index_live |> element("#post-#{post.id} a", "Edit") |> render_click() =~ 58 | "Edit Post" 59 | 60 | assert_patch(index_live, Routes.post_index_path(conn, :edit, post)) 61 | 62 | assert index_live 63 | |> form("#post-form", post: @invalid_attrs) 64 | |> render_change() =~ "can't be blank" 65 | 66 | {:ok, _, html} = 67 | index_live 68 | |> form("#post-form", post: @update_attrs) 69 | |> render_submit() 70 | |> follow_redirect(conn, Routes.post_index_path(conn, :index)) 71 | 72 | assert html =~ "Post updated successfully" 73 | assert html =~ "some updated body" 74 | end 75 | 76 | test "deletes post in listing", %{conn: conn, post: post} do 77 | {:ok, index_live, _html} = live(conn, Routes.post_index_path(conn, :index)) 78 | 79 | assert index_live |> element("#post-#{post.id} a", "Delete") |> render_click() 80 | refute has_element?(index_live, "#post-#{post.id}") 81 | end 82 | end 83 | 84 | describe "Show" do 85 | setup [:create_post] 86 | 87 | test "displays post", %{conn: conn, post: post} do 88 | {:ok, _show_live, html} = live(conn, Routes.post_show_path(conn, :show, post)) 89 | 90 | assert html =~ "Show Post" 91 | assert html =~ post.body 92 | end 93 | 94 | test "updates post within modal", %{conn: conn, post: post} do 95 | {:ok, show_live, _html} = live(conn, Routes.post_show_path(conn, :show, post)) 96 | 97 | assert show_live |> element("a", "Edit") |> render_click() =~ 98 | "Edit Post" 99 | 100 | assert_patch(show_live, Routes.post_show_path(conn, :edit, post)) 101 | 102 | assert show_live 103 | |> form("#post-form", post: @invalid_attrs) 104 | |> render_change() =~ "can't be blank" 105 | 106 | {:ok, _, html} = 107 | show_live 108 | |> form("#post-form", post: @update_attrs) 109 | |> render_submit() 110 | |> follow_redirect(conn, Routes.post_show_path(conn, :show, post)) 111 | 112 | assert html =~ "Post updated successfully" 113 | assert html =~ "some updated body" 114 | end 115 | end 116 | end 117 | -------------------------------------------------------------------------------- /mix.lock: -------------------------------------------------------------------------------- 1 | %{ 2 | "connection": {:hex, :connection, "1.0.4", "a1cae72211f0eef17705aaededacac3eb30e6625b04a6117c1b2db6ace7d5976", [:mix], [], "hexpm", "4a0850c9be22a43af9920a71ab17c051f5f7d45c209e40269a1938832510e4d9"}, 3 | "cowboy": {:hex, :cowboy, "2.8.0", "f3dc62e35797ecd9ac1b50db74611193c29815401e53bac9a5c0577bd7bc667d", [:rebar3], [{:cowlib, "~> 2.9.1", [hex: :cowlib, repo: "hexpm", optional: false]}, {:ranch, "~> 1.7.1", [hex: :ranch, repo: "hexpm", optional: false]}], "hexpm", "4643e4fba74ac96d4d152c75803de6fad0b3fa5df354c71afdd6cbeeb15fac8a"}, 4 | "cowlib": {:hex, :cowlib, "2.9.1", "61a6c7c50cf07fdd24b2f45b89500bb93b6686579b069a89f88cb211e1125c78", [:rebar3], [], "hexpm", "e4175dc240a70d996156160891e1c62238ede1729e45740bdd38064dad476170"}, 5 | "db_connection": {:hex, :db_connection, "2.2.2", "3bbca41b199e1598245b716248964926303b5d4609ff065125ce98bcd368939e", [:mix], [{:connection, "~> 1.0.2", [hex: :connection, repo: "hexpm", optional: false]}], "hexpm", "642af240d8a8affb93b4ba5a6fcd2bbcbdc327e1a524b825d383711536f8070c"}, 6 | "decimal": {:hex, :decimal, "2.0.0", "a78296e617b0f5dd4c6caf57c714431347912ffb1d0842e998e9792b5642d697", [:mix], [], "hexpm", "34666e9c55dea81013e77d9d87370fe6cb6291d1ef32f46a1600230b1d44f577"}, 7 | "ecto": {:hex, :ecto, "3.4.6", "08f7afad3257d6eb8613309af31037e16c36808dfda5a3cd0cb4e9738db030e4", [:mix], [{:decimal, "~> 1.6 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "6f13a9e2a62e75c2dcfc7207bfc65645ab387af8360db4c89fee8b5a4bf3f70b"}, 8 | "ecto_sql": {:hex, :ecto_sql, "3.4.5", "30161f81b167d561a9a2df4329c10ae05ff36eca7ccc84628f2c8b9fa1e43323", [:mix], [{:db_connection, "~> 2.2", [hex: :db_connection, repo: "hexpm", optional: false]}, {:ecto, "~> 3.4.3", [hex: :ecto, repo: "hexpm", optional: false]}, {:myxql, "~> 0.3.0 or ~> 0.4.0", [hex: :myxql, repo: "hexpm", optional: true]}, {:postgrex, "~> 0.15.0", [hex: :postgrex, repo: "hexpm", optional: true]}, {:tds, "~> 2.1.0", [hex: :tds, repo: "hexpm", optional: true]}, {:telemetry, "~> 0.4.0", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "31990c6a3579b36a3c0841d34a94c275e727de8b84f58509da5f1b2032c98ac2"}, 9 | "file_system": {:hex, :file_system, "0.2.9", "545b9c9d502e8bfa71a5315fac2a923bd060fd9acb797fe6595f54b0f975fd32", [:mix], [], "hexpm", "3cf87a377fe1d93043adeec4889feacf594957226b4f19d5897096d6f61345d8"}, 10 | "floki": {:hex, :floki, "0.28.0", "0d0795a17189510ee01323e6990f906309e9fc6e8570219135211f1264d78c7f", [:mix], [{:html_entities, "~> 0.5.0", [hex: :html_entities, repo: "hexpm", optional: false]}], "hexpm", "db1549560874ebba5a6367e46c3aec5fedd41f2757ad6efe567efb04b4d4ee55"}, 11 | "gettext": {:hex, :gettext, "0.18.2", "7df3ea191bb56c0309c00a783334b288d08a879f53a7014341284635850a6e55", [:mix], [], "hexpm", "f9f537b13d4fdd30f3039d33cb80144c3aa1f8d9698e47d7bcbcc8df93b1f5c5"}, 12 | "html_entities": {:hex, :html_entities, "0.5.1", "1c9715058b42c35a2ab65edc5b36d0ea66dd083767bef6e3edb57870ef556549", [:mix], [], "hexpm", "30efab070904eb897ff05cd52fa61c1025d7f8ef3a9ca250bc4e6513d16c32de"}, 13 | "jason": {:hex, :jason, "1.2.2", "ba43e3f2709fd1aa1dce90aaabfd039d000469c05c56f0b8e31978e03fa39052", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "18a228f5f0058ee183f29f9eae0805c6e59d61c3b006760668d8d18ff0d12179"}, 14 | "mime": {:hex, :mime, "1.4.0", "5066f14944b470286146047d2f73518cf5cca82f8e4815cf35d196b58cf07c47", [:mix], [], "hexpm", "75fa42c4228ea9a23f70f123c74ba7cece6a03b1fd474fe13f6a7a85c6ea4ff6"}, 15 | "phoenix": {:hex, :phoenix, "1.5.5", "9a5a197edc1828c5f138a8ef10524dfecc43e36ab435c14578b1e9b4bd98858c", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_html, "~> 2.13", [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", "b10eaf86ad026eafad2ee3dd336f0fb1c95a3711789855d913244e270bde463b"}, 16 | "phoenix_ecto": {:hex, :phoenix_ecto, "4.2.1", "13f124cf0a3ce0f1948cf24654c7b9f2347169ff75c1123f44674afee6af3b03", [:mix], [{:ecto, "~> 3.0", [hex: :ecto, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 2.14.2 or ~> 2.15", [hex: :phoenix_html, repo: "hexpm", optional: true]}, {:plug, "~> 1.0", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "478a1bae899cac0a6e02be1deec7e2944b7754c04e7d4107fc5a517f877743c0"}, 17 | "phoenix_html": {:hex, :phoenix_html, "2.14.2", "b8a3899a72050f3f48a36430da507dd99caf0ac2d06c77529b1646964f3d563e", [:mix], [{:plug, "~> 1.5", [hex: :plug, repo: "hexpm", optional: false]}], "hexpm", "58061c8dfd25da5df1ea0ca47c972f161beb6c875cd293917045b92ffe1bf617"}, 18 | "phoenix_live_dashboard": {:hex, :phoenix_live_dashboard, "0.2.9", "ac43a73561a4010fd2a52289a2f570829e2be5d5ea408a5af99dbed8793439e7", [:mix], [{: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", [hex: :telemetry_metrics, repo: "hexpm", optional: false]}], "hexpm", "f7cd3265a53d2bcd2e541a7d3c55f5a22e07bf6070b1d4adabd81791885190f7"}, 19 | "phoenix_live_reload": {:hex, :phoenix_live_reload, "1.2.4", "940c0344b1d66a2e46eef02af3a70e0c5bb45a4db0bf47917add271b76cd3914", [: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", "38f9308357dea4cc77f247e216da99fcb0224e05ada1469167520bed4cb8cccd"}, 20 | "phoenix_live_view": {:hex, :phoenix_live_view, "0.14.7", "e05ca2e57974bb99eb54fed88b04754a622e54cf7e832db3c868bd06e0b99ff2", [: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", "899224a704221ab0019200da61019dea699763e12daa24d69edd79bc228fe5a5"}, 21 | "phoenix_pubsub": {:hex, :phoenix_pubsub, "2.0.0", "a1ae76717bb168cdeb10ec9d92d1480fec99e3080f011402c0a2d68d47395ffb", [:mix], [], "hexpm", "c52d948c4f261577b9c6fa804be91884b381a7f8f18450c5045975435350f771"}, 22 | "plug": {:hex, :plug, "1.10.4", "41eba7d1a2d671faaf531fa867645bd5a3dce0957d8e2a3f398ccff7d2ef017f", [: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", "ad1e233fe73d2eec56616568d260777b67f53148a999dc2d048f4eb9778fe4a0"}, 23 | "plug_cowboy": {:hex, :plug_cowboy, "2.3.0", "149a50e05cb73c12aad6506a371cd75750c0b19a32f81866e1a323dda9e0e99d", [:mix], [{:cowboy, "~> 2.7", [hex: :cowboy, repo: "hexpm", optional: false]}, {:plug, "~> 1.7", [hex: :plug, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "bc595a1870cef13f9c1e03df56d96804db7f702175e4ccacdb8fc75c02a7b97e"}, 24 | "plug_crypto": {:hex, :plug_crypto, "1.1.2", "bdd187572cc26dbd95b87136290425f2b580a116d3fb1f564216918c9730d227", [:mix], [], "hexpm", "6b8b608f895b6ffcfad49c37c7883e8df98ae19c6a28113b02aa1e9c5b22d6b5"}, 25 | "postgrex": {:hex, :postgrex, "0.15.6", "a464c72010a56e3214fe2b99c1a76faab4c2bb0255cabdef30dea763a3569aa2", [:mix], [{:connection, "~> 1.0", [hex: :connection, repo: "hexpm", optional: false]}, {:db_connection, "~> 2.1", [hex: :db_connection, repo: "hexpm", optional: false]}, {:decimal, "~> 1.5 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: false]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}], "hexpm", "f99268325ac8f66ffd6c4964faab9e70fbf721234ab2ad238c00f9530b8cdd55"}, 26 | "ranch": {:hex, :ranch, "1.7.1", "6b1fab51b49196860b733a49c07604465a47bdb78aa10c1c16a3d199f7f8c881", [:rebar3], [], "hexpm", "451d8527787df716d99dc36162fca05934915db0b6141bbdac2ea8d3c7afc7d7"}, 27 | "telemetry": {:hex, :telemetry, "0.4.2", "2808c992455e08d6177322f14d3bdb6b625fbcfd233a73505870d8738a2f4599", [:rebar3], [], "hexpm", "2d1419bd9dda6a206d7b5852179511722e2b18812310d304620c7bd92a13fcef"}, 28 | "telemetry_metrics": {:hex, :telemetry_metrics, "0.5.0", "1b796e74add83abf844e808564275dfb342bcc930b04c7577ab780e262b0d998", [:mix], [{:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "31225e6ce7a37a421a0a96ec55244386aec1c190b22578bd245188a4a33298fd"}, 29 | "telemetry_poller": {:hex, :telemetry_poller, "0.5.1", "21071cc2e536810bac5628b935521ff3e28f0303e770951158c73eaaa01e962a", [:rebar3], [{:telemetry, "~> 0.4", [hex: :telemetry, repo: "hexpm", optional: false]}], "hexpm", "4cab72069210bc6e7a080cec9afffad1b33370149ed5d379b81c7c5f0c663fd4"}, 30 | } 31 | -------------------------------------------------------------------------------- /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{font-size: 3.6rem; line-height: 1.25} 13 | h2{font-size: 2.8rem; line-height: 1.3} 14 | h3{font-size: 2.2rem; letter-spacing: -.08rem; line-height: 1.35} 15 | h4{font-size: 1.8rem; letter-spacing: -.05rem; line-height: 1.5} 16 | h5{font-size: 1.6rem; letter-spacing: 0; line-height: 1.4} 17 | h6{font-size: 1.4rem; letter-spacing: 0; line-height: 1.2} 18 | pre{padding: 1em;} 19 | 20 | .container{ 21 | margin: 0 auto; 22 | max-width: 80.0rem; 23 | padding: 0 2.0rem; 24 | position: relative; 25 | width: 100% 26 | } 27 | select { 28 | width: auto; 29 | } 30 | 31 | /* Phoenix promo and logo */ 32 | .phx-hero { 33 | text-align: center; 34 | border-bottom: 1px solid #e3e3e3; 35 | background: #eee; 36 | border-radius: 6px; 37 | padding: 3em 3em 1em; 38 | margin-bottom: 3rem; 39 | font-weight: 200; 40 | font-size: 120%; 41 | } 42 | .phx-hero input { 43 | background: #ffffff; 44 | } 45 | .phx-logo { 46 | min-width: 300px; 47 | margin: 1rem; 48 | display: block; 49 | } 50 | .phx-logo img { 51 | width: auto; 52 | display: block; 53 | } 54 | 55 | /* Headers */ 56 | header { 57 | width: 100%; 58 | background: #fdfdfd; 59 | border-bottom: 1px solid #eaeaea; 60 | margin-bottom: 2rem; 61 | } 62 | header section { 63 | align-items: center; 64 | display: flex; 65 | flex-direction: column; 66 | justify-content: space-between; 67 | } 68 | header section :first-child { 69 | order: 2; 70 | } 71 | header section :last-child { 72 | order: 1; 73 | } 74 | header nav ul, 75 | header nav li { 76 | margin: 0; 77 | padding: 0; 78 | display: block; 79 | text-align: right; 80 | white-space: nowrap; 81 | } 82 | header nav ul { 83 | margin: 1rem; 84 | margin-top: 0; 85 | } 86 | header nav a { 87 | display: block; 88 | } 89 | 90 | @media (min-width: 40.0rem) { /* Small devices (landscape phones, 576px and up) */ 91 | header section { 92 | flex-direction: row; 93 | } 94 | header nav ul { 95 | margin: 1rem; 96 | } 97 | .phx-logo { 98 | flex-basis: 527px; 99 | margin: 2rem 1rem; 100 | } 101 | } 102 | --------------------------------------------------------------------------------