Quick static site template

I've been trying to figure out minimal ways to try out ideas. Basically an easy way to throw up some code on the browser to test out what is possible without going through a whole thing. Right now I'm settling on vite and unocss, which just lets you start going with one HTML file and slowly be able to put stuff on it.

This lets me add npm packages, see if I can get something working or not, and leave it at that. I'll record my notes somewhere, but the code and the node_modules thankfully disappear into the aether afterwards.

Plan

This is script I use to boilerplate things:

Create a new temp directory
Install vite and unocss
Setup the dev and build actions
Setup unocss.config.js so I can play with fonts
Mock out a simple HTML file

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
  #!/bin/bash

  cd $(mktemp -d)
  echo We are now working in $(pwd)

  echo Installing vite and unocss
  npm i vite unocss

  echo Setting up .gitignore
  echo node_modules/ >> .gitignore

  echo Adding scripts to package.json
  mv package.json _package.json
  cat > scripts.json <<SCRIPTEOF
  {
    "scripts": {
      "dev": "unocss \"**/*.html\" -o main.css --watch & vite",
      "build": "unocss \"**/*.html\" -o main.css && vite build"
    }
  }
  SCRIPTEOF
  jq '. + input' scripts.json _package.json > package.json
  rm scripts.json _package.json

  echo unocss.config
  cat > unocss.config.js <<UNOEOF
  // uno.config.ts
  import {
      defineConfig,
      presetAttributify,
      presetTypography,
      presetUno
  } from 'unocss'

  import presetWebFonts from '@unocss/preset-web-fonts';

  const fonts = presetWebFonts({
      provider: 'google', // default provider
      fonts: {
          header: [ {
              name: "Montserrat",
              weights: ['400', '700']
          } ],
          sans: [ { name: 'Inter' } ]
      }
  })

  export default defineConfig({
    presets: [
        presetAttributify(), // required when using attributify mode
        presetUno(), // required
        presetTypography(),
        fonts,
    ],
  })
  UNOEOF

  echo main.js
  cat > main.js <<MAINEOF
  import '@unocss/reset/tailwind.css';
  import './main.css';
  MAINEOF

  echo index.html
  cat > index.html <<INDEXEOF
  <html>
    <head>
      <title>Hello</title>
      <script src="main.js" type="module"></script>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body >
      <div max-w-prose mx-auto prose>
        <h1 font-header text-4xl font-bold>Hello world</h1>

        <p font-sans>This is my text, and I really like it</p>
      </div>
    </body>
  </html>
  INDEXEOF

  pwd

Example: Adding `shoelace`

Run the script, and then in the generated directory:

1
  npm install @shoelace-style/shoelace

Add in main.js:

1
2
  import '@shoelace-style/shoelace/dist/themes/light.css';
  import '@shoelace-style/shoelace/dist/shoelace.js';

And then start using the web components inside of your html file.

1
  <sl-qr-code value="https://willschenk.com/" radius="0.5"></sl-qr-code>

Quick static site template

Rapid and disposable prototyping

Contents

Plan

Code

Example: Adding `shoelace`

References

Making a web component by scratch

progressive enhancement

My physical relationship to the internet

Contents

Plan

Code

Example: Adding shoelace

References

Making a web component by scratch

progressive enhancement

My physical relationship to the internet

Example: Adding `shoelace`