Skip to content

Commit 011a16f

Browse files
sanjay-kvsanjay-kv
authored
Merge pull request #1663 from recodehive/copilot/add-banner-feature-individual-posts
Add "Improve this Blog Post" banner after Giscus comments on individual blog posts
2 parents 3302040 + aea40a5 commit 011a16f

2 files changed

Lines changed: 187 additions & 0 deletions

File tree

‎src/theme/BlogPostItem/Footer/index.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,79 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element {
151151
</section>
152152
)}
153153
{isBlogPostPage && <GiscusComments forceRender />}
154+
{isBlogPostPage && (
155+
<section className={styles.improveBanner} aria-label="Improve this blog post">
156+
<div className={styles.improveIconWrap} aria-hidden="true">
157+
<svg
158+
xmlns="http://www.w3.org/2000/svg"
159+
width="24"
160+
height="24"
161+
viewBox="0 0 24 24"
162+
fill="none"
163+
stroke="currentColor"
164+
strokeWidth="2"
165+
strokeLinecap="round"
166+
strokeLinejoin="round"
167+
>
168+
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
169+
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
170+
</svg>
171+
</div>
172+
<div className={styles.improveContent}>
173+
<h3 className={styles.improveTitle}>Improve this Blog Post</h3>
174+
<p className={styles.improveDescription}>
175+
All our blog posts are open source. Found a typo, want to add more
176+
detail, or have a better explanation? Anyone can contribute and
177+
make this post better for everyone.
178+
</p>
179+
<div className={styles.improveActions}>
180+
{metadata.editUrl && (
181+
<Link
182+
className={styles.improveEditButton}
183+
to={metadata.editUrl}
184+
target="_blank"
185+
rel="noopener noreferrer"
186+
>
187+
<svg
188+
xmlns="http://www.w3.org/2000/svg"
189+
width="16"
190+
height="16"
191+
viewBox="0 0 24 24"
192+
fill="currentColor"
193+
aria-hidden="true"
194+
>
195+
<path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
196+
</svg>
197+
Edit this Post on GitHub
198+
</Link>
199+
)}
200+
<Link
201+
className={styles.improveGuidelinesButton}
202+
to="https://www.recodehive.com/docs/Getting-Started"
203+
target="_blank"
204+
rel="noopener noreferrer"
205+
>
206+
<svg
207+
xmlns="http://www.w3.org/2000/svg"
208+
width="16"
209+
height="16"
210+
viewBox="0 0 24 24"
211+
fill="none"
212+
stroke="currentColor"
213+
strokeWidth="2"
214+
strokeLinecap="round"
215+
strokeLinejoin="round"
216+
aria-hidden="true"
217+
>
218+
<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" />
219+
<path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" />
220+
</svg>
221+
Contributing Guidelines
222+
</Link>
223+
</div>
224+
</div>
225+
</section>
226+
)}
154227
</>
155228
);
156229
}

‎src/theme/BlogPostItem/Footer/styles.module.css‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,3 +145,117 @@
145145
font-size: 1.25rem;
146146
}
147147
}
148+
149+
/* Improve this Blog Post banner */
150+
.improveBanner {
151+
width: 100%;
152+
margin-top: 2rem;
153+
padding: 1.5rem;
154+
border-radius: 16px;
155+
background: #e6f4f1;
156+
background: color-mix(in srgb, var(--ifm-color-success-contrast-background, #e6f4f1) 60%, transparent);
157+
border: 1px solid rgba(26, 122, 92, 0.2);
158+
border: 1px solid color-mix(in srgb, var(--ifm-color-success) 20%, transparent);
159+
display: flex;
160+
align-items: flex-start;
161+
gap: 1.25rem;
162+
box-sizing: border-box;
163+
}
164+
165+
.improveIconWrap {
166+
flex-shrink: 0;
167+
width: 48px;
168+
height: 48px;
169+
border-radius: 10px;
170+
background: rgba(26, 122, 92, 0.15);
171+
background: color-mix(in srgb, var(--ifm-color-success) 15%, transparent);
172+
display: grid;
173+
place-items: center;
174+
color: var(--ifm-color-success-dark, #1e7a5c);
175+
}
176+
177+
.improveContent {
178+
min-width: 0;
179+
flex: 1;
180+
}
181+
182+
.improveTitle {
183+
margin: 0 0 0.4rem;
184+
font-size: 1.15rem;
185+
font-weight: 700;
186+
line-height: 1.3;
187+
color: var(--ifm-font-color-base);
188+
letter-spacing: -0.01em;
189+
}
190+
191+
.improveDescription {
192+
margin: 0 0 1rem;
193+
font-size: 0.95rem;
194+
line-height: 1.6;
195+
color: var(--ifm-color-emphasis-800);
196+
}
197+
198+
.improveActions {
199+
display: flex;
200+
flex-wrap: wrap;
201+
gap: 0.65rem;
202+
}
203+
204+
.improveEditButton {
205+
display: inline-flex;
206+
align-items: center;
207+
gap: 0.45rem;
208+
padding: 0.5rem 1.1rem;
209+
border-radius: 8px;
210+
background: var(--ifm-color-success-dark, #1a7a5c);
211+
color: #fff !important;
212+
font-size: 0.9rem;
213+
font-weight: 600;
214+
text-decoration: none !important;
215+
border: none;
216+
cursor: pointer;
217+
transition: background 0.15s;
218+
}
219+
220+
.improveEditButton:hover {
221+
background: var(--ifm-color-success-darker, #155f47);
222+
text-decoration: none !important;
223+
}
224+
225+
.improveGuidelinesButton {
226+
display: inline-flex;
227+
align-items: center;
228+
gap: 0.45rem;
229+
padding: 0.5rem 1.1rem;
230+
border-radius: 8px;
231+
background: var(--ifm-background-color);
232+
color: var(--ifm-font-color-base) !important;
233+
font-size: 0.9rem;
234+
font-weight: 600;
235+
text-decoration: none !important;
236+
border: 1px solid var(--ifm-color-emphasis-300);
237+
cursor: pointer;
238+
transition: background 0.15s, border-color 0.15s;
239+
}
240+
241+
.improveGuidelinesButton:hover {
242+
background: var(--ifm-color-emphasis-100);
243+
text-decoration: none !important;
244+
}
245+
246+
@media (max-width: 640px) {
247+
.improveBanner {
248+
flex-direction: column;
249+
gap: 1rem;
250+
padding: 1rem;
251+
}
252+
253+
.improveActions {
254+
flex-direction: column;
255+
}
256+
257+
.improveEditButton,
258+
.improveGuidelinesButton {
259+
justify-content: center;
260+
}
261+
}

0 commit comments

Comments
 (0)