Skip to content

Commit 5764aae

Browse files
rstaibrstaib
authored
Website Sub-Menus (#5515)
1 parent 22b0049 commit 5764aae

19 files changed

+798
-219
lines changed

‎website/gatsby-config.js

+2-22
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,13 @@ module.exports = {
66
company: "ChilliCream",
77
siteUrl: `https://chillicream.com`,
88
repositoryUrl: `https://github.com/ChilliCream/hotchocolate`,
9-
topnav: [
10-
{
11-
name: `Platform`,
12-
link: `/platform`,
13-
},
14-
{
15-
name: `Docs`,
16-
link: `/docs/hotchocolate/`,
17-
},
18-
{
19-
name: `Support`,
20-
link: `/support`,
21-
},
22-
{
23-
name: `Blog`,
24-
link: `/blog`,
25-
},
26-
{
27-
name: `Shop`,
28-
link: `https://store.chillicream.com`,
29-
},
30-
],
319
tools: {
3210
bcp: `https://eat.bananacakepop.com`,
3311
github: `https://github.com/ChilliCream/hotchocolate`,
12+
shop: `https://store.chillicream.com`,
3413
slack: `http://slack.chillicream.com/`,
3514
twitter: `https://twitter.com/Chilli_Cream`,
15+
youtube: `https://www.youtube.com/c/ChilliCream`,
3616
},
3717
},
3818
plugins: [

‎website/gatsby-node.js

+42
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,48 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
7878
isPermanent: true,
7979
});
8080

81+
// Banana Cake Pop
82+
createRedirect({
83+
fromPath: "/banana-cake-pop",
84+
toPath: "/products/bananacakepop",
85+
redirectInBrowser: true,
86+
isPermanent: true,
87+
});
88+
createRedirect({
89+
fromPath: "/banana-cake-pop/",
90+
toPath: "/products/bananacakepop",
91+
redirectInBrowser: true,
92+
isPermanent: true,
93+
});
94+
95+
// Products
96+
createRedirect({
97+
fromPath: "/products",
98+
toPath: "/",
99+
redirectInBrowser: true,
100+
isPermanent: true,
101+
});
102+
createRedirect({
103+
fromPath: "/products/",
104+
toPath: "/",
105+
redirectInBrowser: true,
106+
isPermanent: true,
107+
});
108+
109+
// company
110+
createRedirect({
111+
fromPath: "/company",
112+
toPath: "/",
113+
redirectInBrowser: true,
114+
isPermanent: true,
115+
});
116+
createRedirect({
117+
fromPath: "/company/",
118+
toPath: "/",
119+
redirectInBrowser: true,
120+
isPermanent: true,
121+
});
122+
81123
// images
82124
createRedirect({
83125
fromPath: "/img/projects/greendonut-banner.svg",

‎website/src/components/images/workshop-ndc-minnesota.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { graphql, useStaticQuery } from "gatsby";
2+
import { GatsbyImage } from "gatsby-plugin-image";
3+
import React, { FC } from "react";
4+
import { GetWorkshopNdcMinnesotaImageQuery } from "../../../graphql-types";
5+
6+
export const WorkshopNdcMinnesota: FC = () => {
7+
const data = useStaticQuery<GetWorkshopNdcMinnesotaImageQuery>(graphql`
8+
query getWorkshopNdcMinnesotaImage {
9+
file(
10+
relativePath: { eq: "workshops/ndc-minnesota.jpg" }
11+
sourceInstanceName: { eq: "images" }
12+
) {
13+
childImageSharp {
14+
gatsbyImageData(layout: CONSTRAINED, width: 400, quality: 100)
15+
}
16+
}
17+
}
18+
`);
19+
20+
return (
21+
<GatsbyImage
22+
image={data.file?.childImageSharp?.gatsbyImageData}
23+
alt="NDC Minnesota"
24+
/>
25+
);
26+
};

‎website/src/components/layout/footer.tsx

+29-31
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import LogoIconSvg from "../../images/chillicream.svg";
77
import GithubIconSvg from "../../images/github.svg";
88
import SlackIconSvg from "../../images/slack.svg";
99
import TwitterIconSvg from "../../images/twitter.svg";
10+
import YouTubeIconSvg from "../../images/youtube.svg";
1011
import { FONT_FAMILY_HEADING, THEME_COLORS } from "../../shared-style";
1112
import { IconContainer } from "../misc/icon-container";
1213
import { Link } from "../misc/link";
@@ -16,14 +17,12 @@ export const Footer: FC = () => {
1617
query getFooterData {
1718
site {
1819
siteMetadata {
19-
topnav {
20-
name
21-
link
22-
}
2320
tools {
2421
github
22+
shop
2523
slack
2624
twitter
25+
youtube
2726
}
2827
}
2928
}
@@ -41,7 +40,7 @@ export const Footer: FC = () => {
4140
}
4241
}
4342
`);
44-
const { topnav, tools } = data.site!.siteMetadata!;
43+
const { tools } = data.site!.siteMetadata!;
4544
const { products } = data.docNav!;
4645

4746
return (
@@ -72,6 +71,12 @@ export const Footer: FC = () => {
7271
</IconContainer>{" "}
7372
to get in touch with us
7473
</ConnectLink>
74+
<ConnectLink to={tools!.youtube!}>
75+
<IconContainer>
76+
<YouTubeIcon />
77+
</IconContainer>{" "}
78+
to learn new stuff
79+
</ConnectLink>
7580
<ConnectLink to={tools!.twitter!}>
7681
<IconContainer>
7782
<TwitterIcon />
@@ -81,32 +86,32 @@ export const Footer: FC = () => {
8186
</Connect>
8287
</About>
8388
<Links>
84-
<Title>Navigation</Title>
89+
<Title>Products</Title>
8590
<Navigation>
86-
{topnav!.map((item, index) => (
87-
<NavLink key={`topnav-item-${index}`} to={item!.link!}>
88-
{item!.name}
89-
</NavLink>
90-
))}
91+
<NavLink to="/products/bananacakepop">Banana Cake Pop</NavLink>
92+
<NavLink to="/docs/hotchocolate">Hot Chocolate</NavLink>
93+
<NavLink to="/docs/strawberryshake">Strawberry Shake</NavLink>
94+
</Navigation>
95+
<Title>Company</Title>
96+
<Navigation>
97+
<NavLink to="/support">Support</NavLink>
98+
<NavLink to={tools!.shop!}>Shop</NavLink>
9199
</Navigation>
92100
</Links>
93-
<Location>
94-
<Title>Documentation</Title>
101+
<Links>
102+
<Title>Developers</Title>
95103
<Navigation>
96104
{products!.map((product, index) => (
97105
<NavLink
98106
key={`products-item-${index}`}
99-
to={
100-
product!.versions![0]!.path! === ""
101-
? `/docs/${product!.path!}/`
102-
: `/docs/${product!.path!}/${product!.versions![0]!.path!}/`
103-
}
107+
to={`/docs/${product!.path!}/`}
104108
>
105109
{product!.title}
106110
</NavLink>
107111
))}
112+
<NavLink to="/blog">Blog</NavLink>
108113
</Navigation>
109-
</Location>
114+
</Links>
110115
</Section>
111116
<Section>
112117
<Copyright>© {new Date().getFullYear()} ChilliCream</Copyright>
@@ -212,6 +217,11 @@ const TwitterIcon = styled(TwitterIconSvg)`
212217
fill: ${THEME_COLORS.footerText};
213218
`;
214219

220+
const YouTubeIcon = styled(YouTubeIconSvg)`
221+
height: 22px;
222+
fill: ${THEME_COLORS.footerText};
223+
`;
224+
215225
const Links = styled.div`
216226
display: none;
217227
flex: 2 1 auto;
@@ -244,18 +254,6 @@ const NavLink = styled(Link)`
244254
}
245255
`;
246256

247-
const Location = styled.div`
248-
display: none;
249-
flex: 3 1 auto;
250-
flex-direction: column;
251-
padding: 0 20px;
252-
line-height: 1.5em;
253-
254-
@media only screen and (min-width: 768px) {
255-
display: flex;
256-
}
257-
`;
258-
259257
const Title = styled.h3`
260258
margin: 15px 0 9px;
261259
font-size: 1em;

0 commit comments

Comments
 (0)