Skip to content

Commit 79b11ff

Browse files
authored
refactor: footer (#1176)
1 parent 57c15ee commit 79b11ff

File tree

10 files changed

+406
-87
lines changed

10 files changed

+406
-87
lines changed

.stylelintrc

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
{
2-
"extends": "stylelint-config-standard",
2+
"extends": [
3+
"stylelint-config-standard",
4+
"stylelint-config-recommended-scss"
5+
],
36
"rules": {
47
"selector-type-case": "lower",
58
"selector-class-pattern": null,
6-
"property-no-vendor-prefix": true
9+
"property-no-vendor-prefix": true,
710
}
811
}

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,6 @@
3737
"lint-staged": {
3838
"*.{js,jsx,ts,tsx}": "eslint --cache --fix",
3939
"*.{yml,yaml}": "eslint --cache --fix",
40-
"*.css": "stylelint --cache --fix"
40+
"*.{scss,css}": "stylelint --cache --fix"
4141
}
4242
}

website/docusaurus.config.js

-76
Original file line numberDiff line numberDiff line change
@@ -318,82 +318,6 @@ module.exports = {
318318
items: require('./config/navbar.js'),
319319
},
320320
hideableSidebar: true,
321-
footer: {
322-
links: [
323-
{
324-
title: 'ASF',
325-
items: [
326-
{
327-
label: 'Foundation',
328-
to: 'https://www.apache.org/',
329-
},
330-
{
331-
label: 'License',
332-
to: 'https://www.apache.org/licenses/',
333-
},
334-
{
335-
label: 'Events',
336-
to: 'https://www.apache.org/events/',
337-
},
338-
{
339-
label: 'Security',
340-
to: 'https://www.apache.org/security/',
341-
},
342-
{
343-
label: 'Sponsorship',
344-
to: 'https://www.apache.org/foundation/sponsorship.html',
345-
},
346-
{
347-
label: 'Thanks',
348-
to: 'https://www.apache.org/foundation/thanks.html',
349-
},
350-
],
351-
},
352-
{
353-
title: 'Community',
354-
items: [
355-
{
356-
label: 'GitHub',
357-
to: 'https://github.com/apache/apisix/issues',
358-
},
359-
{
360-
label: 'Slack',
361-
to: '/docs/general/join',
362-
},
363-
{
364-
label: 'Twitter',
365-
to: 'https://twitter.com/ApacheAPISIX',
366-
}, {
367-
label: 'YouTube',
368-
to: 'https://www.youtube.com/channel/UCgPD18cMhOg5rmPVnQhAC8g',
369-
},
370-
],
371-
},
372-
{
373-
title: 'More',
374-
items: [
375-
{
376-
label: 'Blog',
377-
to: '/blog/',
378-
}, {
379-
label: 'Showcase',
380-
to: '/showcase',
381-
}, {
382-
label: 'Plugin Hub',
383-
to: '/plugins',
384-
},
385-
],
386-
},
387-
],
388-
logo: {
389-
alt: 'Apache Software Foundation',
390-
src: 'https://static.apiseven.com/202202/asf_logo_wide_small.png',
391-
href: 'https://www.apache.org/',
392-
},
393-
394-
copyright:
395-
'Copyright © 2019-2022 The Apache Software Foundation. Apache APISIX, APISIX®, Apache, the Apache feather logo, and the Apache APISIX project logo are either registered trademarks or trademarks of the Apache Software Foundation.',
396-
},
397321
announcementBar: {
398322
id: 'query',
399323
backgroundColor: '#e8433e',

website/package.json

+5-2
Original file line numberDiff line numberDiff line change
@@ -24,23 +24,26 @@
2424
"@types/styled-components": "^5.1.24",
2525
"@types/video.js": "^7.3.40",
2626
"babel-plugin-styled-components": "^2.0.6",
27+
"stylelint-config-standard-scss": "^4.0.0",
2728
"typescript": "^4.4.2"
2829
},
2930
"dependencies": {
3031
"@docusaurus/core": "2.0.0-beta.6",
3132
"@docusaurus/plugin-client-redirects": "2.0.0-beta.6",
3233
"@docusaurus/preset-classic": "2.0.0-beta.6",
34+
"@iconify/icons-akar-icons": "^1.2.8",
35+
"@iconify/react": "^3.2.2",
3336
"change-case": "^4.1.2",
3437
"clsx": "^1.1.1",
35-
"docusaurus-plugin-sass": "^0.2.1",
38+
"docusaurus-plugin-sass": "^0.2.2",
3639
"gsap": "^3.7.1",
3740
"raw-loader": "^4.0.2",
3841
"rc-image": "^5.6.2",
3942
"react": "^17.0.2",
4043
"react-dom": "^17.0.2",
4144
"react-lazy-load-image-component": "^1.5.4",
4245
"react-transition-group": "^4.4.1",
43-
"sass": "^1.38.2",
46+
"sass": "^1.53.0",
4447
"styled-components": "^5.3.3",
4548
"three": "^0.131.3",
4649
"video.js": "^7.19.2"

website/src/components/sections/Endcta.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { LazyLoadImage } from 'react-lazy-load-image-component';
99
import ArrowAnim from '../ArrowAnim';
1010

1111
const EndCTA: FC = () => (
12-
<div className="endcta" style={{ padding: '50px 0', background: '#FF90A3', margin: '0 0 -32px 0' }}>
12+
<div className="endcta" style={{ padding: '50px 0', background: '#FF90A3' }}>
1313
<div className="endcta-text">
1414
<p style={{
1515
display: 'flex', justifyContent: 'center', alignItems: 'center', whiteSpace: 'pre',

website/src/css/util.scss

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
@use "sass:map";
2+
3+
$breakpoints: (
4+
xs: 369px,
5+
sm: 736px,
6+
md: 1024px,
7+
lg: 1400px,
8+
);
9+
10+
// @include respond-above() {}
11+
@mixin respond-above($breakpoint) {
12+
@if map.has-key($breakpoints, $breakpoint) {
13+
$breakpoint-value: map.get($breakpoints, $breakpoint);
14+
15+
@media only screen and (min-width: $breakpoint-value) {
16+
@content;
17+
}
18+
}
19+
20+
@else {
21+
@warn "Invalid #{$breakpoint}.";
22+
}
23+
}
24+
25+
// @include respond-below() {}
26+
@mixin respond-below($breakpoint) {
27+
@if map.has-key($breakpoints, $breakpoint) {
28+
$breakpoint-value: map.get($breakpoints, $breakpoint);
29+
30+
@media only screen and (max-width: ($breakpoint-value - 1)) {
31+
@content;
32+
}
33+
}
34+
35+
@else {
36+
@warn "Invalid #{$breakpoint}.";
37+
}
38+
}
39+
40+
// @include respond-between(sm, md) {}
41+
@mixin respond-between($lower, $upper) {
42+
@if map.has-key($breakpoints, $lower) and map.has-key($breakpoints, $upper) {
43+
$lower-breakpoint: map.get($breakpoints, $lower);
44+
$upper-breakpoint: map.get($breakpoints, $upper);
45+
46+
@media only screen and (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
47+
@content;
48+
}
49+
}
50+
51+
@else {
52+
@if (map.has-key($breakpoints, $lower) == false) {
53+
@warn "Lower breakpoint invalid: #{$lower}.";
54+
}
55+
56+
@if (map.has-key($breakpoints, $upper) == false) {
57+
@warn "Upper breakpoint invalid: #{$upper}.";
58+
}
59+
}
60+
}

website/src/theme/Footer/index.tsx

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
/* eslint-disable react/prop-types */
2+
/**
3+
* Copyright (c) Facebook, Inc. and its affiliates.
4+
*
5+
* This source code is licensed under the MIT license found in the
6+
* LICENSE file in the root directory of this source tree.
7+
*/
8+
import type { FC } from 'react';
9+
import React from 'react';
10+
import Link from '@docusaurus/Link';
11+
import useBaseUrl from '@docusaurus/useBaseUrl';
12+
import { Icon } from '@iconify/react';
13+
import githubIcon from '@iconify/icons-akar-icons/github-fill';
14+
import twitterIcon from '@iconify/icons-akar-icons/twitter-fill';
15+
import slackIcon from '@iconify/icons-akar-icons/slack-fill';
16+
import youtubeIcon from '@iconify/icons-akar-icons/youtube-fill';
17+
import { LazyLoadImage } from 'react-lazy-load-image-component';
18+
import style from './styles.module.scss';
19+
20+
const footer = {
21+
links: [
22+
{
23+
title: 'ASF',
24+
items: [
25+
{
26+
label: 'Foundation',
27+
to: 'https://www.apache.org/',
28+
},
29+
{
30+
label: 'License',
31+
to: 'https://www.apache.org/licenses/',
32+
},
33+
{
34+
label: 'Events',
35+
to: 'https://www.apache.org/events/',
36+
},
37+
{
38+
label: 'Security',
39+
to: 'https://www.apache.org/security/',
40+
},
41+
{
42+
label: 'Sponsorship',
43+
to: 'https://www.apache.org/foundation/sponsorship.html',
44+
},
45+
{
46+
label: 'Thanks',
47+
to: 'https://www.apache.org/foundation/thanks.html',
48+
},
49+
],
50+
},
51+
{
52+
title: 'Community',
53+
items: [
54+
{
55+
icon: githubIcon,
56+
label: 'GitHub',
57+
to: 'https://github.com/apache/apisix/issues',
58+
},
59+
{
60+
icon: slackIcon,
61+
label: 'Slack',
62+
to: '/docs/general/join',
63+
},
64+
{
65+
icon: twitterIcon,
66+
label: 'Twitter',
67+
to: 'https://twitter.com/ApacheAPISIX',
68+
},
69+
{
70+
icon: youtubeIcon,
71+
label: 'YouTube',
72+
to: 'https://www.youtube.com/channel/UCgPD18cMhOg5rmPVnQhAC8g',
73+
},
74+
],
75+
},
76+
{
77+
title: 'More',
78+
items: [
79+
{
80+
label: 'Blog',
81+
to: '/blog/',
82+
}, {
83+
label: 'Showcase',
84+
to: '/showcase',
85+
}, {
86+
label: 'Plugin Hub',
87+
to: '/plugins',
88+
},
89+
],
90+
},
91+
],
92+
logo: {
93+
alt: 'Apache Software Foundation',
94+
src: 'https://static.apiseven.com/202202/asf_logo_wide_small.png',
95+
href: 'https://www.apache.org/',
96+
},
97+
98+
copyright:
99+
'Copyright © 2019-2022 The Apache Software Foundation. Apache APISIX, APISIX®, Apache, the Apache feather logo, and the Apache APISIX project logo are either registered trademarks or trademarks of the Apache Software Foundation.',
100+
};
101+
102+
const FooterLink = ({
103+
to, icon, href, label, prependBaseUrlToHref, ...props
104+
}) => {
105+
const toUrl = useBaseUrl(to);
106+
const normalizedHref = useBaseUrl(href, {
107+
forcePrependBaseUrl: true,
108+
});
109+
const hrefObj = href
110+
? { href: prependBaseUrlToHref ? normalizedHref : href }
111+
: { to: toUrl };
112+
return (
113+
<Link
114+
{...hrefObj}
115+
{...props}
116+
>
117+
<Icon icon={icon} />
118+
<span>{label}</span>
119+
</Link>
120+
);
121+
};
122+
123+
const Footer: FC = () => {
124+
const { copyright, links, logo } = footer;
125+
126+
if (!footer) {
127+
return null;
128+
}
129+
130+
return (
131+
<footer className={style.container}>
132+
{links && links.length > 0 && (
133+
<div className={style.linksRow}>
134+
{links.map(({ title, items }) => (
135+
<div key={title} className={style.linksCol}>
136+
<div>{title}</div>
137+
<ul>
138+
{items.map((v) => (
139+
<li key={v.to} className="footer__item">
140+
<FooterLink {...v} />
141+
</li>
142+
))}
143+
</ul>
144+
</div>
145+
))}
146+
</div>
147+
)}
148+
<div className={style.copyright}>
149+
<Link href={logo.href}>
150+
<LazyLoadImage alt={logo.alt} src={logo.src} height="40px" width="231.25px" />
151+
</Link>
152+
<div className={style.text}>{copyright}</div>
153+
</div>
154+
</footer>
155+
);
156+
};
157+
158+
export default Footer;

0 commit comments

Comments
 (0)