2 - Build your basic plugin

Clone your AEM project from GitHub

In the tab where you have GitHub open: Code (green button) > Copy url to clipboard.

Paste the link into your terminal:

  • Terminal (bash)
git clone [email protected]:{ORG}/{SITE}.git

Start your local AEM server

  • Terminal (bash)
cd {SITE}
aem up

Write your HTML

Open your clone in your favorite code editor. We'll be making a few files.

  • /tools/tag-gen/tag-gen.html (markup)
<!DOCTYPE html>
<html>
  <head>
    <title>Tag Gen</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" href="data:,">
    <script type="importmap">
      { "imports": { "da-lit": "/deps/lit/dist/index.js" } }
    </script>
    <style>html { display: flex; } html, body { min-height: 100%; min-width: 100%; }</style>
    <!-- Import DA App SDK -->
    <script src="https://da.live/nx/utils/sdk.js" type="module"></script>
    <!-- Project App Logic -->
    <script src="/tools/tag-gen/tag-gen.js" type="module"></script>
  </head>
  <body>
  </body>
</html>

Write some JavaScript

When building plugins and applications, it's important to validate the basics before moving on to bigger pieces of functionality. Here we'll be writing a very basic console.log to ensure everything is wired up as we expect.

  • /tools/tag-gen/tag-gen.js (JavaScript)
import DA_SDK from 'https://da.live/nx/utils/sdk.js';

(async function init() {
  const { context, token } = await DA_SDK;
  const { org, repo, path } = context;

  console.log(org, repo, path, token);

  // const cmp = document.createElement('adl-tag-gen');
  // cmp.path = `/${org}/${repo}${path}`;
  // cmp.token = token;

  // document.body.append(cmp);
}());

Write a few styles

  • /tools/tag-gen/tag-gen.css (css)
:host {
  display: block;
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

svg {
  width: 20px;
  height: 20px;
}

ul {
  margin: 0 0 64px 0;
  padding: 0 20px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  li {
    background: #efefef;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 14px;
  }
}

.title {
  margin: 0 0 6px 0;
  padding: 6px 20px;
  font-weight: 700;

  &.generated {
    background-image: linear-gradient(95.85deg, #b539c8 0%, #7155fa 66%, #3b63fb 100%);
    color: transparent;
    background-clip: text;
    color: transparent;
  }
}

.action-area {
  display: flex;
  justify-content: end;
  padding: 12px 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgb(255 255 255 / 60%);
  border-top: 1px solid rgb(222 222 222);

  .btn-gradient {
    display: flex;
    justify-content: center;
    min-width: 34px;
    gap: 6px;
    padding: 5px 16px 5px 14px;
    line-height: 18px;
    font-size: 14px;
    color: #fff;
    background-image: linear-gradient(95.85deg, #b539c8 0%, #7155fa 66%, #3b63fb 100%);
    border: 2px solid transparent;
    font-family: var(--font-family);
    border-radius: 18px;
    outline-color: var(--s2-blue-900);
    outline-offset: 0;
    transition: outline-offset 0.2s;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    background-origin: border-box;

    &:focus-visible {
      outline-offset: 4px;
    }
  }
}

.status-container {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 20px;
  height: 90%;
  animation: fadeInOut 2s ease-in-out infinite;

  svg {
    width: 40px;
    height: 40px;
    display: block;

    use {
      transform: scale(2);
    }
  }

  .status {
    width: 100%;
    text-align: center;
    margin: 0;
  }
}

@keyframes fadeInOut {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

Make available to your project

You will update your site config to make your plugin available to your users.

  1. Open a tab with your site - http://da.live/#/{ORG}/{SITE} - tip: use the existing da.live tab you have open.
  2. Open settings - the icon in the breadcrumb.
  3. Add to your library tab - Add the table row below. If there's not a library tab in your config, make sure to create one and add the appropriate table headers. If you have a library tab, be sure to ensure you also have a ref header for the last column.
  4. Save it - Paper plane > Save
title path format icon experience ref
Generate Tags (local) http://localhost:3000/tools/tag-gen/tag-gen.html local

Test it

  1. Visit: http://da.live/edit?ref=local#/{ORG}/{SITE}/index
    Note: the query param should match the "ref" property above. This allows us to show the plugin using this flag. It also tells DA to load your plugin from https://localhost:3000
  2. Open Library from the edit menu.
  3. Open your "Generate Tags (local)" plugin

You should see a console.log with some basic details about your page.

Troubleshooting

  1. I cannot see the plugin - Make sure ?ref=local is added between edit and #/{ORG}/{SITE}.
  2. I have an error that "context" is undefined - Disable any browser extensions that manipulate headers - ModHeaders, Requestly, etc. They interfere with the secure PostMessage API DA's SDK uses.
  3. My library does not open - Check to see if you're using the Grammarly extension. Disable it.
  4. I see undefined for my token - This would imply you are not logged into DA. This lab does not require logging in.

Success!

Let's make something a little more interesting.