Initial commit

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 %}