Consolidate aside implementation & add tip type

data/i18n/aside.yml

@@ -0,0 +1,121 @@
+note:
+  en: Note
+  es: Nota
+  ja: メモ
+  ko: 메모
+  pt: Observação
+  ru: Примечание
+  zh: 注意
+
+caution:
+  en: Caution
+  es: Precaución
+  ja: 注意
+  ko: 주의
+  pt: Cuidado
+  ru: Внимание
+  zh: 小心
+
+warning:
+  en: Warning
+  es: Advertencia
+  ja: 警告
+  ko: 경고
+  pt: Aviso
+  ru: Предупреждение
+  zh: 警告
+
+success:
+  en: Success
+  es: Éxito
+  ja: 成功
+  ko: 성공
+  pt: Sucesso
+  ru: Успех
+  zh: 成功
+
+objective:
+  en: Objective
+  es: Objetivo
+  ja: 目的
+  ko: 목적
+  pt: Objetivo
+  ru: Цель
+  zh: 目标
+
+try_it:
+  en: Try it
+  es: Pruebelo
+  ja: お試しください
+  ko: 시도하기
+  pt: Experimente
+  ru: Попробуйте
+  zh: 请尝试
+
+gotchas:
+  en: Gotchas
+  es: Gotchas
+  ja: 問題の原因
+  ko: 갓차
+  pt: Pegadinhas
+  ru: Обратите внимание
+  zh: 问题
+
+celebration:
+  en: Celebration
+  es: Celebración
+  ja: お祝い
+  ko: 축하
+  pt: Celebração
+  ru: праздник
+  zh: 庆典
+
+important:
+  en: Important
+  es: Importante
+  ja: 重要
+  ko: 중요한
+  pt: Importante
+  ru: Важный
+  zh: 重要的
+
+update:
+  en: Update
+  es: Actualizar
+  ja: 更新
+  ko: 업데이트
+  pt: Atualizar
+  ru: Обновлять
+  zh: 更新
+
+close:
+  en: Close
+  es: Cerrar
+  ja: 閉じる
+  ko: 닫기
+  pt: Fechar
+  ru: Закрыть
+  zh: 关闭
+
+
+updated:
+  en: Updated
+  es: Actualizado
+  ja: 更新済み
+  ko: 업데이트됨
+  pt: Atualizado
+  ru: Обновлено
+  zh: 更新日期
+
+tip:
+  en: tip
+  es: consejo
+  ja: 端っこ
+  ko: 팁
+  pt: dica
+  ru: совет
+  zh: 尖端
+
+key_term:
+  en: 'Key Term'
+  es: 'Término Clave'

shortcodes/Aside/index.js

@@ -0,0 +1,165 @@
+/* global __basedir */
+
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const {html} = require('common-tags');
+const fs = require('fs');
+// We need html: true since folks embed HTML inside of {% Aside %}.
+// See https://markdown-it.github.io/markdown-it/#MarkdownIt.new
+const md = require('markdown-it')({html: true});
+const path = require('path');
+const {I18nFilter} = require('../../filters/i18n');
+
+function getLocaleFromPath(path) {
+  return path ? path.split('/')[1] : defaultLocale;
+}
+
+const defaultLocale = 'en';
+
+const i18n = new I18nFilter().configure({
+  defaultLocale,
+  dictPaths: [path.join(__dirname, '..', '_data', 'i18n')],
+});
+
+/**
+ * @this {EleventyPage}
+ */
+function Aside(content, type = 'note') {
+  const locale = getLocaleFromPath(this.page && this.page.filePathStem);
+
+  // CSS utility classes that vary per aside type
+  const utilities = {
+    main: '',
+    title: '',
+    icon: '',
+    body: '',
+  };
+
+  // These two get populated based on type
+  let title = '';
+  let icon = '';
+
+  // If an icon is required, it grabs the SVG source with fs
+  // because in a shortcode, we have no access to includes etc
+  const getIcon = () => {
+    if (!icon.length) {
+      return '';
+    }
+
+    return fs.readFileSync(
+        path.join(__dirname, 'icons', icon),
+        'utf8',
+    );
+  };
+
+  // Generate all the configurations per aside type
+  switch (type) {
+    case 'note':
+    default:
+      utilities.title = 'color-state-info-text';
+      utilities.main = 'bg-state-info-bg color-state-info-text';
+      break;
+
+    case 'caution':
+      utilities.title = 'color-state-bad-text';
+      utilities.main = 'bg-state-bad-bg color-state-bad-text';
+      icon = 'error.svg';
+      title = i18n(`i18n.aside.${type}`, locale);
+      break;
+
+    case 'warning':
+      utilities.icon = 'color-state-warn-text';
+      utilities.main = 'bg-state-warn-bg color-state-warn-text';
+      icon = 'warning.svg';
+      title = i18n(`i18n.aside.${type}`, locale);
+      break;
+
+    case 'success':
+      utilities.main = 'bg-state-good-bg color-state-good-text';
+      icon = 'done.svg';
+      title = i18n(`i18n.aside.${type}`, locale);
+      break;
+
+    case 'objective':
+      utilities.main = 'bg-state-good-bg color-state-good-text';
+      icon = 'done.svg';
+      title = i18n(`i18n.aside.${type}`, locale);
+      break;
+
+    case 'gotchas':
+      icon = 'lightbulb.svg';
+      title = i18n(`i18n.aside.gotchas`, locale);
+      utilities.main = 'bg-tertiary-box-bg color-tertiary-box-text';
+      break;
+
+    case 'important':
+      icon = 'lightbulb.svg';
+      title = i18n(`i18n.aside.important`, locale);
+      utilities.main = 'bg-tertiary-box-bg color-tertiary-box-text';
+      break;
+
+    case 'key-term':
+      icon = 'highlighter.svg';
+      title = i18n(`i18n.aside.key_term`, locale);
+      utilities.main = 'color-secondary-box-text bg-secondary-box-bg';
+      break;
+
+    case 'codelab':
+      icon = 'code.svg';
+      title = i18n(`i18n.aside.try_it`, locale);
+      utilities.main = 'bg-quaternary-box-bg color-quaternary-box-text';
+      break;
+
+    case 'celebration':
+      utilities.main = 'bg-state-good-bg color-state-good-text';
+      icon = 'celebration.svg';
+      title = i18n(`i18n.aside.${type}`, locale);
+      break;
+
+    case 'update':
+      icon = 'update.svg';
+      title = i18n(`i18n.aside.${type}`, locale);
+      utilities.main = 'bg-state-update-bg color-state-update-text';
+      break;
+
+    case 'tip':
+      icon = 'lightbulb.svg';
+      title = i18n(`i18n.aside.${type}`, locale);
+      utilities.main = 'bg-state-good-bg color-state-good-text';
+      break;
+  }
+
+  // Make sure that we don't insert multiple newlines when this component is
+  // used, as it can break the parent Markdown rendering.
+  // See https://github.com/GoogleChrome/web.dev/issues/7640
+  const renderedContent = md.renderInline(content);
+  const titleHTML = title.length
+      ? `<p class="cluster ${utilities.title}">` +
+      `<span class="aside__icon box-block ${
+          utilities.icon
+      }">${getIcon()}</span>` +
+      `<strong>${title}</strong></p>`
+      : '';
+  const asideHTML =
+      `<aside class="aside aside--${type} flow ${utilities.main}">` +
+      titleHTML +
+      `<div class="${utilities.body} flow">${renderedContent}</div></aside>`;
+
+  return html`${asideHTML}`;
+}
+
+module.exports = Aside;