redesign: Add header and breadcrumbs

.github/release-drafter.yml

@@ -29,6 +29,9 @@ categories:
     labels:
       - 'automation' # When automation is updated
       - 'ci' # When automation is updated
+  - title: '🎨 Redesign'
+    labels:
+      - 'redesign' # When it's a redesign feature
 exclude-labels:
   - 'changelog:skip' # When a PR should be excluded from the changelog
 version-resolver:

.github/workflows/preview-build.yml

@@ -1,7 +1,13 @@
 name: preview-build
 
 on:
-  pull_request: ~
+  pull_request: 
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - labeled
+      - unlabeled
   workflow_call:
     inputs:
       strict:
@@ -25,6 +31,9 @@ permissions:
 
 jobs:
   build:
+    concurrency: 
+      group: ${{ github.workflow }}-${{ github.ref }}
+      cancel-in-progress: true
     runs-on: ubuntu-latest
     steps:
 
@@ -66,6 +75,10 @@ jobs:
       - name: Bootstrap Action Workspace
         if: github.repository == 'elastic/docs-builder' && steps.check-files.outputs.any_changed == 'true'
         uses: ./.github/actions/bootstrap
+
+      - name: Set REDESIGN feature flag
+        if: contains(github.event.pull_request.labels.*.name, 'redesign')
+        run: echo "REDESIGN=true" >> $GITHUB_ENV
 
       # we run our artifact directly please use the prebuild
       # elastic/docs-builder@main GitHub Action for all other repositories!

.github/workflows/preview-deploy.yml

@@ -89,7 +89,7 @@ jobs:
           PR_NUMBER: ${{ needs.pull-request-data.outputs.number }}
         run: |
           aws s3 sync ./html "s3://elastic-docs-v3-website-preview/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}" --delete
-          aws cloudfront create-invalidation --distribution-id EKT7LT5PM8RKS --paths "/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}/*"
+          aws cloudfront create-invalidation --distribution-id EKT7LT5PM8RKS --paths "/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}*"
 
       - name: Update deployment status
         uses: actions/github-script@v7

src/Elastic.Markdown/.gitignore

@@ -4,3 +4,4 @@ _static/main.js
 _static/main.js.map
 _static/styles.css
 _static/styles.css.map
+_static/*.woff2

src/Elastic.Markdown/Assets/fonts.css

@@ -0,0 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+
+@font-face {
+	font-family: "Mier B";
+	src: url("./fonts/MierB-Regular.woff2") format("woff2")
+}

src/Elastic.Markdown/Assets/markdown/typography.css

@@ -1,29 +1,34 @@
 #elastic-docs-v3 {
 	h1 {
-		@apply text-4xl text-ink font-semibold mb-6;
+		font-family: "Mier B", "Inter", sans-serif;
+		@apply text-4xl text-ink font-bold mb-6;
 		line-height: 1.2em;
 		letter-spacing: -0.04em;
 	}
 
 	h2 {
-		@apply text-2xl text-ink font-bold mb-6;
+		font-family: "Mier B", "Inter", sans-serif;
+		@apply text-2xl text-ink mb-6;
 		line-height: 1.2em;
 		letter-spacing: -0.02em;
 	}
 
 	h3 {
+		font-family: "Mier B", "Inter", sans-serif;
 		@apply text-xl text-ink font-bold mb-6;
 		line-height: 1.2em;
 		letter-spacing: -0.02em;
 	}
 
 	p {
+		font-family: "Inter", sans-serif;
 		@apply text-base text-body mb-6;
 		line-height: 1.5em;
 		letter-spacing: 0;
 	}
 
 	a {
+		font-family: "Inter", sans-serif;
 		@apply text-blue-elastic hover:underline underline-offset-4;
 	}
 }

src/Elastic.Markdown/Assets/plugins.css

@@ -0,0 +1 @@
+@plugin "tailwind-scrollbar-hide"

src/Elastic.Markdown/Assets/styles.css

@@ -1,8 +1,17 @@
 @import "tailwindcss";
-@import "highlight.js/styles/atom-one-dark.css";
+@import "./fonts.css";
+@import "./plugins.css";
 @import "./theme.css";
+@import "highlight.js/styles/atom-one-dark.css";
 @import "./markdown/typography.css";
 
-main.markdown-content {
-    max-width: 80ch;
+#default-search::-webkit-search-cancel-button {
+	@apply pr-2;
+	-webkit-appearance: none;
+	height: 16px;
+	width: 16px;
+	margin-left: .4em;
+	background-image: url("data:image/svg+xml;utf8,<svg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'><path stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 17.94 6M18 18 6.06 6'/></svg>");
+	cursor: pointer;
+	background-repeat: no-repeat;
 }

src/Elastic.Markdown/Assets/theme.css

@@ -1,5 +1,7 @@
 @theme {
-	--color-*: initial;
+	/*--color-*: initial;*/
+
+	--font-sans: "Mier B", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 
 	--color-white: #FFFFFF;
 	--color-black: #000000;
@@ -14,9 +16,10 @@
 	--color-gray-light: #F5F7FA;
 	--color-gray-dark: #D4DAE5;
 
-	--color-blue-elastic: #0077CC;
+	--color-blue-elastic: #0B64DD;
 	--color-blue-sky: #36B9FF;
 	--color-blue-midnight: #20377D;
+	--color-blue-developer: #101C3F;
 
 	--color-red-light: #FB6363;
 	--color-red-dark: #D93333;

src/Elastic.Markdown/Elastic.Markdown.csproj

@@ -44,7 +44,8 @@
       <EmbeddedResource Include="_static/*.js.map" Watch="false" />
       <EmbeddedResource Include="_static/*.css" Watch="false" />
       <EmbeddedResource Include="_static/*.css.map" Watch="false" />
-      <EmbeddedResource Include="_static/*.svg" />
+      <EmbeddedResource Include="_static/*.svg" Watch="false" />
+      <EmbeddedResource Include="_static/*.woff2" Watch="false" />
     </ItemGroup>
   </Target>
 

src/Elastic.Markdown/Slices/_Layout.cshtml

@@ -2,26 +2,68 @@
 @if (Model.IsRedesign)
 {
 	<!DOCTYPE html>
-	<html lang="en">
-		<head>
-			<title>@Model.Title</title>
-			<link rel="stylesheet" type="text/css" href="@Model.Static("styles.css")"/>
-			<meta charset="utf-8">
-			<meta name="viewport" content="width=device-width, initial-scale=1.0">
-			<meta name="robots" content="@(Model.AllowIndexing ? "index, follow" : "noindex, nofollow")">
-		</head>
-		<body class="text-ink flex flex-col min-h-screen">
-		<div id="elastic-nav"></div>
-		<script src='https://www.elastic.co/elastic-nav.js'></script>
-
-		<main class="markdown-content max-w-7xl mx-auto p-6 flex-1">
-			@await RenderBodyAsync()
-		</main>
+	<html lang="en" class="h-screen">
+	<head>
+		<title>@Model.Title</title>
+		<link rel="stylesheet" type="text/css" href="@Model.Static("styles.css")"/>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta name="robots" content="@(Model.AllowIndexing ? "index, follow" : "noindex, nofollow")">
+	</head>
+
+	<body class="text-ink">
+	<section class="h-9 bg-black"></section>
+	<header class="sticky top-0 bg-blue-developer max-w-screen px-6 pb-6 flex items-center justify-center">
+		<div class="container flex flex-wrap lg:flex-nowrap">
+			<div class="h-10 mt-6 basis-full lg:basis-auto">
+				<img src="@Model.Static("logo-elastic-horizontal-color-reverse.svg")" alt="Elastic" class="h-10">
+			</div>
+			<form role="search" class="hidden lg:block grow basis-full lg:basis-auto shrink-0 mt-6 lg:mx-10 h-10" autocomplete="off">
+				<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
+				<div class="relative h-10">
+					<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none ml-2">
+						<svg class="w-4 h-4 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+							<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
+						</svg>
+					</div>
+					<div class="rounded-full bg-linear-65 from-pink/[.4] to-teal/[.4] p-[2px] h-10">
+						<input type="search" id="default-search" class="flex items-center h-full w-full p-2 ps-10 text-center bg-[#081335] rounded-full focus-visible:outline-[blue]/[.3] focus-visible:outline-2 truncate text-ellipsis text-white" placeholder="Try searching a document here..." required/>
+					</div>
+				</div>
+			</form>
+			<div class="flex grow lg:flex-none h-10 mt-6">
+				<a href="https://cloud.elastic.co/registration" class="grow select-none cursor-pointer text-white text-nowrap bg-blue-elastic hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-semibold rounded-sm px-6 py-2.5 me-3 focus:outline-none h-10 flex items-center justify-center">Start free trial</a>
+				<a href="https://elastic.co/contact" class="grow cursor-pointer text-white text-nowrap border-2 border-white focus:ring-4 focus:outline-none focus:ring-blue-300 font-semibold rounded-sm px-6 py-2.5 text-center h-10 flex items-center justify-center">Contact Sales</a>
+			</div>
+		</div>
+	</header>
+	<main class="container mx-auto">
 
-		<div id="elastic-footer"></div>
-		<script src='https://www.elastic.co/elastic-footer.js'></script>
-		<script src="@Model.Static("main.js")"></script>
-		</body>
+		<div class="markdown-content w-[100ch] max-w-screen mx-auto pt-6 pb-6 px-6">
+			<ol class="flex-1 mb-6" itemscope="" itemtype="https://schema.org/BreadcrumbList">
+				<li class="inline text-gray-500" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
+					<a itemprop="item" href="/">
+						<span itemprop="name">Elastic</span>
+					</a>
+					<span>/</span>
+					<meta itemprop="position" content="1">
+				</li>
+				@foreach (var item in Model.Parents.Reverse())
+				{
+					<li class="inline text-gray-500" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
+						<a itemprop="item" href="@item.Url">
+							<span itemprop="name">@item.NavigationTitle</span>
+						</a>
+						<span>/</span>
+						<meta itemprop="position" content="2">
+					</li>
+				}
+			</ol>
+			@await RenderBodyAsync()
+		</div>
+	</main>
+	<script src="@Model.Static("main.js")"></script>
+	</body>
 	</html>
 }
 else

src/Elastic.Markdown/package.json

@@ -11,7 +11,7 @@
   "targets": {
     "js": {
       "distDir": "_static",
-      "source": "Assets/main.js"
+      "source": "Assets/main.ts"
     },
     "css": {
       "distDir": "_static",
@@ -24,16 +24,17 @@
   },
   "private": true,
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.3",
     "parcel": "2.13.3",
     "postcss": "^8.5.1",
-    "postcss-import": "^16.1.0",
-    "@tailwindcss/postcss": "^4.0.3"
+    "postcss-import": "^16.1.0"
   },
   "browserslist": [
     "defaults"
   ],
   "dependencies": {
     "highlight.js": "^11.11.1",
+    "tailwind-scrollbar-hide": "^2.0.0",
     "tailwindcss": "^4.0.3"
   }
 }