Skip to content

Instantly share code, notes, and snippets.

Kevin Weber kevinweber

View GitHub Profile
@kevinweber
kevinweber / built-in-tools.md
Last active Jun 17, 2020
Collection of AEM Links, Commands & Tips / Cheat Sheet
View built-in-tools.md

Web Consoles & Tools

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
kevinweber / example.html
Last active May 19, 2020
AEM: Include another resource + modify tag and class name #data-sly-resource
View example.html
<!--/* More: https://docs.adobe.com/docs/en/htl/docs/block-statements.html#resource */-->
<!--/* 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' @
resourceType='about-project/components/content/c34-section-headline',
decorationTagName='span',
cssClassName='className'
}"></div>
<!--/* More about the decoration tag: https://docs.adobe.com/docs/en/aem/6-3/develop/components/decoration-tag.html */-->
View buttongroup.xml
<alignment jcr:primaryType="nt:unstructured"
name="./alignChildren"
fieldLabel="Alignment of components"
required="{Boolean}true"
selectionMode="single"
sling:resourceType="granite/ui/components/coral/foundation/form/buttongroup">
<items jcr:primaryType="nt:unstructured">
<default jcr:primaryType="nt:unstructured"
name="./default"
@kevinweber
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)));
}
@kevinweber
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
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="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:ClientLibraryFolder"
categories="[cq.authoring.dialog]"/>
@kevinweber
kevinweber / img
Last active Sep 19, 2019
1:1 (and other) ratio placeholder image / pixel / svg. Generate custom sizes via http://png-pixel.com/
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
kevinweber / webpack.config.js
Last active Sep 13, 2019
AEM Front Webpack Plugin. Part of the AEM Front toolset. Learn more: https://kevinw.de/aem-front/
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
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.