Skip to content

Commit 91dad75

Browse files
claudiacodacyclaudiacodacy
committed
footer structure
1 parent 89302f1 commit 91dad75

File tree

5 files changed

+184
-7
lines changed

5 files changed

+184
-7
lines changed

‎docusaurus/docusaurus.config.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,35 @@ const config: Config = {
135135
copyright: `Copyright © ${new Date().getFullYear()} Codacy`,
136136
},
137137
} satisfies Preset.ThemeConfig,
138+
customFields: {
139+
footerNavLinks: [
140+
{label: 'Why Codacy', href: 'https://www.codacy.com/why-codacy'},
141+
{label: 'Platform', href: 'https://www.codacy.com'},
142+
{label: 'Resources', href: 'https://www.codacy.com/resources'},
143+
{label: 'About us', href: 'https://www.codacy.com/about'},
144+
],
145+
footerSocialLinks: [
146+
{
147+
label: 'GitHub',
148+
href: 'https://github.com/codacy/docs',
149+
icon: 'logo-github',
150+
},
151+
{
152+
label: 'LinkedIn',
153+
href: 'https://linkedin.com/company/codacy',
154+
icon: 'logo-linkedin',
155+
},
156+
{
157+
label: 'YouTube',
158+
href: 'https://youtube.com/@codacydev',
159+
icon: 'logo-youtube',
160+
},
161+
],
162+
footerPrivacyLink: {
163+
label: 'Privacy policy',
164+
href: 'https://example.com/privacy',
165+
},
166+
},
138167
};
139168

140169
export default config;

‎docusaurus/src/pages/markdown-page.md‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎docusaurus/src/theme/Footer/index.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import Head from '@docusaurus/Head';
4+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
5+
6+
import styles from './styles.module.css';
7+
8+
type FooterLink = {label: string; href: string};
9+
type FooterSocialLink = FooterLink & {icon: string};
10+
11+
export default function Footer(): React.JSX.Element {
12+
const year = new Date().getFullYear();
13+
const {siteConfig} = useDocusaurusContext();
14+
const customFields = siteConfig.customFields as {
15+
footerNavLinks?: FooterLink[];
16+
footerSocialLinks?: FooterSocialLink[];
17+
footerPrivacyLink?: FooterLink;
18+
};
19+
const navLinks = customFields?.footerNavLinks ?? [];
20+
const socialLinks = customFields?.footerSocialLinks ?? [];
21+
const privacyLink = customFields?.footerPrivacyLink ?? null;
22+
23+
return (
24+
<footer className={styles.footer}>
25+
<Head>
26+
<script
27+
type="module"
28+
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"
29+
/>
30+
<script
31+
nomodule
32+
src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"
33+
/>
34+
</Head>
35+
<div className={styles.inner}>
36+
<div className={styles.left}>
37+
<div className={styles.social}>
38+
{socialLinks.map((item) => (
39+
<Link
40+
key={item.label}
41+
className={styles.iconLink}
42+
href={item.href}
43+
aria-label={item.label}>
44+
<ion-icon className={styles.icon} name={item.icon} />
45+
</Link>
46+
))}
47+
</div>
48+
<nav className={styles.nav}>
49+
{navLinks.map((item) => (
50+
<Link key={item.label} className={styles.navLink} href={item.href}>
51+
{item.label}
52+
</Link>
53+
))}
54+
</nav>
55+
</div>
56+
<div className={styles.right}>
57+
{ privacyLink && (
58+
<Link className={styles.navLink} href={privacyLink.href}>
59+
{privacyLink.label}
60+
</Link>
61+
)}
62+
<span className={styles.copy}>© {year} Codacy</span>
63+
</div>
64+
</div>
65+
</footer>
66+
);
67+
}

‎docusaurus/src/theme/Footer/styles.module.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.footer {
2+
border-top: 1px solid var(--ifm-color-emphasis-200);
3+
background: #ffffff;
4+
}
5+
6+
.inner {
7+
display: flex;
8+
align-items: center;
9+
justify-content: space-between;
10+
gap: 2rem;
11+
max-width: 1200px;
12+
margin: 0 auto;
13+
padding: 2rem 1.5rem;
14+
}
15+
16+
.left {
17+
display: flex;
18+
align-items: center;
19+
gap: 2rem;
20+
flex-wrap: wrap;
21+
}
22+
23+
.social {
24+
display: flex;
25+
gap: 0.75rem;
26+
}
27+
28+
.iconLink {
29+
display: inline-flex;
30+
align-items: center;
31+
justify-content: center;
32+
width: 36px;
33+
height: 36px;
34+
border-radius: 10px;
35+
background: #e9edf3;
36+
color: #445066;
37+
}
38+
39+
.icon {
40+
font-size: 18px;
41+
display: block;
42+
color: currentColor;
43+
}
44+
45+
.nav {
46+
display: flex;
47+
gap: 1.5rem;
48+
flex-wrap: wrap;
49+
}
50+
51+
.navLink {
52+
color: #445066;
53+
font-weight: 600;
54+
text-decoration: none;
55+
}
56+
57+
.right {
58+
display: flex;
59+
align-items: center;
60+
gap: 2rem;
61+
flex-wrap: wrap;
62+
}
63+
64+
.copy {
65+
color: #445066;
66+
font-weight: 600;
67+
}
68+
69+
@media (max-width: 900px) {
70+
.inner {
71+
flex-direction: column;
72+
align-items: flex-start;
73+
}
74+
}

‎docusaurus/src/types/ionicons.d.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
3+
declare global {
4+
namespace JSX {
5+
interface IntrinsicElements {
6+
'ion-icon': React.DetailedHTMLProps<
7+
React.HTMLAttributes<HTMLElement>,
8+
HTMLElement
9+
> & {name?: string};
10+
}
11+
}
12+
}
13+
14+
export {};

0 commit comments

Comments
 (0)