---

import { compareDesc, format } from 'date-fns'
import { toZonedTime } from 'date-fns-tz'

import BaseLayout from '../layouts/BaseLayout.astro';

import HR from "../components/HR.astro";
import MDXCallout from '../components/mdx/MDXCallout.astro';

import brjson from "../data/blogroll.json";
import type { BlogRollEntry } from "../lib/utils";
import MDXAccordion from '../components/mdx/MDXAccordion.astro';
import MDXLink from '../components/mdx/MDXLink.astro';

const entries = brjson.blogroll
    .sort((a: BlogRollEntry,b: BlogRollEntry) => {
        if (a.author < b.author) return -1;
        if (a.author > b.author) return 1;
        return 0;
    })
    .filter((entry: BlogRollEntry) => !(entry.draft))

---

<BaseLayout title="cool">
	<h1 class="font-serif text-3xl my-2">Cool Stuff</h2>

    <p>If <MDXLink href="/me" class="font-serif text-sm text-subtitle hover:underline">/me</MDXLink> was a page for everything I think is neat about myself, this page is a page for everything 
        I think is neat about the smallweb and indie tech enthusiast space at large.</p>

    <HR/>

    <h2 id="blogroll" class="font-serif text-2xl my-2">blogroll</h2>

    <p class="mb-2">This is / hopefully will become a giant list of personal websites and blogs that I think are cool.</p>

    <p class="mb-2">They are organized into three categories: <span class="text-purple-600 dark:text-purple-400">Damascus</span>,
    for people that I am good friends with and enthusiastically recommend; 
    <span class="text-slate-600 dark:text-slate-400">Platinum</span>, for people that I do not personally know
    but follow myself and think generally make good stuff; and
    <span class="text-yellow-600 dark:text-yellow-400">Gold</span>, for people that I do not personally know
    *nor* follow myself, but I saw at least one of their works and think they deserve a shout-out.</p>
        
    <MDXAccordion title="disclaimer"><p class="mb-2">This ranking convention is <em>not</em>necessarily me saying "this person's stuff is better than this other person's 
    stuff"... It's more me saying "I am more confident that this person won't say something stupid than I am with 
    this other person". I have more confidence in people I personally know, and in people that I actively follow,
    than some random person that popped up on the orange site that made something I think is neat. If it turns out
    that random person later decides to make an article shilling a shitcoin or some unnecessary LLM madness, I'll
    feel less bad about including them on here (and then <em>removing them</em> from here) if I made it clear from the
    beginning that I don't guarantee that they <em>won't</em>. Thus: this silly ranking scheme.</p></MDXAccordion>
        
    <p class="mb-2">If you can figure out what this ranking convention is based on, send me an email and the first person to do so
    will get a $19 Fortnite card.</p>

    <HR/>

    <h3 class="font-serif text-xl my-2 text-purple-600 dark:text-purple-400">Damascus</h3>
    
    <ul class="space-y-2">
    	{entries.filter((entry: BlogRollEntry) => entry.rank === 0).map((entry: BlogRollEntry) => (
    		<li class="mb-2">
                <a href={entry.url} class="font-serif text-lg text-crusta-400 dark:text-night-300 hover:underline">
                    {entry.author}
                    {entry.siteName ? `: ${entry.siteName}` : ''}
                </a>
                <p class="text-sm text-subtitle">
                    <span class="italic">&lt; {entry.url} &gt;</span><br/>
                </p>
                <p>{entry.note}</p>
            </li>
      	))}
    </ul>

    <h3 class="font-serif text-xl my-2 text-slate-600 dark:text-slate-400">Platinum</h3>

    <ul class="space-y-2">
    	{entries.filter((entry: BlogRollEntry) => entry.rank === 1).map((entry: BlogRollEntry) => (
    		<li class="mb-2">
                <a href={entry.url} class="font-serif text-lg text-crusta-400 dark:text-night-300 hover:underline">
                    {entry.author}
                    {entry.siteName ? `: ${entry.siteName}` : ''}
                </a>
                <p class="text-sm text-subtitle">
                    <span class="italic">&lt; {entry.url} &gt;</span><br/>
                </p>
                <p>{entry.note}</p>
            </li>
      	))}
    </ul>

    <h3 class="font-serif text-xl my-2 text-yellow-600 dark:text-yellow-400">Gold</h3>

  	<ul class="space-y-2">
    	{entries.filter((entry: BlogRollEntry) => entry.rank === 2).map((entry: BlogRollEntry) => (
    		<li class="mb-2">
                <a href={entry.url} class="font-serif text-lg text-crusta-400 dark:text-night-300 hover:underline">
                    {entry.author}
                    {entry.siteName ? `: ${entry.siteName}` : ''}
                </a>
                <p class="text-sm text-subtitle">
                    <span class="italic">&lt; {entry.url} &gt;</span><br/>
                </p>
                <p>{entry.note}</p>
            </li>
      	))}
  </ul>
</BaseLayout>
