diff --git a/.circleci/config.yml b/.circleci/config.yml index fcb289117e..728f7d043f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -8,7 +8,7 @@ defaults: &defaults working_directory: ~/repo docker: # Specify the version you desire here. - - image: circleci/node:12 + - image: circleci/node:16 # Specify service dependencies here if necessary. # CircleCI maintains a library of pre-built images, diff --git a/content/docs/user-guide/contributing/blog.md b/content/docs/user-guide/contributing/blog.md index d3b3ad28e0..7bdb5c4c35 100644 --- a/content/docs/user-guide/contributing/blog.md +++ b/content/docs/user-guide/contributing/blog.md @@ -41,7 +41,6 @@ tags: - Version Control - AI --- - ``` - `title` (**required**) - title of the post. diff --git a/gatsby-config.js b/gatsby-config.js index bd876aa906..957289faed 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -57,6 +57,7 @@ const plugins = [ path: path.join(__dirname, 'static') } }, + 'gatsby-plugin-image', 'community-page', { resolve: 'gatsby-transformer-remark', @@ -122,7 +123,14 @@ const plugins = [ } }, 'gatsby-transformer-sharp', - 'gatsby-plugin-sharp', + { + resolve: 'gatsby-plugin-sharp', + options: { + defaults: { + placeholder: 'blurred' + } + } + }, { resolve: 'gatsby-plugin-catch-links', options: { @@ -224,28 +232,6 @@ const plugins = [ } ] -if (process.env.GITHUB_TOKEN) { - plugins.push({ - resolve: `gatsby-source-github-api`, - options: { - // token: required by the GitHub API - token: process.env.GITHUB_TOKEN, - - // GraphQLquery: defaults to a search query - graphQLQuery: ` - { - repository(owner: "iterative", name: "dvc") { - stargazers { - totalCount - } - } - } - `, - variables: {} - } - }) -} - if (process.env.CONTEXT === 'production') { plugins.push({ resolve: 'gatsby-plugin-google-analytics', @@ -258,11 +244,7 @@ if (process.env.CONTEXT === 'production') { if (process.env.ANALYZE) { plugins.push({ - resolve: 'gatsby-plugin-webpack-bundle-analyzer', - options: { - analyzerPort: 4000, - production: process.env.NODE_ENV === 'production' - } + resolve: 'gatsby-plugin-webpack-bundle-analyser-v2' }) } diff --git a/package.json b/package.json index 68eb92a390..0fae34ee0d 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "author": "LIMIT_BLOG_PAGES=1 SKIP_DOCS=true gatsby develop", "build": "gatsby build", "start": "node ./src/server/index.js", - "heroku-postbuild": "./scripts/deploy-with-s3.js", + "heroku-postbuild": "./scripts/heroku-deploy.sh", "test": "jest", "format-staged": "pretty-quick --staged --no-restage --bail", "format-check": "prettier --check '**/*.{js,jsx,md,tsx,ts,json}'", @@ -33,50 +33,51 @@ }, "homepage": "https://github.com/iterative/dvc.org#readme", "engines": { - "node": "<=15.x" + "node": "<=16.x" }, "dependencies": { "@hapi/wreck": "^17.0.0", - "@octokit/graphql": "^4.3.1", - "@reach/portal": "^0.10.0", - "@reach/router": "^1.3.3", - "@reach/tooltip": "^0.10.0", + "@octokit/graphql": "^4.8.0", + "@reach/portal": "^0.16.2", + "@reach/router": "^1.3.4", + "@reach/tooltip": "^0.16.2", "classnames": "^2.2.6", - "color": "^3.1.2", + "color": "^4.0.1", "compression": "^1.7.4", - "date-fns": "^2.11.1", + "date-fns": "^2.25.0", "docsearch.js": "^2.6.3", "ease-component": "^1.0.0", "express": "^4.17.1", - "fs-extra": "^9.0.0", - "gatsby": "^2.20.13", - "gatsby-image": "^2.3.1", - "gatsby-link": "^2.3.2", + "fs-extra": "^10.0.0", + "gatsby": "^3.14.3", + "gatsby-link": "^3.14.0", + "gatsby-plugin-image": "^1.14.1", "gatsby-plugin-parent-resolvers": "^1.0.1", - "gatsby-source-github-api": "^0.2.1", "github-markdown-css": "^4.0.0", - "iso-url": "^0.4.7", - "isomorphic-fetch": "^2.2.1", + "graphql": "^15.6.1", + "iso-url": "^1.1.5", + "isomorphic-fetch": "^3.0.0", "lodash": "^4.17.21", "moment": "^2.25.3", - "nanoid": "^3.0.2", + "nanoid": "^3.1.30", "node-cache": "^5.1.0", "perfect-scrollbar": "^1.5.0", - "pretty-quick": "^2.0.1", + "postcss": "^8.3.9", + "pretty-quick": "^3.1.1", "prismjs": "^1.25.0", "promise-polyfill": "^8.1.3", "prop-types": "^15.7.2", "raf-polyfill": "^1.0.0", - "react": "^16.13.1", + "react": "^17.0.2", "react-collapse": "^5.0.1", "react-collapsible": "^2.7.0", - "react-dom": "^16.13.1", - "react-ga": "^2.7.0", - "react-helmet": "^5.2.1", + "react-dom": "^17.0.2", + "react-ga": "^3.3.0", + "react-helmet": "^6.1.0", "react-popover": "^0.5.10", - "react-slick": "^0.25.2", + "react-slick": "^0.28.1", "react-use": "^14.0.0", - "rehype-react": "^5.0.1", + "rehype-react": "^6.2.1", "remark-preset-lint-recommended": "^5.0.0", "repo-link-check": "^0.7.1", "reset-css": "^5.0.1", @@ -86,10 +87,10 @@ "slick-carousel": "^1.8.1", "title-case": "^3.0.2", "unist-util-visit": "2.0.2", - "upath": "^1.2.0" + "upath": "^2.0.1" }, "devDependencies": { - "@babel/core": "^7.9.0", + "@babel/core": "^7.15.8", "@svgr/webpack": "^5.3.1", "@types/classnames": "^2.2.10", "@types/isomorphic-fetch": "^0.0.35", @@ -99,66 +100,65 @@ "@types/react-dom": "^16.9.6", "@types/react-helmet": "^5.0.15", "@types/react-popover": "^0.5.3", - "@types/react-slick": "^0.23.4", + "@types/react-slick": "^0.23.6", "@types/rehype-react": "^4.0.0", "@typescript-eslint/eslint-plugin": "^2.27.0", "@typescript-eslint/parser": "^2.27.0", - "autoprefixer": "^9.7.6", + "autoprefixer": "^10.3.7", "babel-eslint": "^10.1.0", "babel-jest": "^26.0.1", - "babel-plugin-transform-define": "^2.0.0", + "babel-plugin-transform-define": "^2.0.1", "babel-plugin-transform-object-assign": "^6.22.0", "eslint": "^6.8.0", "eslint-config-prettier": "^6.10.1", - "eslint-plugin-json": "^2.1.1", + "eslint-plugin-json": "^3.1.0", "eslint-plugin-jsx-a11y": "^6.2.3", "eslint-plugin-prettier": "^3.1.2", - "eslint-plugin-react": "^7.19.0", - "gatsby-plugin-catch-links": "^2.2.1", - "gatsby-plugin-feed": "^2.4.1", - "gatsby-plugin-google-analytics": "^2.2.2", - "gatsby-plugin-manifest": "2.2.23", - "gatsby-plugin-postcss": "^2.2.1", - "gatsby-plugin-react-helmet": "^3.2.1", + "eslint-plugin-react": "^7.26.1", + "gatsby-plugin-catch-links": "^3.14.0", + "gatsby-plugin-feed": "^3.14.0", + "gatsby-plugin-google-analytics": "^3.14.0", + "gatsby-plugin-manifest": "^3.14.0", + "gatsby-plugin-postcss": "^4.14.0", + "gatsby-plugin-react-helmet": "^4.14.0", "gatsby-plugin-sentry": "^1.0.1", - "gatsby-plugin-sharp": "2.2.32", - "gatsby-plugin-sitemap": "^2.3.1", - "gatsby-plugin-svgr": "^2.0.2", - "gatsby-plugin-twitter": "^2.2.2", - "gatsby-plugin-typescript": "^2.3.1", - "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5", - "gatsby-remark-autolink-headers": "^2.2.1", - "gatsby-remark-copy-linked-files": "^2.2.1", + "gatsby-plugin-sharp": "^3.14.1", + "gatsby-plugin-sitemap": "^4.10.0", + "gatsby-plugin-svgr": "^3.0.0-beta.0", + "gatsby-plugin-twitter": "^3.14.0", + "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.25", + "gatsby-remark-autolink-headers": "^4.11.0", + "gatsby-remark-copy-linked-files": "^4.11.0", "gatsby-remark-embed-gist": "^1.1.9", - "gatsby-remark-embedder": "^2.0.0", + "gatsby-remark-embedder": "^5.0.0", "gatsby-remark-external-links": "^0.0.4", - "gatsby-remark-images": "^3.2.2", - "gatsby-remark-prismjs": "^3.4.1", + "gatsby-remark-images": "^5.11.0", + "gatsby-remark-prismjs": "^5.11.0", "gatsby-remark-relative-images": "0.2.3", - "gatsby-remark-responsive-iframe": "^2.3.1", - "gatsby-remark-smartypants": "^2.2.1", - "gatsby-source-filesystem": "^2.2.2", - "gatsby-transformer-remark": "^2.7.1", - "gatsby-transformer-sharp": "2.2.23", + "gatsby-remark-responsive-iframe": "^4.11.0", + "gatsby-remark-smartypants": "^4.11.0", + "gatsby-source-filesystem": "^3.14.0", + "gatsby-transformer-remark": "^4.11.0", + "gatsby-transformer-sharp": "^3.14.0", "hast-util-select": "^4.0.0", "husky": "^4.2.3", - "jest": "^26.0.1", - "lint-staged": "^10.1.2", + "jest": "^27.3.0", + "lint-staged": "^11.2.3", "postcss-color-mod-function": "^3.0.3", - "postcss-custom-media": "^7.0.8", - "postcss-custom-properties": "^9.1.1", - "postcss-mixins": "^6.2.3", - "postcss-nested": "^4.2.1", - "prettier": "^2.2.1", - "rehype-parse": "^6.0.2", - "rehype-stringify": "^7.0.0", - "remark": "^12.0.0", - "remark-html": "^13.0.2", + "postcss-custom-media": "^8.0.0", + "postcss-custom-properties": "^12.0.0", + "postcss-mixins": "^8.1.0", + "postcss-nested": "^5.0.6", + "prettier": "^2.4.1", + "rehype-parse": "^7.0.1", + "rehype-stringify": "^8.0.0", + "remark": "^13.0.0", + "remark-html": "^13.0.1", "remark-parse": "^8.0.2", "stylelint": "^13.3.0", - "stylelint-config-standard": "^20.0.0", + "stylelint-config-standard": "^22.0.0", "typescript": "^3.8.3", - "unist-util-remove-position": "^2.0.1" + "unist-util-remove-position": "^3.0.0" }, "husky": { "hooks": { diff --git a/scripts/deploy-with-s3.js b/scripts/deploy-with-s3.js index 3dc199f17d..e91b1b1fe7 100755 --- a/scripts/deploy-with-s3.js +++ b/scripts/deploy-with-s3.js @@ -3,8 +3,9 @@ require('dotenv').config() const path = require('path') const PRODUCTION_PREFIX = 'dvc-org-prod' +const { mkdirSync } = require('fs') -const { DEPLOY_OPTIONS } = process.env +const { DEPLOY_OPTIONS, USE_PRODUCTION_CACHE } = process.env const clearCloudflareCache = require('./clear-cloudflare-cache') // Generate deploy options from a comma separated string in the DEPLOY_OPTIONS @@ -20,6 +21,7 @@ const deployOptions = DEPLOY_OPTIONS : { download: true, build: true, + retry: true, upload: true, clean: true, clearCloudflareCache: true @@ -69,9 +71,8 @@ const { cleanEntry } = require('./s3-utils') const { move } = require('fs-extra') -const { downloadAllFromS3, uploadAllToS3, cleanAllLocal } = withEntries( - cacheDirs -) +const { downloadAllFromS3, uploadAllToS3, cleanAllLocal } = + withEntries(cacheDirs) function run(command) { execSync(command, { @@ -86,7 +87,10 @@ async function main() { // This greatly speeds up PR initial build time. if (deployOptions.download) { - if (emptyPrefix) { + if (USE_PRODUCTION_CACHE) { + console.warn('USE_PRODUCTION_CACHE is set, downloading from production') + await downloadAllFromS3(PRODUCTION_PREFIX) + } else if (emptyPrefix) { console.warn( `The current prefix "${s3Prefix}" is empty! Attempting to fall back on production cache.` ) @@ -94,24 +98,31 @@ async function main() { } else { await downloadAllFromS3(s3Prefix) } + mkdirSync('.cache/json', { recursive: true }) } if (deployOptions.build) { try { run('yarn build') } catch (buildError) { - // Sometimes gatsby build fails because of bad cache. - // Clear it and try again. - - console.error('------------------------\n\n') - console.error('The first Gatsby build attempt failed!\n') - console.error(buildError) - console.error('\nRetrying with a cleared cache:\n') - - // Clear only .cache so we re-use images - await cleanEntry(cacheDirs[1]) - - run('yarn build') + if (deployOptions.retry) { + // Sometimes gatsby build fails because of bad cache. + // Clear it and try again. + + console.error('------------------------\n\n') + console.error('The first Gatsby build attempt failed!\n') + console.error(buildError) + console.error('\nRetrying with a cleared cache:\n') + + // Clear only .cache so we re-use images + await cleanEntry(cacheDirs[1]) + + run('yarn build') + } else { + throw new Error( + 'The first Gatsby build attempt failed, and DEPLOY_OPTIONS does not include "retry"' + ) + } } } diff --git a/scripts/heroku-deploy.sh b/scripts/heroku-deploy.sh new file mode 100755 index 0000000000..3ecfbe75a8 --- /dev/null +++ b/scripts/heroku-deploy.sh @@ -0,0 +1,6 @@ +#!/usr/bin/env bash +NEWPWD="/tmp/gatsby-build" +mv $OLDPWD $NEWPWD +ln -s $NEWPWD $OLDPWD +cd $NEWPWD +./scripts/deploy-with-s3.js diff --git a/src/components/Blog/Feed/Item/index.tsx b/src/components/Blog/Feed/Item/index.tsx index 64b74e3108..e600e03b01 100644 --- a/src/components/Blog/Feed/Item/index.tsx +++ b/src/components/Blog/Feed/Item/index.tsx @@ -2,13 +2,13 @@ import React, { useEffect, useRef } from 'react' import { useRafState, useWindowSize } from 'react-use' import { graphql } from 'gatsby' import Link from '../../../Link' -import Image, { FixedObject, FluidObject } from 'gatsby-image' +import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image' import cn from 'classnames' import { ISocialIcon } from '../../../SocialIcon' import FeedMeta from '../../FeedMeta' -import styles from './styles.module.css' +import * as styles from './styles.module.css' import { ReactComponent as Placeholder } from './placeholder.svg' @@ -21,13 +21,12 @@ export interface IBlogPostData { description: string descriptionLong: string picture?: { - big: FluidObject - small: FluidObject + big: IGatsbyImageData } author: { name: string avatar: { - fixed: FixedObject + gatsbyImageData: IGatsbyImageData } links: Array } @@ -55,7 +54,7 @@ const Item: React.FC = ({ } }, [width]) - const image = picture ? (big ? picture.big : picture.small) : undefined + const image = picture?.big return (
= ({ )} > - {picture ? ( - + {image ? ( + ) : ( )} @@ -104,22 +103,11 @@ export const query = graphql` description descriptionLong picture { - big: fluid( - maxWidth: 650 - maxHeight: 450 - cropFocus: CENTER - quality: 90 - ) { - ...GatsbyImageSharpFluid_withWebp - } - small: fluid( - maxWidth: 300 - maxHeight: 250 - cropFocus: CENTER - quality: 90 - ) { - ...GatsbyImageSharpFluid_withWebp - } + big: gatsbyImageData( + width: 650 + height: 450 + transformOptions: { cropFocus: CENTER } + ) } author { name @@ -128,9 +116,12 @@ export const query = graphql` site } avatar { - fixed(width: 40, height: 40, quality: 50, cropFocus: CENTER) { - ...GatsbyImageSharpFixed_withWebp - } + gatsbyImageData( + width: 40 + height: 40 + transformOptions: { cropFocus: CENTER } + layout: FIXED + ) } } } diff --git a/src/components/Blog/Feed/index.tsx b/src/components/Blog/Feed/index.tsx index 15ac2cc347..bedfa7fa05 100644 --- a/src/components/Blog/Feed/index.tsx +++ b/src/components/Blog/Feed/index.tsx @@ -7,7 +7,7 @@ import cn from 'classnames' import Paginator, { IPaginatorPageInfo } from '../../Paginator' import Item, { IBlogPostData } from './Item' -import styles from './styles.module.css' +import * as styles from './styles.module.css' export interface IBlogFeedPostList { nodes: Array diff --git a/src/components/Blog/FeedMeta/index.tsx b/src/components/Blog/FeedMeta/index.tsx index 13b369d81d..45ad6bc80b 100644 --- a/src/components/Blog/FeedMeta/index.tsx +++ b/src/components/Blog/FeedMeta/index.tsx @@ -1,15 +1,15 @@ -import Image, { FixedObject } from 'gatsby-image' +import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image' import React from 'react' import Link from '../../Link' import { pluralizeComments } from '../../../utils/front/i18n' -import styles from './styles.module.css' +import * as styles from './styles.module.css' import SocialIcon, { ISocialIcon } from '../../SocialIcon' interface IBlogFeedMetaProps { avatar: { - fixed: FixedObject + gatsbyImageData: IGatsbyImageData } commentsUrl?: string commentsCount?: number @@ -30,7 +30,11 @@ const FeedMeta: React.FC = ({ }) => { return (
- +
  • {name}
    • {links && ( diff --git a/src/components/Blog/FeedMeta/styles.module.css b/src/components/Blog/FeedMeta/styles.module.css index 306b6e5dfc..db8efcad97 100644 --- a/src/components/Blog/FeedMeta/styles.module.css +++ b/src/components/Blog/FeedMeta/styles.module.css @@ -37,9 +37,10 @@ margin-right: 14px; &::before { - content: '• '; + content: '•'; position: absolute; right: 100%; + width: 0.55em; } } diff --git a/src/components/Blog/Layout/index.tsx b/src/components/Blog/Layout/index.tsx index 3f8ad589d3..5bd1c8afc7 100644 --- a/src/components/Blog/Layout/index.tsx +++ b/src/components/Blog/Layout/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import SEO from '../../SEO' import MainLayout, { LayoutComponent } from '../../MainLayout' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const keywords = 'git, data, version control, machine learning models management, datasets' diff --git a/src/components/Blog/Post/HeroPic/index.tsx b/src/components/Blog/Post/HeroPic/index.tsx index 4102feed28..3acb5ff4cd 100644 --- a/src/components/Blog/Post/HeroPic/index.tsx +++ b/src/components/Blog/Post/HeroPic/index.tsx @@ -1,40 +1,20 @@ -import Image from 'gatsby-image' +import { GatsbyImage, getImage } from 'gatsby-plugin-image' +import { IGatsbyImageDataParent } from 'gatsby-plugin-image/dist/src/components/hooks' import React from 'react' -import { BLOG } from '../../../../consts' -import { - IBlogPostHeroPic, - IGatsbyImageProps -} from '../../../../templates/blog-post' +import { IBlogPostHeroPic } from '../../../../templates/blog-post' -import styles from './styles.module.css' - -const NonStretchedImage: React.FC = props => { - let normalizedProps = props - if (props.fluid && props.fluid.presentationWidth) { - const presetantionWidth = props.fluid?.presentationWidth - const width = - presetantionWidth < BLOG.imageMaxWidthHero - ? presetantionWidth / 2 - : presetantionWidth - normalizedProps = { - ...props, - style: { - ...(props.style || {}), - maxWidth: width, - margin: '0 auto' - } - } - } - return -} +import * as styles from './styles.module.css' const HeroPic: React.FC = ({ pictureComment, picture }) => { + const image = getImage(picture as IGatsbyImageDataParent) return (
    -
    - -
    + {image && ( +
    + +
    + )} {pictureComment && (
    { if (!triggerRect || !tooltipRect) { diff --git a/src/components/Blog/Post/index.tsx b/src/components/Blog/Post/index.tsx index c19d7236f7..9e6021b768 100644 --- a/src/components/Blog/Post/index.tsx +++ b/src/components/Blog/Post/index.tsx @@ -18,7 +18,7 @@ import Share from './Share' import PageContent from '../../PageContent' import SubscribeSection from '../../SubscribeSection' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const Post: React.FC = ({ html, @@ -84,9 +84,7 @@ const Post: React.FC = ({
    - {picture && ( - - )} +
    diff --git a/src/components/Community/Block/index.tsx b/src/components/Community/Block/index.tsx index bf258ef63e..2e5d965ad9 100644 --- a/src/components/Community/Block/index.tsx +++ b/src/components/Community/Block/index.tsx @@ -1,6 +1,6 @@ import React from 'react' -import styles from './styles.module.css' +import * as styles from './styles.module.css' interface ICommunityBlockProps { children: React.ReactNode diff --git a/src/components/Community/Contribute/index.tsx b/src/components/Community/Contribute/index.tsx index aec779ad0c..3eba9b4109 100644 --- a/src/components/Community/Contribute/index.tsx +++ b/src/components/Community/Contribute/index.tsx @@ -8,7 +8,7 @@ import CommunitySection from '../Section' import { logEvent } from '../../../utils/front/ga' import { useCommunityData } from '../../../utils/front/community' -import sharedStyles from '../styles.module.css' +import * as sharedStyles from '../styles.module.css' const logPR = (): void => logEvent('community', 'contribute-pr') const logBlogpost = (): void => logEvent('community', 'contribute-blogpost') diff --git a/src/components/Community/Events/index.tsx b/src/components/Community/Events/index.tsx index 2863f44345..714510015f 100644 --- a/src/components/Community/Events/index.tsx +++ b/src/components/Community/Events/index.tsx @@ -10,8 +10,8 @@ import Section from '../Section' import { logEvent } from '../../../utils/front/ga' import { useCommunityData } from '../../../utils/front/community' -import sharedStyles from '../styles.module.css' -import styles from './styles.module.css' +import * as sharedStyles from '../styles.module.css' +import * as styles from './styles.module.css' export interface IEvent { theme: ICommunitySectionTheme @@ -111,7 +111,7 @@ const Events: React.FC<{ theme: ICommunitySectionTheme }> = ({ theme }) => {
    )) ) : ( -
    +
    Subscribe to be up to date!{' '} 👇 diff --git a/src/components/Community/Events/styles.module.css b/src/components/Community/Events/styles.module.css index 774f22a2ae..052796f99c 100644 --- a/src/components/Community/Events/styles.module.css +++ b/src/components/Community/Events/styles.module.css @@ -13,7 +13,6 @@ } .eventsPlaceholder { - composes: gray from '../styles.module.css'; text-align: center; margin: auto; font-size: 1rem; diff --git a/src/components/Community/Hero/index.tsx b/src/components/Community/Hero/index.tsx index badbd3c620..417f248900 100644 --- a/src/components/Community/Hero/index.tsx +++ b/src/components/Community/Hero/index.tsx @@ -6,7 +6,7 @@ import Link from '../../Link' import { useCommunityData } from '../../../utils/front/community' import { logEvent } from '../../../utils/front/ga' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const logHero = (): void => logEvent('community', 'hero') diff --git a/src/components/Community/Learn/index.tsx b/src/components/Community/Learn/index.tsx index 770417c89f..c4be7ef52f 100644 --- a/src/components/Community/Learn/index.tsx +++ b/src/components/Community/Learn/index.tsx @@ -15,8 +15,8 @@ import { useCommunityData } from '../../../utils/front/community' import getPosts from '../../../queries/posts' import { pluralizeComments } from '../../../utils/front/i18n' -import sharedStyles from '../styles.module.css' -import styles from './styles.module.css' +import * as sharedStyles from '../styles.module.css' +import * as styles from './styles.module.css' const docsPage = getFirstPage() @@ -27,7 +27,7 @@ const logDocumentationAll = (): void => interface ICommunityBlogPost { color: string commentsUrl?: string - pictureUrl: string | null + pictureUrl?: string date: string title: string url: string @@ -45,9 +45,10 @@ const BlogPost: React.FC = ({ return null } - const logPost = useCallback(() => logEvent('community', 'blog', title), [ - title - ]) + const logPost = useCallback( + () => logEvent('community', 'blog', title), + [title] + ) const { error, ready, result } = useCommentsCount(commentsUrl) diff --git a/src/components/Community/Meet/index.tsx b/src/components/Community/Meet/index.tsx index 24da2de555..fcdce794df 100644 --- a/src/components/Community/Meet/index.tsx +++ b/src/components/Community/Meet/index.tsx @@ -16,8 +16,8 @@ import { } from '../../../utils/front/api' import { useCommunityData } from '../../../utils/front/community' -import sharedStyles from '../styles.module.css' -import styles from './styles.module.css' +import * as sharedStyles from '../styles.module.css' +import * as styles from './styles.module.css' const logIssueAll = (): void => logEvent('community', 'issue', 'all') const logTopicAll = (): void => logEvent('community', 'topic', 'all') @@ -30,9 +30,10 @@ const Topic: React.FC<{ color: string } & IDiscussTopic> = ({ comments, color }) => { - const logTopic = useCallback(() => logEvent('community', 'forum', title), [ - title - ]) + const logTopic = useCallback( + () => logEvent('community', 'forum', title), + [title] + ) return (
    @@ -67,9 +68,10 @@ const Issue: React.FC<{ color: string } & IGithubIssue> = ({ comments, color }) => { - const logIssue = useCallback(() => logEvent('community', 'issue', title), [ - title - ]) + const logIssue = useCallback( + () => logEvent('community', 'issue', title), + [title] + ) return (
    @@ -82,7 +84,9 @@ const Issue: React.FC<{ color: string } & IGithubIssue> = ({ > {title} -
    +
    void + docsearch?: (opts: Record) => void } } diff --git a/src/components/Documentation/Layout/SidebarMenu/index.tsx b/src/components/Documentation/Layout/SidebarMenu/index.tsx index d48eac9390..f65ebf595a 100644 --- a/src/components/Documentation/Layout/SidebarMenu/index.tsx +++ b/src/components/Documentation/Layout/SidebarMenu/index.tsx @@ -20,7 +20,7 @@ import { } from '../../../../utils/shared/sidebar' import 'perfect-scrollbar/css/perfect-scrollbar.css' -import styles from './styles.module.css' +import * as styles from './styles.module.css' // A map for optional special icons that can be used in menu items // Use the key string here as the "icon" field in sidebar.json @@ -91,10 +91,12 @@ const SidebarMenuItem: React.FC = ({ isExpanded && styles.active, isRootParent && 'docSearch-lvl0', 'link-with-focus', - style ? styles[style] : styles.sidebarDefault, - isLeafItem && styles.leafItem, + // style ? styles[style] : styles.sidebarDefault, + style && styles[style], + // isLeafItem && styles.leafItem, // Limit the default bullet to items with no special icon - icon ? undefined : styles.withDefaultBullet + // icon ? undefined : styles.withDefaultBullet + icon && undefined ) const bulletIconClassName = cn( diff --git a/src/components/Documentation/Layout/index.tsx b/src/components/Documentation/Layout/index.tsx index 680ac9b28c..6e742a8910 100644 --- a/src/components/Documentation/Layout/index.tsx +++ b/src/components/Documentation/Layout/index.tsx @@ -9,7 +9,7 @@ import SidebarMenu from './SidebarMenu' import { matchMedia } from '../../../utils/front/breakpoints' import { focusElementWithHotkey } from '../../../utils/front/focusElementWithHotkey' -import styles from './styles.module.css' +import * as styles from './styles.module.css' import { useWindowSize } from 'react-use' const Layout: LayoutComponent = ({ children, ...restProps }) => { diff --git a/src/components/Documentation/Markdown/Main/index.tsx b/src/components/Documentation/Markdown/Main/index.tsx index 91a815f455..41dc0b0dfb 100644 --- a/src/components/Documentation/Markdown/Main/index.tsx +++ b/src/components/Documentation/Markdown/Main/index.tsx @@ -7,8 +7,8 @@ import Tutorials from '../../TutorialsLinks' import { getPathWithSource } from '../../../../utils/shared/sidebar' import 'github-markdown-css/github-markdown.css' -import sharedStyles from '../../styles.module.css' -import styles from './styles.module.css' +import * as sharedStyles from '../../styles.module.css' +import * as styles from './styles.module.css' const isInsideCodeBlock = (node: Element): boolean => { while (node?.parentNode) { diff --git a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx index 4cc3fbc8fa..3a69b1bad1 100644 --- a/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx +++ b/src/components/Documentation/Markdown/Tooltip/DesktopView/index.tsx @@ -4,7 +4,7 @@ import Portal from '@reach/portal' import throttle from 'lodash/throttle' import { getHeaderHeight } from '../../../../../utils/front/scroll' -import styles from './styles.module.css' +import * as styles from './styles.module.css' interface IDesktopViewProps { description: string diff --git a/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx b/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx index d54ddde90a..7c58dc58d4 100644 --- a/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx +++ b/src/components/Documentation/Markdown/Tooltip/MobileView/index.tsx @@ -4,7 +4,7 @@ import Portal from '@reach/portal' import { isTriggeredFromKB } from '../../../../../utils/front/keyboard' -import styles from './styles.module.css' +import * as styles from './styles.module.css' interface IMobileViewProps { description: string diff --git a/src/components/Documentation/Markdown/index.tsx b/src/components/Documentation/Markdown/index.tsx index f7881d23a5..4240a1c6ee 100644 --- a/src/components/Documentation/Markdown/index.tsx +++ b/src/components/Documentation/Markdown/index.tsx @@ -6,6 +6,7 @@ import React, { useContext } from 'react' import { nanoid } from 'nanoid' +import { Node } from 'unist' import rehypeReact from 'rehype-react' import Collapsible from 'react-collapsible' @@ -13,13 +14,13 @@ import Main from './Main' import Link from '../../Link' import Tooltip from './Tooltip' -import styles from './styles.module.css' +import * as styles from './styles.module.css' import { TogglesContext, TogglesProvider } from './ToggleProvider' -const Details: React.FC<{ - children: Array<{ props: { children: ReactNode } } | string> -}> = ({ children }) => { - const filteredChildren: ReactNode[] = children.filter(child => child !== '\n') +const Details: React.FC> = ({ children }) => { + const filteredChildren: ReactNode[] = ( + children as Array<{ props: { children: ReactNode } } | string> + ).filter(child => child !== '\n') const firstChild = filteredChildren[0] as JSX.Element if (!/^h.$/.test(firstChild.type)) { @@ -42,7 +43,7 @@ const Details: React.FC<{ */ return ( {filteredChildren.slice(1)} @@ -50,8 +51,8 @@ const Details: React.FC<{ ) } -const Abbr: React.FC<{ children: [string] }> = ({ children }) => { - return +const Abbr: React.FC> = ({ children }) => { + return } const Cards: React.FC = ({ children }) => { @@ -181,23 +182,24 @@ const Tab: React.FC = ({ children }) => (
    {children}
    ) -const renderAst = new rehypeReact({ - // eslint-disable-next-line @typescript-eslint/no-explicit-any - createElement: React.createElement as any, +// Rehype's typedefs don't allow for custom components, even though they work +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const renderAst = new (rehypeReact as any)({ + createElement: React.createElement, Fragment: React.Fragment, components: { - details: Details, - abbr: Abbr, a: Link, + abbr: Abbr, card: Card, cards: Cards, + details: Details, toggle: Toggle, tab: Tab } }).Compiler interface IMarkdownProps { - htmlAst: object + htmlAst: Node githubLink: string tutorials: { [type: string]: string } prev?: string diff --git a/src/components/Documentation/RightPanel/index.tsx b/src/components/Documentation/RightPanel/index.tsx index 3abb69ab39..ff7569d184 100644 --- a/src/components/Documentation/RightPanel/index.tsx +++ b/src/components/Documentation/RightPanel/index.tsx @@ -9,8 +9,8 @@ import Tutorials from '../TutorialsLinks' import { getScrollPosition, getHeaderHeight } from '../../../utils/front/scroll' import { allImagesLoadedInContainer } from '../../../utils/front/images' -import sharedStyles from '../styles.module.css' -import styles from './styles.module.css' +import * as sharedStyles from '../styles.module.css' +import * as styles from './styles.module.css' interface IRightPanelProps { headings: Array diff --git a/src/components/Documentation/TutorialsLinks/index.tsx b/src/components/Documentation/TutorialsLinks/index.tsx index 98e59c63aa..2539fec72b 100644 --- a/src/components/Documentation/TutorialsLinks/index.tsx +++ b/src/components/Documentation/TutorialsLinks/index.tsx @@ -5,8 +5,8 @@ import startCase from 'lodash/startCase' import Link from '../../Link' -import sharedStyles from '../styles.module.css' -import styles from './styles.module.css' +import * as sharedStyles from '../styles.module.css' +import * as styles from './styles.module.css' interface ITutorialsLinksProps { compact?: boolean diff --git a/src/components/Documentation/WithJSX/AutoLinkElement/index.tsx b/src/components/Documentation/WithJSX/AutoLinkElement/index.tsx index f23c946855..d6f3b2fc2b 100644 --- a/src/components/Documentation/WithJSX/AutoLinkElement/index.tsx +++ b/src/components/Documentation/WithJSX/AutoLinkElement/index.tsx @@ -1,8 +1,8 @@ import React from 'react' -import styles from './styles.module.css' +import * as styles from './styles.module.css' interface IElementProps { - attributes?: object + attributes?: Record el?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' } @@ -28,7 +28,7 @@ const Element: React.FC = ({ children, el, attributes }) => { interface IAutoLinkHeaderProps { id: string el?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' - anchorStyle?: object + anchorStyle?: Record } const AutoLinkElement: React.FC = ({ diff --git a/src/components/Documentation/index.tsx b/src/components/Documentation/index.tsx index 88c2cf480f..a2d9c3e175 100644 --- a/src/components/Documentation/index.tsx +++ b/src/components/Documentation/index.tsx @@ -1,4 +1,5 @@ import React from 'react' +import { Node } from 'unist' import Markdown from './Markdown' import RightPanel from './RightPanel' @@ -16,7 +17,7 @@ export const getGithubLink = (source: string): string => interface IDocumentationProps { path: string headings: Array - htmlAst: object + htmlAst: Node } const Documentation: React.FC = ({ diff --git a/src/components/DownloadButton/index.tsx b/src/components/DownloadButton/index.tsx index 5678fd08a0..d2472d71f7 100644 --- a/src/components/DownloadButton/index.tsx +++ b/src/components/DownloadButton/index.tsx @@ -7,7 +7,7 @@ import Link from '../Link' import isClient from '../../utils/front/isClient' import { logEvent } from '../../utils/front/ga' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const VERSION = `2.8.1` @@ -78,44 +78,44 @@ const getUserOS = (): OS => { return OSName } -const DownloadButtonDropdownItems: React.FC = ({ - onClick, - userOS -}) => { - return ( -
    - {dropdownItems.map((os, index) => { - if (os === null) { +const DownloadButtonDropdownItems: React.FC = + ({ onClick, userOS }) => { + return ( +
    + {dropdownItems.map((os, index) => { + if (os === null) { + return ( +
    + ) + } + + const item = itemsByOs[os] + return ( -
    + onClick(os)} + > + {item.title} + ) - } - - const item = itemsByOs[os] - - return ( - onClick(os)} - > - {item.title} - - ) - })} -
    - ) -} + })} +
    + ) + } const DownloadButton: React.FC = ({ openTop }) => { const userOS = useRef(getUserOS()) diff --git a/src/components/Features/index.tsx b/src/components/Features/index.tsx index 51758a796d..b597839986 100644 --- a/src/components/Features/index.tsx +++ b/src/components/Features/index.tsx @@ -6,7 +6,7 @@ import HeroSection from '../HeroSection' import Link from '../Link' import PromoSection from '../PromoSection' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const FeaturesPage: React.FC = () => ( <> diff --git a/src/components/HamburgerIcon/index.tsx b/src/components/HamburgerIcon/index.tsx index 005e61dc31..caedcea2ca 100644 --- a/src/components/HamburgerIcon/index.tsx +++ b/src/components/HamburgerIcon/index.tsx @@ -1,7 +1,7 @@ import cn from 'classnames' import React from 'react' -import styles from './styles.module.css' +import * as styles from './styles.module.css' interface IHamburgerProps { opened?: boolean diff --git a/src/components/HamburgerMenu/index.tsx b/src/components/HamburgerMenu/index.tsx index 31922c7fc0..3b1ec70332 100644 --- a/src/components/HamburgerMenu/index.tsx +++ b/src/components/HamburgerMenu/index.tsx @@ -10,7 +10,7 @@ import { ReactComponent as LogoSVG } from '../../../static/img/logo-white.svg' import { ReactComponent as TwitterIcon } from '../SocialIcon/twitter.svg' import { ReactComponent as GithubIcon } from '../SocialIcon/github.svg' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const docsPage = getFirstPage() diff --git a/src/components/HeroSection/index.tsx b/src/components/HeroSection/index.tsx index 29aa072ab3..0fa5bf1b0d 100644 --- a/src/components/HeroSection/index.tsx +++ b/src/components/HeroSection/index.tsx @@ -3,7 +3,7 @@ import cn from 'classnames' import LayoutWidthContainer from '../LayoutWidthContainer' -import styles from './styles.module.css' +import * as styles from './styles.module.css' interface IHeroSectionProps { className?: string diff --git a/src/components/Home/Diagram/index.tsx b/src/components/Home/Diagram/index.tsx index 6f631cd8cf..bf180dfb59 100644 --- a/src/components/Home/Diagram/index.tsx +++ b/src/components/Home/Diagram/index.tsx @@ -8,7 +8,7 @@ import Link from '../../Link' import 'slick-carousel/slick/slick.css' import 'slick-carousel/slick/slick-theme.css' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const LearnMore: React.FC<{ href: string }> = ({ href }) => (
    diff --git a/src/components/Home/LandingHero/GithubLine/index.tsx b/src/components/Home/LandingHero/GithubLine/index.tsx index a6d4d48e7c..947596de5a 100644 --- a/src/components/Home/LandingHero/GithubLine/index.tsx +++ b/src/components/Home/LandingHero/GithubLine/index.tsx @@ -2,7 +2,7 @@ import React from 'react' import Link from '../../../Link' import useStars from '../../../../gatsby/hooks/stars' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const GithubLine: React.FC = () => { const stars = useStars() @@ -15,7 +15,9 @@ const GithubLine: React.FC = () => { GitHub {stars && ( - + {stars} diff --git a/src/components/Home/LandingHero/index.tsx b/src/components/Home/LandingHero/index.tsx index 29dcf67b27..6372db4582 100644 --- a/src/components/Home/LandingHero/index.tsx +++ b/src/components/Home/LandingHero/index.tsx @@ -9,7 +9,7 @@ import GithubLine from './GithubLine' import { scrollIntoLayout, ease } from '../../../utils/front/scroll' import { logEvent } from '../../../utils/front/ga' -import styles from './styles.module.css' +import * as styles from './styles.module.css' interface ILandingHeroProps { scrollToRef: React.RefObject diff --git a/src/components/Home/LearnMore/index.tsx b/src/components/Home/LearnMore/index.tsx index 2760190d81..e02e70d07b 100644 --- a/src/components/Home/LearnMore/index.tsx +++ b/src/components/Home/LearnMore/index.tsx @@ -3,7 +3,7 @@ import React, { useCallback } from 'react' import { logEvent } from '../../../utils/front/ga' import { scrollIntoLayout, ease } from '../../../utils/front/scroll' -import styles from './styles.module.css' +import * as styles from './styles.module.css' interface ILearnMoreProps { scrollToRef: React.RefObject diff --git a/src/components/Home/UseCases/CollapsibleText/index.tsx b/src/components/Home/UseCases/CollapsibleText/index.tsx index 0e11146e9d..b91c2eaa01 100644 --- a/src/components/Home/UseCases/CollapsibleText/index.tsx +++ b/src/components/Home/UseCases/CollapsibleText/index.tsx @@ -3,7 +3,7 @@ import { Collapse } from 'react-collapse' import { isTriggeredFromKB } from '../../../../utils/front/keyboard' -import styles from './styles.module.css' +import * as styles from './styles.module.css' interface ICollapsibleTextProps { children: React.ReactNode diff --git a/src/components/Home/UseCases/Video/index.tsx b/src/components/Home/UseCases/Video/index.tsx index b9d85b2e09..250709e995 100644 --- a/src/components/Home/UseCases/Video/index.tsx +++ b/src/components/Home/UseCases/Video/index.tsx @@ -3,7 +3,7 @@ import React, { useState, useCallback } from 'react' import TwoRowsButton from '../../../TwoRowsButton' import { logEvent } from '../../../../utils/front/ga' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const Video: React.FC<{ id: string }> = ({ id }) => { const [isWatching, setWatching] = useState(false) diff --git a/src/components/Home/UseCases/index.tsx b/src/components/Home/UseCases/index.tsx index 2d6f9ea4d7..37fb4968c7 100644 --- a/src/components/Home/UseCases/index.tsx +++ b/src/components/Home/UseCases/index.tsx @@ -5,7 +5,7 @@ import CollapsibleText from './CollapsibleText' import LayoutWidthContainer from '../../LayoutWidthContainer' import ShowOnly from '../../ShowOnly' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const Heading1: React.FC = () => (
    @@ -86,15 +86,15 @@ const UseCases: React.ForwardRefRenderFunction = (_, ref) => {
    -
    +
    -
    +
    -
    +
    @@ -102,18 +102,20 @@ const UseCases: React.ForwardRefRenderFunction = (_, ref) => { -
    -
    +
    +
    }>
    -
    +
    }>
    -
    +
    }> diff --git a/src/components/Home/UseCases/styles.module.css b/src/components/Home/UseCases/styles.module.css index 46f6baff0b..6600ecc106 100644 --- a/src/components/Home/UseCases/styles.module.css +++ b/src/components/Home/UseCases/styles.module.css @@ -53,7 +53,7 @@ margin-top: 15px; } -.case { +.useCase { margin-bottom: 18px; } diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx index a44941a874..b00b4c42df 100644 --- a/src/components/Home/index.tsx +++ b/src/components/Home/index.tsx @@ -10,7 +10,7 @@ import Diagram from './Diagram' import UseCases from './UseCases' import { logEvent } from '../../utils/front/ga' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const Home: React.FC = () => { const diagramSectionRef = useRef(null) diff --git a/src/components/LayoutFooter/index.tsx b/src/components/LayoutFooter/index.tsx index 7c3fd3b265..0c29b976f3 100644 --- a/src/components/LayoutFooter/index.tsx +++ b/src/components/LayoutFooter/index.tsx @@ -15,7 +15,7 @@ import { ReactComponent as CmlSVG } from '../../../static/img/cml_icon-color--sq import { ReactComponent as StudioSVG } from '../../../static/img/studio_icon-color--square_vector.svg' import { ReactComponent as IterativeSVG } from '../../../static/img/iterative_icon-color--square_vector.svg' -import styles from './styles.module.css' +import * as styles from './styles.module.css' const docsPage = getFirstPage() @@ -153,7 +153,10 @@ const FooterLists: React.FC = () => (

    {header}

      {links.map(({ text, target, href, icon }, i) => ( -
    • +
    • {icon} {text} @@ -183,7 +186,9 @@ const FooterSocialIcons: React.FC = () => ( const LayoutFooter: React.FC = () => (