scnc
/
qiskit-documentation
mirror of https://github.com/Qiskit/documentation.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add support for videos (#633) 

Turns out videos have always been supported! But we needed to:

1. Change our Docker images to load `public/videos`
2. Teach our link checker about videos
3. Document how to use them in the README

This unblocks https://github.com/Qiskit/documentation/pull/622. Example
of that PR with this one applied:

<img width="857" alt="Screenshot 2024-01-16 at 1 40 27 PM"
src="https://github.com/Qiskit/documentation/assets/14852634/779c0257-92aa-4814-bb67-3b594a98704b">
This commit is contained in:
Eric Arellano 2024-01-17 12:13:37 -05:00 committed by GitHub
parent 54b4a57ff4
commit 80aa112649
5 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Dockerfile
View File

@ -35,6 +35,6 @@ FROM icr.io/quantum-computing/iqp-channel-docs-dev
COPY docs/ /home/node/app/docs
COPY translations/ /home/node/app/docs
COPY public/images /home/node/app/public/images
COPY public /home/node/app/public
EXPOSE 3000 5001

18
README.md
View File

@ -282,19 +282,19 @@ Finally, add the file to the folder's `_toc.json`, such as `start/_toc.json`. Th
Images are stored in the `public/images` folder. You should use subfolders to organize the files. For example, images for `start/my-file.mdx` should be stored like `public/images/start/my-file/img1.png`.
To use the image inside an MDX page:
To use the image:
```markdown
![Your image](/images/build/your-file/your_image.png)
```
To add an inline images,
To add an inline images:
```markdown
Inline ![Inline image](/images/build/your-file/your_image.png) image
```
To include a caption
To include a caption:
```markdown
![Your image](/images/build/your-file/your_image.png "Image caption")
@ -302,6 +302,18 @@ To include a caption
You can include a version of the image to be with the dark theme. You only need to create an image with the same name ending in `@dark`. So for example, if you have a `sampler.png` image, the dark version would be `sampler@dark.png`. This is important for images that have a white background.
## Videos
Videos are stored in the `public/videos` folder. You should use subfolders to organize the files. For example, images for `start/my-file.mdx` should be stored like `public/videos/start/my-file/video1.mp4`.
To add a video:
```markdown
<video title="Write a description of the video here as 'alt text' for accessibility." class="max-w-auto h-auto" controls>
<source src="/videos/run/sessions/demo.mp4" type="video/mp4"></source>
</video>
```
## Math
We use [LaTeX](https://www.latex-project.org) to write math, which gets rendered by the library [KaTeX](https://katex.org).

4
scripts/commands/checkLinks.ts
View File

@ -76,9 +76,7 @@ async function main() {
const fileBatches = await determineFileBatches(args);
const otherFiles = [
...(await globby("{public,docs}/**/*.{png,jpg,gif,svg}")).map(
(fp) => new File(fp, []),
),
...(await globby("public/**/*")).map((fp) => new File(fp, [])),
...SYNTHETIC_FILES.map((fp) => new File(fp, [], true)),
];

2
scripts/lib/links/LinkChecker.ts
View File

@ -58,7 +58,7 @@ export class Link {
if (this.value === "") {
return [originFile];
}
if (this.value.startsWith("/images")) {
if (this.value.startsWith("/images") || this.value.startsWith("/videos")) {
return [path.join("public/", this.value)];
}

2
start
View File

@ -39,7 +39,7 @@ def main() -> None:
f"{PWD}/docs:/home/node/app/docs",
*translation_volume_mounts(),
"-v",
f"{PWD}/public/images:/home/node/app/packages/preview/public/images",
f"{PWD}/public:/home/node/app/packages/preview/public",
"-p",
"3000:3000",
"-p",