Skip to content

Instantly share code, notes, and snippets.


Kevin Weber kevinweber

View GitHub Profile
View buttongroup.xml
<alignment jcr:primaryType="nt:unstructured"
fieldLabel="Alignment of components"
<items jcr:primaryType="nt:unstructured">
<default jcr:primaryType="nt:unstructured"
kevinweber /
Last active Oct 13, 2020
Collection of AEM Links, Commands & Tips / Cheat Sheet

Web Consoles & Tools

kevinweber / encodeSvg.js
Created Oct 31, 2016
Helper: Convert React component (SVG element) to base64 encoded URL. Useful for adding a background image.
View encodeSvg.js
import ReactDOMServer from 'react-dom/server';
export function encodeSvg(reactElement) {
return 'data:image/svg+xml,' + escape(ReactDOMServer.renderToStaticMarkup((reactElement)));
View Lazy Load for Youtube (JS)
* Lazy Load for Youtube
* by Kevin Weber
var $lly = jQuery.noConflict();
$lly(document).ready(function() {
function doload_lly() {
kevinweber / example.html
Last active May 19, 2020
AEM: Include another resource + modify tag and class name #data-sly-resource
View example.html
<!--/* More: */-->
<!--/* By default, the AEM decoration tags are disabled, the decorationTagName option allows to bring them back, and the cssClassName to add classes to that element. */-->
<div data-sly-resource="${'headline' @
<!--/* More about the decoration tag: */-->
kevinweber / component.html
Last active Dec 30, 2019
HTL/Sightly: "Use and call template" pattern. Put template into separate file for reusability, and pass parameters when calling it. Note that in most cases it's not necessary to pass "properties" to the template because they work even if they're not passed explicitly.
View component.html
<sly data-sly-use.component="template.html"
data-sly-call="${component.template @ properties=properties}" />
kevinweber / .content.xml
Last active Nov 27, 2019
AEM: Add JavaScript (including events) to AEM loaded on editor.html. Solution: Create clientlib with category "cq.authoring.dialog". Exemplary usage: Reload page if layer changes.
View .content.xml
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="" xmlns:jcr=""
kevinweber / img
Last active Sep 19, 2019
1:1 (and other) ratio placeholder image / pixel / svg. Generate custom sizes via
View img
<!--/* This is a 1x1 sized PNG */-->
<img class="ratio" alt="" aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
<!--/* This is a 2x1 sized PNG */-->
<img class="ratio" alt="" aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAQAAABeK7cBAAAAC0lEQVR42mNkAAIAAAoAAv/lxKUAAAAASUVORK5CYII=">
<!--/* This is a 3x1 sized PNG */-->
<img class="ratio" alt="" aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAABCAQAAACx6dw/AAAAC0lEQVR42mNkAAMAAA4AAjOwv9wAAAAASUVORK5CYII=">
<!--/* This is a 4x3 sized PNG */-->
kevinweber / webpack.config.js
Last active Sep 13, 2019
AEM Front Webpack Plugin. Part of the AEM Front toolset. Learn more:
View webpack.config.js
const path = require('path');
const AEMFrontPlugin = require(path.join(__dirname, './webpack.plugin.aem-front.js'));
//... your Webpack configuration ...
plugins: [
new AEMFrontPlugin({
exclude: '**/webpack.module/**',
watchDir: './../'
kevinweber / curve-example.png
Last active Jun 6, 2019
d3.js: Custom curve with rounded steps. Based on d3.curveStep.
You can’t perform that action at this time.