BCP landing page (ChilliCream#5503)

rstaib · web-flow · commit 1401a1cd9d70 · 2022-10-24T22:35:53.000+02:00
diff --git a/website/.yarn/cache/yaml-npm-2.1.3-654a90032d-9131606232.zip b/website/.yarn/cache/yaml-npm-2.1.3-654a90032d-9131606232.zip
diff --git a/website/package.json b/website/package.json
@@ -66,7 +66,8 @@
     "rxjs": "^7.1.0",
     "semver": "^7.3.8",
     "simple-git": "^2.39.0",
-    "styled-components": "^5.3.0"
+    "styled-components": "^5.3.0",
+    "yaml": "^2.1.3"
   },
   "devDependencies": {
     "@babel/core": "^7.14.3",
diff --git a/website/src/components/articles/article-sections.tsx b/website/src/components/articles/article-sections.tsx
@@ -142,7 +142,7 @@ const TocListItem = styled.li<TocListItemProps>`
     active &&
     css`
       > ${TocLink} {
-        font-weight: bold;
+        font-weight: 600;
       }
     `}
 `;
diff --git a/website/src/components/doc-page/doc-page-navigation.tsx b/website/src/components/doc-page/doc-page-navigation.tsx
@@ -563,7 +563,7 @@ const NavigationItem = styled.li<{ active: boolean }>`
     active &&
     css`
       > ${NavigationLink}, > ${NavigationGroup} > ${NavigationGroupToggle} {
-        font-weight: bold;
+        font-weight: 600;
       }
     `}
 `;
diff --git a/website/src/components/doc-page/doc-page.tsx b/website/src/components/doc-page/doc-page.tsx
@@ -315,6 +315,7 @@ const ResponsiveMenu = styled.div`
 
   &.scrolled {
     top: 60px;
+    border-radius: 0;
   }
 
   ${IsPhablet(css`
@@ -382,7 +383,7 @@ const DocumentationVersionWarning = styled.div`
 
   > a {
     color: white !important;
-    font-weight: bold;
+    font-weight: 600;
     text-decoration: underline;
   }
 
diff --git a/website/src/components/layout/footer.tsx b/website/src/components/layout/footer.tsx
@@ -259,7 +259,7 @@ const Location = styled.div`
 const Title = styled.h3`
   margin: 15px 0 9px;
   font-size: 1em;
-  font-weight: bold;
+  font-weight: 600;
   color: ${THEME_COLORS.footerText};
 `;
 
diff --git a/website/src/components/layout/header.tsx b/website/src/components/layout/header.tsx
@@ -329,9 +329,9 @@ const NavLink = styled(Link)`
   padding: 10px 15px;
   font-family: ${FONT_FAMILY_HEADING};
   font-size: 0.833em;
+  font-weight: 500;
   color: ${THEME_COLORS.textContrast};
   text-decoration: none;
-  text-transform: uppercase;
   transition: background-color 0.2s ease-in-out;
 
   &.active,
@@ -378,7 +378,7 @@ const LaunchLink = styled(Link)`
   font-family: ${FONT_FAMILY_HEADING};
   font-size: 0.833em;
   text-decoration: none;
-  text-transform: uppercase;
+  font-weight: 500;
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 
   :hover {
diff --git a/website/src/components/mdx/code-block.tsx b/website/src/components/mdx/code-block.tsx
@@ -127,7 +127,7 @@ const IndicatorContent = styled.div`
   border-radius: 0px 0px var(--border-radius) var(--border-radius);
   padding: 2px 8px;
   font-size: 0.8em;
-  font-weight: bold;
+  font-weight: 600;
   letter-spacing: 0.075em;
   line-height: 1em;
   text-transform: uppercase;
diff --git a/website/src/components/mdx/copy.tsx b/website/src/components/mdx/copy.tsx
@@ -59,7 +59,7 @@ const CopySuccessToast: FC = () => {
 const ToastText = styled.div`
   font-size: 1.25rem;
   font-family: ${FONT_FAMILY};
-  font-weight: bold;
+  font-weight: 600;
   color: ${THEME_COLORS.textContrast};
 `;
 
diff --git a/website/src/components/mdx/tabs/tab.tsx b/website/src/components/mdx/tabs/tab.tsx
@@ -39,7 +39,7 @@ const TabButton = styled.button`
 
   &.active {
     color: ${THEME_COLORS.heading};
-    font-weight: 700;
+    font-weight: 600;
   }
 
   @media only screen and (min-width: 860px) {
diff --git a/website/src/components/mdx/warning.tsx b/website/src/components/mdx/warning.tsx
@@ -37,8 +37,7 @@ const Heading = styled.div`
 
   > span {
     margin-bottom: 3px;
-
-    font-weight: bold;
+    font-weight: 600;
     line-height: normal;
   }
 
@@ -64,7 +63,7 @@ const Container = styled.div`
 
   a {
     color: white !important;
-    font-weight: bold;
+    font-weight: 600;
     text-decoration: underline;
   }
 
diff --git a/website/src/components/misc/global-style.tsx b/website/src/components/misc/global-style.tsx
@@ -81,7 +81,7 @@ export const GlobalStyle = createGlobalStyle`
   h6 {
     margin-bottom: 10px;
     font-family: ${FONT_FAMILY_HEADING};
-    font-weight: bold;
+    font-weight: 500;
     line-height: 1.250em;
     text-rendering: optimizeLegibility;
     color: ${THEME_COLORS.heading};
@@ -128,7 +128,7 @@ export const GlobalStyle = createGlobalStyle`
   }
 
   strong {
-    font-weight: bold;
+    font-weight: 600;
   }
 
   blockquote {
@@ -203,7 +203,7 @@ export const GlobalStyle = createGlobalStyle`
   th {
     border-top: 1px solid #aaa;
     border-bottom: 2px solid #aaa;
-    font-weight: bold;
+    font-weight: 600;
   }
 
   th:first-child,
@@ -244,4 +244,14 @@ export const GlobalStyle = createGlobalStyle`
   h6:hover a.anchor {
     visibility: visible;
   }
+
+  .sr-only:not(:focus):not(:active) {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
 `;
diff --git a/website/src/components/misc/page-elements.tsx b/website/src/components/misc/page-elements.tsx
@@ -25,7 +25,6 @@ export const Title = styled.h3`
   font-size: 1em;
   text-align: center;
   color: ${THEME_COLORS.quaternary};
-  text-transform: uppercase;
 `;
 
 export const Hero = styled.h1`
diff --git a/website/src/components/misc/support-card.tsx b/website/src/components/misc/support-card.tsx
@@ -46,7 +46,6 @@ const ContactUs = styled.a`
   padding: 0.5rem 0;
   font-size: 0.875rem;
   line-height: 1.25rem;
-
   font-weight: 600;
   border: 1px solid transparent;
   border-radius: 0.375rem;
diff --git a/website/src/components/widgets/index.ts b/website/src/components/widgets/index.ts
@@ -1,3 +1,4 @@
 export * from "./blog-articles";
 export * from "./companies-section";
+export * from "./most-recent-bcp-blog-posts-section";
 export * from "./most-recent-blog-posts-section";
diff --git a/website/src/components/widgets/most-recent-bcp-blog-posts-section.tsx b/website/src/components/widgets/most-recent-bcp-blog-posts-section.tsx
@@ -0,0 +1,131 @@
+import { graphql, useStaticQuery } from "gatsby";
+import { GatsbyImage } from "gatsby-plugin-image";
+import React, { FC } from "react";
+import styled from "styled-components";
+import { GetMostRecentBcpBlogPostsDataQuery } from "../../../graphql-types";
+import { THEME_COLORS } from "../../shared-style";
+import { Link } from "../misc/link";
+import {
+  ContentContainer,
+  Section,
+  SectionRow,
+  SectionTitle,
+} from "../misc/marketing-elements";
+
+export const MostRecentBcpBlogPostsSection: FC = () => {
+  const data = useStaticQuery<GetMostRecentBcpBlogPostsDataQuery>(graphql`
+    query getMostRecentBcpBlogPostsData {
+      allMdx(
+        limit: 3
+        filter: {
+          frontmatter: { path: { glob: "/blog/**/*banana-cake-pop*" } }
+        }
+        sort: { fields: [frontmatter___date], order: DESC }
+      ) {
+        edges {
+          node {
+            id
+            fields {
+              readingTime {
+                text
+              }
+            }
+            frontmatter {
+              featuredImage {
+                childImageSharp {
+                  gatsbyImageData(layout: CONSTRAINED, width: 800, quality: 100)
+                }
+              }
+              path
+              title
+              date(formatString: "MMMM DD, YYYY")
+            }
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <Section>
+      <SectionRow>
+        <ContentContainer noImage>
+          <SectionTitle centerAlways>From our Blog</SectionTitle>
+          <Articles>
+            {data.allMdx.edges.map(({ node }) => {
+              const featuredImage =
+                node?.frontmatter!.featuredImage?.childImageSharp
+                  ?.gatsbyImageData;
+
+              return (
+                <Article key={`article-${node.id}`}>
+                  <Link to={node.frontmatter!.path!}>
+                    {featuredImage && (
+                      <GatsbyImage
+                        image={featuredImage}
+                        alt={node.frontmatter!.title}
+                      />
+                    )}
+                    <ArticleMetadata>
+                      {node.frontmatter!.date!} ・{" "}
+                      {node.fields!.readingTime!.text!}
+                    </ArticleMetadata>
+                    <ArticleTitle>{node.frontmatter!.title}</ArticleTitle>
+                  </Link>
+                </Article>
+              );
+            })}
+          </Articles>
+        </ContentContainer>
+      </SectionRow>
+    </Section>
+  );
+};
+
+const Articles = styled.ul`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: space-around;
+  margin: 0 0 20px;
+  list-style-type: none;
+
+  @media only screen and (min-width: 860px) {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+`;
+
+const Article = styled.li`
+  display: flex;
+  margin: 20px 0 0;
+  width: 100%;
+  border-radius: var(--border-radius);
+  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
+
+  > a {
+    flex: 1 1 auto;
+  }
+
+  > a > .gatsby-image-wrapper {
+    border-radius: var(--border-radius) var(--border-radius) 0 0;
+  }
+
+  @media only screen and (min-width: 860px) {
+    width: 30%;
+  }
+`;
+
+const ArticleMetadata = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 15px 20px 7px;
+  font-size: 0.778em;
+  color: ${THEME_COLORS.text};
+`;
+
+const ArticleTitle = styled.h1`
+  margin: 0 20px 15px;
+  font-size: 1em;
+`;
diff --git a/website/src/images/banana-cake-pop.png b/website/src/images/banana-cake-pop.png
diff --git a/website/src/images/chillicream-favicon.png b/website/src/images/chillicream-favicon.png
diff --git a/website/src/images/circle-down.svg b/website/src/images/circle-down.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <path
+    d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm-32-316v116h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5h-67V140c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12z" />
+</svg>
diff --git a/website/src/pages/banana-cake-pop.tsx b/website/src/pages/banana-cake-pop.tsx
diff --git a/website/static/resources/chillicream-black.png b/website/static/resources/chillicream-black.png
diff --git a/website/static/resources/chillicream-blue.png b/website/static/resources/chillicream-blue.png
diff --git a/website/static/resources/chillicream-white.png b/website/static/resources/chillicream-white.png
diff --git a/website/yarn.lock b/website/yarn.lock

Original file line number	Diff line number	Diff line change
@@ -142,7 +142,7 @@ const TocListItem = styled.li<TocListItemProps>`
`142`	`142`	`active &&`
`143`	`143`	css`
`144`	`144`	`> ${TocLink} {`
`145`		`- font-weight: bold;`
	`145`	`+ font-weight: 600;`
`146`	`146`	`}`
`147`	`147`	`}
`148`	`148`	`;
Original file line number	Diff line number	Diff line change
@@ -563,7 +563,7 @@ const NavigationItem = styled.li<{ active: boolean }>`
`563`	`563`	`active &&`
`564`	`564`	css`
`565`	`565`	`> ${NavigationLink}, > ${NavigationGroup} > ${NavigationGroupToggle} {`
`566`		`- font-weight: bold;`
	`566`	`+ font-weight: 600;`
`567`	`567`	`}`
`568`	`568`	`}
`569`	`569`	`;
Original file line number	Diff line number	Diff line change
@@ -315,6 +315,7 @@ const ResponsiveMenu = styled.div`
`315`	`315`
`316`	`316`	`&.scrolled {`
`317`	`317`	`top: 60px;`
	`318`	`+ border-radius: 0;`
`318`	`319`	`}`
`319`	`320`
`320`	`321`	${IsPhablet(css`
@@ -382,7 +383,7 @@ const DocumentationVersionWarning = styled.div`
`382`	`383`
`383`	`384`	`> a {`
`384`	`385`	`color: white !important;`
`385`		`- font-weight: bold;`
	`386`	`+ font-weight: 600;`
`386`	`387`	`text-decoration: underline;`
`387`	`388`	`}`
`388`	`389`
Original file line number	Diff line number	Diff line change
@@ -39,7 +39,7 @@ const TabButton = styled.button`
`39`	`39`
`40`	`40`	`&.active {`
`41`	`41`	`color: ${THEME_COLORS.heading};`
`42`		`- font-weight: 700;`
	`42`	`+ font-weight: 600;`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`@media only screen and (min-width: 860px) {`