fix: make headers semantically correct

robertrosman · May 24, 2024 · 42e6b8a · 42e6b8a
1 parent 7bb37fe
commit 42e6b8a
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -4,10 +4,17 @@
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>vue-paint</title>
   </head>
   <body>
-    <div id="app"></div>
+    <div class="layout">
+      <h1>vue-paint</h1>
+      vue-paint is a simple and lightweight paint component for vue projects. It can be used to add annotations to images, videos, or just draw some simple shapes to a canvas-like area.
+
+      Please check out the <a href="https://www.npmjs.com/package/vue-paint">npm package readme</a> for more details on how to get up and running.
+
+      <div id="app"></div>
+    </div>
     <script type="module" src="/src/demo.ts"></script>
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -33,7 +33,7 @@ function save({ svg, tools, history }: SaveParameters) {
       <canvas ref="canvasRef"></canvas>
     </section>
   </div>
-  <h1>Barebones example</h1>
+  <h2>Barebones example</h2>
   <vp-editor @save="save" :tools></vp-editor>
 
   <WithBackground @save="save" />

diff --git a/src/assets/main.css b/src/assets/main.css
@@ -1,6 +1,14 @@
 @import './base.css';
 @import '../../public/lib/themes/default.css';
 
+#app {
+  margin-top: 10em;
+}
+
+a, a:hover, a:active, a:visited {
+  color: #c82d2d;
+}
+
 .layout {
   max-width: 1280px;
   margin: 0 auto;

diff --git a/src/examples/InteractiveHistory.vue b/src/examples/InteractiveHistory.vue
@@ -46,17 +46,12 @@ function addRandomLine() {
 </script>
 
 <template>
-  <h1>Interactive history</h1>
+  <h2>Interactive history</h2>
   <p>
     You can inspect and modify the history and settings objects down below to see it update
     automatically. This can of course be done programmatically as well.
   </p>
-  <vp-editor
-    @save="$emit('save', $event)"
-    v-model:settings="settings"
-    v-model:history="history"
-    :tools
-  />
+  <vp-editor @save="$emit('save', $event)" v-model:settings="settings" v-model:history="history" :tools />
   <button @click="addRandomLine">Add random line</button>
   <textarea v-model="historyJson"></textarea>
   <textarea v-model="settingsJson"></textarea>

diff --git a/src/examples/LessTools.vue b/src/examples/LessTools.vue
@@ -8,7 +8,7 @@ defineEmits(['save'])
 </script>
 
 <template>
-  <h1>With less tools</h1>
+  <h2>With less tools</h2>
   <p>The editor will only support the tools you provide it</p>
   <vp-editor @save="$emit('save', $event)" :tools></vp-editor>
 </template>
diff --git a/src/examples/PersistHistory.vue b/src/examples/PersistHistory.vue
@@ -19,15 +19,11 @@ defineEmits(['save'])
 </script>
 
 <template>
-  <h1>Persist history</h1>
+  <h2>Persist history</h2>
   <p>
     Using <code>v-model:history</code> you can set initial state, modify the state programmatically,
     add shapes, save current state (like in localStorage or on a server). Try to draw something and
     reload the page to see localStorage in action.
   </p>
-  <vp-editor
-    v-model:history="history"
-    @save="$emit('save', $event)"
-    :tools
-  ></vp-editor>
+  <vp-editor v-model:history="history" @save="$emit('save', $event)" :tools></vp-editor>
 </template>
diff --git a/src/examples/UsingEvents.vue b/src/examples/UsingEvents.vue
@@ -12,15 +12,10 @@ function logEvent(event: DrawEvent) {
 </script>
 
 <template>
-  <h1>Using events</h1>
+  <h2>Using events</h2>
   <p>
     You can hook into events that are emitted from the component. Watch the console while drawing to
     see it in action.
   </p>
-  <vp-editor
-    @save="$emit('save', $event)"
-    :tools
-    @draw-start="logEvent"
-    @draw-end="logEvent"
-  ></vp-editor>
+  <vp-editor @save="$emit('save', $event)" :tools @draw-start="logEvent" @draw-end="logEvent"></vp-editor>
 </template>
diff --git a/src/examples/WithBackground.vue b/src/examples/WithBackground.vue
@@ -8,7 +8,7 @@ defineEmits(['save'])
 </script>
 
 <template>
-  <h1>With background</h1>
+  <h2>With background</h2>
   <p>
     You can set a custom background with useBackground(), or pass a background to useAllTools().
   </p>