diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..2eae707 --- /dev/null +++ b/.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' + } +} diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md new file mode 100644 index 0000000..e8c0118 --- /dev/null +++ b/.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 diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..ed4e1fc --- /dev/null +++ b/.prettierignore @@ -0,0 +1,2 @@ +assets/vendor/ +assets/node_modules/ diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..eb00a03 --- /dev/null +++ b/.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' +} diff --git a/Dockerfile b/Dockerfile index 27201e8..fd31fa7 100644 --- a/Dockerfile +++ b/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 . ./ diff --git a/assets/js/app.js b/assets/js/app.js index df0cdd9..4208c6d 100644 --- a/assets/js/app.js +++ b/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 {LiveSocket} from "phoenix_live_view" -import topbar from "../vendor/topbar" +import { Socket } from 'phoenix' +import { LiveSocket } from 'phoenix_live_view' +import topbar from '../vendor/topbar' -let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") -let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}}) +let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute('content') +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)"}) -window.addEventListener("phx:page-loading-start", _info => topbar.show(300)) -window.addEventListener("phx:page-loading-stop", _info => topbar.hide()) +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-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 - diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 9b77c7f..a360ecc 100644 --- a/assets/tailwind.config.js +++ b/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 fs = require("fs") -const path = require("path") +const plugin = require('tailwindcss/plugin') +const fs = require('fs') +const path = require('path') module.exports = { - content: [ - "./js/**/*.js", - "../lib/pinchflat_web.ex", - "../lib/pinchflat_web/**/*.*ex" - ], + content: ['./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: // //
// - plugin(({addVariant}) => addVariant("phx-no-feedback", [".phx-no-feedback&", ".phx-no-feedback &"])), - 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 &"])), + plugin(({ addVariant }) => + addVariant('phx-no-feedback', ['.phx-no-feedback&', '.phx-no-feedback &']) + ), + 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}) { - let iconsDir = path.join(__dirname, "./vendor/heroicons/optimized") + plugin(function ({ matchComponents, theme }) { + let iconsDir = path.join(__dirname, './vendor/heroicons/optimized') let values = {} let icons = [ - ["", "/24/outline"], - ["-solid", "/24/solid"], - ["-mini", "/20/solid"] + ['', '/24/outline'], + ['-solid', '/24/solid'], + ['-mini', '/20/solid'] ] icons.forEach(([suffix, dir]) => { - fs.readdirSync(path.join(iconsDir, dir)).forEach(file => { - let name = path.basename(file, ".svg") + suffix - values[name] = {name, fullPath: path.join(iconsDir, dir, file)} + fs.readdirSync(path.join(iconsDir, dir)).forEach((file) => { + let name = path.basename(file, '.svg') + suffix + values[name] = { name, fullPath: path.join(iconsDir, dir, file) } }) }) - matchComponents({ - "hero": ({name, fullPath}) => { - let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "") - return { - [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`, - "-webkit-mask": `var(--hero-${name})`, - "mask": `var(--hero-${name})`, - "mask-repeat": "no-repeat", - "background-color": "currentColor", - "vertical-align": "middle", - "display": "inline-block", - "width": theme("spacing.5"), - "height": theme("spacing.5") + matchComponents( + { + hero: ({ name, fullPath }) => { + let content = fs + .readFileSync(fullPath) + .toString() + .replace(/\r?\n|\r/g, '') + return { + [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`, + '-webkit-mask': `var(--hero-${name})`, + mask: `var(--hero-${name})`, + 'mask-repeat': 'no-repeat', + 'background-color': 'currentColor', + 'vertical-align': 'middle', + display: 'inline-block', + width: theme('spacing.5'), + height: theme('spacing.5') + } } - } - }, {values}) + }, + { values } + ) }) ] } diff --git a/docker-run.sh b/docker-run.sh index e7926cd..4496d15 100755 --- a/docker-run.sh +++ b/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 diff --git a/mix.exs b/mix.exs index b048306..577a9aa 100644 --- a/mix.exs +++ b/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(),