2023 05 25 1343

I have wanted a simple way to publish notes/logs from small things I'm working on. And keep going back and forth on how to implement it. I would love to have a custom implementation of something like a digital garden that would publish notes directly from obsidian. But for now, are.na should serve work for gathering or displaying collections of research references, inspiration, and logs.

Creating a page from a channel

// app/log/page.tsx

import Image from "next/image";

async function getChannel(collection: string) {
  const res = await fetch(`https://api.are.na/v2/channels/gc-logs`, {
    next: { revalidate: 10 },
  });
  console.log(res);
  return res.json();
}

export default async function Page({
  params: { collection },
}: {
  params: { collection: string };
}) {
  // Initiate both requests in parallel
  const channel data = getChannel(collection);

  // Wait for the promises to resolve
  const [channel] = await Promise.all([channelData]);

  return (
    <>
      <h1>{channel.title}</h1>
      {channel.contents.map((d: any) => (
        <div className="flex flex-col space-y-1 mb-4">
          <div className="w-full flex flex-col">
            <p>{d.title}</p>
            <p>
              {/* s {!d.content ? <>d{d.description}</> : <>{d.content}</>} */}
            </p>
            {/* <div>
              {!d.image.display ? (
                <>{d.content}</>
              ) : (
                <>
                  <Image
                    src={d.image.square.url}
                    width={500}
                    height={500}
                    alt="Picture of the author"
                  />
                </>
              )}{" "}
            </div> */}
          </div>
        </div>
      ))}
    </>
  );
}

Dynamic Pages from channel slug

Another implementation would generate pages dynamically based on whether paths match the channel names in are.na

//app/log/[collection]/page.tsx

import Image from "next/image";

async function getChannel(collection: string) {
  const res = await fetch(
    `https://api.are.na/v2/channels/gc-logs-${collection}`
  );
  console.log(res);
  return res.json();
}

export default async function Page({
  params: { collection },
}: {
  params: { collection: string };
}) {
  // Initiate both requests in parallel
  const channelData = getChannel(collection);

  // Wait for the promises to resolve
  const [channel] = await Promise.all([channelData]);

  return (
    <>
      <h1>{channel.title}</h1>
      {channel.contents.map((d: any) => (
        <div className="flex flex-col space-y-1 mb-4">
          <div className="w-full flex flex-col">
            <p>{d.generated_title}</p>
            <p>{d.content}</p>
          </div>
        </div>
      ))}
    </>
  );
}