Add gatsby-theme-iterative

gatsby-config.js

@@ -7,39 +7,16 @@ module.exports = {
       ? `https://${process.env.HEROKU_APP_NAME}.herokuapp.com`
       : 'https://mlem.ai',
     twitterUsername: '@DVCorg',
-    titleTemplate: '%s | MLEM'
+    titleTemplate: '%s | MLEM',
+    keywords: ['mlem']
   },
   plugins: [
-    {
-      resolve: 'gatsby-plugin-typescript',
-      options: {
-        isTSX: true,
-        allExtensions: true
-      }
-    },
+    'gatsby-plugin-preact',
     'gatsby-plugin-eslint',
-    'gatsby-plugin-postcss',
-    'gatsby-plugin-react-helmet',
-    {
-      resolve: 'gatsby-plugin-svgr',
-      options: {
-        ref: true,
-        svgoConfig: {
-          plugins: [{ removeViewBox: false }]
-        }
-      }
-    },
-    'gatsby-plugin-image',
     {
-      resolve: 'gatsby-source-filesystem',
-      options: {
-        name: 'images',
-        path: `${__dirname}/src/images`
-      }
+      resolve: '@dvcorg/gatsby-theme-iterative',
+      options: {}
     },
-    'gatsby-transformer-sharp',
-    'gatsby-plugin-sharp',
-    'gatsby-plugin-preact',
     {
       resolve: 'gatsby-plugin-manifest',
       options: {
@@ -99,13 +76,11 @@ module.exports = {
         ]
       }
     },
-    'gatsby-plugin-remove-serviceworker',
     {
-      resolve: '@sentry/gatsby',
+      resolve: 'gatsby-source-filesystem',
       options: {
-        dsn: process.env.SENTRY_DSN,
-        denyUrls: [/extensions\//i, /^chrome:\/\//i],
-        release: process.env.SOURCE_VERSION
+        name: 'images',
+        path: `${__dirname}/src/images`
       }
     }
   ]

package.json

@@ -15,9 +15,10 @@
     "check-format-and-lint": "npm-run-all format lint-ts"
   },
   "dependencies": {
-    "@sentry/gatsby": "^6.17.9",
-    "@svgr/webpack": "^5.5.0",
-    "autoprefixer": "^10.4.0",
+    "@dvcorg/gatsby-theme-iterative": "^0.0.8",
+    "@sentry/gatsby": "^6.19.6",
+    "@svgr/webpack": "^6.2.1",
+    "autoprefixer": "^10.4.4",
     "classnames": "^2.3.1",
     "gatsby": "^4.1.0",
     "gatsby-plugin-image": "^2.1.0",
@@ -29,45 +30,46 @@
     "gatsby-plugin-sharp": "^4.1.0",
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
     "gatsby-plugin-typescript": "^4.1.0",
+    "gatsby-remark-prismjs": "^6.12.1",
     "gatsby-source-filesystem": "^4.1.0",
     "gatsby-transformer-sharp": "^4.1.0",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.3.11",
+    "postcss": "^8.4.12",
     "preact": "^10.5.15",
     "preact-render-to-string": "^5.1.19",
-    "prismjs": "^1.27.0",
+    "prismjs": "^1.28.0",
     "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0",
-    "tailwindcss": "^2.2.19",
+    "tailwindcss": "3.0.23",
     "typed.js": "^2.0.12"
   },
   "devDependencies": {
-    "@types/react-helmet": "^6.1.4",
-    "@typescript-eslint/eslint-plugin": "^5.3.0",
-    "@typescript-eslint/parser": "^5.3.0",
+    "@types/react-helmet": "^6.1.5",
+    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/parser": "^5.20.0",
     "babel-eslint": "^10.1.0",
-    "eslint": "^8.1.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
+    "eslint": "^8.14.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react": "^7.29.4",
+    "eslint-plugin-react-hooks": "^4.4.0",
     "eslint-webpack-plugin": "^3.1.0",
     "gatsby-plugin-eslint": "^4.0.1",
     "husky": "^7.0.4",
-    "lint-staged": "^11.2.6",
+    "lint-staged": "^12.4.0",
     "postcss-custom-media": "^8.0.0",
-    "postcss-mixins": "^8.1.0",
+    "postcss-mixins": "^9.0.2",
     "postcss-nested": "^5.0.6",
-    "prettier": "^2.4.1",
-    "typescript": "^4.4.4"
+    "prettier": "^2.6.2",
+    "typescript": "^4.6.3"
   },
   "keywords": [
     "gatsby"

postcss.config.js

@@ -1,13 +0,0 @@
-const customMedia = require('postcss-custom-media')
-
-module.exports = {
-  plugins: [
-    customMedia({
-      importFrom: './src/styles/media.css'
-    }),
-    require('postcss-mixins'),
-    require('tailwindcss/nesting'),
-    require('tailwindcss'),
-    require('autoprefixer')
-  ]
-}

src/@dvcorg/gatsby-theme-iterative/components/LayoutHeader/index.tsx

@@ -0,0 +1,2 @@
+import NavBar from '../../../../components/NavBar'
+export default NavBar

src/components/Home/index.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
-import NavBar from '../NavBar'
 import Header from './Header'
 import Features from './Features'
 import Footer from '../Footer'
 
 const Home: React.FC = () => {
   return (
     <>
-      <NavBar />
       <Header />
       <main>
         <Features />

src/components/NavBar/index.tsx

@@ -21,42 +21,40 @@ const socialLinks: Array<ISocialIconProps> = [
 
 const NavBar: React.FC = () => {
   return (
-    <>
-      <nav className={styles.nav}>
-        <SmartLink href="/">
-          <img
-            alt="Go to home page"
-            src={mlemLogo}
-            className={styles.nav__brandLogo}
-            width={108}
-            height={24}
-          />
-        </SmartLink>
-        <SmartLink
-          className={styles.nav__brandCompany}
-          href="https://iterative.ai/"
-        >
-          by <span>iterative.ai</span>
-        </SmartLink>
-        <SmartLink
-          href="https://learn.iterative.ai/"
-          className={styles.nav__link}
-        >
-          Course
-        </SmartLink>
-        <OtherToolsPopup navItemClassName={styles.nav__link} />
-        <Button className={styles.nav__button} icon="github" disabled>
-          Coming Soon
-        </Button>
-        <ul className={styles.nav__icons}>
-          {socialLinks.map(({ icon, href, label }, i) => (
-            <li key={i}>
-              <SocialIcon icon={icon} href={href} label={label} />
-            </li>
-          ))}
-        </ul>
-      </nav>
-    </>
+    <nav className={styles.nav}>
+      <SmartLink href="/">
+        <img
+          alt="Go to home page"
+          src={mlemLogo}
+          className={styles.nav__brandLogo}
+          width={108}
+          height={24}
+        />
+      </SmartLink>
+      <SmartLink
+        className={styles.nav__brandCompany}
+        href="https://iterative.ai/"
+      >
+        by <span>iterative.ai</span>
+      </SmartLink>
+      <SmartLink
+        href="https://learn.iterative.ai/"
+        className={styles.nav__link}
+      >
+        Course
+      </SmartLink>
+      <OtherToolsPopup navItemClassName={styles.nav__link} />
+      <Button className={styles.nav__button} icon="github" disabled>
+        Coming Soon
+      </Button>
+      <ul className={styles.nav__icons}>
+        {socialLinks.map(({ icon, href, label }, i) => (
+          <li key={i}>
+            <SocialIcon icon={icon} href={href} label={label} />
+          </li>
+        ))}
+      </ul>
+    </nav>
   )
 }
 

tailwind.config.js

@@ -2,8 +2,13 @@ const defaultTheme = require('tailwindcss/defaultTheme')
 const plugin = require('tailwindcss/plugin')
 
 module.exports = {
-  purge: ['./src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx'],
-  darkMode: false,
+  content: [
+    './src/**/*.js',
+    './src/**/*.jsx',
+    './src/**/*.ts',
+    './src/**/*.tsx'
+  ],
+  darkMode: 'media',
   theme: {
     colors: {
       transparent: 'transparent',