Skip to content

Instantly share code, notes, and snippets.


Mark Dunbavan mdunbavan

View GitHub Profile
mdunbavan /
Created Jul 8, 2021 — forked from croxton/
How to provision Google Cloud Storage buckets for Craft CMS 3.x

Create the bucket

  1. Open the console
  2. If you haven't already, setup your Cloud billing account
  3. From the drop down at the top of the screen, create new project for your client, e.g. my-client
  4. Make a note of the Project number on the project Home screen (Craft refers to this as the Project ID)
  5. In the sidebar go to APIs & Services > Credentials, click the + Create credentials button and choose the Service Account type
  • Set account name to craft-cms or similar
  • Set role to Owner
  • Save
  1. Click on the newly created service account email to edit it, then click the Keys tab and click Add key > Create new key and select the JSON format
mdunbavan / component.js
Created Oct 8, 2019 — forked from nathanlogan/component.js
Emulate URL anchor page scroll functionality in a React component
View component.js
import React, { Component } from 'react'
class MyTopLevelComponent extends Component {
componentDidMount () {
componentDidUpdate () {
View gist:e8754b3ab10ed2f0872b2bec4f89af2d
{% includejs %}
$('.postcode-form').submit(function(ev) {
// Prevent the form from actually submitting
var inputVal = $(this).find('input').val();
if(inputVal.length == 0 ){
mdunbavan / elementApi.php
Created Jun 20, 2019
Fi vue js load more
View elementApi.php
'api/reviews.json' => function() {
return [
'elementType' => Entry::class,
'elementsPerPage' => 3,
'pageParam' => 'pg',
'criteria' => ['section' => 'customerReviews'],
'transformer' => function(Entry $entry) {
$image = $entry->customerPhoto->one();
$userImage = Imgix::$plugin->imgixService->transformImage( $image, [ 'width' => 120 ], ['lossless' => 0,'auto' => 'compress','fm' => 'jpg','q' => 90,'lazyload' => true ]);
mdunbavan / payment.twig
Created Aug 20, 2018
Stripe element card payment page Craft commerce
View payment.twig
{% extends '_layout' %}
{% block content %}
{% include 'shop/_includes/meter' %}
<section class="container center-ns ph6-ns ph4">
<div class="flex-ns flex-wrap items-start justify-left">
<div class="w-100 tc mb4">
<h2 class="pa0 ma0 f2">Payment</h2>
View MainNav.vue
<div class="vh-100 nav-bar">
<nav role="main" class="w-100 tl">
<ul class="center pv5 ph5">
<li class="db v-mid mb3 text-gray">My Folders</li>
<li class="db v-mid mb3 text-gray">Shared with me</li>
<li class="db v-mid mb3 text-gray">From Canvas8</li>
<li class="db v-mid mb3 text-gray">Sent</li>
<li class="db v-mid mb3 text-gray">Archive</li>
View gist:499d398e92973200df903a23c5f6eda6
mdunbavan / webpack.mix.js
Created Nov 21, 2017 — forked from andrewdelprete/webpack.mix.js
Laravel Mix: Tailwind CSS + PurgeCSS Example
View webpack.mix.js
let mix = require("laravel-mix");
let tailwindcss = require("tailwindcss");
let glob = require("glob-all");
let PurgecssPlugin = require("purgecss-webpack-plugin");
* Custom PurgeCSS Extractor
mdunbavan / raw.js
Created Nov 20, 2017
Raw html from within script tag
View raw.js
{% raw %}
<script type="text/html" id="hit-template-inner">
<span class="hit bg Grid-fill product--hover db" style="background-image:url({{frontImage}});">
<div class="block db">
<div class="absolute top-1 left-1 share-hover link z-2">
<svg class="share-icon absolute" width="19" height="18">
<use class="no-barba" xmlns:xlink="" xlink:href="/dist/images/icons.svg#share_icon"></use>
<ul class="ma0 pa0 mb4 list share-list relative">
mdunbavan /
Created Jun 20, 2017 — forked from joyrexus/
Vanilla JS equivalents of jQuery methods

Sans jQuery


// jQuery
$(document).ready(function() {
  // code