quine-global/webdriverio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix: button alignment, update Twitter icon to X,. feat: add version dropdown (#14452)

Browse source 
* fix: fixing the alignment of buttons for profiles on other sites and replacing the Twitter logo with the X logo (new Twitter name)

* fix: correcting the spacing between buttons in the button sections

* feat adding dropdown in code versions
This commit is contained in:
Kauan Barbosa 2025-05-05 11:24:50 -03:00 committed by GitHub
parent ce895ecd6f
commit cb806a7310
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 80 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
website/docusaurus.config.ts
View file

@ -5,7 +5,8 @@ import { themes } from 'prism-react-renderer'
import remark from '@docusaurus/remark-plugin-npm2yarn'
import type { Config } from '@docusaurus/types'
import type { ThemeConfig } from '@docusaurus/preset-classic'
import './docusaurusVersions'
import pastVersions from './docusaurusVersions'
const __dirname = path.dirname(url.fileURLToPath(import.meta.url))
const organizationName = 'webdriverio' // Usually your GitHub org/user name.
@ -112,7 +113,11 @@ const config: Config = {
}, {
label: 'v9',
position: 'right',
to: '/versions'
items: pastVersions.map(v => ({
label: v.label,
href: v.path,
className: 'dropdown-version-item'
}))
}, {
type: 'localeDropdown',
position: 'right',

47
website/docusaurusVersions.ts Normal file
View file

@ -0,0 +1,47 @@
const pastVersions = [
{
name: 'v9',
label: 'v9',
path: 'https://webdriver.io',
comment: 'Stable',
repoUrl: 'https://github.com/webdriverio/webdriverio'
},
{
name: 'v8',
label: 'v8',
path: 'https://v8.webdriver.io',
comment: 'until August 2025',
repoUrl: 'https://github.com/webdriverio/webdriverio'
},
{
name: 'v7',
label: 'v7',
path: 'https://v7.webdriver.io',
comment: 'Deprecated',
repoUrl: 'https://github.com/webdriverio/webdriverio'
},
{
name: 'v6',
label: 'v6',
path: 'https://v6.webdriver.io',
comment: 'Deprecated since February 2022',
repoUrl: 'https://github.com/webdriverio/webdriverio'
},
{
name: 'v5',
label: 'v5',
path: 'https://v5.webdriver.io',
comment: 'Deprecated since January 2021',
repoUrl: 'https://github.com/webdriverio/webdriverio'
},
{
name: 'v4',
label: 'v4',
path: 'http://v4.webdriver.io',
comment: 'Deprecated since December 2019',
branch: 'master',
repoUrl: 'https://github.com/webdriverio-boneyard/v4'
}
]
export default pastVersions

32
website/src/css/navbar.css
View file

@ -35,6 +35,7 @@ html[data-theme=dark] {
.navbar__toggle {
margin-left: 1rem;
}
}
.header-github-link:hover,
@ -53,16 +54,14 @@ html[data-theme=dark] {
height: 30px;
display: flex;
}
.header-twitter-link,
.header-youtube-link,
.header-discord-link {
padding-left: 0;
}
.header-github-link:before {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat;
}
.header-twitter-link:before {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z'/%3E%3C/svg%3E") no-repeat;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 24 24'%3E%3Cg%3E%3Cpolygon points='12.153992,10.729553 8.088684,5.041199 5.92041,5.041199 10.956299,12.087097 11.59021,12.97345 15.900635,19.009583 18.068909,19.009583 12.785217,11.615906'/%3E%3Cpath d='M21.15979,1H2.84021C1.823853,1,1,1.823853,1,2.84021v18.31958C1,22.176147,1.823853,23,2.84021,23h18.31958C22.176147,23,23,22.176147,23,21.15979V2.84021C23,1.823853,22.176147,1,21.15979,1z M15.235352,20l-4.362549-6.213013L5.411438,20H4l6.246887-7.104675L4,4h4.764648l4.130127,5.881958L18.06958,4h1.411377l-5.95697,6.775635L20,20H15.235352z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center center;
background-size: contain;
}
.header-youtube-link:before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.441 16.892c-2.102.144-6.784.144-8.883 0-2.276-.156-2.541-1.27-2.558-4.892.017-3.629.285-4.736 2.558-4.892 2.099-.144 6.782-.144 8.883 0 2.277.156 2.541 1.27 2.559 4.892-.018 3.629-.285 4.736-2.559 4.892zm-6.441-7.234l4.917 2.338-4.917 2.346v-4.684z'/%3E%3C/svg%3E") no-repeat;
@ -89,7 +88,8 @@ html[data-theme="dark"] .header-github-link:before {
no-repeat;
}
html[data-theme="dark"] .header-twitter-link:before {
background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z'/%3E%3C/svg%3E") no-repeat;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M21.1598,2C21.6231,2,22,2.3769,22,2.8402v18.3196C22,21.6231,21.6231,22,21.1598,22H2.8402C2.3769,22,2,21.6231,2,21.1598V2.8402C2,2.3769,2.3769,2,2.8402,2H21.1598zM13.524,10.7756L19.481,4h-1.4114l-5.1748,5.882L8.7647,4H4l6.2469,8.8953L4,20h1.4114l5.4614-6.213L15.2353,20H20L13.524,10.7756zM11.5902,12.9734l-0.6339-0.8863L5.9204,5.0412h2.1682l4.0653,5.6884l0.6312,0.8863l5.2837,7.3936H15.9006L11.5902,12.9734z'/%3E%3C/svg%3E") no-repeat center center;
background-size: contain;
}
html[data-theme="dark"] .header-youtube-link:before {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.441 16.892c-2.102.144-6.784.144-8.883 0-2.276-.156-2.541-1.27-2.558-4.892.017-3.629.285-4.736 2.558-4.892 2.099-.144 6.782-.144 8.883 0 2.277.156 2.541 1.27 2.559 4.892-.018 3.629-.285 4.736-2.559 4.892zm-6.441-7.234l4.917 2.338-4.917 2.346v-4.684z'/%3E%3C/svg%3E") no-repeat;
@ -130,6 +130,22 @@ body .react-toggle-thumb {
}
.header-discord-link:before {
transform: scale(0.65) translateY(3px);
transform: scale(0.65) translateY(3px) translateX(-10px);
}
}
@media (max-width: 996px) {
.header-discord-link:before {
transform: scale(0.65) translateY(-10px) translateX(-10px);
}
}
.dropdown-version-item {
font-weight: bold;
font-size: large;
}
.dropdown-version-item:hover {
background-color: rgba(255, 255, 255, 0.1);
}

1
website/src/pages/styles.module.css
View file

@ -41,6 +41,7 @@ html[data-theme=dark] .heroBanner {
align-items: center;
justify-content: center;
margin: 30px 0 0;
gap: 3px;
}
body .getStarted {

2
website/src/theme/card.tsx
View file

@ -45,7 +45,7 @@ export default function Card ({
<h4 className="avatar__name">
{ name }
<GitHubLink url={github && `https://github.com/${github}`} />
<TwitterLink url={twitter && `https://twitter.com/${twitter}`} />
<TwitterLink url={twitter && `https://x.com/${twitter}`} />
</h4>
<small className="avatar__subtitle">{ children }</small>
</div>