bookmarks.html

---
layout: default
title: Bookmarks
description: Links to articles, videos, and other resources.
bookmark_types:
  article:
    label: Article
    icon: newspaper
    color: amber
  video:
    label: Video
    icon: video
    color: red
  podcast:
    label: Podcast
    icon: podcast
    color: purple
  paper:
    label: Paper
    icon: notebook-text
    color: green
  document:
    label: Document
    icon: file-text
    color: teal
  book:
    label: Book
    icon: book-open-text
    color: blue
  video-playlist:
    label: Video Playlist
    icon: list-video
    color: orange
---

<h1 class="text-center text-4xl font-bold mb-4">{{ page.title }}</h1>

{%- assign bookmarks = site.bookmarks | sort: "date" | reverse -%}
{%- for bookmark_set in bookmarks -%}
  {%- assign section_id = bookmark_set.date -%}
  {%- assign items = bookmark_set.items | sort: "date" | reverse -%}
  <section id="{{ section_id }}" class="{% if forloop.last %}pt-6{% else %}py-6{% endif %} print:break-inside-avoid">
    <h2 class="text-2xl font-bold mb-4">{{ bookmark_set.date | date: "%Y-%m-%d" }}</h2>
    <div class="flex flex-col gap-4">
      {%- for item in items -%}
      <div class="px-4 py-3 border-l-4 border-blue-600 dark:border-blue-500">
        <h3 class="text-xl font-medium">
          <a href="{{ item.url }}" class="underline text-blue-600 hover:text-blue-500 dark:text-blue-500 dark:hover:text-blue-400 transition-colors">
            {{ item.title }}
          </a>
        </h3>
        <ul class="list-none text-sm text-gray-600 dark:text-gray-400">
          <li>By: {{ item.by }}</li>
          <li>Date: {{ item.date | date: "%Y-%m-%d" }}</li>
          <li>
            {%- assign icon = page.bookmark_types[item.type].icon | default: "link" -%}
            {%- assign color = page.bookmark_types[item.type].color | default: "gray" -%}
            <span class="sr-only">Type:</span>
            <span class="px-2 py-1 rounded text-sm inline-flex items-center gap-1 {{ site.data.badge_colors[color] }}">
              {%- include lucide-icon.html icon=icon class="size-4 inline-block" -%}
              {{ page.bookmark_types[item.type].label | default: item.type | capitalize }}
            </span>
          </li>
        </ul>
      </div>
      {%- endfor -%}
    </div>
  </section>
{%- endfor -%}