hyperserve refactor

.gitignore

@@ -6,27 +6,26 @@
 
 !app.html
 !deno.json
+!deno.jsonc
 !mod.ts
 !README.md
-!tsconfig.json
 
 # Svelte components
 !components
 components/**/*.*
-!components/**/*.svelte
+!components/**/*.html
 
 # DinoSsr routes
 !routes
 routes/**/*.*
-!routes/**/*.svelte
+!routes/**/*.html
 !routes/**/*.ts
 
 # Source files
 !src
 src/**/*.*
 !src/*.ts
 !src/css/**/*.css
-!src/scripts/*.ts
 
 # Test files
 !test

README.md

@@ -1,7 +1,5 @@
 # [dbushell.com](https://dbushell.com)
 
-[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://dbushell.com/tip/)
-
 ![David Bushell](/public/assets/images/dbushell-poster.svg)
 
 * * *

components/my-app.html

@@ -0,0 +1,41 @@
+<script context="component">
+  let href = props.href ?? '/';
+  let shortTitle = props.title ?? siteTitle;
+  let pageDescription = props.description ?? shortTitle;
+  let longTitle = siteTitle;
+  if (props.title) {
+    longTitle = `${props.title} – ${longTitle}`;
+  }
+</script>
+
+<ssr-fragment portal="head">
+  <title>{{longTitle}}</title>
+  <link rel="canonical" href="https://dbushell.com{{href}}" />
+  <meta name="author" content="David Bushell" />
+  <meta name="description" content="{{pageDescription}}" />
+  <meta property="og:title" content="{{shortTitle}}" />
+  <meta property="og:url" content="https://dbushell.com{{href}}" />
+  <meta property="og:description" content="{{pageDescription}}" />
+  <meta property="og:image" content="https://dbushell.com/assets/icons/512x512.png" />
+  <meta property="og:site_name" content="dbushell.com" />
+  <meta name="fediverse:creator" content="@[email protected]" />
+  <script type="module" src="/assets/scripts/head.js?v={{deployHash}}"></script>
+</ssr-fragment>
+
+<div class="Layout">
+  <ssr-cache name="masthead">
+    <my-masthead />
+  </ssr-cache>
+  <main class="Main">
+    <ssr-slot name="main" />
+  </main>
+  <ssr-slot name="aside">
+    <ssr-cache name="aside">
+      <my-aside articles="{{props.latest}}" />
+    </ssr-cache>
+  </ssr-slot>
+</div>
+<ssr-cache name="footer">
+  <my-lightbulb />
+  <my-footer />
+</ssr-cache>

components/my-article.html

@@ -0,0 +1,15 @@
+<script context="component">
+  const {href, title, excerpt} = article;
+</script>
+
+<article class="Article">
+  <ssr-element tag="{{$local.heading ?? 'h2'}}" class="Star">
+    <a href="{{href}}"><ssr-html>{{title}}</ssr-html></a>
+  </ssr-element>
+  <ssr-if condition="article.date">
+    <p><my-time date="{{article.date}}" /></p>
+  </ssr-if>
+  <ssr-if condition="excerpt">
+    <p><ssr-html>{{excerpt}}</ssr-html></p>
+  </ssr-if>
+</article>

components/my-aside.html

@@ -0,0 +1,40 @@
+<div class="Aside">
+  <my-rule hidden />
+  <aside class="Featured">
+    <my-card href="/" title="David Bushell" heading="h2">
+      <my-bio />
+      <my-social />
+    </my-card>
+    <my-card href="/now/" title="My Projects" subtitle="New and old!">
+      <p>
+        Read my <a href="/notes/">microblog</a>, see what I’m <a href="/now/">coding now</a>
+        and my <a href="/showcase/">design portfolio</a>.
+      </p>
+    </my-card>
+    <my-card href="/working-with-agencies/" title="Web Agencies" subtitle="Need a hand?">
+      <p>
+        I’m reliable, flexible, and pride myself in communication and initiative to delivery on time
+        and within budget.
+      </p>
+    </my-card>
+    <my-card href="/working-with-clients/" title="Businesses" subtitle="Have an idea?">
+      <p>
+        Let’s discuss your requirements, share ideas, and figure out what’s best for your new
+        website together.
+      </p>
+    </my-card>
+    <my-rule />
+    <ssr-if condition="articles.length">
+      <my-card title="The Blog" href="/blog/">
+        <p class="Balance">I write about web design and development.</p>
+        <ul class="List">
+          <ssr-for item="item" of="articles">
+            <li>
+              <a href="{{item.href}}"><ssr-html>{{item.title}}</ssr-html></a>
+            </li>
+          </ssr-for>
+        </ul>
+      </my-card>
+    </ssr-if>
+  </aside>
+</div>

components/my-button.html

@@ -0,0 +1,3 @@
+<a class="Button" href="{{href}}">
+  <ssr-slot />
+</a>

components/my-card.html

@@ -0,0 +1,22 @@
+<script context="component">
+  const tag = typeof heading === 'undefined' ? 'h3': heading;
+  const sub = typeof subtitle === 'undefined' ? false : true;
+</script>
+
+<article class="Card">
+  <ssr-element tag="{{tag}}">
+    <span class="Star">
+      <ssr-if condition="href">
+        <a href="{{href}}">{{title}}</a>
+        <ssr-else>
+        {{title}}
+      </ssr-if>
+    </span>
+    <ssr-if condition="sub">
+      <span class="Cursive">{{subtitle}}</span>
+    </ssr-if>
+  </ssr-element>
+  <div>
+    <ssr-slot />
+  </div>
+</article>

components/contact.svelte → components/my-contact.html

@@ -27,8 +27,8 @@ <h2 id="contact-heading" class="Hidden">Contact Form</h2>
         name="enquiry"
         rows="5"
         maxlength="10000"
-        placeholder="Tell me about your project&hellip;"
-      />
+        placeholder="Tell me about your project…"
+      ></textarea>
     </li>
     <li>
       <h3 class="Privacy">

components/cta.svelte → components/my-cta.html

@@ -1,13 +1,9 @@
-<script>
-  import Button from './button.svelte';
-</script>
-
 <aside class="Box">
   <h3 class="Cursive">Let’s work together...</h3>
   <p>
     Interested in working with me? <a href="/contact/">Send me an email</a> with your requirements.
     We can <strong>schedule a chat</strong> and I can <strong>provide a quote</strong> and let you
     know <strong>my availability</strong>.
   </p>
-  <Button href="/contact/">Hire me Today!</Button>
+  <my-button href="/contact/">Hire me Today!</my-button>
 </aside>