Some webiste polish
This commit is contained in:
Pedro Piñera
commit
1ab3f49305
|
|
@ -12,6 +12,7 @@ module.exports = {
|
|||
releasesUrl: 'https://github.com/tuist/tuist/releases',
|
||||
documentationUrl: 'https://docs.tuist.io/',
|
||||
slackUrl: 'http://slack.tuist.io/',
|
||||
twitterUrl: 'http://twitter.com/tuistio',
|
||||
editUrl: 'https://github.com/tuist/tuist/edit/master/website/markdown',
|
||||
contributeUrl: 'https://docs.tuist.io/contribution-1-getting-started',
|
||||
firstDocumentationPagePath: '/docs/usage/getting-started/',
|
||||
|
|
|
|||
|
|
@ -1,17 +1,32 @@
|
|||
/** @jsx jsx */
|
||||
import { jsx, Styled } from 'theme-ui'
|
||||
import { withPrefix, useStaticQuery, graphql, Link } from 'gatsby'
|
||||
import Margin from './margin'
|
||||
import { jsx, Styled, useThemeUI } from 'theme-ui'
|
||||
import { useStaticQuery, graphql, Link } from 'gatsby'
|
||||
import {
|
||||
faDiscourse,
|
||||
faGithub,
|
||||
faTwitter,
|
||||
} from '@fortawesome/free-brands-svg-icons'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
|
||||
export default () => {
|
||||
const { theme } = useThemeUI()
|
||||
|
||||
const {
|
||||
site: {
|
||||
siteMetadata: { githubUrl, slackUrl, releasesUrl },
|
||||
siteMetadata: {
|
||||
githubUrl,
|
||||
slackUrl,
|
||||
releasesUrl,
|
||||
discourseUrl,
|
||||
twitterUrl,
|
||||
},
|
||||
},
|
||||
} = useStaticQuery(graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
twitterUrl
|
||||
discourseUrl
|
||||
githubUrl
|
||||
slackUrl
|
||||
releasesUrl
|
||||
|
|
@ -19,148 +34,116 @@ export default () => {
|
|||
}
|
||||
}
|
||||
`)
|
||||
const copyrightMessage =
|
||||
'Tuist © Copyright 2019. All rights reserved. Crafted with ♥ by Pedro Piñera & the contributors.'
|
||||
const linkStyle = {
|
||||
textDecoration: 'none',
|
||||
fontSize: 2,
|
||||
color: 'primary',
|
||||
"&:hover": {
|
||||
color: 'secondary'
|
||||
}
|
||||
}
|
||||
return (
|
||||
<footer sx={{ py: 3, bg: 'muted', flex: 1 }}>
|
||||
<Margin>
|
||||
<div
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: 'column',
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
flexDirection: ['column', 'row'],
|
||||
flex: 1,
|
||||
alignSelf: 'stretch',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
<footer>
|
||||
<div sx={{ bg: 'background' }}>
|
||||
<div className="max-w-screen-xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
|
||||
<nav className="-mx-5 -my-2 flex flex-wrap justify-center">
|
||||
<div className="px-5 py-2">
|
||||
<Link
|
||||
to="/blog"
|
||||
className="text-base leading-6"
|
||||
sx={{ color: 'gray', ':hover': { color: 'primary' } }}
|
||||
>
|
||||
<img
|
||||
src={withPrefix('logo.svg')}
|
||||
sx={{ height: 30, width: 30 }}
|
||||
alt="Tuist's logotype"
|
||||
/>
|
||||
<Styled.h2 sx={{ color: 'text', ml: 2, my: 0 }}>
|
||||
Tuist
|
||||
</Styled.h2>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
sx={{
|
||||
mt: [3, 0],
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Styled.h2 sx={{ color: 'text', mb: 9, mt: 0 }}>
|
||||
Documentation
|
||||
</Styled.h2>
|
||||
<Link to="/docs/usage/getting-started/" sx={linkStyle}>
|
||||
Getting started
|
||||
</Link>
|
||||
<Link to="/docs/usage/projectswift/" sx={linkStyle}>
|
||||
Manifest specification
|
||||
</Link>
|
||||
<Link to="/docs/usage/dependencies/" sx={linkStyle}>
|
||||
Dependencies
|
||||
</Link>
|
||||
<Link to="/docs/contribution/tuist/" sx={linkStyle}>
|
||||
Contributors
|
||||
</Link>
|
||||
<div
|
||||
sx={{
|
||||
fontSize: 1,
|
||||
mt: 3,
|
||||
display: ['none', 'block'],
|
||||
color: 'gray',
|
||||
textAlign: 'center'
|
||||
}}
|
||||
>
|
||||
{copyrightMessage}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
sx={{
|
||||
mt: [3, 0],
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Styled.h2 sx={{ color: 'text', mb: 9, mt: [3, 0] }}>
|
||||
Other
|
||||
</Styled.h2>
|
||||
<a
|
||||
sx={linkStyle}
|
||||
target="__blank"
|
||||
href={githubUrl}
|
||||
alt="Opens the Tuist's organizqtion on GitHub"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
<a
|
||||
sx={linkStyle}
|
||||
target="__blank"
|
||||
href={slackUrl}
|
||||
alt="Join the Slack group"
|
||||
>
|
||||
Slack
|
||||
</a>
|
||||
<Link to="/blog" sx={linkStyle}>
|
||||
Blog
|
||||
</Link>
|
||||
<a
|
||||
sx={linkStyle}
|
||||
</div>
|
||||
<div className="px-5 py-2">
|
||||
<Link
|
||||
alt="Opens the project documentation/"
|
||||
to="/docs/usage/getting-started/"
|
||||
className="text-base leading-6"
|
||||
sx={{ color: 'gray', ':hover': { color: 'primary' } }}
|
||||
>
|
||||
Documentation
|
||||
</Link>
|
||||
</div>
|
||||
<div className="px-5 py-2">
|
||||
<Link
|
||||
to="/faq"
|
||||
alt="Opens the frequently asked questions section"
|
||||
target="__blank"
|
||||
className="text-base leading-6"
|
||||
sx={{ color: 'gray', ':hover': { color: 'primary' } }}
|
||||
>
|
||||
FAQ
|
||||
</Link>
|
||||
</div>
|
||||
<div className="px-5 py-2">
|
||||
<a
|
||||
href={releasesUrl}
|
||||
alt="Check out the releases on GitHub"
|
||||
alt="Opens the releases page."
|
||||
target="__blank"
|
||||
className="text-base leading-6"
|
||||
sx={{ color: 'gray', ':hover': { color: 'primary' } }}
|
||||
>
|
||||
Releases
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
sx={{
|
||||
fontSize: 1,
|
||||
mt: 3,
|
||||
display: ['block', 'none'],
|
||||
textAlign: 'center',
|
||||
color: 'gray'
|
||||
}}
|
||||
</nav>
|
||||
<div className="mt-8 flex justify-center">
|
||||
<a
|
||||
href={twitterUrl}
|
||||
target="__blank"
|
||||
alt="Opens the Twitter account of Tuist"
|
||||
className="ml-6 text-gray-400 hover:text-gray-500"
|
||||
>
|
||||
{copyrightMessage}
|
||||
</div>
|
||||
<span className="sr-only">Twitter</span>
|
||||
<FontAwesomeIcon
|
||||
sx={{
|
||||
mt: -1,
|
||||
path: { fill: theme.colors.gray },
|
||||
'&:hover': { path: { fill: theme.colors.primary } },
|
||||
}}
|
||||
icon={faTwitter}
|
||||
size="lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href={githubUrl}
|
||||
target="__blank"
|
||||
alt="Opens the Tuist organization on GitHub"
|
||||
className="ml-6 text-gray-400 hover:text-gray-500"
|
||||
>
|
||||
<span className="sr-only">GitHub</span>
|
||||
<FontAwesomeIcon
|
||||
sx={{
|
||||
mt: -1,
|
||||
path: { fill: theme.colors.gray },
|
||||
'&:hover': { path: { fill: theme.colors.primary } },
|
||||
}}
|
||||
icon={faGithub}
|
||||
size="lg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href={discourseUrl}
|
||||
target="__blank"
|
||||
alt="Opens the community forum"
|
||||
className="ml-6 text-gray-400 hover:text-gray-500"
|
||||
>
|
||||
<span className="sr-only">Community</span>
|
||||
<FontAwesomeIcon
|
||||
sx={{
|
||||
mt: -1,
|
||||
path: { fill: theme.colors.gray },
|
||||
'&:hover': { path: { fill: theme.colors.primary } },
|
||||
}}
|
||||
icon={faDiscourse}
|
||||
size="lg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div className="mt-8">
|
||||
<p
|
||||
className="text-center text-base leading-6"
|
||||
sx={{ color: 'gray' }}
|
||||
>
|
||||
Tuist © Copyright 2020. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Margin>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,18 +14,18 @@ const ColorButton = ({ mode, ...props }) => (
|
|||
{...props}
|
||||
title="Cycle Color Mode"
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
appearance: "none",
|
||||
bg: "transparent",
|
||||
color: "inherit",
|
||||
display: 'inline-block',
|
||||
appearance: 'none',
|
||||
bg: 'transparent',
|
||||
color: 'inherit',
|
||||
p: 1,
|
||||
ml: 4,
|
||||
border: 0,
|
||||
borderRadius: 9999,
|
||||
":hover,:focus": {
|
||||
color: "primary",
|
||||
boxShadow: "0 0 0 3px",
|
||||
outline: "none",
|
||||
':hover,:focus': {
|
||||
color: 'primary',
|
||||
boxShadow: '0 0 0 3px',
|
||||
outline: 'none',
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
|
@ -35,7 +35,7 @@ const ColorButton = ({ mode, ...props }) => (
|
|||
height="20"
|
||||
fill="currentcolor"
|
||||
sx={{
|
||||
display: "block",
|
||||
display: 'block',
|
||||
}}
|
||||
>
|
||||
<circle
|
||||
|
|
@ -57,7 +57,7 @@ const ColorButton = ({ mode, ...props }) => (
|
|||
</button>
|
||||
)
|
||||
|
||||
const modes = ["light", "black", "dark", "deep", "hack", "pink"]
|
||||
const modes = ['light', 'black', 'dark', 'deep', 'hack', 'pink']
|
||||
|
||||
export default ({ menuOpen, setMenuOpen, menuRef }) => {
|
||||
const hoverStyle = {
|
||||
|
|
@ -66,7 +66,7 @@ export default ({ menuOpen, setMenuOpen, menuRef }) => {
|
|||
const focusStyle = {
|
||||
marginTop: '3px',
|
||||
borderBottom: '3px solid',
|
||||
borderBottomColor: theme => theme.colors.primary,
|
||||
borderBottomColor: (theme) => theme.colors.primary,
|
||||
}
|
||||
const linkStyle = {
|
||||
fontSize: 2,
|
||||
|
|
@ -75,7 +75,12 @@ export default ({ menuOpen, setMenuOpen, menuRef }) => {
|
|||
}
|
||||
const {
|
||||
site: {
|
||||
siteMetadata: { githubUrl, discourseUrl, slackUrl, firstDocumentationPagePath },
|
||||
siteMetadata: {
|
||||
githubUrl,
|
||||
discourseUrl,
|
||||
slackUrl,
|
||||
firstDocumentationPagePath,
|
||||
},
|
||||
},
|
||||
} = useStaticQuery(graphql`
|
||||
query {
|
||||
|
|
@ -89,9 +94,9 @@ export default ({ menuOpen, setMenuOpen, menuRef }) => {
|
|||
}
|
||||
}
|
||||
`)
|
||||
const { theme } = useThemeUI();
|
||||
const { theme } = useThemeUI()
|
||||
const [mode, setMode] = useColorMode()
|
||||
const cycleMode = e => {
|
||||
const cycleMode = (e) => {
|
||||
const i = modes.indexOf(mode)
|
||||
const n = (i + 1) % modes.length
|
||||
setMode(modes[n])
|
||||
|
|
@ -106,22 +111,30 @@ export default ({ menuOpen, setMenuOpen, menuRef }) => {
|
|||
px: [4, 6],
|
||||
}}
|
||||
>
|
||||
<div sx={{ display: 'flex', flexDirection: 'horizontal', justifyContent: 'center' }}>
|
||||
{setMenuOpen && <MenuButton
|
||||
sx={{ display: ['inherit', 'none'], zIndex: 1 }}
|
||||
onClick={e => {
|
||||
setMenuOpen(!menuOpen)
|
||||
if (!menuRef.current) return
|
||||
const navLink = menuRef.current.querySelector('a')
|
||||
if (navLink) navLink.focus()
|
||||
}}
|
||||
/>}
|
||||
<div
|
||||
sx={{
|
||||
display: 'flex',
|
||||
flexDirection: 'horizontal',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
{setMenuOpen && (
|
||||
<MenuButton
|
||||
sx={{ display: ['inherit', 'none'], zIndex: 1 }}
|
||||
onClick={(e) => {
|
||||
setMenuOpen(!menuOpen)
|
||||
if (!menuRef.current) return
|
||||
const navLink = menuRef.current.querySelector('a')
|
||||
if (navLink) navLink.focus()
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{setMenuOpen && <div sx={{ flex: 1 }} />}
|
||||
<Link
|
||||
to="/"
|
||||
sx={{
|
||||
variant: 'text.header',
|
||||
flex: "0 0",
|
||||
flex: '0 0',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'flex-start',
|
||||
|
|
@ -149,7 +162,7 @@ export default ({ menuOpen, setMenuOpen, menuRef }) => {
|
|||
flex: 1,
|
||||
justifyContent: ['center', 'center', 'flex-end'],
|
||||
alignItems: 'center',
|
||||
mt: [3, 0]
|
||||
mt: [3, 0],
|
||||
}}
|
||||
>
|
||||
<div sx={{ display: 'flex', flexDirection: 'row' }}>
|
||||
|
|
@ -157,36 +170,36 @@ export default ({ menuOpen, setMenuOpen, menuRef }) => {
|
|||
sx={{
|
||||
...linkStyle,
|
||||
...(isDocs ? hoverStyle : {}),
|
||||
variant: 'text.header'
|
||||
variant: 'text.header',
|
||||
}}
|
||||
to={firstDocumentationPagePath}
|
||||
>
|
||||
DOCS
|
||||
</Link>
|
||||
</Link>
|
||||
<Link
|
||||
sx={{
|
||||
...linkStyle,
|
||||
...(isBlog ? hoverStyle : {}),
|
||||
ml: 4,
|
||||
variant: 'text.header'
|
||||
variant: 'text.header',
|
||||
}}
|
||||
to="/blog"
|
||||
alt="Blog"
|
||||
>
|
||||
BLOG
|
||||
</Link>
|
||||
</Link>
|
||||
<Link
|
||||
sx={{
|
||||
...linkStyle,
|
||||
...(isFaq ? hoverStyle : {}),
|
||||
ml: 4,
|
||||
variant: 'text.header'
|
||||
variant: 'text.header',
|
||||
}}
|
||||
to="/faq"
|
||||
alt="Frequently asked questions"
|
||||
>
|
||||
FAQ
|
||||
</Link>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div sx={{ flexDirection: 'row', display: 'flex', mt: [3, 0] }}>
|
||||
|
|
@ -203,7 +216,11 @@ export default ({ menuOpen, setMenuOpen, menuRef }) => {
|
|||
alt="The project's GitHub organization"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
sx={{ mt: -1, path: { fill: theme.colors.text }, "&:hover": { path: { fill: theme.colors.primary } } }}
|
||||
sx={{
|
||||
mt: -1,
|
||||
path: { fill: theme.colors.text },
|
||||
'&:hover': { path: { fill: theme.colors.primary } },
|
||||
}}
|
||||
icon={faGithub}
|
||||
size="lg"
|
||||
/>
|
||||
|
|
@ -221,7 +238,11 @@ export default ({ menuOpen, setMenuOpen, menuRef }) => {
|
|||
alt="The project's Discourse"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
sx={{ mt: -1, path: { fill: theme.colors.text }, "&:hover": { path: { fill: theme.colors.primary } } }}
|
||||
sx={{
|
||||
mt: -1,
|
||||
path: { fill: theme.colors.text },
|
||||
'&:hover': { path: { fill: theme.colors.primary } },
|
||||
}}
|
||||
icon={faDiscourse}
|
||||
size="lg"
|
||||
/>
|
||||
|
|
@ -239,7 +260,11 @@ export default ({ menuOpen, setMenuOpen, menuRef }) => {
|
|||
alt="Join the organization's Slack channel"
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
sx={{ mt: -1, path: { fill: theme.colors.text }, "&:hover": { path: { fill: theme.colors.primary } } }}
|
||||
sx={{
|
||||
mt: -1,
|
||||
path: { fill: theme.colors.text },
|
||||
'&:hover': { path: { fill: theme.colors.primary } },
|
||||
}}
|
||||
icon={faSlack}
|
||||
size="lg"
|
||||
/>
|
||||
|
|
@ -251,6 +276,6 @@ export default ({ menuOpen, setMenuOpen, menuRef }) => {
|
|||
}}
|
||||
</Location>
|
||||
</nav>
|
||||
</header >
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,36 +81,26 @@ const Steroids = () => {
|
|||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
color: 'primary',
|
||||
fontSize: [5, 6],
|
||||
mb: 0,
|
||||
fontWeight: '500',
|
||||
lineHeight: 1.3,
|
||||
}}
|
||||
<h1
|
||||
className="mt-2 text-3xl leading-8 font-extrabold tracking-tight sm:text-5xl sm:leading-10"
|
||||
sx={{ color: 'text' }}
|
||||
>
|
||||
Xcode on steroids
|
||||
</div>
|
||||
</h1>
|
||||
<div
|
||||
className="mt-3 text-3xl leading-8 font-extrabold tracking-tight sm:text-4xl sm:leading-10"
|
||||
sx={{
|
||||
textAlign: 'center',
|
||||
color: 'primary',
|
||||
fontSize: [5, 6],
|
||||
mt: 0,
|
||||
fontWeight: 'heading',
|
||||
lineHeight: 1.3,
|
||||
}}
|
||||
>
|
||||
<span>Easy</span> and <span>fast</span>
|
||||
</div>
|
||||
<div
|
||||
className="mt-4 max-w-2xl text-xl leading-7 lg:mx-auto"
|
||||
sx={{
|
||||
color: 'primary',
|
||||
fontSize: [2, 3],
|
||||
fontWeight: 'body',
|
||||
mt: [4, 5],
|
||||
color: 'gray',
|
||||
mt: [4, 4],
|
||||
textAlign: 'center',
|
||||
}}
|
||||
>
|
||||
|
|
@ -122,7 +112,10 @@ const Steroids = () => {
|
|||
link="/docs/usage/getting-started/"
|
||||
/>
|
||||
|
||||
<div sx={{ color: 'secondary', mt: 4, textAlign: 'center' }}>
|
||||
<div
|
||||
sx={{ color: 'gray', mt: 5, textAlign: 'center' }}
|
||||
className="mt-2 text-base leading-6"
|
||||
>
|
||||
Trusted by the following companies and projects:
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -135,7 +128,7 @@ const Steroids = () => {
|
|||
>
|
||||
<a href="https://soundcloud.com" target="__blank">
|
||||
<Soundcloud
|
||||
sx={{ height: 30, path: { fill: theme.colors.secondary } }}
|
||||
sx={{ height: 30, path: { fill: theme.colors.gray } }}
|
||||
/>
|
||||
</a>
|
||||
<Devengo
|
||||
|
|
@ -143,7 +136,7 @@ const Steroids = () => {
|
|||
ml: 3,
|
||||
height: 30,
|
||||
width: 150,
|
||||
path: { fill: theme.colors.secondary },
|
||||
path: { fill: theme.colors.gray },
|
||||
}}
|
||||
/>
|
||||
<a href="https://www.ackee.cz/en" target="__blank" sx={{ ml: 3 }}>
|
||||
|
|
@ -151,7 +144,7 @@ const Steroids = () => {
|
|||
sx={{
|
||||
height: 20,
|
||||
width: 80,
|
||||
path: { fill: theme.colors.secondary },
|
||||
path: { fill: theme.colors.gray },
|
||||
}}
|
||||
/>
|
||||
</a>
|
||||
|
|
@ -258,7 +251,7 @@ let project = Project.featureFramework(
|
|||
|
||||
const Workspaces = () => {
|
||||
return (
|
||||
<div sx={{ position: 'relative', overflow: 'hidden' }}>
|
||||
<div sx={{ position: 'relative', overflow: 'hidden', mt: 5 }}>
|
||||
<Main>
|
||||
<div
|
||||
sx={{
|
||||
|
|
@ -331,94 +324,6 @@ const Feature = ({ color, name, description, children }) => {
|
|||
)
|
||||
}
|
||||
|
||||
const Reflection = ({ name, avatarUrl, testimony, role, company }) => {
|
||||
return (
|
||||
<div
|
||||
sx={{
|
||||
bg: 'muted',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
ml: 3,
|
||||
mb: [4, 0],
|
||||
flex: '0 0 29%',
|
||||
}}
|
||||
>
|
||||
<div sx={{ mt: 4, mb: 3, display: 'inherit' }}>
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt={`${name} avatar`}
|
||||
sx={{ bg: 'muted', width: 60, height: 60, borderRadius: 30, ml: 3 }}
|
||||
/>
|
||||
<div
|
||||
sx={{
|
||||
position: 'relative',
|
||||
top: 40,
|
||||
right: 15,
|
||||
bg: 'primary',
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: 20,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<Quote />
|
||||
</div>
|
||||
</div>
|
||||
<div sx={{ fontSize: 0, color: 'primary', textTransform: 'uppercase' }}>
|
||||
{name}
|
||||
</div>
|
||||
<div
|
||||
sx={{
|
||||
fontSize: 1,
|
||||
textAlign: 'center',
|
||||
color: 'text',
|
||||
p: 3,
|
||||
}}
|
||||
>
|
||||
{testimony}
|
||||
</div>
|
||||
<div sx={{ flex: 1 }} />
|
||||
<div
|
||||
sx={{
|
||||
height: 50,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-start',
|
||||
alignItems: 'stretch',
|
||||
alignSelf: 'stretch',
|
||||
mt: 2,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
sx={{
|
||||
height: 2,
|
||||
bg: 'primary',
|
||||
flex: '0 0 3px',
|
||||
width: '30%',
|
||||
alignSelf: 'center',
|
||||
}}
|
||||
/>
|
||||
<div sx={{ height: 1, bg: 'muted', flex: '0 0 1px' }} />
|
||||
<div
|
||||
sx={{
|
||||
fontSize: 0,
|
||||
color: 'primary',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
textAlign: 'center',
|
||||
textTransform: 'uppercase',
|
||||
py: 3,
|
||||
}}
|
||||
>{`${role} at ${company}`}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const Testimonies = () => {
|
||||
const { theme } = useThemeUI()
|
||||
const testimonies = [
|
||||
|
|
@ -466,7 +371,7 @@ const Testimonies = () => {
|
|||
alignItems: 'stretch',
|
||||
}}
|
||||
>
|
||||
<div sx={{ mb: [0, 0, 50], pb: [5, 5, 0] }}>
|
||||
<div>
|
||||
<Main py="0">
|
||||
<div
|
||||
sx={{
|
||||
|
|
@ -520,16 +425,14 @@ const Testimonies = () => {
|
|||
y={0}
|
||||
width={4}
|
||||
height={4}
|
||||
sx={{ path: { fill: theme.colors.muted } }}
|
||||
className="text-gray-200"
|
||||
fill="currentColor"
|
||||
fill={theme.colors.muted}
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width={784}
|
||||
height={404}
|
||||
fill="url(#e56e3f81-d9c1-4b83-a3ba-0d0ac8c32f32)"
|
||||
fill={'url(#56409614-3d62-4985-9a10-7ca758a8f4f0)'}
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
|
|
@ -554,14 +457,14 @@ const Testimonies = () => {
|
|||
width={4}
|
||||
height={4}
|
||||
className="text-gray-200"
|
||||
fill="currentColor"
|
||||
fill={theme.colors.muted}
|
||||
/>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect
|
||||
width={404}
|
||||
height={784}
|
||||
fill="url(#56409614-3d62-4985-9a10-7ca758a8f4f0)"
|
||||
fill={'url(#56409614-3d62-4985-9a10-7ca758a8f4f0)'}
|
||||
/>
|
||||
</svg>
|
||||
<div className="relative lg:flex lg:items-center">
|
||||
|
|
@ -574,8 +477,8 @@ const Testimonies = () => {
|
|||
</div>
|
||||
<div className="relative lg:ml-10">
|
||||
<svg
|
||||
className="absolute top-0 left-0 transform -translate-x-8 -translate-y-24 h-36 w-36 text-indigo-200 opacity-50"
|
||||
stroke="currentColor"
|
||||
className="absolute top-0 left-0 transform -translate-x-8 -translate-y-24 h-36 w-36 opacity-25"
|
||||
stroke={theme.colors.primary}
|
||||
fill="none"
|
||||
viewBox="0 0 144 144"
|
||||
>
|
||||
|
|
@ -596,7 +499,7 @@ const Testimonies = () => {
|
|||
<div className="flex-shrink-0 lg:hidden">
|
||||
<img
|
||||
className="h-12 w-12 rounded-full"
|
||||
src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||
src={testimony.avatarUrl}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -632,7 +535,7 @@ const Contribute = () => {
|
|||
return (
|
||||
<Main>
|
||||
<div sx={{ bg: 'background' }}>
|
||||
<div className="max-w-screen-xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<div className="max-w-screen-xl mx-auto text-center py-20 px-4 sm:px-6 lg:py-16 lg:px-8">
|
||||
<h2
|
||||
className="text-3xl leading-9 font-extrabold tracking-tight sm:text-4xl sm:leading-10"
|
||||
sx={{ color: 'text' }}
|
||||
|
|
|
|||
|
|
@ -11,21 +11,28 @@ import urljoin from 'url-join'
|
|||
import moment from 'moment'
|
||||
import SEO from '../components/SEO'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faClock, faCalendarAlt, faUser } from '@fortawesome/free-regular-svg-icons'
|
||||
import {
|
||||
faClock,
|
||||
faCalendarAlt,
|
||||
faUser,
|
||||
} from '@fortawesome/free-regular-svg-icons'
|
||||
|
||||
const Post = ({ post, index, authors }) => {
|
||||
const { theme } = useThemeUI();
|
||||
const { theme } = useThemeUI()
|
||||
const authorHandle = post.frontmatter.author
|
||||
const author = findWhere(authors, { handle: authorHandle })
|
||||
|
||||
return (
|
||||
<article sx={{ mt: index == 0 ? 0 : 5 }} key={index}>
|
||||
<header>
|
||||
|
||||
<Link
|
||||
to={post.fields.slug}
|
||||
alt={`Open the blog post titled ${post.frontmatter.title}`}
|
||||
sx={{ color: 'primary', textDecoration: 'none', "&:hover": { color: "secondary" } }}
|
||||
sx={{
|
||||
color: 'primary',
|
||||
textDecoration: 'none',
|
||||
'&:hover': { color: 'secondary' },
|
||||
}}
|
||||
>
|
||||
<Styled.h2
|
||||
sx={{
|
||||
|
|
@ -50,10 +57,19 @@ const Post = ({ post, index, authors }) => {
|
|||
sx={{ path: { fill: theme.colors.gray }, height: 15, width: 15 }}
|
||||
icon={faCalendarAlt}
|
||||
size="sm"
|
||||
/> {post.fields.date}
|
||||
/>{' '}
|
||||
{post.fields.date}
|
||||
</span>
|
||||
|
||||
<span sx={{ ml: [0, 4] }}>
|
||||
<span
|
||||
sx={{
|
||||
ml: [0, 4],
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
sx={{ path: { fill: theme.colors.gray }, height: 15, width: 15 }}
|
||||
icon={faUser}
|
||||
|
|
@ -78,7 +94,8 @@ const Post = ({ post, index, authors }) => {
|
|||
sx={{ path: { fill: theme.colors.gray }, height: 15, width: 15 }}
|
||||
icon={faClock}
|
||||
size="sm"
|
||||
/> {post.timeToRead} min read
|
||||
/>{' '}
|
||||
{post.timeToRead} min read
|
||||
</span>
|
||||
</div>
|
||||
</header>
|
||||
|
|
@ -150,7 +167,7 @@ const BlogList = ({
|
|||
<BlogJsonLd
|
||||
url={urljoin(siteUrl, '/blog')}
|
||||
headline="Tuist Blog"
|
||||
posts={edges.map(edge => {
|
||||
posts={edges.map((edge) => {
|
||||
const authorHandle = edge.node.frontmatter.author
|
||||
const author = findWhere(authors, { handle: authorHandle })
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,11 @@ import urljoin from 'url-join'
|
|||
import SEO from '../components/SEO'
|
||||
import { NewsArticleJsonLd, BreadcrumbJsonLd } from 'gatsby-plugin-next-seo'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faClock, faCalendarAlt, faUser } from '@fortawesome/free-regular-svg-icons'
|
||||
import {
|
||||
faClock,
|
||||
faCalendarAlt,
|
||||
faUser,
|
||||
} from '@fortawesome/free-regular-svg-icons'
|
||||
|
||||
const Avatar = ({ author: { avatar, twitter } }) => {
|
||||
return (
|
||||
|
|
@ -32,55 +36,67 @@ const Avatar = ({ author: { avatar, twitter } }) => {
|
|||
}
|
||||
|
||||
const Subtitle = ({ post, author }) => {
|
||||
const { theme } = useThemeUI();
|
||||
return <div
|
||||
sx={{
|
||||
flex: 1,
|
||||
mb: 0,
|
||||
color: 'gray',
|
||||
fontSize: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: ['column', 'row'],
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<FontAwesomeIcon
|
||||
sx={{ path: { fill: theme.colors.gray }, height: 15, width: 15 }}
|
||||
icon={faCalendarAlt}
|
||||
size="sm"
|
||||
/> {post.fields.date}
|
||||
</span>
|
||||
const { theme } = useThemeUI()
|
||||
return (
|
||||
<div
|
||||
sx={{
|
||||
flex: 1,
|
||||
mb: 0,
|
||||
color: 'gray',
|
||||
fontSize: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
flexDirection: ['column', 'row'],
|
||||
justifyContent: 'center',
|
||||
}}
|
||||
>
|
||||
<span>
|
||||
<FontAwesomeIcon
|
||||
sx={{ path: { fill: theme.colors.gray }, height: 15, width: 15 }}
|
||||
icon={faCalendarAlt}
|
||||
size="sm"
|
||||
/>{' '}
|
||||
{post.fields.date}
|
||||
</span>
|
||||
|
||||
<span sx={{ ml: [0, 4] }}>
|
||||
<FontAwesomeIcon
|
||||
sx={{ path: { fill: theme.colors.gray }, height: 15, width: 15 }}
|
||||
icon={faUser}
|
||||
size="sm"
|
||||
/>
|
||||
<Styled.a
|
||||
href={`https://twitter.com/${author.twitter}`}
|
||||
target="__blank"
|
||||
alt={`Open the Twitter profile of ${author.name}`}
|
||||
sx={{ ml: 2 }}
|
||||
<span
|
||||
sx={{
|
||||
ml: [0, 4],
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
flexWrap: 'nowrap',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{author.name}
|
||||
</Styled.a>
|
||||
<img
|
||||
src={author.avatar}
|
||||
sx={{ width: 14, height: 14, borderRadius: 7, ml: 2 }}
|
||||
/>
|
||||
</span>
|
||||
<FontAwesomeIcon
|
||||
sx={{ path: { fill: theme.colors.gray }, height: 15, width: 15 }}
|
||||
icon={faUser}
|
||||
size="sm"
|
||||
/>
|
||||
<Styled.a
|
||||
href={`https://twitter.com/${author.twitter}`}
|
||||
target="__blank"
|
||||
alt={`Open the Twitter profile of ${author.name}`}
|
||||
sx={{ ml: 2 }}
|
||||
>
|
||||
{author.name}
|
||||
</Styled.a>
|
||||
<img
|
||||
src={author.avatar}
|
||||
sx={{ width: 14, height: 14, borderRadius: 7, ml: 2 }}
|
||||
/>
|
||||
</span>
|
||||
|
||||
<span sx={{ ml: [0, 4] }}>
|
||||
<FontAwesomeIcon
|
||||
sx={{ path: { fill: theme.colors.gray }, height: 15, width: 15 }}
|
||||
icon={faClock}
|
||||
size="sm"
|
||||
/> {post.timeToRead} min read
|
||||
</span>
|
||||
</div>
|
||||
<span sx={{ ml: [0, 4] }}>
|
||||
<FontAwesomeIcon
|
||||
sx={{ path: { fill: theme.colors.gray }, height: 15, width: 15 }}
|
||||
icon={faClock}
|
||||
size="sm"
|
||||
/>{' '}
|
||||
{post.timeToRead} min read
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const IndexPage = ({
|
||||
|
|
@ -93,9 +109,9 @@ const IndexPage = ({
|
|||
},
|
||||
}) => {
|
||||
const post = mdx
|
||||
const authors = edges.map(edge => edge.node)
|
||||
const authors = edges.map((edge) => edge.node)
|
||||
const author = authors.find(
|
||||
author => author.handle === post.frontmatter.author
|
||||
(author) => author.handle === post.frontmatter.author
|
||||
)
|
||||
|
||||
const breadcrumb = [
|
||||
|
|
|
|||
Loading…
Reference in New Issue