Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ci: merge staging to master #93

Merged
merged 1 commit into from
Jul 10, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 21 additions & 39 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,10 @@
# Polykey-Docs

staging:[![pipeline status](https://gitlab.com/MatrixAI/open-source/Polykey-Docs/badges/staging/pipeline.svg)](https://gitlab.com/MatrixAI/open-source/Polykey-Docs/commits/staging)
master:[![pipeline status](https://gitlab.com/MatrixAI/open-source/Polykey-Docs/badges/master/pipeline.svg)](https://gitlab.com/MatrixAI/open-source/Polykey-Docs/commits/master)

Documentation for Polykey. This is mirrored to Gitlab at https://gitlab.com/MatrixAI/open-source/Polykey-Docs.

GitLab builds it via the CI/CD into static pages, rendering the markdown files and templates it within the branding of [polykey.com](https://polykey.com).

The CI/CD pushes it to [polykey.com/docs](https://polykey.com/docs) which is hosted by Cloudflare's pages and worker system.
Documentation for Polykey.

## Development

Run `nix-shell`, and once you're inside, you can use:
Run `nix develop`, and once you're inside, you can use:

```sh
# starts a local version
Expand All @@ -26,36 +19,33 @@ npm run lint
npm run lintfix
```

You need to do setup the `.env` from `.env.example` if you want to successfully deploy to Cloudflare.

We use Git LFS to store all media in `images/**`. It's important to ensure that `git-lfs` is installed on your system before you contribute anything (on NixOS, it is installed as a separate package to `git`). By default anything put under `images/**` when using `git add` (after LFS is setup) will be uploaded to LFS, and thus the repository will only have links. Because LFS is enabled, it is used on both GitHub and GitLab.

If this is the first time you cloned the repository, you must use `git lfs install` to ensure your local repository has LFS setup. It may be automatically setup if you already had it installed prior to cloning.
## Deployment

Pro-tip, if we need to make sure files that were accidentally not put into LFS must be put into LFS, the command to use is:
Development:

```sh
git lfs migrate import --include="images/**" --everything
git lfs migrate import --include="files/**" --everything
npm run build
npm run deploy
```

Sometimes when you change branches, certain LFS references may not yet be resolved, in those cases you should just use (such as doing a `git lfs migrate import`):
Production:

```sh
git lfs pull
npm run build
npm run deploy -- --env production
```

## Contributing

Because we use docusaurus, we can choose to write in markdown, TSX or MDX.
Because we use Docusaurus, we can choose to write in markdown, TSX or MDX.

### HTML Syntax

Sometimes markdown syntax just doesn't cut it, and HTML syntax needs to be used.

While `docusaurus` is flexible, GitHub/GitLab is not.
While Docusaurus is flexible, GitHub is not.

GitHub/GitLab will process the markdown and then sanitizes the HTML: https://github.com/github/markup#github-markup.
GitHub will process the markdown and then sanitizes the HTML: https://github.com/github/markup#github-markup.

There is a limited set of HTML tags are here: https://github.com/gjtorikian/html-pipeline/blob/03ae30d713199c2562951d627b98b75dc16939e4/lib/html/pipeline/sanitization_filter.rb#L40-L49

Expand All @@ -74,21 +64,21 @@ Markdown supports 2 ways of referencing images:

The former is markdown syntax, the latter is HTML tag.

In order to maintain portability, we always use absolute paths. This works on both GitHub/GitLab markdown rendering and also for `docusaurus`.
In order to maintain portability, we always use absolute paths. This works on both GitHub markdown rendering and also for Docusaurus.

On GitHub/GitLab, which renders the markdown directly, the relative paths are considered relative to the location of the markdown file referencing the path. The absolute paths are considered relative to the root of the project repository. Therefore because `images` directory is located at the project root, it ends up being routable.
On GitHub, which renders the markdown directly, the relative paths are considered relative to the location of the markdown file referencing the path. The absolute paths are considered relative to the root of the project repository. Therefore because the `images` directory is located at the project root, it ends up being routable.

With `docusaurus`, the absolute paths are looked up relative to `static` directory. Inside the `static` directory we have created symlinks pointing back to `../images`. This allows `docusaurus` to also resolve these paths which will be copied into the `/build/` directory.
With Docusaurus, the absolute paths are looked up relative to `static` directory. Inside the `static` directory we have created symlinks pointing back to `../images`. This allows Docusaurus to also resolve these paths which will be copied into the `/build/` directory.

Note that `docusaurus` doesn't do any special rendering for HTML tags, it uses the `src` as is. While markdown references will be further processed with webpack. It is therefore preferable to use markdown syntax instead. The `docusaurus` does support a variant of the HTML tag:
Note that Docusaurus doesn't do any special rendering for HTML tags, it uses the `src` as is. While markdown references will be further processed with webpack. It is therefore preferable to use markdown syntax instead. Docusaurus does support a variant of the HTML tag:

```md
<img src={require('/images/foobar.png').default} />
```

However this does not work in GitHub/GitLab. So this is not recommended to use.
However this does not work in GitHub. So this is not recommended to use.

Therefore if you want to add inline styles to an image and still use markdown syntax so you get the benefit of `docusaurus` asset processing, the styles must be applied outside the image reference in a surrounding tag:
Therefore if you want to add inline styles to an image and still use markdown syntax so you get the benefit of Docusaurus asset processing, the styles must be applied outside the image reference in a surrounding tag:

```md
<div align="center">
Expand All @@ -98,7 +88,7 @@ Therefore if you want to add inline styles to an image and still use markdown sy
</div>
```

Take note of the whitespace newlines between, if no newlines are used, GitHub/GitLab will interpret this as all HTML. Also note that `<p></p>` will not work.
Take note of the whitespace newlines between, if no newlines are used, GitHub will interpret this as all HTML. Also note that `<p></p>` will not work.

Note that this won't work for resizing the images unfortunately. You have to apply the `width` attribute directly to the `<img />` tag. See: https://github.com/facebook/docusaurus/discussions/6465 for more information.

Expand All @@ -119,14 +109,6 @@ The `pathname://` bypasses the client side routing forcing server side routing.

The `target: '_self'` ensures that the same frame is used instead of creating a new frame.

## Deployment

You need to setup `.env` from `.env.example`.

Then you can build `npm run build`.

Finally run `npm run deploy`.

This will deploy the development workers first.
## License

If you want to deploy production workers, you have to `npm run deploy -- --env production`.
Polykey-Docs is licensed under GPL-3.0, you may read the terms of the license [here](LICENSE).