limulus-dot-net/www/index.webc at main · limulus/limulus-dot-net · GitHub

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
83
84
85
86
87
88
89
90
91
92
93
94
---
layout: page
nav: false
title: limulus.net
teaser: >-
  Eric McCarthy’s projects, writing, videos, and photos. If I make it for myself, I put it
  here.
image: limulus-dot-net-2024-11-29
---

<script webc:type="js" webc:nokeep>
  webc.helpers.html(
    /* HTML */ `
      <link rel="me" href="https://github.com/limulus/" />
      <link rel="me" href="https://www.npmjs.org/~limulus/" />
      <link rel="me" href="https://www.linkedin.com/in/limulus/" />
      <link rel="me" href="https://www.facebook.com/theLimulus" />
    `,
    'head'
  )
</script>

<script webc:setup>
  const getTeaser = (collection, url) =>
    collection.find(({ url: u }) => u === url).data.teaser
</script>

<header>
  <script webc:type="js">
    this.svg('ldn')
  </script>
  <h1>limulus.net</h1>
</header>

<p @text="teaser"></p>

<h2><a href="/eric/">eric</a></h2>

<p @text="getTeaser(collections.all, '/eric/')"></p>

<h2><a href="/feed/">feed</a></h2>

<p @text="getTeaser(collections.all, '/feed/')"></p>

<template webc:nokeep webc:if="collections.link && collections.link.length > 0">
  <h2><a href="/links/">links</a></h2>

  <p @text="getTeaser(collections.all, '/links/')"></p>
</template>

<h2><a href="/penumbra/">penumbra</a></h2>

<p @text="getTeaser(collections.all, '/penumbra/')"></p>

<h2><a href="/photos/">photos</a></h2>

<p @text="getTeaser(collections.all, '/photos/')"></p>

<h2><a href="/tils/">tils</a></h2>

<p @text="getTeaser(collections.all, '/tils/')"></p>

<style>
  main {
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
  }

  main header {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  main header h1 {
    margin: 1rem 0;
  }

  main header svg {
    width: 6rem;
    height: 6rem;
  }

  main :is(h1, h2, h3)::after {
    content: ' /';
  }

  /* Keep the text content centered */
  main header h1::before {
    content: ' /';
    visibility: hidden;
  }
</style>