{description}
-
}
@@ -23,7 +23,7 @@ interface IBlogFeedProps {
pageInfo: IPaginatorPageInfo
}
-const BlogFeed: React.SFC = ({
+const Feed: React.SFC = ({
feedPostList: { edges },
pageInfo,
bigFirst = true,
@@ -42,7 +42,7 @@ const BlogFeed: React.SFC = ({
{edges.map(({ node }, index) => (
- = ({
+const FeedMeta: React.SFC = ({
avatar,
commentsUrl,
commentsCount,
@@ -47,4 +47,4 @@ const BlogFeedMeta: React.SFC = ({
)
}
-export default BlogFeedMeta
+export default FeedMeta
diff --git a/src/components/BlogFeedMeta/styles.module.css b/src/components/Blog/FeedMeta/styles.module.css
similarity index 100%
rename from src/components/BlogFeedMeta/styles.module.css
rename to src/components/Blog/FeedMeta/styles.module.css
diff --git a/src/components/BlogHome/index.tsx b/src/components/Blog/Home/index.tsx
similarity index 64%
rename from src/components/BlogHome/index.tsx
rename to src/components/Blog/Home/index.tsx
index 551ddb620e..5d3c2d9610 100644
--- a/src/components/BlogHome/index.tsx
+++ b/src/components/Blog/Home/index.tsx
@@ -1,20 +1,20 @@
import React from 'react'
-import { IPaginatorPageInfo } from '../Paginator'
-import PageContent from '../PageContent'
-import BlogFeed, { IBlogFeedPostList } from '../BlogFeed'
-import Subscribe from '../Subscribe'
+import { IPaginatorPageInfo } from '../../Paginator'
+import PageContent from '../../PageContent'
+import Feed, { IBlogFeedPostList } from '../Feed'
+import SubscribeSection from '../../SubscribeSection'
interface IBlogHomeProps {
posts: IBlogFeedPostList
pageInfo: IPaginatorPageInfo
}
-const BlogHome: React.SFC = ({ posts, pageInfo }) => {
+const Home: React.SFC = ({ posts, pageInfo }) => {
return (
<>
- = ({ posts, pageInfo }) => {
}
/>
-
(
)
-export default BlogLayout
+export default Layout
diff --git a/src/components/BlogLayout/styles.module.css b/src/components/Blog/Layout/styles.module.css
similarity index 100%
rename from src/components/BlogLayout/styles.module.css
rename to src/components/Blog/Layout/styles.module.css
diff --git a/src/components/BlogPost/HeroPic/index.tsx b/src/components/Blog/Post/HeroPic/index.tsx
similarity index 81%
rename from src/components/BlogPost/HeroPic/index.tsx
rename to src/components/Blog/Post/HeroPic/index.tsx
index 5be49f95e5..f11ac66e9e 100644
--- a/src/components/BlogPost/HeroPic/index.tsx
+++ b/src/components/Blog/Post/HeroPic/index.tsx
@@ -1,15 +1,15 @@
import Image from 'gatsby-image'
import React from 'react'
-import { BLOG } from '../../../consts'
+import { BLOG } from '../../../../consts'
import {
IBlogPostHeroPic,
IGatsbyImageProps
-} from '../../../templates/blog-post'
+} from '../../../../templates/blog-post'
import styles from './styles.module.css'
-function NonStretchedImage(props: IGatsbyImageProps) {
+const NonStretchedImage: React.SFC = props => {
let normalizedProps = props
if (props.fluid && props.fluid.presentationWidth) {
const presetantionWidth = props.fluid?.presentationWidth
@@ -29,7 +29,7 @@ function NonStretchedImage(props: IGatsbyImageProps) {
return = ({ pictureComment, picture }) => {
return (
- = ({ posts, pageInfo, header }) => {
+ return (
+ <>
+
+
+ = ({ posts, pageInfo, header }) => {
- return (
- <>
-
-
-
- {title && (
-
- {title}
- {icon &&
- )}
- {children}
- {hasAction && {action} }
-
- )
-}
-
-Block.propTypes = {
- action: PropTypes.node,
- children: PropTypes.node,
- icon: PropTypes.string,
- title: PropTypes.node
-}
diff --git a/src/components/Community/Block/index.tsx b/src/components/Community/Block/index.tsx
new file mode 100644
index 0000000000..0762cc2928
--- /dev/null
+++ b/src/components/Community/Block/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+
+import styles from './styles.module.css'
+
+interface ICommunityBlockProps {
+ children: React.ReactNode
+ title?: React.ReactNode
+ action?: React.ReactNode
+ icon?: string
+}
+
+const Block: React.SFC = ({
+ title,
+ children,
+ action,
+ icon
+}) => (
+
+
-
- -
+
-
+
)
}
-CommunityContribute.propTypes = {
- theme: PropTypes.shape({
- backgroundColor: PropTypes.string,
- color: PropTypes.string
- })
-}
+export default Contribute
diff --git a/src/components/Community/Events/index.js b/src/components/Community/Events/index.js
deleted file mode 100644
index 5e3396a7a7..0000000000
--- a/src/components/Community/Events/index.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import React, { useCallback } from 'react'
-import PropTypes from 'prop-types'
-import format from 'date-fns/format'
-import fill from 'lodash.fill'
-
-import { logEvent } from '../../../utils/ga'
-
-import CommunityBlock from '../Block'
-import CommunitySection from '../Section'
-import Link from '../../Link'
-
-import data from '../data'
-
-import { Button, Item, Items, Line, Link as LinkSC, Wrapper } from '../styles'
-
-import { Image, ImageWrapper, Meta } from './styles'
-
-const { description, mobileDescription, title } = data.section.events
-const { events } = data
-
-const modifiedEvents = events.length > 3 ? events.slice(0, 3) : events
-const eventPlaceholders = fill(new Array(3 - modifiedEvents.length), Item)
-
-function CommunityEvent({
- theme,
- city,
- date,
- description,
- pictureUrl,
- title,
- url
-}) {
- const logEventClick = useCallback(
- () => logEvent('community', 'event', title),
- [title]
- )
-
- return (
- -
-
- Event Info
-
- }
- >
-
-
-
-
- {title}
-
-
- {description}
-
- {city}, {format(new Date(date), 'MMMM d')}
-
-
-
-
- )
-}
-
-CommunityEvent.propTypes = {
- theme: PropTypes.object,
- city: PropTypes.string,
- date: PropTypes.string,
- description: PropTypes.string,
- pictureUrl: PropTypes.string,
- title: PropTypes.string,
- url: PropTypes.string
-}
-
-export default function CommunityEvents({ theme }) {
- if (!events.length) return ''
-
- return (
-
-
-
- {modifiedEvents.map(event => (
-
-
-
- )
-}
-
-CommunityEvents.propTypes = {
- theme: PropTypes.shape({
- backgroundColor: PropTypes.string,
- color: PropTypes.string
- })
-}
diff --git a/src/components/Community/Events/index.tsx b/src/components/Community/Events/index.tsx
new file mode 100644
index 0000000000..d74a1b669c
--- /dev/null
+++ b/src/components/Community/Events/index.tsx
@@ -0,0 +1,126 @@
+import React, { useCallback } from 'react'
+import cn from 'classnames'
+import format from 'date-fns/format'
+
+import { ICommunitySectionTheme } from '../'
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import Link from '../../Link'
+import Block from '../Block'
+import Section from '../Section'
+import { logEvent } from '../../../utils/front/ga'
+
+import data from '../data.json'
+import sharedStyles from '../styles.module.css'
+import styles from './styles.module.css'
+
+interface IEvent {
+ theme: ICommunitySectionTheme
+ city: string
+ date: string
+ description: string
+ pictureUrl?: string
+ title: string
+ url: string
+}
+
+const { description, mobileDescription, title } = data.section.events
+const { events } = data
+const eventsItems = ((): Array => {
+ const items: Array = events.slice(0, 3) as Array
+ const itemLength = items.length
+
+ for (let i = itemLength; i < 3; i++) {
+ items.push(null)
+ }
+
+ return items
+})()
+
+const Event: React.SFC = ({
+ theme,
+ city,
+ date,
+ description,
+ pictureUrl,
+ title,
+ url
+}) => {
+ const logEventClick = useCallback(
+ () => logEvent('community', 'event', title),
+ [title]
+ )
+
+ return (
+
+ Event Info
+
+ }
+ >
+
+ 
+
+
+
+ {title}
+
+
+ )
+}
+
+const Events: React.SFC<{ theme: ICommunitySectionTheme }> = ({ theme }) => {
+ if (!events.length) {
+ return null
+ }
+
+ return (
+
+
+
+
+ )
+}
+
+export default Events
diff --git a/src/components/Community/Events/styles.js b/src/components/Community/Events/styles.js
deleted file mode 100644
index bea64fab3a..0000000000
--- a/src/components/Community/Events/styles.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import styled from 'styled-components'
-
-import { Meta as ParentMeta } from '../styles'
-
-export const Image = styled.img`
- width: 100%;
- border-radius: 20px 20px 0 0;
-`
-
-export const ImageWrapper = styled.a`
- display: block;
- margin: -10px -20px 0;
-`
-
-export const Meta = styled(ParentMeta)`
- margin-top: 10px;
-`
diff --git a/src/components/Community/Events/styles.module.css b/src/components/Community/Events/styles.module.css
new file mode 100644
index 0000000000..4226e85a24
--- /dev/null
+++ b/src/components/Community/Events/styles.module.css
@@ -0,0 +1,13 @@
+.meta {
+ margin-top: 10px;
+}
+
+.image {
+ width: 100%;
+ border-radius: 20px 20px 0 0;
+}
+
+.imageWrapper {
+ display: block;
+ margin: -10px -20px 0;
+}
diff --git a/src/components/Community/Hero/index.js b/src/components/Community/Hero/index.js
deleted file mode 100644
index f9a011b693..0000000000
--- a/src/components/Community/Hero/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-
-import Link from '../../Link'
-
-import { logEvent } from '../../../utils/ga'
-
-import { OnlyDesktop, OnlyMobile } from '../../../styles'
-import { Link as LinkSC, Picture, Wrapper } from './styles'
-
-import data from '../data.json'
-
-const logHero = () => logEvent('community', 'hero')
-
-export default function CommunityHero() {
- if (!data.hero) return ''
-
- return (
-
-
-
-
-
-
-
-
- )
-}
diff --git a/src/components/Community/Hero/index.tsx b/src/components/Community/Hero/index.tsx
new file mode 100644
index 0000000000..8503442a7a
--- /dev/null
+++ b/src/components/Community/Hero/index.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import ShowOnly from '../../ShowOnly'
+import Link from '../../Link'
+import { logEvent } from '../../../utils/front/ga'
+
+import data from '../data.json'
+import styles from './styles.module.css'
+
+const logHero = (): void => logEvent('community', 'hero')
+
+const Hero: React.SFC = () => {
+ if (!data.hero) {
+ return null
+ }
+
+ return (
+
+
+
+ 
+
+
+ 
+
+
+
+ )
+}
+
+export default Hero
diff --git a/src/components/Community/Hero/styles.js b/src/components/Community/Hero/styles.js
deleted file mode 100644
index 3f007e8291..0000000000
--- a/src/components/Community/Hero/styles.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import styled from 'styled-components'
-import { media } from '../../../styles'
-
-export const Wrapper = styled.div`
- margin: 0 auto;
- padding: 40px 0 20px;
- max-width: 1000px;
-
- ${media.tablet`
- padding: 0 0 10px;
- `}
-`
-
-export const Link = styled.a`
- &:hover {
- opacity: 0.7;
- }
-`
-
-export const Picture = styled.img`
- max-width: 1000px;
- width: 100%;
-`
diff --git a/src/components/Community/Hero/styles.module.css b/src/components/Community/Hero/styles.module.css
new file mode 100644
index 0000000000..dafea88e10
--- /dev/null
+++ b/src/components/Community/Hero/styles.module.css
@@ -0,0 +1,16 @@
+.container {
+ padding: 40px 0 20px;
+}
+
+.link {
+ display: block;
+
+ &:hover {
+ opacity: 0.7;
+ }
+}
+
+.picture {
+ max-width: 100%;
+ width: 100%;
+}
diff --git a/src/components/Community/Learn/index.js b/src/components/Community/Learn/index.js
deleted file mode 100644
index 308c49ad6c..0000000000
--- a/src/components/Community/Learn/index.js
+++ /dev/null
@@ -1,264 +0,0 @@
-import React, { useCallback } from 'react'
-import PropTypes from 'prop-types'
-import format from 'date-fns/format'
-
-import Link from '../../Link'
-
-import { logEvent } from '../../../utils/ga'
-import { getFirstPage } from '../../../utils/sidebar'
-
-import CommunityBlock from '../Block'
-import CommunitySection from '../Section'
-
-import { useCommentsCount } from '../../../utils/api'
-import getPosts from '../../../queries/posts'
-import { pluralizeComments } from '../../../utils/i18n'
-
-import {
- Button,
- Comments,
- HeaderLink,
- ImageLine,
- Item,
- Items,
- Line,
- Link as LinkSC,
- Meta,
- NbspWrapper,
- TextWrapper,
- Wrapper
-} from '../styles'
-
-import { Image } from './styles'
-
-import data from '../data'
-
-const docsPage = getFirstPage()
-const { description, mobileDescription, title } = data.section.learn
-const { documentation, userContent } = data
-
-const logPostAll = () => logEvent('community', 'blog', 'all')
-const logDocumentationAll = () => logEvent('community', 'documentation', 'all')
-
-function CommunityBlogPost({
- url,
- title,
- date,
- color,
- commentsUrl,
- pictureUrl
-}) {
- const logPost = useCallback(() => logEvent('community', 'blog', title), [
- title
- ])
- const { error, ready, result } = useCommentsCount(commentsUrl)
-
- return (
-
- {pictureUrl && (
-
-
-
- {title}
-
-
- {ready && !error && (
- <>
-
- {pluralizeComments(result)}
-
- {' • '}
-
- )}
- {format(new Date(date), 'MMM, d')}
-
-
-
- )
-}
-
-CommunityBlogPost.propTypes = {
- color: PropTypes.string,
- commentsUrl: PropTypes.string,
- pictureUrl: PropTypes.string,
- date: PropTypes.string,
- title: PropTypes.string,
- url: PropTypes.string
-}
-
-function CommunityUserContent({ url, title, author, date, color, pictureUrl }) {
- const logUserContent = useCallback(
- () => logEvent('community', 'user-content', title),
- [title]
- )
-
- return (
-
- {pictureUrl && (
-
-
-
- {title}
-
-
- {author} •{' '}
- {format(new Date(date), 'MMM, d')}
-
-
-
- )
-}
-
-CommunityUserContent.propTypes = {
- author: PropTypes.string,
- color: PropTypes.string,
- date: PropTypes.string,
- pictureUrl: PropTypes.string,
- title: PropTypes.string,
- url: PropTypes.string
-}
-
-function CommunityDocumentation({ url, title, description, color }) {
- const logDocumentation = useCallback(
- () => logEvent('community', 'documentation', title),
- [title]
- )
-
- return (
-
-
- {title}
-
- {description}
-
- )
-}
-
-CommunityDocumentation.propTypes = {
- color: PropTypes.string,
- description: PropTypes.string,
- title: PropTypes.string,
- url: PropTypes.string
-}
-
-export default function CommunityLearn({ theme }) {
- const posts = getPosts()
-
- return (
-
-
-
- -
-
- Documentation
-
- }
- action={
-
- See all docs
-
- }
- >
- {documentation.map(documentation => (
-
-
- -
-
- DVC Blog
-
- }
- action={
- posts && (
-
- )
- }
- >
- {posts.map(post => (
-
-
- -
-
- {userContent.map(userContent => (
-
-
-
-
-
- )
-}
-
-CommunityLearn.propTypes = {
- theme: PropTypes.shape({
- backgroundColor: PropTypes.string,
- color: PropTypes.string
- })
-}
diff --git a/src/components/Community/Learn/index.tsx b/src/components/Community/Learn/index.tsx
new file mode 100644
index 0000000000..0c81986398
--- /dev/null
+++ b/src/components/Community/Learn/index.tsx
@@ -0,0 +1,275 @@
+import React, { useCallback } from 'react'
+import cn from 'classnames'
+import format from 'date-fns/format'
+
+import { ICommunitySectionTheme } from '../'
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import Link from '../../Link'
+import Block from '../Block'
+import Section from '../Section'
+
+import { logEvent } from '../../../utils/front/ga'
+import { getFirstPage } from '../../../utils/shared/sidebar'
+import { useCommentsCount } from '../../../utils/front/api'
+import getPosts from '../../../queries/posts'
+import { pluralizeComments } from '../../../utils/front/i18n'
+
+import data from '../data.json'
+import sharedStyles from '../styles.module.css'
+import styles from './styles.module.css'
+
+const docsPage = getFirstPage()
+const { description, mobileDescription, title } = data.section.learn
+const { documentation, userContent } = data
+
+const logPostAll = (): void => logEvent('community', 'blog', 'all')
+const logDocumentationAll = (): void =>
+ logEvent('community', 'documentation', 'all')
+
+interface ICommunityBlogPost {
+ color: string
+ commentsUrl?: string
+ pictureUrl: string | null
+ date: string
+ title: string
+ url: string
+}
+
+const BlogPost: React.SFC = ({
+ url,
+ title,
+ date,
+ color,
+ commentsUrl,
+ pictureUrl
+}) => {
+ if (!commentsUrl) {
+ return null
+ }
+
+ const logPost = useCallback(() => logEvent('community', 'blog', title), [
+ title
+ ])
+
+ const { error, ready, result } = useCommentsCount(commentsUrl)
+
+ return (
+ = ({
+ url,
+ title,
+ author,
+ date,
+ color,
+ pictureUrl
+}) => {
+ const logUserContent = useCallback(
+ () => logEvent('community', 'user-content', title),
+ [title]
+ )
+
+ return (
+ = ({
+ url,
+ title,
+ description,
+ color
+}) => {
+ const logDocumentation = useCallback(
+ () => logEvent('community', 'documentation', title),
+ [title]
+ )
+
+ return (
+
+
+
+
+ )
+}
+
+export default Learn
diff --git a/src/components/Community/Learn/styles.js b/src/components/Community/Learn/styles.module.css
similarity index 55%
rename from src/components/Community/Learn/styles.js
rename to src/components/Community/Learn/styles.module.css
index 6479afc7fd..7f2cf87340 100644
--- a/src/components/Community/Learn/styles.js
+++ b/src/components/Community/Learn/styles.module.css
@@ -1,9 +1,7 @@
-import styled from 'styled-components'
-
-export const Image = styled.img`
+.image {
width: 80px;
height: 80px;
border-radius: 5px;
float: left;
margin: 5px 10px 0 0;
-`
+}
diff --git a/src/components/Community/Meet/index.js b/src/components/Community/Meet/index.js
deleted file mode 100644
index 3384f57360..0000000000
--- a/src/components/Community/Meet/index.js
+++ /dev/null
@@ -1,255 +0,0 @@
-import React, { useCallback } from 'react'
-import PropTypes from 'prop-types'
-import formatDistanceToNow from 'date-fns/formatDistanceToNow'
-
-import CommunityBlock from '../Block'
-import CommunitySection from '../Section'
-import Link from '../../Link'
-
-import { pluralizeComments } from '../../../utils/i18n'
-import { logEvent } from '../../../utils/ga'
-import { useIssues, useTopics } from '../../../utils/api'
-
-import data from '../data'
-
-const { description, mobileDescription, title } = data.section.meet
-
-import { Stats, StatLabel, StatLine, StatValue } from './styles'
-
-import {
- Button,
- Comments,
- HeaderLink,
- Item,
- Items,
- Line,
- Link as LinkSC,
- Meta,
- Placeholder,
- Wrapper
-} from '../styles'
-
-const logIssueAll = () => logEvent('community', 'issue', 'all')
-const logTopicAll = () => logEvent('community', 'topic', 'all')
-const logDiscord = () => logEvent('community', 'discord')
-
-function CommunityTopic({ url, title, date, comments, color }) {
- const logTopic = useCallback(() => logEvent('community', 'forum', title), [
- title
- ])
-
- return (
-
-
- {title}
-
-
-
- {pluralizeComments(comments)}
- {' '}
- • last activity {formatDistanceToNow(new Date(date), 'MMM, d') + ' '}
- ago
-
-
- )
-}
-
-CommunityTopic.propTypes = {
- url: PropTypes.string,
- title: PropTypes.string,
- date: PropTypes.string,
- comments: PropTypes.number,
- color: PropTypes.string
-}
-
-function CommunityIssue({ url, title, date, comments, color }) {
- const logIssue = useCallback(() => logEvent('community', 'issue', title), [
- title
- ])
-
- return (
-
-
- {title}
-
-
-
- {pluralizeComments(comments)}
-
- {' •'} opened {formatDistanceToNow(new Date(date), 'MMM, d')} ago
-
-
- )
-}
-
-CommunityIssue.propTypes = {
- url: PropTypes.string,
- title: PropTypes.string,
- date: PropTypes.string,
- comments: PropTypes.number,
- color: PropTypes.string
-}
-
-export default function CommunityMeet({ theme }) {
- const { erorr: issuesError, ready: issuesReady, result: issues } = useIssues()
- const { erorr: topicsError, ready: topicsReady, result: topics } = useTopics()
-
- return (
-
-
-
- -
-
- Join the Dev Chat
-
- }
- action={
-
- Open Chat
-
- }
- icon="/img/community/discord.svg"
- >
-
- Need urgent help? Ask advice from experienced developers online
-
-
-
- {data.stats.users}
- registered developers
-
-
- {data.stats.messages}
- messages posted over the past month
-
-
-
-
- -
-
- Ask a Question
-
- }
- action={
- topics && (
-
- Read All Topics
-
- )
- }
- icon="/img/community/discourse.svg"
- >
- {!topicsReady && Loading... }
- {topicsError && (
- Forum unavailable right now
- )}
- {topics &&
- topics.map(topic => (
-
-
- -
-
- Post an Issue
-
- }
- action={
- issues && (
-
- Read All Issues
-
- )
- }
- icon="/img/community/github.svg"
- >
- {!issuesReady && Loading... }
- {issuesError && (
- Github unavailable right now
- )}
- {issues &&
- issues.map(issue => (
-
-
-
-
-
- )
-}
-
-CommunityMeet.propTypes = {
- theme: PropTypes.shape({
- backgroundColor: PropTypes.string,
- color: PropTypes.string
- })
-}
diff --git a/src/components/Community/Meet/index.tsx b/src/components/Community/Meet/index.tsx
new file mode 100644
index 0000000000..4c42e068ed
--- /dev/null
+++ b/src/components/Community/Meet/index.tsx
@@ -0,0 +1,248 @@
+import React, { useCallback } from 'react'
+import formatDistanceToNow from 'date-fns/formatDistanceToNow'
+
+import { ICommunitySectionTheme } from '../'
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import Block from '../Block'
+import Section from '../Section'
+import Link from '../../Link'
+import { pluralizeComments } from '../../../utils/front/i18n'
+import { logEvent } from '../../../utils/front/ga'
+import {
+ useIssues,
+ useTopics,
+ IGithubIssue,
+ IDiscussTopic
+} from '../../../utils/front/api'
+
+import data from '../data.json'
+import sharedStyles from '../styles.module.css'
+import styles from './styles.module.css'
+
+const { description, mobileDescription, title } = data.section.meet
+const logIssueAll = (): void => logEvent('community', 'issue', 'all')
+const logTopicAll = (): void => logEvent('community', 'topic', 'all')
+const logDiscord = (): void => logEvent('community', 'discord')
+
+const Topic: React.SFC<{ color: string } & IDiscussTopic> = ({
+ url,
+ title,
+ date,
+ comments,
+ color
+}) => {
+ const logTopic = useCallback(() => logEvent('community', 'forum', title), [
+ title
+ ])
+
+ return (
+
+
+
+
+ )
+}
+
+export default Meet
diff --git a/src/components/Community/Meet/styles.js b/src/components/Community/Meet/styles.module.css
similarity index 54%
rename from src/components/Community/Meet/styles.js
rename to src/components/Community/Meet/styles.module.css
index 37fbe5bf41..f611fd26fa 100644
--- a/src/components/Community/Meet/styles.js
+++ b/src/components/Community/Meet/styles.module.css
@@ -1,26 +1,23 @@
-import styled from 'styled-components'
-import { media } from '../../../styles'
-
-export const Stats = styled.div`
- ${media.tablet`
+.stats {
+ @media (--sm-scr) {
display: flex;
flex-direction: row;
margin-top: 15px;
- `}
-`
+ }
+}
-export const StatLabel = styled.div`
+.statLabel {
font-size: 16px;
line-height: 20px;
- color: #838d93;
-`
+ color: var(--color-gray);
+}
-export const StatLine = styled.div`
+.statLine {
display: flex;
align-items: center;
margin-top: 25px;
- ${media.tablet`
+ @media (--sm-scr) {
flex-direction: column;
flex-basis: 50%;
align-items: flex-start;
@@ -29,23 +26,22 @@ export const StatLine = styled.div`
& + & {
margin-left: 25px;
}
- `}
-`
+ }
+}
-export const StatValue = styled.div`
+.statValue {
flex: 0 0 124px;
margin-right: 20px;
+ font-family: var(--font-brandon);
font-size: 40px;
- font-family: BrandonGrotesque;
+ line-height: 50px;
font-weight: 900;
text-align: right;
- line-height: 50px;
- color: #24292e;
+ color: var(--color-black);
- ${media.tablet`
+ @media (--sm-scr) {
flex: initial;
font-size: 30px;
- font-family: BrandonGrotesque;
line-height: 40px;
- `}
-`
+ }
+}
diff --git a/src/components/Community/Section/index.js b/src/components/Community/Section/index.js
deleted file mode 100644
index c13a6ff357..0000000000
--- a/src/components/Community/Section/index.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { useCallback, useEffect, useState } from 'react'
-import { useLocation } from '@reach/router'
-import { Collapse } from 'react-collapse'
-import { useWindowSize } from 'react-use'
-
-import {
- DesktopDescription,
- Header,
- Icon,
- MobileDescription,
- Picture,
- Title,
- Wrapper
-} from './styles'
-
-import { sizes } from '../../../styles'
-
-export default function CommunitySection({
- anchor,
- background,
- color,
- contentVisible = false,
- children,
- description,
- icon,
- mobileDescription,
- title
-}) {
- const [isTablet, setIsTablet] = useState(false)
- const [isContentVisible, setIsContentVisible] = useState(contentVisible)
- const toggleVisibility = useCallback(
- () => setIsContentVisible(!isContentVisible),
- [isContentVisible]
- )
-
- const { width } = useWindowSize()
- const location = useLocation()
-
- useEffect(() => {
- if (anchor && location.hash === `#${anchor}`) {
- setIsContentVisible(true)
- }
- }, [location.hash])
-
- useEffect(() => setIsTablet(width <= sizes.tablet), [width])
-
- return (
-
-
-
- {background && {children}
- ) : (
- children
- )}
-
- )
-}
-
-CommunitySection.propTypes = {
- anchor: PropTypes.string,
- background: PropTypes.string,
- color: PropTypes.string,
- contentVisible: PropTypes.bool,
- children: PropTypes.node,
- description: PropTypes.string,
- icon: PropTypes.string,
- mobileDescription: PropTypes.string,
- title: PropTypes.string
-}
diff --git a/src/components/Community/Section/index.tsx b/src/components/Community/Section/index.tsx
new file mode 100644
index 0000000000..af75757b8c
--- /dev/null
+++ b/src/components/Community/Section/index.tsx
@@ -0,0 +1,100 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import cn from 'classnames'
+import { useLocation } from '@reach/router'
+import { Collapse } from 'react-collapse'
+import { useWindowSize } from 'react-use'
+
+import { isTriggeredFromKB } from '../../../utils/front/keyboard'
+import { screens } from '../../../../config/postcss/media'
+
+import styles from './styles.module.css'
+
+interface ICommunitySection {
+ anchor: string
+ background?: string
+ color: string
+ contentVisible?: boolean
+ children: React.ReactNode
+ description: string
+ icon: string
+ mobileDescription: string
+ title: string
+}
+
+const Section: React.SFC = ({
+ anchor,
+ background,
+ color,
+ contentVisible = false,
+ children,
+ description,
+ icon,
+ mobileDescription,
+ title
+}) => {
+ const [isTablet, setIsTablet] = useState(false)
+ const [isContentVisible, setIsContentVisible] = useState(contentVisible)
+ const toggleVisibility = useCallback(
+ () => setIsContentVisible(!isContentVisible),
+ [isContentVisible]
+ )
+ const toggleFromKeyboard = useCallback(
+ (e: React.KeyboardEvent) => {
+ if (isTriggeredFromKB(e)) {
+ toggleVisibility()
+ }
+ },
+ [toggleVisibility]
+ )
+ const { width } = useWindowSize()
+ const location = useLocation()
+
+ useEffect(() => {
+ if (anchor && location.hash === `#${anchor}`) {
+ setIsContentVisible(true)
+ }
+ }, [location.hash])
+
+ useEffect(() => setIsTablet(width <= screens.tablet), [width])
+
+ return (
+
-
-
- )
-}
diff --git a/src/components/Community/index.tsx b/src/components/Community/index.tsx
new file mode 100644
index 0000000000..788efc7159
--- /dev/null
+++ b/src/components/Community/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+
+import PageContent from '../PageContent'
+
+import SubscribeSection from '../SubscribeSection'
+import Hero from './Hero'
+import Meet from './Meet'
+import Contribute from './Contribute'
+import Learn from './Learn'
+import Events from './Events'
+
+import styles from './styles.module.css'
+
+const themes = {
+ green: { backgroundColor: '#C2E6EE', color: '#13ADC7' },
+ orange: { backgroundColor: '#EFD8D1', color: '#F46737' },
+ purple: { backgroundColor: '#DCD6F1', color: '#955DD6' }
+}
+
+export interface ICommunitySectionTheme {
+ backgroundColor: string
+ color: string
+}
+
+const Community: React.SFC = () => (
+ <>
+
+
+
-
- Learn more
- 
-
-
-)
-
-LearnMore.propTypes = {
- href: PropTypes.string.isRequired
-}
-
-const ColumnOne = () => (
-
- ML project version control
-
-
-
-)
-
-const ColumnTwo = () => (
-
- ML experiment management
-
-
-
-)
-
-const ColumnThree = () => (
-
- Deployment & Collaboration
-
-
-
-)
-
-export default class DiagramSection extends Component {
- render() {
- const imagesSliderProps = {
- slidesToShow: 1,
- slidesToScroll: 1,
- initialSlide: 1,
- infinite: true,
- speed: 600,
- buttons: true,
- dots: true,
- appendDots: dots => {dots}
- }
-
- return (
-
-
- DVC tracks ML models and data sets
-
- DVC is built to make ML models shareable and reproducible. It is
- designed to handle large files, data sets, machine learning models,
- and metrics as well as code.
-
-
-
-
- 
-
-
-
-
-
-
-
-
-
- 
-
-
- 
-
-
- 
-
-
-
-
-
-
- )
- }
-}
diff --git a/src/components/Diagram/styles.js b/src/components/Diagram/styles.js
deleted file mode 100644
index 34ab734608..0000000000
--- a/src/components/Diagram/styles.js
+++ /dev/null
@@ -1,187 +0,0 @@
-import styled from 'styled-components'
-
-import { column, columns, container, media } from '../../styles'
-
-export const Diagram = styled.section`
- padding-top: 80px;
- padding-bottom: 91px;
-`
-
-export const Container = styled.div`
- ${container};
-`
-
-export const Title = styled.div`
- font-family: BrandonGrotesque;
- max-width: 550px;
- min-height: 44px;
- font-size: 30px;
- font-weight: 500;
- text-align: center;
- color: #40364d;
- margin: 0px auto;
-`
-
-export const Abstract = styled.div`
- margin: 0px auto;
- padding-top: 10px;
- max-width: 590px;
- min-height: 50px;
- font-size: 16px;
- text-align: center;
- color: #5f6c72;
- line-height: 1.5;
-`
-
-export const Graphic = styled.section`
- width: 100%;
- margin-top: 49px;
-
- img {
- width: 100%;
- max-width: 900px;
- max-height: 445px;
- }
-
- ${media.phablet`
- overflow-x: scroll;
- overflow-y: hidden;
- `};
-
- @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
- overflow-x: scroll;
- overflow-y: hidden;
- }
-`
-
-export const Columns = styled.div`
- ${columns};
- margin-top: 10px;
- flex-direction: row;
- justify-content: center;
- align-items: flex-start;
- ${media.tablet`flex-direction: column;`};
-`
-
-export const Column = styled.div`
- ${column};
- max-width: 33.3%;
- display: block;
- margin-top: 49px;
- padding: 0 10px;
- box-sizing: border-box;
-
- ${media.tablet`
- margin-right: 0px;
- flex-basis: auto;
- max-width: 100%;
- `};
-
- ${media.phablet`
- margin-top: 20px;
- flex-basis: auto;
- max-width: 100%;
- `};
-`
-
-export const Caption = styled.h3`
- font-family: BrandonGrotesque;
- margin-bottom: 12px;
- font-size: 20px;
- font-weight: 500;
- color: ${props => props.text};
-`
-
-export const Description = styled.div`
- max-width: ${props => (props.fullWidth ? '100%' : '311px')};
- font-size: 16px;
- color: #5f6c72;
-
- p {
- margin-bottom: 24px;
-
- ${media.tablet`
- margin-bottom: 12px;
- `};
- }
-`
-
-export const LearnMoreArea = styled.div`
- font-family: BrandonGrotesque;
- line-height: 28px;
- font-size: 20px;
- font-weight: 500;
- color: #945dd6;
-
- img {
- margin-left: 19px;
- margin-top: 3px;
- }
-
- a {
- display: flex;
- align-items: center;
- text-decoration: none;
- color: #945dd6;
- }
-
- a:hover {
- color: #745cb7;
- }
-
- a:visited {
- color: #945dd6;
- }
-
- a:visited:hover {
- color: #745cb7;
- }
-`
-
-export const SliderWrapper = styled.div`
- .slick-next,
- .slick-prev {
- height: 30px;
- width: 30px;
- z-index: 3;
- }
-
- .slick-next {
- right: -25px;
- }
-
- .slick-prev {
- left: -25px;
- }
-
- .slick-next:before,
- .slick-prev:before {
- font-size: 30px;
- line-height: 1;
- opacity: 0.35;
- color: #40364d;
- }
-
- img {
- pointer-events: none;
- }
-`
-
-export const Slide = styled.div`
- width: 100%;
- img {
- padding-top: 20px;
- padding-bottom: 20px;
- width: 100%;
- max-width: 380px;
- margin: 0 auto;
- }
-`
-
-export const SliderDots = styled.ul`
- margin-bottom: -20px;
-
- li button::before {
- font-size: 8px;
- }
-`
diff --git a/src/components/SearchForm/index.js b/src/components/Documentation/Layout/SearchForm/index.tsx
similarity index 63%
rename from src/components/SearchForm/index.js
rename to src/components/Documentation/Layout/SearchForm/index.tsx
index a97911c835..3782598049 100644
--- a/src/components/SearchForm/index.js
+++ b/src/components/Documentation/Layout/SearchForm/index.tsx
@@ -1,19 +1,20 @@
import React, { useEffect, useState } from 'react'
import Promise from 'promise-polyfill'
-import { loadResource } from '../../utils/resources'
+import { loadResource } from '../../../../utils/front/resources'
-import { SearchArea, Input, Wrapper } from './styles'
+import styles from './styles.module.css'
-export default function SearchForm(props) {
+declare global {
+ // eslint-disable-next-line @typescript-eslint/interface-name-prefix
+ interface Window {
+ docsearch?: (opts: object) => void
+ }
+}
+
+const SearchForm: React.SFC = props => {
const [isLoaded, setLoaded] = useState(false)
useEffect(() => {
- // When mailchimp loads it adds AMD support and docsearch define new AMD
- // unnamed(!) modules instead of global variable
- if (window.define) {
- window.define.amd = false
- }
-
Promise.all([
loadResource(
'https://cdn.jsdelivr.net/npm/docsearch.js@2.6.2/dist/cdn/docsearch.min.css'
@@ -41,15 +42,18 @@ export default function SearchForm(props) {
}
return (
-
-
-
+
)
}
+
+export default SearchForm
diff --git a/src/components/SearchForm/styles.js b/src/components/Documentation/Layout/SearchForm/styles.module.css
similarity index 67%
rename from src/components/SearchForm/styles.js
rename to src/components/Documentation/Layout/SearchForm/styles.module.css
index bc74136b77..bb0ea37041 100644
--- a/src/components/SearchForm/styles.js
+++ b/src/components/Documentation/Layout/SearchForm/styles.module.css
@@ -1,8 +1,4 @@
-import styled from 'styled-components'
-
-import { media } from '../../styles'
-
-export const SearchArea = styled.div`
+.searchArea {
box-sizing: border-box;
height: 60px;
padding-top: 10px;
@@ -15,40 +11,43 @@ export const SearchArea = styled.div`
);
z-index: 10;
position: sticky;
- top: var(--layout-header-height-scrolled);
+ top: var(--layout-header-height-collapsed);
- ${media.phablet`
+ @media (--xs-scr) {
position: relative;
padding: 10px 20px 0;
top: 0;
- `};
+ }
- form {
+ input {
height: 40px;
}
-`
-export const Wrapper = styled.form`
+ :global(.algolia-autocomplete .ds-dropdown-menu) {
+ margin-top: -5px;
+ }
+}
+
+.container {
width: 100%;
height: 100%;
display: flex;
-`
+}
-export const Input = styled.input`
+.input {
+ box-sizing: border-box;
display: flex;
flex: 1;
+ width: 240px;
height: 100%;
- border-radius: 200px;
- background-color: #ffffff;
- border: solid 1px #dbe4ea;
padding-left: 48px;
padding-right: 24px;
+ border: solid 1px var(--color-lighter-blue);
+ border-radius: 200px;
+ background-color: #fff;
background-image: url('/img/search.svg');
background-repeat: no-repeat;
background-position: 15px center;
font-size: 16px;
font-weight: 500;
- width: 240px;
- box-sizing: border-box;
- display: block;
-`
+}
diff --git a/src/components/Documentation/Layout/SidebarMenu/index.js b/src/components/Documentation/Layout/SidebarMenu/index.js
deleted file mode 100644
index f764aaa60c..0000000000
--- a/src/components/Documentation/Layout/SidebarMenu/index.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import { Collapse } from 'react-collapse'
-import PerfectScrollbar from 'perfect-scrollbar'
-import PropTypes from 'prop-types'
-import includes from 'lodash.includes'
-
-import 'perfect-scrollbar/css/perfect-scrollbar.css'
-
-import DownloadButton from '../../../DownloadButton'
-import Link from '../../../Link'
-
-import {
- getParentsListFromPath,
- getPathWithSoruce
-} from '../../../../utils/sidebar'
-
-import { OnlyDesktop } from '../../../../styles'
-
-import { Menu, SectionLink, SectionLinks, Sections, SideFooter } from './styles'
-
-function SidebarMenuItem({ children, label, path, activePaths, onClick }) {
- const isActive = activePaths && includes(activePaths, path)
- const isRootParent =
- activePaths && activePaths.length > 1 && activePaths[0] === path
-
- return (
- <>
-
- {label}
-
- {children && (
-
diff --git a/src/components/BlogPost/HeroPic/styles.module.css b/src/components/Blog/Post/HeroPic/styles.module.css
similarity index 100%
rename from src/components/BlogPost/HeroPic/styles.module.css
rename to src/components/Blog/Post/HeroPic/styles.module.css
diff --git a/src/components/Blog/Post/Markdown/index.tsx b/src/components/Blog/Post/Markdown/index.tsx
new file mode 100644
index 0000000000..abf82be6eb
--- /dev/null
+++ b/src/components/Blog/Post/Markdown/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+
+import styles from './styles.module.css'
+
+interface IMarkdownProps {
+ html: string
+}
+
+const Markdown: React.SFC = ({ html }) => (
+
+)
+
+export default Markdown
diff --git a/src/components/BlogPost/Markdown/styles.module.css b/src/components/Blog/Post/Markdown/styles.module.css
similarity index 100%
rename from src/components/BlogPost/Markdown/styles.module.css
rename to src/components/Blog/Post/Markdown/styles.module.css
diff --git a/src/components/BlogPost/Share/icons/facebook.svg b/src/components/Blog/Post/Share/icons/facebook.svg
similarity index 100%
rename from src/components/BlogPost/Share/icons/facebook.svg
rename to src/components/Blog/Post/Share/icons/facebook.svg
diff --git a/src/components/BlogPost/Share/icons/subscribe.svg b/src/components/Blog/Post/Share/icons/subscribe.svg
similarity index 100%
rename from src/components/BlogPost/Share/icons/subscribe.svg
rename to src/components/Blog/Post/Share/icons/subscribe.svg
diff --git a/src/components/BlogPost/Share/icons/twitter.svg b/src/components/Blog/Post/Share/icons/twitter.svg
similarity index 100%
rename from src/components/BlogPost/Share/icons/twitter.svg
rename to src/components/Blog/Post/Share/icons/twitter.svg
diff --git a/src/components/BlogPost/Share/index.tsx b/src/components/Blog/Post/Share/index.tsx
similarity index 92%
rename from src/components/BlogPost/Share/index.tsx
rename to src/components/Blog/Post/Share/index.tsx
index 4503bafa95..50a7d49634 100644
--- a/src/components/BlogPost/Share/index.tsx
+++ b/src/components/Blog/Post/Share/index.tsx
@@ -1,7 +1,7 @@
import { graphql, useStaticQuery } from 'gatsby'
import React, { useCallback } from 'react'
-import Link from '../../Link'
+import Link from '../../../Link'
import Tooltip from '../Tooltip'
import { ReactComponent as Facebook } from './icons/facebook.svg'
@@ -10,7 +10,7 @@ import { ReactComponent as Twitter } from './icons/twitter.svg'
import styles from './styles.module.css'
-function openWindow(e: React.MouseEvent, href: string) {
+function openWindow(e: React.MouseEvent, href: string): void {
e.preventDefault()
window.open(
@@ -26,7 +26,7 @@ interface IShareProps {
slug: string
}
-function Share({ className, text, slug }: IShareProps) {
+const Share: React.SFC = ({ className, text, slug }) => {
const {
site: {
siteMetadata: { siteUrl }
diff --git a/src/components/BlogPost/Share/styles.module.css b/src/components/Blog/Post/Share/styles.module.css
similarity index 100%
rename from src/components/BlogPost/Share/styles.module.css
rename to src/components/Blog/Post/Share/styles.module.css
diff --git a/src/components/BlogPost/Tooltip/index.tsx b/src/components/Blog/Post/Tooltip/index.tsx
similarity index 89%
rename from src/components/BlogPost/Tooltip/index.tsx
rename to src/components/Blog/Post/Tooltip/index.tsx
index 967ce55de1..8f2e3443c1 100644
--- a/src/components/BlogPost/Tooltip/index.tsx
+++ b/src/components/Blog/Post/Tooltip/index.tsx
@@ -29,7 +29,9 @@ const centered: Position = (triggerRect, tooltipRect) => {
return result
}
-const portalStyle = (triggerRect: DOMRect | null) => {
+const portalStyle = (
+ triggerRect: DOMRect | null
+): { left?: number; top?: number } => {
if (!triggerRect) {
return { left: 0, top: 0 }
}
@@ -42,7 +44,11 @@ const portalStyle = (triggerRect: DOMRect | null) => {
}
}
-function ModifiedTooltip({ children, label, ariaLabel }: TooltipProps) {
+const ModifiedTooltip: React.SFC = ({
+ children,
+ label,
+ ariaLabel
+}) => {
const [trigger, tooltip] = useTooltip()
const { isVisible, triggerRect } = tooltip
diff --git a/src/components/BlogPost/Tooltip/styles.module.css b/src/components/Blog/Post/Tooltip/styles.module.css
similarity index 100%
rename from src/components/BlogPost/Tooltip/styles.module.css
rename to src/components/Blog/Post/Tooltip/styles.module.css
diff --git a/src/components/BlogPost/index.tsx b/src/components/Blog/Post/index.tsx
similarity index 83%
rename from src/components/BlogPost/index.tsx
rename to src/components/Blog/Post/index.tsx
index 369f0149b2..7756842cdf 100644
--- a/src/components/BlogPost/index.tsx
+++ b/src/components/Blog/Post/index.tsx
@@ -3,24 +3,24 @@ import cn from 'classnames'
import React, { useMemo, useRef } from 'react'
import { useWindowScroll, useWindowSize } from 'react-use'
-import { IBlogPostData } from '../../templates/blog-post'
+import { IBlogPostData } from '../../../templates/blog-post'
-import { useCommentsCount } from '../../utils/api'
-import { pluralizeComments } from '../../utils/i18n'
-import tagToSlug from '../../utils/tagToSlug'
+import { useCommentsCount } from '../../../utils/front/api'
+import { pluralizeComments } from '../../../utils/front/i18n'
+import tagToSlug from '../../../utils/shared/tagToSlug'
import Markdown from './Markdown'
-import BlogFeedMeta from '../BlogFeedMeta'
-import Link from '../Link'
-import PseudoButton from '../PseudoButton'
+import FeedMeta from '../FeedMeta'
+import Link from '../../Link'
+import PseudoButton from '../../PseudoButton'
import HeroPic from './HeroPic'
import Share from './Share'
-import PageContent from '../PageContent'
-import Subscribe from '../Subscribe'
+import PageContent from '../../PageContent'
+import SubscribeSection from '../../SubscribeSection'
import styles from './styles.module.css'
-const BlogPost: React.SFC = ({
+const Post: React.SFC = ({
html,
timeToRead,
frontmatter,
@@ -80,7 +80,7 @@ const BlogPost: React.SFC = ({
) : (
= ({
Discuss this post
- {pluralizeComments(result)}
+ {pluralizeComments(result || 0)}
)}
{description}
)}
-
+ {title && (
+
+)
+
+export default Block
diff --git a/src/components/Community/Block/styles.js b/src/components/Community/Block/styles.module.css
similarity index 59%
rename from src/components/Community/Block/styles.js
rename to src/components/Community/Block/styles.module.css
index f0b65fbd75..9b5c865b31 100644
--- a/src/components/Community/Block/styles.js
+++ b/src/components/Community/Block/styles.module.css
@@ -1,53 +1,50 @@
-import styled from 'styled-components'
-import { media } from '../../../styles'
-
-export const Action = styled.div`
- margin-top: 20px;
-`
-
-export const Content = styled.div`
- flex-grow: 1;
- font-size: 16px;
- line-height: 24px;
- color: #838d93;
-`
+.container {
+ box-sizing: border-box;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: stretch;
+ width: 100%;
+ padding: 10px 20px 20px;
+ border-radius: 20px;
+ background: var(--color-light-blue);
+}
-export const Header = styled.div`
+.header {
display: flex;
justify-content: space-between;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #d8dfe3;
- font-family: BrandonGrotesque;
+ font-family: var(--font-brandon);
font-size: 24px;
font-weight: 500;
line-height: 34px;
- color: #24292e;
+ color: var(--color-black);
- ${media.tablet`
+ @media (--sm-scr) {
margin: 0;
border: none;
font-size: 20px;
line-height: 30px;
- `}
-`
+ }
+}
-export const Icon = styled.img`
+.action {
+ margin-top: 20px;
+}
+
+.content {
+ flex-grow: 1;
+ font-size: 16px;
+ line-height: 24px;
+ color: var(--color-gray);
+}
+
+.icon {
margin: 0 -2px 0 0;
- ${media.tablet`
+ @media (--sm-scr) {
display: none;
- `}
-`
-
-export const Wrapper = styled.div`
- box-sizing: border-box;
- position: relative;
- display: flex;
- flex-direction: column;
- justify-content: stretch;
- width: 100%;
- padding: 10px 20px 20px;
- border-radius: 20px;
- background: #eef4f8;
-`
+ }
+}
diff --git a/src/components/Community/Contribute/index.js b/src/components/Community/Contribute/index.tsx
similarity index 60%
rename from src/components/Community/Contribute/index.js
rename to src/components/Community/Contribute/index.tsx
index ea3323df83..fc9b459822 100644
--- a/src/components/Community/Contribute/index.js
+++ b/src/components/Community/Contribute/index.tsx
@@ -1,25 +1,27 @@
import React from 'react'
-import PropTypes from 'prop-types'
-
-import { logEvent } from '../../../utils/ga'
+import { ICommunitySectionTheme } from '../'
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import Link from '../../Link'
import CommunityBlock from '../Block'
import CommunitySection from '../Section'
+import { logEvent } from '../../../utils/front/ga'
-import data from '../data'
-
-import { Button, Item, Items, Wrapper } from '../styles'
+import data from '../data.json'
+import sharedStyles from '../styles.module.css'
const { description, mobileDescription, title } = data.section.contribute
-const logPR = () => logEvent('community', 'contribute-pr')
-const logBlogpost = () => logEvent('community', 'contribute-blogpost')
-const logTalk = () => logEvent('community', 'contribute-talk')
-const logAmbassador = () => logEvent('community', 'contribute-ambassador')
+const logPR = (): void => logEvent('community', 'contribute-pr')
+const logBlogpost = (): void => logEvent('community', 'contribute-blogpost')
+const logTalk = (): void => logEvent('community', 'contribute-talk')
+const logAmbassador = (): void => logEvent('community', 'contribute-ambassador')
-export default function CommunityContribute({ theme }) {
+const Contribute: React.SFC<{ theme: ICommunitySectionTheme }> = ({
+ theme
+}) => {
return (
-
+ {title}
+ {icon && 
}
+
+ )}
+ {children}
+ {action && {action}
}
+
+
Go to Github
-
+
}
>
Let's build something great together. Become a DVC
contributor!.
-
- -
+
+
Let’s talk!
-
+
}
>
We're always interested in guest writers for our blog. If you
have something to share, please reach out!
-
- -
+
+
Let’s talk!
-
+
}
>
We support speakers all over the world and help with preparation,
speaker training and expenses.
-
- -
+
+
Let’s talk!
-
+
}
>
Get perks and benefits for contributing to the code base, writing
blog posts, or hosting meetups.
-
-
+
+
+
+ {description}
+
+ {city}, {format(new Date(date), 'MMMM d')}
+
+
+ {eventsItems.map((event, key) => (
+
+
+ {event &&
+ ))}
+
+ {pictureUrl && (
+
+ 
+
+ )}
+
+ )
+}
+
+interface ICommunityUserContentProps {
+ author: string
+ color: string
+ date: string
+ pictureUrl: string
+ title: string
+ url: string
+}
+
+const UserContent: React.SFC
+
+ {title}
+
+
+
+ {ready && !error && (
+ <>
+
+ {pluralizeComments(result || 0)}
+
+ {' • '}
+
+ )}
+
+ {format(new Date(date), 'MMM, d')}
+
+
+
+ {pictureUrl && (
+
+
+
+ )}
+
+ )
+}
+
+interface ICommunityDocumentationProps {
+ color: string
+ description: string
+ title: string
+ url: string
+}
+
+const Documentation: React.SFC
+
+ {title}
+
+
+
+ {author} •{' '}
+
+ {format(new Date(date), 'MMM, d')}
+
+
+
+
+ {title}
+
+
+ )
+}
+
+const Learn: React.SFC<{ theme: ICommunitySectionTheme }> = ({ theme }) => {
+ const posts = getPosts()
+
+ return (
+ {description}
+
+
+
+
+ Documentation
+
+ }
+ action={
+
+ See all docs
+
+ }
+ >
+ {documentation.map(documentation => (
+
+
+
+
+ DVC Blog
+
+ }
+ action={
+ posts && (
+
+ See all Posts
+
+ )
+ }
+ >
+ {posts.map(post => (
+
+
+
+
+ {userContent.map(userContent => (
+
+
+
+
+ {title}
+
+
+ )
+}
+
+const Issue: React.SFC<{ color: string } & IGithubIssue> = ({
+ url,
+ title,
+ date,
+ comments,
+ color
+}) => {
+ const logIssue = useCallback(() => logEvent('community', 'issue', title), [
+ title
+ ])
+
+ return (
+
+
+ {pluralizeComments(comments)}
+
+ {` • last activity ${formatDistanceToNow(new Date(date))} ago`}
+
+
+
+ {title}
+
+
+ )
+}
+
+const Meet: React.SFC<{ theme: ICommunitySectionTheme }> = ({ theme }) => {
+ const { error: issuesError, ready: issuesReady, result: issues } = useIssues()
+ const { error: topicsError, ready: topicsReady, result: topics } = useTopics()
+
+ return (
+
+
+ {pluralizeComments(comments)}
+
+ {` • opened ${formatDistanceToNow(new Date(date))} ago`}
+
+
+
+
+
+ Join the Dev Chat
+
+ }
+ action={
+
+ Open Chat
+
+ }
+ icon="/img/community/discord.svg"
+ >
+
+
+
+ Need urgent help? Ask advice from experienced developers online
+
+
+
+
+
+ {data.stats.users}
+ registered developers
+
+
+ {data.stats.messages}
+
+ messages posted over the past month
+
+
+
+ Ask a Question
+
+ }
+ action={
+ topics && (
+
+ Read All Topics
+
+ )
+ }
+ icon="/img/community/discourse.svg"
+ >
+ {!topicsReady && (
+
+
+ Loading...
+ )}
+ {topicsError && (
+
+ Forum unavailable right now
+
+ )}
+ {topics &&
+ topics.map(topic => (
+
+
+ Post an Issue
+
+ }
+ action={
+ issues && (
+
+ Read All Issues
+
+ )
+ }
+ icon="/img/community/github.svg"
+ >
+ {!issuesReady && (
+
+
+ Loading...
+ )}
+ {issuesError && (
+
+ Github unavailable right now
+
+ )}
+ {issues &&
+ issues.map(issue => (
+
- {title}
- {description}
- {mobileDescription}
-
-
+ 
}
+
+ {isTablet ? (
+ {children}
+ ) : (
+ children
+ )}
+
+ )
+}
+
+export default Section
diff --git a/src/components/Community/Section/styles.js b/src/components/Community/Section/styles.js
deleted file mode 100644
index 2c4b416985..0000000000
--- a/src/components/Community/Section/styles.js
+++ /dev/null
@@ -1,106 +0,0 @@
-import styled from 'styled-components'
-import { media } from '../../../styles'
-
-export const Wrapper = styled.div`
- position: relative;
- margin: 50px -50px;
- padding: ${({ hasBg }) => (hasBg ? '0 50px 260px' : '0 50px')};
-
- ${media.desktop`
- padding: ${({ hasBg }) => (hasBg ? '0 65px 260px' : '0 65px')};
- `}
-
- ${media.tablet`
- margin: 0;
- padding: 20px 0;
- `}
-
- .ReactCollapse--collapse {
- transition: height 500ms;
- }
-`
-
-export const Header = styled.div`
- display: flex;
- color: ${({ color }) => color};
-`
-
-export const Title = styled.div`
- font-size: 40px;
- font-family: BrandonGrotesque;
- font-weight: 500;
- line-height: 60px;
-
- ${media.tablet`
- font-size: 30px;
- line-height: 35px;
- cursor: pointer;
-
- &::after {
- content: '';
-
- position: relative;
- display: inline-block;
- width: 0;
- height: 0;
- margin-left: 10px;
- border-left: 7px solid transparent;
- border-right: 7px solid transparent;
- border-top: 12px solid currentColor;
- transition: transform 200ms;
-
- ${({ isContentVisible }) =>
- isContentVisible &&
- `transform: rotate(-180deg)
- `}
-
- }
- `}
-`
-
-export const Icon = styled.img`
- width: 50px;
- height: 50px;
- margin: 5px 10px 0 0;
-`
-
-const Description = styled.div`
- max-width: 600px;
- font-size: 16px;
- line-height: 24px;
- color: #838d93;
-
- ${media.tablet`
- display: none;
- `};
-`
-
-export const DesktopDescription = styled(Description)`
- max-width: 600px;
-
- ${media.tablet`
- display: none;
- `};
-`
-
-export const MobileDescription = styled(Description)`
- display: none;
-
- ${media.tablet`
- display: block;
- `};
-`
-
-export const Picture = styled.img`
- z-index: -1;
- position: absolute;
- bottom: 0;
- left: 50%;
- width: 1100px;
- height: 450px;
- margin-left: -550px;
-
- ${media.tablet`
- display: none;
- `}
-`
diff --git a/src/components/Community/Section/styles.module.css b/src/components/Community/Section/styles.module.css
new file mode 100644
index 0000000000..bbecaae494
--- /dev/null
+++ b/src/components/Community/Section/styles.module.css
@@ -0,0 +1,107 @@
+.container {
+ position: relative;
+ margin: 50px -50px;
+ padding: 0 50px;
+
+ &.hasBg {
+ padding: 0 50px 260px;
+ }
+
+ @media (--md-scr) {
+ padding: 0 40px;
+ margin-left: -15px;
+ margin-right: -15px;
+ overflow: hidden;
+
+ &.hasBg {
+ padding: 0 40px 260px;
+ }
+ }
+
+ @media (--sm-scr) {
+ margin: 0;
+ padding: 20px 0;
+
+ &.hasBg {
+ margin: 0;
+ padding: 20px 0;
+ }
+ }
+
+ :global(.ReactCollapse--collapse) {
+ transition: height 500ms;
+ }
+}
+
+.header {
+ display: flex;
+}
+
+.title {
+ font-family: var(--font-brandon);
+ font-size: 40px;
+ font-weight: 500;
+ line-height: 60px;
+
+ @media (--sm-scr) {
+ font-size: 30px;
+ line-height: 35px;
+ cursor: pointer;
+
+ &::after {
+ content: '';
+ position: relative;
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-left: 10px;
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-top: 12px solid currentColor;
+ transition: transform 200ms;
+ }
+
+ &.isContentVisible::after {
+ transform: rotate(-180deg);
+ }
+ }
+}
+
+.icon {
+ width: 50px;
+ height: 50px;
+ margin: 5px 10px 0 0;
+}
+
+.description {
+ max-width: 600px;
+ font-size: 16px;
+ line-height: 24px;
+ color: var(--color-gray);
+
+ @media (--sm-scr) {
+ display: none;
+ }
+
+ &.mobile {
+ display: none;
+
+ @media (--sm-scr) {
+ display: block;
+ }
+ }
+}
+
+.picture {
+ position: absolute;
+ z-index: -1;
+ bottom: 0;
+ left: 50%;
+ width: 1100px;
+ height: 450px;
+ margin-left: -550px;
+
+ @media (--sm-scr) {
+ display: none;
+ }
+}
diff --git a/src/components/Community/index.js b/src/components/Community/index.js
deleted file mode 100644
index e711d01f63..0000000000
--- a/src/components/Community/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react'
-
-import Subscribe from '../Subscribe'
-
-import CommunityContribute from './Contribute'
-import CommunityEvents from './Events'
-import CommunityHero from './Hero'
-import CommunityLearn from './Learn'
-import CommunityMeet from './Meet'
-
-import { PageWrapper } from './styles'
-
-const themes = {
- green: { backgroundColor: '#C2E6EE', color: '#13ADC7' },
- orange: { backgroundColor: '#EFD8D1', color: '#F46737' },
- purple: { backgroundColor: '#DCD6F1', color: '#955DD6' }
-}
-
-export default function Community() {
- return (
- <>
-
+
+
+ {background &&
+
+
+ {title}
+
+ {description}
+
+ {mobileDescription}
+
+
-
- - Version control machine learning models, data sets and intermediate - files. DVC connects them with code, and uses Amazon S3, Microsoft Azure - Blob Storage, Google Drive, Google Cloud Storage, Aliyun OSS, SSH/SFTP, - HDFS, HTTP, network-attached storage, or disc to store file contents. -
-- Full code and data provenance help track the complete evolution of every - ML model. This guarantees reproducibility and makes it easy to switch - back and forth between experiments. -
-- Harness the full power of Git branches to try different ideas instead of - sloppy file suffixes and comments in code. Use automatic metric-tracking - to navigate instead of paper and pencil. -
-- DVC was designed to keep branching as simple and fast as in Git — no - matter the data file size. Along with first-class citizen metrics and ML - pipelines, it means that a project has cleaner structure. It's easy - to compare ideas and pick the best. Iterations become faster with - intermediate artifact caching. -
-- Instead of ad-hoc scripts, use push/pull commands to move consistent - bundles of ML models, data, and code into production, remote machines, - or a colleague's computer. -
-- DVC introduces lightweight pipelines as a first-class citizen mechanism - in Git. They are language-agnostic and connect multiple steps into a - DAG. These pipelines are used to remove friction from getting code into - production. -
-
-
-
-
-
+
-
-
+
+
+
+
+
+ )
+}
+
+export default SidebarMenu
diff --git a/src/components/Documentation/Layout/SidebarMenu/styles.js b/src/components/Documentation/Layout/SidebarMenu/styles.js
deleted file mode 100644
index 2253caaa33..0000000000
--- a/src/components/Documentation/Layout/SidebarMenu/styles.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import styled from 'styled-components'
-
-import { media } from '../../../../styles'
-
-export const Menu = styled.div`
- position: sticky;
- top: calc(var(--layout-header-height-scrolled) + 60px);
- height: calc(100vh - var(--layout-header-height-scrolled) - 60px);
- overflow-y: hidden;
- -webkit-overflow-scrolling: touch;
-
- .ReactCollapse--collapse {
- padding-left: 20px;
- transition: height 250ms;
- }
-
- ${props =>
- props.isScrollHidden &&
- `
- .ps__rail-y { opacity: 0; overflow: hidden; }
- `};
-
- ${media.phablet`
- position: relative;
- top: 0;
- height: calc(100% - 60px);
- padding-left: 20px;
- `};
-`
-
-export const Sections = styled.div`
- margin-bottom: 25px;
- margin-top: 10px;
- min-width: 280px;
-
- ${media.phablet`
- min-width: auto;
- `}
-`
-
-export const SectionLinks = styled.div`
- @media (max-width: 768px) {
- position: relative;
- }
-`
-
-const sectionLinkColor = '#b0b8c5'
-
-export const SectionLink = styled.a`
- display: block;
- position: relative;
- font-size: 18px;
- font-weight: 500;
- color: #b0b8c5;
- color: ${sectionLinkColor};
- text-decoration: none;
- font-weight: 400;
- line-height: 26px;
- min-height: 26px;
- padding-bottom: 5px;
- padding-left: 15px;
- margin: 0 0 0 5px;
-
- ${props =>
- props.isActive &&
- `
- color: #40364d;
- `};
-
- &:hover {
- color: #3c3937;
-
- ${media.phablet`
- color: ${sectionLinkColor};
- `}
- }
-
- &::before {
- content: '';
- display: block;
- position: absolute;
- width: 8px;
- height: 5px;
- background: url('/img/triangle_dark.svg') no-repeat center center;
- left: 0px;
- top: 10px;
-
- ${props =>
- props.isActive &&
- `
- transform: rotate(-90deg);
- `};
- }
-`
-
-export const SideFooter = styled.div`
- margin-top: 30px;
- padding-bottom: 30px;
-`
diff --git a/src/components/Documentation/Layout/SidebarMenu/styles.module.css b/src/components/Documentation/Layout/SidebarMenu/styles.module.css
new file mode 100644
index 0000000000..23764e27d8
--- /dev/null
+++ b/src/components/Documentation/Layout/SidebarMenu/styles.module.css
@@ -0,0 +1,88 @@
+.menu {
+ position: sticky;
+ top: calc(var(--layout-header-height-collapsed) + 60px);
+ height: calc(100vh - var(--layout-header-height-collapsed) - 60px);
+ overflow-y: hidden;
+ -webkit-overflow-scrolling: touch;
+
+ &.isScrollHidden {
+ .ps__rail-y {
+ opacity: 0;
+ overflow: hidden;
+ }
+ }
+
+ @media (--xs-scr) {
+ position: relative;
+ top: 0;
+ height: calc(100% - 60px);
+ padding-left: 20px;
+ }
+
+ :global(.ReactCollapse--collapse) {
+ padding-left: 20px;
+ transition: height 250ms;
+ }
+}
+
+.sections {
+ min-width: 280px;
+ margin-bottom: 25px;
+ margin-top: 10px;
+
+ @media (--xs-scr) {
+ min-width: auto;
+ }
+}
+
+.sectionLinks {
+ @media (--sm-scr) {
+ position: relative;
+ }
+}
+
+.sectionLink {
+ display: block;
+ position: relative;
+ min-height: 26px;
+ margin: 0 0 0 5px;
+ padding-left: 15px;
+ padding-bottom: 5px;
+ font-size: 18px;
+ line-height: 26px;
+ font-weight: 400;
+ text-decoration: none;
+ color: var(--color-gray-light);
+
+ &.active {
+ color: var(--color-gray-hover);
+ }
+
+ &:hover {
+ color: #3c3937;
+
+ @media (--xs-scr) {
+ color: var(--color-gray-light);
+ }
+ }
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 10px;
+ display: block;
+ height: 5px;
+ width: 8px;
+ background: url('/img/triangle_dark.svg') no-repeat center center;
+
+ &.active {
+ transform: rotate(-90deg);
+ }
+ }
+}
+
+.footer {
+ margin-top: 30px;
+ padding-bottom: 30px;
+}
diff --git a/src/components/Documentation/Layout/index.js b/src/components/Documentation/Layout/index.js
deleted file mode 100644
index abd03e5f2d..0000000000
--- a/src/components/Documentation/Layout/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React, { useCallback, useState } from 'react'
-import PropTypes from 'prop-types'
-import MainLayout, { LayoutModifiers } from '../../MainLayout'
-import Hamburger from '../../Hamburger'
-import SearchForm from '../../SearchForm'
-import SidebarMenu from './SidebarMenu'
-
-import { Container, Backdrop, Side, SideToggle } from './styles'
-
-import { structure } from '../../../utils/sidebar'
-
-const SIDEBAR_MENU = 'sidebar-menu'
-
-function Layout({ children, ...restProps }) {
- const [isMenuOpen, setIsMenuOpen] = useState(false)
-
- const toggleMenu = useCallback(() => setIsMenuOpen(!isMenuOpen), [isMenuOpen])
-
- return (
-
+
+
+ {structure.map(item => (
+
+
+
+
+
+ matchMedia('--xs-scr') ? toggleMenu() : undefined
+ }
+ />
+
+ {children}
+
+
+ {header}
+
+ {/* eslint-enable jsx-a11y/no-static-element-interactions*/}
+ {/* eslint-enable jsx-a11y/click-events-have-key-events */}
+
+
+
+
+
+
+
+ {header}
+{renderAst(htmlAst)}
-
+ {tutorials && (
+
+ )
+}
+
+export default Markdown
diff --git a/src/components/Documentation/Markdown/styles.js b/src/components/Documentation/Markdown/styles.module.css
similarity index 75%
rename from src/components/Documentation/Markdown/styles.js
rename to src/components/Documentation/Markdown/styles.module.css
index a5972137cb..7b6acba588 100644
--- a/src/components/Documentation/Markdown/styles.js
+++ b/src/components/Documentation/Markdown/styles.module.css
@@ -1,18 +1,4 @@
-import styled from 'styled-components'
-
-import { media } from '../../../styles'
-
-import { LightButton } from '../styles'
-
-export const Content = styled.article`
- min-width: 200px;
- margin: 30px;
- flex: 1;
-
- ${media.phablet`
- margin: 20px;
- `};
-
+:global {
ul {
list-style-type: disc;
}
@@ -25,12 +11,28 @@ export const Content = styled.article`
font-style: italic;
}
+ #markdown-root {
+ @keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+ }
+
+ animation-duration: 1s;
+ animation-fill-mode: both;
+
+ :local {
+ animation-name: fadeIn;
+ }
+ }
+
.markdown-body {
font-family: inherit;
font-size: 18px;
- animation-duration: 1s;
- animation-fill-mode: both;
- animation-name: fadeIn;
h1,
h2,
@@ -41,7 +43,7 @@ export const Content = styled.article`
font-weight: 500;
}
- a[target='_blank']:after {
+ a[target='_blank']::after {
position: relative;
top: 1px;
right: 0;
@@ -183,14 +185,14 @@ export const Content = styled.article`
}
.Collapsible__trigger {
- font-family: BrandonGrotesque;
+ font-family: var(--font-brandon);
font-weight: 500;
display: block;
position: relative;
opacity: 0.9;
cursor: pointer;
- &:after {
+ &::after {
position: absolute;
display: inline-block;
background-size: 20px 20px;
@@ -203,10 +205,8 @@ export const Content = styled.article`
transition: transform 200ms;
}
- &.is-open {
- &:after {
- opacity: 0.5;
- }
+ &.is-open::after {
+ opacity: 0.5;
}
}
@@ -217,128 +217,117 @@ export const Content = styled.article`
padding: 10px;
}
- @keyframes fadeIn {
- from {
- opacity: 0;
- }
-
- to {
- opacity: 1;
- }
- }
-
details p {
font-size: 17px;
- color: #454e53;
+ color: var(--color-gray-dark);
margin-left: 20px;
margin-right: 10px;
}
details pre {
font-size: 14px;
- color: #454e53;
+ color: var(--color-gray-dark);
margin-left: 20px;
margin-right: 10px;
}
-`
-
-export const NavigationButtons = styled.div`
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-top: 40px;
- font-weight: 600;
- font-size: 14px;
-`
-
-export const Button = styled.a`
- text-decoration: none;
- background: white;
- padding: 10px 15px;
- text-transform: uppercase;
- color: #333;
- border-bottom: 3px solid #13adc7;
- display: inline-flex;
- align-items: center;
- transition: 0.2s border-color ease-out;
+}
- &:hover {
- border-bottom: 3px solid #11849b;
- }
-
- i {
- display: inline-block;
- background-image: url(/img/arrow.svg);
- background-size: contain;
- background-position: center;
- background-repeat: no-repeat;
- width: 1em;
- height: 1em;
- line-height: 1;
- transition: all 0.3s;
-
- &.next {
- margin-left: 7px;
- }
-
- &.prev {
- margin-right: 7px;
- mask-position: center;
- transform: rotate(180deg);
- margin-top: 2px;
- }
- }
+.content {
+ min-width: 200px;
+ margin: 30px;
+ flex: 1;
+ background-color: #fff;
- &[disabled] {
- pointer-events: none;
- opacity: 0.5;
+ @media (--xs-scr) {
+ margin: 15px 0;
}
-`
+}
-export const TutorialsWrapper = styled.div`
+.tutorialsWrapper {
position: relative;
z-index: 1;
float: right;
margin: 5px 0 0 10px;
- ${media.tablet`
+ @media (--md-scr) {
margin: 0 0 15px 0;
- `}
+ }
@media only screen and (min-width: 1200px) {
display: none;
}
-`
+}
-export const GithubLink = styled(LightButton)`
+.githubLink {
display: none;
float: right;
margin: 5px 0 10px 10px;
z-index: 1;
position: relative;
- ${media.tablet`
+ @media (--md-scr) {
float: none;
margin: 0 0 15px 0;
- `};
+ }
@media only screen and (max-width: 1200px) {
display: inline-flex;
}
+}
+
+.githubIcon {
+ background-image: url(/img/github_icon.svg);
+}
- i {
- background-image: url(/img/github_icon.svg);
+.navButtons {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-top: 40px;
+ font-size: 14px;
+ font-weight: 600;
+}
+
+.navButton {
+ text-decoration: none;
+ background: white;
+ padding: 10px 15px;
+ text-transform: uppercase;
+ color: #333;
+ border-bottom: 3px solid #13adc7;
+ display: inline-flex;
+ align-items: center;
+ transition: 0.2s border-color ease-out;
+
+ &:hover {
+ border-bottom: 3px solid #11849b;
}
-`
-export const ExternalLink = styled.a`
- &:after {
- position: relative;
- top: 1px;
- right: 0;
- width: 12px;
- height: 12px;
- margin-left: 1px;
- content: url(/img/external-link.svg);
+ &[disabled] {
+ pointer-events: none;
+ opacity: 0.5;
+ }
+}
+
+.navButtonIcon {
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ line-height: 1;
+ background-image: url(/img/arrow.svg);
+ background-size: contain;
+ background-position: center;
+ background-repeat: no-repeat;
+ transition: all 0.3s;
+
+ &.next {
+ margin-left: 7px;
+ }
+
+ &.prev {
+ margin-right: 7px;
+ mask-position: center;
+ transform: rotate(180deg);
+ margin-top: 2px;
}
-`
+}
diff --git a/src/components/Documentation/RightPanel/index.js b/src/components/Documentation/RightPanel/index.js
deleted file mode 100644
index 0cd9ce5354..0000000000
--- a/src/components/Documentation/RightPanel/index.js
+++ /dev/null
@@ -1,162 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import throttle from 'lodash.throttle'
-
-import Link from '../../Link'
-
-import Tutorials from '../Tutorials'
-
-import { allImagesLoadedInContainer } from '../../../utils/images'
-
-import {
- Description,
- DiscordButton,
- GithubButton,
- Header,
- HeadingLink,
- Spacer,
- Wrapper
-} from './styles'
-
-const MARKDOWN_ROOT = '#markdown-root'
-
-export default class RightPanel extends React.PureComponent {
- state = {
- height: 0,
- coordinates: {},
- current: undefined
- }
- componentDidMount() {
- this.root = document.documentElement
-
- if (this.props.headings.length) {
- this.initHeadingsPosition()
- }
-
- document.addEventListener('scroll', this.setCurrentHeader)
- window.addEventListener('resize', this.updateHeadingsPosition)
- }
-
- componentDidUpdate(prevProps) {
- if (this.props.headings !== prevProps.headings) {
- this.initHeadingsPosition()
- }
- }
-
- componentWillUnmount() {
- document.removeEventListener('scroll', this.setCurrentHeader)
- window.removeEventListener('resize', this.updateHeadingsPosition)
- }
-
- initHeadingsPosition = () =>
- allImagesLoadedInContainer(document.querySelector(MARKDOWN_ROOT)).then(
- this.updateHeadingsPosition
- )
-
- updateHeadingsPosition = () => {
- const coordinates = this.props.headings.reduce((result, { slug }) => {
- const headingElement = document.getElementById(slug)
-
- return { ...result, [headingElement && headingElement.offsetTop]: slug }
- }, {})
-
- const height = this.root.clientHeight
-
- this.setState({ coordinates, height }, this.setCurrentHeader)
- }
-
- setCurrentHeader = throttle(() => {
- const { coordinates, height } = this.state
- const { scrollTop } = this.root
- const coordinateKeys = Object.keys(coordinates)
-
- if (!coordinateKeys.length) return
-
- const filteredKeys = coordinateKeys.filter(
- top => top <= scrollTop + height / 2
- )
-
- const current = filteredKeys.length
- ? coordinates[filteredKeys[filteredKeys.length - 1]]
- : undefined
-
- this.setState({ current })
- }, 100)
-
- render() {
- const { headings, githubLink, tutorials } = this.props
- const { current } = this.state
-
- return (
-
+
+ )}
+
+ Edit on
+ GitHub
+
+ {renderAst(htmlAst)}
+
+
+
+ Prev
+
+
+ Next
+
+
+
+ - {headings.map(({ slug, text }) => ( - - {text} - - ))} -
- - )} - {Object.keys(tutorials || {}).length > 0 && ( - <> -
- - )} -
-
-
+
+ )
+}
+
+export default RightPanel
diff --git a/src/components/Documentation/RightPanel/styles.js b/src/components/Documentation/RightPanel/styles.js
deleted file mode 100644
index e53b03b49d..0000000000
--- a/src/components/Documentation/RightPanel/styles.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import styled from 'styled-components'
-
-import { LightButton } from '../styles'
-
-export const Wrapper = styled.div`
- width: 170px;
- min-width: 170px;
- font-size: 16px;
- height: calc(100vh - 78px);
- position: sticky;
- top: var(--layout-header-height-scrolled);
-
- @media only screen and (max-width: 1200px) {
- display: none;
- }
-
- hr {
- opacity: 0.5;
- }
-`
-
-export const Header = styled.p`
- color: #3c3937;
- font-size: 14px;
- text-transform: uppercase;
- margin-top: 56px;
-`
-
-export const HeadingLink = styled.a`
- display: block;
- position: relative;
- font-size: 16px;
- font-weight: 500;
- color: #a0a8a5;
- text-decoration: none;
- font-weight: 400;
- line-height: 26px;
- min-height: 26px;
- margin-bottom: 3px;
- cursor: pointer;
-
- ${props =>
- props.isCurrent &&
- `
- color: #000;
- `}
-
- &:hover {
- color: #3c3937;
- }
-`
-
-export const ExternalButton = styled(LightButton)`
- box-sizing: border-box;
- min-width: 170px;
- margin: 10px 0;
-`
-
-export const GithubButton = styled(ExternalButton)`
- i {
- background-image: url(/img/github_icon.svg);
- }
-`
-
-export const DiscordButton = styled(ExternalButton)`
- i {
- background-image: url(/img/discord.svg);
- width: 1.2em;
- height: 1.2em;
- }
-`
-
-export const Spacer = styled.div`
- height: 65px;
-`
-
-export const Description = styled.p`
- color: #3c3937;
-`
diff --git a/src/components/Documentation/RightPanel/styles.module.css b/src/components/Documentation/RightPanel/styles.module.css
new file mode 100644
index 0000000000..bd5eaa8986
--- /dev/null
+++ b/src/components/Documentation/RightPanel/styles.module.css
@@ -0,0 +1,86 @@
+.container {
+ position: sticky;
+ top: var(--layout-header-height-collapsed);
+ flex-shrink: 0;
+ width: 170px;
+ height: calc(100vh - 78px);
+ font-size: 16px;
+ overflow-y: auto;
+
+ @media only screen and (max-width: 1200px) {
+ display: none;
+ }
+}
+
+.separator {
+ border: none;
+ border-top: 1px solid var(--color-lighter-blue);
+}
+
+.list {
+ margin-top: 57px;
+ margin-bottom: 27px;
+}
+
+.header {
+ font-size: 14px;
+ text-transform: uppercase;
+ color: var(--color-black);
+}
+
+.headingLink {
+ position: relative;
+ display: block;
+ min-height: 26px;
+ margin-bottom: 3px;
+ color: #a0a8a5;
+ text-decoration: none;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 26px;
+ cursor: pointer;
+
+ &.current {
+ color: #000;
+ }
+
+ &:hover {
+ color: #3c3937;
+ }
+}
+
+.buttonSection {
+ & + & {
+ margin-top: 25px;
+ }
+}
+
+.buttonSectionIcon {
+ display: inline-block;
+ width: 1em;
+ height: 1em;
+ margin-right: 5px;
+}
+
+.buttonSectionDescription {
+ color: var(--color-black);
+}
+
+.button {
+ width: 100%;
+ margin: 10px 0;
+
+ &.tutorials {
+ white-space: nowrap;
+ }
+}
+
+.githubIcon {
+ background-image: url(/img/github_icon.svg);
+}
+
+.discordIcon {
+ width: 1.2em;
+ height: 1.2em;
+ background-image: url(/img/discord.svg);
+}
diff --git a/src/components/Documentation/Tutorials/index.js b/src/components/Documentation/Tutorials/index.js
deleted file mode 100644
index 360575b70c..0000000000
--- a/src/components/Documentation/Tutorials/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import topairs from 'lodash.topairs'
-import startCase from 'lodash.startcase'
-
-import { ExternalButton, KatacodaButton, Wrapper } from './styles'
-
-const icons = {
- katacoda: KatacodaButton
-}
-
-export default function Tutorials({ compact, tutorials }) {
- const tutorialsData = topairs(tutorials)
-
- return (
-
+ {headings.length > 0 && (
+ <>
+
+ + )} + {headings.map(({ slug, text }) => ( + + {text} + + ))} +
+ {Object.keys(tutorials || {}).length > 0 && (
+ Content
++ + )} + {headings.map(({ slug, text }) => ( + + {text} + + ))} +
+
+ )}
+ + + ▶️ + {' '} + It can be run online: +
+
+
+
+ + + 🐛 + {' '} + Found an issue? Let us know! Or fix it: +
+ + + + Edit on GitHub + +
+
+ + + ❓ + {' '} + Have a question? Join our chat, we will help you: +
+ + + + Discord Chat + +
+ {dropdownItems.map((os, index) => {
+ if (os === null) {
+ return (
+
+ )
+ }
+
+ const item = itemsByOs[os]
+
+ return (
+ onClick(os)}
+ >
+ {item.title}
+
+ )
+ })}
+
+ )
+}
+
+const DownloadButton: React.SFC
+
+ {isOpened && (
+
+
+ )}
+
+ )
+}
+
+export default DownloadButton
diff --git a/src/components/DownloadButton/styles.js b/src/components/DownloadButton/styles.js
deleted file mode 100644
index 9659166e97..0000000000
--- a/src/components/DownloadButton/styles.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import styled, { css } from 'styled-components'
-
-export const Handler = styled.span`
- position: relative;
- display: inline-block;
- width: 186px;
- height: 60px;
-`
-
-export const Button = styled.button`
- position: relative;
- width: 186px;
- height: 60px;
- border: none;
- border-radius: 4px;
- background-color: #945dd6;
-
- padding: 0px;
- color: #ffffff;
-
- cursor: pointer;
- z-index: 9;
-
- display: flex;
- flex-direction: row;
- align-items: center;
- transition: 0.2s background-color ease-out;
-
- ${props =>
- props.open &&
- `
- background-color: #885CCB;
- `} &:hover {
- background-color: #885ccb;
- }
-`
-
-export const Icon = styled.div`
- flex-basis: 48px;
-
- text-align: center;
-`
-
-export const Inner = styled.div`
- display: flex;
- justify-content: space-between;
- flex: 1;
-`
-
-export const Action = styled.h6`
- font-family: BrandonGrotesque;
- font-weight: 500;
- font-size: 20px;
- line-height: 0.9;
-`
-
-export const Description = styled.p`
- font-family: BrandonGrotesque;
- font-size: 14px;
- text-align: left;
-`
-
-export const Triangle = styled.div`
- margin-right: 19px;
- align-items: center;
- display: flex;
-
- transition: left 300ms linear;
-
- ${props =>
- props.open &&
- `
- transition: left 300ms linear;
- transform: rotate(-180deg);
- `};
-`
-
-export const Popup = styled.div`
- position: absolute;
- left: 0px;
- right: 0px;
- top: calc(100% + 3px);
- background-color: #ffffff;
- box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-
- ${props =>
- props.openTop &&
- `
- bottom: calc(100% + 3px);
- top: auto;
- `};
-`
-
-export const Links = styled.div`
- display: flex;
- flex-direction: column;
-`
-
-const Item = css`
- font-family: BrandonGrotesque;
- display: block;
- min-height: 36px;
- line-height: 1.29;
- padding: 0px 17px;
-
- display: flex;
- align-items: center;
- text-decoration: none;
-
- color: #b0b8c5;
-`
-
-export const Delimiter = styled.div`
- background-color: rgba(0, 0, 0, 0.1);
- height: 1px;
-`
-
-export const DownloadInput = styled.input`
- ${Item};
- border: none !important;
- font-family: Monospace;
- font-weight: bold;
-
- ${props =>
- props.active &&
- `
- color: #40364d;
- `};
-`
-
-export const DownloadLink = styled.a`
- ${Item};
- color: #b0b8c5;
-
- &:hover {
- color: #40364d;
- }
-
- ${props =>
- props.active &&
- `
- color: #40364d;
- `};
-`
diff --git a/src/components/DownloadButton/styles.module.css b/src/components/DownloadButton/styles.module.css
new file mode 100644
index 0000000000..2f389194f7
--- /dev/null
+++ b/src/components/DownloadButton/styles.module.css
@@ -0,0 +1,68 @@
+.container {
+ position: relative;
+ display: inline-block;
+}
+
+.button.button {
+ padding-right: 55px;
+}
+
+.buttonIcon {
+ position: relative;
+ top: -2px;
+ width: 14px;
+ height: 20px;
+}
+
+.triangle {
+ position: absolute;
+ right: 15px;
+ align-items: center;
+ display: flex;
+ transition: left 300ms linear;
+
+ .button.opened & {
+ transition: left 300ms linear;
+ transform: rotate(-180deg);
+ }
+}
+
+.dropdown {
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: calc(100% + 3px);
+ display: flex;
+ flex-direction: column;
+ background-color: #fff;
+ box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
+
+ &.openTop {
+ bottom: calc(100% + 3px);
+ top: auto;
+ }
+}
+
+.dropdownItem {
+ font-family: var(--font-brandon);
+ min-height: 36px;
+ line-height: 1.29;
+ padding: 0 17px;
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: var(--color-gray-light);
+
+ &.active {
+ color: var(--color-gray-hover);
+ }
+
+ &:hover {
+ color: var(--color-gray-hover);
+ }
+}
+
+.dropdownDelimiter {
+ background-color: rgba(0, 0, 0, 0.1);
+ height: 1px;
+}
diff --git a/src/components/Features/index.js b/src/components/Features/index.js
deleted file mode 100644
index b762bbebca..0000000000
--- a/src/components/Features/index.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from 'react'
-
-import Hero from '../Hero'
-import FeaturesHero from '../FeaturesHero'
-import TrySection from '../TrySection'
-
-import { Container, Description, Feature, Features, Icon, Name } from './styles'
-
-export default function FeaturesPage() {
- return (
- <>
- 
- 
- 
- 
-
- 
- 
- 
- 
- + DVC brings agility, reproducibility, and collaboration into your + existing data science workflow +
+
+
+
+
+
+
+ Git-compatible
+
+ DVC runs on top of any Git repository and is compatible with any
+ standard Git server or provider (GitHub, GitLab, etc). Data file
+ contents can be shared by network-accessible storage or any
+ supported cloud solution. DVC offers all the advantages of a
+ distributed version control system — lock-free, local branching,
+ and versioning.
+
+
+
+
+
+ Storage agnostic
+
+ Use Amazon S3, Microsoft Azure Blob Storage, Google Drive, Google
+ Cloud Storage, Aliyun OSS, SSH/SFTP, HDFS, HTTP, network-attached
+ storage, or disc to store data. The list of supported remote
+ storage is constantly expanding.
+
+
+
+
+
+ Reproducible
+
+ The single 'dvc repro' command reproduces experiments
+ end-to-end. DVC guarantees reproducibility by consistently
+ maintaining a combination of input data, configuration, and the
+ code that was initially used to run an experiment.
+
+
+
+
+
+ Low friction branching
+
+ DVC fully supports instantaneous Git branching, even with large
+ files. Branches beautifully reflect the non-linear structure and
+ highly iterative nature of a ML process. Data is not duplicated —
+ one file version can belong to dozens of experiments. Create as
+ many experiments as you want, instantaneously switch back and
+ forth, and save a history of all attempts.
+
+
+
+
+
+ Metric tracking
+
+ Metrics are first-class citizens in DVC. DVC includes a command to
+ list all branches, along with metric values, to track the progress
+ or pick the best version.
+
+
+
+
+
+ ML pipeline framework
+
+ DVC has a built-in way to connect ML steps into a DAG and run the
+ full pipeline end-to-end. DVC handles caching of intermediate
+ results and does not run a step again if input data or code are
+ the same.
+
+
+
+
+
+ + Language- & framework-agnostic +
+
+ No matter which programming language or libraries are in use or
+ how code is structured, reproducibility and pipelines are based on
+ input and output files or directories. Python, R, Julia, Scala
+ Spark, custom binary, Notebooks, flatfiles/TensorFlow, PyTorch,
+ etc. are all supported.
+
+
+
+
+
+ HDFS, Hive & Apache Spark
+
+ Include Spark and Hive jobs in the DVC data versioning cycle along
+ with local ML modeling steps or manage Spark and Hive jobs with
+ DVC end-to-end. Drastically decrease a feedback loop by
+ decomposing a heavy cluster job into smaller DVC pipeline steps.
+ Iterate on the steps independently with respect to dependencies.
+
+
+
+
+
+ Track failures
+
+ Bad ideas can sometimes spark more ideas among colleagues than
+ successful ones. Retaining knowledge of failed attempts can save
+ time in the future. DVC is built to track everything in a
+ reproducible and easily accessible way.
+
+
-
-
-
-
- )
-}
diff --git a/src/components/HamburgerIcon/index.tsx b/src/components/HamburgerIcon/index.tsx
new file mode 100644
index 0000000000..077cc31a1b
--- /dev/null
+++ b/src/components/HamburgerIcon/index.tsx
@@ -0,0 +1,18 @@
+import cn from 'classnames'
+import React from 'react'
+
+import styles from './styles.module.css'
+
+interface IHamburgetProps {
+ opened?: boolean
+}
+
+const HamburgerIcon: React.SFC
+
+
+
+
+)
+
+export default HamburgerIcon
diff --git a/src/components/Hamburger/styles.module.css b/src/components/HamburgerIcon/styles.module.css
similarity index 100%
rename from src/components/Hamburger/styles.module.css
rename to src/components/HamburgerIcon/styles.module.css
diff --git a/src/components/HamburgerMenu/index.tsx b/src/components/HamburgerMenu/index.tsx
index 1cf412660c..c954153b7e 100644
--- a/src/components/HamburgerMenu/index.tsx
+++ b/src/components/HamburgerMenu/index.tsx
@@ -1,18 +1,18 @@
import cn from 'classnames'
import React, { useCallback, useState, useEffect } from 'react'
-import Hamburger from '../Hamburger'
+import HamburgerIcon from '../HamburgerIcon'
import Link from '../Link'
-import { logEvent } from '../../utils/ga'
-import { getFirstPage } from '../../utils/sidebar'
+import { logEvent } from '../../utils/front/ga'
+import { getFirstPage } from '../../utils/shared/sidebar'
import { ReactComponent as LogoSVG } from '../../../static/img/logo-white.svg'
import styles from './styles.module.css'
const docsPage = getFirstPage()
-function HamburgerMenu() {
+const HamburgerMenu: React.SFC = () => {
const [isOpened, setOpened] = useState(false)
const toggleMobileMenu = useCallback(() => setOpened(!isOpened), [isOpened])
@@ -24,7 +24,7 @@ function HamburgerMenu() {
const close = useCallback(() => setOpened(false), [isOpened])
const itemClick = useCallback(
- item => () => {
+ item => (): void => {
close()
logEvent('hamburger', item)
},
@@ -34,7 +34,7 @@ function HamburgerMenu() {
useEffect(() => {
const method = isOpened ? 'add' : 'remove'
- document.body.classList[method]('noScroll')
+ document.body.classList[method](styles.hiddenScrollbar)
}, [isOpened])
return (
@@ -44,7 +44,7 @@ function HamburgerMenu() {
onClick={toggleMobileMenu}
onKeyDown={openOnEnterKey}
>
-
diff --git a/src/components/HamburgerMenu/styles.module.css b/src/components/HamburgerMenu/styles.module.css
index 705e6c6c54..91ebfa6f54 100644
--- a/src/components/HamburgerMenu/styles.module.css
+++ b/src/components/HamburgerMenu/styles.module.css
@@ -1,3 +1,7 @@
+.hiddenScrollbar {
+ overflow-y: hidden;
+}
+
.wrapper {
display: block;
padding: 25px 15px 15px;
diff --git a/src/components/Hero/index.js b/src/components/Hero/index.js
deleted file mode 100644
index ba7ab7d285..0000000000
--- a/src/components/Hero/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { Container, Wrapper } from './styles'
-
-export default function Hero({ children }) {
- return (
-
- {children}
-
- )
-}
-
-Hero.propTypes = {
- children: PropTypes.node.isRequired
-}
diff --git a/src/components/Hero/styles.js b/src/components/Hero/styles.js
deleted file mode 100644
index 7751cffcd1..0000000000
--- a/src/components/Hero/styles.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import styled from 'styled-components'
-
-import { container } from '../../styles'
-
-export const Wrapper = styled.section`
- position: relative;
- background-color: #eef4f8;
-`
-
-export const Container = styled.div`
- ${container};
-`
diff --git a/src/components/HeroSection/index.tsx b/src/components/HeroSection/index.tsx
new file mode 100644
index 0000000000..fb672b5417
--- /dev/null
+++ b/src/components/HeroSection/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import cn from 'classnames'
+
+import LayoutWidthContainer from '../LayoutWidthContainer'
+
+import styles from './styles.module.css'
+
+interface IHeroSectionProps {
+ className?: string
+ children: React.ReactNode
+}
+
+const HeroSection: React.SFC = ({ className, children }) => (
+ = (
+ _,
+ ref
+) => (
+
+
+
+
+
+
+
+
+
+)
+
+export default forwardRef(DiagramSection)
diff --git a/src/components/Home/Diagram/styles.module.css b/src/components/Home/Diagram/styles.module.css
new file mode 100644
index 0000000000..80533d1870
--- /dev/null
+++ b/src/components/Home/Diagram/styles.module.css
@@ -0,0 +1,196 @@
+.diagramSection {
+ padding-top: 80px;
+ padding-bottom: 91px;
+}
+
+.title {
+ @mixin h2-desktop;
+
+ max-width: 550px;
+ min-height: 44px;
+ margin: 0 auto;
+ font-family: var(--font-brandon);
+ line-height: 45px;
+ text-align: center;
+ color: var(--color-gray-hover);
+}
+
+.description {
+ @mixin text-secondary;
+
+ max-width: 590px;
+ min-height: 50px;
+ margin: 0 auto;
+ padding-top: 10px;
+ text-align: center;
+ color: var(--color-gray-dark);
+}
+
+.desktopChartContainer {
+ width: 100%;
+ margin-top: 49px;
+
+ @media (--md-scr) {
+ overflow-x: scroll;
+ overflow-y: hidden;
+ }
+}
+
+.desktopChart {
+ width: 100%;
+ max-width: 900px;
+ max-height: 445px;
+}
+
+.columns {
+ @mixin columns;
+
+ margin-top: 10px;
+ flex-direction: row;
+ justify-content: center;
+ align-items: flex-start;
+
+ @media (--sm-scr) {
+ flex-direction: column;
+ }
+}
+
+.column {
+ @mixin column;
+
+ box-sizing: border-box;
+ display: block;
+ max-width: 33.3%;
+ margin-top: 49px;
+ padding: 0 10px;
+
+ @media (--sm-scr) {
+ margin-right: 0;
+ flex-basis: auto;
+ max-width: 100%;
+ }
+
+ @media (--xs-scr) {
+ margin-top: 20px;
+ flex-basis: auto;
+ max-width: 100%;
+ }
+}
+
+.columnCaption {
+ margin-bottom: 12px;
+ font-family: var(--font-brandon);
+ font-size: 20px;
+ font-weight: 500;
+
+ &.purple {
+ color: var(--color-purple);
+ }
+
+ &.azure {
+ color: var(--color-azure);
+ }
+
+ &.orange {
+ color: var(--color-orange-bright);
+ }
+}
+
+.columnDescriptionContainer {
+ max-width: 100%;
+ font-size: 16px;
+ color: var(--color-gray-dark);
+}
+
+.columnDescription {
+ margin-bottom: 24px;
+
+ @media (--sm-scr) {
+ margin-bottom: 12px;
+ }
+}
+
+.learnMoreContainer {
+ font-family: var(--font-brandon);
+ line-height: 28px;
+ font-size: 20px;
+ font-weight: 500;
+ color: var(--color-purple);
+}
+
+.learnMoreLink {
+ display: flex;
+ align-items: center;
+ text-decoration: none;
+ color: var(--color-purple);
+
+ &:hover {
+ color: var(--color-purple-hover);
+ }
+
+ &:visited {
+ color: var(--color-purple);
+ }
+
+ &:visited:hover {
+ color: var(--color-purple-hover);
+ }
+}
+
+.learnMoreLinkIcon {
+ width: 18px;
+ height: 18px;
+ margin-left: 19px;
+ margin-top: 3px;
+}
+
+.sliderContainer {
+ :global {
+ .slick-next,
+ .slick-prev {
+ height: 30px;
+ width: 30px;
+ z-index: 3;
+ }
+
+ .slick-next {
+ right: -25px;
+ }
+
+ .slick-prev {
+ left: -25px;
+ }
+
+ .slick-next::before,
+ .slick-prev::before {
+ font-size: 30px;
+ line-height: 1;
+ opacity: 0.35;
+ color: #40364d;
+ }
+
+ img {
+ pointer-events: none;
+ }
+ }
+}
+
+.slide {
+ width: 100%;
+}
+
+.slideImage {
+ padding-top: 20px;
+ padding-bottom: 20px;
+ width: 100%;
+ max-width: 380px;
+ margin: 0 auto;
+}
+
+.sliderDots {
+ margin-bottom: -20px;
+
+ li button::before {
+ font-size: 8px;
+ }
+}
diff --git a/src/components/Home/LandingHero/GithubLine/index.tsx b/src/components/Home/LandingHero/GithubLine/index.tsx
new file mode 100644
index 0000000000..6280833ff1
--- /dev/null
+++ b/src/components/Home/LandingHero/GithubLine/index.tsx
@@ -0,0 +1,33 @@
+import React, { useEffect, useState } from 'react'
+import fetch from 'isomorphic-fetch'
+import Link from '../../../Link'
+
+import styles from './styles.module.css'
+
+const repo = `iterative/dvc`
+const gh = `https://github.com/${repo}`
+const api = `https://api.github.com/repos/${repo}`
+
+const GithubLine: React.SFC = () => {
+ const [count, setCount] = useState('–––')
+
+ useEffect(() => {
+ fetch(api)
+ .then(res => res.json())
+ .then(data => setCount(data.stargazers_count))
+ }, [count, setCount])
+
+ return (
+
+}
+
+const LandingHero: React.SFC = ({ scrollToRef }) => {
+ const [activeCommand, setActiveCommand] = useState(0)
+
+ useEffect(() => {
+ const interval = setInterval(
+ () => setActiveCommand(prev => (prev + 1) % 4),
+ 3000
+ )
+
+ return (): void => clearInterval(interval)
+ }, [])
+
+ const scrollToUseCases = useCallback(() => {
+ logEvent('button', 'how-it-works')
+ scrollIntoLayout(scrollToRef?.current, {
+ smooth: true,
+ duration: 800,
+ ease: ease.inOutCube
+ })
+ }, [scrollToRef?.current])
+
+ return (
+
+}
+
+const LearnMore: React.SFC = ({ scrollToRef }) => {
+ const onClick = useCallback(() => {
+ logEvent('hero', 'learn-more')
+ scrollIntoLayout(scrollToRef?.current, {
+ smooth: true,
+ duration: 800,
+ ease: ease.inOutCube
+ })
+ }, [scrollToRef?.current])
+
+ return (
+
+ )
+}
+
+export default LearnMore
diff --git a/src/components/Home/LearnMore/styles.module.css b/src/components/Home/LearnMore/styles.module.css
new file mode 100644
index 0000000000..e343436544
--- /dev/null
+++ b/src/components/Home/LearnMore/styles.module.css
@@ -0,0 +1,74 @@
+@keyframes bounce {
+ 0%,
+ 30%,
+ 45%,
+ 65%,
+ 100% {
+ transform: translateY(0);
+ }
+
+ 40% {
+ transform: translateY(-13px);
+ }
+
+ 60% {
+ transform: translateY(-5px);
+ }
+}
+
+@keyframes bounceMobile {
+ 0%,
+ 30%,
+ 50%,
+ 70%,
+ 100% {
+ transform: translateY(0);
+ }
+
+ 40% {
+ transform: translateY(-13px);
+ }
+
+ 60% {
+ transform: translateY(-5px);
+ }
+}
+
+.button {
+ position: absolute;
+ z-index: 2;
+ transform: translate(-50%, 0%);
+ left: 50%;
+ bottom: 16px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 0;
+ border: none;
+ background: none;
+ cursor: pointer;
+}
+
+.icon {
+ width: 11px;
+ height: 19px;
+ will-change: transform;
+ animation: bounce 3s infinite;
+
+ @media (--xs-scr) {
+ animation-name: bounceMobile;
+ }
+}
+
+.caption {
+ font-family: var(--font-brandon);
+ font-size: 16px;
+ line-height: 23px;
+ font-weight: 500;
+ color: var(--color-gray-light);
+ display: initial;
+
+ @media (--xs-scr) {
+ display: none;
+ }
+}
diff --git a/src/components/Home/UseCases/CollapsibleText/index.tsx b/src/components/Home/UseCases/CollapsibleText/index.tsx
new file mode 100644
index 0000000000..a88caa23ce
--- /dev/null
+++ b/src/components/Home/UseCases/CollapsibleText/index.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react'
+import { Collapse } from 'react-collapse'
+
+import { isTriggeredFromKB } from '../../../../utils/front/keyboard'
+
+import styles from './styles.module.css'
+
+interface ICollapsibleTextProps {
+ children: React.ReactNode
+ header: React.ReactNode
+}
+
+const CollapsibleText: React.SFC = ({
+ header,
+ children
+}) => {
+ const [isOpened, setOpened] = useState(false)
+ const toggle = (): void => setOpened(prev => !prev)
+ const toggleFromKB = (e: React.KeyboardEvent): void => {
+ if (isTriggeredFromKB(e)) {
+ toggle()
+ }
+ }
+
+ return (
+ = (_, ref) => {
+ return (
+
+
+
+
+ )
+}
+
+export default forwardRef(UseCases)
diff --git a/src/components/Home/UseCases/styles.module.css b/src/components/Home/UseCases/styles.module.css
new file mode 100644
index 0000000000..46f6baff0b
--- /dev/null
+++ b/src/components/Home/UseCases/styles.module.css
@@ -0,0 +1,90 @@
+.container {
+ padding-top: 80px;
+ padding-bottom: 57px;
+}
+
+.wrapper {
+ display: flex;
+ justify-content: space-between;
+
+ @media (--sm-scr) {
+ flex-direction: column;
+ }
+
+ @media (--xs-scr) {
+ flex-direction: column-reverse;
+ }
+}
+
+.videoContainer {
+ display: flex;
+ flex: 1 2 60%;
+ flex-direction: column;
+ align-self: center;
+ width: 100%;
+ margin-right: 10%;
+
+ @media (--sm-scr) {
+ flex: auto;
+ margin-bottom: 20px;
+ margin-right: 0;
+ }
+
+ @media (--xs-scr) {
+ margin: 0;
+ }
+}
+
+.heading {
+ @mixin h2-desktop;
+
+ min-height: 50px;
+ font-family: var(--font-brandon);
+ line-height: 45px;
+ text-align: center;
+ color: var(--color-gray-hover);
+
+ @media (--sm-scr) {
+ text-align: left;
+ }
+}
+
+.cases {
+ margin-top: 15px;
+}
+
+.case {
+ margin-bottom: 18px;
+}
+
+.rightColumn {
+ flex: 1 1 40%;
+
+ @media (--sm-scr) {
+ flex: auto;
+ }
+}
+
+.caseHeader {
+ height: 32px;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.caseIcon {
+ margin-right: 8px;
+}
+
+.caseTitle {
+ font-family: var(--font-brandon);
+ font-size: 16px;
+ font-weight: 500;
+ color: var(--color-gray-hover);
+}
+
+.caseDescription {
+ padding-top: 15px;
+ font-size: 16px;
+ color: var(--color-gray-dark);
+}
diff --git a/src/components/Home/index.js b/src/components/Home/index.js
deleted file mode 100644
index 331a2affc5..0000000000
--- a/src/components/Home/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-
-import LearnMore from '../LearnMore'
-import Hero from '../Hero'
-import LandingHero from '../LandingHero'
-import Diagram from '../Diagram'
-import PromoSection from '../PromoSection'
-import UseCases from '../UseCases'
-import Subscribe from '../Subscribe'
-
-import { LearnMoreSection } from './styles'
-
-export default function HomePage() {
- return (
- <>
-
-
-
-
-
- (null)
+ const useCasesSectionRef = useRef(null)
+ const goToDocGetStarted = useCallback(
+ () => logEvent('promo', 'get-started'),
+ []
+ )
+ const goToFeatures = useCallback(() => logEvent('promo', 'features'), [])
+
+ return (
+ <>
+
+
+
+ Get Started
+ ,
+
+ Full Features
+
+ ]}
+ />
+ = ({
+ className,
+ name,
+ ...iconProps
+}) => (
+
+)
export default IconSet
diff --git a/src/components/LandingHero/index.js b/src/components/LandingHero/index.js
deleted file mode 100644
index e71c64ef32..0000000000
--- a/src/components/LandingHero/index.js
+++ /dev/null
@@ -1,120 +0,0 @@
-import React, { Component } from 'react'
-import { scroller } from 'react-scroll'
-
-import DownloadButton from '../DownloadButton'
-import GithubLine from '../GithubLine'
-
-import { logEvent } from '../../utils/ga'
-
-import { OnlyDesktop, OnlyMobile } from '../../styles'
-import {
- Wrapper,
- About,
- Title,
- Buttons,
- GetStartedButton,
- WatchButton,
- Action,
- ActionIcon,
- ActionInner,
- Description,
- Github,
- Command,
- Commands,
- Line
-} from './styles'
-
-export default class LandingHero extends Component {
- state = {
- activeCommand: 0
- }
-
- componentDidMount() {
- this.commandsFadeInterval = setInterval(() => {
- this.setState(prevState => ({
- activeCommand: (prevState.activeCommand + 1) % 4
- }))
- }, 3000)
- }
-
- componentWillUnmount() {
- clearInterval(this.commandsFadeInterval)
- }
-
- getStarted = () => {
- window.location = '/doc/tutorials/get-started'
- }
-
- scrollToVideo = () => {
- logEvent('button', 'how-it-works')
- scroller.scrollTo('how-it-works', {
- duration: 800,
- offset: -75,
- delay: 0,
- smooth: 'easeInOut'
- })
- }
-
- render() {
- const { activeCommand } = this.state
-
- return (
-
-
-
- Open-source
- <br />
- Version Control System
- <br />
- for Machine Learning Projects
-
-
-
-
- Get started
-
-
-
-
-
-
- 
-
-
- Watch video
- How it works
-
-
-
-
-
-
-
-
-
-
-
- $ dvc add images
-
-
- $ dvc run -d images -o model.p cnn.py
-
-
- $ dvc remote add -d myrepo s3://mybucket
-
-
- $ dvc push
-
-
-
-
- )
- }
-}
diff --git a/src/components/LandingHero/styles.js b/src/components/LandingHero/styles.js
deleted file mode 100644
index 4f86fb770d..0000000000
--- a/src/components/LandingHero/styles.js
+++ /dev/null
@@ -1,200 +0,0 @@
-import styled, { css } from 'styled-components'
-
-import { media } from '../../styles'
-
-export const Wrapper = styled.div`
- padding-top: 136px;
- padding-bottom: 146px;
-
- display: flex;
- justify-content: space-between;
-
- ${media.tablet`
- flex-direction: column;
- padding-top: 46px;
- padding-bottom: 86px;
- `};
-`
-
-export const About = styled.div`
- ${media.tablet`
- max-width: 412px;
- width: 100%;
- margin: 0px auto;
- `};
-`
-
-export const Title = styled.h1`
- font-size: 40px;
- font-weight: 500;
- color: #40364d;
- font-family: BrandonGrotesque;
- padding-right: 2em;
-
- ${media.tablet`
- padding-right: 0;
- font-size: 36px;
- `};
-
- ${media.phablet`
- font-size: 32px;
- padding: 0px;
- `};
-
- @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
- font-size: 34px;
- padding: 0px;
- }
-`
-
-export const Buttons = styled.div`
- margin-top: 28px;
- display: flex;
-
- ${media.phablet`
- flex-direction: column;
- `};
-
- @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
- justify-content: flex-start;
- }
-`
-
-const ActionButton = css`
- cursor: pointer;
- align-items: center;
- min-width: 186px;
- border-radius: 4px;
- border: none;
-
- display: flex;
- flex-direction: row;
- padding: 0px;
-
- ${media.phablet`
- margin: 0px;
- margin-bottom: 12px;
- max-width: none;
- min-height: 60px;
- `};
-`
-
-export const ActionIcon = styled.div`
- flex-basis: 48px;
-
- text-align: center;
-`
-
-export const ActionInner = styled.div``
-
-export const Action = styled.h6`
- font-family: BrandonGrotesque;
- font-weight: 500;
- font-size: 20px;
- line-height: 0.9;
-`
-export const Description = styled.p`
- font-family: BrandonGrotesque;
- font-weight: normal;
- font-size: 14px;
- text-align: left;
-`
-
-export const WatchButton = styled.a`
- ${ActionButton};
- height: 56px;
- text-decoration: none;
- color: #40364d;
- background-color: #eef4f8;
- margin-left: 15px;
- border: solid 2px rgba(176, 184, 197, 0.47);
- transition: 0.2s background-color ease-out;
-
- &:hover {
- background-color: #e4eaee;
- }
-
- ${ActionIcon} {
- padding-top: 6px;
- }
-`
-
-export const GetStartedButton = styled.a`
- ${ActionButton};
- text-decoration: none;
- background-color: #13adc7;
- display: flex;
- padding: 0px 0px 0px 20px;
- font-size: 20px;
- font-weight: 500;
- color: #fff;
- line-height: 0.9;
- border: solid 2px transparent;
- transition: 0.2s background-color ease-out;
-
- &:hover {
- background-color: #13a3bd;
- }
-`
-
-export const Command = styled.div`
- width: 100%;
- height: 57px;
- border-radius: 8px;
- background-color: #ffffff;
- border: solid 1px ${({ active }) => (active ? '#945dd6' : 'transparent')};
- margin-bottom: 13px;
- color: ${({ active }) => (active ? '#40364d' : '#b4b9c4')};
- box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
- transform: translateZ(0);
- display: flex;
- align-items: center;
- opacity: ${({ active }) => (active ? 1 : 0.3)};
- transition: opacity 3s, border 0.5s, color 1s;
-`
-
-export const Commands = styled.div`
- flex: 1 1 auto;
- max-width: 412px;
- display: flex;
- flex-direction: column;
- align-items: flex-end;
- padding-top: 10px;
- font-family: monospace, monospace;
-
- ${media.tablet`
- align-items: center;
- padding-top: 24px;
- margin: 30px auto 0;
- `};
-
- @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
- align-items: center;
- padding-top: 24px;
- }
-`
-
-export const Line = styled.span`
- font-size: 15px;
- font-weight: 700;
- padding: 0px 10px 0px 12px;
-`
-
-export const Github = styled.div`
- margin-top: 51px;
- font-size: 14px;
- font-weight: 500;
- color: #b0b8c5;
-
- ${media.tablet`
- align-items: center;
- margin-top: 24px;
- font-size: 18px;
- `};
-
- @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
- align-items: center;
- margin-top: 24px;
- font-size: 18px;
- }
-`
diff --git a/src/components/LayoutFooter/index.tsx b/src/components/LayoutFooter/index.tsx
index 3d9f15d067..541d350f0d 100644
--- a/src/components/LayoutFooter/index.tsx
+++ b/src/components/LayoutFooter/index.tsx
@@ -1,12 +1,13 @@
import React from 'react'
import cn from 'classnames'
+import includes from 'lodash.includes'
import { LayoutModifiers, ILayoutModifiable } from '../MainLayout'
import LayoutWidthContainer from '../LayoutWidthContainer'
import Link from '../Link'
import IconSet from '../IconSet'
-import { getFirstPage } from '../../utils/sidebar'
+import { getFirstPage } from '../../utils/shared/sidebar'
import { ReactComponent as LogoSVG } from '../../../static/img/logo-white.svg'
import styles from './styles.module.css'
@@ -19,7 +20,7 @@ const LayoutFooter: React.SFC> = ({
+ {children}
+
+)
+
+export default HeroSection
diff --git a/src/components/HeroSection/styles.module.css b/src/components/HeroSection/styles.module.css
new file mode 100644
index 0000000000..31f10d75f0
--- /dev/null
+++ b/src/components/HeroSection/styles.module.css
@@ -0,0 +1,3 @@
+.heroSection {
+ background-color: var(--color-light-blue);
+}
diff --git a/src/components/Home/Diagram/index.tsx b/src/components/Home/Diagram/index.tsx
new file mode 100644
index 0000000000..83a21d46ce
--- /dev/null
+++ b/src/components/Home/Diagram/index.tsx
@@ -0,0 +1,161 @@
+import React, { forwardRef } from 'react'
+import Slider from 'react-slick'
+import cn from 'classnames'
+
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import ShowOnly from '../../ShowOnly'
+import Link from '../../Link'
+
+import 'slick-carousel/slick/slick.css'
+import 'slick-carousel/slick/slick-theme.css'
+import styles from './styles.module.css'
+
+const LearnMore: React.SFC<{ href: string }> = ({ href }) => (
+
+
+ Learn more
+
+
+
+)
+
+const ColumnOne: React.SFC = () => (
+
+
+
+
+)
+
+const ColumnTwo: React.SFC = () => (
+ + ML project version control +
+
+
+ + Version control machine learning models, data sets and intermediate + files. DVC connects them with code, and uses Amazon S3, Microsoft Azure + Blob Storage, Google Drive, Google Cloud Storage, Aliyun OSS, SSH/SFTP, + HDFS, HTTP, network-attached storage, or disc to store file contents. +
++ Full code and data provenance help track the complete evolution of every + ML model. This guarantees reproducibility and makes it easy to switch + back and forth between experiments. +
+
+
+)
+
+const ColumnThree: React.SFC = () => (
+ + ML experiment management +
+
+
+ + Harness the full power of Git branches to try different ideas instead of + sloppy file suffixes and comments in code. Use automatic metric-tracking + to navigate instead of paper and pencil. +
++ DVC was designed to keep branching as simple and fast as in Git — no + matter the data file size. Along with first-class citizen metrics and ML + pipelines, it means that a project has cleaner structure. It's easy + to compare ideas and pick the best. Iterations become faster with + intermediate artifact caching. +
+
+
+)
+
+const DiagramSection: React.ForwardRefRenderFunction+ Deployment & Collaboration +
+
+
+ + Instead of ad-hoc scripts, use push/pull commands to move consistent + bundles of ML models, data, and code into production, remote machines, + or a colleague's computer. +
++ DVC introduces lightweight pipelines as a first-class citizen mechanism + in Git. They are language-agnostic and connect multiple steps into a + DAG. These pipelines are used to remove friction from getting code into + production. +
+DVC tracks ML models and data sets
++ DVC is built to make ML models shareable and reproducible. It is + designed to handle large files, data sets, machine learning models, and + metrics as well as code. +
+ +
+
+
+
+
+
+
+ (
+
+
+ - {dots}
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ We’re on
+
+ GitHub
+
+ 
+ {count}
+
+ )
+}
+
+export default GithubLine
diff --git a/src/components/Home/LandingHero/GithubLine/styles.module.css b/src/components/Home/LandingHero/GithubLine/styles.module.css
new file mode 100644
index 0000000000..4638428491
--- /dev/null
+++ b/src/components/Home/LandingHero/GithubLine/styles.module.css
@@ -0,0 +1,41 @@
+.container {
+ display: flex;
+ align-items: center;
+ font-family: var(--font-brandon);
+ font-weight: 500;
+ line-height: 20px;
+}
+
+.link {
+ margin-left: 0.3em;
+ font-family: var(--font-brandon);
+ font-weight: 500;
+ color: var(--color-gray-hover);
+
+ &:focus,
+ &:hover,
+ &:visited {
+ color: var(--color-gray-hover);
+ }
+}
+
+.githubLogo {
+ width: 20px;
+ height: 20px;
+ margin-right: 9px;
+ font-family: var(--font-brandon);
+ font-weight: 500;
+}
+
+.starIcon {
+ width: 11px;
+ height: 11px;
+ margin-top: -1px;
+ margin-left: 7px;
+}
+
+.count {
+ margin-left: 7px;
+ font-family: var(--font-brandon);
+ font-weight: 500;
+}
diff --git a/src/components/Home/LandingHero/index.tsx b/src/components/Home/LandingHero/index.tsx
new file mode 100644
index 0000000000..f0d5aebcc9
--- /dev/null
+++ b/src/components/Home/LandingHero/index.tsx
@@ -0,0 +1,114 @@
+import React, { useEffect, useCallback, useState } from 'react'
+import cn from 'classnames'
+
+import ShowOnly from '../../ShowOnly'
+import Link from '../../Link'
+import DownloadButton from '../../DownloadButton'
+import TwoRowsButton from '../../TwoRowsButton'
+import GithubLine from './GithubLine'
+import { scrollIntoLayout, ease } from '../../../utils/front/scroll'
+import { logEvent } from '../../../utils/front/ga'
+
+import styles from './styles.module.css'
+
+interface ILandingHeroProps {
+ scrollToRef: React.RefObject
+ We’re on
+
+ GitHub
+
+
+ {count}
+
+
+
+
+ )
+}
+
+export default LandingHero
diff --git a/src/components/Home/LandingHero/styles.module.css b/src/components/Home/LandingHero/styles.module.css
new file mode 100644
index 0000000000..43ffff9e3b
--- /dev/null
+++ b/src/components/Home/LandingHero/styles.module.css
@@ -0,0 +1,165 @@
+.container {
+ display: flex;
+ justify-content: space-between;
+ padding-top: 136px;
+ padding-bottom: 146px;
+
+ @media (--sm-scr) {
+ flex-direction: column;
+ padding-top: 46px;
+ padding-bottom: 86px;
+ }
+}
+
+.about {
+ @media (--sm-scr) {
+ max-width: 412px;
+ width: 100%;
+ margin: 0 auto;
+ }
+}
+
+.title {
+ padding-right: 2em;
+ font-family: var(--font-brandon);
+ font-size: 40px;
+ font-weight: 500;
+ color: var(--color-gray-hover);
+
+ @media (--sm-scr) {
+ padding-right: 0;
+ font-size: 36px;
+ }
+
+ @media (--xs-scr) {
+ padding: 0;
+ font-size: 32px;
+ }
+
+ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+ padding: 0;
+ font-size: 34px;
+ }
+}
+
+.buttonsContainer {
+ display: flex;
+ margin-top: 28px;
+
+ @media (--xs-scr) {
+ flex-direction: column;
+ }
+
+ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+ justify-content: flex-start;
+ }
+}
+
+.actionButton {
+ min-width: 186px;
+ text-decoration: none;
+
+ &.actionButton {
+ @media (--xs-scr) {
+ min-height: 60px;
+ margin: 0;
+ margin-bottom: 12px;
+ }
+ }
+}
+
+.getStartedButton {
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ font-size: 20px;
+ font-weight: 500;
+ line-height: 0.9;
+ border: solid 2px transparent;
+ border-radius: 4px;
+ color: #fff;
+ background-color: var(--color-azure);
+ transition: 0.2s background-color ease-out;
+
+ &:hover {
+ background-color: var(--color-azure-hover);
+ }
+}
+
+.actionButtonIcon {
+ width: 20px;
+ height: 20px;
+}
+
+.watchVideo {
+ margin-left: 15px;
+}
+
+.commands {
+ display: flex;
+ flex: 1 1 auto;
+ flex-direction: column;
+ align-items: flex-end;
+ max-width: 412px;
+ padding-top: 10px;
+ margin-left: 20px;
+ font-family: monospace;
+
+ @media (--sm-scr) {
+ align-items: center;
+ margin: 30px auto 0;
+ padding-top: 24px;
+ }
+
+ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+ align-items: center;
+ padding-top: 24px;
+ }
+}
+
+.command {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ height: 57px;
+ margin-bottom: 13px;
+ border-radius: 8px;
+ border: solid 1px transparent;
+ background-color: #fff;
+ color: #b4b9c4;
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+ transform: translateZ(0);
+ opacity: 0.3;
+ transition: opacity 3s, border 0.5s, color 1s;
+
+ &.active {
+ border-color: var(--color-purple);
+ color: var(--color-gray-hover);
+ opacity: 1;
+ }
+}
+
+.line {
+ padding: 0 10px 0 12px;
+ font-size: 15px;
+ font-weight: 700;
+}
+
+.github {
+ margin-top: 51px;
+ font-size: 14px;
+ font-weight: 500;
+ color: var(--color-gray-light);
+
+ @media (--sm-scr) {
+ align-items: center;
+ margin-top: 24px;
+ font-size: 18px;
+ }
+
+ @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
+ align-items: center;
+ margin-top: 24px;
+ font-size: 18px;
+ }
+}
diff --git a/src/components/Home/LearnMore/index.tsx b/src/components/Home/LearnMore/index.tsx
new file mode 100644
index 0000000000..d7787acfe8
--- /dev/null
+++ b/src/components/Home/LearnMore/index.tsx
@@ -0,0 +1,32 @@
+import React, { useCallback } from 'react'
+
+import { logEvent } from '../../../utils/front/ga'
+import { scrollIntoLayout, ease } from '../../../utils/front/scroll'
+
+import styles from './styles.module.css'
+
+interface ILearnMoreProps {
+ scrollToRef: React.RefObject
+
+ Open-source
+
+
+
+
+ Open-source
+
+ Version Control System
+
+ for Machine Learning Projects
+
+
+
+
+ Get started
+
+
+
+
+
+
+
+
+
+
+
+ $ dvc add images
+
+
+
+ $ dvc run -d images -o model.p cnn.py
+
+
+
+
+ $ dvc remote add -d myrepo s3://mybucket
+
+
+
+ $ dvc push
+
+
+ {header}
+ {children}
+ {!isOpened &&
+ )
+}
+
+export default CollapsibleText
diff --git a/src/components/Home/UseCases/CollapsibleText/styles.module.css b/src/components/Home/UseCases/CollapsibleText/styles.module.css
new file mode 100644
index 0000000000..c2bc48bdb0
--- /dev/null
+++ b/src/components/Home/UseCases/CollapsibleText/styles.module.css
@@ -0,0 +1,16 @@
+.container {
+ border: none;
+ background: none;
+ font-family: var(--font-brandon);
+ text-align: left;
+ appearance: none;
+
+ :global(.ReactCollapse--collapse) {
+ transition: height 500ms;
+ }
+}
+
+.moreText {
+ color: var(--color-azure);
+ font-size: 16px;
+}
diff --git a/src/components/Home/UseCases/Video/index.tsx b/src/components/Home/UseCases/Video/index.tsx
new file mode 100644
index 0000000000..fff512e955
--- /dev/null
+++ b/src/components/Home/UseCases/Video/index.tsx
@@ -0,0 +1,52 @@
+import React, { useState, useCallback } from 'react'
+
+import TwoRowsButton from '../../../TwoRowsButton'
+import { logEvent } from '../../../../utils/front/ga'
+
+import styles from './styles.module.css'
+
+const Video: React.SFC<{ id: string }> = ({ id }) => {
+ const [isWatching, setWatching] = useState(false)
+
+ const watchVideo = useCallback(() => {
+ logEvent('button', 'video')
+ setWatching(true)
+ }, [])
+
+ return (
+ More...
}
+
+
+ )
+}
+
+export default Video
diff --git a/src/components/Home/UseCases/Video/styles.module.css b/src/components/Home/UseCases/Video/styles.module.css
new file mode 100644
index 0000000000..3fc610e5ba
--- /dev/null
+++ b/src/components/Home/UseCases/Video/styles.module.css
@@ -0,0 +1,49 @@
+.container {
+ width: 100%;
+}
+
+.handler {
+ position: relative;
+ overflow: hidden;
+ height: 0;
+ border-radius: 12px;
+ padding-bottom: 56.25%;
+ background-color: rgba(23, 23, 23, 0.59);
+
+ @media (max-width: 768px) {
+ width: 100%;
+ }
+
+ iframe,
+ object,
+ embed {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+
+ .ytplayer {
+ pointer-events: none;
+ position: absolute;
+ }
+ }
+}
+
+.overlay {
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: rgba(23, 23, 23, 0.59);
+}
+
+.buttonIcon {
+ width: 20px;
+ height: 20px;
+}
diff --git a/src/components/Home/UseCases/index.tsx b/src/components/Home/UseCases/index.tsx
new file mode 100644
index 0000000000..67c19bb19c
--- /dev/null
+++ b/src/components/Home/UseCases/index.tsx
@@ -0,0 +1,130 @@
+import React, { forwardRef } from 'react'
+import YoutubeVideo from './Video'
+import CollapsibleText from './CollapsibleText'
+
+import LayoutWidthContainer from '../../LayoutWidthContainer'
+import ShowOnly from '../../ShowOnly'
+
+import styles from './styles.module.css'
+
+const Heading1: React.SFC = () => (
+
+ {!isWatching && (
+
+
+
+ )}
+
+
+ 
+
+)
+
+const Heading2: React.SFC = () => (
+
+ Save and reproduce your experiments
+
+ 
+
+)
+
+const Heading3: React.SFC = () => (
+
+ Version control models and data
+
+ 
+
+)
+
+const Description1: React.SFC = () => (
+
+ + Establish workflow for deployment & collaboration +
+
+ At any time, fetch the full context about any experiment you or your
+ colleagues have run. DVC guarantees that all files and metrics will be
+ consistent and in the right place to reproduce the experiment or use it as a
+ baseline for a new iteration.
+
+)
+
+const Description2: React.SFC = () => (
+
+ DVC keeps metafiles in Git instead of Google Docs to describe and version
+ control your data sets and models. DVC supports a variety of external
+ storage types as a remote cache for large files.
+
+)
+
+const Description3: React.SFC = () => (
+
+ DVC defines rules and processes for working effectively and consistently as
+ a team. It serves as a protocol for collaboration, sharing results, and
+ getting and running a finished model in a production environment.
+
+)
+
+const UseCases: React.ForwardRefRenderFunctionUse cases
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-