Bird UI with Glitch-SOC

.env

# /.env

# Mastodon Glitch Docker tag to use
#
# See: https://github.com/glitch-soc/mastodon/pkgs/container/mastodon
export MASTODON_VERSION="nightly.2023-12-31"

export ROOT_PATH="/data/local/mastodon"
export BIN_PATH="${ROOT_PATH}/scripts"
export DATA_PATH="${ROOT_PATH}/data"

# Bird-UI for Mastodon release
#
# See: https://github.com/ronilaukkarinen/mastodon-bird-ui/releases
export BIRDSITE_VERSION="2.0.0rc"
export BIRDSITE_ROOT="${ROOT_PATH}/docker/mastodon/themes/mastodon-bird-ui"
export BIRDSITE_RELEASE_PATH="${BIRDSITE_ROOT}/releases/${BIRDSITE_VERSION}"
export BIRDSITE_LATEST_DIR="${BIRDSITE_ROOT}/latest"

# Random used to bust caches in build steps
#
# See: Dockerfile.mastodon and use [--no-assets-cache] for [update-mastodon]
export ASSETS_CACHE_BUSTER=1

Dockerfile

# docker/mastodon/Dockerfile
ARG DEBIAN_VERSION="bookworm"
ARG MASTODON_VERSION
ARG NODE_MAJOR_VERSION="20"

FROM docker.io/node:${NODE_MAJOR_VERSION}-${DEBIAN_VERSION}-slim as node

FROM ghcr.io/glitch-soc/mastodon:${MASTODON_VERSION}

ARG GIT_COMMIT_SHA
ARG MASTODON_VERSION
ARG TARGETPLATFORM

# https://github.com/Shopify/yjit
ENV RUBY_YJIT_ENABLE=1

# Datadog
#
# See: https://docs.datadoghq.com/tracing/trace_collection/dd_libraries/ruby/
ENV DD_TRACE_ENABLED="true"
ENV DD_TRACE_STARTUP_LOGS="false"
ENV DD_VERSION="${MASTODON_VERSION}"
ENV DD_INSTRUMENTATION_TELEMETRY_ENABLED="false"
ENV DD_RUNTIME_METRICS_ENABLED="true"
ENV DD_DBM_PROPAGATION_MODE="full"
ENV DD_TRACE_CLIENT_IP_ENABLED="true"
ENV DD_ENV="prod"
ENV DD_AGENT_HOST="192.168.20.81"
ENV DD_TRACE_AGENT_PORT="8126"
ENV DD_TAGS="git.commit.sha:${GIT_COMMIT_SHA},git.repository_url:github.com/jippi/mastodon"

LABEL com.datadoghq.tags.env="prod"
LABEL com.datadoghq.tags.service="mastodon"
LABEL com.datadoghq.tags.version="${MASTODON_VERSION}"
LABEL com.datadoghq.tags.git.repository_url="github.com/jippi/mastodon"
LABEL com.datadoghq.tags.git.commit.sha="${GIT_COMMIT_SHA}"

WORKDIR /opt/mastodon

USER root

# Set default shell used for running commands
SHELL ["/bin/bash", "-o", "pipefail", "-o", "errexit", "-c"]

RUN \
    # Mount Apt cache and lib directories from Docker buildx caches
    --mount=type=cache,id=apt-cache-${TARGETPLATFORM},target=/var/cache/apt,sharing=locked \
    --mount=type=cache,id=apt-lib-${TARGETPLATFORM},target=/var/lib/apt,sharing=locked \
    # Mount Corepack and Yarn caches from Docker buildx caches
    --mount=type=cache,id=corepack-cache-${TARGETPLATFORM},target=/usr/local/share/.cache/corepack,sharing=locked \
    --mount=type=cache,id=yarn-cache-${TARGETPLATFORM},target=/usr/local/share/.cache/yarn,sharing=locked \
    # Mount Ruby Gem caches
    --mount=type=cache,id=gem-cache-${TARGETPLATFORM},target=/usr/local/bundle/cache/,sharing=locked \
    # Commands
    set -ex \
    && rm -fv /etc/apt/apt.conf.d/docker-clean \
    && apt-get update \
    && apt-get -yq dist-upgrade \
    && apt-get install -y --no-install-recommends \
        build-essential \
        ffmpeg \
        file \
        git \
        imagemagick \
        jq \
        libgdbm-dev \
        libgmp-dev \
        libicu-dev \
        libicu72 \
        libidn-dev \
        libidn12 \
        libjemalloc-dev \
        libjemalloc2 \
        libpq-dev \
        libpq5 \
        libssl-dev \
        libssl3 \
        libyaml-dev \
        patchelf \
        procps \
        python3 \
        shared-mime-info \
        tini \
        tzdata \
        zlib1g-dev

# Bundle
#
# See: https://bundler.io/v2.5/man/bundle-config.1.html
ENV BUNDLE_CLEAN=0
ENV BUNDLE_AUTO_CLEAN_WITHOUT_PATH=0
ENV BUNDLE_IGNORE_FUNDING_REQUESTS=1
ENV BUNDLE_IGNORE_MESSAGES=1

RUN \
    # Mount Apt cache and lib directories from Docker buildx caches
    --mount=type=cache,id=apt-cache-${TARGETPLATFORM},target=/var/cache/apt,sharing=locked \
    --mount=type=cache,id=apt-lib-${TARGETPLATFORM},target=/var/lib/apt,sharing=locked \
    # Mount Corepack and Yarn caches from Docker buildx caches
    --mount=type=cache,id=corepack-cache-${TARGETPLATFORM},target=/usr/local/share/.cache/corepack,sharing=locked \
    --mount=type=cache,id=yarn-cache-${TARGETPLATFORM},target=/usr/local/share/.cache/yarn,sharing=locked \
    # Mount Ruby Gem caches
    --mount=type=cache,id=gem-cache-${TARGETPLATFORM},target=/usr/local/bundle/cache/,sharing=locked \
    # Commands
    set -ex \
    # Configure bundle to cache downloaded Gems
    && bundle config set --global cache_all "true" \
    # Configure bundle to allow modifications to Gemfile
    && bundle config set --global frozen 'false' \
    # Add datadog apm to Gemfile
    && echo "gem 'ddtrace', require: 'ddtrace/auto_instrument'" >> Gemfile \
    # Install gems
    && bundle install -j"$(nproc)" \
    # Precompile gems
    && bundle exec bootsnap precompile --gemfile app/ lib/

COPY --from=node --link /usr/local/bin /usr/local/bin
COPY --from=node --link /usr/local/lib /usr/local/lib

RUN \
    # Mount Apt cache and lib directories from Docker buildx caches
    --mount=type=cache,id=apt-cache-${TARGETPLATFORM},target=/var/cache/apt,sharing=locked \
    --mount=type=cache,id=apt-lib-${TARGETPLATFORM},target=/var/lib/apt,sharing=locked \
    # Mount Corepack and Yarn caches from Docker buildx caches
    --mount=type=cache,id=corepack-cache-${TARGETPLATFORM},target=/usr/local/share/.cache/corepack,sharing=locked \
    --mount=type=cache,id=yarn-cache-${TARGETPLATFORM},target=/usr/local/share/.cache/yarn,sharing=locked \
    # Commands
    set -ex \
    && rm /usr/local/bin/yarn* \
    && corepack enable \
    && corepack prepare --activate \
    && yarn workspaces focus --production @mastodon/mastodon

ARG BIRDSITE_VERSION

COPY flavours app/javascript/flavours
COPY flavours/bird-ui/images/bird-ui-preview.jpg app/javascript/images/bird-ui-preview.jpg
COPY themes/mastodon-bird-ui/releases/${BIRDSITE_VERSION}/skins app/javascript/skins
COPY themes/mastodon-bird-ui/releases/${BIRDSITE_VERSION}/styles app/javascript/styles
COPY verify-precompiled-assets.sh /opt/mastodon/

ARG ASSETS_CACHE_BUSTER
RUN \
    # Mount Apt cache and lib directories from Docker buildx caches
    --mount=type=cache,id=apt-cache-${TARGETPLATFORM},target=/var/cache/apt,sharing=locked \
    --mount=type=cache,id=apt-lib-${TARGETPLATFORM},target=/var/lib/apt,sharing=locked \
    # Mount Corepack and Yarn caches from Docker buildx caches
    --mount=type=cache,id=corepack-cache-${TARGETPLATFORM},target=/usr/local/share/.cache/corepack,sharing=locked \
    --mount=type=cache,id=yarn-cache-${TARGETPLATFORM},target=/usr/local/share/.cache/yarn,sharing=locked \
    # Mount webpacker cache (if DISABLED: when using cache, it somehow drops the reference to bird-ui flavour)
    --mount=type=cache,id=webpacker-cache-${TARGETPLATFORM}-${ASSETS_CACHE_BUSTER},target=/opt/mastodon/tmp/cache/webpacker,sharing=locked \
    # Commands
    set -ex \
    && \
        OTP_SECRET=precompile_placeholder \
        SECRET_KEY_BASE=precompile_placeholder \
        bundle exec rails assets:precompile \
    && bash /opt/mastodon/verify-precompiled-assets.sh

# Set the run user
USER mastodon

# Set the work dir and the container entry point
ENTRYPOINT ["/usr/bin/tini", "--"]

flavours-[dash]-bird-ui-[dash]-names.yml

# docker/mastodon/flavours/bird-ui/names.yml
en:
  flavours:
    bird-ui:
      name: Bird UI (Twitter/X)
      description: '🐘🐦 Mastodon web UI, but strongly inspired by Twitter'
  skins:
    bird-ui:
      default: Default (Vanilla Mastodon)

flavours-[dash]-bird-ui-[dash]-theme.yml

# docker/mastodon/flavours/bird-ui/theme.yml
pack:
  admin:
    - admin.jsx
    - public.jsx
  auth: public.jsx
  common:
    filename: common.js
    stylesheet: true
  embed: public.jsx
  error: error.js
  home:
    filename: application.js
    preload:
      - features/compose
      - features/home_timeline
      - features/notifications
  mailer:
  modal:
  public: public.jsx
  settings: public.jsx
  sign_up: sign_up.js
  share: share.jsx

screenshot: images/bird-ui-preview.jpg

pack_directory: app/javascript/packs

fallback:

update-birdsite-ui.sh

#!/usr/bin/env bash
# scripts/update-birdsite-ui
source "$(dirname "${BASH_SOURCE[0]}")/init.sh"

set -o errexit -o nounset -o pipefail

declare SINGLE_COLUMN="${BIRDSITE_RELEASE_PATH}/styles/mastodon-bird-ui/layout-single-column.scss"
declare MULTI_COLUMN="${BIRDSITE_RELEASE_PATH}/styles/mastodon-bird-ui/layout-multiple-columns.scss"

# Create a new folder for the theme
mkdir -pv "${BIRDSITE_RELEASE_PATH}/styles/mastodon-bird-ui"

# Download the CSS file for single column layout
if [ ! -f "${SINGLE_COLUMN}" ]; then
	wget "https://raw.githubusercontent.com/ronilaukkarinen/mastodon-bird-ui/${BIRDSITE_VERSION}/layout-single-column.css" -O "${SINGLE_COLUMN}"

	# Replace theme-mastodon-light with theme-mastodon-bird-ui-light for single column layout
	sed -i 's/theme-mastodon-light/skin-2-light/g' "${SINGLE_COLUMN}"

	# Replace theme-contrast with theme-mastodon-bird-ui-contrast for single column layout
	sed -i 's/theme-contrast/skin-3-contrast/g' "${SINGLE_COLUMN}"
fi

if [ ! -f "${MULTI_COLUMN}" ]; then
	# Download the CSS file for multiple column layout
	wget "https://raw.githubusercontent.com/ronilaukkarinen/mastodon-bird-ui/${BIRDSITE_VERSION}/layout-multiple-columns.css" -O "${MULTI_COLUMN}"

	# Replace theme-mastodon-light with theme-mastodon-bird-ui-light for multiple column layout
	sed -i 's/theme-mastodon-light/skin-2-light/g' "${MULTI_COLUMN}"

	# Replace theme-contrast with theme-mastodon-bird-ui-contrast for multiple column layout
	sed -i 's/theme-contrast/skin-3-contrast/g' "${MULTI_COLUMN}"
fi

# Create dark theme file
echo "=> Creating dark theme!"
mkdir -p "${BIRDSITE_RELEASE_PATH}/skins/bird-ui/1-dark"
echo -e "@import 'styles/application';\n@import 'styles/mastodon-bird-ui/layout-single-column.scss';\n@import 'styles/mastodon-bird-ui/layout-multiple-columns.scss';" >"${BIRDSITE_RELEASE_PATH}/skins/bird-ui/1-dark/common.scss"
echo -e "en:\n  skins:\n    bird-ui:\n      1-dark: Dark" >"${BIRDSITE_RELEASE_PATH}/skins/bird-ui/1-dark/names.yml"

# Create light theme file
echo "=> Creating light theme!"
mkdir -p "${BIRDSITE_RELEASE_PATH}/skins/bird-ui/2-light"
echo -e "@import 'styles/mastodon-light/variables';\n@import 'styles/application';\n@import 'styles/mastodon-light/diff';\n@import 'styles/mastodon-bird-ui/layout-single-column.scss';\n@import 'styles/mastodon-bird-ui/layout-multiple-columns.scss';" >"${BIRDSITE_RELEASE_PATH}/skins/bird-ui/2-light/common.scss"
echo -e "en:\n  skins:\n    bird-ui:\n      2-light: Light" >"${BIRDSITE_RELEASE_PATH}/skins/bird-ui/2-light/names.yml"

# Create high contrast theme file
echo "=> Creating contract theme!"
mkdir -p "${BIRDSITE_RELEASE_PATH}/skins/bird-ui/3-contrast"
echo -e "@import 'styles/contrast/variables';\n@import 'styles/application';\n@import 'styles/contrast/diff';\n@import 'styles/mastodon-bird-ui/layout-single-column.scss';\n@import 'styles/mastodon-bird-ui/layout-multiple-columns.scss';" >"${BIRDSITE_RELEASE_PATH}/skins/bird-ui/3-contrast/common.scss"
echo -e "en:\n  skins:\n    bird-ui:\n      3-contrast: High Contrast" > "${BIRDSITE_RELEASE_PATH}/skins/bird-ui/3-contrast/names.yml"

# Create accessible theme file
echo "=> Creating contract theme!"
mkdir -p "${BIRDSITE_RELEASE_PATH}/skins/bird-ui/4-accessible"
cp "${BIRDSITE_ROOT}/accessible.scss" "${BIRDSITE_RELEASE_PATH}/skins/bird-ui/4-accessible/common.scss"
echo -e "en:\n  skins:\n    bird-ui:\n      4-accessible: Accessible" >"${BIRDSITE_RELEASE_PATH}/skins/bird-ui/4-accessible/names.yml"

echo "=> Creating symlink!"
rm -f "${BIRDSITE_LATEST_DIR}"
ln -sf "${BIRDSITE_RELEASE_PATH}" "${BIRDSITE_LATEST_DIR}"

verify-precompiled-assets.sh

#!/usr/bin/env bash
# docker/mastodon/verify-precompiled-assets.sh
set -o errexit -o nounset -o pipefail

# Config
declare -i EXPECTED_BIRD_UI_ASSETS=0
declare MANIFEST_FILE=/opt/mastodon/public/packs/manifest.json

echo "[INFO] running precompiled assets sanity checks ..."

bird_ui_assets=$(jq '[keys | .[] | select(. | contains("bird-ui"))]' "${MANIFEST_FILE}")
actual_bird_ui_assets=$(echo "$bird_ui_assets" | jq '. | length')

if [[ "${actual_bird_ui_assets}" -le "${EXPECTED_BIRD_UI_ASSETS}" ]]; then
    echo "[ERROR] expected at least [${EXPECTED_BIRD_UI_ASSETS}] asset references to [bird-ui] in [${MANIFEST_FILE}], found [${actual_bird_ui_assets}]"
    echo ""
    echo "Output:"
    echo "${bird_ui_assets}"

    exit 1
fi

echo "[OK] found the expected [${actual_bird_ui_assets}] asset references to [bird-ui] in [${MANIFEST_FILE}]"

exit 0