From 583074d86d906f94488f302dccde0d1133419d24 Mon Sep 17 00:00:00 2001 From: Leo Date: Fri, 30 Jun 2023 14:08:12 +0100 Subject: [PATCH 1/3] Add global tc-header, add ruby link --- docs/css/extra.css | 144 ++++++----- docs/css/tc-header.css | 373 +++++++++++++++++++++++++++++ docs/index.md | 5 +- docs/js/tc-header.js | 45 ++++ docs/language-logos/ruby.svg | 125 ++++++++++ docs/testcontainers-logo.svg | 22 ++ docs/theme/main.html | 5 + docs/theme/partials/header.html | 150 ++++++++++++ docs/theme/partials/nav.html | 4 - docs/theme/partials/tc-header.html | 153 ++++++++++++ mkdocs.yml | 1 + 11 files changed, 947 insertions(+), 80 deletions(-) create mode 100644 docs/css/tc-header.css create mode 100644 docs/js/tc-header.js create mode 100644 docs/language-logos/ruby.svg create mode 100644 docs/testcontainers-logo.svg create mode 100644 docs/theme/partials/header.html create mode 100644 docs/theme/partials/tc-header.html diff --git a/docs/css/extra.css b/docs/css/extra.css index 6ce7fc703..73515e3d0 100644 --- a/docs/css/extra.css +++ b/docs/css/extra.css @@ -1,124 +1,122 @@ -@import url('https://fonts.googleapis.com/css?family=Rubik'); - -h1, -h2, -h3, -h4, -h5, -h6 -{ +h1, h2, h3, h4, h5, h6 { font-family: 'Rubik', sans-serif; } -[data-md-color-scheme="testcontainers"] -{ - --md-primary-fg-color: #291a3f; - --md-accent-fg-color: #291a3f; - --md-typeset-a-color: #0c94aa; +[data-md-color-scheme="testcontainers"] { + --md-primary-fg-color: #00bac2; + --md-accent-fg-color: #361E5B; + --md-typeset-a-color: #0C94AA; + --md-primary-fg-color--dark: #291A3F; + --md-default-fg-color--lightest: #F2F4FE; + --md-footer-fg-color: #361E5B; + --md-footer-fg-color--light: #746C8F; + --md-footer-fg-color--lighter: #C3BEDE; + --md-footer-bg-color: #F7F9FD; + --md-footer-bg-color--dark: #F7F9FD; +} + +.card-grid { + display: grid; + gap: 10px; +} + +@media (min-width: 680px) { + .card-grid { + grid-template-columns: repeat(3, 1fr); + } } body .card-grid-item { display: flex; align-items: center; gap: 20px; - border: 1px solid #c3bede; + border: 1px solid #C3BEDE; border-radius: 6px; padding: 16px; font-weight: 600; - color: #9991b5; - background: #f2f4fe; + color: #9991B5; + background: #F2F4FE; } body .card-grid-item:hover, body .card-grid-item:focus { - color: #9991b5; -} - -.card-grid { - display: grid; - gap: 10px; -} - -@media (min-width: 680px) { - .card-grid { - grid-template-columns: repeat(3, 1fr); - } + color: #9991B5; } .card-grid-item[href] { - color: var(--md-primary-fg-color); + color: var(--md-primary-fg-color--dark); background: transparent; } .card-grid-item[href]:hover, .card-grid-item[href]:focus { - color: var(--md-primary-fg-color); - background: #f2f4fe; + background: #F2F4FE; + color: var(--md-primary-fg-color--dark); } -@media (min-width: 1220px) { - .community-callout-wrapper { - padding: 40px 0 0; - } - - @media (min-width: 1600px) { - .community-callout h2 { - font-size: 1.15em; - } - } +.community-callout-wrapper { + padding: 30px 10px 0 10px; } .community-callout { + color: #F2F4FE; background: linear-gradient(10.88deg, rgba(102, 56, 242, 0.4) 9.56%, #6638F2 100%), #291A3F; - border-radius: 10px; box-shadow: 0px 20px 45px rgba(#9991B5, 0.75); - color: #F2F4FE; + border-radius: 10px; padding: 20px; } -.community-callout a { - transition: opacity 0.2s ease; +.community-callout h2 { + font-size: 1.15em; + margin: 0 0 20px 0; + color: #F2F4FE; + text-align: center; } -.community-callout a img { - height: 1.75em; +.community-callout ul { + list-style: none; + padding: 0; + display: flex; + justify-content: space-between; + gap: 10px; + margin-top: 20px; + margin-bottom: 0; } -.community-callout a img { - height: 2em; +.community-callout a { +transition: opacity 0.2s ease; +} + +.community-callout a:hover { + opacity: 0.5; } .community-callout a img { - aspect-ratio: 1; height: 1.75em; width: auto; + aspect-ratio: 1; } -.community-callout a:hover { - opacity: 0.5; -} +@media (min-width: 1220px) { + .community-callout-wrapper { + padding: 40px 0 0; + } -.community-callout h2 { - font-size: 1.25em; -} + .community-callout h2 { + font-size: 1.25em; + } -.community-callout h2 { - color: #F2F4FE; - font-size: 1.15em; - margin: 0 0 20px 0; - text-align: center; + .community-callout a img { + height: 2em; + } } -.community-callout ul { - display: flex; - gap: 10px; - justify-content: space-between; - list-style: none; - margin-bottom: 0; - margin-top: 20px; - padding: 0; -} +@media (min-width: 1600px) { + .community-callout h2 { + font-size: 1.15em; + } -.community-callout-wrapper { - padding: 30px 10px 0 10px; + .community-callout a img { + height: 1.75em; + } } \ No newline at end of file diff --git a/docs/css/tc-header.css b/docs/css/tc-header.css new file mode 100644 index 000000000..ac193add5 --- /dev/null +++ b/docs/css/tc-header.css @@ -0,0 +1,373 @@ + +:root { + --color-catskill: #F2F4FE; + --color-catskill-45: rgba(242, 244, 254, 0.45); + --color-mist: #E7EAFB; + --color-fog: #C3C7E6; + --color-smoke: #9991B5; + --color-smoke-75: rgba(153, 145, 181, 0.75); + --color-storm: #746C8F; + --color-topaz: #00BAC2; + --color-pacific: #17A6B2; + --color-teal: #027F9E; + --color-eggplant: #291A3F; + --color-plum: #361E5B; + +} + +#site-header { + color: var(--color-storm); + background: #fff; + font-family: 'Rubik', Arial, Helvetica, sans-serif; + font-size: 12px; + line-height: 1.5; + position: relative; + width: 100%; + z-index: 4; + display: flex; + align-items: center; + justify-content: space-between; + gap: 20px; + padding: 20px; +} + +body.tc-header-active #site-header { + z-index: 5; +} + +#site-header .brand { + display: flex; + justify-content: space-between; + gap: 20px; + width: 100%; +} + +#site-header .logo { + display: flex; +} + +#site-header .logo img, +#site-header .logo svg { + height: 30px; + width: auto; + max-width: 100%; +} + +#site-header #mobile-menu-toggle { + background: none; + border: none; + display: flex; + align-items: center; + gap: 10px; + cursor: pointer; + color: var(--color-eggplant); + padding: 0; + margin: 0; + font-weight: 500; +} + +body.mobile-menu #site-header #mobile-menu-toggle { + color: var(--color-topaz); +} + +#site-header ul { + list-style: none; + padding: 0; + margin: 0; +} + +#site-header nav { + display: none; +} + +#site-header .menu-item { + display: flex; +} + +#site-header .menu-item button, +#site-header .menu-item a { + min-height: 30px; + display: flex; + gap: 6px; + align-items: center; + border: none; + background: none; + cursor: pointer; + padding: 0; + font-weight: 500; + color: var(--color-eggplant); + text-decoration: none; + font-size: 14px; + transition: color 0.2s ease; + white-space: nowrap; +} + +#site-header .menu-item button:hover, +#site-header .menu-item a:hover { + color: var(--color-topaz); +} + +#site-header .menu-item button .icon-external, +#site-header .menu-item a .icon-externa { + margin-left: auto; + opacity: .3; + flex-shrink: 0; +} + +#site-header .menu-item button .icon-caret, +#site-header .menu-item a .icon-caret { + opacity: .3; + height: 8px; +} + +#site-header .menu-item button .icon-slack, +#site-header .menu-item a .icon-slack, +#site-header .menu-item button .icon-github, +#site-header .menu-item a .icon-github { + height: 18px; +} + +#site-header .menu-item .menu-dropdown { + flex-direction: column; +} + +body #site-header .menu-item .menu-dropdown { + display: none; +} + +#site-header .menu-item.has-children.active .menu-dropdown { + display: flex; + z-index: 10; +} + +#site-header .menu-dropdown-item + .menu-dropdown-item { + border-top: 1px solid var(--color-mist); +} + +#site-header .menu-dropdown-item a { + display: flex; + gap: 10px; + align-items: center; + padding: 10px 20px; + font-weight: 500; + color: var(--color-eggplant); + text-decoration: none; + transition: + color 0.2s ease, + background 0.2s ease; +} + +#site-header .menu-dropdown-item a .icon-external { + margin-left: auto; + color: var(--color-fog); + flex-shrink: 0; + opacity: 1; +} + +#site-header .menu-dropdown-item a:hover { + background-color: var(--color-catskill-45); +} + +#site-header .menu-dropdown-item a:hover .icon-external { + color: var(--color-topaz); +} + +#site-header .menu-dropdown-item a img { + height: 24px; +} + +.md-header { + background-color: var(--color-catskill); + color: var(--color-eggplant); +} + +.md-header.md-header--shadow { + box-shadow: none; +} + +.md-header__inner.md-grid { + max-width: 100%; + padding: 1.5px 20px; +} + +[dir=ltr] .md-header__title { + margin: 0; +} + +.md-header__topic:first-child { + font-size: 16px; + font-weight: 500; + font-family: 'Rubik', Arial, Helvetica, sans-serif; +} + +.md-header__title.md-header__title--active .md-header__topic { + opacity: 1; + pointer-events: all; + transform: translateX(0); + z-index: 0; +} + +.md-header__topic a { + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + transition: color .2s ease; +} + +.md-header__topic a:hover { + color: var(--color-topaz); +} + +div.md-header__source { + width: auto; +} + +div.md-source__repository { + max-width: 100%; +} + +.md-main { + padding: 0 12px; +} + +@media screen and (min-width: 60em) { + form.md-search__form { + background-color: #FBFBFF; + color: var(--color-storm); + } + + form.md-search__form:hover { + background-color: #fff; + } + + .md-search__input + .md-search__icon { + color: var(--color-plum); + } + + .md-search__input::placeholder { + color: var(--color-smoke); + } +} + +@media (min-width: 500px) { + #site-header { + font-size: 16px; + padding: 20px 40px; + } + #site-header .logo img, + #site-header .logo svg { + height: 48px; + } + + #site-header .menu-item button .icon-caret, + #site-header .menu-item a .icon-caret { + height: 10px; + } + + #site-header .menu-item button .icon-slack, + #site-header .menu-item a .icon-slack, + #site-header .menu-item button .icon-github, + #site-header .menu-item a .icon-github { + height: 24px; + } + + .md-header__inner.md-grid { + padding: 5px 40px; + } + + .md-main { + padding: 0 32px; + } +} + +@media (min-width: 1024px) { + #site-header #mobile-menu-toggle { + display: none; + } + + #site-header nav { + display: block; + } + + #site-header .menu { + display: flex; + justify-content: center; + gap: 30px; + } + + #site-header .menu-item { + align-items: center; + position: relative; + } + + #site-header .menu-item button, + #site-header .menu-item a { + min-height: 48px; + gap: 8px; + font-size: 16px; + } + + #site-header .menu-item .menu-dropdown { + position: absolute; + top: 100%; + right: -8px; + border: 1px solid var(--color-mist); + border-radius: 6px; + background: #fff; + box-shadow: 0px 30px 35px var(--color-smoke-75); + min-width: 200px; + } +} + + +@media (max-width: 1023px) { + #site-header { + flex-direction: column; + } + + body.mobile-tc-header-active #site-header { + z-index: 5; + } + + body.mobile-menu #site-header nav { + display: flex; + } + + #site-header nav { + position: absolute; + top: calc(100% - 5px); + width: calc(100% - 80px); + flex-direction: column; + border: 1px solid var(--color-mist); + border-radius: 6px; + background: #fff; + box-shadow: 0px 30px 35px var(--color-smoke-75); + min-width: 200px; + } + + #site-header .menu-item { + flex-direction: column; + } + #site-header .menu-item + .menu-item { + border-top: 1px solid var(--color-mist); + } + + #site-header .menu-item button, + #site-header .menu-item a { + padding: 10px 20px; + } + + #site-header .menu-item.has-children.active .menu-dropdown { + border-top: 1px solid var(--color-mist); + } + + #site-header .menu-dropdown-item a { + padding: 10px 20px 10px 30px; + } +} + +@media (max-width: 499px) { + #site-header nav { + width: calc(100% - 40px); + } +} \ No newline at end of file diff --git a/docs/index.md b/docs/index.md index 3d7a6bfac..430c89a13 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,6 +1,4 @@ -# Testcontainers - -![Testcontainers Banner](banner.png) +# Testcontainers for .NET ```console title="Install the NuGet dependency" dotnet add package Testcontainers @@ -61,6 +59,7 @@ Debug.Assert(Guid.TryParse(guid, out _)); Haskell + Ruby ## About diff --git a/docs/js/tc-header.js b/docs/js/tc-header.js new file mode 100644 index 000000000..4186b6ca5 --- /dev/null +++ b/docs/js/tc-header.js @@ -0,0 +1,45 @@ +const mobileToggle = document.getElementById("mobile-menu-toggle"); +const mobileSubToggle = document.getElementById("mobile-submenu-toggle"); +function toggleMobileMenu() { + document.body.classList.toggle('mobile-menu'); + document.body.classList.toggle("mobile-tc-header-active"); +} +function toggleMobileSubmenu() { + document.body.classList.toggle('mobile-submenu'); +} +if (mobileToggle) + mobileToggle.addEventListener("click", toggleMobileMenu); +if (mobileSubToggle) + mobileSubToggle.addEventListener("click", toggleMobileSubmenu); + +const allParentMenuItems = document.querySelectorAll("#site-header .menu-item.has-children"); +function clearActiveMenuItem() { + document.body.classList.remove("tc-header-active"); + allParentMenuItems.forEach((item) => { + item.classList.remove("active"); + }); +} +function setActiveMenuItem(e) { + clearActiveMenuItem(); + e.currentTarget.closest(".menu-item").classList.add("active"); + document.body.classList.add("tc-header-active"); +} +allParentMenuItems.forEach((item) => { + const trigger = item.querySelector(":scope > a, :scope > button"); + + trigger.addEventListener("click", (e) => { + if (e.currentTarget.closest(".menu-item").classList.contains("active")) { + clearActiveMenuItem(); + } else { + setActiveMenuItem(e); + } + }); + + trigger.addEventListener("mouseenter", (e) => { + setActiveMenuItem(e); + }); + + item.addEventListener("mouseleave", (e) => { + clearActiveMenuItem(); + }); +}); \ No newline at end of file diff --git a/docs/language-logos/ruby.svg b/docs/language-logos/ruby.svg new file mode 100644 index 000000000..05537cedf --- /dev/null +++ b/docs/language-logos/ruby.svg @@ -0,0 +1,125 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/testcontainers-logo.svg b/docs/testcontainers-logo.svg new file mode 100644 index 000000000..4b099f34a --- /dev/null +++ b/docs/testcontainers-logo.svg @@ -0,0 +1,22 @@ + + + Testcontainers + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/theme/main.html b/docs/theme/main.html index f96a2669e..b3c01a3a2 100644 --- a/docs/theme/main.html +++ b/docs/theme/main.html @@ -2,4 +2,9 @@ {% block analytics %} +{% endblock %} + +{% block extrahead %} + + {% endblock %} \ No newline at end of file diff --git a/docs/theme/partials/header.html b/docs/theme/partials/header.html new file mode 100644 index 000000000..057ec4ae5 --- /dev/null +++ b/docs/theme/partials/header.html @@ -0,0 +1,150 @@ + + + +{% set class = "md-header" %} +{% if "navigation.tabs.sticky" in features %} + {% set class = class ~ " md-header--shadow md-header--lifted" %} +{% elif "navigation.tabs" not in features %} + {% set class = class ~ " md-header--shadow" %} +{% endif %} + +{% include "partials/tc-header.html" %} + + +
+ + + + {% if "navigation.tabs.sticky" in features %} + {% if "navigation.tabs" in features %} + {% include "partials/tabs.html" %} + {% endif %} + {% endif %} +
\ No newline at end of file diff --git a/docs/theme/partials/nav.html b/docs/theme/partials/nav.html index 6098055d1..a1527d41b 100644 --- a/docs/theme/partials/nav.html +++ b/docs/theme/partials/nav.html @@ -31,10 +31,6 @@ diff --git a/docs/theme/partials/tc-header.html b/docs/theme/partials/tc-header.html new file mode 100644 index 000000000..0ee9b238e --- /dev/null +++ b/docs/theme/partials/tc-header.html @@ -0,0 +1,153 @@ +{% set header = ({ + "siteUrl": "https://testcontainers.com/", + "menuItmes": [ + { + "label": "Cloud", + "url": "https://testcontainers.com/cloud/" + }, + { + "label": "Getting Started", + "url": "https://testcontainers.com/getting-started/" + }, + { + "label": "Guides", + "url": "https://testcontainers.com/guides/" + }, + { + "label": "Modules", + "url": "https://testcontainers.com/modules/" + }, + { + "label": "Docs", + "children": [ + { + "label": "Testcontainers for Java", + "url": "https://java.testcontainers.org/", + "image": "/language-logos/java.svg", + }, + { + "label": "Testcontainers for Go", + "url": "https://golang.testcontainers.org/", + "image": "/language-logos/go.svg", + }, + { + "label": "Testcontainers for .NET", + "url": "https://dotnet.testcontainers.org/", + "image": "/language-logos/dotnet.svg", + }, + { + "label": "Testcontainers for Node.js", + "url": "https://node.testcontainers.org/", + "image": "/language-logos/nodejs.svg", + }, + { + "label": "Testcontainers for Python", + "url": "https://testcontainers-python.readthedocs.io/en/latest/", + "image": "/language-logos/python.svg", + "external": true, + }, + { + "label": "Testcontainers for Rust", + "url": "https://docs.rs/testcontainers/latest/testcontainers/", + "image": "/language-logos/rust.svg", + "external": true, + }, + { + "label": "Testcontainers for Haskell", + "url": "https://github.com/testcontainers/testcontainers-hs", + "image": "/language-logos/haskell.svg", + "external": true, + }, + { + "label": "Testcontainers for Ruby", + "url": "https://github.com/testcontainers/testcontainers-ruby", + "image": "/language-logos/ruby.svg", + "external": true, + }, + ] + }, + { + "label": "Slack", + "url": "https://slack.testcontainers.org/", + "icon": "icon-slack", + }, + { + "label": "GitHub", + "url": "https://github.com/testcontainers", + "icon": "icon-github", + }, + ] +}) %} + + + + + + + + + + + \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index d0d2397d8..78f930aa6 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -15,6 +15,7 @@ theme: logo: logo.svg extra_css: - css/extra.css + - css/tc-header.css plugins: - codeinclude - markdownextradata From d7349565a6ec529671bba275d29fc08e05c802c0 Mon Sep 17 00:00:00 2001 From: Leo Date: Tue, 8 Aug 2023 15:46:55 +0100 Subject: [PATCH 2/3] Add feedback from Go PR and desktop nav item --- docs/css/extra.css | 8 +++++++- docs/css/tc-header.css | 4 +++- docs/theme/partials/nav.html | 2 +- docs/theme/partials/tc-header.html | 8 ++++++-- 4 files changed, 17 insertions(+), 5 deletions(-) diff --git a/docs/css/extra.css b/docs/css/extra.css index 73515e3d0..bf4db2a36 100644 --- a/docs/css/extra.css +++ b/docs/css/extra.css @@ -20,6 +20,12 @@ h1, h2, h3, h4, h5, h6 { gap: 10px; } +.tc-version { + font-size: 1.1em; + text-align: center; + margin: 0; +} + @media (min-width: 680px) { .card-grid { grid-template-columns: repeat(3, 1fr); @@ -84,7 +90,7 @@ body .card-grid-item:focus { } .community-callout a { -transition: opacity 0.2s ease; + transition: opacity 0.2s ease; } .community-callout a:hover { diff --git a/docs/css/tc-header.css b/docs/css/tc-header.css index ac193add5..122102bb4 100644 --- a/docs/css/tc-header.css +++ b/docs/css/tc-header.css @@ -200,10 +200,12 @@ body #site-header .menu-item .menu-dropdown { font-family: 'Rubik', Arial, Helvetica, sans-serif; } -.md-header__title.md-header__title--active .md-header__topic { +.md-header__title.md-header__title--active .md-header__topic, +.md-header__title[data-md-state=active] .md-header__topic { opacity: 1; pointer-events: all; transform: translateX(0); + transition: none; z-index: 0; } diff --git a/docs/theme/partials/nav.html b/docs/theme/partials/nav.html index a1527d41b..87a254e30 100644 --- a/docs/theme/partials/nav.html +++ b/docs/theme/partials/nav.html @@ -31,7 +31,7 @@ diff --git a/docs/theme/partials/tc-header.html b/docs/theme/partials/tc-header.html index 0ee9b238e..73500c640 100644 --- a/docs/theme/partials/tc-header.html +++ b/docs/theme/partials/tc-header.html @@ -1,6 +1,10 @@ {% set header = ({ "siteUrl": "https://testcontainers.com/", - "menuItmes": [ + "menuItems": [ + { + "label": "Desktop", + "url": "https://testcontainers.com/desktop/" + }, { "label": "Cloud", "url": "https://testcontainers.com/cloud/" @@ -108,7 +112,7 @@