daily-note-v2.1 shortcode

Sparisoma Viridi

15 May 2026 · 3 mins read · edit

Is it possible to have such Hugo shortcode for daily note? Currently the activities are put in a table using Markdown. Let’s ask the ChatGPT for it.

1st-convers

Result of the first conversation ¹ is modified as follows.

ussage

{{< log/wall >}}

{{< log/item
  id="01"
  title="beg daily note"
  size="wide"
  stat="done"
  link="/26e29/"
  beg="0645"
  end="0646"
  doc="✓"
>}}

{{< log/item
  id="02"
  title="new 2nd-motw"
  size="small"
  stat="done"
  link="/26d53/"
  beg="0459"
  end="0459"
  doc="✓"
>}}

{{< log/item
  id="03"
  title="wash oven"
  size="tall"
  stat="open"
>}}

{{< log/item
  id="02"
  title="new 2nd-motw"
  size="small"
  stat="done"
  link="/26d53/"
  beg="0459"
  end="0459"
  doc="✓"
>}}

{{< log/item
  id="02"
  title="new 2nd-motw"
  size="small"
  stat="done"
  link="/26d53/"
  beg="0459"
  end="0459"
  doc="✓"
>}}

{{< log/item
  id="91"
  title="wash oven"
  size="small"
  stat="open"
>}}

{{< log/item
  id="92"
  title="wash oven"
  size="small"
  stat="doing"
>}}

{{< log/item
  id="93"
  title="wash oven"
  size="small"
  stat="done"
>}}

{{< /log/wall >}}

container

<div class="log-wall">
  {{ .Inner }}
</div>

item

{{ $size := .Get "size" | default "small" }}
{{ $stat := .Get "stat" | default "open" }}
{{ $link := .Get "link" | default "#" }}

<a
  class="log-item {{ $size }} stat-{{ $stat }}"
  href="{{ $link }}"
>

  {{ with .Get "id" }}
  <div class="log-item-id">
    {{ . }}
  </div>
  {{ end }}

  {{ with .Get "title" }}
  <div class="log-item-title">
    {{ . }}
  </div>
  {{ end }}

  <div class="log-item-meta">

    {{ with .Get "beg" }}
      <span>{{ . }}</span>
    {{ end }}

    {{ with .Get "end" }}
      <span>→ {{ . }}</span>
    {{ end }}

  </div>

  {{ with .Get "doc" }}
  <div class="log-item-doc">
    {{ . }}
  </div>
  {{ end }}

</a>

css

/* container */

.log-wall {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(140px, 1fr));

  grid-auto-rows: 10px;

  gap: 10px;

  margin: 1rem 0;
}


/* base card */

.log-item {
  display: flex;
  flex-direction: column;

  min-height: 100%;

  padding: 0.8rem;

  border-radius: 14px;

  text-decoration: none;

  color: inherit;

  background: var(--card-bg, #1f1f1f);

  border: 1px solid
    var(--border-color, #333);

  overflow: hidden;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease;
}


/* hover */

.log-item:hover {
  transform: translateY(-2px);

  border-color: #666;
}


/* typography */

.log-item-id {
  font-size: 0.72rem;

  opacity: 0.55;

  margin-bottom: 0.35rem;
}


.log-item-title {
  font-size: 0.95rem;

  line-height: 1.3;

  font-weight: 600;
}


.log-item-meta {
  margin-top: auto;

  padding-top: 0.7rem;

  font-size: 0.72rem;

  opacity: 0.7;

  display: flex;

  gap: 0.45rem;

  flex-wrap: wrap;
}


.log-item-doc {
  margin-top: 0.5rem;

  font-size: 0.82rem;
}


/* masonry sizes */

.log-item.small {
  grid-row: span 12;
}


.log-item.wide {
  grid-column: span 2;

  grid-row: span 12;
}


.log-item.tall {
  grid-row: span 20;
}


.log-item.big {
  grid-column: span 2;

  grid-row: span 20;
}


/* statuses */

.log-item.stat-done {
  background: #1f2b22;

  border-color: #355c3f;
}


.log-item.stat-doing {
  background: #2b281f;

  border-color: #7a6a35;
}


.log-item.stat-open {
  background: #262626;
}


/* mobile refinement */

@media (max-width: 640px) {

  .log-wall {
    grid-template-columns:
      repeat(auto-fill, minmax(120px, 1fr));

    gap: 8px;
  }

  .log-item {
    padding: 0.7rem;

    border-radius: 12px;
  }

  .log-item-title {
    font-size: 0.88rem;
  }
}

in assets/css/components/log.css.

css.html

{{- $styles := slice
    (resources.Get "css/main.css")
    (resources.Get "css/components/log.css")
-}}

{{- range $styles }}

  {{- if hugo.IsDevelopment }}
    <link
      rel="stylesheet"
      href="{{ .RelPermalink }}?v={{ now.Unix }}"
    >
  {{- else }}
    {{- with . | minify | fingerprint }}
      <link
        rel="stylesheet"
        href="{{ .RelPermalink }}"
        integrity="{{ .Data.Integrity }}"
        crossorigin="anonymous"
      >
    {{- end }}
  
  {{- end }}

{{- end }}

in layouts/partial/head/css.html.

notes

It is considered that this approach fails the files are removed to avoid pollution to the system.
Next idea v2.2 is to still using table but parse the content to grid of divs.

refs

GPT-5.5, “Activity Wall Shortcode”, ChatGPT, 15 May 2026, url https://chatgpt.com/share/6a0669b7-e03c-83ec-9d7c-e3e1df5a5aee [20260515]. ↩︎