docs: 💄 Update UI

Signed-off-by: jffarge <jf@dagger.io>
This commit is contained in:
jffarge
2021-12-23 12:07:18 +01:00
committed by jffarge
parent e43f6db4b1
commit ac6d784714
6 changed files with 52 additions and 267 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 6.6 KiB

View File

@@ -1,66 +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 clsx from 'clsx';
import {translate} from '@docusaurus/Translate';
import {useThemeConfig} from '@docusaurus/theme-common';
import './styles.css';
import styles from './styles.module.css';
import AnchorIcon from "./anchor.svg"
export const MainHeading = function MainHeading({...props}) {
return (
<header>
<h1
{...props}
id={undefined} // h1 headings do not need an id because they don't appear in the TOC
>
{props.children}
</h1>
</header>
);
};
const createAnchorHeading = (Tag) =>
function TargetComponent({id, ...props}) {
const {
navbar: {hideOnScroll},
} = useThemeConfig();
if (!id) {
return <Tag {...props} />;
}
return (
<Tag
{...props}
className={clsx('anchor', {
[styles.anchorWithHideOnScrollNavbar]: hideOnScroll,
[styles.anchorWithStickyNavbar]: !hideOnScroll,
})}
id={id}>
{props.children}
<a
aria-hidden="true"
className="hash-link"
href={`#${id}`}
title={translate({
id: 'theme.common.headingLinkTitle',
message: 'Direct link to heading',
description: 'Title for link to heading',
})}>
<AnchorIcon />
</a>
</Tag>
);
};
const Heading = (headingType) => {
return headingType === 'h1' ? MainHeading : createAnchorHeading(headingType);
};
export default Heading;

View File

@@ -1,21 +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.
*/
.hash-link {
opacity: 0;
padding-left: 0.5rem;
transition: opacity var(--ifm-transition-fast);
}
.hash-link:before {
content: '#';
}
.hash-link:focus,
*:hover > .hash-link {
opacity: 1;
}

View File

@@ -1,19 +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.
*/
/*
When the navbar is sticky, ensure that on anchor click,
the browser does not scroll that anchor behind the navbar
See https://twitter.com/JoshWComeau/status/1332015868725891076
*/
.anchorWithStickyNavbar {
scroll-margin-top: calc(var(--ifm-navbar-height) + 0.5rem);
}
.anchorWithHideOnScrollNavbar {
scroll-margin-top: 0.5rem;
}