Skip to content

Commit

Permalink
refactor: footer (apache#1176)
Browse files Browse the repository at this point in the history
  • Loading branch information
SkyeYoung authored Jul 1, 2022
1 parent 57c15ee commit 79b11ff
Show file tree
Hide file tree
Showing 10 changed files with 406 additions and 87 deletions.
7 changes: 5 additions & 2 deletions .stylelintrc
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
{
"extends": "stylelint-config-standard",
"extends": [
"stylelint-config-standard",
"stylelint-config-recommended-scss"
],
"rules": {
"selector-type-case": "lower",
"selector-class-pattern": null,
"property-no-vendor-prefix": true
"property-no-vendor-prefix": true,
}
}
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,6 @@
"lint-staged": {
"*.{js,jsx,ts,tsx}": "eslint --cache --fix",
"*.{yml,yaml}": "eslint --cache --fix",
"*.css": "stylelint --cache --fix"
"*.{scss,css}": "stylelint --cache --fix"
}
}
76 changes: 0 additions & 76 deletions website/docusaurus.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -318,82 +318,6 @@ module.exports = {
items: require('./config/navbar.js'),
},
hideableSidebar: true,
footer: {
links: [
{
title: 'ASF',
items: [
{
label: 'Foundation',
to: 'https://www.apache.org/',
},
{
label: 'License',
to: 'https://www.apache.org/licenses/',
},
{
label: 'Events',
to: 'https://www.apache.org/events/',
},
{
label: 'Security',
to: 'https://www.apache.org/security/',
},
{
label: 'Sponsorship',
to: 'https://www.apache.org/foundation/sponsorship.html',
},
{
label: 'Thanks',
to: 'https://www.apache.org/foundation/thanks.html',
},
],
},
{
title: 'Community',
items: [
{
label: 'GitHub',
to: 'https://github.com/apache/apisix/issues',
},
{
label: 'Slack',
to: '/docs/general/join',
},
{
label: 'Twitter',
to: 'https://twitter.com/ApacheAPISIX',
}, {
label: 'YouTube',
to: 'https://www.youtube.com/channel/UCgPD18cMhOg5rmPVnQhAC8g',
},
],
},
{
title: 'More',
items: [
{
label: 'Blog',
to: '/blog/',
}, {
label: 'Showcase',
to: '/showcase',
}, {
label: 'Plugin Hub',
to: '/plugins',
},
],
},
],
logo: {
alt: 'Apache Software Foundation',
src: 'https://static.apiseven.com/202202/asf_logo_wide_small.png',
href: 'https://www.apache.org/',
},

copyright:
'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.',
},
announcementBar: {
id: 'query',
backgroundColor: '#e8433e',
Expand Down
7 changes: 5 additions & 2 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,23 +24,26 @@
"@types/styled-components": "^5.1.24",
"@types/video.js": "^7.3.40",
"babel-plugin-styled-components": "^2.0.6",
"stylelint-config-standard-scss": "^4.0.0",
"typescript": "^4.4.2"
},
"dependencies": {
"@docusaurus/core": "2.0.0-beta.6",
"@docusaurus/plugin-client-redirects": "2.0.0-beta.6",
"@docusaurus/preset-classic": "2.0.0-beta.6",
"@iconify/icons-akar-icons": "^1.2.8",
"@iconify/react": "^3.2.2",
"change-case": "^4.1.2",
"clsx": "^1.1.1",
"docusaurus-plugin-sass": "^0.2.1",
"docusaurus-plugin-sass": "^0.2.2",
"gsap": "^3.7.1",
"raw-loader": "^4.0.2",
"rc-image": "^5.6.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-lazy-load-image-component": "^1.5.4",
"react-transition-group": "^4.4.1",
"sass": "^1.38.2",
"sass": "^1.53.0",
"styled-components": "^5.3.3",
"three": "^0.131.3",
"video.js": "^7.19.2"
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/sections/Endcta.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { LazyLoadImage } from 'react-lazy-load-image-component';
import ArrowAnim from '../ArrowAnim';

const EndCTA: FC = () => (
<div className="endcta" style={{ padding: '50px 0', background: '#FF90A3', margin: '0 0 -32px 0' }}>
<div className="endcta" style={{ padding: '50px 0', background: '#FF90A3' }}>
<div className="endcta-text">
<p style={{
display: 'flex', justifyContent: 'center', alignItems: 'center', whiteSpace: 'pre',
Expand Down
60 changes: 60 additions & 0 deletions website/src/css/util.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
@use "sass:map";

$breakpoints: (
xs: 369px,
sm: 736px,
md: 1024px,
lg: 1400px,
);

// @include respond-above() {}
@mixin respond-above($breakpoint) {
@if map.has-key($breakpoints, $breakpoint) {
$breakpoint-value: map.get($breakpoints, $breakpoint);

@media only screen and (min-width: $breakpoint-value) {
@content;
}
}

@else {
@warn "Invalid #{$breakpoint}.";
}
}

// @include respond-below() {}
@mixin respond-below($breakpoint) {
@if map.has-key($breakpoints, $breakpoint) {
$breakpoint-value: map.get($breakpoints, $breakpoint);

@media only screen and (max-width: ($breakpoint-value - 1)) {
@content;
}
}

@else {
@warn "Invalid #{$breakpoint}.";
}
}

// @include respond-between(sm, md) {}
@mixin respond-between($lower, $upper) {
@if map.has-key($breakpoints, $lower) and map.has-key($breakpoints, $upper) {
$lower-breakpoint: map.get($breakpoints, $lower);
$upper-breakpoint: map.get($breakpoints, $upper);

@media only screen and (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
@content;
}
}

@else {
@if (map.has-key($breakpoints, $lower) == false) {
@warn "Lower breakpoint invalid: #{$lower}.";
}

@if (map.has-key($breakpoints, $upper) == false) {
@warn "Upper breakpoint invalid: #{$upper}.";
}
}
}
158 changes: 158 additions & 0 deletions website/src/theme/Footer/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
/* eslint-disable react/prop-types */
/**
* 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 type { FC } from 'react';
import React from 'react';
import Link from '@docusaurus/Link';
import useBaseUrl from '@docusaurus/useBaseUrl';
import { Icon } from '@iconify/react';
import githubIcon from '@iconify/icons-akar-icons/github-fill';
import twitterIcon from '@iconify/icons-akar-icons/twitter-fill';
import slackIcon from '@iconify/icons-akar-icons/slack-fill';
import youtubeIcon from '@iconify/icons-akar-icons/youtube-fill';
import { LazyLoadImage } from 'react-lazy-load-image-component';
import style from './styles.module.scss';

const footer = {
links: [
{
title: 'ASF',
items: [
{
label: 'Foundation',
to: 'https://www.apache.org/',
},
{
label: 'License',
to: 'https://www.apache.org/licenses/',
},
{
label: 'Events',
to: 'https://www.apache.org/events/',
},
{
label: 'Security',
to: 'https://www.apache.org/security/',
},
{
label: 'Sponsorship',
to: 'https://www.apache.org/foundation/sponsorship.html',
},
{
label: 'Thanks',
to: 'https://www.apache.org/foundation/thanks.html',
},
],
},
{
title: 'Community',
items: [
{
icon: githubIcon,
label: 'GitHub',
to: 'https://github.com/apache/apisix/issues',
},
{
icon: slackIcon,
label: 'Slack',
to: '/docs/general/join',
},
{
icon: twitterIcon,
label: 'Twitter',
to: 'https://twitter.com/ApacheAPISIX',
},
{
icon: youtubeIcon,
label: 'YouTube',
to: 'https://www.youtube.com/channel/UCgPD18cMhOg5rmPVnQhAC8g',
},
],
},
{
title: 'More',
items: [
{
label: 'Blog',
to: '/blog/',
}, {
label: 'Showcase',
to: '/showcase',
}, {
label: 'Plugin Hub',
to: '/plugins',
},
],
},
],
logo: {
alt: 'Apache Software Foundation',
src: 'https://static.apiseven.com/202202/asf_logo_wide_small.png',
href: 'https://www.apache.org/',
},

copyright:
'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.',
};

const FooterLink = ({
to, icon, href, label, prependBaseUrlToHref, ...props
}) => {
const toUrl = useBaseUrl(to);
const normalizedHref = useBaseUrl(href, {
forcePrependBaseUrl: true,
});
const hrefObj = href
? { href: prependBaseUrlToHref ? normalizedHref : href }
: { to: toUrl };
return (
<Link
{...hrefObj}
{...props}
>
<Icon icon={icon} />
<span>{label}</span>
</Link>
);
};

const Footer: FC = () => {
const { copyright, links, logo } = footer;

if (!footer) {
return null;
}

return (
<footer className={style.container}>
{links && links.length > 0 && (
<div className={style.linksRow}>
{links.map(({ title, items }) => (
<div key={title} className={style.linksCol}>
<div>{title}</div>
<ul>
{items.map((v) => (
<li key={v.to} className="footer__item">
<FooterLink {...v} />
</li>
))}
</ul>
</div>
))}
</div>
)}
<div className={style.copyright}>
<Link href={logo.href}>
<LazyLoadImage alt={logo.alt} src={logo.src} height="40px" width="231.25px" />
</Link>
<div className={style.text}>{copyright}</div>
</div>
</footer>
);
};

export default Footer;
Loading

0 comments on commit 79b11ff

Please sign in to comment.