linkdd/config.toml

## config.toml
baseURL = "https://example.com"
languageCode = "en-us"
title = "Example of Standard Web Component"

## content_example.md

      
    Raw
  

              content_example.md
            
          
  title
  star_wars
  
  
  Example of Standard Web Component
  Attack of the Clones
  
  
{{< star-wars >}}

  
## layouts_index.html
<!DOCTYPE html>
<html>
  <head>
    {{ partial "metadata.html" . }}
    {{ partial "css.html" . }}
    {{ partial "scripts.html" . }}
  </head>
  <body>
    {{ partial "templates.html" . }}

    {{ .Content }}
  </body>
</html>

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

## layouts_partials_css.html
<!-- Include CSS here -->

## layouts_partials_metadata.html
<meta charset="utf-8" />
<title>Hugo and Standard Web Components</title>

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

## layouts_partials_templates.html
{{ partial "components/star-wars.html" . }}
<!-- include other templates here -->

## layouts_shortcodes_star-wars.html
<star-wars />

## 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)
      }
    })
  }
}

## 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"
	<!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')
	}
	})