Skip to content

Commit

Permalink
created 2 new widgets
Browse files Browse the repository at this point in the history
  • Loading branch information
@rstaib
rstaib committed Oct 23, 2022
1 parent 5d344c6 commit c31d3c2
Show file tree
Hide file tree
Showing 8 changed files with 374 additions and 333 deletions.
2 changes: 1 addition & 1 deletion website/src/components/misc/seo.tsx
View file
Expand Up @@ -61,7 +61,7 @@ export const SEO: FC<SEOProps> = ({
lang,
}}
title={title}
titleTemplate={`%s | ${site.siteMetadata.title}`}
titleTemplate={`%s - ${site.siteMetadata.title}`}
meta={[
{
name: `description`,
Expand Down
232 changes: 232 additions & 0 deletions website/src/components/widgets/companies-section.tsx
View file
@@ -0,0 +1,232 @@
import React, { FC } from "react";
import styled from "styled-components";
import { THEME_COLORS } from "../../shared-style";
import { Link } from "../misc/link";
import {
ContentContainer,
Section,
SectionRow,
SectionTitle,
} from "../misc/marketing-elements";
// Logos
import AdditivLogoSvg from "../../images/companies/additiv.svg";
import AeiLogoSvg from "../../images/companies/aei.svg";
import AtminaLogoSvg from "../../images/companies/atmina.svg";
import AutoguruLogoSvg from "../../images/companies/autoguru.svg";
import BdnaLogoSvg from "../../images/companies/bdna.svg";
import BeyableLogoSvg from "../../images/companies/beyable.svg";
import BiqhLogoSvg from "../../images/companies/biqh.svg";
import CarmmunityLogoSvg from "../../images/companies/carmmunity.svg";
import CompassLogoSvg from "../../images/companies/compass.svg";
import E2mLogoSvg from "../../images/companies/e2m.svg";
import ExlrtLogoSvg from "../../images/companies/exlrt.svg";
import EzeepLogoSvg from "../../images/companies/ezeep.svg";
import GiaLogoSvg from "../../images/companies/gia.svg";
import HiloLogoSvg from "../../images/companies/hilo.svg";
import IncloudLogoSvg from "../../images/companies/incloud.svg";
import InfoslipsLogoSvg from "../../images/companies/infoslips.svg";
import MotiviewLogoSvg from "../../images/companies/motiview.svg";
import OrderinLogoSvg from "../../images/companies/orderin.svg";
import PoweredSoftLogoSvg from "../../images/companies/powered-soft.svg";
import PushpayLogoSvg from "../../images/companies/pushpay.svg";
import Seven2OneLogoSvg from "../../images/companies/seven-2-one.svg";
import SolyticLogoSvg from "../../images/companies/solytic.svg";
import SonikaLogoSvg from "../../images/companies/sonika.svg";
import SpeedwayMotorsLogoSvg from "../../images/companies/speedway-motors.svg";
import SplashbackLogoSvg from "../../images/companies/splashback.svg";
import SweetGeeksLogoSvg from "../../images/companies/sweetgeeks.svg";
import SwissLifeLogoSvg from "../../images/companies/swiss-life.svg";
import SytadelleLogoSvg from "../../images/companies/sytadelle.svg";
import TravelSoftLogoSvg from "../../images/companies/travel-soft.svg";
import XMLogoSvg from "../../images/companies/xm.svg";
import ZioskLogoSvg from "../../images/companies/ziosk.svg";

export const CompaniesSection: FC = () => (
<Section>
<SectionRow>
<ContentContainer noImage>
<SectionTitle centerAlways>Companies who trust us</SectionTitle>
<Logos>
<Logo width={140}>
<Link to="https://additiv.com">
<AdditivLogoSvg />
</Link>
</Logo>
<Logo width={160}>
<Link to="https://aeieng.com">
<AeiLogoSvg />
</Link>
</Logo>
<Logo width={100}>
<Link to="https://atmina.de">
<AtminaLogoSvg />
</Link>
</Logo>
<Logo width={180}>
<Link to="https://www.autoguru.com.au">
<AutoguruLogoSvg />
</Link>
</Logo>
<Logo width={150}>
<Link to="https://bdna.com.au">
<BdnaLogoSvg />
</Link>
</Logo>
<Logo width={150}>
<Link to="https://www.beyable.com">
<BeyableLogoSvg />
</Link>
</Logo>
<Logo width={100}>
<Link to="https://www.biqh.com">
<BiqhLogoSvg />
</Link>
</Logo>
<Logo width={180}>
<Link to="https://carmmunity.io">
<CarmmunityLogoSvg />
</Link>
</Logo>
<Logo width={180}>
<Link to="https://www.compass.education">
<CompassLogoSvg />
</Link>
</Logo>
<Logo width={90}>
<Link to="https://www.e2m.energy">
<E2mLogoSvg />
</Link>
</Logo>
<Logo width={130}>
<Link to="https://www.exlrt.com">
<ExlrtLogoSvg />
</Link>
</Logo>
<Logo width={100}>
<Link to="https://www.ezeep.com">
<EzeepLogoSvg />
</Link>
</Logo>
<Logo width={120}>
<Link to="https://gia.ch">
<GiaLogoSvg />
</Link>
</Logo>
<Logo width={70}>
<Link to="https://www.hiloenergie.com">
<HiloLogoSvg />
</Link>
</Logo>
<Logo width={200}>
<Link to="https://www.incloud.de">
<IncloudLogoSvg />
</Link>
</Logo>
<Logo width={130}>
<Link to="https://www.infoslips.com">
<InfoslipsLogoSvg />
</Link>
</Logo>
<Logo width={160}>
<Link to="https://motitech.co.uk">
<MotiviewLogoSvg />
</Link>
</Logo>
<Logo width={160}>
<Link to="https://orderin.co.za">
<OrderinLogoSvg />
</Link>
</Logo>
<Logo width={110}>
<Link to="https://poweredsoft.com">
<PoweredSoftLogoSvg />
</Link>
</Logo>
<Logo width={180}>
<Link to="https://pushpay.com">
<PushpayLogoSvg />
</Link>
</Logo>
<Logo width={120}>
<Link to="https://www.seven2one.de">
<Seven2OneLogoSvg />
</Link>
</Logo>
<Logo width={150}>
<Link to="https://www.solytic.com">
<SolyticLogoSvg />
</Link>
</Logo>
<Logo width={130}>
<Link to="https://sonika.se">
<SonikaLogoSvg />
</Link>
</Logo>
<Logo width={120}>
<Link to="https://www.speedwaymotors.com">
<SpeedwayMotorsLogoSvg />
</Link>
</Logo>
<Logo width={180}>
<Link to="https://splashback.io">
<SplashbackLogoSvg />
</Link>
</Logo>
<Logo width={120}>
<Link to="https://sweetgeeks.dk">
<SweetGeeksLogoSvg />
</Link>
</Logo>
<Logo width={110}>
<Link to="https://www.swisslife.ch">
<SwissLifeLogoSvg />
</Link>
</Logo>
<Logo width={160}>
<Link to="https://www.sytadelle.fr">
<SytadelleLogoSvg />
</Link>
</Logo>
<Logo width={180}>
<Link to="https://travel-soft.com">
<TravelSoftLogoSvg />
</Link>
</Logo>
<Logo width={120}>
<Link to="https://xm.com">
<XMLogoSvg />
</Link>
</Logo>
<Logo width={120}>
<Link to="https://www.ziosk.com">
<ZioskLogoSvg />
</Link>
</Logo>
</Logos>
</ContentContainer>
</SectionRow>
</Section>
);

const Logos = styled.div`
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
`;

const Logo = styled.div<{ width?: number }>`
flex: 0 0 auto;
margin: 30px;
width: ${({ width }) => width || 160}px;
> a > svg {
fill: ${THEME_COLORS.text};
transition: fill 0.2s ease-in-out;
&:hover {
fill: ${THEME_COLORS.heading};
}
}
`;
3 changes: 3 additions & 0 deletions website/src/components/widgets/index.ts
View file
@@ -0,0 +1,3 @@
export * from "./blog-articles";
export * from "./companies-section";
export * from "./most-recent-blog-posts-section";
129 changes: 129 additions & 0 deletions website/src/components/widgets/most-recent-blog-posts-section.tsx
View file
@@ -0,0 +1,129 @@
import { graphql, useStaticQuery } from "gatsby";
import { GatsbyImage } from "gatsby-plugin-image";
import React, { FC } from "react";
import styled from "styled-components";
import { GetMostRecentBlogPostsDataQuery } 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 MostRecentBlogPostsSection: FC = () => {
const data = useStaticQuery<GetMostRecentBlogPostsDataQuery>(graphql`
query getMostRecentBlogPostsData {
allMdx(
limit: 3
filter: { frontmatter: { path: { glob: "/blog/**/*" } } }
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;
`;

0 comments on commit c31d3c2

Please sign in to comment.