Help with listing annotations

[MemeAddict314]

Hello, I'm struggling to set up a template that generates some information about a selected item and includes its annotations. I'm trying to generate something that I can export to Joplin, but I don't know what the issues are with the many templates I've tried (I have no experience with JS).

I've tried getting samples from #85, #406, #49, and #227, and none have worked. My current template that comes closest to what I'm looking for is here:

// @use-markdown

### @${topItem.getField("citationKey")};

| Title | ${topItem.getField("title")} |
|---------|----------|
| Author(s) | ${topItem.getCreators().map((au) => au.firstName + " " + au.lastName).join("; ")} |
| Publication | ${topItem.getField("publicationTitle")} |
| Zotero Link | ${{
  async function getPDFLink(item) {
    const att = await item.getBestAttachment();
    if (!att || !att.isPDFAttachment()) {
      return "";
    }
    key = att.key;
    if (att.libraryID === 1) {
      return `[zotero://open-pdf/library/items/${key}](zotero://open-pdf/library/items/${key})`;
    } else {
      groupID = Zotero.Libraries.get(att.libraryID).id;
      return `[zotero://open-pdf/groups/${groupID}/items/${key}](zotero://open-pdf/groups/${groupID}/items/${key})`;
    }
  }
  sharedObj.getPDFLink = getPDFLink;
  return await getPDFLink(topItem);
}}$ |
| Web Link | ${{
const doi = topItem.getField("DOI");
const url = topItem.getField("url");
if (doi) {
  return `https://doi.org/${doi}`;
} else {
  return `${url}`;
}
}}$ |
| Citekey | @${topItem.getField("citationKey")} |
| Citation | ${{
  	const pages = _env.dryRun
  	return await Zotero.BetterNotes.api.convert.item2citation(
  		[topItem.id],
		[{
  			label: "page",
  		}]
  	);
}}$ |

### Bibliography
// (Chicago 17th Full Bibliography entry here)
${{
  	const pages = _env.dryRun
  	return await Zotero.BetterNotes.api.convert.item2citation(
  		[topItem.id],
		[{
  			label: "page",
  		}]
  	);
}}$

### Annotations
${{
async function getAnnotationsByColor(_item, color) {
  const annots = _item
    .getAnnotations()
    .filter((item) => item.annotationColor === color);
  if (annots.length === 0) {
    return "";
  }
  return Zotero.BetterNotes.api.convert.annotations2html(annots, {
    noteItem: targetNoteItem,
  });
}

const attachments = Zotero.Items.get(topItem.getAttachments()).filter((i) =>
  i.isPDFAttachment()
);

let res = ``;

const colors = {
  "#aaaaaa": "Key Quotes", // Grey
  "#ffd400": "Key Points", // Yellow
  "#ff6666": "Critiques", // Red
  "#5fb236": "Concurrences", // Green
  "#2ea8e5": "Notable Data", // Blue
  "#a28ae5": "External Connections", // Purple
  "#e56eee": "External Citations", // Magenta
  "#f19837": "Definitions", // Orange
};
for (const attachment of attachments) {
  res += ``;
  for (const color in colors) {
    if (Object.hasOwnProperty.call(colors, color)) {
      const colorName = colors[color];
      const renderedAnnotations = await getAnnotationsByColor(
        attachment,
        color
      );
      if (renderedAnnotations) {
        res += `<h3><p style="background-color:${color};">${colorName}</p></h3>\n${renderedAnnotations}`;
      }
    }
  }
  const renderedAnnotations = await getAnnotationsByColor(
    attachment,
    (_annot) => !colors.includes(_annot.annotationColor)
  );
  if (renderedAnnotations) {
    res += `<h2><p>Other Annotations</p></h2>\n${renderedAnnotations}`;
  }
}
return res;
}}$
***
> Note Created: ${new Date().toLocaleString()}

I'd like to change a few things, but I have no idea how to start.

1. I'd like to have my annotations in the order they are in the thing I'm citing, not sorted by color, basically like how they are in the "Add item note from annotations" with annotation colors shown but without the hyperlinks to the note on each annotation.
2. I'd like to include a full bibliography entry in a given citation style (my preference would be chicago 17th) in the bibliography section.
3. I'd like to remove the "(Author, Year, page number)" portion from all of my annotations.

Ideally a highlight annotation would look like:
[highlightsyntax]Highlighted Text[endsyntax]

a note annotation would look like:
[highlightsyntax]Highlight color name (key point, external citation, etc)[endsyntax]

Note Text

and a image selection can just be the image.

Thank you for any help with getting this set up, I appreciate it!