docs: 💄 remove icons overloading + few css changes

Signed-off-by: jffarge <jf@dagger.io>
This commit is contained in:
jffarge 2021-11-08 15:25:46 +01:00
parent 88e9662244
commit 07404ae25e
7 changed files with 6 additions and 326 deletions

View File

@ -61,13 +61,11 @@ $desktop-xl-width: 1160px;
--ifm-menu-color-active: var(--ifm-color-primary-dark);
--ifm-menu-color-background-hover: #fdf9d7;
--ifm-menu-color-background-active: var(--ifm-menu-color-background-hover);
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M3.318 9.128a24.776 24.776 0 004.224-3.993.842.842 0 011.32.026c1.227 1.618 2.107 3.387 3.831 4.556.889.6-.159 1.9-1.044 1.3A14.369 14.369 0 018.14 7a30.457 30.457 0 01-3.829 3.463c-.845.671-1.834-.67-.993-1.335z" fill="%23131226" /></svg>');
--ifm-navbar-height: 6rem;
--ifm-navbar-background-color: var(--ifm-color-primary-dark);
--ifm-navbar-padding-vertical: 0;
--ifm-pagination-nav-border-radius: 0;
--ifm-pre-padding: 2rem;
--ifm-toc-border-color: transparent;
--ifm-toc-link-color: var(--ifm-color-primary-dark);
}
@ -191,7 +189,7 @@ h1[class^="h1Heading"] {
margin-bottom: 3rem;
}
.edit-this-page {
.theme-edit-this-page {
font-weight: bold;
display: flex;
align-items: center;
@ -341,7 +339,11 @@ a[class^="sidebarLogo"] {
main[class^="docMainContainer"] {
background: #ffffff;
padding: 2rem 2rem 2rem 4rem;
@include tablet {
padding: 2rem;
}
html[data-theme="dark"] & {
background: var(--ifm-color-primary-dark);
@ -566,19 +568,6 @@ button[class^="copyButton"] {
}
/* docsearch */
.DocSearch-Button-Container {
.DocSearch-Search-Icon {
display: none;
}
&:before {
content: "";
background-color: black;
mask: url("/img/Dagger_Icons_Search.svg");
display: block;
width: 20px;
height: 20px;
}
}
.DocSearch-Button {
margin-right: 2rem !important;

View File

@ -1 +0,0 @@
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M13,7.149A24.806,24.806,0,0,1,8.433,3.558C7.651,2.824,6.47,4,7.255,4.737a30.365,30.365,0,0,0,3.988,3.278A14.369,14.369,0,0,0,7.79,12.076c-.463.963.974,1.809,1.44.841.9-1.877,2.523-3.007,3.943-4.46A.841.841,0,0,0,13,7.149Z"/><path class="cls-1" d="M8.6,7.683A24.806,24.806,0,0,1,4.025,4.092c-.782-.734-1.962.441-1.178,1.179A30.365,30.365,0,0,0,6.835,8.549,14.369,14.369,0,0,0,3.382,12.61c-.462.964.974,1.809,1.44.841.9-1.877,2.523-3.007,3.943-4.46A.841.841,0,0,0,8.6,7.683Z"/></svg>

Before

Width:  |  Height:  |  Size: 648 B

View File

@ -1 +0,0 @@
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#131226;}</style></defs><path class="cls-1" d="M4.757,7.952A30.365,30.365,0,0,0,8.745,4.674c.785-.737-.4-1.913-1.178-1.179A24.764,24.764,0,0,1,3,7.086.842.842,0,0,0,2.827,8.4c1.42,1.452,3.041,2.582,3.944,4.46.465.968,1.9.122,1.439-.842A14.383,14.383,0,0,0,4.757,7.952Z"/><path class="cls-1" d="M11.975,4.029A24.764,24.764,0,0,1,7.4,7.62a.842.842,0,0,0-.169,1.309c1.42,1.452,3.041,2.583,3.943,4.46.466.968,1.9.122,1.44-.841A14.373,14.373,0,0,0,9.165,8.486a30.365,30.365,0,0,0,3.988-3.278C13.937,4.471,12.757,3.3,11.975,4.029Z"/></svg>

Before

Width:  |  Height:  |  Size: 653 B

View File

@ -1,61 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import Link from '@docusaurus/Link';
import Translate, { translate } from '@docusaurus/Translate';
import DocPaginatorPrev from "./Dagger_Icons_Arrow-previous.svg"
import DocPaginatorNext from "./Dagger_Icons_Arrow-next.svg"
function DocPaginator(props) {
const { metadata } = props;
return (
<nav
className="pagination-nav"
aria-label={translate({
id: 'theme.docs.paginator.navAriaLabel',
message: 'Docs pages navigation',
description: 'The ARIA label for the docs pagination',
})}>
<div className="pagination-nav__item">
{metadata.previous && (
<Link
className="pagination-nav__link"
to={metadata.previous.permalink}>
<div className="pagination-nav__sublabel">
<Translate
id="theme.docs.paginator.previous"
description="The label used to navigate to the previous doc">
Previous
</Translate>
</div>
<div className="pagination-nav__label">
<DocPaginatorPrev height={23} style={{ marginRight: '0.5rem' }} />{metadata.previous.title}
</div>
</Link>
)}
</div>
<div className="pagination-nav__item pagination-nav__item--next">
{metadata.next && (
<Link className="pagination-nav__link" to={metadata.next.permalink}>
<div className="pagination-nav__sublabel">
<Translate
id="theme.docs.paginator.next"
description="The label used to navigate to the next doc">
Next
</Translate>
</div>
<div className="pagination-nav__label">
{metadata.next.title}<DocPaginatorNext height={23} style={{ marginLeft: '0.5rem' }} />
</div>
</Link>
)}
</div>
</nav>
);
}
export default DocPaginator;

View File

@ -1,22 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import Translate from '@docusaurus/Translate';
import IconEdit from '../../../static/img/Dagger_Icons_Edit.svg';
export default function EditThisPage({ editUrl }) {
return (
<a href={editUrl} className='edit-this-page' target="_blank" rel="noreferrer noopener">
<IconEdit width='1.2em' height='1.2em' />
<Translate
id="theme.common.editThisPage"
description="The link label to edit the current page">
Edit this page
</Translate>
</a>
);
}

View File

@ -1,204 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, { useState, useRef, useCallback, useMemo } from 'react';
import { createPortal } from 'react-dom';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import { useHistory } from '@docusaurus/router';
import { useBaseUrlUtils } from '@docusaurus/useBaseUrl';
import Link from '@docusaurus/Link';
import Head from '@docusaurus/Head';
import useSearchQuery from '@theme/hooks/useSearchQuery';
import { DocSearchButton, useDocSearchKeyboardEvents } from '@docsearch/react';
import useAlgoliaContextualFacetFilters from '@theme/hooks/useAlgoliaContextualFacetFilters';
import { translate } from '@docusaurus/Translate';
let DocSearchModal = null;
function Hit({ hit, children }) {
return <Link to={hit.url}>{children}</Link>;
}
function ResultsFooter({ state, onClose }) {
const { generateSearchPageLink } = useSearchQuery();
return (
<Link to={generateSearchPageLink(state.query)} onClick={onClose}>
See all {state.context.nbHits} results
</Link>
);
}
function DocSearch({ contextualSearch, ...props }) {
const { siteMetadata } = useDocusaurusContext();
const contextualSearchFacetFilters = useAlgoliaContextualFacetFilters();
const configFacetFilters = props.searchParameters?.facetFilters ?? [];
const facetFilters = contextualSearch
? // Merge contextual search filters with config filters
[...contextualSearchFacetFilters, ...configFacetFilters]
: // ... or use config facetFilters
configFacetFilters;
// we let user override default searchParameters if he wants to
const searchParameters = {
...props.searchParameters,
facetFilters,
};
const { withBaseUrl } = useBaseUrlUtils();
const history = useHistory();
const searchContainer = useRef(null);
const searchButtonRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
const [initialQuery, setInitialQuery] = useState(null);
const importDocSearchModalIfNeeded = useCallback(() => {
if (DocSearchModal) {
return Promise.resolve();
}
return Promise.all([
import('@docsearch/react/modal'),
import('@docsearch/react/style'),
import('./styles.css'),
]).then(([{ DocSearchModal: Modal }]) => {
DocSearchModal = Modal;
});
}, []);
const onOpen = useCallback(() => {
importDocSearchModalIfNeeded().then(() => {
searchContainer.current = document.createElement('div');
document.body.insertBefore(
searchContainer.current,
document.body.firstChild,
);
setIsOpen(true);
});
}, [importDocSearchModalIfNeeded, setIsOpen]);
const onClose = useCallback(() => {
setIsOpen(false);
searchContainer.current.remove();
}, [setIsOpen]);
const onInput = useCallback(
(event) => {
importDocSearchModalIfNeeded().then(() => {
setIsOpen(true);
setInitialQuery(event.key);
});
},
[importDocSearchModalIfNeeded, setIsOpen, setInitialQuery],
);
const navigator = useRef({
navigate({ itemUrl }) {
history.push(itemUrl);
},
}).current;
const transformItems = useRef((items) => {
return items.map((item) => {
// We transform the absolute URL into a relative URL.
// Alternatively, we can use `new URL(item.url)` but it's not
// supported in IE.
const a = document.createElement('a');
a.href = item.url;
return {
...item,
url: withBaseUrl(`${a.pathname}${a.hash}`),
};
});
}).current;
const resultsFooterComponent = useMemo(
() => (footerProps) => <ResultsFooter {...footerProps} onClose={onClose} />,
[onClose],
);
const transformSearchClient = useCallback(
(searchClient) => {
searchClient.addAlgoliaAgent(
'docusaurus',
siteMetadata.docusaurusVersion,
);
return searchClient;
},
[siteMetadata.docusaurusVersion],
);
useDocSearchKeyboardEvents({
isOpen,
onOpen,
onClose,
onInput,
searchButtonRef,
});
const translatedSearchLabel = translate({
id: 'theme.SearchBar.label',
message: 'Search',
description: 'The ARIA label and placeholder for search button',
});
return (
<>
<Head>
{/* This hints the browser that the website will load data from Algolia,
and allows it to preconnect to the DocSearch cluster. It makes the first
query faster, especially on mobile. */}
<link
rel="preconnect"
href={`https://${props.appId}-dsn.algolia.net`}
crossOrigin="anonymous"
/>
</Head>
<DocSearchButton
onTouchStart={importDocSearchModalIfNeeded}
onFocus={importDocSearchModalIfNeeded}
onMouseOver={importDocSearchModalIfNeeded}
onClick={onOpen}
ref={searchButtonRef}
translations={{
buttonText: translatedSearchLabel,
buttonAriaLabel: translatedSearchLabel,
}}
/>
{isOpen &&
createPortal(
<DocSearchModal
onClose={onClose}
initialScrollY={window.scrollY}
initialQuery={initialQuery}
navigator={navigator}
transformItems={transformItems}
hitComponent={Hit}
resultsFooterComponent={resultsFooterComponent}
transformSearchClient={transformSearchClient}
{...props}
searchParameters={searchParameters}
/>,
searchContainer.current,
)}
</>
);
}
function SearchBar() {
const { siteConfig } = useDocusaurusContext();
return <DocSearch {...siteConfig.themeConfig.algolia} />;
}
export default SearchBar;

View File

@ -1,20 +0,0 @@
/**
* Copyright (c) Facebook, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
:root {
--docsearch-primary-color: var(--ifm-color-primary);
--docsearch-text-color: var(--ifm-font-color-base);
}
.DocSearch-Button {
transition: all var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
}
.DocSearch-Container {
z-index: calc(var(--ifm-z-index-fixed) + 1);
}