Skip to content

Commit 7796344

Browse files
asmitbmjaimergp
asmitbm
and
jaimergp
authored
feat: implement conda-forge website redesign (#9)
* feat: implement fonts and header Signed-off-by: Asmit Malakannawar <[email protected]> * accept suggested changes Signed-off-by: Asmit Malakannawar <[email protected]> * accept suggested changes Signed-off-by: Asmit Malakannawar <[email protected]> * feat: update custom.css file with final changes * feat: implement final header * feat: add about section * feat: add contributing section * feat: add supporters section * feat: update navbar to match dashboard design * feat: add styleguide * fix: add suggested changes * Update docusaurus.config.js --------- Signed-off-by: Asmit Malakannawar <[email protected]> Co-authored-by: jaimergp <[email protected]>
1 parent 944b295 commit 7796344

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+21360
-90
lines changed

‎docusaurus.config.js

Lines changed: 47 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,7 @@ const config = {
1616
baseUrl: "/",
1717
onBrokenLinks: "throw",
1818
onBrokenMarkdownLinks: "throw",
19-
// Temporarily using Twitter's emoji for construction
20-
// Copyright 2020 Twitter, Inc and other contributors, CC-BY 4.0
21-
favicon: "img/construction.png",
19+
favicon: "img/favicon.ico",
2220
trailingSlash: true,
2321

2422
// GitHub pages deployment config.
@@ -34,6 +32,14 @@ const config = {
3432
locales: ["en"],
3533
},
3634

35+
stylesheets: [
36+
//Add Font Awesome stylesheets
37+
"/fonts/font-awesome/fontawesome.css",
38+
"/fonts/font-awesome/solid.css",
39+
"/fonts/font-awesome/regular.css",
40+
"/fonts/font-awesome/brands.css",
41+
],
42+
3743
// Mermaid configuration
3844
markdown: {
3945
mermaid: true,
@@ -87,18 +93,37 @@ const config = {
8793
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
8894
({
8995
navbar: {
90-
title: "cf-infra-docs (WIP)",
9196
logo: {
92-
alt: "Under construction",
93-
src: "img/construction.png",
97+
alt: "conda-forge anvil logo without text",
98+
src: "img/logo.png",
9499
},
95100
items: [
101+
{
102+
href: "https://conda-forge.org/status",
103+
label: "Status",
104+
position: "left",
105+
},
106+
{
107+
href: "https://conda-forge.org/feedstock-outputs",
108+
label: "Packages",
109+
position: "left",
110+
},
111+
{
112+
to: "/news",
113+
label: "News",
114+
position: "left",
115+
},
96116
{
97117
type: "doc",
98118
docId: "index",
99119
position: "left",
100120
label: "Docs",
101121
},
122+
{
123+
to: "/blog",
124+
label: "Blog",
125+
position: "left",
126+
},
102127
{
103128
type: "doc",
104129
docsPluginId: "community",
@@ -107,19 +132,23 @@ const config = {
107132
label: "Community",
108133
},
109134
{
110-
to: "/blog",
111-
label: "Blog",
112-
position: "left",
135+
href: "https://opencollective.com/conda-forge",
136+
label: "Donate",
137+
position: "right",
113138
},
114139
{
115-
to: "/news",
116-
label: "News",
117-
position: "left",
140+
to: "https://github.com/conda-forge",
141+
title: "GitHub",
142+
position: "right",
143+
target: "_blank",
144+
className: "fab fa-lg fa-github",
118145
},
119146
{
120-
href: "https://conda-forge.org/status",
121-
label: "Status",
147+
to: "https://twitter.com/condaforge",
148+
title: "Twitter",
122149
position: "right",
150+
target: "_blank",
151+
className: "fab fa-lg fa-twitter",
123152
},
124153
],
125154
},
@@ -192,6 +221,10 @@ const config = {
192221
label: "Dashboard",
193222
to: "/dashboard",
194223
},
224+
{
225+
label: "Style guide",
226+
to: "/style-guide",
227+
},
195228
{
196229
label: "GitHub",
197230
href: "https://github.com/conda-forge",

‎src/components/About/index.jsx

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import React, { useEffect, useState } from "react";
2+
import Link from "@docusaurus/Link";
3+
import styles from "./styles.module.css";
4+
5+
export default function Stats() {
6+
const [stats, setStats] = useState(null);
7+
8+
useEffect(() => {
9+
const fetchData = async () => {
10+
try {
11+
const response = await fetch(
12+
"https://raw.githubusercontent.com/conda-forge/by-the-numbers/main/data/live_counts.json"
13+
);
14+
const data = await response.json();
15+
setStats(data);
16+
} catch (error) {
17+
console.error("Error fetching data:", error);
18+
}
19+
};
20+
21+
fetchData();
22+
}, []);
23+
24+
const stats1 = [
25+
{
26+
number: stats ? `${(stats.downloads.month / 1e6).toFixed(0)}M` : "",
27+
content: "Monthly downloads",
28+
},
29+
{
30+
number: stats ? `${(stats.downloads.all / 1e9).toFixed(1)}B` : "",
31+
content: "Overall Downloads",
32+
},
33+
{
34+
number: stats ? `${(stats.n_repos / 1e3).toFixed(1)}K` : "",
35+
content: "Feedstocks",
36+
},
37+
{
38+
number: stats ? `${(stats.n_packages / 1e3).toFixed(1)}K` : "",
39+
content: "Packages",
40+
},
41+
];
42+
43+
const stats2 = [
44+
{
45+
number: stats ? stats.n_members_core : "",
46+
content: "Core Developers",
47+
},
48+
{
49+
number: stats ? `${(stats.n_artifacts / 1e6).toFixed(1)}M` : "",
50+
content: "Artifacts",
51+
},
52+
{
53+
number: stats ? `${(stats.n_members / 1e3).toFixed(1)}K` : "",
54+
content: "Feedstock Maintainers",
55+
},
56+
{
57+
number: stats
58+
? `${((stats.n_prs + stats.n_issues) / 1e3).toFixed(1)}K`
59+
: "",
60+
content: "Issues + PRs",
61+
},
62+
];
63+
64+
return (
65+
<div className={[styles.about, styles.section_padding].join(" ")}>
66+
<div className={styles.about_description}>
67+
<h1>About conda-forge</h1>
68+
<p>
69+
<Link to="https://github.com/conda-forge">conda-forge</Link>{" "}
70+
is a GitHub organization containing repositories of conda
71+
recipes.
72+
</p>
73+
</div>
74+
<div className={styles.stats_container}>
75+
<div className={styles.stats1_card}>
76+
{stats1.map(({ number, content }, index) => (
77+
<div className={styles.card} key={index}>
78+
<h1 className="gradient_text">{number}</h1>
79+
<h3>{content}</h3>
80+
</div>
81+
))}
82+
</div>
83+
<div className={styles.stats2_card}>
84+
{stats2.map(({ number, content }, index) => (
85+
<div className={styles.card} key={index}>
86+
<h1 className="gradient_text">{number}</h1>
87+
<h3>{content}</h3>
88+
</div>
89+
))}
90+
</div>
91+
</div>
92+
<div className={styles.about_video_description}>
93+
<p>
94+
Learn more about conda-forge by reading our{" "}
95+
<Link to="/docs">docs</Link> or watching the following
96+
episode of{" "}
97+
<Link to="https://www.quansight.com/open-source-directions">
98+
Open Source Directions
99+
</Link>
100+
.
101+
</p>
102+
</div>
103+
<div className={styles.conda_forge_video}>
104+
<iframe
105+
src="https://www.youtube.com/embed/EWh-BtdYE7M"
106+
title="Episode 23: conda-forge - Open Source Directions hosted By Quansight"
107+
frameborder="0"
108+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
109+
allowfullscreen
110+
></iframe>
111+
</div>
112+
</div>
113+
);
114+
}

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

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
.about {
2+
display: flex;
3+
flex-wrap: wrap;
4+
justify-content: center;
5+
}
6+
7+
.section_padding {
8+
padding: 1rem 6rem;
9+
}
10+
11+
.about_description,
12+
.about_video_description {
13+
display: flex;
14+
flex-direction: column;
15+
justify-content: center;
16+
align-items: center;
17+
text-align: center;
18+
width: 100%;
19+
}
20+
21+
.about_description {
22+
margin-bottom: 1rem;
23+
}
24+
25+
.about_description h1 {
26+
font-weight: 700;
27+
font-size: 32px;
28+
line-height: 30px;
29+
}
30+
31+
.about_description,
32+
.about_video_description p {
33+
font-size: 18px;
34+
font-weight: 500;
35+
text-align: justify;
36+
padding: 10px;
37+
}
38+
39+
.stats_container {
40+
display: flex;
41+
flex-direction: column;
42+
width: 90%;
43+
margin-bottom: 2rem;
44+
}
45+
46+
.stats1_card,
47+
.stats2_card {
48+
display: grid;
49+
grid-template-columns: repeat(4, auto);
50+
}
51+
52+
.card {
53+
background: var(--theme-card);
54+
border-radius: 15px;
55+
display: flex;
56+
flex-direction: column;
57+
align-items: center;
58+
justify-content: center;
59+
text-align: center;
60+
padding: 20px 35px 20px 35px;
61+
margin: 5px;
62+
transition: all 800ms cubic-bezier(0.19, 1, 0.22, 1);
63+
}
64+
65+
.card:hover {
66+
transform: scale(0.9);
67+
}
68+
69+
.card h1,
70+
h3 {
71+
margin: 0;
72+
}
73+
74+
.card h3 {
75+
font-weight: 600;
76+
margin-top: 5px;
77+
}
78+
79+
.conda_forge_video {
80+
flex: 1;
81+
display: flex;
82+
justify-content: center;
83+
align-items: center;
84+
}
85+
86+
.conda_forge_video iframe {
87+
aspect-ratio: 16 / 9;
88+
width: 60%;
89+
height: 90%;
90+
padding: 10px;
91+
}
92+
93+
@media screen and (max-width: 1050px) {
94+
.about_description {
95+
margin-bottom: 1rem;
96+
}
97+
98+
.stats1_card,
99+
.stats2_card {
100+
grid-template-columns: repeat(2, 1fr);
101+
}
102+
103+
.conda_forge_video iframe {
104+
min-height: 300px;
105+
}
106+
}
107+
108+
@media screen and (max-width: 650px) {
109+
.about_description {
110+
padding: 1rem;
111+
}
112+
113+
.about_description h1 {
114+
font-size: 28px;
115+
line-height: 26px;
116+
}
117+
118+
.stats1_card,
119+
.stats2_card {
120+
grid-template-columns: repeat(1, 1fr);
121+
}
122+
123+
.conda_forge_video iframe {
124+
min-height: 250px;
125+
}
126+
}
127+
128+
@media screen and (max-width: 490px) {
129+
.section_padding {
130+
padding: 1rem;
131+
}
132+
133+
.about_description h1 {
134+
font-size: 24px;
135+
line-height: 22px;
136+
}
137+
138+
.about_description p {
139+
font-size: 16px;
140+
}
141+
142+
.conda_forge_video iframe {
143+
min-height: 200px;
144+
min-width: 300px;
145+
}
146+
}

0 commit comments

Comments
 (0)