Quad4-Software/webnews
2
0
Fork 0
Code Issues Pull Requests 9 Actions Packages Projects Releases 3 Wiki Activity

Add SEO and social sharing features by adding Open Graph and Twitter meta tags across app.html and share page. Update sidebar layout and version to 0.2.0.

Browse Source
This commit is contained in:
ivan
2025-12-27 19:51:10 -06:00
parent 3deba1ad94
commit 4e308f2e61
3 changed files with 55 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/app.html
View File

@@ -3,13 +3,33 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>Web News - Personal RSS Reader</title>
<meta name="description" content="A fast, clean, and private RSS reader for all your news." />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="shortcut icon" href="/favicon.svg" />
<link rel="apple-touch-icon" href="/favicon.svg" />
<link rel="manifest" href="/manifest.json" />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://webnews.quad4.io" />
<meta property="og:title" content="Web News" />
<meta property="og:description" content="A fast, clean, and private RSS reader for all your news." />
<meta property="og:image" content="/favicon.svg" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://webnews.quad4.io" />
<meta property="twitter:title" content="Web News" />
<meta property="twitter:description" content="A fast, clean, and private RSS reader for all your news." />
<meta property="twitter:image" content="/favicon.svg" />
<meta name="theme-color" content="#1a73e8" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="apple-mobile-web-app-title" content="Web News" />
<link rel="apple-touch-icon" href="/favicon.svg" />
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">

24
src/components/Sidebar.svelte
View File

@@ -210,7 +210,7 @@
: '-translate-x-full md:translate-x-0'} fixed md:static top-0 left-0 h-full"
>
<div
class="flex flex-col gap-6 py-6 overflow-y-auto h-full pt-[calc(64px+env(safe-area-inset-top,0px))] md:pt-0 scroll-container"
class="flex flex-col gap-2 pt-6 pb-2 overflow-y-auto h-full pt-[calc(64px+env(safe-area-inset-top,0px))] md:pt-0 scroll-container"
>
<nav class="flex flex-col gap-1 px-2">
<button
@@ -485,8 +485,16 @@
</div>
</div>
<div class="flex flex-col items-center pb-24 md:pb-6 space-y-4">
<div class="flex flex-col items-center space-y-1">
<div class="flex flex-col items-center pb-20 md:pb-4 space-y-2">
<button
class="flex items-center justify-center gap-3 px-4 py-2 rounded-xl text-text-secondary hover:bg-bg-secondary transition-colors w-full max-w-[200px]"
onclick={onOpenSettings}
>
<SettingsIcon size={18} />
<span class="font-medium text-sm">Settings</span>
</button>
<div class="flex flex-col items-center">
<a
href="https://git.quad4.io/Quad4-Software/webnews"
target="_blank"
@@ -494,7 +502,7 @@
class="flex items-center gap-1.5 text-[11px] text-text-secondary hover:text-accent-blue transition-colors font-medium"
>
<GitBranch size={13} />
<span>v0.1.0</span>
<span>v0.2.0</span>
</a>
<p class="text-[11px] text-text-secondary font-medium">
Created by <a
@@ -505,14 +513,6 @@
>
</p>
</div>
<button
class="flex items-center justify-center gap-3 px-4 py-2 rounded-xl text-text-secondary hover:bg-bg-secondary transition-colors w-full max-w-[200px]"
onclick={onOpenSettings}
>
<SettingsIcon size={18} />
<span class="font-medium text-sm">Settings</span>
</button>
</div>
</div>
</aside>

23
src/routes/share/+page.svelte
View File

@@ -63,7 +63,28 @@
</script>
<svelte:head>
<title>{article ? article.title : 'Web News - Shared Article'}</title>
<title>{article ? article.title : 'Shared Article on Webnews'}</title>
<meta name="description" content={article ? article.description : 'A shared article on Webnews RSS reader'} />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="article" />
<meta property="og:title" content={article ? article.title : 'Shared Article on Webnews'} />
<meta property="og:description" content={article ? article.description : 'A shared article on Webnews RSS reader'} />
{#if article?.imageUrl}
<meta property="og:image" content={article.imageUrl} />
{:else}
<meta property="og:image" content="/favicon.svg" />
{/if}
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content={article ? article.title : 'Shared Article on Webnews'} />
<meta property="twitter:description" content={article ? article.description : 'A shared article on Webnews RSS reader'} />
{#if article?.imageUrl}
<meta property="twitter:image" content={article.imageUrl} />
{:else}
<meta property="twitter:image" content="/favicon.svg" />
{/if}
</svelte:head>
<div class="min-h-screen bg-bg-primary text-text-primary flex flex-col">