Florian Schulz getflourish

## Import CustomElements from .html files.md

      
              4 files
            
          
              2 forks
            
          
              14 comments
            
          
              13 stars
            
          
                getflourish
                / Import CustomElements from .html files.md
            
            
              Last active
              February 22, 2024 08:50
            
              
                Import CustomElements from .html files
              
          
    Import CustomElements from .html files

This is the technical implementation of the idea and concept described in my article “Why don’t we use HTML to author web components?”
Instead of using template literals, constructors and other specifics to define CustomElements, this is a proposal to just use standard HTML to define CustomElements.
The goal is to import CustomElements like this:


## ContentView.swift
import SwiftUI

@available(OSX 11.0, *)

struct ContentView: View {

  private var url: URL? = URL(string: "https://apple.com")

  init() {
    print("Hello World")

## index.html
<body>
  <nav class="feed-list">
    <h2>Typographic Reader</h2>
    <ul>
      <li>css-tricks</li>
      <li>A list apart</li>
    </ul>
  </nav>
  <nav class="article-list">
    <article>

## README.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                getflourish
                / README.md
            
            
              Last active
              February 13, 2020 09:36
            
              
                CSV to Files
              
          
Copy the script to the folder containing the CSV file
Name the CSV input.csv or change the source file in the script
Open Terminal and enter cd yourDirectory
In Terminal, enter bash script.sh
Files should be saved in the same folder


## content-format.json
{
    "collections": {
        "projects": {
            "projects/english-project-a": {
                "id": "123",
                "lang": "en",
                "slug": "english-project-a",
                "order": "2019-10-01",
                "data": {
                    "title": "English Title",

## variables.css
:root{
  --box-shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
--box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--box-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
--box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--box-shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);
--box-shadow-none: none;
--background-100: #f7fafc;

## Catalina.json
{
    "_class": "page",
    "do_objectID": "952CA225-6E03-4CE8-A7A6-4FB85B3686C0",
    "booleanOperation": -1,
    "exportOptions": {
        "_class": "exportOptions",
        "exportFormats": [],
        "includedLayerIds": [],
        "layerOptions": 0,
        "shouldTrim": false

## imagetracerjs.config.js
config: {
  ltres: 1,
  qtres: 1,
  pathomit: 20,
  rightangleenhance: true,
  colorsampling: 0,
  numberofcolors: 3,
  mincolorratio: 0,
  colorquantcycles: 3,
  blurradius: 3,

## .block
license: mit

## gist:d0d20ed9df5f89029cc22d8cfa08b691
setBusyIndicator(LED1);

setWatch(function(e) {
//  Bluetooth.println(Puck.light());
    Bluetooth.println("button down");
}, BTN, { repeat:true, edge:'rising' });

setWatch(function(e) {
  Bluetooth.println("button up");
}, BTN, { repeat:true, edge:'falling' });
	import SwiftUI

	@available(OSX 11.0, *)

	struct ContentView: View {

	private var url: URL? = URL(string: "https://apple.com")

	init() {
	print("Hello World")
	<body>
	<nav class="feed-list">
	<h2>Typographic Reader</h2>
	<ul>
	<li>css-tricks</li>
	<li>A list apart</li>
	</ul>
	</nav>
	<nav class="article-list">
	<article>
	{
	"collections": {
	"projects": {
	"projects/english-project-a": {
	"id": "123",
	"lang": "en",
	"slug": "english-project-a",
	"order": "2019-10-01",
	"data": {
	"title": "English Title",
	:root{
	--box-shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--box-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--box-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--box-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--box-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--box-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
	--box-shadow-outline: 0 0 0 3px rgba(66, 153, 225, 0.5);
	--box-shadow-none: none;
	--background-100: #f7fafc;
	{
	"_class": "page",
	"do_objectID": "952CA225-6E03-4CE8-A7A6-4FB85B3686C0",
	"booleanOperation": -1,
	"exportOptions": {
	"_class": "exportOptions",
	"exportFormats": [],
	"includedLayerIds": [],
	"layerOptions": 0,
	"shouldTrim": false
	config: {
	ltres: 1,
	qtres: 1,
	pathomit: 20,
	rightangleenhance: true,
	colorsampling: 0,
	numberofcolors: 3,
	mincolorratio: 0,
	colorquantcycles: 3,
	blurradius: 3,
	setBusyIndicator(LED1);

	setWatch(function(e) {
	// Bluetooth.println(Puck.light());
	Bluetooth.println("button down");
	}, BTN, { repeat:true, edge:'rising' });

	setWatch(function(e) {
	Bluetooth.println("button up");
	}, BTN, { repeat:true, edge:'falling' });