Skip to content

Instantly share code, notes, and snippets.

Avatar

Drew McLellan drewm

View GitHub Profile
@drewm
drewm / shoot-sharing-image.js
Last active Apr 30, 2021
Dynamic Social Sharing Images
View shoot-sharing-image.js
const puppeteer = require('puppeteer');
const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');
// Get the URL and the slug segment from it
const url = process.argv[2];
const segments = url.split('/');
const slug = segments[segments.length-2];
(async () => {
@drewm
drewm / ExternalLinkRenderer.php
Created May 9, 2018
Adding rel="noopener" to PHP CommonMark
View ExternalLinkRenderer.php
<?php
namespace Notist\Extensions;
use League\CommonMark\ElementRendererInterface;
use League\CommonMark\HtmlElement;
use League\CommonMark\Inline\Element\AbstractInline;
use League\CommonMark\Inline\Element\Link;
use League\CommonMark\Inline\Renderer\InlineRendererInterface;
@drewm
drewm / mixed_article.html
Created Feb 10, 2015
Perch 2.8 Blocks template example
View mixed_article.html
<perch:blocks>
<perch:before>
<div class="row">
<div class="col-md-6 col-md-offset-3">
</perch:before>
<perch:block type="text" label="Text">
<perch:content id="text" type="textarea" markdown="true" editor="markitup" size="s" label="Text" />
</perch:block>
@drewm
drewm / flickr.css
Last active Dec 22, 2015
My custom styles for bringing a bit of calm and order to the latest Flickr design.
View flickr.css
#eyebrow {
display: none;
}
#photo {
background-color: #333 !important;
}
body.with-eyebrow #global-nav {
top: 0 !important;
}
body.with-eyebrow {
@drewm
drewm / archive.php
Created Mar 14, 2013
Simple Perch Blog archive list. Template files go in perch/templates/blog/
View archive.php
<?php
perch_blog_date_archive_months('years.html', 'months.html');
?>
@drewm
drewm / gist:3848748
Created Oct 7, 2012
Perch CMS template for <picture> element (based on example from HTML5 Doctor)
View gist:3848748
<picture alt="<perch:content type="text" id="alt" label="Alt" />">
<source src="<perch:content type="image" id="image" label="Image" width="800" />" media="min-width:800px">
<source src="<perch:content type="image" id="image" label="Image" width="480" />" media="min-width:480px">
<source src="<perch:content type="image" id="image" label="Image" width="200" />">
<img src="<perch:content type="image" id="image" label="Image" width="480" />" alt="<perch:content type="text" id="alt" label="Alt" />">
</picture>
@drewm
drewm / slow_image_loader.php
Created Dec 13, 2010
Artificially delay the loading of images to simulate a slow connection
View slow_image_loader.php
<?php
/*
Artificially delay the loading of images to simulate a slow connection
<img src="/slow_image_loader.php?img=realimage.jpg" />
*/
$image = $_GET['img'];
// delay between 1 and 3 seconds
usleep(rand(1000000,3000000));