diff --git a/src/theme/BlogPostItem/Footer/index.tsx b/src/theme/BlogPostItem/Footer/index.tsx index b3adc070..c406289c 100644 --- a/src/theme/BlogPostItem/Footer/index.tsx +++ b/src/theme/BlogPostItem/Footer/index.tsx @@ -151,6 +151,79 @@ export default function BlogPostItemFooterWrapper(props: Props): JSX.Element { )} {isBlogPostPage && } + {isBlogPostPage && ( +
+ +
+

Improve this Blog Post

+

+ All our blog posts are open source. Found a typo, want to add more + detail, or have a better explanation? Anyone can contribute and + make this post better for everyone. +

+
+ {metadata.editUrl && ( + + + Edit this Post on GitHub + + )} + + + Contributing Guidelines + +
+
+
+ )} ); } diff --git a/src/theme/BlogPostItem/Footer/styles.module.css b/src/theme/BlogPostItem/Footer/styles.module.css index 0af97e82..3b1021b0 100644 --- a/src/theme/BlogPostItem/Footer/styles.module.css +++ b/src/theme/BlogPostItem/Footer/styles.module.css @@ -145,3 +145,117 @@ font-size: 1.25rem; } } + +/* Improve this Blog Post banner */ +.improveBanner { + width: 100%; + margin-top: 2rem; + padding: 1.5rem; + border-radius: 16px; + background: #e6f4f1; + background: color-mix(in srgb, var(--ifm-color-success-contrast-background, #e6f4f1) 60%, transparent); + border: 1px solid rgba(26, 122, 92, 0.2); + border: 1px solid color-mix(in srgb, var(--ifm-color-success) 20%, transparent); + display: flex; + align-items: flex-start; + gap: 1.25rem; + box-sizing: border-box; +} + +.improveIconWrap { + flex-shrink: 0; + width: 48px; + height: 48px; + border-radius: 10px; + background: rgba(26, 122, 92, 0.15); + background: color-mix(in srgb, var(--ifm-color-success) 15%, transparent); + display: grid; + place-items: center; + color: var(--ifm-color-success-dark, #1e7a5c); +} + +.improveContent { + min-width: 0; + flex: 1; +} + +.improveTitle { + margin: 0 0 0.4rem; + font-size: 1.15rem; + font-weight: 700; + line-height: 1.3; + color: var(--ifm-font-color-base); + letter-spacing: -0.01em; +} + +.improveDescription { + margin: 0 0 1rem; + font-size: 0.95rem; + line-height: 1.6; + color: var(--ifm-color-emphasis-800); +} + +.improveActions { + display: flex; + flex-wrap: wrap; + gap: 0.65rem; +} + +.improveEditButton { + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.5rem 1.1rem; + border-radius: 8px; + background: var(--ifm-color-success-dark, #1a7a5c); + color: #fff !important; + font-size: 0.9rem; + font-weight: 600; + text-decoration: none !important; + border: none; + cursor: pointer; + transition: background 0.15s; +} + +.improveEditButton:hover { + background: var(--ifm-color-success-darker, #155f47); + text-decoration: none !important; +} + +.improveGuidelinesButton { + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.5rem 1.1rem; + border-radius: 8px; + background: var(--ifm-background-color); + color: var(--ifm-font-color-base) !important; + font-size: 0.9rem; + font-weight: 600; + text-decoration: none !important; + border: 1px solid var(--ifm-color-emphasis-300); + cursor: pointer; + transition: background 0.15s, border-color 0.15s; +} + +.improveGuidelinesButton:hover { + background: var(--ifm-color-emphasis-100); + text-decoration: none !important; +} + +@media (max-width: 640px) { + .improveBanner { + flex-direction: column; + gap: 1rem; + padding: 1rem; + } + + .improveActions { + flex-direction: column; + } + + .improveEditButton, + .improveGuidelinesButton { + justify-content: center; + } +}