Skip to content

Commit

Permalink
Merge pull request #21 from JayBox325/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
JayBox325 authored Sep 26, 2020
2 parents 54d211e + ef3dd52 commit 436d81d
Show file tree
Hide file tree
Showing 91 changed files with 217,981 additions and 156 deletions.
17 changes: 17 additions & 0 deletions CHANGELOG.MD
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,23 @@ All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## 2.1.6 -- DEV
### Removed
- Todo list from README and moved into GitHub issues

### Changed
- Fixed symbols extension
- Moved accessibility Scss to fix variable import oder bug

### Added
- Link to tailwind shade generator
- Default social links component
- New FB icon
- Gulp-Data + Nunjucks module
- Njks header component
- Button component
- Theming changes to use tailwind classes instead of pre-defined classes

## 2.1.5
### Changed
- Fixed typos in changelog
Expand Down
14 changes: 1 addition & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,4 @@ There are three commands to run for this boilerplate as follows:
* `npm run package` - Package your project. This will remove all the sourcemaps and minify everything ready for launch.

## First run
After setting up a project for the first time, you will need to run `npm build` so JayPack structures the project directories.

## JayPack todos
- Add barba.js module
- Set up base menu and header
- Accordion component with JS
- Added form from project, need to build a dummy form to restyle for jaypack
- Add default SEO template
- Add Drawer component with JS

## JayCraft todos
- Include a DB setup command
- Set up Craft asset rev
After setting up a project for the first time, you will need to run `npm build` so JayPack structures the project directories.
31 changes: 31 additions & 0 deletions _gulp/html/__data/data.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{
"siteDetails": {
"title": "JayPack",
"description": "Lorem set amet consectutor",
"twitter": "JayBox325"
},
"seo": {
"description": "SEO Description here.",
"socialCard": ""
},
"socialAccounts": [
{
"account": "Twitter",
"text": "Follow us on Twitter",
"icon": "twitter",
"accountUrl": "https://twitter.com/JayBox325"
},
{
"account": "Facebook",
"text": "Like us on Facebook",
"icon": "facebook-f",
"accountUrl": "https://www.facebook.com"
},
{
"account": "Email",
"text": "Email us",
"icon": "at",
"accountUrl": "mailto:[email protected]"
}
]
}
23 changes: 23 additions & 0 deletions _gulp/html/_includes/seo.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<title>{{ siteDetails.title }} - {{ siteDetails.description }}</title>
<meta name="description" content="{{ seo.description }}">
<link rel="canonical" href="https://www.mobilityreuseoutlet.com">


{# Twitter #}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@{{ siteDetails.twitter }}">
<meta name="twitter:creator" content="@{{ siteDetails.twitter }}">
<meta name="twitter:title" content="{{ siteDetails.title }}">
<meta name="twitter:description" content="{{ siteDetails.description }}">
{% if seo.socialCard|length %}
<meta name="twitter:image" content="{{ seo.socialCard }}">
{% endif %}

{# Facebook #}
<meta property="og:url" content="#" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ siteDetails.title }}" />
<meta property="og:description" content="{{ siteDetails.description }}" />
{% if seo.socialCard|length %}
<meta property="og:image" content="{{ seo.socialCard }}">
{% endif %}
4 changes: 4 additions & 0 deletions _gulp/html/_includes/svg-symbols.njk
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,10 @@
<symbol id="external-link-square-alt" viewBox="0 0 448 512"><path d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"/></symbol>
<symbol id="facebook-f" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></symbol>
<symbol id="facebook-messenger" viewBox="0 0 512 512"><path d="M256.55 8C116.52 8 8 110.34 8 248.57c0 72.3 29.71 134.78 78.07 177.94 8.35 7.51 6.63 11.86 8.05 58.23A19.92 19.92 0 0 0 122 502.31c52.91-23.3 53.59-25.14 62.56-22.7C337.85 521.8 504 423.7 504 248.57 504 110.34 396.59 8 256.55 8zm149.24 185.13l-73 115.57a37.37 37.37 0 0 1-53.91 9.93l-58.08-43.47a15 15 0 0 0-18 0l-78.37 59.44c-10.46 7.93-24.16-4.6-17.11-15.67l73-115.57a37.36 37.36 0 0 1 53.91-9.93l58.06 43.46a15 15 0 0 0 18 0l78.41-59.38c10.44-7.98 24.14 4.54 17.09 15.62z"/></symbol>
<symbol id="facebook" viewBox="0 0 201.469 201.469"> <g> <path d="M201.469,21.586v158.297c0,11.916-9.671,21.586-21.586,21.586h-38.722v-68.495h25.984l4.947-32.24h-30.931V79.801
c0-8.819,4.322-17.417,18.177-17.417H173.4V34.951c0,0-12.763-2.177-24.968-2.177c-25.485,0-42.124,15.438-42.124,43.388v24.572
H77.977v32.24h28.332v68.495H21.586C9.67,201.469,0,191.798,0,179.883V21.586C0,9.67,9.67,0,21.586,0h158.297
C191.798,0,201.469,9.67,201.469,21.586z"/> </g> </symbol>
<symbol id="instagram" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></symbol>
<symbol id="linkedin-in" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"/></symbol>
<symbol id="pinterest-p" viewBox="0 0 384 512"><path d="M204 6.5C101.4 6.5 0 74.9 0 185.6 0 256 39.6 296 63.6 296c9.9 0 15.6-27.6 15.6-35.4 0-9.3-23.7-29.1-23.7-67.8 0-80.4 61.2-137.4 140.4-137.4 68.1 0 118.5 38.7 118.5 109.8 0 53.1-21.3 152.7-90.3 152.7-24.9 0-46.2-18-46.2-43.8 0-37.8 26.4-74.4 26.4-113.4 0-66.2-93.9-54.2-93.9 25.8 0 16.8 2.1 35.4 9.6 50.7-13.8 59.4-42 147.9-42 209.1 0 18.9 2.7 37.5 4.5 56.4 3.4 3.8 1.7 3.4 6.9 1.5 50.4-69 48.6-82.5 71.4-172.8 12.3 23.4 44.1 36 69.3 36 106.2 0 153.9-103.5 153.9-196.8C384 71.3 298.2 6.5 204 6.5z"/></symbol>
Expand Down
1 change: 0 additions & 1 deletion _gulp/html/_layout/_base.njk
Original file line number Diff line number Diff line change
Expand Up @@ -37,5 +37,4 @@
</div>

</body>

</html>
4 changes: 2 additions & 2 deletions _gulp/html/_layout/footer.njk
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
<footer class="row footer">
<div class="container">
<div class="mb-6">
{{ macro.social(siteDetails.socialAccounts) }}
{{ macro.social(socialAccounts) }}
</div>
<div class="w-content">
<p>{{ now.year }} &copy; Project here. <a href="https://jaycollett.co" {{ macro.external(true) }}>Site Credits</a></p>
<p>{{ now.year }} &copy; {{ siteDetails.title }}. <a href="https://jaycollett.co" {{ macro.external(true) }}>Site Credits</a></p>
</div>
</div>
</footer>
39 changes: 31 additions & 8 deletions _gulp/html/_layout/header.njk
Original file line number Diff line number Diff line change
@@ -1,9 +1,32 @@
<header class="header">
<a href="#">
{% set icon = {
symbol: 'ncp-logo',
size: 'lg'
} %}
{% include 'elements/icon.njk' %}
</a>
</header>
<div class="container header__inner">


{# <div class="grid md:grid-cols-12 gap-6 md:gap-0">
<div class="md:col-span-6 text-white"> #}


<div class="grid grid-cols-4 sm:grid-cols-12 header__grid">
<div class="col-span-3 sm:col-span-4">
<h1 class="h3">
<a href="/" class="header__logo">JayPack</a>
</h1>
</div>
<div class="col-span-1 sm:col-span-8">
<nav class="menu hidden sm:block">
<ul class="menu__list">
<li class="menu__item">
<a class="menu__link is-active" href="#">Menu</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#">Menu</a>
</li>
<li class="menu__item">
<a class="menu__link" href="#">Menu</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
6 changes: 3 additions & 3 deletions _gulp/html/_macros/macros.njk
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@
{% macro social(networks) %}
<ul class="list list--inline">
{% for network in networks %}
<li class="social__item">
<a href="{{ network.accountUrl }}" aria-label="Find us on {{ network.account.label }}" class="social__link social__link--{{ network.account }}">
{{ _self.icon(network.account, 'md') }}
<li class="list__item">
<a href="{{ network.accountUrl }}" aria-label="{{ network.text }}" class="social-icon bg-{{ network.account|lower }}-500 hover:bg-{{ network.account|lower }}-600">
{{ icon(network.icon, 'xs') }}
</a>
</li>
{% endfor %}
Expand Down
23 changes: 23 additions & 0 deletions _gulp/html/elements/button.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{% import '_macros/macros.njk' as macro %}

{# Content #}
{% set title = title|default("Read more") %}
{% set action = action|default(null) %}

{# Options #}
{% set type = type|default('link') %}
{% set target = target|default(false) %}
{% set full = full|default(false) %}
{% set classes = classes|default('bg-orange-500 hover:bg-orange-600 text-white') %}

{% if type == 'link' or type == 'download' %}
{% set download = true %}
{% set type = 'link' %}
{% endif %}

{% switch type %}
{% case 'button' %}
<button {{ action }} class="btn {{ classes }}{% if full %} btn--full{% endif %}">{{ title }}</button>
{% case 'link' %}
<a href="{{ action }}" {{ macro.external(target) }} class="btn {{ classes }}{% if full %} btn--full{% endif %}" {% if download %}download{% endif %}>{{ title }}</a>
{% endswitch %}
15 changes: 13 additions & 2 deletions _gulp/html/pages/index.njk
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
{% extends "_layout/_base.njk" %}

{% block content %}
<section class="row row--primary">
<h1>Here is a row</h1>
<section class="row row--gray">
<div class="container">
<div class="w-content">
<h1>Welcome to {{ siteDetails.title }}</h1>
<p>A front end scaffolding framework for static projects using Nunjucks or for CraftCMS sites with JayCraft.</p>
</div>
<div class="mt-6">
{% set button = {
action: 'https://google.com'
} %}
{% include 'elements/button.njk' %}
</div>
</div>
</section>
{% endblock %}
8 changes: 4 additions & 4 deletions _gulp/path.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ const paths = {
njks: {
render: `_src/html`,
src: `_src/html/pages/*.njk`,
watch: `_src/html/**/*.njk`,
data: `_src/html/__data/data.json`,
watch: `_src/html/**/*`,
data: `./_src/data.json`,
dest: `build`,
moveDest: `_src`,
access: `./_src/_html/_layout/_base.njk`,
access: `./_src/html/_layout/_base.njk`,
storage: `_gulp/html/**`
},

Expand Down Expand Up @@ -62,7 +62,7 @@ const paths = {
},

symbols: {
dest: projectConfig.craft ? `build/templates/_layout` : `_src/html/_layout`
dest: projectConfig.craft ? `build/templates/_includes` : `_src/html/_includes`
},

rev: {
Expand Down
66 changes: 61 additions & 5 deletions _gulp/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,68 @@ module.exports = {
white: '#fff',

// Social
facebook: '#3b5998',
twitter: '#1da1f2',
pinterest: '#bd081c',
instagram: '#c13584',
linkedin: '#0077b5',
facebook: {
50: '#F5F7FA',
100: '#EBEEF5',
200: '#CED6E5',
300: '#B1BDD6',
400: '#768BB7',
500: '#3B5998',
600: '#355089',
700: '#23355B',
800: '#1B2844',
900: '#121B2E',
},
twitter: {
50: '#F4FAFE',
100: '#E8F6FE',
200: '#C7E8FC',
300: '#A5D9FA',
400: '#61BDF6',
500: '#1DA1F2',
600: '#1A91DA',
700: '#116191',
800: '#0D486D',
900: '#093049',
},
pinterest: {
50: '#FCF3F4',
100: '#F8E6E8',
200: '#EFC1C6',
300: '#E59CA4',
400: '#D15260',
500: '#BD081C',
600: '#AA0719',
700: '#710511',
800: '#55040D',
900: '#390208',
},
instagram: {
50: '#FCF5F9',
100: '#F9EBF3',
200: '#F0CDE0',
300: '#E6AECE',
400: '#D472A9',
500: '#C13584',
600: '#AE3077',
700: '#74204F',
800: '#57183B',
900: '#3A1028',
},
linkedi: {
50: '#F2F8FB',
100: '#E6F1F8',
200: '#BFDDED',
300: '#99C9E1',
400: '#4DA0CB',
500: '#0077B5',
600: '#006BA3',
700: '#00476D',
800: '#003651',
900: '#002436',
},

// Generator: https://javisperez.github.io/tailwindcolorshades/#/
gray: {
100: '#f7fafc',
200: '#edf2f7',
Expand Down
5 changes: 4 additions & 1 deletion _gulp/tasks/nunjucks.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ import paths from '../path.config'
import handleErrors from '../utils/handleErrors'

import nunjucksRender from 'gulp-nunjucks-render'
import data from 'gulp-data'


// Move font files to build directory
gulp.task('nunjucks', () => {
return gulp.src(paths.njks.src)
.on('error', handleErrors)
.pipe(nunjucksRender({
path: [paths.njks.render]
path: [paths.njks.render],
data: JSON.parse(fs.readFileSync('_src/html/__data/data.json'))
}))
.on('error', handleErrors)
.pipe(gulp.dest(paths.njks.dest))
Expand Down
Loading

0 comments on commit 436d81d

Please sign in to comment.