Landing Page

content/home-slides.js

@@ -0,0 +1,50 @@
+const terminalSlideData = [
+  `
+  $ python
+  >>> from training_script import train
+  >>> model = train()
+  <loadingbar></loadingbar>
+  >>> import mlem
+  >>> mlem.api.save(model, "./data/model", dvc=True)
+  >>>
+
+$ tree data/model
+  data/model
+  ├── artifacts
+  │   └── data.pkl
+  └── mlem.yaml
+`,
+  `
+    $ mlem ls --repo https://github.com/iterative/model-registry
+  Models:
+   - pet-face-recognition
+   - mlem-blep-classifier
+   - dog-bark-translator
+
+  $ mlem describe dog-bark-translator --repo https://github.com/iterative/model-registry --rev main
+   - 📖 Translates dog barks in emoji.
+   - 📦 Pytorch 1.10.0, Torchaudio 0.10.0, Emoji 1.6.1
+   - 🎯 Accuracy 87.3%
+    `,
+  `
+    $ mlem deploy dog-bark-translator heroku --repo https://github.com/iterative/model-registry
+  📩 Downloading model...<delay></delay>
+  🏗️ Building dog-bark-translator:latest docker image...<delay></delay>
+  📤 Pushing docker image to heroku, using envs/heroku.yaml specification...<delay></delay>
+  🚀 Starting application...<delay></delay>
+  💫 Application is live, check it out at https://dog-bark-translator.iterative.ai
+    `,
+  `
+      $ python
+      >>> import mlem
+      >>> model = mlem.api.load(
+      ...    "dog-bark-translator",
+      ...    repo="https://github.com/iterative/model-registry"
+      ... )
+      >>> model.predict("./short-dog-phrase.wav")
+      🐶🚀🎉
+      >>>
+      `
+]
+
+module.exports = terminalSlideData

gatsby-config.js

@@ -1,10 +1,13 @@
 module.exports = {
   siteMetadata: {
     title: 'mlem.ai',
-    description: '',
-    siteUrl: 'https://mlem.ai',
+    description:
+      'MLEM is a open-source model registry and deployment tool for machine learning',
+    siteUrl: process.env.HEROKU_APP_NAME
+      ? `https://${process.env.HEROKU_APP_NAME}.herokuapp.com`
+      : 'https://mlem.ai',
     twitterUsername: '@DVCorg',
-    titleTemplate: ''
+    titleTemplate: '%s | MLEM'
   },
   plugins: [
     {
@@ -40,13 +43,60 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-manifest',
       options: {
-        name: 'mlem',
-        short_name: 'mlem',
+        name: 'MLEM',
+        short_name: 'MLEM',
+        icon: 'src/images/icon-512x512.png',
         start_url: '/',
-        background_color: '#663399',
-        theme_color: '#663399',
+        background_color: '#F5F7F8',
+        theme_color: '#F5F7F8',
         display: 'standalone',
-        icon: 'src/images/gatsby-icon.png'
+        icons: [
+          {
+            src: '/apple-touch-icon-48x48.png',
+            sizes: '48x48',
+            type: 'image/png'
+          },
+          {
+            src: '/apple-touch-icon-72x72.png',
+            sizes: '72x72',
+            type: 'image/png'
+          },
+          {
+            src: '/apple-touch-icon-96x96.png',
+            sizes: '96x96',
+            type: 'image/png'
+          },
+          {
+            src: '/apple-touch-icon-144x144.png',
+            sizes: '144x144',
+            type: 'image/png'
+          },
+          {
+            src: '/apple-touch-icon.png',
+            sizes: '180x180',
+            type: 'image/png'
+          },
+          {
+            src: '/apple-touch-icon-192x192.png',
+            sizes: '192x192',
+            type: 'image/png'
+          },
+          {
+            src: '/apple-touch-icon-256x256.png',
+            sizes: '256x256',
+            type: 'image/png'
+          },
+          {
+            src: '/apple-touch-icon-384x384.png',
+            sizes: '384x384',
+            type: 'image/png'
+          },
+          {
+            src: '/apple-touch-icon-512x512.png',
+            sizes: '512x512',
+            type: 'image/png'
+          }
+        ]
       }
     },
     'gatsby-plugin-remove-serviceworker'

gatsby-node.js

@@ -0,0 +1,54 @@
+const Prism = require('prismjs')
+const loadLanguages = require('prismjs/components/')
+
+const terminalSlides = require('./content/home-slides')
+
+loadLanguages(['bash', 'python'])
+
+const getBashHtml = bashText =>
+  Prism.highlight(bashText, Prism.languages.bash, 'bash')
+
+const getPythonHtml = pythonText =>
+  Prism.highlight(pythonText, Prism.languages.python, 'python')
+
+const formattedTerminalLines = terminalSlides.map(string => {
+  const lines = string.split(/\r?\n/).map(line => {
+    const l = line.trim()
+    const commandPromptReg = /^(\$|>{3}|\.{3})/
+
+    if (commandPromptReg.test(l)) {
+      const prompt = l.match(commandPromptReg)[0]
+      const text = l.replace(commandPromptReg, '')
+
+      return {
+        promptString: prompt,
+        text: prompt === '$' ? getBashHtml(text) : getPythonHtml(text)
+      }
+    } else {
+      return { text: l, promptString: null }
+    }
+  })
+  return lines[0].text === '' ? lines.slice(1) : lines
+})
+
+exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
+  const { createNode } = actions
+
+  formattedTerminalLines.forEach((terminalLines, i) => {
+    const formattedTerminalSlide = { lines: terminalLines }
+    const nodeContent = JSON.stringify(formattedTerminalSlide)
+    const nodeMeta = {
+      id: createNodeId(`terminal-slide-${i}`),
+      parent: null,
+      children: [],
+      internal: {
+        type: 'TerminalSlide',
+        content: nodeContent,
+        contentDigest: createContentDigest(formattedTerminalSlide)
+      }
+    }
+
+    const node = Object.assign({}, formattedTerminalSlide, nodeMeta)
+    createNode(node)
+  })
+}

package.json

@@ -33,11 +33,13 @@
     "postcss": "^8.3.11",
     "preact": "^10.5.15",
     "preact-render-to-string": "^5.1.19",
+    "prismjs": "^1.25.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
-    "tailwindcss": "^2.2.19"
+    "tailwindcss": "^2.2.19",
+    "typed.js": "^2.0.12"
   },
   "devDependencies": {
     "@types/react-helmet": "^6.1.4",

src/components/Button/index.module.css

@@ -22,7 +22,7 @@
     &_primary {
       z-index: 1;
       position: relative;
-      @apply text-white bg-blue-green-gradient;
+      @apply text-white bg-teal-purple-gradient;
 
       &:hover {
         box-shadow: 0px 3px 4px rgba(46, 49, 55, 0.1),
@@ -31,7 +31,7 @@
 
       &:focus,
       &:focus::before {
-        @apply bg-blue-green-gradient-dark;
+        @apply bg-teal-purple-gradient-dark;
       }
 
       &::before {
@@ -46,7 +46,7 @@
         border-radius: 100px;
         border-radius: inherit;
         transition: opacity 0.2s ease-out;
-        @apply bg-blue-green-gradient-light;
+        @apply bg-teal-purple-gradient-light;
       }
 
       &:hover:not(:disabled)::before {

src/components/Footer/FooterList/index.module.css

@@ -0,0 +1,57 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+
+  @media (--md-scr) {
+    width: initial;
+  }
+
+  &__title {
+    text-transform: uppercase;
+    margin: 24px 0 4px;
+    @apply text-gray-700 text-xs leading-7 md:text-xs;
+
+    @media (--md-scr) {
+      margin: 0 0 5px;
+    }
+  }
+
+  &__links {
+    @media (--md-scr) {
+      display: grid;
+      grid-template-rows: auto auto auto;
+      grid-auto-flow: column;
+      column-gap: 32px;
+    }
+  }
+
+  &__link {
+    padding: 4px 0;
+    display: flex;
+    align-items: center;
+    @apply text-gray-750 text-base leading-12 md:text-tiny md:leading-7;
+
+    @media (--md-scr) {
+      padding: 5px 0;
+    }
+
+    &:hover {
+      opacity: 0.75;
+    }
+
+    &Icon {
+      margin-right: 10px;
+      fill: currentColor;
+
+      path {
+        fill: currentColor;
+      }
+
+      @media (--md-scr) {
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+}

src/components/Footer/FooterList/index.tsx

@@ -0,0 +1,64 @@
+import React from 'react'
+import cn from 'classnames'
+import SmartLink from '../../SmartLink'
+import { ReactComponent as DiscordIconSvg } from '../../../images/icons/discord.svg'
+import { ReactComponent as YoutubeIconSvg } from '../../../images/icons/youtube.svg'
+import { ReactComponent as TwitterIconSvg } from '../../../images/icons/twitter.svg'
+import { ReactComponent as LinkedInIconSvg } from '../../../images/icons/linkedin.svg'
+import { ReactComponent as GithubIconSvg } from '../../../images/icons/github.svg'
+import * as styles from './index.module.css'
+
+export interface IFooterListProps {
+  title: string
+  mobileTitle?: string
+  links: Array<{
+    text: string
+    icon?: 'github' | 'discord' | 'twitter' | 'linkedin' | 'youtube'
+    href: string
+  }>
+}
+
+const icons = {
+  discord: (
+    <DiscordIconSvg className={styles.list__linkIcon} width={20} height={20} />
+  ),
+  twitter: (
+    <TwitterIconSvg className={styles.list__linkIcon} width={20} height={20} />
+  ),
+  youtube: (
+    <YoutubeIconSvg className={styles.list__linkIcon} width={20} height={20} />
+  ),
+  linkedin: (
+    <LinkedInIconSvg className={styles.list__linkIcon} width={20} height={20} />
+  ),
+  github: (
+    <GithubIconSvg className={styles.list__linkIcon} width={20} height={20} />
+  )
+}
+
+const FooterList: React.FC<IFooterListProps> = ({
+  mobileTitle,
+  title,
+  links
+}) => {
+  return (
+    <li className={styles.list}>
+      {mobileTitle && (
+        <h2 className={cn(styles.list__title, 'md:hidden')}>{mobileTitle}</h2>
+      )}
+      <h2 className={cn(styles.list__title, mobileTitle && 'hidden md:flex')}>
+        {title}
+      </h2>
+      <div className={styles.list__links}>
+        {links.map(({ text, href, icon }, i) => (
+          <SmartLink className={styles.list__link} key={i} href={href}>
+            {icon && icons[icon]}
+            {text}
+          </SmartLink>
+        ))}
+      </div>
+    </li>
+  )
+}
+
+export default FooterList