hypermedia blog

src/views/templ8.ts

import Mustache from "mustache";
import { mkdirSync } from "fs";
import {
  getPosts,
  getTags,
  BlogTags,
  BlogPost,
  getPostsByTagID,
  getTagByName,
  getPostsByCatID,
  getPostsBySubCatID,
  getCatByName,
  getCategoryByID,
} from "../models/blog.js";

/*   _           _ ___    _        __
 *  |_ | | |\ | /   |  | / \ |\ | (_
 *  |  |_| | \| \_  |  | \_/ | \| __)
 */
function tagCloud(min: number, max: number, domain: string): string {
  let tags: BlogTags = getTags();
  let count = new Array();
  tags.forEach((tag) => {
    count.push(tag.count);
  });
  const maxCount: number = Math.max(...count);
  const minCount: number = Math.min(...count);
  let spread: number = maxCount - minCount;
  if (spread <= 0) {
    spread = 1;
  }
  let step: number = (max - min) / spread;
  let html: string = '<ul class="tags">';
  tags.forEach((tag) => {
    let size: number = min + (tag.count - minCount) * step;
    // size = Math.ceil(size); // uncomment for whole numbers;
    html += `<li><a href="${domain}/tag/${tag.url}" style="font-size: ${size}%" title="${tag.count} posts tagged ${tag.name}">${tag.name}</a></li> `;
  });
  html += "</ul>";
  return html;
}

function pagination(
  domain: string,
  totalRows: number,
  perPage: number,
  currentPage: number,
  linkCount: number = 5,
): string {
  if (totalRows == 0 || perPage == 0) {
    return "";
  }
  const pageCount = Math.ceil(totalRows / perPage);
  if (pageCount == 1) {
    return "";
  }
  if (currentPage > totalRows) {
    currentPage = (pageCount - 1) * perPage;
  }

  let first = currentPage - linkCount;
  let last = currentPage + linkCount;
  if (first < 0) {
    first = 1;
    last += linkCount - first;
  }
  if (last > pageCount) {
    last = pageCount;
    first -= linkCount;
  }

  let DOM = "";
  if (currentPage != first) {
    DOM += `<li><a href="${domain}/page/1">«</a></li>`;
  }
  if (currentPage != 1) {
    let prev = currentPage - 1;
    if (prev <= 0) {
      prev = currentPage;
    }
    DOM += `<li><a href="${domain}/page/${prev}">&lt;</a></li>`;
  }
  for (let i = first - 1; i <= last; i++) {
    if (i > 0) {
      if (currentPage == i) {
        DOM += `<li class="selected"><a href="#">${i}</a></li>`;
      } else {
        DOM += `<li><a href="${domain}/page/${i}">${i}</a></li>`;
      }
    }
  }
  if (currentPage < pageCount) {
    let next = currentPage + 1;
    if (next >= last) {
      next = last;
    }
    DOM += `<li><a href="${domain}/page/${next}">&gt;</a></li>`;
  }
  if (currentPage != last) {
    // last should be pageCount, but i kinda like the stepping better
    DOM += `<li><a href="${domain}/page/${last}">»</a></li>`;
  }
  return `<nav class="pagination"><ul>${DOM}</ul></nav>`;
}

async function getFile(file: string) {
  return Bun.file(`src/views/${file}.html`, {
    type: "text/html;charset=utf-8",
  }).text();
}

function convertToRoman(num: number): string {
  var roman: any = {
    m: 1000,
    cm: 900,
    d: 500,
    cd: 400,
    c: 100,
    xc: 90,
    l: 50,
    xl: 40,
    x: 10,
    ix: 9,
    v: 5,
    iv: 4,
    i: 1,
  };
  let str = "";
  for (var i of Object.keys(roman)) {
    let q = Math.floor(num / roman[i]);
    num -= q * roman[i];
    str += i.repeat(q);
  }
  return `<em>${str}</em>`;
}

async function RenderSidebar(domain: string) {
  let sidebar =
    "<section><h3><em>tags</em></h3>" +
    tagCloud(80, 175, domain) +
    "</section>";
  let sidebarHtml = await getFile("sidebar");
  sidebar += Mustache.render(sidebarHtml, { domain: domain });
  return sidebar;
}

async function RenderCatPagePosts(
  domain: string,
  title: string,
  cat_id: number,
  cat_url: string,
  limit: number,
  offset: number,
  total: number,
  current: number,
) {
  const data = getPostsByCatID(cat_id, limit, offset);
  const postHtml = await getFile("preview");
  let DOM: string = `<title>${title} ${cat_url}: page ${current} of ${total}</title>`;
  data.forEach((post: any) => {
    const postDate = new Date(post.date * 1000);
    DOM += Mustache.render(postHtml, {
      domain: domain,
      url: post.url,
      title: post.title,
      content: post.excerpt,
      mainCat: post.meta.main[0].url,
      mainCatUrl: post.meta.main[0].url,
      subtitle: post.subtitle,
      day: postDate.getDate(),
      month: postDate.toLocaleString("default", { month: "short" }),
      year: postDate.getFullYear(),
      tagList: () => {
        let list = "";
        post.meta.tags.forEach((tag: any) => {
          list += `<a href="${domain}/tag/${tag.url}">${tag.name}</a>, `;
        });
        return list.slice(0, -2);
      },
      catList: () => {
        let list = "";
        post.meta.cats.forEach((cat: any) => {
          if (cat.blog_cat_id.toString().includes(".")) {
            const parentID: number = Math.floor(cat.blog_cat_id);
            const parent = getCategoryByID(parentID);
            list += `<a href="${domain}/category/${parent[0].url}">${parent[0].name}</a>/<a href="${domain}/category/${parent[0].url}/${cat.url}">${cat.name}</a>, `;
          } else {
            list += `<a href="${domain}/category/${cat.url}">${cat.name}</a>, `;
          }
        });
        return list.slice(0, -2);
      },
    });
  });
  DOM += pagination(`${domain}/category/${cat_url}`, total, limit, current);
  return DOM;
}

async function RenderSubCatPagePosts(
  domain: string,
  title: string,
  subcat_id: number,
  subcat_url: string,
  limit: number,
  offset: number,
  total: number,
  current: number,
) {
  const data = getPostsBySubCatID(subcat_id, limit, offset);
  const postHtml = await getFile("preview");
  let DOM: string = `<title>${title} ${subcat_url}: page ${current} of ${total}</title>`;
  data.forEach((post: any) => {
    const postDate = new Date(post.date * 1000);
    DOM += Mustache.render(postHtml, {
      domain: domain,
      url: post.url,
      title: post.title,
      content: post.excerpt,
      mainCat: post.meta.main[0].url,
      mainCatUrl: post.meta.main[0].url,
      subtitle: post.subtitle,
      day: postDate.getDate(),
      month: postDate.toLocaleString("default", { month: "short" }),
      year: postDate.getFullYear(),
      tagList: () => {
        let list = "";
        post.meta.tags.forEach((tag: any) => {
          list += `<a href="${domain}/tag/${tag.url}">${tag.name}</a>, `;
        });
        return list.slice(0, -2);
      },
      catList: () => {
        let list = "";
        post.meta.cats.forEach((cat: any) => {
          if (cat.blog_cat_id.toString().includes(".")) {
            const parentID: number = Math.floor(cat.blog_cat_id);
            const parent = getCategoryByID(parentID);
            list += `<a href="${domain}/category/${parent[0].url}">${parent[0].name}</a>/<a href="${domain}/category/${parent[0].url}/${cat.url}">${cat.name}</a>, `;
          } else {
            list += `<a href="${domain}/category/${cat.url}">${cat.name}</a>, `;
          }
        });
        return list.slice(0, -2);
      },
    });
  });
  const parentID: number = Math.floor(subcat_id);
  const parent = getCategoryByID(parentID);
  DOM += pagination(
    `${domain}/category/${parent[0].url}/${subcat_url}`,
    total,
    limit,
    current,
  );
  return DOM;
}

async function RenderTagPagePosts(
  domain: string,
  title: string,
  tag_id: number,
  tag_url: string,
  limit: number,
  offset: number,
  total: number,
  current: number,
) {
  const data = getPostsByTagID(tag_id, limit, offset);
  const postHtml = await getFile("preview");
  let DOM: string = `<title>${title} ${tag_url}: page ${current} of ${total}</title>`;
  data.forEach((post: any) => {
    const postDate = new Date(post.date * 1000);
    DOM += Mustache.render(postHtml, {
      domain: domain,
      url: post.url,
      title: post.title,
      content: post.excerpt,
      mainCat: post.meta.main[0].url,
      mainCatUrl: post.meta.main[0].url,
      subtitle: post.subtitle,
      day: postDate.getDate(),
      month: postDate.toLocaleString("default", { month: "short" }),
      year: postDate.getFullYear(),
      tagList: () => {
        let list = "";
        post.meta.tags.forEach((tag: any) => {
          list += `<a href="${domain}/tag/${tag.url}">${tag.name}</a>, `;
        });
        return list.slice(0, -2);
      },
      catList: () => {
        let list = "";
        post.meta.cats.forEach((cat: any) => {
          if (cat.blog_cat_id.toString().includes(".")) {
            const parentID: number = Math.floor(cat.blog_cat_id);
            const parent = getCategoryByID(parentID);
            list += `<a href="${domain}/category/${parent[0].url}">${parent[0].name}</a>/<a href="${domain}/category/${parent[0].url}/${cat.url}">${cat.name}</a>, `;
          } else {
            list += `<a href="${domain}/category/${cat.url}">${cat.name}</a>, `;
          }
        });
        return list.slice(0, -2);
      },
    });
  });
  DOM += pagination(`${domain}/tag/${tag_url}`, total, limit, current);
  return DOM;
}

async function RenderPagePosts(
  domain: string,
  title: string,
  limit: number,
  offset: number,
  total: number,
  current: number,
) {
  let data = getPosts(limit, offset);
  const postHtml = await getFile("post");
  const prevHtml = await getFile("preview");
  let DOM: string = `<title>${title} page ${current} of ${total}</title>`;
  data.forEach((post) => {
    const postDate = new Date(post.date * 1000);
    DOM += Mustache.render(post.excerpt == post.content ? postHtml : prevHtml, {
      domain: domain,
      url: post.url,
      title: post.title,
      content: post.excerpt,
      mainCat: post.meta.main[0].url,
      mainCatUrl: post.meta.main[0].url,
      subtitle: post.subtitle,
      day: postDate.getDate(),
      month: postDate.toLocaleString("default", { month: "short" }),
      year: postDate.getFullYear(),
      tagList: () => {
        let list = "";
        post.meta.tags.forEach((tag) => {
          list += `<a href="${domain}/tag/${tag.url}">${tag.name}</a>, `;
        });
        return list.slice(0, -2);
      },
      catList: () => {
        let list = "";
        post.meta.cats.forEach((cat) => {
          if (cat.blog_cat_id.toString().includes(".")) {
            const parentID: number = Math.floor(cat.blog_cat_id);
            const parent = getCategoryByID(parentID);
            list += `<a href="${domain}/category/${parent[0].url}">${parent[0].name}</a>/<a href="${domain}/category/${parent[0].url}/${cat.url}">${cat.name}</a>, `;
          } else {
            list += `<a href="${domain}/category/${cat.url}">${cat.name}</a>, `;
          }
        });
        return list.slice(0, -2);
      },
    });
  });
  DOM += pagination(domain, total, limit, current);
  return DOM;
}

async function RenderPost(domain: string, title: string, data: BlogPost) {
  const postHtml = await getFile("post");
  const post = data[0];
  const postDate = new Date(post.date * 1000);
  return Mustache.render(postHtml, {
    domain: domain,
    pageTitle: title,
    url: post.url,
    title: post.title,
    content: post.content,
    mainCat: post.meta.main[0].url,
    mainCatUrl: post.meta.main[0].url,
    subtitle: post.subtitle,
    day: postDate.getDate(),
    month: postDate.toLocaleString("default", { month: "short" }),
    year: postDate.getFullYear(),
    tagList: () => {
      let list = "";
      post.meta.tags.forEach((tag) => {
        list += `<a href="${domain}/tag/${tag.url}">${tag.name}</a>, `;
      });
      return list.slice(0, -2);
    },
    catList: () => {
      let list = "";
      post.meta.cats.forEach((cat) => {
        if (cat.blog_cat_id.toString().includes(".")) {
          const parentID: number = Math.floor(cat.blog_cat_id);
          const parent = getCategoryByID(parentID);
          list += `<a href="${domain}/category/${parent[0].url}">${parent[0].name}</a>/<a href="${domain}/category/${parent[0].url}/${cat.url}">${cat.name}</a>, `;
        } else {
          list += `<a href="${domain}/category/${cat.url}">${cat.name}</a>, `;
        }
      });
      return list.slice(0, -2);
    },
  });
}

export async function generateErrorPages(domain: string, title: string) {
  const sidebar = await RenderSidebar(domain);
  let errorHtml = await getFile("error");
  const renderedError = Mustache.render(errorHtml, {
    domain: domain,
    title: title,
  });
  let mainHtml = await getFile("main");

  const renderedHtml = Mustache.render(mainHtml, {
    ripcache: Date.now(),
    domain: domain,
    description: `${title} the error page`,
    content: renderedError,
    sidebar: sidebar,
    footer: () => {
      const year = convertToRoman(new Date().getFullYear());
      return `${year} <a href="https://whois.x-e.ro">xero harrison</a>`;
    },
  });
  mkdirSync(`dist/htmx/`, { recursive: true });
  Bun.write(`dist/htmx/error.html`, renderedError);
  Bun.write(`dist/error.html`, renderedHtml);
}

export async function generateCatPage(
  domain: string,
  title: string,
  cat_url: string,
  limit: number,
  offset: number,
  total: number,
  current: number,
) {
  const cat_id: number = getCatByName(cat_url);
  const sidebar = await RenderSidebar(domain);
  const content = await RenderCatPagePosts(
    domain,
    title,
    cat_id,
    cat_url,
    limit,
    offset,
    total,
    current,
  );
  let mainHtml = await getFile("main");

  const renderedHtml = Mustache.render(mainHtml, {
    ripcache: Date.now(),
    domain: domain,
    description: `${title} posts categorized: ${cat_url}, page ${current} of ${total}`,
    content: content,
    sidebar: sidebar,
    footer: () => {
      const year = convertToRoman(new Date().getFullYear());
      return `${year} <a href="https://whois.x-e.ro">xero harrison</a>`;
    },
  });
  mkdirSync(`dist/htmx/category/${cat_url}/page`, { recursive: true });
  mkdirSync(`dist/category/${cat_url}/page`, { recursive: true });

  if (current == 1) {
    Bun.write(`dist/htmx/category/${cat_url}/index.html`, content);
    Bun.write(`dist/category/${cat_url}/index.html`, renderedHtml);
    /* @todo: is this cheaper than nginix? */
    Bun.write(`dist/category/${cat_url}/page/index.html`, renderedHtml);
  }
  Bun.write(`dist/htmx/category/${cat_url}/page/${current}.html`, content);
  Bun.write(`dist/category/${cat_url}/page/${current}.html`, renderedHtml);
}

export async function generateSubCatPage(
  domain: string,
  title: string,
  subcat_url: string,
  subcat_id: number,
  limit: number,
  offset: number,
  total: number,
  current: number,
) {
  const sidebar = await RenderSidebar(domain);
  const content = await RenderSubCatPagePosts(
    domain,
    title,
    subcat_id,
    subcat_url,
    limit,
    offset,
    total,
    current,
  );
  let mainHtml = await getFile("main");

  const renderedHtml = Mustache.render(mainHtml, {
    ripcache: Date.now(),
    domain: domain,
    description: `${title} posts categorized: ${subcat_url}, page ${current} of ${total}`,
    content: content,
    sidebar: sidebar,
    footer: () => {
      const year = convertToRoman(new Date().getFullYear());
      return `${year} <a href="https://whois.x-e.ro">xero harrison</a>`;
    },
  });

  const parentID: number = Math.floor(subcat_id);
  const parent = getCategoryByID(parentID);
  const cat_url = parent[0].url;

  mkdirSync(`dist/htmx/category/${cat_url}/${subcat_url}/page`, {
    recursive: true,
  });
  mkdirSync(`dist/category/${cat_url}/${subcat_url}/page`, { recursive: true });

  if (current == 1) {
    Bun.write(
      `dist/htmx/category/${cat_url}/${subcat_url}/index.html`,
      content,
    );
    Bun.write(
      `dist/category/${cat_url}/${subcat_url}/index.html`,
      renderedHtml,
    );
    /* @todo: is this cheaper than nginix? */
    Bun.write(
      `dist/category/${cat_url}/${subcat_url}/page/index.html`,
      renderedHtml,
    );
  }
  Bun.write(
    `dist/htmx/category/${cat_url}/${subcat_url}/page/${current}.html`,
    content,
  );
  Bun.write(
    `dist/category/${cat_url}/${subcat_url}/page/${current}.html`,
    renderedHtml,
  );
}

export async function generateTagPage(
  domain: string,
  title: string,
  tag_url: string,
  limit: number,
  offset: number,
  total: number,
  current: number,
) {
  const tag_id: number = getTagByName(tag_url);
  const sidebar = await RenderSidebar(domain);
  const content = await RenderTagPagePosts(
    domain,
    title,
    tag_id,
    tag_url,
    limit,
    offset,
    total,
    current,
  );
  let mainHtml = await getFile("main");

  const renderedHtml = Mustache.render(mainHtml, {
    ripcache: Date.now(),
    domain: domain,
    description: `${title} posts tagged: ${tag_url}, page ${current} of ${total}`,
    content: content,
    sidebar: sidebar,
    footer: () => {
      const year = convertToRoman(new Date().getFullYear());
      return `${year} <a href="https://whois.x-e.ro">xero harrison</a>`;
    },
  });
  mkdirSync(`dist/htmx/tag/${tag_url}/page`, { recursive: true });
  mkdirSync(`dist/tag/${tag_url}/page`, { recursive: true });

  if (current == 1) {
    Bun.write(`dist/htmx/tag/${tag_url}/index.html`, content);
    Bun.write(`dist/tag/${tag_url}/index.html`, renderedHtml);
    /* @todo: is this cheaper than nginix? */
    Bun.write(`dist/tag/${tag_url}/page/index.html`, renderedHtml);
  }
  Bun.write(`dist/htmx/tag/${tag_url}/page/${current}.html`, content);
  Bun.write(`dist/tag/${tag_url}/page/${current}.html`, renderedHtml);
}

export async function generatePage(
  domain: string,
  title: string,
  limit: number,
  offset: number,
  total: number,
  current: number,
) {
  const sidebar = await RenderSidebar(domain);
  const content = await RenderPagePosts(
    domain,
    title,
    limit,
    offset,
    total,
    current,
  );
  let mainHtml = await getFile("main");

  const renderedHtml = Mustache.render(mainHtml, {
    ripcache: Date.now(),
    domain: domain,
    description: (current == 1) ? `${title} xero's blog` : `${title} page ${current} of ${total}`,
    content: content,
    sidebar: sidebar,
    footer: () => {
      const year = convertToRoman(new Date().getFullYear());
      return `${year} <a href="https://whois.x-e.ro">xero harrison</a>`;
    },
  });
  mkdirSync(`dist/page`, { recursive: true });
  mkdirSync(`dist/htmx/page`, { recursive: true });

  if (current == 1) {
    Bun.write(`dist/htmx/index.html`, content);
    Bun.write(`dist/index.html`, renderedHtml);
  }
  Bun.write(`dist/htmx/page/${current}.html`, content);
  Bun.write(`dist/page/${current}.html`, renderedHtml);
}

export async function generatePost(
  domain: string,
  title: string,
  data: BlogPost,
) {
  const sidebar = await RenderSidebar(domain);
  const content = await RenderPost(domain, title, data);
  const file = data[0].url;

  Bun.write(`dist/htmx/${file}.html`, content);

  let mainHtml = await getFile("main");
  Bun.write(
    `dist/${file}.html`,
    Mustache.render(mainHtml, {
      ripcache: Date.now(),
      domain: domain,
      description: `${title} ${data[0].title} : ${data[0].subtitle}`,
      content: content,
      sidebar: sidebar,
      footer: () => {
        const year = convertToRoman(new Date().getFullYear());
        return `${year} <a href="https://whois.x-e.ro">xero harrison</a>`;
      },
    }),
  );
}