> ## Documentation Index
> Fetch the complete documentation index at: https://portfolio.subinb.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Awesome Tech Writing Curator

> A live rendering of the [awesome-tech-writing-curator](https://github.com/subin23k/awesome-tech-writing-skills/blob/main/skills/awesome-tech-writing-curator/SKILL.md) skill I created for maintaining the Awesome Technical Writing Skills README.

export const RemoteReadme = ({rawUrl, repositoryUrl}) => {
  const [html, setHtml] = useState("");
  const [error, setError] = useState("");
  useEffect(() => {
    let isMounted = true;
    const escapeHtml = value => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
    const resolveUrl = href => {
      if ((/^(https?:|mailto:|#)/).test(href)) {
        return href;
      }
      return `${repositoryUrl}/blob/main/${href.replace(/^\.\//, "")}`;
    };
    const inlineMarkdown = value => {
      const escaped = escapeHtml(value);
      return escaped.replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>").replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, label, href) => {
        const url = escapeHtml(resolveUrl(href));
        return `<a href="${url}" target="_blank" rel="noopener noreferrer">${label}</a>`;
      });
    };
    const flushParagraph = (parts, output) => {
      if (parts.length === 0) {
        return;
      }
      output.push(`<p>${inlineMarkdown(parts.join(" "))}</p>`);
      parts.length = 0;
    };
    const flushList = (items, output, ordered = false) => {
      if (items.length === 0) {
        return;
      }
      const tag = ordered ? "ol" : "ul";
      const start = ordered && items[0].number > 1 ? ` start="${items[0].number}"` : "";
      const renderedItems = items.map(item => {
        if (!ordered) {
          return `<li>${inlineMarkdown(item)}</li>`;
        }
        const children = item.children.length > 0 ? `<ul>${item.children.map(child => `<li>${inlineMarkdown(child)}</li>`).join("")}</ul>` : "";
        return `<li>${inlineMarkdown(item.text)}${children}</li>`;
      }).join("");
      output.push(`<${tag}${start}>${renderedItems}</${tag}>`);
      items.length = 0;
    };
    const flushQuote = (parts, output) => {
      if (parts.length === 0) {
        return;
      }
      output.push(`<blockquote>${parts.map(part => `<p>${inlineMarkdown(part)}</p>`).join("")}</blockquote>`);
      parts.length = 0;
    };
    const flushCode = (parts, output) => {
      if (parts.length === 0) {
        return;
      }
      output.push(`<pre><code>${escapeHtml(parts.join("\n"))}</code></pre>`);
      parts.length = 0;
    };
    const renderMarkdown = markdown => {
      const output = [];
      const paragraph = [];
      const unorderedList = [];
      const orderedList = [];
      const quote = [];
      const code = [];
      let inCodeBlock = false;
      let skippedTitle = false;
      const content = markdown.replace(/^---\r?\n[\s\S]*?\r?\n---\r?\n/, "");
      content.split(/\r?\n/).forEach(line => {
        const trimmed = line.trim();
        if (trimmed.startsWith("```")) {
          if (inCodeBlock) {
            flushCode(code, output);
            inCodeBlock = false;
          } else {
            flushQuote(quote, output);
            flushList(unorderedList, output);
            flushList(orderedList, output, true);
            flushParagraph(paragraph, output);
            inCodeBlock = true;
          }
          return;
        }
        if (inCodeBlock) {
          code.push(line);
          return;
        }
        if (!trimmed) {
          flushQuote(quote, output);
          flushList(unorderedList, output);
          flushList(orderedList, output, true);
          flushParagraph(paragraph, output);
          return;
        }
        const heading = (/^(#{1,6})\s+(.+)$/).exec(trimmed);
        if (heading) {
          flushQuote(quote, output);
          flushList(unorderedList, output);
          flushList(orderedList, output, true);
          flushParagraph(paragraph, output);
          const level = heading[1].length;
          if (level === 1 && !skippedTitle) {
            skippedTitle = true;
            return;
          }
          output.push(`<h${level}>${inlineMarkdown(heading[2])}</h${level}>`);
          return;
        }
        if (trimmed.startsWith(">")) {
          flushList(unorderedList, output);
          flushList(orderedList, output, true);
          flushParagraph(paragraph, output);
          quote.push(trimmed.replace(/^>\s?/, ""));
          return;
        }
        if ((/^\s+-\s+/).test(line) && orderedList.length > 0) {
          flushQuote(quote, output);
          flushParagraph(paragraph, output);
          orderedList[orderedList.length - 1].children.push(trimmed.slice(2));
          return;
        }
        if (trimmed.startsWith("- ")) {
          flushQuote(quote, output);
          flushParagraph(paragraph, output);
          flushList(orderedList, output, true);
          unorderedList.push(trimmed.slice(2));
          return;
        }
        const orderedListItem = (/^(\d+)\.\s+(.+)$/).exec(trimmed);
        if (orderedListItem) {
          flushQuote(quote, output);
          flushParagraph(paragraph, output);
          flushList(unorderedList, output);
          orderedList.push({
            number: Number(orderedListItem[1]),
            text: orderedListItem[2],
            children: []
          });
          return;
        }
        if (unorderedList.length > 0 && (/^\s+/).test(line)) {
          unorderedList[unorderedList.length - 1] = `${unorderedList[unorderedList.length - 1]} ${trimmed}`;
          return;
        }
        if (orderedList.length > 0 && (/^\s+/).test(line)) {
          const item = orderedList[orderedList.length - 1];
          if (item.children.length > 0) {
            item.children[item.children.length - 1] = `${item.children[item.children.length - 1]} ${trimmed}`;
          } else {
            item.text = `${item.text} ${trimmed}`;
          }
          return;
        }
        flushQuote(quote, output);
        flushList(unorderedList, output);
        flushList(orderedList, output, true);
        paragraph.push(trimmed);
      });
      flushQuote(quote, output);
      flushList(unorderedList, output);
      flushList(orderedList, output, true);
      flushParagraph(paragraph, output);
      flushCode(code, output);
      return output.join("");
    };
    const loadReadme = async () => {
      try {
        const cacheBreaker = rawUrl.includes("?") ? "&" : "?";
        const response = await fetch(`${rawUrl}${cacheBreaker}updated=${Date.now()}`, {
          cache: "no-store"
        });
        if (!response.ok) {
          throw new Error(`GitHub returned ${response.status}`);
        }
        const markdown = await response.text();
        if (isMounted) {
          setHtml(renderMarkdown(markdown));
          setError("");
        }
      } catch (readmeError) {
        if (isMounted) {
          setError(readmeError.message);
        }
      }
    };
    loadReadme();
    return () => {
      isMounted = false;
    };
  }, [rawUrl, repositoryUrl]);
  if (error) {
    return <div className="rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-900 dark:border-red-900/60 dark:bg-red-950/30 dark:text-red-100">
        Could not load the latest README from GitHub: {error}
      </div>;
  }
  if (!html) {
    return <p>Loading the latest README from GitHub...</p>;
  }
  return <div dangerouslySetInnerHTML={{
    __html: html
  }} />;
};

<RemoteReadme rawUrl="https://raw.githubusercontent.com/subin23k/awesome-tech-writing-skills/main/skills/awesome-tech-writing-curator/SKILL.md" repositoryUrl="https://github.com/subin23k/awesome-tech-writing-skills" />