/* Copyright (c) Uber Technologies, Inc. This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree. */ import * as React from "react"; import { Block } from "baseui/block"; import Head from "next/head"; import { H1 } from "./markdown-elements"; import { themedStyled } from "../pages/_app"; export const Caption = themedStyled("figcaption", ({ $theme }) => ({ color: $theme.colors.contentSecondary, fontFamily: $theme.typography.font100.fontFamily, fontSize: $theme.sizing.scale500, fontWeight: 300, textAlign: "center", padding: "4px 4px 0 0", })); export const BlogImage = ({ full, alt, caption, src, style }) => (
{alt} {caption ? {caption} : null}
); export const Demo = themedStyled("iframe", { borderLeftWidth: 0, borderRightWidth: 0, borderTopWidth: 0, borderBottomWidth: 0, borderTopLeftRadius: "4px", borderTopRightRadius: "4px", borderBottomRightRadius: "4px", borderBottomLeftRadius: "4px", height: "500px", overflow: "hidden", width: "100%", }); const Tagline = themedStyled("span", ({ $theme }) => ({ color: $theme.colors.contentSecondary, fontFamily: $theme.typography.font100.fontFamily, fontSize: $theme.sizing.scale800, fontWeight: 300, })); const AuthorLink = themedStyled("a", ({ $theme }) => ({ color: $theme.colors.contentSecondary, fontFamily: $theme.typography.font100.fontFamily, ":hover": { color: $theme.colors.contentPrimary, }, ":focus": { outline: `3px solid ${$theme.colors.accent}`, textDecoration: "none", outlineOffset: "2px", }, })); const ArticleDate = themedStyled("span", ({ $theme }) => ({ color: $theme.colors.contentSecondary, })); export const Meta = ({ data: { title, tagline, author, authorLink, date, coverImage, coverImageWidth, coverImageHeight, keyWords = [], }, }) => ( {keyWords.map((kw) => ( ))} {/* Best practice to specify these, but will usually work regardless. Ideal dimensions are 1200x630. */} {coverImageWidth ? ( ) : null} {coverImageHeight ? ( ) : null} ({ marginBottom: $theme.sizing.scale1400, }), }, }} >

{title}

{tagline} ({ color: $theme.colors.contentSecondary, fontFamily: $theme.typography.font100.fontFamily, margin: `${$theme.sizing.scale400} 0`, }), }, }} > {author} {" "} - {date} );