Content Security Policy for Github.io

[PaulChernoch-Shell]

I got the Pagefind search bar to work on my Github Pages website. I had two problems, now solved.

1. Content Security Policy. After playing around, this CSP worked:

<meta http-equiv="Content-Security-Policy" content="default-src *; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval' *">

The img-src..data: part was necessary for the magnifying glass image to come up.

2. Absolute links. The docs have you paste in this:

  <link href="/pagefind/pagefind-ui.css" rel="stylesheet">
  <script src="/pagefind/pagefind-ui.js"></script>

Unfortunately, the pagefind directory is deployed to this place:

myusername.github.io/myusername/pagefind

That is because my repo name and username are the same, as is the default situation for Github Pages.
Because of this, you need to modify the HTML code:

  <link href="/myusername/pagefind/pagefind-ui.css" rel="stylesheet">
  <script src="/myusername/pagefind/pagefind-ui.js"></script>

Or in my case, since all my HTML files are in one directory at the Website root:

  <link href="./pagefind/pagefind-ui.css" rel="stylesheet">
  <script src="./pagefind/pagefind-ui.js"></script>

It would be helpful to add this to the troubleshooting docs for the library for people using Github Pages websites.