Re-add netlify.toml

References #34

.browserslistrc

@@ -1,3 +0,0 @@
-> 1%
-last 2 versions
-not ie <= 8

.editorconfig

@@ -1,5 +0,0 @@
-[*.{js,jsx,ts,tsx,vue}]
-indent_style = space
-indent_size = 2
-trim_trailing_whitespace = true
-insert_final_newline = true

.eslintrc.js

@@ -1,17 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/essential',
-    '@vue/standard'
-  ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  },
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
-}

.gitignore

@@ -1,21 +1,13 @@
-.DS_Store
+*
-node_modules
+!*/
-/dist
+!/.gitignore
-
+!/assets/**/*.js
-# local env files
+!/assets/**/*.pcss
-.env.local
+!/netlify.toml
-.env.*.local
+!/package*.json
-
+!/postcss.config.js
-# Log files
+!/purgecss.config.js
-npm-debug.log*
+!/public/images/**
-yarn-debug.log*
+!/public/index.html
-yarn-error.log*
+!/tailwind.config.js
-
+!/webpack.config.js
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw*

README.md

@@ -1,29 +0,0 @@
-# Rebuilding Bartik
-
-[![Netlify Status](https://api.netlify.com/api/v1/badges/7e49981e-951a-41ae-b0b9-d5b09989d448/deploy-status)](https://app.netlify.com/sites/rebuilding-bartik/deploys)
-
-A clone of [Drupal](https://www.drupal.org)’s default theme, Bartik, built with [Vue.js](https://vuejs.org) and [Tailwind CSS](https://tailwindcss.com).
-
-![A screenshot of the Rebuilding Bartik website](screenshot.png)
-
-[View the site live on Netlify →](https://rebuilding-bartik.oliverdavies.uk)
-
-## Project setup
-```
-yarn install
-```
-
-### Compiles and hot-reloads for development
-```
-yarn run serve
-```
-
-### Compiles and minifies for production
-```
-yarn run build
-```
-
-### Lints and fixes files
-```
-yarn run lint
-```

assets/css/app.pcss

@@ -1,7 +1,7 @@
 @import 'tailwindcss/base';
 
 @import 'tailwindcss/components';
-@import './components.css';
+@import './custom-components.pcss';
 
 @import 'tailwindcss/utilities';
-@import './utilities.css';
+@import './custom-utilities.pcss';

assets/js/app.js

@@ -0,0 +1,2 @@
+import 'alpinejs'
+import '../css/app.pcss'

babel.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}

netlify.toml

@@ -1,3 +1,3 @@
 [build]
-  command = "yarn build"
+  command = "npm run production"
-  publish = "dist"
+  publish = "public"

package.json

@@ -1,27 +1,22 @@
 {
-  "name": "rebuilding-bartik",
-  "version": "0.1.0",
     "private": true,
     "scripts": {
-    "serve": "vue-cli-service serve",
+        "dev": "npm run development",
-    "build": "vue-cli-service build",
+        "development": "encore dev",
-    "lint": "vue-cli-service lint"
+        "watch": "npm run development -- --watch",
-  },
+        "prod": "npm run production",
-  "dependencies": {
+        "production": "encore production --progress"
-    "postcss-import": "^12.0.1",
-    "tailwindcss": "^1.1.3",
-    "tailwindcss-skip-link": "^1.0.1",
-    "vue": "^2.6.6"
     },
     "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^1.3.0",
+        "@symfony/webpack-encore": "^0.28.3",
-    "@vue/cli-plugin-babel": "^3.11.0",
+        "glob-all": "^3.1.0",
-    "@vue/cli-plugin-eslint": "^3.11.0",
+        "postcss-loader": "^3.0.0",
-    "@vue/cli-service": "^3.11.0",
+        "purgecss-webpack-plugin": "^2.1.0",
-    "@vue/eslint-config-standard": "^4.0.0",
+        "vue-template-compiler": "^2.6.11"
-    "babel-eslint": "^10.0.3",
+    },
-    "eslint": "^5.8.0",
+    "dependencies": {
-    "eslint-plugin-vue": "^5.0.0",
+        "alpinejs": "^2.1.2",
-    "vue-template-compiler": "^2.5.21"
+        "tailwindcss": "^1.2.0",
+        "tailwindcss-skip-link": "^1.0.1"
     }
 }

postcss.config.js

@@ -1,15 +1,6 @@
 module.exports = {
   plugins: [
-    require('postcss-import'),
+    require('tailwindcss')(),
-    require('tailwindcss'),
+    require('autoprefixer')()
-    require('autoprefixer'),
-    process.env.NODE_ENV === 'production' && require('@fullhuman/postcss-purgecss')({
-      content: [
-        './src/**/*.vue',
-        './public/index.html',
-      ],
-      defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
-    })
   ]
 }
-

public/_redirects

@@ -1 +0,0 @@
-https://rebuilding-bartik.netlify.com/* https://rebuilding-bartik.oliverdavies.uk/:splat 301!

public/index.html

@@ -1,17 +1,123 @@
-<!DOCTYPE html>
 <html lang="en">
-  <head>
+<head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="/favicon.ico">
-    <title>Rebuilding Bartik with Vue.js and Tailwind CSS</title>
+    <title>Rebuilding Bartik with Tailwind CSS and Alpine.js</title>
-  </head>
+    <link href="/build/app.css" rel="stylesheet">
-  <body>
+</head>
-    <noscript>
+
-      <strong>We're sorry but rebuilding-bartik doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+<body>
-    </noscript>
+    <div id="app" class="min-h-screen font-sans bg-black text-white text-sm leading-normal">
-    <div id="app"></div>
+        <div><a href="#main-content" class="skip-link py-1 px-2 rounded-b-lg text-white bg-black-60 focus:no-underline focus:outline-none">Skip to main content</a></div>
-    <!-- built files will be auto injected -->
+        <header class="bg-blue-300">
-  </body>
+            <div class="py-4 text-white">
-</html>
+                <div id="header" class="mx-auto px-4 relative xl:max-w-6xl">
+                    <div class="flex flex-col-reverse">
+                        <div class="flex items-center"><img src="/images/logo.svg" alt="" class="mr-4">
+                            <div class="text-2xl"><a href="#0">Rebuilding Bartik</a></div>
+                        </div>
+                        <div class="text-sm flex justify-end"><a href="#0">Log in</a></div>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-1">
+                <div x-data="{ isOpen: false }">
+                    <button
+                      type="button"
+                      class="w-full block p-3 bg-blue-100 text-sm text-grey-600 text-left focus:outline-none sm:hidden"
+                      @click="isOpen = !isOpen"
+                    >
+                        <div class="flex items-center justify-between">
+                            <div x-text="[
+                              isOpen ? 'Hide - main navigation': 'Show - main navigation'
+                            ]"></div>
+                            <div><img src="/images/hamburger.svg" alt=""></div>
+                        </div>
+                    </button>
+                    <div
+                      class="mx-auto px-4 sm:block xl:max-w-6xl"
+                      :class="[ isOpen ? 'block' : 'hidden' ]"
+                    >
+                        <div class="mt-2 sm:mt-0">
+                            <nav class="flex flex-wrap pb-2 -mt-1 -mx-3 sm:-mx-0 md:p-0">
+                                <div class="w-full inline-block px-1 mt-1 md:mb-0 sm:w-1/3 sm:pl-0 md:w-auto"><a href="#0" class="block px-3 py-2 rounded-lg text-sm text-black no-underline sm:text-center md:rounded-none md:rounded-t-lg bg-white">
+            Home
+          </a></div>
+                                <div class="w-full inline-block px-1 mt-1 md:mb-0 sm:w-1/3 sm:pl-0 md:w-auto"><a href="https://www.drupal.org" class="block px-3 py-2 rounded-lg text-sm text-black no-underline sm:text-center md:rounded-none md:rounded-t-lg bg-blue-100 hover:bg-white">
+            Drupal
+          </a></div>
+                                <div class="w-full inline-block px-1 mt-1 md:mb-0 sm:w-1/3 sm:pl-0 md:w-auto"><a href="https://tailwindcss.com" class="block px-3 py-2 rounded-lg text-sm text-black no-underline sm:text-center md:rounded-none md:rounded-t-lg bg-blue-100 hover:bg-white">
+            Tailwind CSS
+          </a></div>
+                                <div class="w-full inline-block px-1 mt-1 md:mb-0 sm:w-1/3 sm:pl-0 md:w-auto"><a href="https://github.com/alpinejs/alpine" class="block px-3 py-2 rounded-lg text-sm text-black no-underline sm:text-center md:rounded-none md:rounded-t-lg bg-blue-100 hover:bg-white">
+            Alpine.js
+          </a></div>
+                                <div class="w-full inline-block px-1 mt-1 md:mb-0 sm:w-1/3 sm:pl-0 md:w-auto"><a href="https://github.com/opdavies/rebuilding-bartik" class="block px-3 py-2 rounded-lg text-sm text-black no-underline sm:text-center md:rounded-none md:rounded-t-lg bg-blue-100 hover:bg-white">
+            View code on GitHub
+          </a></div>
+                                <div class="w-full inline-block px-1 mt-1 md:mb-0 sm:w-1/3 sm:pl-0 md:w-auto"><a href="https://www.oliverdavies.uk/blog/rebuilding-bartik-with-vuejs-tailwind-css" class="block px-3 py-2 rounded-lg text-sm text-black no-underline sm:text-center md:rounded-none md:rounded-t-lg bg-blue-100 hover:bg-white">
+            Read blog post
+          </a></div>
+                            </nav>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>
+        <div class="bg-white text-black">
+            <div class="max-w-6xl mx-auto px-4 py-6">
+                <div class="bg-green-300 pl-2 rounded-sm">
+                    <div class="flex items-center py-4 pl-3 pr-4 mb-6 border rounded-sm border-green-200 text-green-400 bg-green-100">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="fill-current w-4 h-4 text-green-300 mr-3">
+                            <path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"></path>
+                        </svg>
+                        <p>
+                            A Bartik clone, built with
+                            <a href="https://tailwindcss.com" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Tailwind CSS</a> and
+                            <a href="https://github.com/alpinejs/alpine" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Alpine.js</a>.
+                        </p>
+                    </div>
+                </div>
+                <div class="-mx-6 md:flex md:flex-row-reverse">
+                    <main id="main" class="flex-1 px-6 pb-8 lg:pb-12">
+                        <div class="font-serif">
+                            <h1 class="text-3xl font-normal leading-tight">Welcome to Rebuilding Bartik</h1>
+                            <p class="mt-1">No front page content has been created yet.</p>
+                            <p>Follow the <a href="#0">User Guide</a> to start building your site.</p>
+                        </div>
+                        <div class="mt-6 lg:mt-10">
+                            <a href="#0"><img src="/images/feed.svg" alt=""></a>
+                        </div>
+                    </main>
+                    <aside class="w-full px-6 -mb-4 md:w-1/3 lg:w-1/4">
+                        <div class="p-4 mb-4 bg-grey-100">
+                            <h2 class="font-serif font-normal text-base text-grey-600 border-b border-solid border-grey-300">Search</h2>
+                            <div class="mt-3">
+                                <form action="#" class="flex">
+                                    <input type="text" class="w-full py-1 px-2 border border-solid border-grey-400 xl:w-auto">
+                                    <button type="submit" class="flex-none ml-2 px-3 rounded-full bg-grey-200 border-b border-solid border-grey-500"><img src="/images/search.svg" class="block"></button>
+                                </form>
+                            </div>
+                        </div>
+                    </aside>
+                </div>
+            </div>
+        </div>
+        <footer id="footer" class="bg-black text-white text-xs">
+            <div class="max-w-6xl mx-auto px-4 pt-16 pb-8 bg-grey-700">
+                <div class="border-t border-solid border-grey-600 pt-6">
+                    <div>
+                        <p><a href="#0">Contact</a></p>
+                    </div>
+                    <div class="mt-6">
+                        <p>
+                            A clone of <a href="https://www.drupal.org">Drupal</a>’s default theme (Bartik). Built by <a href="https://www.oliverdavies.uk">Oliver Davies</a> using <a href="https://tailwindcss.com">Tailwind CSS</a> and <a href="https://github.com/alpinejs/alpine">Alpine.js</a>.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </div>
+    <script src="/build/app.js"></script>

purgecss.config.js

@@ -0,0 +1,10 @@
+let glob = require('glob-all')
+
+module.exports = {
+  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
+  paths: () => glob.sync([
+    'public/index.html'
+  ]),
+  whitelist: [],
+  whitelistPatterns: []
+}

src/App.vue

@@ -1,111 +0,0 @@
-<template>
-  <div id="app" class="min-h-screen font-sans bg-black text-white text-sm leading-normal">
-    <skip-link></skip-link>
-
-    <header class="bg-blue-300">
-      <div class="py-4 text-white">
-        <div id="header" class="mx-auto px-4 relative xl:max-w-6xl">
-          <div class="flex flex-col-reverse">
-            <div class="flex items-center">
-              <img src="@/assets/img/logo.svg" alt="" class="mr-4">
-              <div class="text-2xl">
-                <a href="#0">{{ title }}</a>
-              </div>
-            </div>
-
-            <div class="text-sm flex justify-end">
-              <a href="#0">Log in</a>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div class="mt-1">
-        <main-menu></main-menu>
-      </div>
-    </header>
-
-    <div class="bg-white text-black">
-      <div class="max-w-6xl mx-auto px-4 py-6">
-        <drupal-message type="status">
-          <p>
-            A Bartik clone, built with
-            <a href="https://vuejs.org" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Vue.js</a>
-            and <a href="https://tailwindcss.com" class="text-blue-300 hover:text-blue-200 no-underline border-b border-dotted hover:border-solid border-blue-300">Tailwind CSS</a>.
-          </p>
-        </drupal-message>
-
-        <div class="-mx-6 md:flex md:flex-row-reverse">
-          <main id="main" class="flex-1 px-6 pb-8 lg:pb-12">
-            <div class="font-serif">
-              <h1 class="text-3xl font-normal leading-tight">Welcome to {{ title }}</h1>
-              <p class="mt-1">No front page content has been created yet.</p>
-              <p>Follow the <a href="#0">User Guide</a> to start building your site.</p>
-            </div>
-
-            <div class="mt-6 lg:mt-10"><a href="#0"><img src="@/assets/img/feed.svg" alt=""></a></div>
-          </main>
-
-          <aside class="w-full px-6 -mb-4 md:w-1/3 lg:w-1/4">
-            <sidebar-block>
-              <h2 class="font-serif font-normal text-base text-grey-600 border-b border-solid border-grey-300">Search</h2>
-
-              <div class="mt-3">
-                <form action="#" class="flex">
-                  <input type="text" class="w-full py-1 px-2 border border-solid border-grey-400 xl:w-auto">
-
-                  <button type="submit" class="flex-none ml-2 px-3 rounded-full bg-grey-200 border-b border-solid border-grey-500">
-                    <img src="@/assets/img/search.svg" class="block">
-                  </button>
-                </form>
-              </div>
-            </sidebar-block>
-          </aside>
-        </div>
-      </div>
-    </div>
-
-    <footer id="footer" class="bg-black text-white text-xs">
-      <div class="max-w-6xl mx-auto px-4 pt-16 pb-8 bg-grey-700">
-        <div class="border-t border-solid border-grey-600 pt-6">
-          <div>
-            <p><a href="#0">Contact</a></p>
-          </div>
-
-          <div class="mt-6">
-            <p>
-              A clone of <a href="https://www.drupal.org">Drupal</a>’s default theme (Bartik).
-              Built by <a href="https://www.oliverdavies.uk">Oliver Davies</a>
-              using <a href="https://vuejs.org">Vue.js</a>
-              and <a href="https://tailwindcss.com">Tailwind CSS</a>.
-            </p>
-          </div>
-        </div>
-      </div>
-    </footer>
-  </div>
-</template>
-
-<script>
-import MainMenu from '@/components/MainMenu'
-import SidebarBlock from '@/components/SidebarBlock'
-import SkipLink from '@/components/SkipLink'
-
-export default {
-  name: 'app',
-
-  components: {
-    MainMenu,
-    SidebarBlock,
-    SkipLink
-  },
-
-  data () {
-    return {
-      title: 'Rebuilding Bartik'
-    }
-  }
-}
-</script>
-
-<style src="@/assets/css/tailwind.css"/>

src/components/DrupalMessage.vue

@@ -1,30 +0,0 @@
-<template>
-    <div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
-    <div class="flex items-center py-4 pl-3 pr-4 mb-6 border rounded-sm" :class="classes">
-      <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green-300 mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    type: String
-  },
-
-  computed: {
-    classes: function () {
-      return {
-        status: 'border-green-200 text-green-400 bg-green-100'
-      }[this.type]
-    },
-
-    wrapperClasses: function () {
-      return {
-        status: 'bg-green-300'
-      }[this.type]
-    }
-  }
-}
-</script>

src/components/MainMenu.vue

@@ -1,87 +0,0 @@
-<template>
-  <div>
-    <button
-      type="button"
-      class="w-full block p-3 bg-blue-100 text-sm text-grey-600 text-left focus:outline-none sm:hidden"
-      @click="toggle"
-    >
-      <div class="flex items-center justify-between">
-        <div>
-          {{ navText }} - Main navigation
-        </div>
-        <div>
-          <img src="@/assets/img/hamburger.svg" alt="">
-        </div>
-      </div>
-    </button>
-
-    <div class="mx-auto px-4 sm:block xl:max-w-6xl" :class="[ isOpen ? 'block' : 'hidden' ]">
-      <div class="mt-2 sm:mt-0">
-        <nav class="flex flex-wrap pb-2 -mt-1 -mx-3 sm:-mx-0 md:p-0">
-          <div
-            class="w-full inline-block px-1 mt-1 md:mb-0 sm:w-1/3 sm:pl-0 md:w-auto"
-            :key="link.title"
-            v-for="(link, index) in links"
-          >
-            <a
-              class="block px-3 py-2 rounded-lg text-sm text-black no-underline sm:text-center md:rounded-none md:rounded-t-lg"
-              :class="[ index == activeTab ? 'bg-white' : 'bg-blue-100 hover:bg-white' ]"
-              :href="link.href"
-            >
-              {{ link.title }}
-            </a>
-          </div>
-        </nav>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data: function () {
-    return {
-      activeTab: 0,
-      isOpen: false,
-      links: [
-        {
-          title: 'Home',
-          href: '#0'
-        },
-        {
-          title: 'Drupal',
-          href: 'https://www.drupal.org'
-        },
-        {
-          title: 'Vue.js',
-          href: 'https://vuejs.org'
-        },
-        {
-          title: 'Tailwind CSS',
-          href: 'https://tailwindcss.com'
-        },
-        {
-          title: 'View code on GitHub',
-          href: 'https://github.com/opdavies/rebuilding-bartik'
-        },
-        {
-          title: 'Read blog post',
-          href: 'https://www.oliverdavies.uk/blog/rebuilding-bartik-with-vuejs-tailwind-css'
-        }
-      ]
-    }
-  },
-
-  computed: {
-    navText: function () {
-      return this.isOpen ? 'Hide' : 'Show'
-    }
-  },
-
-  methods: {
-    toggle () {
-      this.isOpen = !this.isOpen
-    }
-  }
-}
-</script>

src/components/SidebarBlock.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="p-4 mb-4 bg-grey-100">
-    <slot></slot>
-  </div>
-</template>

src/components/SkipLink.vue

@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <a href="#main-content" class="skip-link py-1 px-2 rounded-b-lg text-white bg-black-60 focus:no-underline focus:outline-none">Skip to main content</a>
-  </div>
-</template>

src/main.js

@@ -1,10 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-
-Vue.config.productionTip = false
-
-Vue.component('drupal-message', require('@/components/DrupalMessage').default)
-
-new Vue({
-  render: h => h(App)
-}).$mount('#app')

webpack.config.js

@@ -0,0 +1,20 @@
+let Encore = require('@symfony/webpack-encore')
+let purgecssConfig = require('./purgecss.config')
+let PurgecssPlugin = require('purgecss-webpack-plugin')
+
+Encore
+    .disableSingleRuntimeChunk()
+    .cleanupOutputBeforeBuild()
+    .setOutputPath('public/build/')
+    .setPublicPath('/build')
+    .addEntry('app', './assets/js/app.js')
+    .enablePostCssLoader()
+    .configureLoaderRule('css', loaderRule => {
+        loaderRule.test = /\.(css|p(ost)?css)$/
+    })
+
+if (Encore.isProduction()) {
+    Encore.addPlugin(new PurgecssPlugin(purgecssConfig))
+}
+
+module.exports = Encore.getWebpackConfig()