kevinweber

import ReactDOMServer from 'react-dom/server';

export function encodeSvg(reactElement) {
  return 'data:image/svg+xml,' + escape(ReactDOMServer.renderToStaticMarkup((reactElement)));
}

kevinweber

<!--/* We can define a list within a Sightly template to avoid redundant code */-->

<sly data-sly-test.versions="${['desktop', 'mobile']}"/>

<sly data-sly-list.identifier="${versions}">
  <div class="element ${identifier}">Repeated content</div>
</sly>

kevinweber

<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

<!--/* 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 */-->

kevinweber

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
          xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
          jcr:primaryType="nt:unstructured">
    <content jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <basic jcr:primaryType="nt:unstructured">
                <items jcr:primaryType="nt:unstructured">
                    <column jcr:primaryType="nt:unstructured">

kevinweber

<sly data-sly-use.component="template.html"
    data-sly-call="${component.template @ properties=properties}" />

kevinweber

<?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

/**
 * Poll function
 * based on https://davidwalsh.name/essential-javascript-functions
 */
 
function poll(fn, callback, errback, timeout, interval) {
  var endTime = Number(new Date()) + (timeout || 2000);
  interval = interval || 100;
  
  (function p() {

kevinweber

Web Consoles & Tools

• Clientlibs
  • Find/see all ClientLibs: http://localhost:4502/libs/granite/ui/content/dumplibs.html
  • See the expected HTML output of clientlib includes based on category: http://localhost:4502/libs/granite/ui/content/dumplibs.test.html
  • Highlights any dependencies or embedded categories that cannot be found: http://localhost:4502/libs/granite/ui/content/dumplibs.validate.html
  • Force AEM to rebuild ClientLibs via this url: http://localhost:4502/libs/granite/ui/content/dumplibs.rebuild.html
• CRX: /crx/explorer/index.jsp
• Link Checker – find broken links: http://localhost:4502/etc/linkchecker.html
• QueryBuilder: https://docs.adobe.com/docs/en/aem/6-3/develop/search/querybuilder-api.html

kevinweber

<!--/* 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 */-->