opdavies/rebuilding-bartik
Archived
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Re-structure project

Browse source 
References #34
This commit is contained in:
Oliver Davies 2020-03-16 00:21:07 +00:00
parent d09ed2350e
commit 9843418417
14 changed files with 1535 additions and 4552 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
.gitignore vendored Normal file
View file

@ -0,0 +1,12 @@
*
!*/
!/.gitignore
!/assets/**/*.js
!/assets/**/*.pcss
!/netlify.toml
!/package*.json
!/postcss.config.js
!/tailwind.config.js
!/public/images/**
!/public/index.html
!/webpack.config.js

7
assets/css/app.pcss Normal file
View file

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

17
assets/css/custom-components.pcss Normal file
View file

@ -0,0 +1,17 @@
#main a {
@apply text-blue-300 no-underline border-b border-blue-100 border-dotted;
&:hover,
&:focus {
@apply text-blue-100 border-solid
}
}
#footer a {
@apply text-white no-underline border-b border-dotted border-white;
&:hover,
&:focus {
@apply border-none
}
}

4
assets/css/custom-utilities.pcss Normal file
View file

@ -0,0 +1,4 @@
.skip-link:focus {
left: 50%;
transform: translateX(-50%)
}

2
assets/js/app.js Normal file
View file

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

5851
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

48
package.json
View file

@ -1,30 +1,20 @@
{
"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"
},
"engines": {
"yarn": "YARN NO LONGER USED - use npm instead."
}
}
"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",
"postcss-loader": "^3.0.0",
"vue-template-compiler": "^2.6.11"
},
"dependencies": {
"alpinejs": "^2.1.2",
"tailwindcss": "^1.2.0",
"tailwindcss-skip-link": "^1.0.1"
}
}

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = {
plugins: [
require('tailwindcss')(),
require('autoprefixer')()
]
}

8
public/images/feed.svg Normal file
View file

@ -0,0 +1,8 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<rect fill="#ff9900" width="16" height="16" x="0" y="0" rx="3" ry="3"/>
<g fill="#ffffff">
<circle cx="4.25" cy="11.812" r="1.5"/>
<path d="M10,13.312H7.875c0-2.83-2.295-5.125-5.125-5.125l0,0V6.062C6.754,6.062,10,9.308,10,13.312z"/>
<path d="M11.5,13.312c0-4.833-3.917-8.75-8.75-8.75V2.375c6.041,0,10.937,4.896,10.937,10.937H11.5z"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 462 B

1
public/images/hamburger.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g><path fill="#ffffff" d="M14.752 6h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 0h-13.502c-.69 0-1.25.56-1.25 1.25v.5c0 .69.56 1.25 1.25 1.25h13.502c.689 0 1.25-.56 1.25-1.25v-.5c0-.69-.561-1.25-1.25-1.25zM14.752 12h-13.502c-.69 0-1.25.561-1.25 1.25v.5c0 .689.56 1.25 1.25 1.25h13.502c.689 0 1.25-.561 1.25-1.25v-.5c0-.689-.561-1.25-1.25-1.25z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 510 B

1
public/images/logo.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="57" height="66" viewBox="471.5 467 57 66" enable-background="new 471.5 467 57 66"><path opacity=".2" fill="#303030" d="M528.5 504.965c0 16.634-13.123 27.615-28.24 27.615-10.29 0-19.894-5.523-24.978-14.167l.605-.027c1.313 1.192 3.39 2.58 7.404 2.515 4.77-.064 5.645-.875 9.855-2.756 22.716-10.17 26.925-19.457 27.736-21.59s2.013-5.587.756-9.415c-.242-.737-.42-1.333-.54-1.808-3.018-3.372-6.017-5.225-6.92-5.784-.14-.093-.29-.177-.43-.26l.44.26c2.01 1.247 14.314 8.782 14.314 25.417z"/><path fill="#fff" d="M509.09 518.507c1.006 0 2.077.065 2.83.568.756.503 1.193 1.63 1.445 2.263.25.634 0 1.006-.503 1.258-.438.25-.503.12-.94-.69-.44-.81-.82-1.63-3.01-1.63s-2.887.755-3.948 1.63c-1.062.876-1.443 1.193-1.825.69s-.253-1.006.437-1.63 1.825-1.63 2.888-2.077c1.06-.45 1.62-.383 2.625-.383zm-10.413 7.152c1.257 1.005 3.14 1.825 7.153 1.825 4.015 0 6.836-1.137 8.094-2.077.568-.438.82-.065.875.187.056.25.186.624-.252 1.07-.316.317-3.194 2.33-6.594 2.636-3.4.31-7.964.504-10.73-2.01-.438-.44-.316-1.07 0-1.323.317-.25.568-.438.94-.438.374.008.317.008.513.13z"/><path opacity=".2" fill="#aaa" d="M520.89 496.545c-.81 2.133-5.02 11.42-27.735 21.59-4.21 1.88-5.085 2.69-9.854 2.756-4.013.066-6.09-1.32-7.403-2.514l-.605.028h-.01c-2.393-4.042-3.78-8.783-3.78-13.952 0-7.852 2.97-13.654 6.287-17.687.11-.13.213-.26.325-.382 2.683-3.148 5.55-5.17 7.218-6.203.038-.028.075-.047.112-.065.42-.25.754-.447.987-.568 2.757-1.51 4.77-2.263 7.963-4.77.12-.092.242-.186.354-.288l.008-.01c.875-.754 1.64-1.76 2.18-3.4v-.008c.325-.97.567-2.16.716-3.65l.02.018c2.253 2.69 4.954 5.886 6.89 7.144.69.447 1.38.848 2.068 1.202l.3.15c2.243 1.126 4.507 1.945 6.807 3.333l.428.26c.903.56 3.902 2.412 6.92 5.784.12.475.298 1.07.54 1.807 1.274 3.837.073 7.292-.737 9.425z"/><path opacity=".5" fill="#333" d="M514.176 479.538c-3.26-2.077-6.464-2.887-9.603-4.955-1.938-1.267-4.64-4.47-6.893-7.162-.438 4.332-1.686 6.148-3.26 7.35-3.195 2.515-5.207 3.26-7.963 4.77-2.338 1.256-14.958 8.726-14.958 24.913 0 5.17 1.387 9.91 3.77 13.96 5.077 8.635 14.68 14.158 24.97 14.158 15.126 0 28.24-10.98 28.24-27.614 0-9.127-3.707-15.526-7.386-19.633-3.016-3.382-6.015-5.217-6.918-5.785zm7.627 7.34c4.117 5.15 6.213 11.23 6.213 18.077 0 3.968-.755 7.712-2.245 11.148-1.414 3.25-3.444 6.13-6.053 8.56-5.15 4.806-12.062 7.45-19.475 7.45-3.67 0-7.265-.698-10.692-2.086-3.372-1.36-6.398-3.297-9.016-5.774-5.532-5.225-8.57-12.257-8.57-19.8 0-6.716 2.18-12.695 6.483-17.753 3.288-3.865 6.836-6.007 8.196-6.743.67-.363 1.285-.69 1.89-.997 1.892-.97 3.68-1.89 6.14-3.818 1.312-.997 2.71-2.58 3.305-6.585 2.077 2.468 4.48 5.234 6.314 6.426 1.63 1.08 3.307 1.835 4.918 2.562 1.527.69 3.11 1.406 4.676 2.403l.056.037c4.62 2.84 7.06 5.896 7.86 6.892z"/><path opacity=".5" fill="#fff" d="M497.98 468.678c.874 2.58.753 3.893.753 4.452 0 .56-.307 2.077-1.313 2.832-.438.317-.568.568-.568.624 0 .25.568.438.568 1.006 0 .69-.317 2.077-3.642 5.393-3.325 3.316-8.103 6.278-11.8 8.103-3.698 1.826-5.468 1.686-5.97.81s.185-2.83 2.514-5.392l9.667-6.278 9.164-6.398.503-2.44"/><path fill="#fff" d="M497.98 468.613c-.57 4.145-1.826 5.393-3.512 6.715-2.83 2.133-5.588 3.446-6.212 3.763-1.63.82-7.535 4.08-10.608 8.784-.94 1.444 0 2.012.186 2.133.187.12 2.33.372 6.9-2.385 4.574-2.757 6.595-4.387 9.175-7.078 1.377-1.444 1.573-2.263 1.573-2.636 0-.438-.316-.624-.82-.754-.25-.065-.316-.187 0-.373.317-.186 1.622-.82 1.938-1.07.318-.25 1.827-1.257 1.882-2.887.065-1.63-.056-2.766-.503-4.21zm-14.112 45.628c.065-4.898 4.648-9.472 10.422-9.536 7.348-.065 12.424 7.283 16.13 7.208 3.14-.064 9.166-6.212 12.118-6.212 3.14 0 4.014 3.26 4.014 5.206 0 1.938-.623 5.458-2.133 7.656-1.51 2.198-2.44 3.008-4.2 2.888-2.264-.187-6.78-7.21-9.67-7.35-3.64-.12-11.547 7.6-17.75 7.6-3.763 0-4.9-.567-6.147-1.378-1.92-1.312-2.85-3.315-2.785-6.08z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 3.7 KiB

1
public/images/search.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#505050" d="M14.648 12.788l-4.23-4.228c.525-.855.834-1.858.834-2.938 0-3.105-2.52-5.624-5.627-5.624-3.106.002-5.625 2.521-5.625 5.627 0 3.105 2.519 5.625 5.625 5.625 1.076 0 2.08-.309 2.936-.832l4.229 4.229c.194.195.515.195.707 0l1.151-1.146c.194-.2.194-.519 0-.713zm-13.35-7.163c0-2.39 1.938-4.327 4.327-4.327 2.391 0 4.328 1.937 4.328 4.327 0 2.391-1.936 4.327-4.328 4.327-2.39 0-4.327-1.936-4.327-4.327z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 491 B

115
public/index.html Normal file
View file

@ -0,0 +1,115 @@
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<button type="button" class="w-full block p-3 bg-blue-100 text-sm text-grey-600 text-left focus:outline-none sm:hidden">
<div class="flex items-center justify-between">
<div>
Show - Main navigation
</div>
<div><img src="/img/hamburger.48998d54.svg" alt=""></div>
</div>
</button>
<div class="mx-auto px-4 sm:block xl:max-w-6xl 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://vuejs.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">
Vue.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://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/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://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>
</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="/img/feed.14efd8fc.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="/img/search.bd3dee64.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://vuejs.org">Vue.js</a> and <a href="https://tailwindcss.com">Tailwind CSS</a>.
</p>
</div>
</div>
</div>
</footer>
</div>
<script src="/build/app.js"></script>

14
webpack.config.js Normal file
View file

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