Merge pull request #13 from jakewies/asset-pipeline

This commit is contained in:
Jake Wiesler 2020-06-17 08:57:37 -04:00 committed by GitHub
commit a1d87ee795
12 changed files with 4204 additions and 2174 deletions

1
.gitignore vendored
View File

@ -1,3 +1,4 @@
node_modules
# OS
.DS_Store

50
CONTRIBUTING.md Normal file
View File

@ -0,0 +1,50 @@
# Contributing
First off, thank you for your time and effort! This project is not very large and easy to jump into.
## Development stack
- Built with [Hugo](https://gohugo.io/) 🔥
- [Gulp](https://gulpjs.com/) as a build tool 🍹
- Styles in [Stylus](http://stylus-lang.com/) 💅🏻
## Getting started
1. Fork and clone the repository
2. Install dependencies:
```bash
cd hugo-theme-codex
yarn install
```
## Scripts
There are 3 npm scripts that can be used for development purposes:
```bash
yarn develop
```
This command will start a hugo webserver and serve the `exampleSite`. This works well because the example site uses `hugo-theme-codex`, so any changes
we make to the codebase can be viewed in real time.
```bash
yarn watch:assets
```
If you are working with `js` or `css` you will probably want to run this command in a separate tab from `yarn develop` so that any changes to assets like javascript and css will trigger a re-build by `gulp``.
```bash
yarn build:assets
```
Triggers a one-time build of the static directory.
## Questions
If you have any questions feel free to reach out to me directly. Best ways to contact me:
- Twitter: https://twitter.com/jakewies
- Email: jakewiesler@gmail.com

49
gulpfile.js Normal file
View File

@ -0,0 +1,49 @@
var gulp = require("gulp");
var babel = require("gulp-babel");
var stylus = require("gulp-stylus");
var sourcemaps = require("gulp-sourcemaps");
var autoprefixer = require("gulp-autoprefixer");
var gulpIf = require("gulp-if");
var gutil = require("gulp-util");
const isDev = () => gutil.env.env === "dev";
gulp.task("styles", function () {
return gulp
.src("src/styles/pages/*.styl")
.pipe(gulpIf(isDev(), sourcemaps.init()))
.pipe(
stylus({
compress: true,
})
)
.pipe(autoprefixer())
.pipe(gulpIf(isDev(), sourcemaps.write()))
.pipe(gulp.dest("static/css"));
});
gulp.task("js", function () {
return gulp
.src("src/js/**/*.js")
.pipe(
babel({
presets: ["@babel/preset-env"],
})
)
.pipe(gulp.dest("static/js"));
});
gulp.task("vendor", function () {
return gulp.src("src/vendor/**/**").pipe(gulp.dest("static/vendor"));
});
gulp.task("watch", function () {
gulp.watch("src/styles/**/*.styl", gulp.series("styles"));
gulp.watch("src/js/**/*.js", gulp.series("js"));
});
// The default task is run on yarn watch:assets. This will build styles and js
// before watching the src/styles and src/js directoryies
gulp.task("default", gulp.series(gulp.parallel("styles", "js"), "watch"));
// The build task is run on yarn build:assets
gulp.task("build", gulp.parallel("styles", "js", "vendor"));

34
package.json Normal file
View File

@ -0,0 +1,34 @@
{
"name": "hugo-theme-codex",
"version": "0.2.0",
"author": "Jake Wiesler",
"description": "A minimal blog theme for Hugo",
"license": "MIT",
"scripts": {
"develop": "hugo server -s ./exampleSite/",
"watch:assets": "gulp --env=dev",
"build:assets": "gulp build"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/preset-env": "^7.10.2",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^7.0.1",
"gulp-babel": "^8.0.0",
"gulp-if": "^3.0.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-stylus": "^2.7.0",
"gulp-util": "^3.0.8"
},
"browserslist": [
"last 2 version",
"> 2%"
],
"homepage": "https://github.com/jakewies/hugo-theme-codex",
"bugs": "https://github.com/jakewies/hugo-theme-codex/issues",
"keywords": [
"hugo",
"blog",
"go"
]
}

View File

@ -3,8 +3,8 @@
*/
function toggleMobileNavState() {
const body = document.querySelector('body')
body.classList.toggle('nav--active')
const body = document.querySelector("body");
body.classList.toggle("nav--active");
}
/*
@ -12,8 +12,8 @@ function toggleMobileNavState() {
*/
function initBurger() {
const burger = document.querySelector('.burger')
burger.addEventListener('click', toggleMobileNavState)
const burger = document.querySelector(".burger");
burger.addEventListener("click", toggleMobileNavState);
}
initBurger()
initBurger();

View File

@ -1,7 +1,6 @@
@import '../_main'
@import '../partials/_social-icons'
@import '../partials/_github-syntax-highlighting'
@import '../partials/_newsletter-signup'
.post
width: 100%
@ -200,6 +199,3 @@ footer
.twitter-tweet.twitter-tweet-rendered
margin: 1.5rem auto!important
width: 375px!important
.newsletter__buttondown-link
display: none

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,412 +1 @@
button,
button[type="button"],
button[type="reset"],
button[type="submit"] {
-webkit-appearance: button
}
input,
input[type=text],
input[type=email] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none
}
html,
body {
background-color: #fff;
color: #111;
height: 100%
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box
}
*,
*:before,
*:after {
padding: 0;
margin: 0;
-webkit-box-sizing: inherit;
box-sizing: inherit
}
html {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 95%;
}
@media screen and (min-width:800px) {
html {
font-size: 100%
}
}
@media screen and (min-width:1400px) {
html {
font-size: 115%
}
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 1.5rem;
margin-bottom: 0;
line-height: 1.5rem;
}
h1 {
font-size: 2.121rem;
line-height: 2.25rem;
margin-top: 2.25rem
}
h2 {
font-size: 1.414rem
}
h3 {
font-size: 1.414/2rem
}
h4 {
font-size: 1.414/3rem
}
h5 {
font-size: 1.414/4rem
}
p {
margin-top: 1.5rem;
margin-bottom: 0;
line-height: 1.5rem
}
ul,
ol {
padding-left: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
ul li,
ol li {
line-height: 1.5rem
}
ul ul,
ol ul,
ul ol,
ol ol {
margin-top: 0;
margin-bottom: 0
}
blockquote {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
line-height: 1.5rem;
color: #717171;
font-style: italic;
}
pre {
line-height: 1.45;
margin-top: 1.5rem;
padding: 16px;
word-wrap: normal;
overflow: auto;
background-color: #f6f8fa;
border-radius: 3px
}
code {
font-size: 85%;
font-family: "SFMono-Regular", Consolas, Menlo, monospace;
padding: .2em .4em;
margin: 0;
background-color: rgba(27, 31, 35, 0.05);
border-radius: 3px
}
pre>code {
word-break: normal;
white-space: pre
}
pre code {
display: inline;
padding: 0;
margin: 0;
overflow: visible;
line-height: inherit;
word-wrap: normal;
background-color: transparent;
border: 0
}
.lead {
font-size: 1.414rem
}
.burger__container {
height: 4rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 1.5rem;
position: fixed;
width: 100%;
background: #fff;
z-index: 2;
}
@media screen and (min-width:800px) {
.burger__container {
display: none
}
}
.burger {
position: relative;
width: 28px;
height: 28px;
cursor: pointer
}
.burger__meat {
position: absolute;
width: 28px;
height: 2px;
background: #111;
top: calc(50% - 2px / 2);
left: calc(50% - 28px / 2);
-webkit-transition: all 150ms ease-in;
transition: all 150ms ease-in
}
.burger__meat--1 {
-webkit-transform: translateY(-10px);
transform: translateY(-10px)
}
.burger__meat--2 {
width: calc(28px - 6px)
}
.burger__meat--3 {
-webkit-transform: translateY(10px);
transform: translateY(10px)
}
.nav--active .burger__meat--1 {
-webkit-transform: rotate(45deg);
transform: rotate(45deg)
}
.nav--active .burger__meat--2 {
opacity: 0
}
.nav--active .burger__meat--3 {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg)
}
.nav {
font-size: 16px;
position: fixed;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: #fff;
visibility: hidden;
z-index: 1;
}
@media screen and (min-width:800px) {
.nav {
display: block;
visibility: visible;
padding-top: 3em;
width: 100px
}
}
.nav--active .nav {
visibility: visible;
height: 100%;
width: 100%
}
.nav__list {
text-align: right;
list-style: none;
margin: 0;
padding: 0;
width: 50%;
}
@media screen and (min-width:800px) {
.nav__list {
width: auto
}
}
@media screen and (max-width:799px) {
.nav__list {
-webkit-transform: translateY(-25px);
transform: translateY(-25px);
opacity: 0
}
.nav--active .nav__list {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
-webkit-transition: all 500ms ease;
transition: all 500ms ease
}
}
.nav__list li {
margin-bottom: 3em;
line-height: 1.5em;
}
.nav__list li:last-of-type {
margin-bottom: 0
}
@media screen and (min-width:800px) {
.nav__list li {
margin-bottom: 1.75em
}
}
.nav__list a {
color: #9b9b9b;
text-decoration: none;
font-size: 2em;
}
.nav__list a.active {
color: #111
}
.nav__list a:hover {
color: #111
}
@media screen and (min-width:800px) {
.nav__list a {
font-size: 1em
}
}
body.nav--active {
overflow: hidden
}
main {
padding: 3rem 1.5rem;
}
@media screen and (min-width:800px) {
main {
padding-left: calc(1.5rem + 100px)
}
}
@media screen and (max-width:799px) {
main {
padding-top: calc(3rem + 4rem)
}
}
.post-list__container {
margin: 0 auto;
max-width: 1200px;
width: 100%;
}
@media screen and (min-width:800px) {
.post-list__container {
padding-left: 50px
}
}
.post-list {
list-style: none;
margin: 0;
padding: 0
}
.post {
margin-bottom: 1.5rem
}
.post__title {
margin-top: 0;
font-weight: 500;
}
.post__title a {
color: #111;
text-decoration: none
}
.post__date {
color: #9b9b9b;
font-size: .8rem
}
.tag__header {
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin: 0 auto;
margin-bottom: 3rem;
}
.tag__header a,
.tag__header .separator {
color: #9b9b9b;
font-size: 1.5rem
}
.tag__header a {
text-decoration: none
}
.tag__header .separator {
-ms-flex-item-align: center;
align-self: center;
margin: 0 5px
}
.tag__header .tag__term {
margin: 0;
font-weight: 600
}
button,button[type="button"],button[type="reset"],button[type="submit"]{-webkit-appearance:button}input,input[type=text],input[type=email]{-webkit-appearance:none;-moz-appearance:none;appearance:none}html,body{background-color:#fff;color:#111;height:100%}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,*:before,*:after{padding:0;margin:0;-webkit-box-sizing:inherit;box-sizing:inherit}html{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;font-size:95%}@media screen and (min-width:800px){html{font-size:100%}}@media screen and (min-width:1400px){html{font-size:115%}}h1,h2,h3,h4,h5,h6{margin-top:1.5rem;margin-bottom:0;line-height:1.5rem}h1{font-size:2.121rem;line-height:2.25rem;margin-top:2.25rem}h2{font-size:1.414rem}h3{font-size:1.414/2rem}h4{font-size:1.414/3rem}h5{font-size:1.414/4rem}p{margin-top:1.5rem;margin-bottom:0;line-height:1.5rem}ul,ol{padding-left:1.5rem;margin-top:1.5rem;margin-bottom:1.5rem}ul li,ol li{line-height:1.5rem}ul ul,ol ul,ul ol,ol ol{margin-top:0;margin-bottom:0}blockquote{margin-top:1.5rem;margin-bottom:1.5rem;line-height:1.5rem;color:#717171;font-style:italic}pre{line-height:1.45;margin-top:1.5rem;padding:16px;word-wrap:normal;overflow:auto;background-color:#f6f8fa;border-radius:3px}code{font-size:85%;font-family:"SFMono-Regular",Consolas,Menlo,monospace;padding:.2em .4em;margin:0;background-color:rgba(27,31,35,0.05);border-radius:3px}pre>code{word-break:normal;white-space:pre}pre code{display:inline;padding:0;margin:0;overflow:visible;line-height:inherit;word-wrap:normal;background-color:transparent;border:0}.lead{font-size:1.414rem}.burger__container{height:4rem;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0 1.5rem;position:fixed;width:100%;background:#fff;z-index:2}@media screen and (min-width:800px){.burger__container{display:none}}.burger{position:relative;width:28px;height:28px;cursor:pointer}.burger__meat{position:absolute;width:28px;height:2px;background:#111;top:calc(50% - 2px / 2);left:calc(50% - 28px / 2);-webkit-transition:all 150ms ease-in;transition:all 150ms ease-in}.burger__meat--1{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.burger__meat--2{width:calc(28px - 6px)}.burger__meat--3{-webkit-transform:translateY(10px);transform:translateY(10px)}.nav--active .burger__meat--1{-webkit-transform:rotate(45deg);transform:rotate(45deg)}.nav--active .burger__meat--2{opacity:0}.nav--active .burger__meat--3{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.nav{font-size:16px;position:fixed;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#fff;visibility:hidden;z-index:1}@media screen and (min-width:800px){.nav{display:block;visibility:visible;padding-top:3em;width:100px}}.nav--active .nav{visibility:visible;height:100%;width:100%}.nav__list{text-align:right;list-style:none;margin:0;padding:0;width:50%}@media screen and (min-width:800px){.nav__list{width:auto}}@media screen and (max-width:799px){.nav__list{-webkit-transform:translateY(-25px);transform:translateY(-25px);opacity:0}.nav--active .nav__list{-webkit-transform:translateY(0);transform:translateY(0);opacity:1;-webkit-transition:all 500ms ease;transition:all 500ms ease}}.nav__list li{margin-bottom:3em;line-height:1.5em}.nav__list li:last-of-type{margin-bottom:0}@media screen and (min-width:800px){.nav__list li{margin-bottom:1.75em}}.nav__list a{color:#9b9b9b;text-decoration:none;font-size:2em}.nav__list a.active{color:#111}.nav__list a:hover{color:#111}@media screen and (min-width:800px){.nav__list a{font-size:1em}}body.nav--active{overflow:hidden}main{padding:3rem 1.5rem}@media screen and (min-width:800px){main{padding-left:calc(1.5rem + 100px)}}@media screen and (max-width:799px){main{padding-top:calc(3rem + 4rem)}}.post-list__container{margin:0 auto;max-width:1200px;width:100%}@media screen and (min-width:800px){.post-list__container{padding-left:50px}}.post-list{list-style:none;margin:0;padding:0}.post{margin-bottom:1.5rem}.post__title{margin-top:0;font-weight:500}.post__title a{color:#111;text-decoration:none}.post__date{color:#9b9b9b;font-size:.8rem}.tag__header{-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;display:-webkit-box;display:-ms-flexbox;display:flex;margin:0 auto;margin-bottom:3rem}.tag__header a,.tag__header .separator{color:#9b9b9b;font-size:1.5rem}.tag__header a{text-decoration:none}.tag__header .separator{-ms-flex-item-align:center;align-self:center;margin:0 5px}.tag__header .tag__term{margin:0;font-weight:600}

View File

@ -1,21 +1,20 @@
'use strict';
"use strict";
/*
* Handles mobile nav
*/
function toggleMobileNavState() {
var body = document.querySelector('body');
body.classList.toggle('nav--active');
var body = document.querySelector("body");
body.classList.toggle("nav--active");
}
/*
* Initializes burger functionality
*/
function initBurger() {
var burger = document.querySelector('.burger');
burger.addEventListener('click', toggleMobileNavState);
var burger = document.querySelector(".burger");
burger.addEventListener("click", toggleMobileNavState);
}
initBurger();

4055
yarn.lock Normal file

File diff suppressed because it is too large Load Diff