GitCaddy/GitCaddy Server
Limited
2
0
Fork 0
Code Issues Releases 4

feat(pages): add option to use media kit social card for OG image

Browse Source 
Add checkbox in pages SEO settings to use the repository's Media Kit social preview as the Open Graph image instead of a custom URL. When enabled, shows preview of the social card and uses /social-preview endpoint. Adds og:title, og:description, og:image, and twitter:card meta tags to pages base template. Improves social sharing integration with existing Media Kit feature.
This commit is contained in:
David H. Friedel Jr.
2026-03-15 22:08:31 -04:00
parent 82eddb0b09
commit 56fd71ad6b
6 changed files with 49 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
templates/pages/base_head.tmpl
View File

@@ -5,6 +5,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{if .Config.Hero.Headline}}{{.Config.Hero.Headline}}{{else}}{{.Repository.Name}}{{end}} - {{.Repository.Owner.Name}}</title>
<meta name="description" content="{{if .Config.Hero.Subheadline}}{{.Config.Hero.Subheadline}}{{else}}{{.Repository.Description}}{{end}}">
<meta property="og:title" content="{{if .Config.SEO.Title}}{{.Config.SEO.Title}}{{else if .Config.Hero.Headline}}{{.Config.Hero.Headline}}{{else}}{{.Repository.Name}}{{end}}">
<meta property="og:description" content="{{if .Config.SEO.Description}}{{.Config.SEO.Description}}{{else if .Config.Hero.Subheadline}}{{.Config.Hero.Subheadline}}{{else}}{{.Repository.Description}}{{end}}">
<meta property="og:type" content="website">
{{if .Config.SEO.UseMediaKitOG}}
<meta property="og:image" content="{{AppUrl}}{{.Repository.OwnerName}}/{{.Repository.Name}}/social-preview">
<meta name="twitter:image" content="{{AppUrl}}{{.Repository.OwnerName}}/{{.Repository.Name}}/social-preview">
{{else if .Config.SEO.OGImage}}
<meta property="og:image" content="{{.Config.SEO.OGImage}}">
<meta name="twitter:image" content="{{.Config.SEO.OGImage}}">
{{end}}
{{if or .Config.SEO.UseMediaKitOG .Config.SEO.OGImage}}
<meta name="twitter:card" content="summary_large_image">
{{end}}
{{if .Config.SEO.Keywords}}<meta name="keywords" content="{{StringUtils.Join .Config.SEO.Keywords ","}}">{{end}}
{{if .LangSwitcherEnabled}}{{range .AvailableLanguages}}
<link rel="alternate" hreflang="{{.}}" href="?lang={{.}}">{{end}}
{{end}}

21
templates/repo/settings/pages_theme.tmpl
View File

@@ -85,7 +85,20 @@
</div>
<div class="field">
<label>{{ctx.Locale.Tr "repo.settings.pages.og_image"}}</label>
<input name="og_image" value="{{.Config.SEO.OGImage}}" placeholder="https://example.com/og-image.png">
<div class="field">
<div class="ui checkbox">
<input type="checkbox" name="use_media_kit_og" id="use-media-kit-og"
{{if .Config.SEO.UseMediaKitOG}}checked{{end}}>
<label for="use-media-kit-og">{{ctx.Locale.Tr "repo.settings.pages.use_media_kit_og"}}</label>
</div>
<div class="help">{{ctx.Locale.Tr "repo.settings.pages.use_media_kit_og_help"}}</div>
</div>
<div id="og-image-manual" {{if .Config.SEO.UseMediaKitOG}}style="display:none"{{end}}>
<input name="og_image" value="{{.Config.SEO.OGImage}}" placeholder="https://example.com/og-image.png">
</div>
<div id="og-image-preview" {{if not .Config.SEO.UseMediaKitOG}}style="display:none"{{end}}>
<img src="{{.Repository.Link}}/social-preview" style="max-width:400px;border-radius:8px;border:1px solid #ddd;margin-top:8px;">
</div>
</div>
<div class="field">
@@ -153,6 +166,12 @@
renderChips();
})();
// === Media Kit OG toggle ===
document.getElementById('use-media-kit-og').addEventListener('change', function() {
document.getElementById('og-image-manual').style.display = this.checked ? 'none' : '';
document.getElementById('og-image-preview').style.display = this.checked ? '' : 'none';
});
function updateColorPreview(type) {
const colorInput = document.getElementById(type + '_color');
const preview = document.getElementById(type + '_preview');