Skip to content

Commit c92a6a5

Browse files
yuluo-yxyuluo-yx
authored
docs: add run precommit by docker or podman (#218)
* docs: add run precommit by docker or podman Signed-off-by: yuluo-yx <[email protected]> * fix: update by comment Signed-off-by: yuluo-yx <[email protected]> * chore: fix code style Signed-off-by: yuluo-yx <[email protected]> --------- Signed-off-by: yuluo-yx <[email protected]>
1 parent ebba50d commit c92a6a5

File tree

2 files changed

+235
-10
lines changed

2 files changed

+235
-10
lines changed

‎website/src/pages/community/community-page.module.css‎

Lines changed: 190 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -94,14 +94,130 @@
9494
}
9595

9696
.codeBlock {
97-
background: var(--ifm-code-background);
98-
border: 1px solid var(--ifm-color-emphasis-200);
99-
border-radius: 8px;
100-
padding: 1rem;
101-
font-family: var(--ifm-font-family-monospace);
97+
background: linear-gradient(135deg, #F6F8FA 0%, #FFFFFF 50%, #F0F3F6 100%);
98+
border-radius: 16px;
99+
box-shadow:
100+
0 20px 60px rgba(9, 105, 218, 0.15),
101+
0 8px 32px rgba(88, 166, 255, 0.1),
102+
inset 0 1px 0 rgba(255, 255, 255, 0.8);
103+
transition: all 0.4s ease;
104+
border: 2px solid;
105+
border-image: linear-gradient(45deg, #58A6FF, #FDB516, #A855F7) 1;
106+
overflow: hidden;
107+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
108+
position: relative;
109+
margin: 1rem 0;
110+
max-width: 100%;
111+
}
112+
113+
.codeBlock::before {
114+
content: '';
115+
position: absolute;
116+
top: 0;
117+
left: 0;
118+
right: 0;
119+
bottom: 0;
120+
background: linear-gradient(45deg, rgba(88, 166, 255, 0.1), rgba(253, 181, 22, 0.1), rgba(168, 85, 247, 0.1));
121+
opacity: 0;
122+
transition: opacity 0.3s ease;
123+
pointer-events: none;
124+
}
125+
126+
.codeBlock:hover::before {
127+
opacity: 1;
128+
}
129+
130+
.codeBlock:hover {
131+
transform: translateY(-6px) scale(1.03);
132+
box-shadow:
133+
0 32px 80px rgba(9, 105, 218, 0.25),
134+
0 16px 40px rgba(88, 166, 255, 0.2),
135+
inset 0 1px 0 rgba(255, 255, 255, 0.2);
136+
}
137+
138+
.codeHeader {
139+
background: linear-gradient(90deg, #F0F3F6 0%, #F6F8FA 50%, #F0F3F6 100%);
140+
padding: 1rem 1.5rem;
141+
display: flex;
142+
align-items: center;
143+
justify-content: space-between;
144+
border-bottom: 1px solid rgba(88, 166, 255, 0.2);
145+
position: relative;
146+
}
147+
148+
.codeHeader::after {
149+
content: '';
150+
position: absolute;
151+
bottom: 0;
152+
left: 0;
153+
right: 0;
154+
height: 1px;
155+
background: linear-gradient(90deg, transparent 0%, #58A6FF 50%, transparent 100%);
156+
}
157+
158+
.windowControls {
159+
display: flex;
160+
gap: 0.5rem;
161+
}
162+
163+
.controlButton {
164+
width: 14px;
165+
height: 14px;
166+
border-radius: 50%;
167+
display: block;
168+
transition: all 0.3s ease;
169+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
170+
}
171+
172+
.controlButton:hover {
173+
transform: scale(1.1);
174+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
175+
}
176+
177+
.controlButton:nth-child(1) {
178+
background: radial-gradient(circle, #ff6b6b, #ff5f57);
179+
}
180+
181+
.controlButton:nth-child(2) {
182+
background: radial-gradient(circle, #ffd93d, #ffbd2e);
183+
}
184+
185+
.controlButton:nth-child(3) {
186+
background: radial-gradient(circle, #6bcf7f, #28ca42);
187+
}
188+
189+
.title {
190+
color: #1F2328;
191+
font-size: 0.9rem;
192+
font-weight: 600;
193+
position: absolute;
194+
left: 50%;
195+
transform: translateX(-50%);
196+
background: linear-gradient(45deg, #0969DA, #FDB516);
197+
-webkit-background-clip: text;
198+
-webkit-text-fill-color: transparent;
199+
background-clip: text;
200+
text-shadow: 0 0 10px rgba(9, 105, 218, 0.2);
201+
letter-spacing: 0.5px;
202+
}
203+
204+
.codeContent {
205+
padding: 2rem;
206+
background: linear-gradient(135deg, #F6F8FA 0%, #FFFFFF 50%, #F0F3F6 100%) !important;
207+
overflow-x: auto;
208+
position: relative;
209+
}
210+
211+
.codeText {
212+
margin: 0;
102213
font-size: 0.875rem;
214+
line-height: 1.6;
215+
white-space: pre;
103216
overflow-x: auto;
104-
margin: 1rem 0;
217+
color: #1F2328 !important;
218+
background: transparent !important;
219+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
220+
text-align: left;
105221
}
106222

107223
.steps {
@@ -243,6 +359,51 @@ a:hover {
243359
.stepNumber {
244360
align-self: center;
245361
}
362+
363+
.codeBlock {
364+
border-width: 1px;
365+
margin: 0.5rem 0;
366+
}
367+
368+
.codeText {
369+
font-size: 0.75rem;
370+
line-height: 1.4;
371+
}
372+
373+
.codeContent {
374+
padding: 1.5rem;
375+
}
376+
377+
.codeHeader {
378+
padding: 0.75rem 1rem;
379+
}
380+
381+
.title {
382+
font-size: 0.8rem;
383+
}
384+
385+
.controlButton {
386+
width: 10px;
387+
height: 10px;
388+
}
389+
}
390+
391+
@media (max-width: 480px) {
392+
.codeText {
393+
font-size: 0.7rem;
394+
}
395+
396+
.codeContent {
397+
padding: 1rem;
398+
}
399+
400+
.codeHeader {
401+
padding: 0.5rem 0.75rem;
402+
}
403+
404+
.title {
405+
font-size: 0.75rem;
406+
}
246407
}
247408

248409
/* Dark mode adjustments */
@@ -262,6 +423,27 @@ a:hover {
262423
}
263424

264425
[data-theme='dark'] .codeBlock {
265-
background: var(--ifm-color-emphasis-200);
266-
border-color: var(--ifm-color-emphasis-300);
426+
background: linear-gradient(135deg, #161b22 0%, #0d1117 50%, #161b22 100%);
427+
border-image: linear-gradient(45deg, #58A6FF, #FDB516, #A855F7) 1;
428+
box-shadow:
429+
0 20px 60px rgba(88, 166, 255, 0.15),
430+
0 8px 32px rgba(88, 166, 255, 0.1),
431+
inset 0 1px 0 rgba(255, 255, 255, 0.1);
432+
}
433+
434+
[data-theme='dark'] .codeHeader {
435+
background: linear-gradient(90deg, #161b22 0%, #21262d 50%, #161b22 100%);
436+
border-bottom: 1px solid rgba(88, 166, 255, 0.3);
437+
}
438+
439+
[data-theme='dark'] .codeContent {
440+
background: linear-gradient(135deg, #161b22 0%, #0d1117 50%, #161b22 100%) !important;
441+
}
442+
443+
[data-theme='dark'] .codeText {
444+
color: #e6edf3 !important;
445+
}
446+
447+
[data-theme='dark'] .title {
448+
color: #e6edf3;
267449
}

‎website/src/pages/community/contributing.js‎

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -179,8 +179,51 @@ export default function Contributing() {
179179

180180
<hr />
181181

182-
<h3>Docker</h3>
183-
<p>Coming soon!</p>
182+
<h3>Docker/Podman</h3>
183+
<p>From the above local running method, it can be seen that the process is very troublesome and complicated. Therefore, we have provided running methods based on Docker or Podman. There is no need to install various dependent software; all you need is a container runtime.</p>
184+
<div className={styles.step}>
185+
<span className={styles.stepNumber}>1</span>
186+
<div>
187+
<h4>Make sure Docker/Podman is installed</h4>
188+
<p>docker --version</p>
189+
</div>
190+
</div>
191+
<div className={styles.step}>
192+
<span className={styles.stepNumber}>2</span>
193+
<div>
194+
<h4>Run precommit by Docker/Podman</h4>
195+
<p>make precommit-local</p>
196+
</div>
197+
</div>
198+
<div>
199+
<p>You can also manually enter the container and perform the operation:</p>
200+
<div className={styles.codeBlock}>
201+
<div className={styles.codeHeader}>
202+
<div className={styles.windowControls}>
203+
<span className={styles.controlButton}></span>
204+
<span className={styles.controlButton}></span>
205+
<span className={styles.controlButton}></span>
206+
</div>
207+
<div className={styles.title}>Manual Docker Setup</div>
208+
</div>
209+
<div className={styles.codeContent}>
210+
<pre className={styles.codeText}>
211+
{`# Set the container image
212+
export PRECOMMIT_CONTAINER=ghcr.io/vllm-project/semantic-router/precommit:latest
213+
214+
# Run the container interactively
215+
docker run --rm -it \\
216+
-v $(pwd):/app \\
217+
-w /app \\
218+
--name precommit-container \${PRECOMMIT_CONTAINER} \\
219+
bash
220+
221+
# Inside the container, run the precommit commands
222+
pre-commit install && pre-commit run --all-files`}
223+
</pre>
224+
</div>
225+
</div>
226+
</div>
184227
</div>
185228
</div>
186229
</section>

0 commit comments

Comments
 (0)