Merge pull request #2561 from OctopusDeploy/sf/search-and-a11y

Canonical link to the current first deployment guide

package.json

@@ -24,9 +24,9 @@
     },
     "dependencies": {
         "@astrojs/mdx": "^2.3.1",
-        "@pnpm/exe": "^9.12.3",
-        "astro": "^4.16.10",
-        "astro-accelerator-utils": "^0.3.27",
+        "@pnpm/exe": "^9.13.0",
+        "astro": "^4.16.12",
+        "astro-accelerator-utils": "^0.3.28",
         "cspell": "^8.16.0",
         "glob": "^11.0.0",
         "gray-matter": "^4.0.3",

src/pages/docs/getting-started/first-deployment/index.mdx

@@ -1,7 +1,7 @@
 ---
 layout: src/layouts/Default.astro
 pubDate: 2023-01-01
-modDate: 2024-11-13
+modDate: 2024-11-14
 title: First Deployment
 description: This tutorial will walk you through configuring your first deployment in Octopus Deploy.
 navOrder: 10
@@ -15,16 +15,17 @@ This tutorial series will help you complete your first deployment in Octopus Dep
 :::div{.hint}
 If you're using **Octopus 2024.2** or earlier, please visit one of these legacy guides:
 
-* **Octopus 2022.2** or earlier [First deployment guide](/docs/getting-started/first-deployment/legacy-guide/2022)
-* **Octopus 2024.2** or earlier [First deployment guide](/docs/getting-started/first-deployment/legacy-guide/2024)
+- **Octopus 2022.2** or earlier [read the 2022 guide](/docs/getting-started/first-deployment/legacy-guide/2022)
+- **Octopus 2024.2** or earlier [read the 2024 guide](/docs/getting-started/first-deployment/legacy-guide/2024)
 :::
 
 ## Before you start
+
 To follow this tutorial, you will need an Octopus Deploy instance. If you haven’t already, set up an instance using one of these methods:
 
-* [Octopus Cloud](https://octopus.com/start) ➜ we host Octopus Deploy for you.
-* [Self-hosted on a Windows Server](https://octopus.com/start?platform=Server) ➜ you host Octopus Deploy on your infrastructure by [downloading our MSI](https://octopus.com/download) and installing it onto a Windows Server with a SQL Server backend. Read the [installation requirements](/docs/installation/requirements).
-* [Self-hosted as a Docker container](https://octopus.com/start?platform=Server) ➜ you run Octopus Deploy in a docker container. Read the [installation instructions](https://octopus.com/blog/introducing-linux-docker-image).
+- [Octopus Cloud](https://octopus.com/start) ➜ we host Octopus Deploy for you.
+- [Self-hosted on a Windows Server](https://octopus.com/start?platform=Server) ➜ you host Octopus Deploy on your infrastructure by [downloading our MSI](https://octopus.com/download) and installing it onto a Windows Server with a SQL Server backend. Read the [installation requirements](/docs/installation/requirements).
+- [Self-hosted as a Docker container](https://octopus.com/start?platform=Server) ➜ you run Octopus Deploy in a docker container. Read the [installation instructions](https://octopus.com/blog/introducing-linux-docker-image).
 
 ## Log in to Octopus
 
@@ -82,9 +83,9 @@ You can leave this as the default _Run a Script_.
 
 You can source script files via 3 methods:
 
-* Inline script (default)
-* Git repository
-* Package
+- Inline script (default)
+- Git repository
+- Package
 
 3. Select **Inline script** as your script source. 
 

src/pages/docs/getting-started/first-deployment/legacy-guide/2022/index.mdx

@@ -1,12 +1,15 @@
 ---
 layout: src/layouts/Default.astro
 pubDate: 2023-01-01
-modDate: 2023-01-01
+modDate: 2024-11-14
 title: First Deployment (2022.2 and below)
 description: This section will walk you through how to configure your first deployment in Octopus Deploy.
 navMenu: false
 navOrder: 10
 hideInThisSection: true
+meta:
+    - name: canonical
+      content: https://octopus.com/docs/getting-started/first-deployment
 ---
 import OctopusDeploySetupOptions from 'src/shared-content/concepts/octopus-deploy-setup-options.include.md';
 

src/pages/docs/getting-started/first-deployment/legacy-guide/2024/index.mdx

@@ -1,12 +1,15 @@
 ---
 layout: src/layouts/Default.astro
 pubDate: 2023-01-01
-modDate: 2023-01-01
+modDate: 2024-11-14
 title: First Deployment
 description: This section will walk you through how to configure your first deployment in Octopus Deploy.
 navMenu: false
 navOrder: 10
 hideInThisSection: true
+meta:
+    - name: canonical
+      content: https://octopus.com/docs/getting-started/first-deployment
 ---
 import OctopusDeploySetupOptions from 'src/shared-content/concepts/octopus-deploy-setup-options.include.md';
 

src/themes/octopus/components/HtmlHead.astro

@@ -20,65 +20,67 @@ const imageSrc = frontmatter.bannerImage?.src ?? OPEN_GRAPH.image.src;
 const imageAlt = frontmatter.bannerImage?.alt ?? OPEN_GRAPH.image.alt;
 const robots = frontmatter.robots ?? 'index, follow';
 const canonicalImageSrc = new URL(imageSrc, Astro.site);
-const canonicalURL = accelerator.urlFormatter.formatUrl(
-  new URL(Astro.url.pathname, Astro.site + SITE.subfolder)
-);
-const socialTitle = await accelerator.markdown.getTextFrom(frontmatter.title);
-const title = `${socialTitle} ${frontmatter.titleAdditional ? ` ${frontmatter.titleAdditional}` : ''} | ${SITE.title}`;
+const canonicalURL =  accelerator.urlFormatter.formatUrl(new URL(Astro.url.pathname, Astro.site + SITE.subfolder));
+const socialTitle = await accelerator.markdown.getTextFrom(frontmatter?.title);
+const title = `${ accelerator.markdown.titleCase(socialTitle) } ${ ((frontmatter.titleAdditional) ? ` ${frontmatter.titleAdditional}` : '') } | ${ SITE.title }`;
+const pageMeta = (frontmatter?.meta && frontmatter?.meta?.length > 0)
+  ? frontmatter.meta
+  : [];
+
+const authorList = accelerator.authors.forPost(frontmatter);
+const authorMeta = (authorList.mainAuthor?.frontmatter?.meta && authorList.mainAuthor?.frontmatter?.meta?.length > 0)
+  ? authorList.mainAuthor.frontmatter.meta
+  : [];
+
+const autoMeta = (name: string) => {
+  return pageMeta.filter(m => m.name.toLowerCase() === name).length === 0;
+}
 
 stats.stop();
 ---
-
 <head>
   <meta charset="utf-8" />
   <title>{title}</title>
   <meta name="robots" content={'max-image-preview:large, ' + robots} />
-  <meta
-    name="viewport"
-    content="width=device-width, initial-scale=1, minimum-scale=1"
-  />
-  <meta name="format-detection" content="telephone=no" />
-  <meta name="keywords" content={frontmatter.keywords} />
-  <meta name="description" content={frontmatter.description} />
-  <meta name="theme-color" content={SITE.themeColor} />
+  <meta name="keywords" content={ frontmatter.keywords } />
+  <meta name="description" content={ frontmatter.description } />
   <link rel="stylesheet" href={SITE.subfolder + '/css/vars.css'} />
   <link rel="stylesheet" href={SITE.subfolder + '/css/main.css'} />
-  <link rel="canonical" href={canonicalURL} />
-  {
-    SITE.feedUrl && (
-      <link
-        rel="alternate"
-        type="application/atom+xml"
-        title={SITE.title}
-        href={SITE.feedUrl}
-      />
-    )
+  {autoMeta('viewport') &&
+  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+  }
+  {autoMeta('format-detection') &&
+  <meta name="format-detection" content="telephone=no" />
+  }
+  {autoMeta('theme-color') &&
+  <meta name="theme-color" content={ SITE.themeColor } />
+  }
+  {autoMeta('canonical') &&
+  <link rel="canonical" href={ canonicalURL } />
+  }
+  {SITE.feedUrl &&
+  <link rel="alternate" type="application/atom+xml" title={ SITE.title } href={ SITE.feedUrl } />
   }
-  <link
-    rel="alternate"
-    href={SITE.subfolder + '/sitemap.xml'}
-    type="application/rss+xml"
-  />
-  <link
-    rel="shortcut icon"
-    href={SITE.subfolder + '/icons/favicon.ico'}
-    type="image/x-icon"
-  />
-  <link
-    rel="apple-touch-icon"
-    href={SITE.subfolder + '/icons/apple-touch-icon.png'}
-  />
+  <link rel="alternate" href={ SITE.subfolder + '/sitemap.xml' } type="application/rss+xml" />
+  <link rel="shortcut icon" href={ SITE.subfolder + '/icons/favicon.ico' } type="image/x-icon" />
+  <link rel="apple-touch-icon" href={ SITE.subfolder + '/icons/apple-touch-icon.png' } />
   <meta property="og:type" content="website" />
-  <meta property="og:url" content={canonicalURL} />
-  <meta property="og:title" content={socialTitle} />
-  <meta property="og:description" content={frontmatter.description} />
-  <meta property="og:image" content={canonicalImageSrc} />
-  <meta property="og:image:alt" content={imageAlt} />
+  <meta property="og:url" content={ canonicalURL } />
+  <meta property="og:title" content={ socialTitle } />
+  <meta property="og:description" content={ frontmatter.description } />
+  <meta property="og:image" content={ canonicalImageSrc } />
+  <meta property="og:image:alt" content={ imageAlt } />
   <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content={socialTitle} />
-  <meta name="twitter:description" content={frontmatter.description} />
-  <meta name="twitter:image" content={canonicalImageSrc} />
-  <meta name="twitter:image:alt" content={imageAlt} />
+  <meta name="twitter:title" content={ socialTitle } />
+  <meta name="twitter:description" content={ frontmatter.description } />
+  <meta name="twitter:image" content={ canonicalImageSrc } />
+  <meta name="twitter:image:alt" content={ imageAlt } />
   <meta name="view-transition" content="same-origin" />
+  {pageMeta.map(m =>
+    <meta name={ m.name } content={ m.content } />
+  )}
+  {authorMeta.map(m =>
+    <meta name={ m.name } content={ m.content } />
+  )}
   <Fragment set:html={HEADER_SCRIPTS} />
 </head>