a3952f1d31
Follow-up to https://github.com/matrix-org/matrix-public-archive/pull/171 and https://github.com/matrix-org/matrix-public-archive/pull/175 where they broke because we went from scripts to modules. Part of https://github.com/matrix-org/matrix-public-archive/issues/132 Before this PR, we were seeing these warning in the Chrome devtools console: ``` A preload for 'foo' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute. ``` This is caused by a credentials mode mismatch between the `<script type="module">` tag and the `Link` header. A `<script type="module">` with no `crossorigin` attribute indicates a credentials mode of `omit` and a naive `Link: </foo-url>; rel=preload; as=script;` has a default credentials mode of `same-origin`, hence the mismatch and warning we're seeing. We could set the credentials mode to match using `Link: </foo-url>; rel=preload; as=script; omit` but there is an even better option! We can use the dedicated `Link: </foo-url>; rel=modulepreload` link type which not only downloads and puts the the file in the cache like a normal preload but the browser also knows it's a JavaScript module now and can parse/compile it so it's ready to go. --- Future consideration: Adding `nopush` to preload link headers. Many servers initiate an HTTP/2 Server Push when they encounter a preload link in HTTP header form otherwise. Do we want/care about that (or maybe we don't)? (mentioned in https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf#6f54) --- References for preload `Link` headers: - https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf#6f54 - https://html.spec.whatwg.org/multipage/links.html#link-type-preload - https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/#headers - https://developer.chrome.com/blog/modulepreload/#ok-so-why-doesnt-link-relpreload-work-for-modules |
||
|---|---|---|
| .github/workflows | ||
| build-scripts | ||
| client | ||
| config | ||
| server | ||
| shared | ||
| test | ||
| .eslintignore | ||
| .eslintrc.json | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc.json | ||
| Dockerfile | ||
| LICENSE.md | ||
| README.md | ||
| docker-health-check.js | ||
| package-lock.json | ||
| package.json | ||
README.md
Matrix Public Archive
In the vein of feature parity with
Gitter, the goal is to make a
public archive site for world_readable Matrix rooms like Gitter's archives
which search engines can index and keep all of the content accessible/available.
There is already https://view.matrix.org/
(https://github.com/matrix-org/matrix-static) but there is some desire to make
something with more Element-feeling polish and loading faster (avoid the slow
502's errors that are frequent on view.matrix.org).
Demo videos
Aug 2022 (blog post): A quick intro of what the project looks like, the goals, what it accomplishes, and how it's a new portal into the Matrix ecosystem.- Oct 2022: Showing off the room directory landing page used to browse everything available in the archive.
Technical overview
We server-side render (SSR) the Hydrogen
Matrix client on a Node.js server (since both use JavaScript) and serve pages on the fly
(with some Cloudflare caching on top) when someone requests
/archives/r/matrixhq:matrix.org/${year}/${month}/${day}. To fetch the events for a
given day/time, we use MSC3030's
/timestamp_to_event endpoint to jump to a given day in the timeline and fetch the
messages from a Matrix homeserver.
Re-using Hydrogen gets us pretty and native(to Element) looking styles and keeps the maintenance burden of supporting more event types in Hydrogen.
Setup
Prerequisites
- Node.js v16
- We only need v16 because it includes
require('crypto').webcrypto.subtlefor Matrix encryption (olm) which can't be disabled in Hydrogen yet.
- We only need v16 because it includes
- A Matrix homeserver that supports MSC3030's
/timestamp_to_eventendpoint- Synapse 1.73.0+
Get the app running
$ npm install
# Edit `config/config.user-overrides.json` so that `matrixServerUrl` points to
# your homeserver and has `matrixAccessToken` defined
$ cp config/config.default.json config/config.user-overrides.json
$ npm run start
# To enable tracing, add the `--tracing` flag
$ npm run start -- --tracing
Development
# Clone and install the `matrix-public-archive` project
$ git clone git@github.com:matrix-org/matrix-public-archive.git
$ cd matrix-public-archive
$ npm install
# Edit `config/config.user-overrides.json` so that `matrixServerUrl` points to
# your homeserver and has `matrixAccessToken` defined
$ cp config/config.default.json config/config.user-overrides.json
# This will watch for changes, rebuild bundles and restart the server
$ npm run start-dev
# To enable tracing, add the `--tracing` flag
$ npm run start-dev -- --tracing
If you want to make changes to the underlying Hydrogen SDK as well, you can locally link it into this project with the following instructions:
# We need to use a draft branch of Hydrogen to get the custom changes needed for
# `matrix-public-archive` to run. Hopefully soon, we can get all of the custom
# changes mainlined so this isn't necessary.
$ git clone git@github.com:vector-im/hydrogen-web.git
$ cd hydrogen-web
$ git checkout madlittlemods/matrix-public-archive-scratch-changes
$ yarn install
$ yarn build:sdk
$ cd target/ && npm link && cd ..
$ cd ..
$ cd matrix-public-archive
$ npm link hydrogen-view-sdk
Running tests
See the testing readme.