Merge pull request #286 from dwyl/fix-502-error-issue#280

PR: tidy README.md #280

.env_sample

@@ -0,0 +1,2 @@
+export GITHUB_CLIENT_ID=your-client-id-here
+export GITHUB_CLIENT_SECRET=secret-here

.github/workflows/ci.yml

@@ -24,8 +24,8 @@ jobs:
           --health-retries 5
     strategy:
       matrix:
-        otp: ['24.3.4']
-        elixir: ['1.14.1']
+        otp: ['27.0']
+        elixir: ['1.17.0']
     steps:
     - uses: actions/checkout@v2
     - name: Set up Elixir

Dockerfile

@@ -1,5 +1,6 @@
-# Find eligible builder and runner images on Docker Hub. We use Ubuntu/Debian instead of
-# Alpine to avoid DNS resolution issues in production.
+# Find eligible builder and runner images on Docker Hub. 
+# We use Ubuntu/Debian instead of Alpine 
+# to avoid DNS resolution issues in production.
 #
 # https://hub.docker.com/r/hexpm/elixir/tags?page=1&name=ubuntu
 # https://hub.docker.com/_/ubuntu?tab=tags
@@ -12,13 +13,13 @@
 #   - https://pkgs.org/ - resource for finding needed packages
 #   - Ex: hexpm/elixir:1.13.2-erlang-24.2-debian-bullseye-20210902-slim
 #
-ARG ELIXIR_VERSION=1.14.1
-ARG OTP_VERSION=24.3.4.5
-ARG DEBIAN_VERSION=bullseye-20220801-slim
+ARG ELIXIR_VERSION=1.17.0
+ARG OTP_VERSION=27.0
+ARG UBUNTU_VERSION=jammy-20240530
 
 
-ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-debian-${DEBIAN_VERSION}"
-ARG RUNNER_IMAGE="debian:${DEBIAN_VERSION}"
+ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-ubuntu-${UBUNTU_VERSION}"
+ARG RUNNER_IMAGE="ubuntu:${UBUNTU_VERSION}"
 
 FROM ${BUILDER_IMAGE} as builder
 

README.md

@@ -1,110 +1,176 @@
+<div align="center">
+
 # 🏷 Labels
 
+![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/dwyl/labels/ci.yml?label=build&style=flat-square&branch=main)
+[![codecov.io](https://img.shields.io/codecov/c/github/dwyl/labels/main.svg?style=flat-square)](http://codecov.io/github/dwyl/labels?branch=main)
+[![contributions welcome](https://img.shields.io/badge/feedback-welcome-brightgreen.svg?style=flat-square)](https://github.com/dwyl/labels/issues)
 [![HitCount](https://hits.dwyl.com/dwyl/labels.svg?style=flat-square)](https://hits.dwyl.com/dwyl/labels)
-[![Elixir CI](https://github.com/dwyl/labels/actions/workflows/ci.yml/badge.svg)](https://github.com/dwyl/labels/actions/workflows/ci.yml)
 
-See it in action: https://labels.fly.dev/
+_Try_ it: [**labels**.fly.dev](https://labels.fly.dev/)
+
+</div>
 
-## What?
+## What? 💭
 
-Gui application to copy labels from one repo to another.
+A Web App to copy `GitHub` labels from one repo to another.
 
-## Why?
+## Why? 🤷‍♀️
 
-Having a standard list of labels across all of your projects means that you can
-move between repositories quickly and effectively. *However*, manually adding
-labels to a new GitHub repository can become old, ***fast***. This module aims
-to **save you time** by automating the addition of labels to a new project by
-copying them from a selected repo and then transferring them to a target repo.
+Having a standard list of `labels` across all of your projects 
+means you can move between repositories quickly 
+and effectively. 
+*However*, manually adding labels 
+to a new `GitHub` repository can become old, ***fast***. <br />
+This app **saves you time** 
+by _automating_ the addition of `labels` 
+to a `new` project,
+copying from a selected repo 
+and creating them on the target repo.
 
-Our main criteria is that it ***MUST*** be quicker than manually adding labels and will offer a
-[hosted version](https://labels.fly.dev/)
-of the app if you don't want to configure/run the app yourself.
+Our main criteria is that the tool 
+must be faster than manually adding labels. 
+We offer a
+[hosted version](https://labels.fly.dev)
+of the app 
+if you don't want to configure/run the app yourself.
 
-At **`dwyl`** we intensively use labels on issues and pull requests
-to communicate about the status of the work
-for each team member of our project.
-We work remotely and the labels allow us
-to quickly know who took responsibility on an issue
-and what progress they have made.
+At **`dwyl`** we use labels a _lot_ 
+on **issues** and **pull requests**
+to ***communicate*** about the status of the work
+on a project.
+We work remotely and the `labels` allow us
+to quickly know what is going on.
 For example we can quickly see
 from the list of issues on a repository
-if someone is working on a specific issue (`in-progress` label),
-if an issue is finished but waiting for review (`in-review` label)
-or if an issue is currently reviewed (`in-review` label),
-see the [list of labels and their description](https://github.com/dwyl/labels#labels).
+if someone is working on a specific issue (**`in-progress`** label),
+if a task is finished but **`awaiting-review`** 
+or **`in-review`**.
+
+> See the complete
+[list of labels and their description](https://github.com/dwyl/labels#labels)
+below.
 
 This process streamlines communication
 and allows us to focus on developing features
 instead of spending time on "chat"
 explaining the status of an issue.
-It also allows us to communicate quickly with our clients
+It also allows us to communicate quickly with our clients & stakeholders
 as they know when to test and approve/reject a feature with the label **`please-test`**.
 
-## Who?
+## Who? 
 
-Any Github user who has created multiple repositories and values their time ⏰
+Any `person` that uses `GitHub` 
+and has multiple repos 
+they want to keep `labels` consistent across. 
+i.e: people that value their time! ⏰
 
 ## How?
 
-A simple and intuitive UI authenticated with GitHub using
+A simple and intuitive UI authenticated 
+with `GitHub` using
 [elixir-auth-github](https://github.com/dwyl/elixir-auth-github/)
-and make requests to the github api on your behalf.
+and make requests 
+to the **`GitHub` API** on your behalf.
 
-After authentication via github login a user will simply have to submit a form with the following fields.
- + Source repo name and owner
- + Target repo name and owner
+After authentication via `GitHub` login 
+simply have to submit a form with the following fields.
+ + Source repo name and owner.
+ + Target repo name and owner.
 
-You can also copy labels again to previously synchronized repositories.
+You can also copy labels again 
+to previously synchronized repositories.
+If you need to make changes.
 
-### What happens to existing labels in target repo?
+### What happens to _existing_ labels in target repo? 🤔
 
-Labels is _non-destructive_.
-If there are existing labels with the same name but a different colour,
+`labels` is _non-destructive_.
+If there are existing labels 
+with the same name but a different colour,
 the colour will change to match the source repo.
-Other than this, it will simply add any labels that don't already exist and
+Other than this, it will simply add any labels that _don't_ already exist and
 won't touch the existing ones.
 
-## Run
+## Run the App! 🏃‍♀️
+
+To run the `labels` app on your `localhost`,
+follow these steps:
+
+### 1. Clone the project ⬇️
+
+```sh
+git clone [email protected]:dwyl/labels.git && cd labels
+```
+
+### 2. Install dependencies ⏳
 
+```sh
+mix setup
+```
 
-#### Config
+### 3. Configure Environment Variables 📝
 
-Since we are using [elixir-auth-github](https://github.com/dwyl/elixir-auth-github)
-you will need to follow some of their setup to run the project locally.
- + You need to create a new oauth application in your github but please see
-   [create-a-github-app-and-oauth2-credentials](https://github.com/dwyl/elixir-auth-github/#2-create-a-github-app-and-oauth2-credentials-)
- + You will need to create a
+> `labels` uses 
+[`elixir-auth-github`](https://github.com/dwyl/elixir-auth-github) 
+for authentication,
+follow the instructions in:
+[create-a-github-app-and-oauth2-credentials](https://github.com/dwyl/elixir-auth-github/#2-create-a-github-app-and-oauth2-credentials-)
+to get your `GitHub` Auth keys.
+
+ Create an
  [.env](https://github.com/dwyl/learn-environment-variables)
- file root or project of the form:
+ file root or project with the two variables:
 
 ```sh
 GITHUB_CLIENT_ID=<your-client-id>
 GITHUB_CLIENT_SECRET=<your-client-secret>
 ```
 
-#### To run:
+Once you've added the environment variables to the `.env` file
+and saved the file, 
+run the command:
 
-Enter these commands into your terminal:
-* `git clone https://github.com/dwyl/labels.git`
-* `cd labels`
-* `source .env`
-* `mix deps.get`
-* `mix phx.server`
-* Visit http://localhost:4000/
+```sh
+source .env
+```
+
+That will make your environment variables
+available to the App. 
+
+### 4. Run the App 🚀 
+
+```sh
+mix s
+```
 
+Now visit: 
+[localhost:4000](http://localhost:4000/)
+in your web browser.
 
-## Labels
+You should see something similar to the following:
 
-This repository contains our 'master list' of labels used across all dwyl projects:
-[https://www.github.com/dwyl/labels/labels](github.com/dwyl/labels/labels)
+<img width="764" alt="labels-app-homepage" src="https://github.com/dwyl/labels/assets/194400/b05146a5-a01a-4fc9-b9df-0b0d66f4dd1d">
+
+<br />
+<div align="center">
+
+## _Our_ List Of Labels 📜 🏷️
+
+</div>
+
+This repository is our 
+"[single source of truth](https://en.wikipedia.org/wiki/Single_source_of_truth)" 
+of labels used across all `@dwyl` projects, 
+see: 
+[github.com/dwyl/labels/labels](github.com/dwyl/labels/labels)
 
 An explanation of each can be found below,
-starting with the custom dwyl labels,
+starting with the _custom_ dwyl labels,
 which we use in conjunction with our
 [contributing process/guidelines](https://www.github.com/dwyl/contributing).
 
-Clicking on a label will take you to an issue with further discussion on its existence and meaning:
+Clicking on a label will take you to an issue 
+with further discussion on its existence and meaning:
 
 - [`awaiting-review`](https://github.com/dwyl/labels/issues/49) #f39c12 - added to _issue_ once a PR with its resolution has been assigned to a reviewer (replaces `in-progress`)
 - [`chore`](https://github.com/dwyl/labels/issues/37) #3A2716 - routine tasks that must be done for every project but require little active brain power
@@ -146,10 +212,9 @@ _(NB. if you'd like to see where dwyl is in need of a helping hand, check out ht
 - `wontfix` #ffffff - when an issue won't be addressed (add a comment to the issue as to *why* this is the case
 
 
-## Questions/Suggestions
+## Feedback / Questions / Suggestions 🙏
 
 We hope you find the application useful! We really want to make the process of setting up a repo as fast as possible so hope this helps.
 
 If you need something cleared up, have any requests or want to offer any improvements then please [create an issue](https://github.com/dwyl/labels/issues/new).
-
- **Note** It also would be great to hear, via issue, your thoughts on our existing set of labels plus your own favourites :smiley:
+We love hearing _your_ thoughts. 😊

assets/css/app.css

@@ -26,7 +26,7 @@
 .alert p {
   margin-bottom: 0;
 }
-.alert:empty {
+.alert:empty, .alert-danger, .alert-info {
   display: none;
 }
 .invalid-feedback {

config/test.exs

@@ -24,7 +24,7 @@ config :labels, LabelsWeb.Endpoint,
 config :labels, Labels.Mailer, adapter: Swoosh.Adapters.Test
 
 # Print only warnings and errors during test
-config :logger, level: :warn
+config :logger, level: :warning
 
 # Initialize plugs at runtime for faster test compilation
 config :phoenix, :plug_init_mode, :runtime

fly.toml

@@ -22,6 +22,10 @@ kill_timeout = "5s"
   protocol = "tcp"
   internal_port = 8080
   processes = ["app"]
+  # https://fly.io/docs/apps/autostart-stop/
+  auto_stop_machines = true
+  auto_start_machines = true
+  min_machines_running = 0
 
   [[services.ports]]
     port = 80

lib/labels_web/templates/layout/app.html.heex

@@ -1,5 +1,9 @@
 <main class="container">
-  <p class="alert alert-info" role="alert"><%= get_flash(@conn, :info) %></p>
-  <p class="alert alert-danger" role="alert"><%= get_flash(@conn, :error) %></p>
+  <p class="alert alert-info" role="alert">
+    <%= Phoenix.Flash.get(@flash, :info) %>
+  </p>
+  <p class="alert alert-danger" role="alert">
+    <%= Phoenix.Flash.get(@flash, :error) %>
+  </p>
   <%= @inner_content %>
 </main>

lib/labels_web/templates/layout/icons.html.heex

@@ -0,0 +1,30 @@
+<meta charset="utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta
+  name="description"
+  content="dwyl is a worldwide community of people using technology to solve real problems."
+/>
+<meta name="robots" content="noarchive" />
+<link rel="shortcut-icon" href="https://dwyl.com/img/favicon.ico" />
+<link rel="apple-touch-icon" sizes="57x57" href="https://dwyl.com/img/apple-icon-57x57.png" />
+<link rel="apple-touch-icon" sizes="60x60" href="https://dwyl.com/img/apple-icon-60x60.png" />
+<link rel="apple-touch-icon" sizes="72x72" href="https://dwyl.com/img/apple-icon-72x72.png" />
+<link rel="apple-touch-icon" sizes="76x76" href="https://dwyl.com/img/apple-icon-76x76.png" />
+<link rel="apple-touch-icon" sizes="114x114" href="https://dwyl.com/img/apple-icon-114x114.png" />
+<link rel="apple-touch-icon" sizes="120x120" href="https://dwyl.com/img/apple-icon-120x120.png" />
+<link rel="apple-touch-icon" sizes="144x144" href="https://dwyl.com/img/apple-icon-144x144.png" />
+<link rel="apple-touch-icon" sizes="152x152" href="https://dwyl.com/img/apple-icon-152x152.png" />
+<link rel="apple-touch-icon" sizes="180x180" href="https://dwyl.com/img/apple-icon-180x180.png" />
+<link
+  rel="icon"
+  type="image/png"
+  sizes="192x192"
+  href="https://dwyl.com/img/android-icon-192x192.png"
+/>
+<link rel="icon" type="image/png" sizes="32x32" href="https://dwyl.com/img/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="96x96" href="https://dwyl.com/img/favicon-96x96.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="https://dwyl.com/img/favicon-16x16.png" />
+<link rel="manifest" href="https://dwyl.com/img/manifest.json" />
+<meta name="msapplication-TileColor" content="#ffffff" />
+<meta name="msapplication-TileImage" content="https://dwyl.com/img/ms-icon-144x144.png" />

lib/labels_web/templates/layout/live.html.heex

@@ -6,6 +6,5 @@
   <p class="alert alert-danger" role="alert" phx-click="lv:clear-flash" phx-value-key="error">
     <%= live_flash(@flash, :error) %>
   </p>
-
   <%= @inner_content %>
 </main>

lib/labels_web/templates/layout/root.html.heex

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <%= csrf_meta_tag() %>
     <%= live_title_tag(assigns[:page_title] || "Labels", suffix: " · Phoenix Framework") %>
+    <%= render("icons.html") %>
     <link phx-track-static rel="stylesheet" href={Routes.static_path(@conn, "/assets/app.css")} />
     <script
       defer

mix.exs

@@ -16,7 +16,8 @@ defmodule Labels.MixProject do
         coveralls: :test,
         "coveralls.detail": :test,
         "coveralls.post": :test,
-        "coveralls.html": :test
+        "coveralls.html": :test,
+        t: :test
       ]
     ]
   end
@@ -76,7 +77,9 @@ defmodule Labels.MixProject do
       "ecto.reset": ["ecto.drop", "ecto.setup"],
       test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
       "assets.deploy": ["esbuild default --minify", "phx.digest"],
-      c: ["coveralls.html"]
+      t: ["test"],
+      c: ["coveralls.html"],
+      s: ["phx.server"]
     ]
   end
 end