mirror of
https://github.com/arsvendg/Stirling-PDF.git
synced 2026-07-16 11:23:10 +02:00
SEO init (#4197)
# Description of Changes This pull request introduces dynamic document meta tag management and improves URL routing and tool metadata handling in the frontend. The most significant changes are the addition of a custom hook to update document meta tags (including OpenGraph tags) based on the selected tool, enhancements to the tool selection context for better URL synchronization, and enrichment of the `Tool` type and tool registry with more metadata. **Dynamic document meta management:** * Added a new `useDocumentMeta` hook that updates the page's `<title>`, description, and OpenGraph meta tags based on the currently selected tool, and restores the original values on cleanup. (`frontend/src/hooks/useDocumentMeta.ts`) * Integrated `useDocumentMeta` into `HomePageContent` so the document's meta tags dynamically reflect the selected tool's metadata, improving SEO and social sharing. (`frontend/src/pages/HomePage.tsx`) [[1]](diffhunk://#diff-85c26b21681286c20e97a26a4912f0b91812776c9d4d0c54aa541fded2565c7eR2-R8) [[2]](diffhunk://#diff-85c26b21681286c20e97a26a4912f0b91812776c9d4d0c54aa541fded2565c7eR17) [[3]](diffhunk://#diff-85c26b21681286c20e97a26a4912f0b91812776c9d4d0c54aa541fded2565c7eR28-R37) **Tool metadata and context improvements:** * Enhanced the `Tool` type and tool registry to include `title` and `description` fields, which are now translated and used throughout the UI and meta tags. (`frontend/src/types/tool.ts`, `frontend/src/hooks/useToolManagement.tsx`) [[1]](diffhunk://#diff-0b557df7bd27ac90cd2f925ddd8ef8096ea2decfaee9a5c12a94dc7a03c64bfaR46) [[2]](diffhunk://#diff-57f8a6b3e75ecaec10ad445b01afe8fccc376af6f8ad4d693c68cf98e8863273L116-R118) * Updated the `ToolWorkflowContext` to use the new `Tool` type for `selectedTool`, replacing the previous `ToolConfiguration` type. (`frontend/src/contexts/ToolWorkflowContext.tsx`) [[1]](diffhunk://#diff-9b36e2c06dddbcfba6cb66fd0b303b7860f88ca8b562bb2534af1ab50390d385L6-R8) [[2]](diffhunk://#diff-9b36e2c06dddbcfba6cb66fd0b303b7860f88ca8b562bb2534af1ab50390d385L72-R72) **URL routing and synchronization:** * Implemented logic in `ToolWorkflowContext` to synchronize the selected tool with the browser URL, initialize tool selection from the URL on load, and handle browser navigation (back/forward) for tool selection. (`frontend/src/contexts/ToolWorkflowContext.tsx`) --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details.
This commit is contained in:
Anthony Stirling
@@ -0,0 +1,101 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
interface MetaOptions {
|
||||
title?: string;
|
||||
description?: string;
|
||||
ogTitle?: string;
|
||||
ogDescription?: string;
|
||||
ogImage?: string;
|
||||
ogUrl?: string;
|
||||
}
|
||||
|
||||
export const useDocumentMeta = (meta: MetaOptions) => {
|
||||
const { i18n } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const originalTitle = document.title;
|
||||
const originalDescription = document.querySelector('meta[name="description"]')?.getAttribute('content') || '';
|
||||
|
||||
// Store original OpenGraph values for cleanup
|
||||
const ogProperties = ['og:site_name', 'og:locale', 'og:title', 'og:description', 'og:image', 'og:image:width', 'og:image:height', 'og:url', 'og:type'];
|
||||
const originalOgValues = new Map<string, string | null>();
|
||||
|
||||
ogProperties.forEach(property => {
|
||||
const element = document.querySelector(`meta[property="${property}"]`);
|
||||
originalOgValues.set(property, element?.getAttribute('content') || null);
|
||||
});
|
||||
|
||||
// Update title
|
||||
if (meta.title) {
|
||||
document.title = meta.title;
|
||||
}
|
||||
|
||||
// Update or create meta tags
|
||||
const updateOrCreateMeta = (name: string, content: string) => {
|
||||
let metaElement = document.querySelector(`meta[name="${name}"]`) as HTMLMetaElement;
|
||||
if (!metaElement) {
|
||||
metaElement = document.createElement('meta');
|
||||
metaElement.name = name;
|
||||
document.head.appendChild(metaElement);
|
||||
}
|
||||
metaElement.content = content;
|
||||
};
|
||||
|
||||
const updateOrCreateProperty = (property: string, content: string) => {
|
||||
let metaElement = document.querySelector(`meta[property="${property}"]`) as HTMLMetaElement;
|
||||
if (!metaElement) {
|
||||
metaElement = document.createElement('meta');
|
||||
metaElement.setAttribute('property', property);
|
||||
document.head.appendChild(metaElement);
|
||||
}
|
||||
metaElement.content = content;
|
||||
};
|
||||
|
||||
// Update meta tags
|
||||
if (meta.description) {
|
||||
updateOrCreateMeta('description', meta.description);
|
||||
}
|
||||
|
||||
// Update OpenGraph tags
|
||||
updateOrCreateProperty('og:site_name', 'Stirling PDF');
|
||||
updateOrCreateProperty('og:locale', i18n.language.replace('-', '_'));
|
||||
|
||||
if (meta.ogTitle) {
|
||||
updateOrCreateProperty('og:title', meta.ogTitle);
|
||||
}
|
||||
if (meta.ogDescription) {
|
||||
updateOrCreateProperty('og:description', meta.ogDescription);
|
||||
}
|
||||
if (meta.ogImage) {
|
||||
updateOrCreateProperty('og:image', meta.ogImage);
|
||||
updateOrCreateProperty('og:image:width', '1200');
|
||||
updateOrCreateProperty('og:image:height', '630');
|
||||
}
|
||||
if (meta.ogUrl) {
|
||||
updateOrCreateProperty('og:url', meta.ogUrl);
|
||||
}
|
||||
// Always set og:type to website
|
||||
updateOrCreateProperty('og:type', 'website');
|
||||
|
||||
// Cleanup function to restore original values
|
||||
return () => {
|
||||
document.title = originalTitle;
|
||||
if (originalDescription) {
|
||||
updateOrCreateMeta('description', originalDescription);
|
||||
}
|
||||
|
||||
// Restore or remove OpenGraph tags
|
||||
originalOgValues.forEach((originalValue, property) => {
|
||||
const element = document.querySelector(`meta[property="${property}"]`) as HTMLMetaElement;
|
||||
if (element) {
|
||||
if (originalValue !== null) {
|
||||
element.content = originalValue;
|
||||
} else {
|
||||
element.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
}, [meta.title, meta.description, meta.ogTitle, meta.ogDescription, meta.ogImage, meta.ogUrl, i18n.language]);
|
||||
};
|
||||
@@ -142,7 +142,9 @@ export const useToolManagement = (): ToolManagementResult => {
|
||||
const toolDef = toolDefinitions[toolKey];
|
||||
availableTools[toolKey] = {
|
||||
...toolDef,
|
||||
name: t(`home.${toolKey}.title`, toolKey.charAt(0).toUpperCase() + toolKey.slice(1))
|
||||
name: t(`home.${toolKey}.title`, toolKey.charAt(0).toUpperCase() + toolKey.slice(1)),
|
||||
title: t(`home.${toolKey}.title`, toolDef.description || toolKey),
|
||||
description: t(`home.${toolKey}.desc`, toolDef.description || `${toolKey} tool`)
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,129 @@
|
||||
// src/hooks/useToolUrlRouting.ts
|
||||
// Focused hook for URL <-> tool-key mapping and browser history sync.
|
||||
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
export interface UseToolUrlRoutingOpts {
|
||||
/** Currently selected tool key (from context). */
|
||||
selectedToolKey: string | null;
|
||||
/** Registry of available tools (key -> tool metadata). */
|
||||
toolRegistry: Record<string, any> | null | undefined;
|
||||
/** Select a tool (no extra side-effects). */
|
||||
selectTool: (toolKey: string) => void;
|
||||
/** Clear selection. */
|
||||
clearToolSelection: () => void;
|
||||
/** Called once during initialization if URL contains a tool; may trigger UI changes. */
|
||||
onInitSelect?: (toolKey: string) => void;
|
||||
/** Called when navigating via back/forward (popstate). Defaults to selectTool. */
|
||||
onPopStateSelect?: (toolKey: string) => void;
|
||||
/** Optional base path if the app isn't served at "/" (no trailing slash). Default: "" (root). */
|
||||
basePath?: string;
|
||||
}
|
||||
|
||||
export function useToolUrlRouting(opts: UseToolUrlRoutingOpts) {
|
||||
const {
|
||||
selectedToolKey,
|
||||
toolRegistry,
|
||||
selectTool,
|
||||
clearToolSelection,
|
||||
onInitSelect,
|
||||
onPopStateSelect,
|
||||
basePath = '',
|
||||
} = opts;
|
||||
|
||||
// Central slug map; keep here to co-locate routing policy.
|
||||
const urlMap = useMemo(
|
||||
() =>
|
||||
new Map<string, string>([
|
||||
['compress', 'compress-pdf'],
|
||||
['split', 'split-pdf'],
|
||||
['convert', 'convert-pdf'],
|
||||
['ocr', 'ocr-pdf'],
|
||||
['merge', 'merge-pdf'],
|
||||
['rotate', 'rotate-pdf'],
|
||||
]),
|
||||
[]
|
||||
);
|
||||
|
||||
const getToolUrlSlug = useCallback(
|
||||
(toolKey: string) => urlMap.get(toolKey) ?? toolKey,
|
||||
[urlMap]
|
||||
);
|
||||
|
||||
const getToolKeyFromSlug = useCallback(
|
||||
(slug: string) => {
|
||||
for (const [key, value] of urlMap) {
|
||||
if (value === slug) return key;
|
||||
}
|
||||
return slug; // fall back to raw key
|
||||
},
|
||||
[urlMap]
|
||||
);
|
||||
|
||||
// Internal flag to avoid clearing URL on initial mount.
|
||||
const [hasInitialized, setHasInitialized] = useState(false);
|
||||
|
||||
// Normalize a pathname by stripping basePath and leading slash.
|
||||
const normalizePath = useCallback(
|
||||
(fullPath: string) => {
|
||||
let p = fullPath;
|
||||
if (basePath && p.startsWith(basePath)) {
|
||||
p = p.slice(basePath.length);
|
||||
}
|
||||
if (p.startsWith('/')) p = p.slice(1);
|
||||
return p;
|
||||
},
|
||||
[basePath]
|
||||
);
|
||||
|
||||
// Update URL when tool changes (but not on first paint before any selection happens).
|
||||
useEffect(() => {
|
||||
if (selectedToolKey) {
|
||||
const slug = getToolUrlSlug(selectedToolKey);
|
||||
const newUrl = `${basePath}/${slug}`.replace(/\/+/, '/');
|
||||
window.history.replaceState({}, '', newUrl);
|
||||
setHasInitialized(true);
|
||||
} else if (hasInitialized) {
|
||||
const rootUrl = basePath || '/';
|
||||
window.history.replaceState({}, '', rootUrl);
|
||||
}
|
||||
}, [selectedToolKey, getToolUrlSlug, hasInitialized, basePath]);
|
||||
|
||||
// Initialize from URL when the registry is ready and nothing is selected yet.
|
||||
useEffect(() => {
|
||||
if (!toolRegistry || Object.keys(toolRegistry).length === 0) return;
|
||||
if (selectedToolKey) return; // don't override explicit selection
|
||||
|
||||
const currentPath = normalizePath(window.location.pathname);
|
||||
if (currentPath) {
|
||||
const toolKey = getToolKeyFromSlug(currentPath);
|
||||
if (toolRegistry[toolKey]) {
|
||||
(onInitSelect ?? selectTool)(toolKey);
|
||||
}
|
||||
}
|
||||
}, [toolRegistry, selectedToolKey, getToolKeyFromSlug, selectTool, onInitSelect, normalizePath]);
|
||||
|
||||
// Handle browser back/forward. NOTE: useRef needs an initial value in TS.
|
||||
const popHandlerRef = useRef<((this: Window, ev: PopStateEvent) => any) | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
popHandlerRef.current = () => {
|
||||
const path = normalizePath(window.location.pathname);
|
||||
if (path) {
|
||||
const toolKey = getToolKeyFromSlug(path);
|
||||
if (toolRegistry && toolRegistry[toolKey]) {
|
||||
(onPopStateSelect ?? selectTool)(toolKey);
|
||||
return;
|
||||
}
|
||||
}
|
||||
clearToolSelection();
|
||||
};
|
||||
|
||||
const handler = (e: PopStateEvent) => popHandlerRef.current?.call(window, e);
|
||||
window.addEventListener('popstate', handler);
|
||||
return () => window.removeEventListener('popstate', handler);
|
||||
}, [toolRegistry, selectTool, clearToolSelection, getToolKeyFromSlug, onPopStateSelect, normalizePath]);
|
||||
|
||||
// Expose pure helpers if you want them elsewhere (optional).
|
||||
return { getToolUrlSlug, getToolKeyFromSlug };
|
||||
}
|
||||
Reference in New Issue
Block a user