scripts/make-example from thi-ng/umbrella

scripts/make-example
Summary

Maintainability

Test Coverage

Issues
#!/usr/bin/env bash

readonly MODULE="examples/$1"
readonly AUTHOR="Karsten Schmidt"
readonly EMAIL="k+npm@thi.ng"

echo "generating module: $MODULE"
mkdir -p "$MODULE"

echo "creating /src folder..."
mkdir -p "$MODULE"/src
cat << EOF > "$MODULE"/src/index.ts
import { div } from "@thi.ng/hiccup-html";
import { \$compile } from "@thi.ng/rdom";

\$compile(div({}, "hello")).mount(document.getElementById("app")!);
EOF

cat << EOF > "$MODULE"/src/vite-env.d.ts
/// <reference types="vite/client" />
EOF

cat << EOF > "$MODULE"/src/components.mcss
// put component specific thi.ng/meta-css style defs here...
// these will be included in the generated CSS via the \`css:build\`
// and \`css:watch\` script aliases in \`package.json\`
EOF

echo "creating /css folder..."
mkdir -p "$MODULE"/css
cat << EOF > "$MODULE"/css/style.mcss
// thi.ng/meta-css stylesheet
// see package readme for more details/usage
// use \`yarn css:build\` or \`yarn css:watch\` to transpile to CSS
// also see component-specific *.mcss files in /src folder

// (optional) variable declarations
:root {
    // color1=#fff
}

body { system-sans-serif ma3 }
EOF

cat << EOF > "$MODULE"/css/includes.txt
// list of CSS class names to force-include in generated CSS
// (one class per line, basic wildcards supported)
EOF

cat << EOF > "$MODULE"/css/custom.mcss.json
{
    "tables": {},
    "vars": {},
    "decls": [],
    "specs": [],
    "templates": []
}
EOF

echo "writing package.json..."
cat << EOF > "$MODULE"/package.json
{
    "name": "@example/$1",
    "version": "0.0.1",
    "private": true,
    "description": "TODO",
    "repository": "https://github.com/thi-ng/umbrella",
    "author": "$AUTHOR <$EMAIL>",
    "license": "Apache-2.0",
    "scripts": {
        "start": "yarn css:build && yarn start:only",
        "start:only": "vite --host --open",
        "css:watch": "../../node_modules/.bin/metacss develop --bundle --watch --pretty --out-specs css/framework.json --out-css css/style.css --force @css/includes.txt ../../packages/meta-css/specs/*.mcss.json css/*.mcss.json css/*.mcss src/*.mcss",
        "css:build": "../../node_modules/.bin/metacss develop --bundle --out-specs css/framework.json --out-css css/style.css --force @css/includes.txt ../../packages/meta-css/specs/*.mcss.json css/*.mcss.json css/*.mcss src/*.mcss",
        "build": "yarn css:build && tsc && vite build --base='./'",
        "preview": "vite preview --host --open"
    },
    "devDependencies": {
        "@thi.ng/meta-css": "workspace:^",
        "typescript": "^5.4.5",
        "vite": "^5.2.11"
    },
    "dependencies": {
        "@thi.ng/api": "workspace:^",
        "@thi.ng/hiccup-html": "workspace:^",
        "@thi.ng/rdom": "workspace:^"
    },
    "browser": {
        "process": false
    },
    "thi.ng": {
        "readme": false,
        "screenshot": "examples/$1.png"
    }
}
EOF

echo "writing tsconfig.json..."
cat << EOF > "$MODULE"/tsconfig.json
{
    "extends": "../tsconfig.json",
    "include": ["src/**/*"],
    "compilerOptions": {
    }
}
EOF

echo "writing vite.config.js..."
cat << EOF > "$MODULE"/vite.config.js
export default {
    build: { target: "esnext" },
};
EOF

echo "writing index.html..."
cat << EOF > "$MODULE"/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <link
        rel="icon"
        href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⛱️</text></svg>'
    />
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>$1 · @thi.ng/umbrella</title>
    <link href="/css/style.css" rel="stylesheet">
    <script>window.goatcounter = { path: (p) => location.host + p };</script>
    <script data-goatcounter="https://thing.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>
</head>
<body>
    <div id="app"></div>
    <div><a class="link" href="https://github.com/thi-ng/umbrella/tree/develop/examples/$1">Source code</a></div>
    <script type="module" src="/src/index.ts"></script>
</body>
</html>
EOF

echo "writing README.md..."
cat << EOF > "$MODULE"/README.md
# $1

![screenshot](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/$1.png)

[Live demo](http://demo.thi.ng/umbrella/$1/)

## Developing & building

Please refer to the instructions on the wiki:

- [Development](https://github.com/thi-ng/umbrella/wiki/Development-mode-for-examples-using-thi.ng-meta%E2%80%90css)
- [Production build](https://github.com/thi-ng/umbrella/wiki/Example-build-instructions)

## Authors

- $AUTHOR

## License

&copy; 2024 $AUTHOR // Apache Software License 2.0
EOF

echo "refreshing monorepo index..."
yarn install
echo "DONE"