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:
parent
54b4a57ff4
commit
80aa112649
|
@ -35,6 +35,6 @@ FROM icr.io/quantum-computing/iqp-channel-docs-dev
|
||||||
|
|
||||||
COPY docs/ /home/node/app/docs
|
COPY docs/ /home/node/app/docs
|
||||||
COPY translations/ /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
|
EXPOSE 3000 5001
|
||||||
|
|
18
README.md
18
README.md
|
@ -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`.
|
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
|
```markdown
|
||||||
![Your image](/images/build/your-file/your_image.png)
|
![Your image](/images/build/your-file/your_image.png)
|
||||||
```
|
```
|
||||||
|
|
||||||
To add an inline images,
|
To add an inline images:
|
||||||
|
|
||||||
```markdown
|
```markdown
|
||||||
Inline ![Inline image](/images/build/your-file/your_image.png) image
|
Inline ![Inline image](/images/build/your-file/your_image.png) image
|
||||||
```
|
```
|
||||||
|
|
||||||
To include a caption
|
To include a caption:
|
||||||
|
|
||||||
```markdown
|
```markdown
|
||||||
![Your image](/images/build/your-file/your_image.png "Image caption")
|
![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.
|
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
|
## Math
|
||||||
|
|
||||||
We use [LaTeX](https://www.latex-project.org) to write math, which gets rendered by the library [KaTeX](https://katex.org).
|
We use [LaTeX](https://www.latex-project.org) to write math, which gets rendered by the library [KaTeX](https://katex.org).
|
||||||
|
|
|
@ -76,9 +76,7 @@ async function main() {
|
||||||
|
|
||||||
const fileBatches = await determineFileBatches(args);
|
const fileBatches = await determineFileBatches(args);
|
||||||
const otherFiles = [
|
const otherFiles = [
|
||||||
...(await globby("{public,docs}/**/*.{png,jpg,gif,svg}")).map(
|
...(await globby("public/**/*")).map((fp) => new File(fp, [])),
|
||||||
(fp) => new File(fp, []),
|
|
||||||
),
|
|
||||||
...SYNTHETIC_FILES.map((fp) => new File(fp, [], true)),
|
...SYNTHETIC_FILES.map((fp) => new File(fp, [], true)),
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
|
@ -58,7 +58,7 @@ export class Link {
|
||||||
if (this.value === "") {
|
if (this.value === "") {
|
||||||
return [originFile];
|
return [originFile];
|
||||||
}
|
}
|
||||||
if (this.value.startsWith("/images")) {
|
if (this.value.startsWith("/images") || this.value.startsWith("/videos")) {
|
||||||
return [path.join("public/", this.value)];
|
return [path.join("public/", this.value)];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
2
start
2
start
|
@ -39,7 +39,7 @@ def main() -> None:
|
||||||
f"{PWD}/docs:/home/node/app/docs",
|
f"{PWD}/docs:/home/node/app/docs",
|
||||||
*translation_volume_mounts(),
|
*translation_volume_mounts(),
|
||||||
"-v",
|
"-v",
|
||||||
f"{PWD}/public/images:/home/node/app/packages/preview/public/images",
|
f"{PWD}/public:/home/node/app/packages/preview/public",
|
||||||
"-p",
|
"-p",
|
||||||
"3000:3000",
|
"3000:3000",
|
||||||
"-p",
|
"-p",
|
||||||
|
|
Loading…
Reference in New Issue