Skip to content

Instantly share code, notes, and snippets.

Avatar

Mark Dunbavan mdunbavan

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

Create the bucket

  1. Open the console https://console.cloud.google.com
  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
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 () {
this.scrollToHashId()
}
componentDidUpdate () {
this.scrollToHashId()
}
View gist:e8754b3ab10ed2f0872b2bec4f89af2d
{% includejs %}
$('.postcode-form').submit(function(ev) {
// Prevent the form from actually submitting
ev.preventDefault();
var inputVal = $(this).find('input').val();
if(inputVal.length == 0 ){
$(this).find('input').addClass('b--red');
@mdunbavan
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
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>
</div>
View MainNav.vue
<template>
<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
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
* https://github.com/FullHuman/purgecss
* https://github.com/FullHuman/purgecss-webpack-plugin
*/
@mdunbavan
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="http://www.w3.org/1999/xlink" xlink:href="/dist/images/icons.svg#share_icon"></use>
</svg>
<ul class="ma0 pa0 mb4 list share-list relative">
@mdunbavan
mdunbavan / README.md
Created Jun 20, 2017 — forked from joyrexus/README.md
Vanilla JS equivalents of jQuery methods
View README.md

Sans jQuery

Events

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