Compare commits
8 commits
main
...
use-alpine
| Author | SHA1 | Date | |
|---|---|---|---|
 Oliver Davies
|
8eb9d2aaea | ||
|
Oliver Davies
|
81ceb75765 | ||
|
Oliver Davies
|
c4438f7e86 | ||
|
Oliver Davies
|
9869810332 | ||
|
Oliver Davies
|
3363816d5b | ||
|
Oliver Davies
|
9843418417 | ||
|
Oliver Davies
|
d09ed2350e | ||
|
Oliver Davies
|
1359fa8159 |
|
|
@ -1,3 +0,0 @@
|
|||
> 1%
|
||||
last 2 versions
|
||||
not ie <= 8
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
17
.eslintrc.js
17
.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'
|
||||
}
|
||||
}
|
||||
34
.gitignore
vendored
34
.gitignore
vendored
|
|
@ -1,21 +1,13 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw*
|
||||
*
|
||||
!*/
|
||||
!/.gitignore
|
||||
!/assets/**/*.js
|
||||
!/assets/**/*.pcss
|
||||
!/netlify.toml
|
||||
!/package*.json
|
||||
!/postcss.config.js
|
||||
!/purgecss.config.js
|
||||
!/public/images/**
|
||||
!/public/index.html
|
||||
!/tailwind.config.js
|
||||
!/webpack.config.js
|
||||
|
|
|
|||
29
README.md
29
README.md
|
|
@ -1,29 +0,0 @@
|
|||
# Rebuilding Bartik
|
||||
|
||||
[](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).
|
||||
|
||||
|
||||
|
||||
[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
|
||||
```
|
||||
|
|
@ -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';
|
||||
2
assets/js/app.js
Normal file
2
assets/js/app.js
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
import 'alpinejs'
|
||||
import '../css/app.pcss'
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
module.exports = {
|
||||
presets: [
|
||||
'@vue/app'
|
||||
]
|
||||
}
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
[build]
|
||||
command = "yarn build"
|
||||
publish = "dist"
|
||||
command = "npm run production"
|
||||
publish = "public"
|
||||
|
|
|
|||
9352
package-lock.json
generated
Normal file
9352
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
45
package.json
45
package.json
|
|
@ -1,27 +1,22 @@
|
|||
{
|
||||
"name": "rebuilding-bartik",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"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",
|
||||
"@vue/cli-plugin-babel": "^3.11.0",
|
||||
"@vue/cli-plugin-eslint": "^3.11.0",
|
||||
"@vue/cli-service": "^3.11.0",
|
||||
"@vue/eslint-config-standard": "^4.0.0",
|
||||
"babel-eslint": "^10.0.3",
|
||||
"eslint": "^5.8.0",
|
||||
"eslint-plugin-vue": "^5.0.0",
|
||||
"vue-template-compiler": "^2.5.21"
|
||||
}
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "npm run development",
|
||||
"development": "encore dev",
|
||||
"watch": "npm run development -- --watch",
|
||||
"prod": "npm run production",
|
||||
"production": "encore production --progress"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@symfony/webpack-encore": "^0.28.3",
|
||||
"glob-all": "^3.1.0",
|
||||
"postcss-loader": "^3.0.0",
|
||||
"purgecss-webpack-plugin": "^2.1.0",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"dependencies": {
|
||||
"alpinejs": "^2.1.2",
|
||||
"tailwindcss": "^1.2.0",
|
||||
"tailwindcss-skip-link": "^1.0.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: [
|
||||
require('postcss-import'),
|
||||
require('tailwindcss'),
|
||||
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) || []
|
||||
})
|
||||
require('tailwindcss')(),
|
||||
require('autoprefixer')()
|
||||
]
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
https://rebuilding-bartik.netlify.com/* https://rebuilding-bartik.oliverdavies.uk/:splat 301!
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 462 B After Width: | Height: | Size: 462 B |
|
Before Width: | Height: | Size: 510 B After Width: | Height: | Size: 510 B |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 491 B After Width: | Height: | Size: 491 B |
|
|
@ -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">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title>Rebuilding Bartik with Vue.js and Tailwind CSS</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but rebuilding-bartik doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<title>Rebuilding Bartik with Tailwind CSS and Alpine.js</title>
|
||||
<link href="/build/app.css" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app" class="min-h-screen font-sans bg-black text-white text-sm leading-normal">
|
||||
<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>
|
||||
<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="/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>
|
||||
|
|
|
|||
10
purgecss.config.js
Normal file
10
purgecss.config.js
Normal file
|
|
@ -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: []
|
||||
}
|
||||
BIN
screenshot.png
BIN
screenshot.png
Binary file not shown.
|
Before Width: | Height: | Size: 71 KiB |
111
src/App.vue
111
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"/>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<div class="p-4 mb-4 bg-grey-100">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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>
|
||||
10
src/main.js
10
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')
|
||||
20
webpack.config.js
Normal file
20
webpack.config.js
Normal file
|
|
@ -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()
|
||||
Reference in a new issue