add header links for the blog

[ix0rai]

blog posts should have a clickable permalink button that appears when the header is hovered, just like the one on the Team Listings page.

[Akarys42]

I remember looking at it back in the days, but I just couldn't figure out why rehype-autolink-headings didn't run on the blog posts. To me, all conditions appear satisfied, the headings are indeed headings and have a unique ID each.

quiltmc.org/astro.config.ts

Lines 17 to 20 in fd0b99a

	rehypePlugins: [[rehypeAutolinkHeadings, {
	content: fromHtml('<span class="header-anchor-container icon pl-3"><i class="header-anchor fas fa-lg fa-link has-text-link is-size-5"></i></span>'),
	behavior: "append"
	}]]

It would also be a good time to add an "Edit on GitHub" link at the bottom like on the other pages, that shouldn't be too complicated to add to the template (it inherits from Default instead of Page). Here is how it is done:

quiltmc.org/src/layouts/Page.astro

Line 17 in fd0b99a

const githubUrl = SiteConfig.fileEditBaseUrl + Astro.props.frontmatter.file.replace(cwd(), "")

quiltmc.org/src/layouts/Page.astro

Lines 52 to 61 in fd0b99a

	<p class="subtitle is-italic is-6 has-text-weight-medium is-family-primary mt-5">
	<span class="icon-text">
	<span class="icon">
	<i class="fas fa-pencil"></i>
	</span>
	<span>
	<a href={githubUrl} style="color: inherit">{t("edit-on-github")}</a>
	</span>
	</span>
	</p>

[ix0rai]

thank you for the insight! I'm not sure "edit on github" buttons are a great fit for the blog since they're not meant to be dynamic pages, they're kinda supposed to be posted once and left unchanged unless they need corrections

[Akarys42]

I feel like that might be useful for typos and such but yeah fair.

[Southpaw1496]

It would also be a good time to add an "Edit on GitHub" link at the bottom like on the other pages

I feel like these sorts of buttons are best for documentation sites where there's an emphasis on community contributions and additions for the site. While we obviously appreciate community contributions, I don't think that they're really a focus for the site to the point where we need a button (with the possible exception of translations, but we don't have a proper system for that yet).

Additionally, while my experience with GitHub's editor is limited, I don't think it's up for the job of handling many of the more complex pages, and the changes it makes when it doesn't know what it's doing (not respecting indentation in many cases) will just make pull requests harder to review and correct.

[Southpaw1496]

I have made a little progress on this. I discovered that, even Markdown headers in Astro have an id added to them, you still need the Rehype slug plugin to do it in order for the auto link plugin to work. This may be because rehype plugins are run before Astro adds the header IDs.

The only problem is I can't work out how to make the icons it generates actually visible. As far as I can tell, it runs after astro-icon in the build process, so we can't use it. You seem to control what it puts for the links by using some sort of HTML abstract syntax tree called HAST. By default it uses CSS classes that you can theoretically customise, but I still don't understand how the CSS works on this site.