diff --git a/.github/release-drafter.yml b/.github/release-drafter.yml index df484b25..f475eed9 100644 --- a/.github/release-drafter.yml +++ b/.github/release-drafter.yml @@ -29,6 +29,9 @@ categories: labels: - 'automation' # When automation is updated - 'ci' # When automation is updated + - title: '🎨 Redesign' # Temporary category while we're redesigning the docs + labels: + - 'redesign' # When it's a redesign feature exclude-labels: - 'changelog:skip' # When a PR should be excluded from the changelog version-resolver: diff --git a/.github/workflows/preview-build.yml b/.github/workflows/preview-build.yml index 645f3c37..9b80c1fc 100644 --- a/.github/workflows/preview-build.yml +++ b/.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! diff --git a/.github/workflows/preview-deploy.yml b/.github/workflows/preview-deploy.yml index fb129175..c8de2172 100644 --- a/.github/workflows/preview-deploy.yml +++ b/.github/workflows/preview-deploy.yml @@ -89,7 +89,9 @@ 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}" "/${GITHUB_REPOSITORY}/pull/${PR_NUMBER}/*" - name: Update deployment status uses: actions/github-script@v7 diff --git a/src/Elastic.Markdown/.gitignore b/src/Elastic.Markdown/.gitignore index cacbcfd9..0da75fc8 100644 --- a/src/Elastic.Markdown/.gitignore +++ b/src/Elastic.Markdown/.gitignore @@ -4,3 +4,4 @@ _static/main.js _static/main.js.map _static/styles.css _static/styles.css.map +_static/*.woff2 diff --git a/src/Elastic.Markdown/Assets/fonts.css b/src/Elastic.Markdown/Assets/fonts.css new file mode 100644 index 00000000..00572615 --- /dev/null +++ b/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") +} diff --git a/src/Elastic.Markdown/Assets/fonts/MierB-Regular.woff2 b/src/Elastic.Markdown/Assets/fonts/MierB-Regular.woff2 new file mode 100644 index 00000000..8e455d1d Binary files /dev/null and b/src/Elastic.Markdown/Assets/fonts/MierB-Regular.woff2 differ diff --git a/src/Elastic.Markdown/Assets/main.js b/src/Elastic.Markdown/Assets/main.ts similarity index 100% rename from src/Elastic.Markdown/Assets/main.js rename to src/Elastic.Markdown/Assets/main.ts diff --git a/src/Elastic.Markdown/Assets/markdown/typography.css b/src/Elastic.Markdown/Assets/markdown/typography.css index e8c9cc4e..0fc01be6 100644 --- a/src/Elastic.Markdown/Assets/markdown/typography.css +++ b/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; } } diff --git a/src/Elastic.Markdown/Assets/plugins.css b/src/Elastic.Markdown/Assets/plugins.css new file mode 100644 index 00000000..3df16aaf --- /dev/null +++ b/src/Elastic.Markdown/Assets/plugins.css @@ -0,0 +1 @@ +@plugin "tailwind-scrollbar-hide" diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css index e74cf461..5039e5af 100644 --- a/src/Elastic.Markdown/Assets/styles.css +++ b/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,"); + cursor: pointer; + background-repeat: no-repeat; } diff --git a/src/Elastic.Markdown/Assets/theme.css b/src/Elastic.Markdown/Assets/theme.css index f57d7627..cce351b2 100644 --- a/src/Elastic.Markdown/Assets/theme.css +++ b/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; diff --git a/src/Elastic.Markdown/Elastic.Markdown.csproj b/src/Elastic.Markdown/Elastic.Markdown.csproj index 5bd99ca6..15b337c1 100644 --- a/src/Elastic.Markdown/Elastic.Markdown.csproj +++ b/src/Elastic.Markdown/Elastic.Markdown.csproj @@ -44,7 +44,8 @@ - + + diff --git a/src/Elastic.Markdown/Slices/_Layout.cshtml b/src/Elastic.Markdown/Slices/_Layout.cshtml index 5b5772e4..3c0da9a7 100644 --- a/src/Elastic.Markdown/Slices/_Layout.cshtml +++ b/src/Elastic.Markdown/Slices/_Layout.cshtml @@ -2,26 +2,68 @@ @if (Model.IsRedesign) { - - - @Model.Title - - - - - - -
- - -
- @await RenderBodyAsync() -
+ + + @Model.Title + + + + + + + +
+
+
+
+ Elastic +
+ +
+ Start free trial + Contact Sales +
+
+
+
- - - - +
+
    +
  1. + + Elastic + + / + +
    2. + @foreach (var item in Model.Parents.Reverse()) + { +
  2. + + @item.NavigationTitle + + / + +
    3. + } +
+ @await RenderBodyAsync() +
+
+ + } else diff --git a/src/Elastic.Markdown/_static/logo-elastic-horizontal-color-reverse.svg b/src/Elastic.Markdown/_static/logo-elastic-horizontal-color-reverse.svg new file mode 100644 index 00000000..fe54a4f0 --- /dev/null +++ b/src/Elastic.Markdown/_static/logo-elastic-horizontal-color-reverse.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/Elastic.Markdown/package-lock.json b/src/Elastic.Markdown/package-lock.json index eb9be8c9..f0df56fa 100644 --- a/src/Elastic.Markdown/package-lock.json +++ b/src/Elastic.Markdown/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "dependencies": { "highlight.js": "^11.11.1", + "tailwind-scrollbar-hide": "^2.0.0", "tailwindcss": "^4.0.3" }, "devDependencies": { @@ -4420,6 +4421,14 @@ "node": ">= 10" } }, + "node_modules/tailwind-scrollbar-hide": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-2.0.0.tgz", + "integrity": "sha512-lqiIutHliEiODwBRHy4G2+Tcayo2U7+3+4frBmoMETD72qtah+XhOk5XcPzC1nJvXhXUdfl2ajlMhUc2qC6CIg==", + "peerDependencies": { + "tailwindcss": ">=3.0.0 || >= 4.0.0 || >= 4.0.0-beta.8 || >= 4.0.0-alpha.20" + } + }, "node_modules/tailwindcss": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.3.tgz", diff --git a/src/Elastic.Markdown/package.json b/src/Elastic.Markdown/package.json index 26e441e7..c28e635e 100644 --- a/src/Elastic.Markdown/package.json +++ b/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" } }