Initial commit

.gitignore

@@ -0,0 +1,3 @@
+/docker-compose.override.yaml
+/public/build/
+/vendor/

assets/css/tailwind.css

@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  h1:after,
+  h1:before {
+    @apply text-3xl leading-[0] italic sm:text-5xl md:text-3xl lg:text-4xl xl:text-5xl;
+  }
+
+  h1:after {
+    content: "”";
+  }
+
+  h1:before {
+    content: "“";
+  }
+}

assets/tailwind.config.js

@@ -0,0 +1,33 @@
+module.exports = {
+  content: ["./templates/**/*.twig"],
+  theme: {
+    colors: {
+      blue: {
+        100: '#8cc4df',
+        200: '#2aaae1',
+        800: '#064871',
+      },
+      gray: '#666666',
+      secondary: '#064871',
+      white: '#FFFFFF',
+      red: 'lightcoral',
+    },
+    extend: {
+      fontFamily: {
+        sans: [
+          "proxima-nova",
+          "Proxima Nova",
+          "Open Sans",
+          "Gill Sans MT",
+          "Gill Sans",
+          'Corbel',
+          'Arial',
+          'sans-serif',
+        ]
+      },
+      spacing: {
+        18: '4.5rem',
+      }
+    }
+  }
+}

composer.json

@@ -0,0 +1,9 @@
+{
+    "require": {
+        "twig/twig": "^3.3",
+        "symfony/yaml": "^6.0"
+    },
+    "require-dev": {
+        "symfony/var-dumper": "^6.0"
+    }
+}

composer.lock

@@ -0,0 +1,423 @@
+{
+    "_readme": [
+        "This file locks the dependencies of your project to a known state",
+        "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
+        "This file is @generated automatically"
+    ],
+    "content-hash": "62bcc6571861d86a150efd3245f35566",
+    "packages": [
+        {
+            "name": "symfony/polyfill-ctype",
+            "version": "v1.25.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-ctype.git",
+                "reference": "30885182c981ab175d4d034db0f6f469898070ab"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-ctype/zipball/30885182c981ab175d4d034db0f6f469898070ab",
+                "reference": "30885182c981ab175d4d034db0f6f469898070ab",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1"
+            },
+            "provide": {
+                "ext-ctype": "*"
+            },
+            "suggest": {
+                "ext-ctype": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "1.23-dev"
+                },
+                "thanks": {
+                    "name": "symfony/polyfill",
+                    "url": "https://github.com/symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Ctype\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Gert de Pagter",
+                    "email": "BackEndTea@gmail.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for ctype functions",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "ctype",
+                "polyfill",
+                "portable"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-ctype/tree/v1.25.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2021-10-20T20:35:02+00:00"
+        },
+        {
+            "name": "symfony/polyfill-mbstring",
+            "version": "v1.25.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/polyfill-mbstring.git",
+                "reference": "0abb51d2f102e00a4eefcf46ba7fec406d245825"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/polyfill-mbstring/zipball/0abb51d2f102e00a4eefcf46ba7fec406d245825",
+                "reference": "0abb51d2f102e00a4eefcf46ba7fec406d245825",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.1"
+            },
+            "provide": {
+                "ext-mbstring": "*"
+            },
+            "suggest": {
+                "ext-mbstring": "For best performance"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-main": "1.23-dev"
+                },
+                "thanks": {
+                    "name": "symfony/polyfill",
+                    "url": "https://github.com/symfony/polyfill"
+                }
+            },
+            "autoload": {
+                "files": [
+                    "bootstrap.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Polyfill\\Mbstring\\": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Symfony polyfill for the Mbstring extension",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "compatibility",
+                "mbstring",
+                "polyfill",
+                "portable",
+                "shim"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/polyfill-mbstring/tree/v1.25.0"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2021-11-30T18:21:41+00:00"
+        },
+        {
+            "name": "symfony/yaml",
+            "version": "v6.0.3",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/yaml.git",
+                "reference": "e77f3ea0b21141d771d4a5655faa54f692b34af5"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/yaml/zipball/e77f3ea0b21141d771d4a5655faa54f692b34af5",
+                "reference": "e77f3ea0b21141d771d4a5655faa54f692b34af5",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.0.2",
+                "symfony/polyfill-ctype": "^1.8"
+            },
+            "conflict": {
+                "symfony/console": "<5.4"
+            },
+            "require-dev": {
+                "symfony/console": "^5.4|^6.0"
+            },
+            "suggest": {
+                "symfony/console": "For validating YAML files using the lint command"
+            },
+            "bin": [
+                "Resources/bin/yaml-lint"
+            ],
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Symfony\\Component\\Yaml\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Loads and dumps YAML files",
+            "homepage": "https://symfony.com",
+            "support": {
+                "source": "https://github.com/symfony/yaml/tree/v6.0.3"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2022-01-26T17:23:29+00:00"
+        },
+        {
+            "name": "twig/twig",
+            "version": "v3.3.10",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/twigphp/Twig.git",
+                "reference": "8442df056c51b706793adf80a9fd363406dd3674"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/twigphp/Twig/zipball/8442df056c51b706793adf80a9fd363406dd3674",
+                "reference": "8442df056c51b706793adf80a9fd363406dd3674",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=7.2.5",
+                "symfony/polyfill-ctype": "^1.8",
+                "symfony/polyfill-mbstring": "^1.3"
+            },
+            "require-dev": {
+                "psr/container": "^1.0",
+                "symfony/phpunit-bridge": "^4.4.9|^5.0.9|^6.0"
+            },
+            "type": "library",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "3.3-dev"
+                }
+            },
+            "autoload": {
+                "psr-4": {
+                    "Twig\\": "src/"
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "BSD-3-Clause"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com",
+                    "homepage": "http://fabien.potencier.org",
+                    "role": "Lead Developer"
+                },
+                {
+                    "name": "Twig Team",
+                    "role": "Contributors"
+                },
+                {
+                    "name": "Armin Ronacher",
+                    "email": "armin.ronacher@active-4.com",
+                    "role": "Project Founder"
+                }
+            ],
+            "description": "Twig, the flexible, fast, and secure template language for PHP",
+            "homepage": "https://twig.symfony.com",
+            "keywords": [
+                "templating"
+            ],
+            "support": {
+                "issues": "https://github.com/twigphp/Twig/issues",
+                "source": "https://github.com/twigphp/Twig/tree/v3.3.10"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/twig/twig",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2022-04-06T06:47:41+00:00"
+        }
+    ],
+    "packages-dev": [
+        {
+            "name": "symfony/var-dumper",
+            "version": "v6.0.8",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/symfony/var-dumper.git",
+                "reference": "fa61dfb4bd3068df2492013dc65f3190e9f550c0"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/symfony/var-dumper/zipball/fa61dfb4bd3068df2492013dc65f3190e9f550c0",
+                "reference": "fa61dfb4bd3068df2492013dc65f3190e9f550c0",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.0.2",
+                "symfony/polyfill-mbstring": "~1.0"
+            },
+            "conflict": {
+                "phpunit/phpunit": "<5.4.3",
+                "symfony/console": "<5.4"
+            },
+            "require-dev": {
+                "ext-iconv": "*",
+                "symfony/console": "^5.4|^6.0",
+                "symfony/process": "^5.4|^6.0",
+                "symfony/uid": "^5.4|^6.0",
+                "twig/twig": "^2.13|^3.0.4"
+            },
+            "suggest": {
+                "ext-iconv": "To convert non-UTF-8 strings to UTF-8 (or symfony/polyfill-iconv in case ext-iconv cannot be used).",
+                "ext-intl": "To show region name in time zone dump",
+                "symfony/console": "To use the ServerDumpCommand and/or the bin/var-dump-server script"
+            },
+            "bin": [
+                "Resources/bin/var-dump-server"
+            ],
+            "type": "library",
+            "autoload": {
+                "files": [
+                    "Resources/functions/dump.php"
+                ],
+                "psr-4": {
+                    "Symfony\\Component\\VarDumper\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Nicolas Grekas",
+                    "email": "p@tchwork.com"
+                },
+                {
+                    "name": "Symfony Community",
+                    "homepage": "https://symfony.com/contributors"
+                }
+            ],
+            "description": "Provides mechanisms for walking through any arbitrary PHP variable",
+            "homepage": "https://symfony.com",
+            "keywords": [
+                "debug",
+                "dump"
+            ],
+            "support": {
+                "source": "https://github.com/symfony/var-dumper/tree/v6.0.8"
+            },
+            "funding": [
+                {
+                    "url": "https://symfony.com/sponsor",
+                    "type": "custom"
+                },
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2022-04-26T13:22:23+00:00"
+        }
+    ],
+    "aliases": [],
+    "minimum-stability": "stable",
+    "stability-flags": [],
+    "prefer-stable": false,
+    "prefer-lowest": false,
+    "platform": [],
+    "platform-dev": [],
+    "plugin-api-version": "2.2.0"
+}

docker-compose.override.yaml.example

@@ -0,0 +1,16 @@
+services:
+  node:
+    build:
+      context: .
+      dockerfile: tools/docker/Dockerfile
+      target: assets
+    volumes:
+      - assets:/app/public/build
+      - ./:/app
+    working_dir: /app
+    entrypoint: bash
+    command: "./run yarn:build:css"
+    user: node
+    tty: true
+    environment:
+      - "NODE_ENV=development"

docker-compose.yaml

@@ -0,0 +1,25 @@
+services:
+  web:
+    build:
+      context: .
+      dockerfile: tools/docker/Dockerfile
+      target: web
+    volumes:
+      - .:/app
+      - assets:/app/public/build
+    working_dir: /app
+    ports:
+      - "${DOCKER_WEB_PORT:-127.0.0.1:80}:80"
+    depends_on:
+      - php
+
+  php:
+    build:
+      context: .
+      dockerfile: tools/docker/Dockerfile
+      target: php-fpm
+    volumes:
+      - .:/app
+
+volumes:
+  assets: {}

public/index.php

@@ -0,0 +1,13 @@
+<?php
+
+require_once __DIR__.'/../vendor/autoload.php';
+
+use Symfony\Component\Yaml\Yaml;
+use Twig\Environment;
+use Twig\Loader\FilesystemLoader;
+
+$loader = new FilesystemLoader('../templates');
+
+$twig = new Environment($loader, ['debug' => true]);
+
+echo $twig->render('layouts/home.html.twig', Yaml::parseFile('../resources/data.yaml'));

resources/data.yaml

@@ -0,0 +1,77 @@
+---
+episodes:
+  -
+    number: 338
+    title: Tailwind CSS
+    date: 2022-03-08
+    description: |
+      <p>Today we are talking about Tailwind CSS with Oliver Davies.</p>
+  -
+    number: 337
+    title: Layout Paragraphs
+    date: 2022-03-01
+    description: |
+      <p>Today we are talking about Layout Paragraphs with Justin Toupin.</p>
+  -
+    number: 336
+    title: Discover Drupal
+    date: 2022-02-22
+    description: |
+      <p>Today we are talking about Discover Drupal with Angie Sabin.</p>
+  -
+    number: 335
+    title: LocalGov
+    date: 2022-02-15
+    description: |
+      <p>Today we are talking about LocalGov Drupal.</p>
+  -
+    number: 334
+    title: Managing Drupal teams in Government
+    date: 2022-02-08
+    description: |
+      <p>Today we are talking about Leading a Drupal Team in Government with Abigail Bowman and Laura Larrimore.</p>
+  -
+    number: 333
+    title: Behat
+    date: 2022-02-01
+    description: |
+      <p>Today we are talking about Behat with Chris Burgess.</p>
+  -
+    number: 332
+    title: Permissions management
+    date: 2022-01-25
+    description: |
+      <p>Today we are talking about Permission Management with Benji Fisher.</p>
+  -
+    number: 331
+    title: Migrating Paragraphs for the National Zoo
+    date: 2022-01-18
+    description: |
+      <p>Today we are talking about Migrating Paragraphs for the National Zoo with Mohammed El-Khatib.</p>
+  -
+    number: 330
+    title: Remote Development on a LAN
+    date: 2022-01-11
+    description: |
+      <p>Today we are talking about Remote Development on a LAN.</p>
+  -
+    number: 329
+    title: The Penguin Corps
+    date: 2022-01-04
+    description: |
+      <p>Today we are talking about The Penguin Corps with Stu Keroff and Students from the Penguin Corps.</p>
+main_menu:
+  -
+    title: Home
+    is_active: true
+  -
+    title: About Us
+    is_active: false
+  -
+    title: Hosts
+    is_active: false
+  -
+    title: Module of the Week
+    is_active: false
+name: Talking Drupal
+title: 'A weekly chat about web design and development by a group a guys with one thing in common, we love Drupal.'

run

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+function yarn:build:css {
+  # Build the CSS assets, this is intended to be run within the "assets" container.
+
+  local args=()
+
+  if [[ "$NODE_ENV" == "development" ]]; then
+    args=(--watch)
+  else
+    args=(--minify)
+  fi
+
+  tailwindcss \
+    --config assets/tailwind.config.js \
+    --content "templates/**/*.html.twig" \
+    --input assets/css/tailwind.css \
+    --output public/build/tailwind.css \
+    "${args[@]}"
+}
+
+eval "${@}"

templates/includes/button.html.twig

@@ -0,0 +1,3 @@
+<a href="#0" class="mt-2 bg-blue-200 text-white text-base inline-block py-[3px] px-[10px] rounded leading-[20px] transition duration-200 hover:bg-secondary focus:bg-secondary">
+  {% block text '' %}
+</a>

templates/includes/episode-list-pagination.html.twig

@@ -0,0 +1,10 @@
+<ul class="flex flex-wrap justify-center">
+  {% for i in range(1, 9) %}
+    <li class="ml-6 {{ i is same as 1 ? 'font-bold' }}">
+      <a href="#0">{{ i }}</a>
+    </li>
+  {% endfor %}
+  <li class="ml-6"><a href="#0">...</a></li>
+  <li class="ml-6"><a href="#0">next ›</a></li>
+  <li class="ml-6"><a href="#0">last »</a></li>
+</ul>

templates/includes/episode-list.html.twig

@@ -0,0 +1,9 @@
+<div class="space-y-6 sm:space-y-10">
+  {% for episode in episodes %}
+    {% include "includes/episode-teaser.html.twig" with { episode } only %}
+  {% endfor %}
+
+  <div>
+    {% include "includes/episode-list-pagination.html.twig" %}
+  </div>
+</div>

templates/includes/episode-listen-button.html.twig

@@ -0,0 +1,5 @@
+{% embed "includes/button.html.twig" %}
+  {% block text %}
+    Listen <span class="sr-only">to episode #{{ episode.number }} - {{ episode.title }}</span>
+  {% endblock %}
+{% endembed %}

templates/includes/episode-teaser.html.twig

@@ -0,0 +1,18 @@
+<article>
+  <h3 class="text-xl leading-tight uppercase sm:text-2xl xl:text-3xl">
+    <a class="text-blue-800 hover:text-blue-200 focus:text-blue-200" href="#0">
+      {{ name }} #{{ episode.number }}
+      - {{ episode.title }}
+    </a>
+  </h3>
+
+  <time class="uppercase text-lg text-blue-200 xl:text-2xl" datetime="{{ episode.date|date('Y-m-d') }}">
+    {{ episode.date|date('F j, Y') }}
+  </time>
+
+  <div class="mt-1 leading-snug text-gray">{{ episode.description|raw }}</div>
+
+  <footer class="mt-2">
+    {% include "includes/episode-listen-button.html.twig" with { episode } only %}
+  </footer>
+</article>

templates/includes/footer-menu.html.twig

@@ -0,0 +1,8 @@
+<nav class="p-10 space-y-1 bg-[#d4d4d4] sm:flex sm:justify-end sm:space-y-0 sm:space-x-4">
+  {% for link in main_menu %}
+    <a class="block text-xl text-center transition-colors duration-200 {{ link.is_active ? 'text-blue-800 hover:text-blue-200 focus:text-blue-200' : 'text-blue-200 hover:text-blue-800 focus:text-blue-800' }}" href="#0">
+      {{ link.title }}
+    </a>
+  {% endfor %}
+</nav>
+

templates/includes/footer.html.twig

@@ -0,0 +1,7 @@
+<footer>
+  {% include "includes/footer-menu.html.twig" with { main_menu } only %}
+
+  <div class="mt-4 mb-8 px-6 text-center">
+    <p class="text-gray">A clone of the talkingdrupal.com website <a href="https://github.com/opdavies/talking-drupal-tailwindcss">built with Tailwind CSS</a>.</p>
+  </div>
+</footer>

templates/includes/main-menu.html.twig

@@ -0,0 +1,7 @@
+<nav class="px-6 py-2 absolute right-3 top-18 border-4 border-blue-800 rounded-md bg-blue-100 lg:relative lg:top-0 lg:right-0 lg:p-0 lg:flex lg:justify-end lg:border-0 lg:space-x-6 xl:space-x-8" x-trap="isOpen">
+  {% for link in main_menu %}
+  <a class="block text-2xl text-right transition-colors duration-200 {{ link.is_active ? 'text-blue-800 hover:text-blue-200 focus:text-blue-200' : 'text-white hover:text-blue-800 focus:text-blue-800' }}" href="#0">
+    {{ link.title }}
+  </a>
+  {% endfor %}
+</nav>

templates/includes/navbar.html.twig

@@ -0,0 +1,33 @@
+<header class="p-3 bg-blue-100 lg:p-4">
+  <div class="flex justify-between mx-auto xl:max-w-[1020px]" x-data="{ isOpen: false }">
+    <a href="#0">
+      <img class="h-18 w-auto sm:h-24 lg:h-32" src="https://talkingdrupal.com/sites/default/files/talking_drupal_logo.png" alt="Home">
+    </a>
+
+    <div class="lg:flex lg:flex-col lg:justify-between lg:items-end">
+      <div class="flex justify-end lg:hidden">
+        <button type="button" @click="isOpen = !isOpen">
+          <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 border-[3px] rounded-md text-blue-200 border-blue-800 bg-white" viewBox="0 0 20 20" fill="currentColor">
+            <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd" />
+          </svg>
+        </button>
+      </div>
+
+      <section class="hidden md:mt-4 md:block">
+        <h2 class="sr-only">Search form</h2>
+
+        {% include "includes/search-form.html.twig" %}
+      </section>
+
+      <div class="lg:block" :class="isOpen ? 'block' : 'hidden'">
+        {% include "includes/main-menu.html.twig" with { main_menu } only %}
+      </div>
+    </div>
+  </div>
+
+  <section class="mt-4 md:hidden">
+    <h2 class="sr-only">Search form</h2>
+
+    {% include "includes/search-form.html.twig" %}
+  </section>
+</header>

templates/includes/search-form.html.twig

@@ -0,0 +1,14 @@
+<form class="flex items-center space-x-4">
+  <div class="flex-1">
+    <input class="py-1 px-2 w-full border border-blue-800" type="textfield" placeholder="Search..." />
+  </div>
+
+  <div>
+    <button class="py-2 px-3 block rounded-md bg-blue-200 transition-colors duration-200 hover:bg-blue-800" type="submit">
+      <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
+      </svg>
+      <span class="sr-only">Search</span>
+    </button>
+  </div>
+</form>

templates/includes/sidebar.html.twig

@@ -0,0 +1,42 @@
+<div class="space-y-6">
+  <section>
+    <h2 class="sr-only">Links</h2>
+
+    <div class="grid grid-cols-1 sm:grid-cols-2">
+      <a class="p-4 grid place-items-center" href="#0"><img src="https://talkingdrupal.com/sites/all/themes/sitetheme/images/subscribe_itunes.png" alt="Subscribe on iTunes"/></a>
+      <a class="p-4 grid place-items-center" href="#0"><img class="h-[44px] w-auto" src="https://play.google.com/intl/en_us/badges-music/images/badges/en_badge_web_music.png" alt="Listen on Google Play Music"/></a>
+      <a class="p-4 grid place-items-center" href="#0"><img src="https://talkingdrupal.com/sites/all/themes/sitetheme/images/Spotify.png" alt="Listen on Spotify"/></a>
+    </div>
+  </section>
+
+  <section>
+    <h2 class="uppercase text-2xl text-secondary">Stay Updated</h2>
+    <div class="text-gray">
+      <p>Sign up for our newsletter and receive</p>
+
+      {% embed "includes/button.html.twig" %}
+        {% block text "E-Mail Updates" %}
+      {% endembed %}
+    </div>
+  </section>
+
+
+  <section>
+    <h2 class="uppercase text-2xl text-secondary">Contact</h2>
+    <div class="text-gray">
+      <p>show@talkingdrupal.com</p>
+      <p>@talkingdrupal</p>
+    </div>
+  </section>
+
+  <section>
+    <h2 class="uppercase text-2xl text-secondary">Promote your Event</h2>
+    <div class="text-gray">
+      <p>Learn about promoting your Drupal Event on Talking Drupal.</p>
+
+      {% embed "includes/button.html.twig" %}
+        {% block text "E-Mail Updates" %}
+      {% endembed %}
+    </div>
+  </section>
+</div>

templates/layouts/base.html.twig

@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link type="text/css" rel="stylesheet" href="./build/tailwind.css"/>
+    <meta charset="utf-8"/>
+    <title>{{ name }}</title>
+    <script defer src="https://unpkg.com/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+  </head>
+  <body>
+    {% include "includes/navbar.html.twig" with { main_menu } only %}
+
+    <div>
+      <div class="px-3 py-5 sm:px-5">
+        <div class="mx-auto xl:max-w-[1020px]">
+          <h1 class="text-xl italic text-blue-200 sm:text-4xl md:text-3xl md:leading-tight lg:text-[38px]">{{ title }}</h1>
+        </div>
+
+        <div class="mt-8 xl:mt-14">
+          <div class="mx-auto grid grid-cols-1 gap-10 md:grid-cols-4 md:gap-4 xl:max-w-[1020px] xl:grid-cols-5">
+            <main class="md:col-span-3 xl:col-span-4">
+              {% block content %}{% endblock %}
+            </main>
+
+            <aside class="md:col-span-1">
+              {% include "includes/sidebar.html.twig" %}
+            </aside>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-8">
+      {% include "includes/footer.html.twig" with { main_menu } only %}
+    </div>
+  </body>
+</html>

templates/layouts/home.html.twig

@@ -0,0 +1,5 @@
+{% extends "layouts/base.html.twig" %}
+
+{% block content %}
+  {% include "includes/episode-list.html.twig" with { episodes } only %}
+{% endblock %}

tools/docker/Dockerfile

@@ -0,0 +1,47 @@
+FROM node:16 AS assets
+
+WORKDIR /app
+
+RUN yarn global add tailwindcss && mkdir -p /app/public/build && chown node:node -R /app/public/build
+
+COPY --chown=node:node assets assets
+COPY --chown=node:node run ./
+COPY --chown=node:node templates templates
+
+USER node
+
+RUN ./run yarn:build:css
+
+###
+
+FROM php:8.1-fpm AS php-fpm
+
+COPY --from=composer /usr/bin/composer /usr/bin/composer
+
+WORKDIR /app
+
+RUN apt-get update -yqq \
+  && apt-get install -yqq --no-install-recommends \
+    git \
+    unzip \
+  && useradd --create-home build \
+  && chown build:build -R /app
+
+COPY --chown=build:build composer.* ./
+
+USER build
+
+RUN composer install
+
+COPY --chown=build:build . .
+
+###
+
+FROM caddy:2 AS web
+
+COPY tools/docker/web/root/ /
+
+WORKDIR /app
+
+COPY --from=assets /app/public/build public/build
+COPY public public

tools/docker/web/root/etc/caddy/Caddyfile

@@ -0,0 +1,4 @@
+:80
+root * /app/public
+php_fastcgi php:9000
+file_server