Disable gatsby-plugin-image so wiki can be built entirely on iGEM ser…

…vers again (#228) * (index): Don't use gatsby-plugin-image to conserve space * (gitlab-ci): Revert to pre-#177 * Revert build.yml to pre-#177 rough state * (lint): Run prettier against 6ef7cdd * (ci/github): Revert mirror.yml to pre-#177 state * Remove gatsby-plugin-image from footer images * (ci/github/mirror): Fix comment syntax * Remove gatsby-plugin-image from /team/ --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
genoswitch · Oct 10, 2023 · ec167df · ec167df
1 parent f9e4368
commit ec167df
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 248 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -15,6 +15,7 @@ jobs:
       cancel-in-progress: true
     permissions:
       checks: write # Create checks for commits
+      pull-requests: write # Add comments to PRs
     steps:
       - name: Checkout repository
         uses: actions/checkout@v3
@@ -35,28 +36,6 @@ jobs:
       - name: Build site
         run: npm run build -- --prefix-paths --verbose --no-color
 
-      - name: Split static assets
-        run: chmod +x ./post-build-prod.sh && ./post-build-prod.sh
-
-      - name: Create tgz of public
-        run: cd public && tar czvf ../${{ github.sha }}.tgz ./
-
-      - uses: yamatt/backblaze-b2-upload-action@v6
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-        with:
-          key_id: ${{ secrets.B2_KEY_ID }}
-          application_key: ${{ secrets.B2_APPLICATION_KEY }}
-          bucket_name: ${{ secrets.B2_BUCKET_NAME }}
-          file_path: ${{ github.sha }}.tgz
-          remote_path: wiki-builds/${{ github.sha }}.tgz
-
-      - name: Upload static assets
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
-        run: npx tsx src/post-build-upload.ts
-        env:
-          IGEM_USERNAME: ${{ secrets.IGEM_USERNAME }}
-          IGEM_PASSWORD: ${{ secrets.IGEM_PASSWORD }}
-
       - name: Send bundle stats to RelativeCI
         uses: relative-ci/agent-action@v2
         with:
@@ -87,36 +66,6 @@ jobs:
           output: |
             {"title":"${{ steps.determineSize.outputs.SIZE }} (of 5M)","summary":"${{ steps.determineSize.outputs.SIZE }} (of 5M)"}
 
-  build-staging:
-    name: Build Staging
-    runs-on: ubuntu-latest
-    # If this job is running more than once on the same branch,
-    # cancel the older job. See mirror.yml for more details.
-    concurrency:
-      group: ${{ github.workflow }}-${{ github.ref_name }}-build-staging
-      cancel-in-progress: true
-    permissions:
-      pull-requests: write # Add comments to PRs
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v2
-        with:
-          version: latest
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v3
-        with:
-          cache: "pnpm"
-
-      - name: Install dependencies
-        run: pnpm install
-
-      - name: Build site
-        run: npm run build
-
       - name: Upload to netlify (staging environment - deploy preview, if a PR build)
         if: github.event_name == 'pull_request'
         uses: nwtgck/actions-netlify@v2.0
@@ -152,25 +101,3 @@ jobs:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
         timeout-minutes: 1
-#  build-docker:
-#    name: Test Build (Docker)
-#    runs-on: ubuntu-latest
-#    container:
-#      image: node:latest
-#    steps:
-#      - name: Checkout repository
-#        uses: actions/checkout@v3
-#
-#      # https://github.com/actions/runner/issues/2033
-#      # https://github.com/tehraninasab/conventions/commit/6f8edca9848902b1be24c74b90e53768cf2104fd
-#      - name: Repository ownership fix (github actions)
-#        run: git config --system --add safe.directory /__w/wiki/wiki
-#
-#      - name: Setup pnpm
-#        run: corepack enable && corepack prepare pnpm@latest --activate
-#
-#      - name: Install dependencies
-#        run: pnpm install
-#
-#      - name: Build site
-#        run: NODE_OPTIONS=--max-old-space-size=4096 npm run build -- --prefix-paths --verbose --no-color
diff --git a/.github/workflows/mirror.yml b/.github/workflows/mirror.yml
@@ -2,20 +2,15 @@ name: Mirror
 
 # Dependabot PRs do not have the same access to secrets.
 on:
-  workflow_run:
-    workflows: ["Build"]
-    branches: [main]
-    types:
-      - completed
-#  push:
-#    branches:
-#      - "**"
-#      - "!dependabot/**"
-# Will trigger on a merge commit (push) so deleted branches will be synced on the next push to any matching branch.
-#  delete:
-#    branches:
-#      - "**"
-#      - "!dependabot/**"
+  push:
+    branches:
+      - "**"
+      - "!dependabot/**"
+  # Will trigger on a merge commit (push) so deleted branches will be synced on the next push to any matching branch.
+  delete:
+    branches:
+      - "**"
+      - "!dependabot/**"
 
 jobs:
   igem-gitlab:

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
@@ -1,13 +1,29 @@
-image: alpine:latest
+image: node:latest
+
+# This folder is cached between builds
+# https://docs.gitlab.com/ce/ci/yaml/README.html#cache
+# https://docs.gitlab.com/ee/ci/caching/#cache-nodejs-dependencies
+cache:
+  key: $CI_COMMIT_REF_SLUG
+  paths:
+    # https://docs.gitlab.com/ee/ci/caching/#cache-nodejs-dependencies
+    # https://pnpm.io/continuous-integration#gitlab-ci
+    - .pnpm-store
+    # (gatsby): Enables git-lab CI caching. Both .cache and public must be cached, otherwise builds will fail.
+    - .cache/
+    - public/
+
+before_script:
+  - corepack enable
+  - corepack prepare pnpm@latest --activate
+  - pnpm config set store-dir .pnpm-store
 
 pages:
   stage: build
   script:
-    - mkdir public
-    - cd public
-    - wget https://b2-f000-cdn.jcx.ovh/file/genoswitch-us-west-pub/wiki-builds/$CI_COMMIT_SHA.tgz
-    - tar xzvf $CI_COMMIT_SHA.tgz
-    - rm $CI_COMMIT_SHA.tgz
+    - pnpm install
+    # Pass --prefix-paths to gatsby build
+    - NODE_OPTIONS=--max-old-space-size=4096 npm run build -- --prefix-paths --verbose --no-color
   artifacts:
     paths:
       - public

diff --git a/gatsby-config.mjs b/gatsby-config.mjs
@@ -72,46 +72,6 @@ const config = {
 				path: "./src/pages/",
 			},
 		},
-		{
-			resolve: "gatsby-plugin-remote-images",
-			options: {
-				nodeType: "TeamMemberYaml",
-				imagePath: "picturePath",
-				name: "dynamicImage",
-				// siteMetdata could be undefined, but is not in our use case, so use ! (definitely assigned)
-				prepareUrl: url => `${config.siteMetadata.assetBasePath}${url}`,
-			},
-		},
-		{
-			resolve: "gatsby-plugin-remote-images",
-			options: {
-				nodeType: "SponsorYaml",
-				imagePath: "logoPath",
-				name: "dynamicImage",
-				// siteMetdata could be undefined, but is not in our use case, so use ! (definitely assigned)
-				prepareUrl: url => `${config.siteMetadata.assetBasePath}${url}`,
-			},
-		},
-		{
-			resolve: "gatsby-plugin-remote-images",
-			options: {
-				nodeType: "ProminentLogoYaml",
-				imagePath: "logoPath",
-				name: "dynamicImage",
-				// siteMetdata could be undefined, but is not in our use case, so use ! (definitely assigned)
-				prepareUrl: url => `${config.siteMetadata.assetBasePath}${url}`,
-			},
-		},
-		{
-			resolve: "gatsby-plugin-remote-images",
-			options: {
-				nodeType: "HomepageCardYaml",
-				imagePath: "picturePath",
-				name: "dynamicImage",
-				// siteMetdata could be undefined, but is not in our use case, so use ! (definitely assigned)
-				prepareUrl: url => `${config.siteMetadata.assetBasePath}${url}`,
-			},
-		},
 		{
 			resolve: "gatsby-plugin-manifest",
 			options: {

diff --git a/src/components/footer/components/prominentLogos.tsx b/src/components/footer/components/prominentLogos.tsx
@@ -15,15 +15,11 @@ const ProminentLogos = ({ nodes, assetPath, size, containerSx }: ProminentLogoPr
 	return (
 		<Grid item container spacing={0} sx={containerSx}>
 			{nodes.map(node => {
-				// To make TS happy, use the notNull assertion for dynamicImage as well as getImage's return value.
-				// Also cast dynamicImage to ImageDataLike (mismatched so must cast to unknown first.)
-				const image = getImage(node.dynamicImage! as unknown as ImageDataLike)!;
-
 				return (
 					<Grid item xs={size} key={`ProminentLogo-${node.name}`}>
 						<a href={node.url!} target="_blank">
-							<GatsbyImage
-								image={image}
+							<img
+								src={`${assetPath}${node.logoPath}`}
 								style={{ maxWidth: "100%", maxHeight: "100%" }}
 								alt={`${node.name} Logo`}
 							/>

diff --git a/src/components/footer/components/sponsorLogos.tsx b/src/components/footer/components/sponsorLogos.tsx
@@ -12,19 +12,15 @@ type SponsorLogoProps = {
 	size: number;
 };
 
-const SponsorLogos = ({ nodes, containerSx, elementSx, size }: SponsorLogoProps) => {
+const SponsorLogos = ({ nodes, assetPath, containerSx, elementSx, size }: SponsorLogoProps) => {
 	return (
 		<Grid item container spacing={2} sx={containerSx}>
 			{nodes.map(node => {
-				// To make TS happy, use the notNull assertion for dynamicImage as well as getImage's return value.
-				// Also cast dynamicImage to ImageDataLike (mismatched so must cast to unknown first.)
-				const image = getImage(node.dynamicImage! as unknown as ImageDataLike)!;
-
 				return (
 					<Grid item key={`sponsorGrid-${node.name}`} xs={size} sx={elementSx}>
 						<a href={node.url!} target="_blank">
-							<GatsbyImage
-								image={image}
+							<img
+								src={`${assetPath}${node.logoPath}`}
 								style={{ maxWidth: "100%", maxHeight: "100%" }}
 								alt={`${node.name} Logo`}
 							/>

diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
@@ -36,51 +36,15 @@ export const query = graphql`
 		nodes {
 			name
 			url
-			# static, higher res (original) image
-			#logoPath
-			# gatsby-plugin-image (using logoPath)
-			dynamicImage {
-				childImageSharp {
-					gatsbyImageData(
-						# Set by height, width props.
-						#layout: FIXED
-						width: 125
-						# No placeholder image (team page has blurred placeholders)
-						placeholder: NONE
-						# WebP only.
-						formats: [WEBP]
-						outputPixelDensities: [0.25] # Generate 0.25x and 1x.
-						# 1x is always created (see below)
-						# https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#customizing-the-default-options:~:text=and%20will%20always%20include%20a%201x%20image.
-					)
-				}
-			}
+			logoPath
 		}
 	}
 
 	fragment FooterProminentLogoYamlFragment on ProminentLogoYamlConnection {
 		nodes {
 			name
 			url
-			# static, higher res (original) image
-			#logoPath
-			# gatsby-plugin-image (using logoPath)
-			dynamicImage {
-				childImageSharp {
-					gatsbyImageData(
-						# Set by height, width props.
-						#layout: FIXED
-						width: 376
-						# No placeholder image (team page has blurred placeholders)
-						placeholder: NONE
-						# WebP only.
-						formats: [WEBP]
-						outputPixelDensities: [0.25] # Generate 0.25x and 1x.
-						# 1x is always created (see below)
-						# https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#customizing-the-default-options:~:text=and%20will%20always%20include%20a%201x%20image.
-					)
-				}
-			}
+			logoPath
 		}
 	}
 

diff --git a/src/components/homepage/card.tsx b/src/components/homepage/card.tsx
@@ -30,6 +30,7 @@ const theme = createTheme({
 
 type HomepageCardProps = {
 	card: HomepageCardNode;
+	assetBasePath: string;
 };
 
 // Change size of card image depending on screen size
@@ -70,9 +71,9 @@ export default class HomepageCard extends React.Component<HomepageCardProps, {}>
 							<Card style={{ position: "relative" }}>
 								{/** cardMedia */}
 								<Box sx={imageStyle}>
-									<GatsbyImage
-										alt={`$${this.props.card.name} header image`}
-										image={image}
+									<img
+										src={`${this.props.assetBasePath}${this.props.card.picturePath}`}
+										alt={`${this.props.card.name} header image`}
 										style={{
 											position: "absolute",
 											width: "100%",

diff --git a/src/components/team/creditEntry.tsx b/src/components/team/creditEntry.tsx
@@ -19,6 +19,7 @@ import Grid from "@mui/material/Unstable_Grid2/Grid2";
 import HtmlReactParser from "html-react-parser";
 
 type CreditEntryArgs = {
+	assetBasePath: string;
 	member: TeamMemberNode;
 	data: Queries.TeamPageDataQuery;
 	tags: TeamTag[];
@@ -47,12 +48,6 @@ export class CreditEntry extends React.Component<CreditEntryArgs, CreditEntrySta
 
 	render() {
 		if (this.state.showModal && !this.state.modalIsReady) {
-			// Preload the modal image
-			const image = new Image();
-			image.onload = () => {
-				this.setState({ modalIsReady: true });
-			};
-			image.src = this.assetBasePath + this.props.member.picturePath;
 		}
 		// To make TS happy, use the notNull assertion for dynamicImage as well as getImage's return value.
 		// Also cast dynamicImage to ImageDataLike (mismatched so must cast to unknown first.)
@@ -62,10 +57,11 @@ export class CreditEntry extends React.Component<CreditEntryArgs, CreditEntrySta
 				<Card raised>
 					<Grid container spacing={0}>
 						<Grid xs={12} md={4}>
-							<div onClick={() => this.setState({ showModal: true })}>
-								{/*<Card.Img src={this.assetBasePath + this.props.member.picturePath} />*/}
-								<GatsbyImage image={image} alt={`${this.props.member.name}'s picture.`} />
-							</div>
+							<img
+								style={{ maxHeight: "100%", maxWidth: "100%" }}
+								src={`${this.props.assetBasePath}${this.props.member.picturePath}`}
+								alt={`${this.props.member.name}'s picture.`}
+							/>
 						</Grid>
 						<Grid xs={12} md={8} style={{ padding: 16 }}>
 							<Typography variant="h5">{this.props.member.name}</Typography>
@@ -97,28 +93,6 @@ export class CreditEntry extends React.Component<CreditEntryArgs, CreditEntrySta
 						</Grid>
 					</Grid>
 				</Card>
-				{/** MUI Dialog is more flexible than MUI Modal. */}
-				<Dialog
-					open={this.state.showModal}
-					onClose={() => this.setState({ showModal: false })}
-					closeAfterTransition
-				>
-					<DialogTitle>{this.props.member.name}</DialogTitle>
-					<DialogContent>
-						<div>
-							{this.state.modalIsReady ? (
-								<img
-									style={{ maxHeight: "100%", maxWidth: "100%" }}
-									src={this.assetBasePath + this.props.member.picturePath}
-								/>
-							) : (
-								<div style={{ display: "flex", justifyContent: "center" }}>
-									<CircularProgress />
-								</div>
-							)}
-						</div>
-					</DialogContent>
-				</Dialog>
 			</div>
 		);
 	}