Task 5 - Refactor menu items using a loop

Task 4 - Use updated classes
Task 4 - Add Bebas font
2021-02-18 21:19:13 +00:00 · 2021-02-18 21:19:13 +00:00 · 2021-02-18 21:19:13 +00:00 · 2021-02-18 21:19:13 +00:00 · 2021-02-18 21:19:13 +00:00 · 2021-02-18 21:19:13 +00:00
14 changed files with 1242 additions and 5 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,5 @@
+/node_modules/
+/public/build/

 ###> symfony/framework-bundle ###
 /.env.local
--- a/assets/css/tailwind.pcss
+++ b/assets/css/tailwind.pcss
@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/config/packages/twig.yaml
+++ b/config/packages/twig.yaml
@ -1,2 +1,4 @@
 twig:
    default_path: '%kernel.project_dir%/templates'
+    globals:
+        menu_items: '@App\Repository\MenuItemRepository'
--- a/package.json
+++ b/package.json
@ -1,5 +1,15 @@
 {
  "private": true,
-  "scripts": {},
-  "dependencies": {}
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development postcss assets/css/tailwind.pcss -o public/build/tailwind.css",
+    "prod": "cross-env NODE_ENV=production postcss assets/css/tailwind.pcss -o public/build/tailwind.css",
+    "watch": "cross-env NODE_ENV=development postcss assets/css/tailwind.pcss -o public/build/tailwind.css --watch"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.2.4",
+    "cross-env": "^7.0.3",
+    "postcss": "^8.2.6",
+    "postcss-cli": "^8.3.1",
+    "tailwindcss": "^2.0.3"
+  }
 }
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/src/Repository/MenuItemArrayRepository.php
+++ b/src/Repository/MenuItemArrayRepository.php
@ -0,0 +1,34 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Repository;
+
+final class MenuItemArrayRepository implements MenuItemRepository
+{
+    public function findAll(): array
+    {
+        return [
+            [
+                'title' => 'Conference',
+                'is_active' => false,
+            ],
+            [
+                'title' => 'Sponsors',
+                'is_active' => false,
+            ],
+            [
+                'title' => 'Community',
+                'is_active' => false,
+            ],
+            [
+                'title' => 'FAQ',
+                'is_active' => false,
+            ],
+            [
+                'title' => 'Register',
+                'is_active' => true,
+            ],
+        ];
+    }
+}
--- a/src/Repository/MenuItemRepository.php
+++ b/src/Repository/MenuItemRepository.php
@ -0,0 +1,8 @@
+<?php
+
+namespace App\Repository;
+
+interface MenuItemRepository
+{
+    public function findAll(): array;
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,31 @@
+module.exports = {
+  purge: [],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    fontFamily: {
+      display: ['Bebas Neue', 'Arial Narrow', 'Arial', 'sans-serif'],
+      sans: ['Helvetica', 'Arial', 'sans-serif'],
+    },
+    colors: {
+      blue: {
+        DEFAULT: '#56a9db',
+        dark: '#1772ae',
+      },
+      gray: {
+        dark: '#333333',
+      },
+      orange: '#fcb040',
+      white: '#ffffff',
+    },
+    extend: {
+      fontSize: {
+        '2xl': '1.5625rem', // 25px
+        '3xl': '1.6875rem', // 27px
+      },
+    },
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+};
--- a/templates/html.html.twig
+++ b/templates/html.html.twig
@ -4,10 +4,13 @@
        <meta charset="UTF-8">
        <title>{% block title %}Tailwind CSS workshop{% endblock %}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+        <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="/build/tailwind.css"/>
        {% block stylesheets %}{% endblock %}
    </head>
-    <body class="py-20 font-sans bg-blue-600">
-        <div class="container px-4 mx-auto">
+    <body>
+        <div>
            {% block body %}{% endblock %}
        </div>
        {% block javascripts %}{% endblock %}
--- a/templates/includes/home/intro-text.html.twig
+++ b/templates/includes/home/intro-text.html.twig
@ -0,0 +1,5 @@
+<div class="max-w-3xl px-4 py-8 mx-auto text-center">
+    <p class="text-3xl leading-loose text-blue-dark">Florida DrupalCamp is an annual conference that brings together web developers from all over the world to learn, network and discuss web development and the Drupal content management system.</p>
+
+    <a class="inline-block px-5 py-4 mt-8 text-3xl transition-colors duration-200 ease-in-out border-2 text-blue-dark border-blue-dark hover:bg-blue-dark focus:bg-blue-dark hover:text-white focus:text-white" href="#0">Learn more</a>
+</div>
--- a/templates/includes/navbar.html.twig
+++ b/templates/includes/navbar.html.twig
@ -0,0 +1,24 @@
+<div class="sticky top-0 z-30 px-4 mx-auto bg-white max-w-screen-2xl">
+    <div class="grid grid-cols-2 gap-4">
+        <div>
+            <a class="absolute" href="#0">
+                <img src="https://www.fldrupal.camp/sites/all/themes/fldc17/images/header-logo-general.svg">
+            </a>
+        </div>
+        <div>
+            <ul class="flex justify-end h-full">
+                {% for menu_item in menu_items.findAll() %}
+                    {% set linkClasses = [
+                        'block px-2 py-3 text-2xl uppercase duration-200 ease-out transition-color font-display text-blue-dark hover:bg-orange focus:bg-orange hover:text-gray-dark focus:text-gray-dark',
+                        menu_item.is_active ? 'text-white bg-blue'
+                    ] %}
+                    <li>
+                        <a class="{{ linkClasses|join(' ')|trim }}" href="#0">
+                            {{ menu_item.title }}
+                        </a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </div>
+    </div>
+</div>
--- a/templates/page.html.twig
+++ b/templates/page.html.twig
@ -1,5 +1,7 @@
 {% extends 'html.html.twig' %}

 {% block body %}
+    {% include 'includes/navbar.html.twig' %}
+
    {% block content %}{% endblock %}
 {% endblock %}
--- a/templates/pages/home.html.twig
+++ b/templates/pages/home.html.twig
@ -1,5 +1,5 @@
 {% extends 'page.html.twig' %}

 {% block content %}
-    <h1 class="text-5xl font-bold text-center text-white">Welcome to the Tailwind CSS workshop</h1>
+    {% include 'includes/home/intro-text.html.twig' %}
 {% endblock %}
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Oliver Davies	b97482c642	Task 5 - Refactor menu items using a loop	2021-02-18 21:19:13 +00:00
Oliver Davies	97d4382dd3	Task 4 - Use updated classes	2021-02-18 21:19:13 +00:00
Oliver Davies	8dee798782	Task 4 - Add Bebas font	2021-02-18 21:19:13 +00:00
Oliver Davies	cb8ad1178a	Task 4 - Add our own configuration	2021-02-18 21:19:13 +00:00
Oliver Davies	b032e99b31	Task 3 - Add navbar classes	2021-02-18 21:19:13 +00:00
Oliver Davies	0ca58316c0	Task 3 - Add navbar markup	2021-02-18 21:19:13 +00:00
Oliver Davies	a5dff0b493	Task 2 - Add intro text classes	2021-02-18 21:19:13 +00:00
Oliver Davies	4014f12395	Task 2 - Add intro text	2021-02-18 21:19:13 +00:00
Oliver Davies	d6a5af062a	Remove old classes	2021-02-18 21:19:13 +00:00
Oliver Davies	11705f7a4c	Task 1 - Add Tailwind CSS	2021-02-18 21:19:13 +00:00