Display preview of Mew linked URLs on hover

[mattyg]

Currently, when hovering over a link in a mew, we display the full URL that is linked to.

Ideally we would display an image preview of the website, instead. This would require fetching the remote site, generating an image, and displaying that image to the user.

[mattyg]

We currently don't have the means to fetch a remote URL avoiding CORS restrictions inside our hc launch application. This could be made available if this feature was implemented in launcher: https://github.com/holochain/launcher/issues/125

Or alternatively if holochain core exposed some ability to make an http request from the system.

[mattyg]

From our meeting today we decided a low-effort lift to make this happen would be to run a CORS proxy in a free cloudflare service worker, and statically code that into the mewsfeed front-end.

[bierlingm]

Here's how ChatGPT told me to go about it:

Setting up a CORS proxy in a free Cloudflare service worker can be done by following these steps:

1. Log in to your Cloudflare account and go to the Workers section.
2. Click on the "Create a Worker" button.
3. In the editor window that appears, replace the existing code with the following code:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // Set the CORS headers
  const headers = new Headers({
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE,OPTIONS',
    'Access-Control-Allow-Headers': 'Content-Type'
  })

  // Make the request to the original URL
  const response = await fetch(request)

  // Create a new response object with the CORS headers
  return new Response(response.body, {
    status: response.status,
    statusText: response.statusText,
    headers: headers
  })
}

4. Click on the "Save and Deploy" button to deploy the worker.
5. Once the worker is deployed, you can use it as a CORS proxy by sending requests to the worker's URL with the original URL passed as a query parameter. For example, if your worker's URL is https://example.com/myworker, you can send a request to https://example.com/myworker?url=https://example.com/original-url to use the worker as a CORS proxy for https://example.com/original-url. Note: Please keep in mind that using a CORS proxy can have security implications, as it can allow third-party sites to make requests on behalf of your site. Make sure to use this method only for legitimate purposes and to secure the endpoint that the proxy is pointing to.