linkdd · March 17, 2021 13:32
diff --git a/config.toml b/config.toml
 baseURL = "https://example.com"
 languageCode = "en-us"
 title = "Example of Standard Web Component"
diff --git a/content_example.md b/content_example.md
diff --git a/layouts_index.html b/layouts_index.html
 <!DOCTYPE html>
 <html>
  <head>
    {{ partial "metadata.html" . }}
    {{ partial "css.html" . }}
    {{ partial "scripts.html" . }}
  </head>
  <body>
    {{ partial "templates.html" . }}

    {{ .Content }}
  </body>
 </html>
diff --git a/layouts_partials_components_star-wars.html b/layouts_partials_components_star-wars.html
 <template id="star-wars-tmpl">
  <h1>{{ .Params.star_wars }}</h1>
  <p class="obiwan"></p>
  <p class="grievous"></p>
 </template>

 <script
  type="application/javascript"
  src="/js/components/star-wars.js">
 </script>
diff --git a/layouts_partials_css.html b/layouts_partials_css.html
 <!-- Include CSS here -->
diff --git a/layouts_partials_metadata.html b/layouts_partials_metadata.html
 <meta charset="utf-8" />
 <title>Hugo and Standard Web Components</title>
diff --git a/layouts_partials_scripts.html b/layouts_partials_scripts.html
 <script
  type="application/javascript"
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous">
 </script>

 <script
  type="application/javascript"
  src="/js/components/index.js">
 </script>
diff --git a/layouts_partials_templates.html b/layouts_partials_templates.html
 {{ partial "components/star-wars.html" . }}
 <!-- include other templates here -->
diff --git a/layouts_shortcodes_star-wars.html b/layouts_shortcodes_star-wars.html
 <star-wars />
diff --git a/static_js_components_index.js b/static_js_components_index.js
 window.BaseWebComponent = {
  extends({ tag, template, render }) {
    customElements.define(tag, class extends HTMLElement {
      connectedCallback() {
        const fragment = document.getElementById(template)
        const node = document.importNode(fragment.content, true)

        const instance = $('<div/>')
        instance.append(node)
        render(instance)
        $(this).append(instance)
      }
    })
  }
 }
diff --git a/static_js_components_star-wars.js b/static_js_components_star-wars.js
 BaseWebComponent.extends({
  tag: 'star-wars',
  template: 'star-wars-tmpl',
  render(instance) {
    instance.find('.obiwan').text('hello there')
 	  instance.find('.grievous').text('general kenobi')
  }
 })
	baseURL = "https://example.com"
	languageCode = "en-us"
	title = "Example of Standard Web Component"
title	Example of Standard Web Component
star_wars	Attack of the Clones
	<!DOCTYPE html>
	<html>
	<head>
	{{ partial "metadata.html" . }}
	{{ partial "css.html" . }}
	{{ partial "scripts.html" . }}
	</head>
	<body>
	{{ partial "templates.html" . }}

	{{ .Content }}
	</body>
	</html>
	<template id="star-wars-tmpl">
	<h1>{{ .Params.star_wars }}</h1>
	<p class="obiwan"></p>
	<p class="grievous"></p>
	</template>

	<script
	type="application/javascript"
	src="/js/components/star-wars.js">
	</script>
	<meta charset="utf-8" />
	<title>Hugo and Standard Web Components</title>
	<script
	type="application/javascript"
	src="https://code.jquery.com/jquery-3.6.0.min.js"
	integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
	crossorigin="anonymous">
	</script>

	<script
	type="application/javascript"
	src="/js/components/index.js">
	</script>
	{{ partial "components/star-wars.html" . }}
	<!-- include other templates here -->
	window.BaseWebComponent = {
	extends({ tag, template, render }) {
	customElements.define(tag, class extends HTMLElement {
	connectedCallback() {
	const fragment = document.getElementById(template)
	const node = document.importNode(fragment.content, true)

	const instance = $('<div/>')
	instance.append(node)
	render(instance)
	$(this).append(instance)
	}
	})
	}
	}
	BaseWebComponent.extends({
	tag: 'star-wars',
	template: 'star-wars-tmpl',
	render(instance) {
	instance.find('.obiwan').text('hello there')
	instance.find('.grievous').text('general kenobi')
	}
	})