ARG ELIXIR_VERSION=1.13.4
ARG OTP_VERSION=25.0.3
ARG ALPINE_VERSION=3.14.6

ARG BUILDER_IMAGE="hexpm/elixir:${ELIXIR_VERSION}-erlang-${OTP_VERSION}-alpine-${ALPINE_VERSION}"
ARG RUNNER_IMAGE="alpine:${ALPINE_VERSION}"

#####################################################
# 1. Build elixir backend and compile assets
#####################################################
FROM ${BUILDER_IMAGE} as builder

# install build dependencies
RUN apk add --update git npm build-base

# prepare build dir
WORKDIR /app

# install hex + rebar
RUN mix local.hex --force && \
    mix local.rebar --force

# set build ENV
ENV MIX_ENV="prod"

# install mix dependencies
COPY mix.exs mix.lock ./
RUN mix deps.get --only $MIX_ENV
RUN mkdir config

# copy compile-time config files before we compile dependencies
# to ensure any relevant config change will trigger the dependencies
# to be re-compiled.
COPY config/config.exs config/${MIX_ENV}.exs config/
RUN mix deps.compile

COPY priv priv

COPY lib lib

COPY assets assets

# compile assets
RUN npm --prefix assets install && mix assets.deploy

# Compile the release
RUN mix compile

# Changes to config/runtime.exs don't require recompiling the code
COPY config/runtime.exs config/

COPY rel rel
RUN mix release

#####################################################
# 2. Build release image
#####################################################

FROM ${RUNNER_IMAGE}

RUN apk add --update --no-cache ncurses-libs libssl1.1 openssh

# set runner ENV
ENV MIX_ENV=prod
ENV LANG en_US.UTF-8
ENV LANGUAGE en_US:en
ENV LC_ALL en_US.UTF-8

WORKDIR "/app"
RUN chown nobody /app

# Only copy the final release from the build stage
COPY --from=builder --chown=nobody:root /app/_build/${MIX_ENV}/rel/diffity ./

USER nobody


EXPOSE 4000
CMD ["/app/bin/server"]

const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: [
    "../lib/**/*.ex",
    "../lib/**/*.leex",
    "../lib/**/*.*ex",
    "./js/**/*.js",
    "./js/**/*.tsx",
    "./js/**/**/*.tsx",
  ],

  theme: {
    extend: {
      fontFamily: {
        sans: ["Poppins", ...defaultTheme.fontFamily.sans],
        serif: [...defaultTheme.fontFamily.serif],
        mono: [...defaultTheme.fontFamily.mono],
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/forms")],
};

@tailwind base;
@tailwind components;
@tailwind utilities;
...

@layer components {
  .btn {
    @apply py-2 font-medium rounded shadow focus:ring-4 px-4 text-center;
  }

  .btn-blue {
    @apply text-blue-700 bg-blue-200 hover:bg-blue-300 focus:ring-blue-400;
  }
}

...
# Configure esbuild (the version is required)
config :esbuild,
  version: "0.14.29",
  default: [
    args: [
      "js/app.js",
      "--bundle",
      "--loader:.js=jsx",
      "--target=es2017",
      "--outdir=../priv/static/assets",
      "--external:/fonts/*",
      "--external:/images/*"
    ],
    cd: Path.expand("../assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

# Tailwind CSS
config :tailwind,
  version: "3.1.7",
  default: [
    args: [
      "--config=tailwind.config.js",
      "--input=css/app.css",
      "--output=../priv/static/assets/app.css"
    ],
    cd: Path.expand("../assets", __DIR__)
  ]
...

{:esbuild, "~> 0.4", runtime: Mix.env() == :dev},
{:tailwind, "~> 0.1", runtime: Mix.env() == :dev},