Skip to content

Commit 12484c0

Browse files
kimsaucekimsauce
committed
revert footer changes (moving those to site migration PR)
1 parent 9f869b6 commit 12484c0

File tree

2 files changed

+81
-284
lines changed

2 files changed

+81
-284
lines changed

‎src/theme/Admonition/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ function WarningIcon() {
5555
}
5656
function SumoIcon() {
5757
return (
58-
<img src="/img/reuse/sumo-square.png" width="25" alt="Sumo Logic square icon"/>
58+
<img src="/img/reuse/sumo-square.png" width="25"/>
5959
)
6060
}
6161
// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style

‎src/theme/Footer/index.tsx‎

Lines changed: 80 additions & 283 deletions
Original file line numberDiff line numberDiff line change
@@ -4,294 +4,91 @@
44
* This source code is licensed under the MIT license found in the
55
* LICENSE file in the root directory of this source tree.
66
*/
7-
import React, { Fragment } from 'react';
8-
import DocLink from '@docusaurus/Link';
9-
import isInternalUrl from '@docusaurus/isInternalUrl';
10-
import { useThemeConfig } from '@docusaurus/theme-common';
11-
import IconExternalLink from '@theme/Icon/ExternalLink';
12-
import {
13-
FontAwesomeIcon,
14-
} from '@fortawesome/react-fontawesome';
15-
import {
16-
faXTwitter,
17-
faYoutube,
18-
faLinkedinIn,
19-
faGithub,
20-
faSquareFacebook,
21-
} from '@fortawesome/free-brands-svg-icons';
22-
import { Stack } from '@mui/system';
23-
import {
24-
Box,
25-
Divider,
26-
Grid,
27-
Link,
28-
List,
29-
ListItem,
30-
ListItemIcon,
31-
ListItemText,
32-
ListSubheader,
33-
Toolbar,
34-
Tooltip,
35-
Typography,
36-
} from '@mui/material';
377

38-
export const Footer = () => {
39-
const { footer } = useThemeConfig();
40-
const { copyright, links = [] } = footer ?? {};
8+
import React from 'react';
9+
import clsx from 'clsx';
10+
import LastUpdated from '@theme/LastUpdated';
11+
import type {Props} from '@theme/DocItem';
12+
import EditThisPage from '@theme/EditThisPage';
13+
import IconBug from '@theme/IconBug';
14+
import TagsListInline, {
15+
type Props as TagsListInlineProps,
16+
} from '@theme/TagsListInline';
4117

42-
if (!footer) {
18+
import styles from './styles.module.css';
19+
import {ThemeClassNames} from '@docusaurus/theme-common';
20+
21+
function TagsRow(props: TagsListInlineProps) {
22+
return (
23+
<div
24+
className={clsx(
25+
ThemeClassNames.docs.docFooterTagsRow,
26+
'row margin-bottom--sm',
27+
)}>
28+
<div className="col">
29+
<TagsListInline {...props} />
30+
</div>
31+
</div>
32+
);
33+
}
34+
35+
type EditMetaRowProps = Pick<
36+
Props['content']['metadata'],
37+
'editUrl' | 'lastUpdatedAt' | 'lastUpdatedBy' | 'formattedLastUpdatedAt'
38+
>;
39+
function EditMetaRow({
40+
editUrl,
41+
lastUpdatedAt,
42+
lastUpdatedBy,
43+
formattedLastUpdatedAt,
44+
}: EditMetaRowProps) {
45+
const mdPath = editUrl.substring(57, );
46+
return (
47+
<div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
48+
<div className="col">{editUrl && <EditThisPage editUrl={editUrl} />} | {mdPath && <a href={'https://github.com/SumoLogic/sumologic-documentation/issues/new?template=feedback.md&labels=type:feedback&title=Feedback-for-' + mdPath } target="_blank">
49+
<IconBug />
50+
Submit an issue</a>}</div>
51+
52+
<div className={clsx('col', styles.lastUpdated)}>
53+
{(lastUpdatedAt || lastUpdatedBy) && (
54+
<LastUpdated
55+
lastUpdatedAt={lastUpdatedAt}
56+
formattedLastUpdatedAt={formattedLastUpdatedAt}
57+
lastUpdatedBy={lastUpdatedBy}
58+
/>
59+
)}
60+
</div>
61+
</div>
62+
);
63+
}
64+
65+
export default function DocItemFooter(props: Props): JSX.Element | null {
66+
const {content: DocContent} = props;
67+
const {metadata} = DocContent;
68+
const {editUrl, lastUpdatedAt, formattedLastUpdatedAt, lastUpdatedBy, tags} =
69+
metadata;
70+
71+
const canDisplayTagsRow = tags.length > 0;
72+
const canDisplayEditMetaRow = !!(editUrl || lastUpdatedAt || lastUpdatedBy);
73+
74+
const canDisplayFooter = canDisplayTagsRow || canDisplayEditMetaRow;
75+
76+
if (!canDisplayFooter) {
4377
return null;
4478
}
4579

4680
return (
47-
<>
48-
<Grid
49-
bgcolor='#1A273F'
50-
component='footer'
51-
container
52-
justifyContent='center'
53-
mt={10}
54-
px={1}
55-
gap={6}
56-
>
57-
{!!links.length && links.map((category) => (
58-
<Grid
59-
item
60-
component={List}
61-
key={category.title}
62-
py={4}
63-
md='auto'
64-
xs={12}
65-
>
66-
<ListSubheader
67-
sx={{
68-
bgcolor: 'transparent',
69-
color: '#6c7993',
70-
fontFamily: 'Lab Grotesque',
71-
fontWeight: 'bold',
72-
textTransform: 'uppercase',
73-
letterSpacing: '0.1rem',
74-
}}
75-
>
76-
{category.title}
77-
</ListSubheader>
78-
{category.items.map(({ href, label }) => (
79-
<Link
80-
component={DocLink}
81-
href={href}
82-
key={href}
83-
underline='none'
84-
>
85-
<ListItem sx={{ py: 0 }}>
86-
<ListItemText
87-
primaryTypographyProps={{
88-
color: '#e3e3e3',
89-
fontFamily: 'Lab Grotesque',
90-
fontSize: 16,
91-
}}
92-
>
93-
{label}
94-
</ListItemText>
95-
{!isInternalUrl(href) && (
96-
<ListItemIcon
97-
sx={{
98-
minWidth: 'auto',
99-
ml: 1,
100-
'& svg': {
101-
color: '#e3e3e3',
102-
}
103-
}}
104-
>
105-
<IconExternalLink />
106-
</ListItemIcon>
107-
)}
108-
</ListItem>
109-
</Link>
110-
))}
111-
</Grid>
112-
))}
113-
</Grid>
114-
<Stack
115-
alignItems='center'
116-
bgcolor='#1A273F'
117-
borderTop='1px solid'
118-
borderColor='rgba(255,255,255,0.12)'
119-
component={Toolbar}
120-
direction={{
121-
md: 'row',
122-
xs: 'column',
123-
}}
124-
justifyContent='space-between'
125-
py={{
126-
md: 0,
127-
xs: 4,
128-
}}
129-
>
130-
<Stack
131-
alignItems='center'
132-
direction='row'
133-
spacing={2}
134-
pb={{
135-
md: 0,
136-
xs: 2,
137-
}}
138-
>
139-
{[
140-
{
141-
alt: 'Sumo Logic GitHub',
142-
color: '#e3e3e3',
143-
href: 'https://github.com/SumoLogic',
144-
'aria-label': 'Sumo Logic GitHub',
145-
icon: faGithub,
146-
size: 'lg',
147-
sx: {
148-
cursor: 'pointer',
149-
'&:hover': {
150-
color: '#0045BE',
151-
},
152-
}
153-
},
154-
{
155-
alt: 'Sumo Logic YouTube',
156-
color: '#e3e3e3',
157-
href: 'https://www.youtube.com/channel/UCI16kViradUnvH6DiQmwdqw',
158-
'aria-label': 'Sumo Logic YouTube',
159-
icon: faYoutube,
160-
size: 'lg',
161-
sx: {
162-
cursor: 'pointer',
163-
'&:hover': {
164-
color: '#0045BE',
165-
},
166-
}
167-
},
168-
{
169-
alt: 'Sumo Logic LinkedIn',
170-
color: '#e3e3e3',
171-
href: 'https://www.linkedin.com/company/sumo-logic',
172-
'aria-label': 'Sumo Logic LinkedIn',
173-
icon: faLinkedinIn,
174-
size: 'lg',
175-
sx: {
176-
cursor: 'pointer',
177-
'&:hover': {
178-
color: '#0045BE',
179-
},
180-
}
181-
},
182-
{
183-
alt: 'Sumo Logic X (formerly Twitter)',
184-
color: '#e3e3e3',
185-
href: 'https://x.com/SumoLogic',
186-
'aria-label': 'Sumo Logic X (formerly Twitter)',
187-
icon: faXTwitter,
188-
size: 'lg',
189-
sx: {
190-
cursor: 'pointer',
191-
'&:hover': {
192-
color: '#0045BE',
193-
},
194-
}
195-
},
196-
{
197-
alt: 'Sumo Logic Facebook',
198-
color: '#e3e3e3',
199-
href: 'https://www.facebook.com/Sumo.Logic',
200-
'aria-label': 'Sumo Logic Facebook',
201-
icon: faSquareFacebook,
202-
size: 'lg',
203-
sx: {
204-
cursor: 'pointer',
205-
'&:hover': {
206-
color: '#0045BE',
207-
},
208-
}
209-
},
210-
].map(({ alt, href, ...other }) => (
211-
<Tooltip key={href} title={alt}>
212-
<Link href={href} rel='noreferrer noopener'>
213-
<Box
214-
component={FontAwesomeIcon}
215-
{...other}
216-
/>
217-
</Link>
218-
</Tooltip>
219-
))}
220-
</Stack>
221-
<Stack
222-
alignItems='center'
223-
direction={{
224-
md: 'row',
225-
xs: 'column',
226-
}}
227-
spacing={{
228-
md: 2,
229-
xs: 0.5,
230-
}}
231-
>
232-
{[
233-
{
234-
label: 'Status',
235-
href: 'https://status.sumologic.com',
236-
},
237-
{
238-
label: 'Legal',
239-
href: 'https://www.sumologic.com/legal',
240-
},
241-
{
242-
label: 'Privacy Statement',
243-
href: 'https://www.sumologic.com/privacy-statement',
244-
},
245-
{
246-
label: 'Terms of Use',
247-
href: 'https://www.sumologic.com/terms-conditions',
248-
},
249-
{
250-
label: 'CA Privacy Notice',
251-
href: 'https://www.sumologic.com/legal/privacy-statement#ca_notice',
252-
},].map(({ href, label }) => (
253-
<Fragment key={href}>
254-
<Link
255-
color='#6c7993'
256-
fontFamily='Lab Grotesque'
257-
fontSize={14}
258-
href={href}
259-
>
260-
{label}
261-
</Link>
262-
<Divider
263-
flexItem
264-
orientation='vertical'
265-
sx={{
266-
bgcolor: '#6c7993',
267-
'&:last-of-type': {
268-
display: {
269-
md: 'block',
270-
sm: 'none',
271-
xs: 'none',
272-
}
273-
},
274-
}}
275-
/>
276-
</Fragment>
277-
))}
278-
{copyright && (
279-
<Typography
280-
color='#6c7993'
281-
fontFamily='Lab Grotesque'
282-
fontSize={14}
283-
pt={{
284-
md: 0,
285-
xs: 1,
286-
}}
287-
>
288-
{copyright}
289-
</Typography>
290-
)}
291-
</Stack>
292-
</Stack>
293-
</>
81+
<footer
82+
className={clsx(ThemeClassNames.docs.docFooter, 'docusaurus-mt-lg')}>
83+
{canDisplayTagsRow && <TagsRow tags={tags} />}
84+
{canDisplayEditMetaRow && (
85+
<EditMetaRow
86+
editUrl={editUrl}
87+
lastUpdatedAt={lastUpdatedAt}
88+
lastUpdatedBy={lastUpdatedBy}
89+
formattedLastUpdatedAt={formattedLastUpdatedAt}
90+
/>
91+
)}
92+
</footer>
29493
);
29594
}
296-
297-
export default React.memo(Footer);

0 commit comments

Comments
 (0)