Initial setup (first pass) (#1)

* Updated Elixir version; made phx interactive

* Added JS formatting rules

* Added yt-dlp to dockerfile

* Added a basic PR template

* Added default responses for the PR template

.eslintrc.js

@@ -0,0 +1,16 @@
+module.exports = {
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+    node: true
+  },
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2022
+  },
+  extends: ['prettier'],
+  rules: {
+    'prettier/prettier': 'error'
+  }
+}

.github/pull_request_template.md

@@ -0,0 +1,15 @@
+## What's new?
+
+N/A
+
+## What's changed?
+
+N/A
+
+## What's fixed?
+
+N/A
+
+## Any other comments?
+
+N/A

.prettierignore

@@ -0,0 +1,2 @@
+assets/vendor/
+assets/node_modules/

.prettierrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  jsxSingleQuote: false,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  arrowParens: 'always',
+  requirePragma: false,
+  endOfLine: 'lf'
+}

Dockerfile

@@ -3,7 +3,8 @@ FROM elixir:latest
 
 # Install debian packages
 RUN apt-get update -qq
-RUN apt-get install -y inotify-tools postgresql-client ffmpeg 
+RUN apt-get install -y inotify-tools postgresql-client ffmpeg \
+  python3 python3-pip python3-setuptools python3-wheel python3-dev
 
 # Install nodejs
 RUN curl -sL https://deb.nodesource.com/setup_20.x -o nodesource_setup.sh
@@ -15,6 +16,10 @@ RUN npm install -g yarn
 RUN mix local.hex --force
 RUN mix local.rebar --force
 
+# Download YT-DLP
+# NOTE: If you're seeing weird issues, consider using the FFMPEG released by yt-dlp
+RUN python3 -m pip install -U --pre yt-dlp
+
 # Create app directory and copy the Elixir projects into it.
 WORKDIR /app
 COPY . ./

assets/js/app.js

@@ -16,19 +16,21 @@
 //
 
 // Include phoenix_html to handle method=PUT/DELETE in forms and buttons.
-import "phoenix_html"
+import 'phoenix_html'
 // Establish Phoenix Socket and LiveView configuration.
-import {Socket} from "phoenix"
+import { Socket } from 'phoenix'
-import {LiveSocket} from "phoenix_live_view"
+import { LiveSocket } from 'phoenix_live_view'
-import topbar from "../vendor/topbar"
+import topbar from '../vendor/topbar'
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
+let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content')
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket('/live', Socket, {
+  params: { _csrf_token: csrfToken }
+})
 
 // Show progress bar on live navigation and form submits
-topbar.config({barColors: {0: "#29d"}, shadowColor: "rgba(0, 0, 0, .3)"})
+topbar.config({ barColors: { 0: '#29d' }, shadowColor: 'rgba(0, 0, 0, .3)' })
-window.addEventListener("phx:page-loading-start", _info => topbar.show(300))
+window.addEventListener('phx:page-loading-start', (_info) => topbar.show(300))
-window.addEventListener("phx:page-loading-stop", _info => topbar.hide())
+window.addEventListener('phx:page-loading-stop', (_info) => topbar.hide())
 
 // connect if there are any LiveViews on the page
 liveSocket.connect()
@@ -38,4 +40,3 @@ liveSocket.connect()
 // >> liveSocket.enableLatencySim(1000)  // enabled for duration of browser session
 // >> liveSocket.disableLatencySim()
 window.liveSocket = liveSocket
-

assets/tailwind.config.js

@@ -1,68 +1,78 @@
 // See the Tailwind configuration guide for advanced usage
 // https://tailwindcss.com/docs/configuration
 
-const plugin = require("tailwindcss/plugin")
+const plugin = require('tailwindcss/plugin')
-const fs = require("fs")
+const fs = require('fs')
-const path = require("path")
+const path = require('path')
 
 module.exports = {
-  content: [
+  content: ['./js/**/*.js', '../lib/pinchflat_web.ex', '../lib/pinchflat_web/**/*.*ex'],
-    "./js/**/*.js",
-    "../lib/pinchflat_web.ex",
-    "../lib/pinchflat_web/**/*.*ex"
-  ],
   theme: {
     extend: {
       colors: {
-        brand: "#FD4F00",
+        brand: '#FD4F00'
       }
-    },
+    }
   },
   plugins: [
-    require("@tailwindcss/forms"),
+    require('@tailwindcss/forms'),
     // Allows prefixing tailwind classes with LiveView classes to add rules
     // only when LiveView classes are applied, for example:
     //
     //     <div class="phx-click-loading:animate-ping">
     //
-    plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])),
+    plugin(({ addVariant }) =>
-    plugin(({addVariant}) => addVariant("phx-click-loading", [".phx-click-loading&", ".phx-click-loading &"])),
+      addVariant('phx-no-feedback', ['.phx-no-feedback&', '.phx-no-feedback &'])
-    plugin(({addVariant}) => addVariant("phx-submit-loading", [".phx-submit-loading&", ".phx-submit-loading &"])),
+    ),
-    plugin(({addVariant}) => addVariant("phx-change-loading", [".phx-change-loading&", ".phx-change-loading &"])),
+    plugin(({ addVariant }) =>
+      addVariant('phx-click-loading', ['.phx-click-loading&', '.phx-click-loading &'])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant('phx-submit-loading', ['.phx-submit-loading&', '.phx-submit-loading &'])
+    ),
+    plugin(({ addVariant }) =>
+      addVariant('phx-change-loading', ['.phx-change-loading&', '.phx-change-loading &'])
+    ),
 
     // Embeds Heroicons (https://heroicons.com) into your app.css bundle
     // See your `CoreComponents.icon/1` for more information.
     //
-    plugin(function({matchComponents, theme}) {
+    plugin(function ({ matchComponents, theme }) {
-      let iconsDir = path.join(__dirname, "./vendor/heroicons/optimized")
+      let iconsDir = path.join(__dirname, './vendor/heroicons/optimized')
       let values = {}
       let icons = [
-        ["", "/24/outline"],
+        ['', '/24/outline'],
-        ["-solid", "/24/solid"],
+        ['-solid', '/24/solid'],
-        ["-mini", "/20/solid"]
+        ['-mini', '/20/solid']
       ]
       icons.forEach(([suffix, dir]) => {
-        fs.readdirSync(path.join(iconsDir, dir)).forEach(file => {
+        fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => {
-          let name = path.basename(file, ".svg") + suffix
+          let name = path.basename(file, '.svg') + suffix
-          values[name] = {name, fullPath: path.join(iconsDir, dir, file)}
+          values[name] = { name, fullPath: path.join(iconsDir, dir, file) }
         })
       })
-      matchComponents({
+      matchComponents(
-        "hero": ({name, fullPath}) => {
+        {
-          let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "")
+          hero: ({ name, fullPath }) => {
-          return {
+            let content = fs
-            [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
+              .readFileSync(fullPath)
-            "-webkit-mask": `var(--hero-${name})`,
+              .toString()
-            "mask": `var(--hero-${name})`,
+              .replace(/\r?\n|\r/g, '')
-            "mask-repeat": "no-repeat",
+            return {
-            "background-color": "currentColor",
+              [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`,
-            "vertical-align": "middle",
+              '-webkit-mask': `var(--hero-${name})`,
-            "display": "inline-block",
+              mask: `var(--hero-${name})`,
-            "width": theme("spacing.5"),
+              'mask-repeat': 'no-repeat',
-            "height": theme("spacing.5")
+              'background-color': 'currentColor',
+              'vertical-align': 'middle',
+              display: 'inline-block',
+              width: theme('spacing.5'),
+              height: theme('spacing.5')
+            }
           }
-        }
+        },
-      }, {values})
+        { values }
+      )
     })
   ]
 }

docker-run.sh

@@ -23,6 +23,6 @@ echo "\nPostgres is available: continuing with database setup..."
 mix ecto.create
 mix ecto.migrate
 
-# Start the phoenix web server
+# Start the phoenix web server (interactive)
 echo "\n Launching Phoenix web server..."
-mix phx.server
+iex -S mix phx.server

mix.exs

@@ -5,7 +5,7 @@ defmodule Pinchflat.MixProject do
     [
       app: :pinchflat,
       version: "0.1.0",
-      elixir: "~> 1.14",
+      elixir: "~> 1.16",
       elixirc_paths: elixirc_paths(Mix.env()),
       start_permanent: Mix.env() == :prod,
       aliases: aliases(),