Skip to content

fix: Move meta tag replacements from client-side to static HTML #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 1, 2025
Merged

fix: Move meta tag replacements from client-side to static HTML #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 13 additions & 10 deletions 404.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<!-- Include Head Component with SEO parameters -->
<html lang="en" style="scroll-behavior: smooth">
<!-- Page-specific meta tags -->
<title>404 - Page Not Found</title>
<meta name="description" content="The page you were looking for could not be found. Please check the URL or navigate back to the homepage.">
<meta property="og:title" content="404 - Page Not Found">
<meta property="og:description" content="The page you were looking for could not be found. Please check the URL or navigate back to the homepage.">
<meta property="og:url" content="https://monai.io/404.html">
<meta name="twitter:title" content="404 - Page Not Found">
<meta name="twitter:description" content="The page you were looking for could not be found. Please check the URL or navigate back to the homepage.">
<link rel="canonical" href="https://monai.io/404.html">

<!-- Include Head Component -->
<!-- #include file="components/head.html" -->
<!-- Replace with actual values -->
<script>
document.head.innerHTML = document.head.innerHTML
.replace('${title}', '404 - Page Not Found')
.replace('${description}', 'The page you were looking for could not be found. Please check the URL or navigate back to the homepage.')
.replace('${canonical_url}', 'https://monai.io/404.html');
</script>

<body class="bg-neutral-lightgray">
<body class="flex flex-col min-h-screen">
<!-- Include Header Component -->
<!-- #include file="components/header.html" -->

Expand Down
21 changes: 13 additions & 8 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">

<html lang="en" style="scroll-behavior: smooth">

<!-- Page-specific meta tags -->
<title>MONAI - About Us</title>
<meta name="description" content="Project MONAI was originally started by NVIDIA & King's College London to establish an inclusive community of AI researchers for the development and exchange of best practices for A">
<meta property="og:title" content="MONAI - About Us">
<meta property="og:description" content="Project MONAI was originally started by NVIDIA & King's College London to establish an inclusive community of AI researchers for the development and exchange of best practices for A">
<meta property="og:url" content="https://monai.io/about.html">
<meta name="twitter:title" content="MONAI - About Us">
<meta name="twitter:description" content="Project MONAI was originally started by NVIDIA & King's College London to establish an inclusive community of AI researchers for the development and exchange of best practices for A">
<link rel="canonical" href="https://monai.io/about.html">

<!-- Include Head Component -->
<!-- #include file="components/head.html" -->
<script>
document.head.innerHTML = document.head.innerHTML
.replace('${title}', 'MONAI - About Us')
.replace('${description}', 'Project MONAI was originally started by NVIDIA & King\'s College London to establish an inclusive community of AI researchers for the development and exchange of best practices for AI in healthcare imaging.')
.replace('${canonical_url}', 'https://monai.io/about.html');
</script>

<body class="flex flex-col min-h-screen">
<!-- #include file="components/header.html" -->
Expand Down
11 changes: 0 additions & 11 deletions components/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
<!-- Head Component -->
<!-- Parameters: title, description, canonical_url -->
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-QVGBCPFPJ6"></script>
Expand All @@ -15,28 +14,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- SEO Meta Tags -->
<title>${title} | MONAI - Medical Open Network for AI</title>
<meta name="description" content="${description}">
<meta name="keywords" content="MONAI, Medical Imaging, AI, Deep Learning, Healthcare, PyTorch, Open Source">
<meta name="author" content="Project MONAI">

<!-- Open Graph Meta Tags -->
<meta property="og:title" content="${title} | MONAI">
<meta property="og:description" content="${description}">
<meta property="og:type" content="website">
<meta property="og:url" content="${canonical_url}">
<meta property="og:image" content="https://monai.io/assets/img/MONAI-logo_color.png">

<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ProjectMONAI">
<meta name="twitter:title" content="${title} | MONAI">
<meta name="twitter:description" content="${description}">
<meta name="twitter:image" content="https://monai.io/assets/img/MONAI-logo_color.png">

<!-- Canonical URL -->
<link rel="canonical" href="${canonical_url}">

<!-- Favicon -->
<link rel="shortcut icon" href="./assets/img/favicon.png" type="image/png">
<link rel="apple-touch-icon" href="./assets/img/favicon.png">
Expand Down
20 changes: 12 additions & 8 deletions core.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<!DOCTYPE html>
<html lang="en" style="scroll-behavior: smooth">
<html lang="en" class="scroll-smooth">
<!-- Page-specific meta tags -->
<title>MONAI Core</title>
<meta name="description" content="MONAI Core is the flagship library of Project MONAI, providing powerful capabilities for medical AI development. It features medical-specific image transforms, state-of-the-art models like UNETR for 3D segmentation, and advanced frameworks like Auto3DSeg for automated model selection.">
<meta property="og:title" content="MONAI Core">
<meta property="og:description" content="MONAI Core is the flagship library of Project MONAI, providing powerful capabilities for medical AI development. It features medical-specific image transforms, state-of-the-art models like UNETR for 3D segmentation, and advanced frameworks like Auto3DSeg for automated model selection.">
<meta property="og:url" content="https://monai.io/core.html">
<meta name="twitter:title" content="MONAI Core">
<meta name="twitter:description" content="MONAI Core is the flagship library of Project MONAI, providing powerful capabilities for medical AI development. It features medical-specific image transforms, state-of-the-art models like UNETR for 3D segmentation, and advanced frameworks like Auto3DSeg for automated model selection.">
<link rel="canonical" href="https://monai.io/core.html">

<!-- Include Head Component -->
<!-- #include file="components/head.html" -->
<script>
document.head.innerHTML = document.head.innerHTML
.replace('${title}', 'MONAI Core')
.replace('${description}', 'MONAI Core is the flagship library of Project MONAI, providing powerful capabilities for medical AI development. It features medical-specific image transforms, state-of-the-art models like UNETR for 3D segmentation, and advanced frameworks like Auto3DSeg for automated model selection.')
.replace('${canonical_url}', 'https://monai.io/core.html');
</script>

<body>
<body class="flex flex-col min-h-screen">
<!-- #include file="components/header.html" -->

<main class="flex-grow pt-20">
Expand Down
25 changes: 15 additions & 10 deletions deploy.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,18 @@
<!DOCTYPE html>
<html lang="en" style="scroll-behavior: smooth;">

<html lang="en" class="scroll-smooth">
<!-- Page-specific meta tags -->
<title>MONAI Deploy</title>
<meta name="description" content="MONAI Deploy is a comprehensive framework for developing, packaging, testing, and deploying medical AI applications in research and development environments. Through its modular arch">
<meta property="og:title" content="MONAI Deploy">
<meta property="og:description" content="MONAI Deploy is a comprehensive framework for developing, packaging, testing, and deploying medical AI applications in research and development environments. Through its modular arch">
<meta property="og:url" content="https://monai.io/deploy.html">
<meta name="twitter:title" content="MONAI Deploy">
<meta name="twitter:description" content="MONAI Deploy is a comprehensive framework for developing, packaging, testing, and deploying medical AI applications in research and development environments. Through its modular arch">
<link rel="canonical" href="https://monai.io/deploy.html">

<!-- Include Head Component -->
<!-- #include file="components/head.html" -->

<style>
@keyframes fade-in {
from {
Expand Down Expand Up @@ -158,14 +169,8 @@
border-color: #059669;
}
</style>
<script>
document.head.innerHTML = document.head.innerHTML
.replace('${title}', 'MONAI Deploy')
.replace('${description}', 'MONAI Deploy is a comprehensive framework for developing, packaging, testing, and deploying medical AI applications in research and development environments. Through its modular architecture and standardized workflows, it enables seamless integration of AI models into existing infrastructures.')
.replace('${canonical_url}', 'https://monai.io/deploy.html');
</script>

<body>

<body class="flex flex-col min-h-screen">
<!-- #include file="components/header.html" -->

<main class="flex-grow pt-20">
Expand Down
19 changes: 11 additions & 8 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<!-- Include Head Component with SEO parameters -->
<!-- Page-specific meta tags -->
<title>MONAI - Medical Open Network for AI</title>
<meta name="description" content="MONAI is the leading open-source framework for healthcare imaging AI, trusted by researchers and clinicians worldwide. Build, train, and deploy medical AI solutions with industry-standard tools.">
<meta property="og:title" content="MONAI - Medical Open Network for AI">
<meta property="og:description" content="MONAI is the leading open-source framework for healthcare imaging AI, trusted by researchers and clinicians worldwide. Build, train, and deploy medical AI solutions with industry-standard tools.">
<meta property="og:url" content="https://monai.io/">
<meta name="twitter:title" content="MONAI - Medical Open Network for AI">
<meta name="twitter:description" content="MONAI is the leading open-source framework for healthcare imaging AI, trusted by researchers and clinicians worldwide. Build, train, and deploy medical AI solutions with industry-standard tools.">
<link rel="canonical" href="https://monai.io/">

<!-- Include Head Component -->
<!-- #include file="components/head.html" -->
<!-- Replace with actual values -->
<script>
document.head.innerHTML = document.head.innerHTML
.replace('${title}', 'MONAI - Medical Open Network for AI')
.replace('${description}', 'MONAI is the leading open-source framework for healthcare imaging AI, trusted by researchers and clinicians worldwide. Build, train, and deploy medical AI solutions with industry-standard tools.')
.replace('${canonical_url}', 'https://monai.io/');
</script>

<body class="flex flex-col min-h-screen">
<!-- Include Header Component -->
Expand Down
24 changes: 14 additions & 10 deletions label.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<!DOCTYPE html>
<html lang="en" style="scroll-behavior: smooth;">

<html lang="en" class="scroll-smooth">
<!-- Page-specific meta tags -->
<title>MONAI Label</title>
<meta name="description" content="MONAI Label is an intelligent image labeling and learning tool that uses AI assistance to reduce the time and effort of annotating new datasets. By utilizing user interactions, MONAI">
<meta property="og:title" content="MONAI Label">
<meta property="og:description" content="MONAI Label is an intelligent image labeling and learning tool that uses AI assistance to reduce the time and effort of annotating new datasets. By utilizing user interactions, MONAI">
<meta property="og:url" content="https://monai.io/label.html">
<meta name="twitter:title" content="MONAI Label">
<meta name="twitter:description" content="MONAI Label is an intelligent image labeling and learning tool that uses AI assistance to reduce the time and effort of annotating new datasets. By utilizing user interactions, MONAI">
<link rel="canonical" href="https://monai.io/label.html">

<!-- Include Head Component -->
<!-- #include file="components/head.html" -->
<script>
document.head.innerHTML = document.head.innerHTML
.replace('${title}', 'MONAI Label')
.replace('${description}', 'MONAI Label is an intelligent image labeling and learning tool that uses AI assistance to reduce the time and effort of annotating new datasets. By utilizing user interactions, MONAI Label trains an AI model for a specific task and continuously learns and updates that model as it receives additional annotated images.')
.replace('${canonical_url}', 'https://monai.io/label.html');
</script>

<body>

<body class="flex flex-col min-h-screen">
<!-- #include file="components/header.html" -->

<main class="flex-grow pt-20">
Expand Down
19 changes: 12 additions & 7 deletions mayo-case-study.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<html lang="en" style="scroll-behavior: smooth">

<!-- Page-specific meta tags -->
<title>MONAI - Mayo Clinic Case Study</title>
<meta name="description" content="Learn how Mayo Clinic's Center for Augmented Intelligence in Imaging (CAII) uses MONAI to integrate AI models within clinical-imaging workflows.">
<meta property="og:title" content="MONAI - Mayo Clinic Case Study">
<meta property="og:description" content="Learn how Mayo Clinic's Center for Augmented Intelligence in Imaging (CAII) uses MONAI to integrate AI models within clinical-imaging workflows.">
<meta property="og:url" content="https://monai.io/mayo-case-study.html">
<meta name="twitter:title" content="MONAI - Mayo Clinic Case Study">
<meta name="twitter:description" content="Learn how Mayo Clinic's Center for Augmented Intelligence in Imaging (CAII) uses MONAI to integrate AI models within clinical-imaging workflows.">
<link rel="canonical" href="https://monai.io/mayo-case-study.html">

<!-- Include Head Component -->
<!-- #include file="components/head.html" -->
<script>
document.head.innerHTML = document.head.innerHTML
.replace('${title}', 'MONAI - Mayo Clinic Case Study')
.replace('${description}', 'Learn how Mayo Clinic\'s Center for Augmented Intelligence in Imaging (CAII) uses MONAI to integrate AI models within clinical-imaging workflows.')
.replace('${canonical_url}', 'https://monai.io/mayo-case-study.html');
</script>

<body class="flex flex-col min-h-screen">

Expand Down
19 changes: 12 additions & 7 deletions model-zoo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,18 @@
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<html lang="en" style="scroll-behavior: smooth">

<!-- Page-specific meta tags -->
<title>MONAI Model Zoo - Pre-trained Models for Medical Imaging</title>
<meta name="description" content="Explore MONAI Model Zoo - a collection of pre-trained models for medical imaging tasks. Find and use state-of-the-art models for your healthcare AI applications.">
<meta property="og:title" content="MONAI Model Zoo - Pre-trained Models for Medical Imaging">
<meta property="og:description" content="Explore MONAI Model Zoo - a collection of pre-trained models for medical imaging tasks. Find and use state-of-the-art models for your healthcare AI applications.">
<meta property="og:url" content="https://monai.io/model-zoo.html">
<meta name="twitter:title" content="MONAI Model Zoo - Pre-trained Models for Medical Imaging">
<meta name="twitter:description" content="Explore MONAI Model Zoo - a collection of pre-trained models for medical imaging tasks. Find and use state-of-the-art models for your healthcare AI applications.">
<link rel="canonical" href="https://monai.io/model-zoo.html">

<!-- Include Head Component -->
<!-- #include file="components/head.html" -->
<script>
document.head.innerHTML = document.head.innerHTML
.replace('${title}', 'MONAI Model Zoo - Pre-trained Models for Medical Imaging')
.replace('${description}', 'Explore MONAI Model Zoo - a collection of pre-trained models for medical imaging tasks. Find and use state-of-the-art models for your healthcare AI applications.')
.replace('${canonical_url}', 'https://monai.io/model-zoo.html');
</script>

<body class="flex flex-col min-h-screen">
<!-- #include file="components/header.html" -->
Expand Down
20 changes: 0 additions & 20 deletions scripts/build-html.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,30 +72,10 @@ function replaceIncludes(content, components) {
return processed;
}

function extractMetadata(content) {
const titleMatch = content.match(/<title>(.*?)<\/title>/);
const descriptionMatch = content.match(/<meta name="description" content="(.*?)">/);
const canonicalMatch = content.match(/<link rel="canonical" href="(.*?)">/);

return {
title: titleMatch ? titleMatch[1].split('|')[0].trim() : 'MONAI',
description: descriptionMatch ? descriptionMatch[1] : '',
canonical_url: canonicalMatch ? canonicalMatch[1] : 'https://monai.io'
};
}

function processTemplate(template, components) {
// First pass: Replace includes
let processed = replaceIncludes(template, components);

// Extract metadata from the processed content
const metadata = extractMetadata(processed);

// Second pass: Replace template variables
processed = processed.replace(/\${title}/g, metadata.title);
processed = processed.replace(/\${description}/g, metadata.description);
processed = processed.replace(/\${canonical_url}/g, metadata.canonical_url);

return processed;
}

Expand Down
23 changes: 13 additions & 10 deletions start.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<!-- Include Head Component with SEO parameters -->
<html lang="en" style="scroll-behavior: smooth">
<!-- Page-specific meta tags -->
<title>Get Started</title>
<meta name="description" content="Get started with MONAI - the freely available, community-supported, PyTorch-based framework for deep learning in healthcare imaging.">
<meta property="og:title" content="Get Started">
<meta property="og:description" content="Get started with MONAI - the freely available, community-supported, PyTorch-based framework for deep learning in healthcare imaging.">
<meta property="og:url" content="https://monai.io/started.html">
<meta name="twitter:title" content="Get Started">
<meta name="twitter:description" content="Get started with MONAI - the freely available, community-supported, PyTorch-based framework for deep learning in healthcare imaging.">
<link rel="canonical" href="https://monai.io/started.html">

<!-- Include Head Component -->
<!-- #include file="components/head.html" -->
<!-- Replace with actual values -->
<script>
document.head.innerHTML = document.head.innerHTML
.replace('${title}', 'Get Started')
.replace('${description}', 'Get started with MONAI - the freely available, community-supported, PyTorch-based framework for deep learning in healthcare imaging.')
.replace('${canonical_url}', 'https://monai.io/started.html');
</script>

<body class="bg-neutral-lightgray">
<body class="flex flex-col min-h-screen">
<!-- Include Header Component -->
<!-- #include file="components/header.html" -->

Expand Down
Loading