ntnsndr/protocol-droid
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dynamic page titles + social media meta tags

Browse Source 
Browser tab titles:
- Protocol pages: 'Title · Site Name'
- Collection pages: 'Title · Site Name'
- User pages: '@username · Site Name'
- Resets to site name on library/collections/about

Social media previews (server-side, for crawlers):
- index.php detects /protocols/slug, /collections/slug, /users/username
- Looks up title + description from DB
- Injects og:title, og:description, og:type, og:site_name, og:url
- Injects twitter:card, twitter:title, twitter:description
- Replaces default <title> with enriched version

Frontend:
- Default og/twitter meta tags on homepage
- Path-based URLs (shared links) redirect to hash routes for SPA routing
This commit is contained in:
Protocolbot
2026-07-21 08:24:07 -06:00
parent b2a17eb2b1
commit ceae28609b
3 changed files with 110 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app.js
+11
View File
@@ -39,6 +39,13 @@ async function api(path, options = {}) {
// --- Init ---
async function init() {
// If path looks like /protocols/slug, /collections/slug, or /users/username
// (shared link without hash), redirect to hash-based route
var pathMatch = location.pathname.match(/^\/?(protocols|collections|users)\/([^\/]+)/);
if (pathMatch && !location.hash) {
history.replaceState(null, '', '#' + pathMatch[1] + '/' + pathMatch[2]);
}
// Route immediately — don't wait for API calls
route();
window.addEventListener('hashchange', route);
@@ -98,6 +105,7 @@ function navigate(view) {
document.querySelectorAll('.mobile-panel a').forEach(a => a.classList.toggle('active', a.dataset.view === view));
closeMenu();
updateBreadcrumb(view);
document.title = siteConfig.name || 'Protocol Droid';
if (!isRouting) {
if (view === 'library') location.hash = 'library';
if (view === 'collections') location.hash = 'collections';
@@ -329,6 +337,7 @@ async function showDetail(slug) {
try {
const p = await api('/protocols/' + slug);
document.title = (p.title || slug) + ' · ' + (siteConfig.name || 'Protocol Droid');
document.getElementById('detailContent').innerHTML = renderDetail(p);
renderDetailActions(p);
} catch (e) {
@@ -730,6 +739,7 @@ async function showCollectionDetail(slug) {
try {
var c = await api('/collections/' + slug);
document.title = (c.title || slug) + ' · ' + (siteConfig.name || 'Protocol Droid');
var itemsHtml = '';
for (var i = 0; i < (c.items || []).length; i++) {
var item = c.items[i];
@@ -802,6 +812,7 @@ async function showUser(username) {
closeMenu();
try {
const data = await api('/users/' + username);
document.title = '@' + (data.user.display_name || data.user.username) + ' · ' + (siteConfig.name || 'Protocol Droid');
const p = data.protocols || [];
const c = data.collections || [];
document.getElementById('detailContent').innerHTML =
frontend/index.html
+7
View File
@@ -10,6 +10,13 @@
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="frontend/style.css">
<meta name="theme-color" content="#0a1929">
<meta property="og:title" content="Protocol Droid">
<meta property="og:description" content="A commons of social protocols">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Protocol Droid">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Protocol Droid">
<meta name="twitter:description" content="A commons of social protocols">
</head>
<body>