Skip to content

Commit 35b3859

Browse files
reakaleekreakaleek
committed
redesign: Add header and breadcrumbs
1 parent 4c6aab9 commit 35b3859

16 files changed

+150
-32
lines changed

‎.github/release-drafter.yml

+3
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,9 @@ categories:
2929
labels:
3030
- 'automation' # When automation is updated
3131
- 'ci' # When automation is updated
32+
- title: '🎨 Redesign'
33+
labels:
34+
- 'redesign' # When it's a redesign feature
3235
exclude-labels:
3336
- 'changelog:skip' # When a PR should be excluded from the changelog
3437
version-resolver:

‎.github/workflows/preview-build.yml

+14-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
name: preview-build
22

33
on:
4-
pull_request: ~
4+
pull_request:
5+
types:
6+
- opened
7+
- synchronize
8+
- reopened
9+
- labeled
10+
- unlabeled
511
workflow_call:
612
inputs:
713
strict:
@@ -25,6 +31,9 @@ permissions:
2531

2632
jobs:
2733
build:
34+
concurrency:
35+
group: ${{ github.workflow }}-${{ github.ref }}
36+
cancel-in-progress: true
2837
runs-on: ubuntu-latest
2938
steps:
3039

@@ -66,6 +75,10 @@ jobs:
6675
- name: Bootstrap Action Workspace
6776
if: github.repository == 'elastic/docs-builder' && steps.check-files.outputs.any_changed == 'true'
6877
uses: ./.github/actions/bootstrap
78+
79+
- name: Set REDESIGN feature flag
80+
if: contains(github.event.pull_request.labels.*.name, 'redesign')
81+
run: echo "REDESIGN=true" >> $GITHUB_ENV
6982

7083
# we run our artifact directly please use the prebuild
7184
# elastic/docs-builder@main GitHub Action for all other repositories!

‎.github/workflows/preview-deploy.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ jobs:
8989
PR_NUMBER: ${{ needs.pull-request-data.outputs.number }}
9090
run: |
9191
aws s3 sync ./html "s3://elastic-docs-v3-website-preview/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}" --delete
92-
aws cloudfront create-invalidation --distribution-id EKT7LT5PM8RKS --paths "/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}/*"
92+
aws cloudfront create-invalidation --distribution-id EKT7LT5PM8RKS --paths "/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}*"
9393
9494
- name: Update deployment status
9595
uses: actions/github-script@v7

‎src/Elastic.Markdown/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ _static/main.js
44
_static/main.js.map
55
_static/styles.css
66
_static/styles.css.map
7+
_static/*.woff2

‎src/Elastic.Markdown/Assets/fonts.css

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

‎src/Elastic.Markdown/Assets/fonts/MierB-Regular.woff2

48.6 KB
Binary file not shown.

‎src/Elastic.Markdown/Assets/main.js renamed to ‎src/Elastic.Markdown/Assets/main.ts

File renamed without changes.

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

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,34 @@
11
#elastic-docs-v3 {
22
h1 {
3-
@apply text-4xl text-ink font-semibold mb-6;
3+
font-family: "Mier B", "Inter", sans-serif;
4+
@apply text-4xl text-ink font-bold mb-6;
45
line-height: 1.2em;
56
letter-spacing: -0.04em;
67
}
78

89
h2 {
9-
@apply text-2xl text-ink font-bold mb-6;
10+
font-family: "Mier B", "Inter", sans-serif;
11+
@apply text-2xl text-ink mb-6;
1012
line-height: 1.2em;
1113
letter-spacing: -0.02em;
1214
}
1315

1416
h3 {
17+
font-family: "Mier B", "Inter", sans-serif;
1518
@apply text-xl text-ink font-bold mb-6;
1619
line-height: 1.2em;
1720
letter-spacing: -0.02em;
1821
}
1922

2023
p {
24+
font-family: "Inter", sans-serif;
2125
@apply text-base text-body mb-6;
2226
line-height: 1.5em;
2327
letter-spacing: 0;
2428
}
2529

2630
a {
31+
font-family: "Inter", sans-serif;
2732
@apply text-blue-elastic hover:underline underline-offset-4;
2833
}
2934
}

‎src/Elastic.Markdown/Assets/plugins.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@plugin "tailwind-scrollbar-hide"

‎src/Elastic.Markdown/Assets/styles.css

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
@import "tailwindcss";
2-
@import "highlight.js/styles/atom-one-dark.css";
2+
@import "./fonts.css";
3+
@import "./plugins.css";
34
@import "./theme.css";
5+
@import "highlight.js/styles/atom-one-dark.css";
46
@import "./markdown/typography.css";
57

6-
main.markdown-content {
7-
max-width: 80ch;
8+
#default-search::-webkit-search-cancel-button {
9+
@apply pr-2;
10+
-webkit-appearance: none;
11+
height: 16px;
12+
width: 16px;
13+
margin-left: .4em;
14+
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>");
15+
cursor: pointer;
16+
background-repeat: no-repeat;
817
}

‎src/Elastic.Markdown/Assets/theme.css

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@theme {
2-
--color-*: initial;
2+
/*--color-*: initial;*/
3+
4+
--font-sans: "Mier B", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
35

46
--color-white: #FFFFFF;
57
--color-black: #000000;
@@ -14,9 +16,10 @@
1416
--color-gray-light: #F5F7FA;
1517
--color-gray-dark: #D4DAE5;
1618

17-
--color-blue-elastic: #0077CC;
19+
--color-blue-elastic: #0B64DD;
1820
--color-blue-sky: #36B9FF;
1921
--color-blue-midnight: #20377D;
22+
--color-blue-developer: #101C3F;
2023

2124
--color-red-light: #FB6363;
2225
--color-red-dark: #D93333;

‎src/Elastic.Markdown/Elastic.Markdown.csproj

+2-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,8 @@
4444
<EmbeddedResource Include="_static/*.js.map" Watch="false" />
4545
<EmbeddedResource Include="_static/*.css" Watch="false" />
4646
<EmbeddedResource Include="_static/*.css.map" Watch="false" />
47-
<EmbeddedResource Include="_static/*.svg" />
47+
<EmbeddedResource Include="_static/*.svg" Watch="false" />
48+
<EmbeddedResource Include="_static/*.woff2" Watch="false" />
4849
</ItemGroup>
4950
</Target>
5051

‎src/Elastic.Markdown/Slices/_Layout.cshtml

+61-19
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,68 @@
22
@if (Model.IsRedesign)
33
{
44
<!DOCTYPE html>
5-
<html lang="en">
6-
<head>
7-
<title>@Model.Title</title>
8-
<link rel="stylesheet" type="text/css" href="@Model.Static("styles.css")"/>
9-
<meta charset="utf-8">
10-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11-
<meta name="robots" content="@(Model.AllowIndexing ? "index, follow" : "noindex, nofollow")">
12-
</head>
13-
<body class="text-ink flex flex-col min-h-screen">
14-
<div id="elastic-nav"></div>
15-
<script src='https://www.elastic.co/elastic-nav.js'></script>
16-
17-
<main class="markdown-content max-w-7xl mx-auto p-6 flex-1">
18-
@await RenderBodyAsync()
19-
</main>
5+
<html lang="en" class="h-screen">
6+
<head>
7+
<title>@Model.Title</title>
8+
<link rel="stylesheet" type="text/css" href="@Model.Static("styles.css")"/>
9+
<meta charset="utf-8">
10+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
11+
<meta name="robots" content="@(Model.AllowIndexing ? "index, follow" : "noindex, nofollow")">
12+
</head>
13+
14+
<body class="text-ink">
15+
<section class="h-9 bg-black"></section>
16+
<header class="sticky top-0 bg-blue-developer max-w-screen px-6 pb-6 flex items-center justify-center">
17+
<div class="container flex flex-wrap lg:flex-nowrap">
18+
<div class="h-10 mt-6 basis-full lg:basis-auto">
19+
<img src="@Model.Static("logo-elastic-horizontal-color-reverse.svg")" alt="Elastic" class="h-10">
20+
</div>
21+
<form role="search" class="hidden lg:block grow basis-full lg:basis-auto shrink-0 mt-6 lg:mx-10 h-10" autocomplete="off">
22+
<label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
23+
<div class="relative h-10">
24+
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none ml-2">
25+
<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">
26+
<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"/>
27+
</svg>
28+
</div>
29+
<div class="rounded-full bg-linear-65 from-pink/[.4] to-teal/[.4] p-[2px] h-10">
30+
<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/>
31+
</div>
32+
</div>
33+
</form>
34+
<div class="flex grow lg:flex-none h-10 mt-6">
35+
<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>
36+
<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>
37+
</div>
38+
</div>
39+
</header>
40+
<main class="container mx-auto">
2041

21-
<div id="elastic-footer"></div>
22-
<script src='https://www.elastic.co/elastic-footer.js'></script>
23-
<script src="@Model.Static("main.js")"></script>
24-
</body>
42+
<div class="markdown-content w-[100ch] max-w-screen mx-auto pt-6 pb-6 px-6">
43+
<ol class="flex-1 mb-6" itemscope="" itemtype="https://schema.org/BreadcrumbList">
44+
<li class="inline text-gray-500" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
45+
<a itemprop="item" href="/">
46+
<span itemprop="name">Elastic</span>
47+
</a>
48+
<span>/</span>
49+
<meta itemprop="position" content="1">
50+
</li>
51+
@foreach (var item in Model.Parents.Reverse())
52+
{
53+
<li class="inline text-gray-500" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
54+
<a itemprop="item" href="@item.Url">
55+
<span itemprop="name">@item.NavigationTitle</span>
56+
</a>
57+
<span>/</span>
58+
<meta itemprop="position" content="2">
59+
</li>
60+
}
61+
</ol>
62+
@await RenderBodyAsync()
63+
</div>
64+
</main>
65+
<script src="@Model.Static("main.js")"></script>
66+
</body>
2567
</html>
2668
}
2769
else

‎src/Elastic.Markdown/_static/logo-elastic-horizontal-color-reverse.svg

+23
Loading

‎src/Elastic.Markdown/package-lock.json

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Elastic.Markdown/package.json

+4-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"targets": {
1212
"js": {
1313
"distDir": "_static",
14-
"source": "Assets/main.js"
14+
"source": "Assets/main.ts"
1515
},
1616
"css": {
1717
"distDir": "_static",
@@ -24,16 +24,17 @@
2424
},
2525
"private": true,
2626
"devDependencies": {
27+
"@tailwindcss/postcss": "^4.0.3",
2728
"parcel": "2.13.3",
2829
"postcss": "^8.5.1",
29-
"postcss-import": "^16.1.0",
30-
"@tailwindcss/postcss": "^4.0.3"
30+
"postcss-import": "^16.1.0"
3131
},
3232
"browserslist": [
3333
"defaults"
3434
],
3535
"dependencies": {
3636
"highlight.js": "^11.11.1",
37+
"tailwind-scrollbar-hide": "^2.0.0",
3738
"tailwindcss": "^4.0.3"
3839
}
3940
}

0 commit comments

Comments
 (0)