lit-html workshop

workshop-notes.md

https://www.hlidacshopu.cz/app/

https://github.com/topmonks/topmonks-webs/blob/master/www.hlidacshopu.cz/src/html/app/index.html

Actually, we will use one handy tool ;)

npm i -D browsersync

Bootstrap your code

<!-- Required styles for MDC Web -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">

<!-- Required MDC Web JavaScript library -->
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>

<div id="app"></div>

<script type="module">
  import { html, svg, render } from "https://unpkg.com/lit-html@1.1.1/lit-html.js?module";
  const root = document.getElemntByID("app");
  const apiUrl = detailUri => `https://api.hlidacshopu.cz/shop?url=${encodeURIComponent(detailUri)}&metadata=1`;
  
</script>