From ef903d4f81ee60a4a54c1fb3aac2787690f9fbaa Mon Sep 17 00:00:00 2001 From: Kevin Pruett Date: Tue, 5 Nov 2019 19:54:24 -0500 Subject: [PATCH] website: Homepage updates, use case pages, navigation changes (#7782) * website: various updates * Expose /docs and /intro views using documentation-style layout for index pages * Add [Use Case] Secrets Management page * Add [Use Case] Data Encryption page * Add [Use Case] Identity Based Access page * Update redirects file removing `/intro` routes redirecting to `learn.hashicorp` * Hide MegaNav on mobile * website: route /api straight to documentation * Bybass index page and jump straight to content --- website/.node-version | 1 + website/.prettierrc | 4 + website/assets/css/_section.css | 351 +++++++++++++++ website/assets/css/index.css | 49 +- website/assets/css/pages/_home.css | 31 ++ website/assets/css/pages/_use_cases.css | 72 +++ .../img/homepage/callouts/encryption.png | 3 + .../assets/img/homepage/callouts/identity.png | 3 + .../assets/img/homepage/callouts/secrets.png | 3 + website/assets/img/icons/alert-triangle.svg | 5 + website/assets/img/icons/check-circle.svg | 4 + .../identity-based-access/challenge.png | 3 + .../identity-based-access/logos/aws.png | 3 + .../identity-based-access/logos/azure.png | 3 + .../identity-based-access/logos/gcp.png | 3 + .../logos/kubernetes.png | 3 + .../identity-based-access/logos/nomad.png | 3 + .../identity-based-access/logos/okta.png | 3 + .../identity-based-access/logos/pivotalcf.png | 3 + .../identity-based-access/logos/ssh.png | 3 + .../screenshot-control-groups.png | 3 + .../screenshot-entities.png | 3 + .../screenshot-identity-groups.png | 3 + .../identity-based-access/solution.png | 3 + .../before-after-diagram/alert-icon.js | 32 ++ .../before-after-diagram/check-icon.js | 27 ++ .../components/before-after-diagram/index.js | 75 ++++ .../components/before-after-diagram/style.css | 424 ++++++++++++++++++ website/assets/package-lock.json | 31 +- website/assets/package.json | 7 +- website/assets/reshape.js | 59 +-- website/config.rb | 62 +++ website/source/api/index.html.erb | 83 ---- website/source/api/index.html.md.erb | 4 + website/source/docs/index.html.erb | 82 ---- website/source/docs/index.html.erb.md | 5 + website/source/index.html.erb | 166 +++++-- website/source/intro/index.html.erb.md | 3 + website/source/layouts/inner.erb | 5 +- website/source/netlify-redirects | 26 +- website/source/partials/_subnav.html.erb | 1 + .../partials/_use-case-cta-section.html.erb | 12 + .../use-cases/data-encryption/index.html.erb | 83 ++++ .../identity-based-access/index.html.erb | 170 +++++++ .../secrets-management/index.html.erb | 169 +++++++ 45 files changed, 1820 insertions(+), 271 deletions(-) create mode 100644 website/.node-version create mode 100644 website/.prettierrc create mode 100644 website/assets/css/_section.css create mode 100644 website/assets/css/pages/_use_cases.css create mode 100644 website/assets/img/homepage/callouts/encryption.png create mode 100644 website/assets/img/homepage/callouts/identity.png create mode 100644 website/assets/img/homepage/callouts/secrets.png create mode 100644 website/assets/img/icons/alert-triangle.svg create mode 100644 website/assets/img/icons/check-circle.svg create mode 100644 website/assets/img/use-cases/identity-based-access/challenge.png create mode 100644 website/assets/img/use-cases/identity-based-access/logos/aws.png create mode 100644 website/assets/img/use-cases/identity-based-access/logos/azure.png create mode 100644 website/assets/img/use-cases/identity-based-access/logos/gcp.png create mode 100644 website/assets/img/use-cases/identity-based-access/logos/kubernetes.png create mode 100644 website/assets/img/use-cases/identity-based-access/logos/nomad.png create mode 100644 website/assets/img/use-cases/identity-based-access/logos/okta.png create mode 100644 website/assets/img/use-cases/identity-based-access/logos/pivotalcf.png create mode 100644 website/assets/img/use-cases/identity-based-access/logos/ssh.png create mode 100644 website/assets/img/use-cases/identity-based-access/screenshot-control-groups.png create mode 100644 website/assets/img/use-cases/identity-based-access/screenshot-entities.png create mode 100644 website/assets/img/use-cases/identity-based-access/screenshot-identity-groups.png create mode 100644 website/assets/img/use-cases/identity-based-access/solution.png create mode 100644 website/assets/js/components/before-after-diagram/alert-icon.js create mode 100644 website/assets/js/components/before-after-diagram/check-icon.js create mode 100644 website/assets/js/components/before-after-diagram/index.js create mode 100644 website/assets/js/components/before-after-diagram/style.css delete mode 100644 website/source/api/index.html.erb create mode 100644 website/source/api/index.html.md.erb delete mode 100644 website/source/docs/index.html.erb create mode 100644 website/source/docs/index.html.erb.md create mode 100644 website/source/intro/index.html.erb.md create mode 100644 website/source/partials/_subnav.html.erb create mode 100644 website/source/partials/_use-case-cta-section.html.erb create mode 100644 website/source/use-cases/data-encryption/index.html.erb create mode 100644 website/source/use-cases/identity-based-access/index.html.erb create mode 100644 website/source/use-cases/secrets-management/index.html.erb diff --git a/website/.node-version b/website/.node-version new file mode 100644 index 000000000..348076b95 --- /dev/null +++ b/website/.node-version @@ -0,0 +1 @@ +10.15.3 diff --git a/website/.prettierrc b/website/.prettierrc new file mode 100644 index 000000000..b2095be81 --- /dev/null +++ b/website/.prettierrc @@ -0,0 +1,4 @@ +{ + "semi": false, + "singleQuote": true +} diff --git a/website/assets/css/_section.css b/website/assets/css/_section.css new file mode 100644 index 000000000..8092cd1d8 --- /dev/null +++ b/website/assets/css/_section.css @@ -0,0 +1,351 @@ +@import '@hashicorp/hashi-global-styles/style'; + +.g-section-block { + padding: 160px 0; + + @media (max-width: 1119px) { + padding: 104px 0; + } + + @media (max-width: 767px) { + padding: 80px 0; + } + + &.theme-white-background-black-text:not(.divider-gray-line) + + .theme-white-background-black-text { + padding-top: 32px; + } + + /* Layout Styles */ + &.layout-horizontal { + & > .g-container { + display: flex; + align-items: center; + + & > * + * { + margin-left: 96px; + } + } + + & .img-container { + flex-shrink: 0; + + & img { + align-self: center; + } + } + } + + &.layout-vertical { + & > .g-container { + & > * + * { + margin-top: 96px; + + @media (max-width: 1119px) { + margin-top: 72px; + } + + @media (max-width: 767px) { + margin-top: 56px; + } + } + + & > .g-text-and-content + .g-text-and-content { + margin-top: 192px; + + @media (max-width: 1119px) { + margin-top: 144px; + } + + @media (max-width: 767px) { + margin-top: 112px; + } + } + + & > .g-section-header { + & + * { + margin-top: 72px; + + @media (max-width: 1119px) { + margin-top: 64px; + } + + @media (max-width: 767px) { + margin-top: 40px; + } + } + } + + & > * + .btn-container { + margin-top: 40px; + + @media (max-width: 767px) { + margin-top: 32px; + } + } + } + } + + /* TODO: remove this once new section header is out */ + & .g-section-header { + margin: 0 auto; + } + + /* Module styles */ + + & .btn-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + margin: auto -8px -16px; + + & > * { + margin: auto 8px 16px; + } + } + + & .img-container { + display: flex; + justify-content: center; + + & .g-container { + flex-shrink: 0; + width: 100%; + } + + & img { + max-width: 100%; + } + + & picture { + display: flex; + justify-content: center; + width: 100%; + + & img { + object-fit: contain; + font-family: 'object-fit:contain'; + flex-shrink: 0; + } + } + } + + & .two-col-text-container { + & .g-container { + display: flex; + @media (max-width: 850px) { + flex-direction: column; + } + } + + & .left, + & .right { + width: 48%; + flex-shrink: 0; + + @media (max-width: 850px) { + width: 100%; + } + + & > *:first-child { + margin-top: 0; + } + } + + & .left { + margin-right: 4%; + + @media (max-width: 850px) { + margin-right: 0; + margin-bottom: 32px; + } + } + + & a { + font-weight: 600; + color: inherit; + + &:hover { + border-bottom: 1px solid; + opacity: 0.8; + } + } + + & h5 { + margin-bottom: 1em; + } + + & ul { + list-style: none; + padding-left: 15px; + + & li { + display: flex; + align-items: center; + margin-bottom: 5px; + + &:before { + content: ''; + width: 18px; + height: 18px; + background: url('/img/black-circle-white-check.svg') no-repeat; + background-size: 100%; + margin-right: 10px; + } + } + } + } + + & .g-text-and-image { + & .imgwrap { + display: flex; + + & picture { + display: flex; + justify-content: center; + width: 100%; + + & img { + object-fit: contain; + font-family: 'object-fit:contain'; + max-width: 350px; + } + } + } + + & .text { + & h2 { + font-size: 1.5rem; + } + + & a { + font-weight: 600; + color: white; + padding-bottom: 1px; + + &:hover { + border-bottom: 1px solid; + } + } + } + } + + & .small-text-tag { + text-align: center; + text-transform: uppercase; + color: #8d9096; + font-size: 0.9rem; + font-weight: 600; + } + + & .g-logo-grid.large li { + background-color: white; + } + + & .video-container { + max-width: 80%; + margin-left: auto; + margin-right: auto; + } + + /* THEMES */ + &.theme-terraform-purple-top-gradient { + color: white; + background: linear-gradient(to bottom, #1b212c, #000000); + } + + &.theme-dark-blue { + color: white; + background: #1b212d; + } + + &.theme-white-background-black-text { + background: white; + color: black; + } + + &.theme-black-background-white-text { + background: var(--gray-1); + color: white; + } + + &.theme-light-gray { + color: black; + background: #f3f4f6; + } + + &.theme-default-blue-gradient { + background: url('/img/backgrounds/partner-cta-bg.svg'); + background-position: center center; + background-size: cover; + color: var(--white); + } + + &.theme-terraform-purple-gradient { + @extend %gradient-bg; + background: linear-gradient(to right, #695af0, #6b5cf3); + + &::before { + background: linear-gradient(to right, #5b48e7, #6b5cf3); + } + } + + &.theme-nomad-green-gradient { + @extend %gradient-bg; + background: linear-gradient(to right, #1dbe83, #1ec185); + + &::before { + background: linear-gradient(to right, #20c78a, #17c185); + } + } + + &.theme-terraform-purple-testimonial-split { + color: white; + position: relative; + overflow: hidden; + + &:before { + content: ''; + background: linear-gradient(to right, #695af0, #6b5cf3); + width: 100%; + height: 550px; + position: absolute; + top: 0; + left: 0; + } + + & .g-container { + position: relative; + } + } + + /* DIVIDERS */ + &.divider-gray-line { + border-bottom: 1px solid #d9dbdd; + } + + &.divider-dark-gray-line { + border-bottom: 1px solid #424242; + } + + &.divider-black-down-arrow { + border-bottom: 1px solid #d0d2d5; + position: relative; + + &:after { + content: ''; + width: 82px; + height: 82px; + background: black url('/img/white-down-chevron.svg') 50% 55% no-repeat; + margin-top: 21px; + border-radius: 50%; + position: absolute; + bottom: -40px; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + z-index: 2; + } + } +} diff --git a/website/assets/css/index.css b/website/assets/css/index.css index c469ea52f..833d0f137 100644 --- a/website/assets/css/index.css +++ b/website/assets/css/index.css @@ -2,34 +2,45 @@ @import '@hashicorp/hashi-global-styles/style'; /* NPM Preact Components */ +@import '@hashicorp/hashi-alert/dist/style.css'; +@import '@hashicorp/hashi-button/dist/style.css'; +@import '@hashicorp/hashi-callouts/dist/style.css'; +@import '@hashicorp/hashi-case-study-slider/dist/style.css'; +@import '@hashicorp/hashi-code-block/dist/style.css'; +@import '@hashicorp/hashi-consent-manager/dist/style.css'; +@import '@hashicorp/hashi-content/dist/style.css'; +@import '@hashicorp/hashi-docs-sidenav/dist/style.css'; +@import '@hashicorp/hashi-docs-sitemap/dist/style.css'; @import '@hashicorp/hashi-footer/dist/style.css'; +@import '@hashicorp/hashi-hero/dist/style.css'; +@import '@hashicorp/hashi-linked-text-summary-list/dist/style.css'; +@import '@hashicorp/hashi-logo-grid/dist/style.css'; +@import '@hashicorp/hashi-mega-nav/dist/style.css'; @import '@hashicorp/hashi-nav/dist/style.css'; @import '@hashicorp/hashi-newsletter-signup-form/dist/style.css'; -@import '@hashicorp/hashi-button/dist/style.css'; -@import '@hashicorp/hashi-product-subnav/dist/style.css'; -@import '@hashicorp/hashi-content/dist/style.css'; -@import '@hashicorp/hashi-mega-nav/dist/style.css'; -@import '@hashicorp/hashi-docs-sidenav/dist/style.css'; -@import '@hashicorp/hashi-vertical-text-block-list/dist/style.css'; -@import '@hashicorp/hashi-section-header/dist/style.css'; @import '@hashicorp/hashi-product-downloader/dist/style.css'; -@import '@hashicorp/hashi-hero/dist/style.css'; -@import '@hashicorp/hashi-alert/dist/style.css'; -@import '@hashicorp/hashi-callouts/dist/style.css'; +@import '@hashicorp/hashi-product-subnav/dist/style.css'; +@import '@hashicorp/hashi-section-header/dist/style.css'; @import '@hashicorp/hashi-split-cta/dist/style.css'; -@import '@hashicorp/hashi-linked-text-summary-list/dist/style.css'; -@import '@hashicorp/hashi-docs-sitemap/dist/style.css'; -@import '@hashicorp/hashi-consent-manager/dist/style.css'; +@import '@hashicorp/hashi-text-and-content/dist/style.css'; @import '@hashicorp/hashi-toggle/dist/style.css'; +@import '@hashicorp/hashi-vertical-text-block-list/dist/style.css'; + +/* Local Preact Components */ +@import '../js/components/before-after-diagram/style.css'; /* to be removed pending new components */ @import '_inner'; @import '_secondary-nav'; +/* Layout */ +@import '_section'; + /* Pages */ @import 'pages/_docs'; @import 'pages/_section_block'; @import 'pages/_home'; +@import 'pages/_use_cases'; @import 'pages/_downloads.css'; /* Print styles */ @@ -38,3 +49,15 @@ h5 { font-weight: 600; } + +.g-text-and-content .image img { + width: 100%; +} + +/* Hide Mega Nav on mobile */ +nav.g-mega-nav { + display: none; + @media (min-width: 1023px) { + display: block; + } +} diff --git a/website/assets/css/pages/_home.css b/website/assets/css/pages/_home.css index 0d22a0040..12455b2b7 100644 --- a/website/assets/css/pages/_home.css +++ b/website/assets/css/pages/_home.css @@ -1,3 +1,34 @@ +@import '@hashicorp/hashi-global-styles/_typography.css'; + .g-split-cta h1 { font-size: 2.5em; } + +#page-home { + & .g-section-block.page-wrap { + padding-top: 0; + } + + & .g-logo-grid li img { + max-height: 50%; + max-width: 50%; + } + + & .g-container.remove-bottom-padding { + padding-bottom: 0; + } + + & .g-section-header.infrastructure { + /* Override default max-width */ + max-width: 1050px; + + & h2 { + max-width: 784px; + margin: 0 auto; + } + } + + & .g-container.before-after { + padding-top: 50px; + } +} diff --git a/website/assets/css/pages/_use_cases.css b/website/assets/css/pages/_use_cases.css new file mode 100644 index 000000000..1d710196a --- /dev/null +++ b/website/assets/css/pages/_use_cases.css @@ -0,0 +1,72 @@ +@import '@hashicorp/hashi-global-styles/_variables.css'; + +#use-cases { + & .g-section-block section.pad-bottom { + padding-bottom: 144px; + } + + & .g-logo-grid li img { + max-height: 50%; + max-width: 50%; + } + + & .g-section-block.page-wrap { + padding-top: 0; + padding-bottom: 0; + } + + & .g-section-block.g-cta-section { + align-items: center; + background: var(--vault-gray-dark); + display: flex; + justify-content: center; + padding-left: 15px; + padding-right: 15px; + position: relative; + text-align: center; + color: var(--white); + + & h2 { + margin-top: 0; + } + + & .g-btn.white { + background: var(--white); + border: 2px solid var(--white); + color: var(--vault-gray-dark); + + &:hover { + background-color: var(--vault-gray); + border-color: var(--vault-gray); + color: var(--white); + + & path { + fill: var(--white); + } + } + } + + & .g-btn.download svg { + margin: 0 4px -4px 0; + } + + & .g-btn.download svg path { + transition: fill 0.25s ease; + } + + & .g-btn + .g-btn { + margin-left: 18px; + } + + & .g-btn.white-outline { + background: none; + border: 2px solid var(--white); + color: var(--white); + + &:hover { + background-color: var(--white); + color: var(--vault-gray-dark); + } + } + } +} diff --git a/website/assets/img/homepage/callouts/encryption.png b/website/assets/img/homepage/callouts/encryption.png new file mode 100644 index 000000000..12ea934d1 --- /dev/null +++ b/website/assets/img/homepage/callouts/encryption.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:41f67fcde080a21f2486472d9ea1725294b70569906e906a865b942d8876b107 +size 6240 diff --git a/website/assets/img/homepage/callouts/identity.png b/website/assets/img/homepage/callouts/identity.png new file mode 100644 index 000000000..678d11bbe --- /dev/null +++ b/website/assets/img/homepage/callouts/identity.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8b0c3a56e399c7c7d79fec5b4d1c438c152cda932a80e26eb1eccddf4751240e +size 6148 diff --git a/website/assets/img/homepage/callouts/secrets.png b/website/assets/img/homepage/callouts/secrets.png new file mode 100644 index 000000000..dadf6f4e2 --- /dev/null +++ b/website/assets/img/homepage/callouts/secrets.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2716160d691d384e6e8be32742ed3053cbb9ca31865cd3de3aeef76e01576a0c +size 6932 diff --git a/website/assets/img/icons/alert-triangle.svg b/website/assets/img/icons/alert-triangle.svg new file mode 100644 index 000000000..ff190b5c3 --- /dev/null +++ b/website/assets/img/icons/alert-triangle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/website/assets/img/icons/check-circle.svg b/website/assets/img/icons/check-circle.svg new file mode 100644 index 000000000..94da82779 --- /dev/null +++ b/website/assets/img/icons/check-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/website/assets/img/use-cases/identity-based-access/challenge.png b/website/assets/img/use-cases/identity-based-access/challenge.png new file mode 100644 index 000000000..d128ad8a5 --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/challenge.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c87a4bebf09343265e4583a9532fcf78791da1ae8051717f44c7aefed04f1e07 +size 46801 diff --git a/website/assets/img/use-cases/identity-based-access/logos/aws.png b/website/assets/img/use-cases/identity-based-access/logos/aws.png new file mode 100644 index 000000000..da10f794d --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/logos/aws.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ddf8cca82fa76ce9cd10ebe8f6bb221e74477d2aa52a2dd5ddebb36c24482de7 +size 7267 diff --git a/website/assets/img/use-cases/identity-based-access/logos/azure.png b/website/assets/img/use-cases/identity-based-access/logos/azure.png new file mode 100644 index 000000000..f0f9f7c9c --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/logos/azure.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:395c2a61c96d2d6d536defd90c3a3d32d78f2e137338778c4199675358b01881 +size 3890 diff --git a/website/assets/img/use-cases/identity-based-access/logos/gcp.png b/website/assets/img/use-cases/identity-based-access/logos/gcp.png new file mode 100644 index 000000000..975dec4dc --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/logos/gcp.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c52b1cfc16a762f8fd0c2e89fa8e1adcb920bfdffbcc1f140cf0bd4cd7f50d8e +size 6396 diff --git a/website/assets/img/use-cases/identity-based-access/logos/kubernetes.png b/website/assets/img/use-cases/identity-based-access/logos/kubernetes.png new file mode 100644 index 000000000..ed1e53346 --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/logos/kubernetes.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c172f9b3b9d227b1559afaac96fea28f43742e2a83dfdb6199a0dd2143f05b8a +size 7063 diff --git a/website/assets/img/use-cases/identity-based-access/logos/nomad.png b/website/assets/img/use-cases/identity-based-access/logos/nomad.png new file mode 100644 index 000000000..bfc4d1375 --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/logos/nomad.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b4b9389586ff0a1bb02cc6ea50976a4deeb007e7a870d371670155e890df382c +size 1942 diff --git a/website/assets/img/use-cases/identity-based-access/logos/okta.png b/website/assets/img/use-cases/identity-based-access/logos/okta.png new file mode 100644 index 000000000..26a6a1810 --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/logos/okta.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:469e4888b746e36116b35af790478f36049671b0cb61e544b076c5cc4bb4141f +size 4265 diff --git a/website/assets/img/use-cases/identity-based-access/logos/pivotalcf.png b/website/assets/img/use-cases/identity-based-access/logos/pivotalcf.png new file mode 100644 index 000000000..42a1384bb --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/logos/pivotalcf.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1e8d105c73f92291130268166c8743fc7e8c78507887c9ebc4469f80f8706897 +size 6523 diff --git a/website/assets/img/use-cases/identity-based-access/logos/ssh.png b/website/assets/img/use-cases/identity-based-access/logos/ssh.png new file mode 100644 index 000000000..16c44368d --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/logos/ssh.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:63503754a234139aaf212b7b7a7c198eca42931f9a30b36f71b5ed8f2b3f4b87 +size 7348 diff --git a/website/assets/img/use-cases/identity-based-access/screenshot-control-groups.png b/website/assets/img/use-cases/identity-based-access/screenshot-control-groups.png new file mode 100644 index 000000000..aae880a01 --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/screenshot-control-groups.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d826d13e2c27a87a08ed08719481a07f8dedff3aad0929eeacb7a687ff195ea3 +size 99916 diff --git a/website/assets/img/use-cases/identity-based-access/screenshot-entities.png b/website/assets/img/use-cases/identity-based-access/screenshot-entities.png new file mode 100644 index 000000000..da4c5f0c3 --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/screenshot-entities.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4d24a23b6fa4b9ed6e311c5c2d41df30c189459bfda45a77302513407ae4073d +size 113334 diff --git a/website/assets/img/use-cases/identity-based-access/screenshot-identity-groups.png b/website/assets/img/use-cases/identity-based-access/screenshot-identity-groups.png new file mode 100644 index 000000000..f77a8e7de --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/screenshot-identity-groups.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:096b1fd54c1f66223a77f70b6064cdb2242f9d3b3eda3975cef7f95713cd779b +size 86299 diff --git a/website/assets/img/use-cases/identity-based-access/solution.png b/website/assets/img/use-cases/identity-based-access/solution.png new file mode 100644 index 000000000..cfd47e436 --- /dev/null +++ b/website/assets/img/use-cases/identity-based-access/solution.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:786ee62a3328f10d296ce0150da9981e52fccbca8f56c8585d21bf3dfca6cdb7 +size 45557 diff --git a/website/assets/js/components/before-after-diagram/alert-icon.js b/website/assets/js/components/before-after-diagram/alert-icon.js new file mode 100644 index 000000000..e953b37e1 --- /dev/null +++ b/website/assets/js/components/before-after-diagram/alert-icon.js @@ -0,0 +1,32 @@ +const { h } = require('preact') + +module.exports = function AlertIcon() { + return ( + + + + + + ) +} diff --git a/website/assets/js/components/before-after-diagram/check-icon.js b/website/assets/js/components/before-after-diagram/check-icon.js new file mode 100644 index 000000000..4fd17b59c --- /dev/null +++ b/website/assets/js/components/before-after-diagram/check-icon.js @@ -0,0 +1,27 @@ +const { h } = require('preact') + +module.exports = function CheckIcon() { + return ( + + + + + ) +} diff --git a/website/assets/js/components/before-after-diagram/index.js b/website/assets/js/components/before-after-diagram/index.js new file mode 100644 index 000000000..33dc9421e --- /dev/null +++ b/website/assets/js/components/before-after-diagram/index.js @@ -0,0 +1,75 @@ +const { h, Component } = require('preact') +const { decode } = require('reshape-preact-components') +const marked = require('8fold-marked') +const Image = require('@hashicorp/hashi-image').default +const AlertIcon = require('./alert-icon') +const CheckIcon = require('./check-icon') + +module.exports = class BeforeAfterDiagram extends Component { + render() { + const data = decode(this.props._data) + + return ( +
+
+
+
+ +
+
+
+ + + + + +
+ {data.before_headline && ( +

+ )} + {data.before_content && ( +
+ )} +
+

+
+
+
+
+ +
+
+
+
+ +
+
+ {data.after_headline && ( +

+ )} + {data.after_content && ( +
+ )} +
+

+
+
+ ) + } +} diff --git a/website/assets/js/components/before-after-diagram/style.css b/website/assets/js/components/before-after-diagram/style.css new file mode 100644 index 000000000..b6fc1cc4e --- /dev/null +++ b/website/assets/js/components/before-after-diagram/style.css @@ -0,0 +1,424 @@ +.g-before-after-diagrams { + display: flex; + flex-wrap: wrap; + margin: 0 -16px; + position: relative; + + @media (max-width: 1023px) { + margin-left: -12px; + margin-right: -12px; + } + + @media (max-width: 767px) { + flex-direction: column; + margin-left: 40px; + margin-right: 0; + } + + & > div { + display: flex; + flex-direction: column; + margin: 0 16px; + position: relative; + width: calc(50% - 32px); + + @media (max-width: 1023px) { + margin: 0 12px; + width: calc(50% - 24px); + } + + @media (max-width: 767px) { + margin: 0; + width: 100%; + } + } + + & .before { + @media (max-width: 767px) { + margin-bottom: 62px; + } + + & li:before { + background: url('/img/icons/alert-triangle.svg'); + height: 20px; + margin-top: 3px; + width: 20px; + } + } + + & .after li:before { + background: url('/img/icons/check-circle.svg'); + height: 18px; + margin-top: 4px; + width: 18px; + } + + & .image { + align-items: center; + display: flex; + height: 320px; + justify-content: center; + margin-bottom: 96px; + + @media (max-width: 767px) { + margin-bottom: 40px; + } + + @media (max-width: 640px) { + height: 284px; + } + + @media (max-width: 540px) { + height: 238px; + } + + @media (max-width: 480px) { + height: 211px; + } + + @media (max-width: 375px) { + height: 163px; + } + + & div { + height: 100%; + text-align: center; + width: 100%; + } + + & img, + & svg { + max-height: 100%; + max-width: 100%; + } + } + + & .content { + border: 1px solid var(--gray-9); + padding: 24px 32px 20px; + position: relative; + flex-grow: 1; + + @media (max-width: 1023px) { + padding-left: 24px; + padding-right: 24px; + } + + @media (max-width: 767px) { + padding-left: 20px; + padding-right: 20px; + } + + &:before, + &:after { + bottom: 100%; + border: solid transparent; + content: ''; + height: 0; + left: 50%; + width: 0; + position: absolute; + pointer-events: none; + } + + &:before { + border-color: rgba(229, 230, 235, 0); + border-bottom-color: var(--gray-9); + border-width: 18px; + margin-left: -18px; + } + + &:after { + border-color: rgba(255, 255, 255, 0); + border-bottom-color: var(--white); + border-width: 17px; + margin-left: -17px; + } + + & > div { + height: 100%; + + &.line { + height: auto; + } + + & > div { + @media (min-width: 768px) { + max-width: 480px; + margin: 0 auto; + } + } + } + } + + & h3 { + border-bottom: 1px solid var(--gray-9); + color: var(--black); + font-weight: 300; + margin: 0 0 24px; + padding-bottom: 24px; + text-align: center; + + @media (max-width: 767px) { + font-size: 1.3125rem; + line-height: 2rem; + } + } + + & h4 { + display: block; + font-size: 0.75rem; + font-weight: var(--font-weight-bold); + letter-spacing: 0.5px; + line-height: 1.125rem; + margin: 24px 0 26px; + text-transform: uppercase; + } + + & ul { + list-style: none; + padding-left: 32px; + position: relative; + } + + & li { + margin: 8px 0; + + &:before { + background-repeat: no-repeat; + content: ''; + left: 0; + position: absolute; + } + } + + & .line { + padding: 0; + position: absolute; + right: 0; + top: -75px; + width: 100%; + + @media (max-width: 767px) { + left: -28px; + height: 100%; + right: auto; + top: 28px; + width: auto; + } + + & span { + display: block; + height: 1px; + position: absolute; + top: 12px; + width: calc(100% - 14px); + + @media (max-width: 767px) { + width: 1px; + } + + &:first-child { + background-image: linear-gradient( + 90deg, + rgba(210, 212, 219, 0) 0%, + var(--gray-8) 100% + ); + right: calc(50% + 20px); + width: calc(50% + 140px); + + @media (max-width: 767px) { + background-image: linear-gradient( + 180deg, + rgba(210, 212, 219, 0) 0%, + var(--gray-8) 100% + ); + height: 245px; + right: auto; + top: -253px; + width: 1px; + } + } + + &:last-child { + background-image: linear-gradient( + 90deg, + var(--gray-8) 0%, + var(--black) 100% + ); + left: calc(50% + 20px); + + @media (max-width: 767px) { + background-image: linear-gradient( + 180deg, + var(--gray-8) 0%, + var(--black) 100% + ); + height: calc(100% + 375px); + left: auto; + top: 32px; + } + + @media (max-width: 640px) { + height: calc(100% + 339px); + } + + @media (max-width: 540px) { + height: calc(100% + 293px); + } + + @media (max-width: 480px) { + height: calc(100% + 266px); + } + + @media (max-width: 375px) { + height: calc(100% + 218px); + } + + &:after { + border-color: transparent transparent transparent #000000; + border-style: solid; + border-width: 5.5px 0 5.5px 8px; + content: ''; + height: 0; + position: absolute; + right: -8px; + top: -5px; + width: 0; + + @media (max-width: 767px) { + transform: rotate(90deg); + top: auto; + bottom: -8px; + right: -4px; + } + } + } + } + + & svg { + position: absolute; + left: 50%; + margin: 0 0 0 -11px; + } + } + + /* + * TERRAFORM THEME + */ + &.terraform { + & .line span { + &:first-child { + background-image: linear-gradient( + 90deg, + rgba(95, 67, 233, 0) 0%, + var(--gray-8) 100% + ); + + @media (max-width: 767px) { + background-image: linear-gradient( + 180deg, + rgba(95, 67, 233, 0) 0%, + var(--gray-8) 100% + ); + } + } + + &:last-child { + background-image: linear-gradient( + 90deg, + var(--gray-8) 0%, + var(--terraform-purple) 100% + ); + + @media (max-width: 767px) { + background-image: linear-gradient( + 180deg, + var(--gray-8) 0%, + var(--terraform-purple) 100% + ); + } + + &:after { + border-color: transparent transparent transparent + var(--terraform-purple); + border-style: solid; + border-width: 5.5px 0 5.5px 8px; + } + } + } + & .after { + & li:before { + background: url('/img/icons/check-circle-purple.svg'); + height: 19px; + } + + .line { + svg, + path:first-child { + fill: var(--terraform-purple); + stroke: var(--terraform-purple); + } + } + } + } + + /* + * CONSUL THEME + */ + &.consul { + & .line span { + &:first-child { + background-image: linear-gradient( + 90deg, + rgba(95, 67, 233, 0) 0%, + var(--gray-8) 100% + ); + + @media (max-width: 767px) { + background-image: linear-gradient( + 180deg, + rgba(95, 67, 233, 0) 0%, + var(--gray-8) 100% + ); + } + } + + &:last-child { + background-image: linear-gradient( + 90deg, + var(--gray-8) 0%, + var(--consul-pink) 100% + ); + + @media (max-width: 767px) { + background-image: linear-gradient( + 180deg, + var(--gray-8) 0%, + var(--consul-pink) 100% + ); + } + + &:after { + border-color: transparent transparent transparent var(--consul-pink); + border-style: solid; + border-width: 5.5px 0 5.5px 8px; + } + } + } + & .after { + & li:before { + background: url('/img/icons/check-circle-pink.svg'); + height: 19px; + } + + .line { + svg, + path:first-child { + fill: var(--consul-pink); + stroke: var(--consul-pink); + } + } + } + } +} diff --git a/website/assets/package-lock.json b/website/assets/package-lock.json index a9673535d..51c092669 100644 --- a/website/assets/package-lock.json +++ b/website/assets/package-lock.json @@ -138,15 +138,25 @@ "resolved": "https://registry.npmjs.org/@hashicorp/hashi-callouts/-/hashi-callouts-2.1.0.tgz", "integrity": "sha512-sFcVJyW6SYGVxzTH55FWzvYKqv13Ten+BGFclr6lO4XpvnQpewP75BkLhnIq7lVf0gpFtOjo5kC3qmpyRJVLeQ==" }, + "@hashicorp/hashi-case-study-slider": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/@hashicorp/hashi-case-study-slider/-/hashi-case-study-slider-2.3.0.tgz", + "integrity": "sha512-pB/CXCtNqwU5WcR9VDyNTdYh4BJqj0ZtTQrNrYnoQ5g8OlggBBex/QASbnvaBCGkiXw5QDNHpkN6Lyc4iTHD+A==" + }, + "@hashicorp/hashi-code-block": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@hashicorp/hashi-code-block/-/hashi-code-block-1.2.0.tgz", + "integrity": "sha512-CARAGd/4E8EudamMThp3X7mXpOzWBKIi4qYSGKzt6o52s1FNKpzp+sLqcw9cuPAx+dVY5YiU0NCk6XY8OeNPRw==" + }, "@hashicorp/hashi-consent-manager": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/@hashicorp/hashi-consent-manager/-/hashi-consent-manager-1.0.10.tgz", "integrity": "sha512-T3njOQOB8M8b4TGzDpfEtd05jdiprlQSzGYCe72dYcJDdgu0iUAmpx50b7dL09gGlUuxPI6wYCRff+ZQzLfFPQ==" }, "@hashicorp/hashi-content": { - "version": "0.1.0", - "resolved": "https://registry.npmjs.org/@hashicorp/hashi-content/-/hashi-content-0.1.0.tgz", - "integrity": "sha512-+XBhJKl8Ph0ei7UkEMf7DrfubkNBdZx1MIRxgtuhC72ScrR6wRt7apCywxiJoqEACI/c14xjUTA2BfmUR2XPzw==" + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@hashicorp/hashi-content/-/hashi-content-1.0.1.tgz", + "integrity": "sha512-cX+Fm52yUVd0zJcKAWPstNDXF3PvwGP6HrvxRVmxWCrxqaHTeP6X7U9sUYJ58NIVr3E83zo8LyFtz+a7yj8DEA==" }, "@hashicorp/hashi-docs-sidenav": { "version": "1.0.3", @@ -191,6 +201,11 @@ "resolved": "https://registry.npmjs.org/@hashicorp/hashi-linked-text-summary-list/-/hashi-linked-text-summary-list-0.1.5.tgz", "integrity": "sha512-LZM9DCSK36W7F+hD5qgF/5XXFj6YLkJkhp0m4DZQD74NIsN3u6HGthAwr4t1Qy3eV2TR0h0AnrTnrMQoTpKDjQ==" }, + "@hashicorp/hashi-logo-grid": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/@hashicorp/hashi-logo-grid/-/hashi-logo-grid-2.4.1.tgz", + "integrity": "sha512-8klunvdahv2CSt+U4E+gQ1GvFHk0fKwIezUyL4GsiBEy6iYl+CMzPNyv0DxwLH4cV0q6gg7ftDM8v2K6yyuZ1A==" + }, "@hashicorp/hashi-mega-nav": { "version": "1.4.3", "resolved": "https://registry.npmjs.org/@hashicorp/hashi-mega-nav/-/hashi-mega-nav-1.4.3.tgz", @@ -241,6 +256,11 @@ "resolved": "https://registry.npmjs.org/@hashicorp/hashi-split-cta/-/hashi-split-cta-0.1.6.tgz", "integrity": "sha512-vv9JMwLNNx4mW2uESLOUFlLi0jWqdhCtNS9VZPhJd05Bb9xQybyylqcGUZgElIiqy/jS9S9d162eHV+Bhf+fCQ==" }, + "@hashicorp/hashi-text-and-content": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@hashicorp/hashi-text-and-content/-/hashi-text-and-content-0.8.1.tgz", + "integrity": "sha512-nJWNVatLFdVeCFIUr861i+jYoMmTkArmwWty0WtrOuTMFfnXdKWYjUliUEB/D3GvJvcwcDW3DxhVRT+Vad2bQQ==" + }, "@hashicorp/hashi-toggle": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/@hashicorp/hashi-toggle/-/hashi-toggle-0.2.3.tgz", @@ -4968,6 +4988,11 @@ "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==", "dev": true }, + "highlight.js": { + "version": "9.15.10", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.10.tgz", + "integrity": "sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==" + }, "hmac-drbg": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz", diff --git a/website/assets/package.json b/website/assets/package.json index 5d05f5253..6e94d5892 100644 --- a/website/assets/package.json +++ b/website/assets/package.json @@ -10,8 +10,10 @@ "@hashicorp/hashi-alert": "^1.1.0", "@hashicorp/hashi-button": "1.0.5", "@hashicorp/hashi-callouts": "^2.0.5", + "@hashicorp/hashi-case-study-slider": "^2.3.0", + "@hashicorp/hashi-code-block": "^1.2.0", "@hashicorp/hashi-consent-manager": "^1.0.10", - "@hashicorp/hashi-content": "^0.1.0", + "@hashicorp/hashi-content": "^1.0.1", "@hashicorp/hashi-docs-sidenav": "^1.0.2", "@hashicorp/hashi-docs-sitemap": "^0.1.6", "@hashicorp/hashi-footer": "^1.1.3", @@ -20,6 +22,7 @@ "@hashicorp/hashi-hero": "^3.1.2", "@hashicorp/hashi-image": "1.0.5", "@hashicorp/hashi-linked-text-summary-list": "^0.1.4", + "@hashicorp/hashi-logo-grid": "^2.4.1", "@hashicorp/hashi-mega-nav": "^1.1.0", "@hashicorp/hashi-nav": "^1.1.2", "@hashicorp/hashi-newsletter-signup-form": "^1.3.0", @@ -27,6 +30,7 @@ "@hashicorp/hashi-product-subnav": "^0.5.5", "@hashicorp/hashi-section-header": "^4.0.0", "@hashicorp/hashi-split-cta": "^0.1.4", + "@hashicorp/hashi-text-and-content": "^0.8.1", "@hashicorp/hashi-toggle": "^0.2.2", "@hashicorp/hashi-vertical-text-block-list": "^0.1.1", "@hashicorp/js-utils": "^1.0.0", @@ -34,6 +38,7 @@ "@segment/in-eu": "^0.2.1", "@segment/top-domain": "^3.0.0", "color-contrast": "^0.0.1", + "highlight.js": "^9.15.10", "js-cookie": "^2.2.0", "marked": "^0.5.1", "normalize.css": "^8.0.0", diff --git a/website/assets/reshape.js b/website/assets/reshape.js index 854fb4edd..947bc6b9f 100644 --- a/website/assets/reshape.js +++ b/website/assets/reshape.js @@ -1,35 +1,42 @@ -const footer = require('@hashicorp/hashi-footer') -const nav = require('@hashicorp/hashi-nav') const button = require('@hashicorp/hashi-button') -const megaNav = require('@hashicorp/hashi-mega-nav') -const productSubnav = require('@hashicorp/hashi-product-subnav') -const verticalTextBlockList = require('@hashicorp/hashi-vertical-text-block-list') -const sectionHeader = require('@hashicorp/hashi-section-header') -const content = require('@hashicorp/hashi-content') -const productDownloader = require('@hashicorp/hashi-product-downloader') -const docsSidenav = require('@hashicorp/hashi-docs-sidenav') -const hero = require('@hashicorp/hashi-hero') const callouts = require('@hashicorp/hashi-callouts') -const splitCta = require('@hashicorp/hashi-split-cta') -const linkedTextSummaryList = require('@hashicorp/hashi-linked-text-summary-list') -const docsSitemap = require('@hashicorp/hashi-docs-sitemap') +const caseStudySlider = require('@hashicorp/hashi-case-study-slider') const consentManager = require('@hashicorp/hashi-consent-manager') +const content = require('@hashicorp/hashi-content') +const docsSidenav = require('@hashicorp/hashi-docs-sidenav') +const docsSitemap = require('@hashicorp/hashi-docs-sitemap') +const footer = require('@hashicorp/hashi-footer') +const hero = require('@hashicorp/hashi-hero') +const linkedTextSummaryList = require('@hashicorp/hashi-linked-text-summary-list') +const megaNav = require('@hashicorp/hashi-mega-nav') +const nav = require('@hashicorp/hashi-nav') +const productDownloader = require('@hashicorp/hashi-product-downloader') +const productSubnav = require('@hashicorp/hashi-product-subnav') +const sectionHeader = require('@hashicorp/hashi-section-header') +const splitCta = require('@hashicorp/hashi-split-cta') +const textAndContent = require('@hashicorp/hashi-text-and-content') +const verticalTextBlockList = require('@hashicorp/hashi-vertical-text-block-list') + +const beforeAfterDiagram = require('./js/components/before-after-diagram') module.exports = { - 'hashi-footer': footer, - 'hashi-nav': nav, 'hashi-button': button, - 'hashi-docs-sidenav': docsSidenav, - 'hashi-mega-nav': megaNav, - 'hashi-product-subnav': productSubnav, - 'hashi-content': content, - 'hashi-product-downloader': productDownloader, - 'hashi-vertical-text-block-list': verticalTextBlockList, - 'hashi-section-header': sectionHeader, - 'hashi-hero': hero, 'hashi-callouts': callouts, - 'hashi-split-cta': splitCta, - 'hashi-linked-text-summary-list': linkedTextSummaryList, + 'hashi-case-study-slider': caseStudySlider, + 'hashi-consent-manager': consentManager, + 'hashi-content': content, + 'hashi-docs-sidenav': docsSidenav, 'hashi-docs-sitemap': docsSitemap, - 'hashi-consent-manager': consentManager + 'hashi-footer': footer, + 'hashi-hero': hero, + 'hashi-linked-text-summary-list': linkedTextSummaryList, + 'hashi-mega-nav': megaNav, + 'hashi-nav': nav, + 'hashi-product-downloader': productDownloader, + 'hashi-product-subnav': productSubnav, + 'hashi-section-header': sectionHeader, + 'hashi-split-cta': splitCta, + 'hashi-text-and-content': textAndContent, + 'hashi-vertical-text-block-list': verticalTextBlockList, + 'hashi-before-after': beforeAfterDiagram } diff --git a/website/config.rb b/website/config.rb index 90a44d200..54e28bfc8 100644 --- a/website/config.rb +++ b/website/config.rb @@ -83,6 +83,9 @@ helpers do if page.url == "/" || page.url == "/index.html" return "page-home" end + if page.path.include? "use-cases" + return "use-cases" + end if !(title = page.data.page_title).blank? return title .downcase @@ -117,4 +120,63 @@ helpers do return classes.join(" ") end + + # Returns data / attributes used by the product subnav component. + # @return [Object] + def getSubNavData + return { + current_path: current_page.path, + products: dato.enterprise_products.map(&:to_hash), + subnav: { + tdm_focused_links: [ + { + title: "Intro", + url: "/intro" + }, + { + item_type: "dropdown_link", + title: "Use Cases", + links: [{ + title: "Secrets Management", + url: "/use-cases/secrets-management" + }, + { + title: "Data Encryption", + url: "/use-cases/data-encryption" + }, { + title: "Identity-based Access", + url: "/use-cases/identity-based-access" + }] + }, + { + title: "Enterprise", + url: "https://www.hashicorp.com/products/vault/enterprise" + }, + { + title: "Whitepaper", + url: "https://www.hashicorp.com/resources/unlocking-the-cloud-operating-model-security?utm_source=vaultsubnav" + } + ], + practitioner_focused_links: [ + { + title: "Learn", + url: "https://learn.hashicorp.com/vault" + }, + { + title: "Docs", + url: "/docs" + }, + { + title: "API", + url: "/api" + }, + { + title: "Community", + url: "/community" + } + ], + product: dato.vault_product_page.subnav.product.to_hash + } + } + end end diff --git a/website/source/api/index.html.erb b/website/source/api/index.html.erb deleted file mode 100644 index 6b7aa2d27..000000000 --- a/website/source/api/index.html.erb +++ /dev/null @@ -1,83 +0,0 @@ ---- -page_title: "Vault API Documentation" -description: |- - Vault API reference documentation. ---- - -<% @meganav_title = 'API Docs' %> - - - -
-
- - -
- - -
-
- -
- -
- -
-
- - -
- -
-
-
- -
- - - -
- -
-
- - -
- - -
-
-
- -
diff --git a/website/source/api/index.html.md.erb b/website/source/api/index.html.md.erb new file mode 100644 index 000000000..140695c36 --- /dev/null +++ b/website/source/api/index.html.md.erb @@ -0,0 +1,4 @@ +--- +layout: "api" +page_title: "Vault API Documentation" +--- \ No newline at end of file diff --git a/website/source/docs/index.html.erb b/website/source/docs/index.html.erb deleted file mode 100644 index 0a9360094..000000000 --- a/website/source/docs/index.html.erb +++ /dev/null @@ -1,82 +0,0 @@ ---- -page_title: "Vault Documentation" -description: |- - Vault reference documentation. ---- - -<% @meganav_title = 'Docs' %> - - - -
-
- - -
- - -
-
- -
- -
- -
-
- - -
- -
-
-
- -
- - - -
- -
-
- - -
- - -
-
-
-
diff --git a/website/source/docs/index.html.erb.md b/website/source/docs/index.html.erb.md new file mode 100644 index 000000000..7952233e1 --- /dev/null +++ b/website/source/docs/index.html.erb.md @@ -0,0 +1,5 @@ +--- +layout: 'docs' +sidebar_title: 'Overview' +sidebar_current: 'docs-index' +--- diff --git a/website/source/index.html.erb b/website/source/index.html.erb index 6e533a3b8..4b21b7633 100644 --- a/website/source/index.html.erb +++ b/website/source/index.html.erb @@ -2,54 +2,134 @@ description: "Vault secures, stores, and tightly controls access to tokens, passwords, certificates, API keys, and other secrets in modern computing. Vault handles leasing, key revocation, key rolling, auditing, and provides secrets as a service through a unified API." --- -<% page = dato.vault_oss_page %> +<%= partial "partials/subnav" %> - + - -
-
- +
- -
+ <%-# Text Section -%> -
- - - -
- -
-
- - -
- <% if page.features_buttons %> - <% page.features_buttons.buttons.each do |btn| %> - - <% end %> - <% end %> -
+
+
+

Secure dynamic infrastructure across clouds and environments

+

The shift from static, on-premise infrastructure to dynamic, multi-provider infrastructure changes the approach to security. Security in static infrastructure relies on dedicated servers, static IP addresses, and a clear network perimeter. Security in dynamic infrastructure is defined by ephemeral applications and servers, trusted sources of user and application identity, and software-based encryption.

-
- + <%-# Before After Diagram -%> + +
+
-
+ + <%-# Callouts -%> + +
+
+ +
+
+ + <%-# Principles / Text & Content Blocks -%> + +
+ + + + +<% secure_text_and_content = { + reverse_direction: true, + text: "### Secure with any identity + +Seamlessly integrate any trusted identity provider", + content: { + item_type: "sbc_logo_grid", + companies: dato.vault_product_page.principles_section.layout.content[2].content.companies.to_hash + } +} %> + + + +<% extend_text_and_content = { + text: "### Extend and integrate + +Securely manage secrets and access through a centralized workflow", + content: { + item_type: "sbc_logo_grid", + companies: dato.vault_product_page.principles_section.layout.content[3].content.companies.to_hash + } +} %> + + +
+ +
+ + +
+ +
+
+
\ No newline at end of file diff --git a/website/source/intro/index.html.erb.md b/website/source/intro/index.html.erb.md new file mode 100644 index 000000000..c642ed3fc --- /dev/null +++ b/website/source/intro/index.html.erb.md @@ -0,0 +1,3 @@ +--- +layout: 'intro' +--- diff --git a/website/source/layouts/inner.erb b/website/source/layouts/inner.erb index 26480cac6..f0c6659a6 100644 --- a/website/source/layouts/inner.erb +++ b/website/source/layouts/inner.erb @@ -1,8 +1,5 @@ <% wrap_layout :layout do %> - + <%= partial "partials/subnav" %>