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 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
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`.
|
||||
|
||||
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).
|
||||
|
|
|
@ -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)),
|
||||
];
|
||||
|
||||
|
|
|
@ -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)];
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue