diff --git a/.github/actions/spelling/expect.txt b/.github/actions/spelling/expect.txt index 6cddf2047d..7f5e2aaaeb 100644 --- a/.github/actions/spelling/expect.txt +++ b/.github/actions/spelling/expect.txt @@ -378,8 +378,6 @@ Lato lfc Lifcycle lifecyclekeptnsh -linecap -linejoin linkedin linktitle linting @@ -563,6 +561,7 @@ serrors serviceaccount serviceaccountspec serviceport +setuptools shellcheck SHELLFLAGS shortcode @@ -588,7 +587,6 @@ statefultest stdouttrace storageclasses storageversion -striptags sts stylesheet subchart @@ -658,6 +656,7 @@ vcluster Vec versioned versioning +virtualenv visualise visualised vkeptnmetric diff --git a/.github/workflows/spell-checker.yml b/.github/workflows/spell-checker.yml index 9c2543da64..1b68aca514 100644 --- a/.github/workflows/spell-checker.yml +++ b/.github/workflows/spell-checker.yml @@ -56,3 +56,4 @@ jobs: cspell:software-terms/dict/softwareTerms.txt cspell:k8s/dict/k8s.txt cspell:golang/dict/go.txt + cspell:html/dict/html.txt diff --git a/.readthedocs.yaml b/.readthedocs.yaml index fde2a2c70e..5ede592a0c 100644 --- a/.readthedocs.yaml +++ b/.readthedocs.yaml @@ -9,10 +9,18 @@ version: "2" build: os: ubuntu-22.04 tools: - python: "3.12" + python: "3.11" + commands: + - python -m virtualenv $READTHEDOCS_VIRTUALENV_PATH + - python -m pip install --upgrade --no-cache-dir pip setuptools + - python -m pip install --upgrade --no-cache-dir mkdocs + - python -m pip install --exists-action=w --no-cache-dir -r requirements.txt + - cat mkdocs.yml + - python -m mkdocs build --clean --site-dir $READTHEDOCS_OUTPUT/html --config-file mkdocs.yml --strict mkdocs: configuration: mkdocs.yml + fail_on_warning: true python: install: diff --git a/docs-new/Makefile b/docs-new/Makefile index 52a435269f..2495e872ef 100644 --- a/docs-new/Makefile +++ b/docs-new/Makefile @@ -25,6 +25,7 @@ docs-build: -v ${PWD}/requirements.txt:/requirements.txt \ -v ${PWD}/site:/site \ -v ${PWD}/.git:/.git \ + -v ${PWD}/tmp/.pip-cache:/root/.cache/pip \ --entrypoint "" \ ${MKDOCS_DOCKER_IMAGE}:${MKDOCS_DOCKER_IMAGE_VERSION} \ sh -c 'cd /; pip install -r requirements.txt -q; mkdocs build' @@ -37,9 +38,10 @@ docs-serve: -v ${PWD}/requirements.txt:/requirements.txt \ -v ${PWD}/site:/site \ -v ${PWD}/.git:/.git \ + -v ${PWD}/tmp/.pip-cache:/root/.cache/pip \ --entrypoint "" \ ${MKDOCS_DOCKER_IMAGE}:${MKDOCS_DOCKER_IMAGE_VERSION} \ - sh -c 'cd /; pip install -r requirements.txt -q; mkdocs serve -a 0.0.0.0:$(PORT)' + sh -c 'cd /; pip install -r requirements.txt -q; mkdocs serve --dirty -a 0.0.0.0:$(PORT)' .PHONY: htmltest diff --git a/docs-new/assets/images/capabilities-01.svg b/docs-new/assets/images/capabilities-01.svg new file mode 100644 index 0000000000..4b428e177b --- /dev/null +++ b/docs-new/assets/images/capabilities-01.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs-new/assets/images/capabilities-03.svg b/docs-new/assets/images/capabilities-03.svg new file mode 100644 index 0000000000..abdfc537c2 --- /dev/null +++ b/docs-new/assets/images/capabilities-03.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs-new/assets/images/capabilities-04.svg b/docs-new/assets/images/capabilities-04.svg new file mode 100644 index 0000000000..3b67632c6d --- /dev/null +++ b/docs-new/assets/images/capabilities-04.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs-new/assets/higher-compliance.png b/docs-new/assets/images/higher-compliance.png similarity index 100% rename from docs-new/assets/higher-compliance.png rename to docs-new/assets/images/higher-compliance.png diff --git a/docs-new/assets/keptn-icon-white.svg b/docs-new/assets/images/keptn-icon-white.svg similarity index 100% rename from docs-new/assets/keptn-icon-white.svg rename to docs-new/assets/images/keptn-icon-white.svg diff --git a/docs-new/assets/images/keptn-logo-white.svg b/docs-new/assets/images/keptn-logo-white.svg new file mode 100644 index 0000000000..9a814a3e39 --- /dev/null +++ b/docs-new/assets/images/keptn-logo-white.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs-new/assets/images/logo-mobile.svg b/docs-new/assets/images/logo-mobile.svg new file mode 100644 index 0000000000..6f2c3b7865 --- /dev/null +++ b/docs-new/assets/images/logo-mobile.svg @@ -0,0 +1,21 @@ + + + + +Group 2 +Created with Sketch. + + + + + + + + + diff --git a/docs-new/assets/stylesheets/color-schemes.css b/docs-new/assets/stylesheets/color-schemes.css new file mode 100644 index 0000000000..d47b5940ad --- /dev/null +++ b/docs-new/assets/stylesheets/color-schemes.css @@ -0,0 +1,53 @@ +[data-md-color-scheme="default"] { + color-scheme: light; + --md-primary-fg-color: #006bba; + --md-primary-fg-color--light: #198fde; + --md-primary-fg-color--dark: #004f9b; + + --md-primary-bg-color: #FFFFFFFF; + --md-primary-bg-color--light: #FFFFFFB3; + + --md-typeset-color: var(--md-default-fg-color); + + --md-accent-fg-color: #D8E6F4FF; + --md-accent-fg-color--transparent: #4051B51A; + + --md-accent-bg-color: var(--md-primary-bg-color); + --md-accent-bg-color--light: var(--md-primary-bg-color--light); + + --md-default-fg-color: hsla(0, 0%, 0%, 0.87); + --md-default-fg-color--light: hsla(0, 0%, 0%, 0.54); + --md-default-fg-color--lighter: hsla(0, 0%, 0%, 0.32); + --md-default-fg-color--lightest: hsla(0, 0%, 0%, 0.07); + --md-default-bg-color: hsla(0, 0%, 100%, 1); + --md-default-bg-color--light: hsla(0, 0%, 100%, 0.7); + --md-default-bg-color--lighter: hsla(0, 0%, 100%, 0.3); + --md-default-bg-color--lightest: hsla(0, 0%, 100%, 0.12); +} + +[data-md-color-scheme="slate"] { + color-scheme: dark; + --md-primary-fg-color: #004f9b; + --md-primary-fg-color--light: #0b7dcc; + --md-primary-fg-color--dark: #004f9b; + + --md-primary-bg-color: #FFFFFFFF; + --md-primary-bg-color--light: #FFFFFFB3; + + --md-typeset-color: var(--md-default-fg-color); + + --md-accent-fg-color: #2774b6; + --md-accent-fg-color--transparent: #2774b61A; + + --md-accent-bg-color: var(--md-primary-bg-color); + --md-accent-bg-color--light: var(--md-primary-bg-color--light); + + --md-default-fg-color: hsla(0, 0%, 100%, 1); + --md-default-fg-color--light: hsla(0, 0%, 100%, 0.7); + --md-default-fg-color--lighter: hsla(0, 0%, 100%, 0.3); + --md-default-fg-color--lightest: hsla(0, 0%, 100%, 0.12); + --md-default-bg-color: hsla(0, 0%, 0%, 0.67); + --md-default-bg-color--light: hsla(0, 0%, 0%, 0.54); + --md-default-bg-color--lighter: hsla(0, 0%, 0%, 0.32); + --md-default-bg-color--lightest: hsla(0, 0%, 0%, 0.07); +} diff --git a/docs-new/assets/stylesheets/home.css b/docs-new/assets/stylesheets/home.css index ff83038cc1..212d49c7ba 100644 --- a/docs-new/assets/stylesheets/home.css +++ b/docs-new/assets/stylesheets/home.css @@ -1,3 +1,27 @@ +body { + overflow-x: hidden; +} + +.md-content__inner { + margin-bottom: 0; + padding: 2.2rem 0; +} + +.md-content__inner:before { + display: none; +} + +/* Prevent removing default title on the page */ +.md-content__inner h1:first-child { + display: block; +} + +@media (max-width: 600px) { + .md-typeset .header-link { + display: none; + } +} + .md-main { flex-grow: 0 } @@ -7,9 +31,9 @@ height: 100%; } -.tx-container { +.gradient-container { padding-top: .0rem; - background: linear-gradient(to bottom, var(--md-primary-fg-color), var(--md-accent-fg-color) 99%,#fff 99%) + background: linear-gradient(to bottom, var(--md-primary-fg-color), var(--md-accent-fg-color),var(--md-default-bg-color)); } .tx-hero { @@ -20,7 +44,7 @@ .tx-hero h1 { margin-bottom: 1rem; - color: currentColor; + color: var(--md-default-fg-color--light); font-weight: 700 } @@ -44,24 +68,17 @@ .tx-hero .md-button--primary { background-color: var(--md-primary-bg-color); - color: hsla(280deg, 37%, 48%, 1); + color: var(--md-primary-fg-color); border-color: var(--md-primary-bg-color) } .tx-hero .md-button:focus, .tx-hero .md-button:hover { background-color: var(--md-accent-fg-color); - color: var(--md-default-bg-color); + color: var(--md-primary-bg-color); border-color: var(--md-accent-fg-color) } -.feature-item h2 svg { - height: 30px; - float: left; - margin-right: 10px; - transform: translateY(10%); -} - .top-hr { margin-top: 42px; } @@ -75,7 +92,6 @@ } .feature-item h2 { - color: #333; font-weight: 300; font-size: 25px; white-space: nowrap; @@ -92,7 +108,6 @@ line-height: 1.8em; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; - color: #111; margin: 0 0 10px; display: block; } @@ -154,7 +169,7 @@ } .feature-item:hover { - background-color: #526cfe47; + background-color: var(--md-accent-fg-color--transparent); border-radius: 3px; } } @@ -178,24 +193,8 @@ padding-bottom: 10px; } -.logos { - display: flex; - align-items: center; - justify-content: center; - flex-flow: row wrap; - margin: 0 auto; -} - -.logos img { - flex: 1 1 auto; - padding: 25px; - max-height: 130px; - vertical-align: middle; -} - -.hr-logos { - margin-top: 0; - margin-bottom: 30px; +.md-footer { + display: block; } .md-footer-meta__inner { @@ -208,3 +207,73 @@ .md-footer-social { padding-top: 20px; } + +/* new stuff */ + +.md-typeset h2 + h3 { + font-size: 1em; + margin-top: -0.8em; +} + +.md-typeset figure { + display: flex; +} + +.md-content header { + display: block; +} + +.mdx-spotlight { + margin: 2em 0; +} + +.mdx-spotlight__feature { + display: flex; + flex: 1 0 48%; + flex-flow: row nowrap; + gap: 3.2rem; + margin: 0 0 3.2rem; +} +.mdx-spotlight__feature:last-child { + margin-bottom: 1em; +} + +.mdx-spotlight__feature > img { + display: block; + flex-shrink: 0; + border-radius: 0.2rem; + box-shadow: var(--md-shadow-z2); + width: 25rem; + max-width: 100%; +} + +.mdx-spotlight__feature figcaption { + margin-top: 0.8rem; +} + +@media screen and (max-width: 59.9375em) { + .mdx-spotlight__feature { + flex-direction: column; + gap: 0; + } + + .mdx-spotlight__feature > img { + margin-left: auto; + margin-right: auto; + height: auto; + } +} + +@media screen and (min-width: 60em) { + .tx-container { + padding-bottom: 1vw; + } + + .top-hr { + padding-bottom: 3vw; + } + + .mdx-spotlight__feature:nth-child(odd) { + flex-direction: row-reverse; + } +} diff --git a/docs-new/index.md b/docs-new/index.md index 6399c1c311..9956e6c231 100644 --- a/docs-new/index.md +++ b/docs-new/index.md @@ -1,8 +1,5 @@ --- template: home.html -social: - cards_layout_options: - title: Keptn - Supercharge your Deployments --- -Keptn - Supercharge your Deployments +# Keptn - Supercharge your Deployments diff --git a/docs-new/overrides/home.html b/docs-new/overrides/home.html index 3daba19332..ea50570992 100644 --- a/docs-new/overrides/home.html +++ b/docs-new/overrides/home.html @@ -3,65 +3,166 @@ {% extends "main.html" %} {% block styles %} {{ super() }} - + {% endblock %} {% block tabs %} {{ super() }} -
-
-
-
- graphic of sea men hoisting an anchor -
-
-

Keptn

-

Supercharge your deployments with Keptn!

- - Get started - - - Go to GitHub - +
+
+
+
+
+
+
+ keptn icon with keptn text next to it +

Supercharge your deployments with Keptn!

+ + Get started + + + Documentation + +
-
-
+ - -
-
-

- Deployment Observability -

-

Make ANY Kubernetes Deployment observable

-
-
-

- - - Gather metrics from anywhere -

-

Standardize access for all Observability Data for K8s

-
-
-

- - Orchestrate Deployment Checks -

-

Gain confidence in your work with pre-/post-deployment checks

-
-
+ +
+
+ + a ship going around in circles with an infinity symbol next to it +

+ Deployment Observability +

+

Make ANY Kubernetes Deployment observable

+ +
-
-
+
+ + a lighthouse with a heartbeat line and a sheet with SLIs and SLOs on it +

+ Gather metrics from anywhere +

+

Standardize access for all Observability Data for K8s

+ +
+
+ + a seaman holding a sheet of paper with cog on it +

+ Orchestrate Deployment Checks +

+

Gain confidence in your work with pre/post-deployment checks

+ +
+
+
+
+
+

+ Supercharge your Deployments +

+
+
+
+ a ship going around in circles with an infinity symbol next to it +
+

Deployment Observability

+

Make any Kubernetes workload observable

+

+ If you deploy with ArgoCD, Flux, GitLab, kubectl, etc. we provide you: +

+
    +
  • Automated App-Aware DORA metrics (OTel Metrics)
    • +
  • Troubleshoot failed deployments (OTel Traces)
    • +
  • Trace deployments from Git to cloud (traces across stages)
    • +
+
+
+
+ a lighthouse with a heartbeat line and a sheet with SLIs and SLOs on it +
+

Gather metrics from anywhere

+

Standardize access for all Observability Data for K8s

+

+ The Keptn Metrics Operator provides the following features: +

+
    +
  • Define Keptn Metrics once for Dynatrace, DataDog, AWS, Azure, GCP, …
    • +
  • Access all those metrics via Prometheus or K8s Metric API
    • +
  • Eliminate the need of multiple plugins for Argo Rollouts, KEDA, HPA, …
    • +
+
+
+
+ a seaman holding a sheet of paper with cog on it +
+

Orchestrate Deployment Checks

+

+ To reduce complexity of custom checks use Keptn to: +

+
    +
  • + Pre-Deploy: +
      +
    • Validate external dependencies
      • +
    • Confirm that images are scanned
      • +
    +
    • +
  • + Post-Deploy: +
      +
    • Execute tests
      • +
    • Notify stakeholders
      • +
    • Promote to next state
      • +
    +
    • +
  • Automatically validate against your SLOs (Service Level Objectives)
    • +
+
+
+
+
+
+
{% endblock %} {% block content %}{% endblock %} -{% block footer %}{% endblock %} diff --git a/mkdocs.yml b/mkdocs.yml index 85fcc14882..42563f2d28 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -16,8 +16,8 @@ theme: toggle: icon: material/brightness-4 name: Switch to light mode - logo: assets/keptn-icon-white.svg - favicon: https://lifecycle.keptn.sh/images/logo-mobile.svg + logo: assets/images/keptn-icon-white.svg + favicon: assets/images/logo-mobile.svg features: - navigation.tabs - navigation.tracking @@ -27,6 +27,9 @@ theme: - search.highlight - content.action.edit - content.action.view + - search.suggest + - search.highlight +site_url: !ENV READTHEDOCS_CANONICAL_URL repo_name: keptn/lifecycle-toolkit repo_url: https://github.com/keptn/lifecycle-toolkit edit_uri: edit/main/docs-new/ @@ -51,7 +54,9 @@ extra_javascript: - assets/javascripts/versions.js extra_css: - assets/stylesheets/versions.css + - assets/stylesheets/color-schemes.css plugins: + - search - social - include-markdown: trailing_newlines: false