opensource/kilocode
3
0
Fork 0
mirror of https://github.com/Kilo-Org/kilocode.git synced 2026-09-01 15:32:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(kilo-docs): add image gallery tag

Browse Source
This commit is contained in:
kiloconnect[bot]
2026-05-13 15:34:28 +00:00
parent 2a9144e8e6
commit c3acddd306
5 changed files with 56 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/kilo-docs/components/ImageGallery.tsx
+33
View File
@@ -0,0 +1,33 @@
import React, { Children, ReactNode } from "react"
interface ImageGalleryProps {
children: ReactNode
columns?: string
}
export function ImageGallery({ children, columns = "3" }: ImageGalleryProps) {
const count = Number(columns)
const cols = Number.isFinite(count) && count > 0 ? Math.min(Math.floor(count), 4) : 3
return (
<div
style={{
display: "grid",
gridTemplateColumns: `repeat(auto-fit, minmax(min(100%, ${Math.floor(960 / cols)}px), 1fr))`,
gap: "1rem",
alignItems: "start",
margin: "1.5rem 0",
}}
>
{Children.map(children, (child) => (
<div
style={{
minWidth: 0,
}}
>
{child}
</div>
))}
</div>
)
}
packages/kilo-docs/components/index.js
+1
View File
@@ -5,6 +5,7 @@ export * from "./CopyPageButton"
export * from "./Heading"
export * from "./Icon"
export * from "./Image"
export * from "./ImageGallery"
export * from "./KiloCodeIcon"
export * from "./PageFooter"
export * from "./PageVersionSwitcher"
packages/kilo-docs/markdoc/tags/image-gallery.markdoc.ts
+12
View File
@@ -0,0 +1,12 @@
import { ImageGallery } from "../../components"
export const imageGallery = {
render: ImageGallery,
children: ["tag"],
attributes: {
columns: {
type: String,
description: "Preferred number of image columns on wide screens",
},
},
}
packages/kilo-docs/markdoc/tags/index.ts
+1
View File
@@ -4,6 +4,7 @@ export * from "./codicon.markdoc"
export * from "./tabs.markdoc"
export * from "./icon.markdoc"
export * from "./image.markdoc"
export * from "./image-gallery.markdoc"
export * from "./kilo-code-icon.markdoc"
export * from "./video.markdoc"
export * from "./youtube.markdoc"
packages/kilo-docs/pages/code-with-ai/platforms/mobile.md
+9 -5
View File
@@ -21,15 +21,19 @@ The mobile app lets you:
- Monitor and view all non-remote sessions in one place.
- Create, onboard, and manage KiloClaw instances.
{% image src="/docs/img/mobile-apps/home.webp" alt="Kilo Code mobile home screen showing KiloClaw and active agent sessions" width="360px" caption="Start coding tasks, open KiloClaw, and resume active sessions from the mobile home screen." /%}
{% imageGallery columns="3" %}
{% image src="/docs/img/mobile-apps/home.webp" alt="Kilo Code mobile home screen showing KiloClaw and active agent sessions" caption="Start coding tasks, open KiloClaw, and resume active sessions from the mobile home screen." /%}
{% image src="/docs/img/mobile-apps/new-session.webp" alt="Kilo Code mobile new session screen with coding mode selector" width="360px" caption="Create a new Cloud Agent session and choose the right mode for the task." /%}
{% image src="/docs/img/mobile-apps/new-session.webp" alt="Kilo Code mobile new session screen with coding mode selector" caption="Create a new Cloud Agent session and choose the right mode for the task." /%}
{% image src="/docs/img/mobile-apps/session-chat.webp" alt="Kilo Code mobile session chat with an active coding task" width="360px" caption="Review progress and continue coding conversations from the mobile app." /%}
{% image src="/docs/img/mobile-apps/session-chat.webp" alt="Kilo Code mobile session chat with an active coding task" caption="Review progress and continue coding conversations from the mobile app." /%}
{% /imageGallery %}
{% image src="/docs/img/mobile-apps/kiloclaw-chat.webp" alt="KiloClaw chat in the Kilo Code mobile app" width="360px" caption="Chat with KiloClaw on mobile." /%}
{% imageGallery columns="2" %}
{% image src="/docs/img/mobile-apps/kiloclaw-chat.webp" alt="KiloClaw chat in the Kilo Code mobile app" caption="Chat with KiloClaw on mobile." /%}
{% image src="/docs/img/mobile-apps/session-filters.webp" alt="Kilo Code mobile session filter panel for Cloud Extension CLI Slack and other platforms" width="360px" caption="Filter sessions by platform and project, including Cloud, Extension, CLI, Slack, and other sessions." /%}
{% image src="/docs/img/mobile-apps/session-filters.webp" alt="Kilo Code mobile session filter panel for Cloud Extension CLI Slack and other platforms" caption="Filter sessions by platform and project, including Cloud, Extension, CLI, Slack, and other sessions." /%}
{% /imageGallery %}
## Android App