Skip to content

fixed the bug in the searching-pulling section to make it better looking and more readable #561

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.

Sign up for GitHub

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

Closed
antedotee wants to merge 1 commit into from
Closed

fixed the bug in the searching-pulling section to make it better looking and more readable #561

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
55 changes: 26 additions & 29 deletions src/components/content/CodeExampleSection/data.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,52 @@
const searchExample = {
command: `$ podman search httpd`,
// prettier-ignore
code: `
code: `
INDEX NAME DESCRIPTION STARS OFFICIAL AUTOMATED
docker.io docker.io/library/httpd The Apache HTTP Server Project 3762 [OK]
docker.io docker.io/centos/httpd-24-centos7 Platform for running Apache h... 40
quay.io quay.io/centos7/httpd-24-centos-7 Platform for running Apache h... 0 [OK]
docker.io docker.io/centos/httpd 34 [OK]
redhat.com registry.access.redhat.com/ubi8/httpd 0
quay.io quay.io/redhattraining/httpd-parent 0 [OK]



`,
quay.io quay.io/redhattraining/httpd-parent 0 [OK]`,
label: `Podman can search for images on remote registries with some simple keywords.`,
note: `**Note**: Podman searches in different registries. Therefore it is recommend to use the full image name (docker.io/library/httpd instead of httpd) to ensure that you are using the correct image.`,
};

const searchFilterExample = {
command: `$ podman search httpd --filter=is-official`,
// prettier-ignore
code:`
code: `
INDEX NAME DESCRIPTION STARS OFFICIAL AUTOMATED
docker.io docker.io/library/httpd The Apache HTTP Server Project 3762 [OK]
$ podman pull docker.io/library/httpd
docker.io docker.io/library/httpd The Apache HTTP Server Project 3762 [OK]`,
label: `You can also enhance your search with filters.`,
};

const pullExample = {
command: `$ podman pull docker.io/library/httpd`,
// prettier-ignore
code: `
Trying to pull docker.io/library/httpd:latest...
Getting image source signatures
Copying blob ab86dc02235d done
Copying blob ba1caf8ba86c done
Copying blob eff15d958d66 done
Copying blob 635a49ba2501 done
Copying blob 600feb748d3c done
Copying config d294bb32c2 done
Copying blob ab86dc02235d done
Copying blob ba1caf8ba86c done
Copying blob eff15d958d66 done
Copying blob 635a49ba2501 done
Copying blob 600feb748d3c done
Copying config d294bb32c2 done
Writing manifest to image destination
Storing signatures
d294bb32c2073ecb5fb27e7802a1e5bec334af69cac361c27e6cb8546fdd14e7



`,
label: `You can also enhance your search with filters.`,
extra: `Downloading (pulling) an image is easy, too.`,
d294bb32c2073ecb5fb27e7802a1e5bec334af69cac361c27e6cb8546fdd14e7`,
label: `Downloading (pulling) an image is easy, too.`,
};

const imagesExample = {
command: `$ podman images`,
// prettier-ignore
code:`
code: `
REPOSITORY TAG IMAGE ID CREATED SIZE
docker.io/library/httpd latest d294bb32c207 12 hours ago 148 MB

`,
label: `Podman can search for images on remote registries with some simple keywords.`,
extra: `**Note**: Podman searches in different registries. Therefore it is recommend to use the full image name (docker.io/library/httpd instead of httpd) to ensure that you are using the correct image.`,
docker.io/library/httpd latest d294bb32c207 12 hours ago 148 MB`,
label: `Listing the images you've already pulled is just as simple.`,
};

export { searchExample, searchFilterExample, imagesExample };
export { searchExample, searchFilterExample, pullExample, imagesExample };
60 changes: 16 additions & 44 deletions src/components/content/CodeExampleSection/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,70 +1,42 @@
import React from 'react';
import CodeBlock from '@theme/CodeBlock';
import Markdown from '@site/src/components/utilities/Markdown';
import { searchExample, searchFilterExample, imagesExample } from './data';
import { searchExample, searchFilterExample, pullExample, imagesExample } from './data';

interface CodeProps {
command: string;
code: string;
label: string;
extra?: string;
className?: string;
note?: string;
}
const RenderLabelledCode = (props: CodeProps) => {
const { command, code, label, extra, className } = props;
const { command, code, label, note } = props;

return (
<div className={`w-96 md:max-w-md ${className}`}>
<div className="m-4 max-w-md rounded-md bg-blue-700 p-4 text-center shadow-md dark:bg-blue-900 md:max-w-sm md:text-start lg:mx-0">
<div className="mx-auto my-10 max-w-xs sm:max-w-md md:max-w-2xl lg:max-w-4xl xl:max-w-6xl">
<div className="rounded-md bg-blue-700 p-4 text-center shadow-md dark:bg-blue-900">
<Markdown text={label} styles="text-white dark:text-white" />
</div>
{extra && (
<div className="mx-4 mb-2 mt-4 hidden max-w-md rounded-md bg-blue-700 p-4 shadow-md dark:bg-blue-900 md:mx-0 md:block md:max-w-sm">
<Markdown text={extra} styles="text-white dark:text-white" />
</div>
)}
<CodeBlock language="bash" showLineNumbers className="mx-4 my-2 max-w-md md:hidden">
<CodeBlock language="bash" showLineNumbers className="mt-4 overflow-auto text-left">
{command}
{code}
</CodeBlock>
</div>
);
};

interface DeskProps {
className: string;
}
const DesktopCodeBlock = (props: DeskProps) => {
return (
<div className={`container hidden md:block ${props.className}`}>
<CodeBlock language="bash" showLineNumbers>
{searchExample.command}
{searchExample.code}
{searchFilterExample.command}
{searchFilterExample.code}
{imagesExample.command}
{imagesExample.code}
</CodeBlock>
{note && (
<div className="mt-3 border-l-2 border-gray-300 pl-4 dark:border-gray-500">
<Markdown text={note} styles="[&_p]:mb-0 [&_p]:text-sm [&_p]:text-gray-700 dark:[&_p]:text-gray-100" />
</div>
)}
</div>
);
};

function CodeExampleSection() {
return (
<div className="container my-12 grid place-items-center gap-4 md:grid-cols-12 md:place-items-end">
<DesktopCodeBlock className="-z-50 md:col-span-11 md:col-start-1 md:row-start-1 md:row-end-4 md:place-self-center lg:col-span-10 lg:col-start-1" />
<RenderLabelledCode
{...searchExample}
className="row-start-1 md:col-span-5 md:col-start-9 md:self-end lg:col-span-3 lg:col-start-10"
/>
<RenderLabelledCode
{...searchFilterExample}
className="row-start-2 md:col-span-5 md:col-start-9 lg:col-span-3 lg:col-start-10"
/>
<RenderLabelledCode
{...imagesExample}
className="row-start-3 md:col-span-5 md:col-start-9 lg:col-span-3 lg:col-start-10"
/>
<div className="container my-12">
<RenderLabelledCode {...searchExample} />
<RenderLabelledCode {...searchFilterExample} />
<RenderLabelledCode {...pullExample} />
<RenderLabelledCode {...imagesExample} />
</div>
);
}
Expand Down