Skip to content

Commit e177bc8

Browse files
SylvainCorlaySylvainCorlay
authored
Merge pull request #135 from HaudinFlorence/replace_default_footer
Remove default footer and propose a react component to replace it
2 parents a92994b + fa0d086 commit e177bc8

13 files changed

+173
-103
lines changed

‎docusaurus.config.ts

+5-92
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ const config: Config = {
6464
title: "",
6565
logo: {
6666
alt: "QuantStack Logo",
67-
src: "img/quantstack/logo-website.svg"
67+
src: "img/quantstack/logo-website.svg",
6868
},
6969

7070
items: [
@@ -131,97 +131,10 @@ const config: Config = {
131131
],
132132
},
133133

134-
footer: {
135-
links: [
136-
{
137-
title: " ",
138-
items: [
139-
{
140-
label: " ",
141-
className: "astronaut-footer",
142-
href: "/home",
143-
},
144-
],
145-
},
146-
147-
{
148-
title: "Follow QuantStack on",
149-
items: [
150-
{
151-
label: "GitHub",
152-
className: "github-icon",
153-
href: "https://github.com/QuantStack",
154-
},
155-
{
156-
label: "LinkedIn",
157-
className: "linkedin-icon",
158-
href: "https://www.linkedin.com/company/quantstack/mycompany/",
159-
},
160-
{
161-
label: "X",
162-
className: "x-icon",
163-
href: "https://twitter.com/QuantStack",
164-
},
165-
],
166-
},
167-
{
168-
title: "Menu ",
169-
items: [
170-
{
171-
label: "Home",
172-
href: "/home/",
173-
},
174-
{
175-
label: "Projects",
176-
href: "/projects/",
177-
},
178-
{
179-
label: "Services",
180-
href: "/services/",
181-
},
182-
{
183-
label: "About",
184-
href: "/about/",
185-
},
186-
{
187-
label: "Careers",
188-
href: "/careers/",
189-
},
190-
{
191-
label: "Blog",
192-
href: "/blog/",
193-
},
194-
],
195-
},
196-
197-
198-
{
199-
title: "QuantStack office ",
200-
items: [
201-
{
202-
html: `
203-
204-
<div class="div .address">
205-
16, avenue Curti <br/>
206-
94100 Saint-Maur-des-Fossés <br/>
207-
France
208-
</div>
209-
210-
`,
211-
},
212-
],
213-
},
214-
],
215-
216-
copyright: copyright,
217-
},
218-
219-
220-
colorMode: {
221-
defaultMode: 'light',
222-
disableSwitch: true,
223-
respectPrefersColorScheme: false,
224-
134+
colorMode: {
135+
defaultMode: "light",
136+
disableSwitch: true,
137+
respectPrefersColorScheme: false,
225138
},
226139

227140
prism: {

‎src/components/footer/Footer.tsx

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import Link from "@docusaurus/Link";
2+
import styles from "./styles.module.css";
3+
import GHPicture from "@site/static/img/socialmedias/GH.svg";
4+
import LinkedInPicture from "@site/static/img/socialmedias/LinkedIn.svg";
5+
import XPicture from "@site/static/img/socialmedias/X.svg";
6+
7+
export function SocialMediasQuantStack() {
8+
return (
9+
<div>
10+
<b>Follow us on</b> <br />
11+
<div style={{marginBottom: "var(--ifm-spacing-lg)"}}>
12+
<Link href={"https://github.com/QuantStack"}>{<GHPicture />}</Link>
13+
<Link href={"https://www.linkedin.com/company/quantstack/mycompany"}>
14+
{<LinkedInPicture />}
15+
</Link>
16+
<Link href={"https://twitter.com/QuantStack"}>{<XPicture />}</Link>
17+
</div>
18+
</div>
19+
);
20+
}
21+
22+
export default function Footer() {
23+
return (
24+
<div className={"container" + " " + styles.footer_container}>
25+
<div className={"row"} style={{ paddingBottom: "var(--ifm-spacing-xl)" }}>
26+
<div
27+
className={
28+
"col flex-horizontally-centered" + " " + styles.col_social_media_desktop
29+
}
30+
>
31+
<SocialMediasQuantStack />
32+
</div>
33+
<div className={"col flex-horizontally-centered"}>
34+
<div className={"container" + " " + styles.menu_container}>
35+
<div style={{ textAlign: "center" }}>
36+
<b>Menu</b> <br />
37+
</div>
38+
<div className="row">
39+
<div className="col flex-horizontally-centered">
40+
<ul>
41+
<li>
42+
<Link href={"/home"}>Home</Link>
43+
</li>
44+
45+
<li>
46+
<Link href={"/projects"}>Projects</Link>
47+
</li>
48+
<li>
49+
<Link href={"/about"}>About us</Link>
50+
</li>
51+
</ul>
52+
</div>
53+
<div className="col flex-horizontally-centered">
54+
<ul>
55+
<li>
56+
<Link href={"/services"}>Services</Link>
57+
</li>
58+
<li>
59+
<Link href={"/careers"}>Careers</Link>
60+
</li>
61+
<li>
62+
<Link href={"/blog"}>Blog</Link>
63+
</li>
64+
</ul>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
70+
<div
71+
className={
72+
"col flex-full-centered" + " " + styles.col_address_desktop
73+
}
74+
>
75+
<div>
76+
<div>
77+
<b>QuantStack office</b> <br />
78+
16, avenue Curti <br />
79+
94100 Saint-Maur-des-Fossés <br />
80+
France
81+
</div>
82+
</div>
83+
</div>
84+
85+
<div className={"col" + " " + styles.col_social_media_and_address_mobile}>
86+
<SocialMediasQuantStack />
87+
88+
<div>
89+
<div>
90+
<b>QuantStack office</b> <br />
91+
16, avenue Curti <br />
92+
94100 Saint-Maur-des-Fossés <br />
93+
France
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
99+
<div className={"row flex-full-centered"}>
100+
<div className={styles.copyright_container}>
101+
Copyright © 2024 · QuantStack website · Built with Docusaurus
102+
</div>
103+
</div>
104+
</div>
105+
);
106+
}

‎src/components/footer/styles.module.css

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.footer_container {
2+
background-color: var(--ifm-color-primary-p1);
3+
padding: var(--ifm-spacing-xl) var(--ifm-spacing-2xl) 0 var(--ifm-spacing-2xl);
4+
}
5+
6+
.copyright_container {
7+
text-align: center;
8+
padding-bottom: var(--ifm-spacing-lg);
9+
}
10+
11+
@media only screen and (max-width: 996px) {
12+
/*Mobile*/
13+
.menu_container {
14+
display: none;
15+
}
16+
17+
.col_social_media_desktop {
18+
display: none;
19+
}
20+
21+
.col_address_desktop {
22+
display: none;
23+
}
24+
}
25+
26+
@media only screen and (min-width: 996px) {
27+
/*Desktop*/
28+
29+
.col_social_media_mobile {
30+
display: none;
31+
}
32+
33+
.col_social_media_and_address_mobile {
34+
display: none;
35+
}
36+
}

‎src/components/home/styles.module.css

+1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
12
@media only screen and (max-width: 996px) {
23
/*Mobile*/
34
.link_to {

‎src/css/custom.css

+7-8
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,11 @@
6969
justify-content: center;
7070
}
7171

72+
.flex-horizontally-centered {
73+
display: flex;
74+
justify-content: center;
75+
}
76+
7277
.horizontally-centered {
7378
justify-content: center;
7479
}
@@ -95,10 +100,6 @@ ul {
95100
}
96101

97102
/***footer*****/
98-
.address {
99-
color: var(--ifm-text-color-footer);
100-
}
101-
102103
.footer__item {
103104
color: var(--ifm-text-color-footer);
104105
}
@@ -148,10 +149,8 @@ ul {
148149

149150
.footer-astronaut {
150151
display: flex;
151-
text-align: left;
152-
margin-right: var(--ifm-spacing-lg);
153-
width: 200px;
154-
height: 200px;
152+
width: 35px;
153+
height: 35px;
155154
padding: 10px;
156155
}
157156

‎src/pages/about.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import Layout from "@theme/Layout";
22
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
33
import {About} from "../components/about";
44
import BrowserOnly from "@docusaurus/BrowserOnly";
5+
import Footer from "../components/footer/Footer";
56

67
export default function AboutPage(): JSX.Element {
78
const { siteConfig } = useDocusaurusContext();
89
return (
910
<Layout>
1011
<BrowserOnly>{() => <About />}</BrowserOnly>
12+
<Footer/>
1113
</Layout>
1214
);
1315
}

‎src/pages/blog.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
22
import Layout from "@theme/Layout";
33
import BlogsComponent from "../components/blog";
44
import blogpostDetails from "@site/src/components/blog/blogpostsDetails.json";
5+
import Footer from "../components/footer/Footer";
56

67

78
export default function BlogPage(): JSX.Element {
89
const { siteConfig } = useDocusaurusContext();
910
return (
1011
<Layout>
1112
<BlogsComponent blogpostsDetails={blogpostDetails} />
13+
<Footer/>
1214
</Layout>
1315
);
1416
}

‎src/pages/careers.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
22
import Layout from '@theme/Layout';
33
import Careers from '../components/careers';
4+
import Footer from "../components/footer/Footer";
45

56

67
export default function CareersPage(): JSX.Element {
78
const { siteConfig } = useDocusaurusContext();
89
return (
910
<Layout>
1011
<Careers />
12+
<Footer/>
1113
</Layout>
1214
);
1315
}

‎src/pages/contact.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
22
import Layout from "@theme/Layout";
33
import Contact from "@site/src/components/contact";
44
import BrowserOnly from "@docusaurus/BrowserOnly";
5+
import Footer from "../components/footer/Footer";
56

67
export default function ContactPage(): JSX.Element {
78
const { siteConfig } = useDocusaurusContext();
89
return (
910
<Layout>
1011
<BrowserOnly>{() => <Contact />}</BrowserOnly>
12+
<Footer/>
1113
</Layout>
1214
);
1315
}

‎src/pages/home.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
22
import Layout from "@theme/Layout";
33
import Home from "../components/home/Home";
44
import BrowserOnly from "@docusaurus/BrowserOnly";
5+
import Footer from "../components/footer/Footer";
56

67
export default function HomePage(): JSX.Element {
78
const { siteConfig } = useDocusaurusContext();
89
return (
910
<Layout>
1011
<main>
1112
<BrowserOnly>{() => <Home />}</BrowserOnly>
13+
<Footer/>
1214
</main>
1315
</Layout>
1416
);

‎src/pages/index.tsx

+3
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
22
import Layout from "@theme/Layout";
33
import Home from "../components/home/Home";
44
import BrowserOnly from "@docusaurus/BrowserOnly";
5+
import Footer from "../components/footer/Footer";
56

67
export default function QSWebsite(): JSX.Element {
78
const { siteConfig } = useDocusaurusContext();
89
return (
910
<Layout>
1011
<BrowserOnly>{() => <Home />}</BrowserOnly>
12+
<Footer/>
1113
</Layout>
1214
);
1315
}
16+

0 commit comments

Comments
 (0)