BranchesTags

Repository files navigation

baf.zone

This is the source to my website. It presently contains a simple homepage and my blog. In the future, it will gobble up projects.baf.cc and have whatever other content I come up with added to it.

The site itself is statically generated. I'm using Wintersmith to do the heavy lifting in that department, along with an extended version of the blog plugin provided by the Wintersmith examples.

For hosting, I'm simply deploying the site to Amazon S3, with CloudFront wrapped around it for speedy CDN caching/HTTPS.

To manage all of the tasks involved in deploying the site, I am utilizing Grunt.

Deployment

To build and deploy the site, a grunt-aws.json configuration file will need to be created, containing the following:

{
"key": "AWS KEY",
"secret": "AWS SECRET",
"stagingOptions": {
"bucket" : "staging deployment bucket"
},
"productionOptions": {
"bucket": "production deployment bucket"
}
}

This file is ignored by .gitignore, so it won't be accidentally committed.

  • To run a preview server on localhost:8080, run grunt preview.
  • To deploy to the staging environment, run grunt deploy-staging.
  • To deploy to the production environment, run grunt deploy-production. Deploying to production will create a new Git tag marking the deployment.

Wintersmith

Organization

Things are organized as follows:

  • build/ - whatever the last build of the site was. This is generated by Wintersmith (either manually or via Grunt), and is not committed to Git.
  • contents/ - the main contents of the site.
    • blog/posts/ - blog posts. Each post gets its own folder, with an index file for the actual post, and any additional assets associated with that post. Front-matter includes the post title, tag list, and old Tumblr permalink (for posts that I carried over from my old blog).
    • components/ - not used at the moment. This folder was intended for any dependencies that I choose to include using Bower.
    • css/ - CSS for the site. I'm using a Stylus plugin for Wintersmith here, but plain old CSS will work just fine (or any other CSS plugins).
    • js/ - JS for the site. I'm using CoffeeScript here, but plain old JS will work (and, of course, any plugins that generate JS).
  • plugins/ - custom Wintersmith plugins (documented further below).
  • templates/ - Jade templates for the site.

Plugins

NPM

The following plugins are included from NPM:

  • wintersmith-coffee - provides CoffeeScript compilation for content.
  • wintersmith-stylus - provides Stylus compilation for content.

Custom

There is currently one custom plugin in use.

Blog

The Blog plugin is loosely based on paginator.coffee from the Wintersmith blog example. I've extended it a bit to add new features.

Currently, it:

  • Generates the blog listing pages.
  • Generates JSON files that mirror the listing pages (for possible future use in implementing infinite scrolling)
  • Generates tag listing pages.
  • Generates redirect pages at URLs mirroring the old Tumblr permalinks, where necessary.

Other NPM Modules

A few other NPM modules are included. Most notably,

  • moment.js - provides nice timeago functionality.
  • nib - a nice Stylus plugin that deals with browser prefixes for CSS.
  • typogr - typogrifies markdown content in a nice fashion.

Grunt

I'm using Grunt to pick up where Wintersmith leaves off. Grunt is used for scripting all of the various tasks that need to be done.

Grunt Tasks

The following Grunt tasks are loaded from NPM:

  • grunt-contrib-clean - for cleaning the build output
  • grunt-contrib-cssmin - for minifying/uglifying production CSS
  • grunt-contrib-htmlmin - for minifying production HTML
  • grunt-contrib-imagemin - for optimizing/minifying production images
  • grunt-contrib-uglify - for minifying/uglifying production JS
  • grunt-git - for integration with Git (currently used for creating tags)
  • grunt-hashres - to add a hash to every filename to allow for long cache lives without worry about contents changing
  • grunt-s3 - for uploading the actual site content to S3
  • grunt-wintersmith - for integration with Wintersmith

The following tasks are registered to manage everything:

  • preview - just runs wintersmith:preview to start up a preview server
  • pre-build - handles any pre-build tasks
  • post-build - handles any post-build tasks
  • build - builds the site, chaining in pre- and post- build tasks
  • deploy-staging - deploys to the staging S3 bucket
  • deploy-production - deploys to the production S3 bucket and creats a Git tag marking the deployment.

grunt-s3

I've made a bugfix to grunt-s3 related to globbing. The fix has been merged upstream, but, as of 5/28/2014, has not been released on NPM yet. Due to this, I'm loading grunt-s3 via a submodule reference for now.

For this to work properly, you'll need to:

  • git submodule init in the root of the repo
  • npm install --production in the grunt-s3 subfolder

Afterwards, grunt will work properly.

About

This is my personal website and blog.

baf.zone/

Resources

Readme
License
Activity

Stars

1 star

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
baf.zone
This is the source to my website. It presently contains a
simple homepage and my blog. In the future, it will gobble up projects.baf.cc
and have whatever other content I come up with added to it.
The site itself is statically generated. I'm using
Wintersmith to do the heavy lifting in that
department, along with an extended version of the blog plugin provided by the
Wintersmith examples.
For hosting, I'm simply deploying the site to Amazon S3, with CloudFront wrapped
around it for speedy CDN caching/HTTPS.
To manage all of the tasks involved in deploying the site, I am utilizing
Grunt.
Deployment
To build and deploy the site, a grunt-aws.json configuration file will need to
be created, containing the following:
{
"key": "AWS KEY",
"secret": "AWS SECRET",
"stagingOptions": {
"bucket" : "staging deployment bucket"
},
"productionOptions": {
"bucket": "production deployment bucket"
}
}

This file is ignored by .gitignore, so it won't be accidentally committed.
  • To run a preview server on localhost:8080, run grunt preview.
  • To deploy to the staging environment, run grunt deploy-staging.
  • To deploy to the production environment, run grunt deploy-production.
Deploying to production will create a new Git tag marking the deployment.
Wintersmith
Organization
Things are organized as follows:
  • build/ - whatever the last build of the site was. This is generated by
Wintersmith (either manually or via Grunt), and is not committed to Git.
  • contents/ - the main contents of the site.

    • blog/posts/ - blog posts. Each post gets its own folder, with an
index file for the actual post, and any additional assets associated with
that post. Front-matter includes the post title, tag list, and old Tumblr
permalink (for posts that I carried over from my old blog).
    • components/ - not used at the moment. This folder was intended for any
dependencies that I choose to include using Bower.
    • css/ - CSS for the site. I'm using a
Stylus plugin for Wintersmith here,
but plain old CSS will work just fine (or any other CSS plugins).
    • js/ - JS for the site. I'm using
CoffeeScript here, but plain old JS will work
(and, of course, any plugins that generate JS).
  • plugins/ - custom Wintersmith plugins (documented further below).
  • templates/ - Jade templates for the site.
Plugins
NPM
The following plugins are included from NPM:
  • wintersmith-coffee - provides CoffeeScript compilation for content.
  • wintersmith-stylus - provides Stylus compilation for content.
Custom
There is currently one custom plugin in use.
Blog
The Blog plugin is loosely based on paginator.coffee from the Wintersmith blog
example. I've extended it a bit to add new features.
Currently, it:
  • Generates the blog listing pages.
  • Generates JSON files that mirror the listing pages (for possible future use in
implementing infinite scrolling)
  • Generates tag listing pages.
  • Generates redirect pages at URLs mirroring the old Tumblr permalinks, where
necessary.
Other NPM Modules
A few other NPM modules are included. Most notably,
  • moment.js - provides nice timeago functionality.
  • nib - a nice Stylus plugin that deals with browser prefixes for CSS.
  • typogr - typogrifies markdown content in a nice fashion.
Grunt
I'm using Grunt to pick up where Wintersmith leaves off. Grunt is used for
scripting all of the various tasks that need to be done.
Grunt Tasks
The following Grunt tasks are loaded from NPM:
  • grunt-contrib-clean - for cleaning the build output
  • grunt-contrib-cssmin - for minifying/uglifying production CSS
  • grunt-contrib-htmlmin - for minifying production HTML
  • grunt-contrib-imagemin - for optimizing/minifying production images
  • grunt-contrib-uglify - for minifying/uglifying production JS
  • grunt-git - for integration with Git (currently used for creating tags)
  • grunt-hashres - to add a hash to every filename to allow for long cache
lives without worry about contents changing
  • grunt-s3 - for uploading the actual site content to S3
  • grunt-wintersmith - for integration with Wintersmith
The following tasks are registered to manage everything:
  • preview - just runs wintersmith:preview to start up a preview server
  • pre-build - handles any pre-build tasks
  • post-build - handles any post-build tasks
  • build - builds the site, chaining in pre- and post- build tasks
  • deploy-staging - deploys to the staging S3 bucket
  • deploy-production - deploys to the production S3 bucket and creats a Git
tag marking the deployment.
grunt-s3
I've made a bugfix to grunt-s3 related to globbing. The fix has been merged
upstream, but, as of 5/28/2014, has not been released on NPM yet. Due to this,
I'm loading grunt-s3 via a submodule reference for now.
For this to work properly, you'll need to:
  • git submodule init in the root of the repo
  • npm install --production in the grunt-s3 subfolder
Afterwards, grunt will work properly.
About
This is my personal website and blog.
baf.zone/
Resources
Readme
License
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
baf.zone
This is the source to my website. It presently contains a
simple homepage and my blog. In the future, it will gobble up projects.baf.cc
and have whatever other content I come up with added to it.
The site itself is statically generated. I'm using
Wintersmith to do the heavy lifting in that
department, along with an extended version of the blog plugin provided by the
Wintersmith examples.
For hosting, I'm simply deploying the site to Amazon S3, with CloudFront wrapped
around it for speedy CDN caching/HTTPS.
To manage all of the tasks involved in deploying the site, I am utilizing
Grunt.
Deployment
To build and deploy the site, a grunt-aws.json configuration file will need to
be created, containing the following:
{
"key": "AWS KEY",
"secret": "AWS SECRET",
"stagingOptions": {
"bucket" : "staging deployment bucket"
},
"productionOptions": {
"bucket": "production deployment bucket"
}
}

This file is ignored by .gitignore, so it won't be accidentally committed.
  • To run a preview server on localhost:8080, run grunt preview.
  • To deploy to the staging environment, run grunt deploy-staging.
  • To deploy to the production environment, run grunt deploy-production.
Deploying to production will create a new Git tag marking the deployment.
Wintersmith
Organization
Things are organized as follows:
  • build/ - whatever the last build of the site was. This is generated by
Wintersmith (either manually or via Grunt), and is not committed to Git.
  • contents/ - the main contents of the site.

    • blog/posts/ - blog posts. Each post gets its own folder, with an
index file for the actual post, and any additional assets associated with
that post. Front-matter includes the post title, tag list, and old Tumblr
permalink (for posts that I carried over from my old blog).
    • components/ - not used at the moment. This folder was intended for any
dependencies that I choose to include using Bower.
    • css/ - CSS for the site. I'm using a
Stylus plugin for Wintersmith here,
but plain old CSS will work just fine (or any other CSS plugins).
    • js/ - JS for the site. I'm using
CoffeeScript here, but plain old JS will work
(and, of course, any plugins that generate JS).
  • plugins/ - custom Wintersmith plugins (documented further below).
  • templates/ - Jade templates for the site.
Plugins
NPM
The following plugins are included from NPM:
  • wintersmith-coffee - provides CoffeeScript compilation for content.
  • wintersmith-stylus - provides Stylus compilation for content.
Custom
There is currently one custom plugin in use.
Blog
The Blog plugin is loosely based on paginator.coffee from the Wintersmith blog
example. I've extended it a bit to add new features.
Currently, it:
  • Generates the blog listing pages.
  • Generates JSON files that mirror the listing pages (for possible future use in
implementing infinite scrolling)
  • Generates tag listing pages.
  • Generates redirect pages at URLs mirroring the old Tumblr permalinks, where
necessary.
Other NPM Modules
A few other NPM modules are included. Most notably,
  • moment.js - provides nice timeago functionality.
  • nib - a nice Stylus plugin that deals with browser prefixes for CSS.
  • typogr - typogrifies markdown content in a nice fashion.
Grunt
I'm using Grunt to pick up where Wintersmith leaves off. Grunt is used for
scripting all of the various tasks that need to be done.
Grunt Tasks
The following Grunt tasks are loaded from NPM:
  • grunt-contrib-clean - for cleaning the build output
  • grunt-contrib-cssmin - for minifying/uglifying production CSS
  • grunt-contrib-htmlmin - for minifying production HTML
  • grunt-contrib-imagemin - for optimizing/minifying production images
  • grunt-contrib-uglify - for minifying/uglifying production JS
  • grunt-git - for integration with Git (currently used for creating tags)
  • grunt-hashres - to add a hash to every filename to allow for long cache
lives without worry about contents changing
  • grunt-s3 - for uploading the actual site content to S3
  • grunt-wintersmith - for integration with Wintersmith
The following tasks are registered to manage everything:
  • preview - just runs wintersmith:preview to start up a preview server
  • pre-build - handles any pre-build tasks
  • post-build - handles any post-build tasks
  • build - builds the site, chaining in pre- and post- build tasks
  • deploy-staging - deploys to the staging S3 bucket
  • deploy-production - deploys to the production S3 bucket and creats a Git
tag marking the deployment.
grunt-s3
I've made a bugfix to grunt-s3 related to globbing. The fix has been merged
upstream, but, as of 5/28/2014, has not been released on NPM yet. Due to this,
I'm loading grunt-s3 via a submodule reference for now.
For this to work properly, you'll need to:
  • git submodule init in the root of the repo
  • npm install --production in the grunt-s3 subfolder
Afterwards, grunt will work properly.
About
This is my personal website and blog.
baf.zone/
Resources
Readme
License
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
baf.zone
This is the source to my website. It presently contains a
simple homepage and my blog. In the future, it will gobble up projects.baf.cc
and have whatever other content I come up with added to it.
The site itself is statically generated. I'm using
Wintersmith to do the heavy lifting in that
department, along with an extended version of the blog plugin provided by the
Wintersmith examples.
For hosting, I'm simply deploying the site to Amazon S3, with CloudFront wrapped
around it for speedy CDN caching/HTTPS.
To manage all of the tasks involved in deploying the site, I am utilizing
Grunt.
Deployment
To build and deploy the site, a grunt-aws.json configuration file will need to
be created, containing the following:
{
"key": "AWS KEY",
"secret": "AWS SECRET",
"stagingOptions": {
"bucket" : "staging deployment bucket"
},
"productionOptions": {
"bucket": "production deployment bucket"
}
}

This file is ignored by .gitignore, so it won't be accidentally committed.
  • To run a preview server on localhost:8080, run grunt preview.
  • To deploy to the staging environment, run grunt deploy-staging.
  • To deploy to the production environment, run grunt deploy-production.
Deploying to production will create a new Git tag marking the deployment.
Wintersmith
Organization
Things are organized as follows:
  • build/ - whatever the last build of the site was. This is generated by
Wintersmith (either manually or via Grunt), and is not committed to Git.
  • contents/ - the main contents of the site.

    • blog/posts/ - blog posts. Each post gets its own folder, with an
index file for the actual post, and any additional assets associated with
that post. Front-matter includes the post title, tag list, and old Tumblr
permalink (for posts that I carried over from my old blog).
    • components/ - not used at the moment. This folder was intended for any
dependencies that I choose to include using Bower.
    • css/ - CSS for the site. I'm using a
Stylus plugin for Wintersmith here,
but plain old CSS will work just fine (or any other CSS plugins).
    • js/ - JS for the site. I'm using
CoffeeScript here, but plain old JS will work
(and, of course, any plugins that generate JS).
  • plugins/ - custom Wintersmith plugins (documented further below).
  • templates/ - Jade templates for the site.
Plugins
NPM
The following plugins are included from NPM:
  • wintersmith-coffee - provides CoffeeScript compilation for content.
  • wintersmith-stylus - provides Stylus compilation for content.
Custom
There is currently one custom plugin in use.
Blog
The Blog plugin is loosely based on paginator.coffee from the Wintersmith blog
example. I've extended it a bit to add new features.
Currently, it:
  • Generates the blog listing pages.
  • Generates JSON files that mirror the listing pages (for possible future use in
implementing infinite scrolling)
  • Generates tag listing pages.
  • Generates redirect pages at URLs mirroring the old Tumblr permalinks, where
necessary.
Other NPM Modules
A few other NPM modules are included. Most notably,
  • moment.js - provides nice timeago functionality.
  • nib - a nice Stylus plugin that deals with browser prefixes for CSS.
  • typogr - typogrifies markdown content in a nice fashion.
Grunt
I'm using Grunt to pick up where Wintersmith leaves off. Grunt is used for
scripting all of the various tasks that need to be done.
Grunt Tasks
The following Grunt tasks are loaded from NPM:
  • grunt-contrib-clean - for cleaning the build output
  • grunt-contrib-cssmin - for minifying/uglifying production CSS
  • grunt-contrib-htmlmin - for minifying production HTML
  • grunt-contrib-imagemin - for optimizing/minifying production images
  • grunt-contrib-uglify - for minifying/uglifying production JS
  • grunt-git - for integration with Git (currently used for creating tags)
  • grunt-hashres - to add a hash to every filename to allow for long cache
lives without worry about contents changing
  • grunt-s3 - for uploading the actual site content to S3
  • grunt-wintersmith - for integration with Wintersmith
The following tasks are registered to manage everything:
  • preview - just runs wintersmith:preview to start up a preview server
  • pre-build - handles any pre-build tasks
  • post-build - handles any post-build tasks
  • build - builds the site, chaining in pre- and post- build tasks
  • deploy-staging - deploys to the staging S3 bucket
  • deploy-production - deploys to the production S3 bucket and creats a Git
tag marking the deployment.
grunt-s3
I've made a bugfix to grunt-s3 related to globbing. The fix has been merged
upstream, but, as of 5/28/2014, has not been released on NPM yet. Due to this,
I'm loading grunt-s3 via a submodule reference for now.
For this to work properly, you'll need to:
  • git submodule init in the root of the repo
  • npm install --production in the grunt-s3 subfolder
Afterwards, grunt will work properly.
About
This is my personal website and blog.
baf.zone/
Resources
Readme
License
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
baf.zone
This is the source to my website. It presently contains a
simple homepage and my blog. In the future, it will gobble up projects.baf.cc
and have whatever other content I come up with added to it.
The site itself is statically generated. I'm using
Wintersmith to do the heavy lifting in that
department, along with an extended version of the blog plugin provided by the
Wintersmith examples.
For hosting, I'm simply deploying the site to Amazon S3, with CloudFront wrapped
around it for speedy CDN caching/HTTPS.
To manage all of the tasks involved in deploying the site, I am utilizing
Grunt.
Deployment
To build and deploy the site, a grunt-aws.json configuration file will need to
be created, containing the following:
{
"key": "AWS KEY",
"secret": "AWS SECRET",
"stagingOptions": {
"bucket" : "staging deployment bucket"
},
"productionOptions": {
"bucket": "production deployment bucket"
}
}

This file is ignored by .gitignore, so it won't be accidentally committed.
  • To run a preview server on localhost:8080, run grunt preview.
  • To deploy to the staging environment, run grunt deploy-staging.
  • To deploy to the production environment, run grunt deploy-production.
Deploying to production will create a new Git tag marking the deployment.
Wintersmith
Organization
Things are organized as follows:
  • build/ - whatever the last build of the site was. This is generated by
Wintersmith (either manually or via Grunt), and is not committed to Git.
  • contents/ - the main contents of the site.

    • blog/posts/ - blog posts. Each post gets its own folder, with an
index file for the actual post, and any additional assets associated with
that post. Front-matter includes the post title, tag list, and old Tumblr
permalink (for posts that I carried over from my old blog).
    • components/ - not used at the moment. This folder was intended for any
dependencies that I choose to include using Bower.
    • css/ - CSS for the site. I'm using a
Stylus plugin for Wintersmith here,
but plain old CSS will work just fine (or any other CSS plugins).
    • js/ - JS for the site. I'm using
CoffeeScript here, but plain old JS will work
(and, of course, any plugins that generate JS).
  • plugins/ - custom Wintersmith plugins (documented further below).
  • templates/ - Jade templates for the site.
Plugins
NPM
The following plugins are included from NPM:
  • wintersmith-coffee - provides CoffeeScript compilation for content.
  • wintersmith-stylus - provides Stylus compilation for content.
Custom
There is currently one custom plugin in use.
Blog
The Blog plugin is loosely based on paginator.coffee from the Wintersmith blog
example. I've extended it a bit to add new features.
Currently, it:
  • Generates the blog listing pages.
  • Generates JSON files that mirror the listing pages (for possible future use in
implementing infinite scrolling)
  • Generates tag listing pages.
  • Generates redirect pages at URLs mirroring the old Tumblr permalinks, where
necessary.
Other NPM Modules
A few other NPM modules are included. Most notably,
  • moment.js - provides nice timeago functionality.
  • nib - a nice Stylus plugin that deals with browser prefixes for CSS.
  • typogr - typogrifies markdown content in a nice fashion.
Grunt
I'm using Grunt to pick up where Wintersmith leaves off. Grunt is used for
scripting all of the various tasks that need to be done.
Grunt Tasks
The following Grunt tasks are loaded from NPM:
  • grunt-contrib-clean - for cleaning the build output
  • grunt-contrib-cssmin - for minifying/uglifying production CSS
  • grunt-contrib-htmlmin - for minifying production HTML
  • grunt-contrib-imagemin - for optimizing/minifying production images
  • grunt-contrib-uglify - for minifying/uglifying production JS
  • grunt-git - for integration with Git (currently used for creating tags)
  • grunt-hashres - to add a hash to every filename to allow for long cache
lives without worry about contents changing
  • grunt-s3 - for uploading the actual site content to S3
  • grunt-wintersmith - for integration with Wintersmith
The following tasks are registered to manage everything:
  • preview - just runs wintersmith:preview to start up a preview server
  • pre-build - handles any pre-build tasks
  • post-build - handles any post-build tasks
  • build - builds the site, chaining in pre- and post- build tasks
  • deploy-staging - deploys to the staging S3 bucket
  • deploy-production - deploys to the production S3 bucket and creats a Git
tag marking the deployment.
grunt-s3
I've made a bugfix to grunt-s3 related to globbing. The fix has been merged
upstream, but, as of 5/28/2014, has not been released on NPM yet. Due to this,
I'm loading grunt-s3 via a submodule reference for now.
For this to work properly, you'll need to:
  • git submodule init in the root of the repo
  • npm install --production in the grunt-s3 subfolder
Afterwards, grunt will work properly.
About
This is my personal website and blog.
baf.zone/
Resources
Readme
License
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
baf.zone
This is the source to my website. It presently contains a
simple homepage and my blog. In the future, it will gobble up projects.baf.cc
and have whatever other content I come up with added to it.
The site itself is statically generated. I'm using
Wintersmith to do the heavy lifting in that
department, along with an extended version of the blog plugin provided by the
Wintersmith examples.
For hosting, I'm simply deploying the site to Amazon S3, with CloudFront wrapped
around it for speedy CDN caching/HTTPS.
To manage all of the tasks involved in deploying the site, I am utilizing
Grunt.
Deployment
To build and deploy the site, a grunt-aws.json configuration file will need to
be created, containing the following:
{
"key": "AWS KEY",
"secret": "AWS SECRET",
"stagingOptions": {
"bucket" : "staging deployment bucket"
},
"productionOptions": {
"bucket": "production deployment bucket"
}
}

This file is ignored by .gitignore, so it won't be accidentally committed.
  • To run a preview server on localhost:8080, run grunt preview.
  • To deploy to the staging environment, run grunt deploy-staging.
  • To deploy to the production environment, run grunt deploy-production.
Deploying to production will create a new Git tag marking the deployment.
Wintersmith
Organization
Things are organized as follows:
  • build/ - whatever the last build of the site was. This is generated by
Wintersmith (either manually or via Grunt), and is not committed to Git.
  • contents/ - the main contents of the site.

    • blog/posts/ - blog posts. Each post gets its own folder, with an
index file for the actual post, and any additional assets associated with
that post. Front-matter includes the post title, tag list, and old Tumblr
permalink (for posts that I carried over from my old blog).
    • components/ - not used at the moment. This folder was intended for any
dependencies that I choose to include using Bower.
    • css/ - CSS for the site. I'm using a
Stylus plugin for Wintersmith here,
but plain old CSS will work just fine (or any other CSS plugins).
    • js/ - JS for the site. I'm using
CoffeeScript here, but plain old JS will work
(and, of course, any plugins that generate JS).
  • plugins/ - custom Wintersmith plugins (documented further below).
  • templates/ - Jade templates for the site.
Plugins
NPM
The following plugins are included from NPM:
  • wintersmith-coffee - provides CoffeeScript compilation for content.
  • wintersmith-stylus - provides Stylus compilation for content.
Custom
There is currently one custom plugin in use.
Blog
The Blog plugin is loosely based on paginator.coffee from the Wintersmith blog
example. I've extended it a bit to add new features.
Currently, it:
  • Generates the blog listing pages.
  • Generates JSON files that mirror the listing pages (for possible future use in
implementing infinite scrolling)
  • Generates tag listing pages.
  • Generates redirect pages at URLs mirroring the old Tumblr permalinks, where
necessary.
Other NPM Modules
A few other NPM modules are included. Most notably,
  • moment.js - provides nice timeago functionality.
  • nib - a nice Stylus plugin that deals with browser prefixes for CSS.
  • typogr - typogrifies markdown content in a nice fashion.
Grunt
I'm using Grunt to pick up where Wintersmith leaves off. Grunt is used for
scripting all of the various tasks that need to be done.
Grunt Tasks
The following Grunt tasks are loaded from NPM:
  • grunt-contrib-clean - for cleaning the build output
  • grunt-contrib-cssmin - for minifying/uglifying production CSS
  • grunt-contrib-htmlmin - for minifying production HTML
  • grunt-contrib-imagemin - for optimizing/minifying production images
  • grunt-contrib-uglify - for minifying/uglifying production JS
  • grunt-git - for integration with Git (currently used for creating tags)
  • grunt-hashres - to add a hash to every filename to allow for long cache
lives without worry about contents changing
  • grunt-s3 - for uploading the actual site content to S3
  • grunt-wintersmith - for integration with Wintersmith
The following tasks are registered to manage everything:
  • preview - just runs wintersmith:preview to start up a preview server
  • pre-build - handles any pre-build tasks
  • post-build - handles any post-build tasks
  • build - builds the site, chaining in pre- and post- build tasks
  • deploy-staging - deploys to the staging S3 bucket
  • deploy-production - deploys to the production S3 bucket and creats a Git
tag marking the deployment.
grunt-s3
I've made a bugfix to grunt-s3 related to globbing. The fix has been merged
upstream, but, as of 5/28/2014, has not been released on NPM yet. Due to this,
I'm loading grunt-s3 via a submodule reference for now.
For this to work properly, you'll need to:
  • git submodule init in the root of the repo
  • npm install --production in the grunt-s3 subfolder
Afterwards, grunt will work properly.
About
This is my personal website and blog.
baf.zone/
Resources
Readme
License
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
baf.zone
This is the source to my website. It presently contains a
simple homepage and my blog. In the future, it will gobble up projects.baf.cc
and have whatever other content I come up with added to it.
The site itself is statically generated. I'm using
Wintersmith to do the heavy lifting in that
department, along with an extended version of the blog plugin provided by the
Wintersmith examples.
For hosting, I'm simply deploying the site to Amazon S3, with CloudFront wrapped
around it for speedy CDN caching/HTTPS.
To manage all of the tasks involved in deploying the site, I am utilizing
Grunt.
Deployment
To build and deploy the site, a grunt-aws.json configuration file will need to
be created, containing the following:
{
"key": "AWS KEY",
"secret": "AWS SECRET",
"stagingOptions": {
"bucket" : "staging deployment bucket"
},
"productionOptions": {
"bucket": "production deployment bucket"
}
}

This file is ignored by .gitignore, so it won't be accidentally committed.
  • To run a preview server on localhost:8080, run grunt preview.
  • To deploy to the staging environment, run grunt deploy-staging.
  • To deploy to the production environment, run grunt deploy-production.
Deploying to production will create a new Git tag marking the deployment.
Wintersmith
Organization
Things are organized as follows:
  • build/ - whatever the last build of the site was. This is generated by
Wintersmith (either manually or via Grunt), and is not committed to Git.
  • contents/ - the main contents of the site.

    • blog/posts/ - blog posts. Each post gets its own folder, with an
index file for the actual post, and any additional assets associated with
that post. Front-matter includes the post title, tag list, and old Tumblr
permalink (for posts that I carried over from my old blog).
    • components/ - not used at the moment. This folder was intended for any
dependencies that I choose to include using Bower.
    • css/ - CSS for the site. I'm using a
Stylus plugin for Wintersmith here,
but plain old CSS will work just fine (or any other CSS plugins).
    • js/ - JS for the site. I'm using
CoffeeScript here, but plain old JS will work
(and, of course, any plugins that generate JS).
  • plugins/ - custom Wintersmith plugins (documented further below).
  • templates/ - Jade templates for the site.
Plugins
NPM
The following plugins are included from NPM:
  • wintersmith-coffee - provides CoffeeScript compilation for content.
  • wintersmith-stylus - provides Stylus compilation for content.
Custom
There is currently one custom plugin in use.
Blog
The Blog plugin is loosely based on paginator.coffee from the Wintersmith blog
example. I've extended it a bit to add new features.
Currently, it:
  • Generates the blog listing pages.
  • Generates JSON files that mirror the listing pages (for possible future use in
implementing infinite scrolling)
  • Generates tag listing pages.
  • Generates redirect pages at URLs mirroring the old Tumblr permalinks, where
necessary.
Other NPM Modules
A few other NPM modules are included. Most notably,
  • moment.js - provides nice timeago functionality.
  • nib - a nice Stylus plugin that deals with browser prefixes for CSS.
  • typogr - typogrifies markdown content in a nice fashion.
Grunt
I'm using Grunt to pick up where Wintersmith leaves off. Grunt is used for
scripting all of the various tasks that need to be done.
Grunt Tasks
The following Grunt tasks are loaded from NPM:
  • grunt-contrib-clean - for cleaning the build output
  • grunt-contrib-cssmin - for minifying/uglifying production CSS
  • grunt-contrib-htmlmin - for minifying production HTML
  • grunt-contrib-imagemin - for optimizing/minifying production images
  • grunt-contrib-uglify - for minifying/uglifying production JS
  • grunt-git - for integration with Git (currently used for creating tags)
  • grunt-hashres - to add a hash to every filename to allow for long cache
lives without worry about contents changing
  • grunt-s3 - for uploading the actual site content to S3
  • grunt-wintersmith - for integration with Wintersmith
The following tasks are registered to manage everything:
  • preview - just runs wintersmith:preview to start up a preview server
  • pre-build - handles any pre-build tasks
  • post-build - handles any post-build tasks
  • build - builds the site, chaining in pre- and post- build tasks
  • deploy-staging - deploys to the staging S3 bucket
  • deploy-production - deploys to the production S3 bucket and creats a Git
tag marking the deployment.
grunt-s3
I've made a bugfix to grunt-s3 related to globbing. The fix has been merged
upstream, but, as of 5/28/2014, has not been released on NPM yet. Due to this,
I'm loading grunt-s3 via a submodule reference for now.
For this to work properly, you'll need to:
  • git submodule init in the root of the repo
  • npm install --production in the grunt-s3 subfolder
Afterwards, grunt will work properly.
About
This is my personal website and blog.
baf.zone/
Resources
Readme
License
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
baf.zone
This is the source to my website. It presently contains a
simple homepage and my blog. In the future, it will gobble up projects.baf.cc
and have whatever other content I come up with added to it.
The site itself is statically generated. I'm using
Wintersmith to do the heavy lifting in that
department, along with an extended version of the blog plugin provided by the
Wintersmith examples.
For hosting, I'm simply deploying the site to Amazon S3, with CloudFront wrapped
around it for speedy CDN caching/HTTPS.
To manage all of the tasks involved in deploying the site, I am utilizing
Grunt.
Deployment
To build and deploy the site, a grunt-aws.json configuration file will need to
be created, containing the following:
{
"key": "AWS KEY",
"secret": "AWS SECRET",
"stagingOptions": {
"bucket" : "staging deployment bucket"
},
"productionOptions": {
"bucket": "production deployment bucket"
}
}

This file is ignored by .gitignore, so it won't be accidentally committed.
  • To run a preview server on localhost:8080, run grunt preview.
  • To deploy to the staging environment, run grunt deploy-staging.
  • To deploy to the production environment, run grunt deploy-production.
Deploying to production will create a new Git tag marking the deployment.
Wintersmith
Organization
Things are organized as follows:
  • build/ - whatever the last build of the site was. This is generated by
Wintersmith (either manually or via Grunt), and is not committed to Git.
  • contents/ - the main contents of the site.

    • blog/posts/ - blog posts. Each post gets its own folder, with an
index file for the actual post, and any additional assets associated with
that post. Front-matter includes the post title, tag list, and old Tumblr
permalink (for posts that I carried over from my old blog).
    • components/ - not used at the moment. This folder was intended for any
dependencies that I choose to include using Bower.
    • css/ - CSS for the site. I'm using a
Stylus plugin for Wintersmith here,
but plain old CSS will work just fine (or any other CSS plugins).
    • js/ - JS for the site. I'm using
CoffeeScript here, but plain old JS will work
(and, of course, any plugins that generate JS).
  • plugins/ - custom Wintersmith plugins (documented further below).
  • templates/ - Jade templates for the site.
Plugins
NPM
The following plugins are included from NPM:
  • wintersmith-coffee - provides CoffeeScript compilation for content.
  • wintersmith-stylus - provides Stylus compilation for content.
Custom
There is currently one custom plugin in use.
Blog
The Blog plugin is loosely based on paginator.coffee from the Wintersmith blog
example. I've extended it a bit to add new features.
Currently, it:
  • Generates the blog listing pages.
  • Generates JSON files that mirror the listing pages (for possible future use in
implementing infinite scrolling)
  • Generates tag listing pages.
  • Generates redirect pages at URLs mirroring the old Tumblr permalinks, where
necessary.
Other NPM Modules
A few other NPM modules are included. Most notably,
  • moment.js - provides nice timeago functionality.
  • nib - a nice Stylus plugin that deals with browser prefixes for CSS.
  • typogr - typogrifies markdown content in a nice fashion.
Grunt
I'm using Grunt to pick up where Wintersmith leaves off. Grunt is used for
scripting all of the various tasks that need to be done.
Grunt Tasks
The following Grunt tasks are loaded from NPM:
  • grunt-contrib-clean - for cleaning the build output
  • grunt-contrib-cssmin - for minifying/uglifying production CSS
  • grunt-contrib-htmlmin - for minifying production HTML
  • grunt-contrib-imagemin - for optimizing/minifying production images
  • grunt-contrib-uglify - for minifying/uglifying production JS
  • grunt-git - for integration with Git (currently used for creating tags)
  • grunt-hashres - to add a hash to every filename to allow for long cache
lives without worry about contents changing
  • grunt-s3 - for uploading the actual site content to S3
  • grunt-wintersmith - for integration with Wintersmith
The following tasks are registered to manage everything:
  • preview - just runs wintersmith:preview to start up a preview server
  • pre-build - handles any pre-build tasks
  • post-build - handles any post-build tasks
  • build - builds the site, chaining in pre- and post- build tasks
  • deploy-staging - deploys to the staging S3 bucket
  • deploy-production - deploys to the production S3 bucket and creats a Git
tag marking the deployment.
grunt-s3
I've made a bugfix to grunt-s3 related to globbing. The fix has been merged
upstream, but, as of 5/28/2014, has not been released on NPM yet. Due to this,
I'm loading grunt-s3 via a submodule reference for now.
For this to work properly, you'll need to:
  • git submodule init in the root of the repo
  • npm install --production in the grunt-s3 subfolder
Afterwards, grunt will work properly.
About
This is my personal website and blog.
baf.zone/
Resources
Readme
License
Activity
Stars
1 star
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages