redesign: Add header and breadcrumbs

Author: reakaleek

.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/fonts/MierB-Regular.woff2

@@ -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/main.js renamed to src/Elastic.Markdown/Assets/main.ts

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

src/Elastic.Markdown/Assets/markdown/typography.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;
 }