feat(next/image): Converted images to next/image format, load images …

…from cms
justin-elias · Jan 20, 2021 · 9ede052 · 9ede052
1 parent 26e4a93
commit 9ede052
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 10 deletions.
diff --git a/.github/workflows/bump-version.yml b/.github/workflows/bump-version.yml
@@ -33,7 +33,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: pull-request-action
-        uses: vsoch/pull-request-action@1.0.6
+        uses: vsoch/pull-request-action@1.0.13
         if: github.actor == 'justin-elias'
         env:
           GITHUB_TOKEN: ${{ secrets.ACTION_TOKEN }}

diff --git a/next.config.js b/next.config.js
@@ -22,6 +22,10 @@ const {
 module.exports = withPlugins([[withImages],[withSourceMaps],[withMDX]], {
     // Allow mdx and md files to be pages
     pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'],
+    // Allowed domains for image optimization
+    images: {
+        domains: ['media.graphcms.com'],
+    },
     webpack(config, options) {
         config.resolve.modules.push(path.resolve("./"));
         config.node = {

diff --git a/src/components/BioDialog/InstrBioDialog.js b/src/components/BioDialog/InstrBioDialog.js
@@ -5,6 +5,7 @@ import {makeStyles} from "@material-ui/core/styles";
 // @material-ui/icons
 import {Close} from "@material-ui/icons";
 // core components
+import Image from "next/image";
 import {container} from "src/assets/jss/nextjs-material-kit.js";
 import {Dialog, DialogContent, DialogTitle, Fade, IconButton, Toolbar} from "@material-ui/core";
 import styles from "src/assets/jss/nextjs-material-kit/components/headerLinksStyle"
@@ -86,7 +87,7 @@ export default function InstrBioDialog(props) {
                 <DialogContent>
                     <GridContainer align={"center"}>
                         <GridItem xs={12} md={12}>
-                            <img src={instructor.headshotImage.url} alt={instructor.firstName} className={classes.bioImg}/>
+                            <Image src={instructor.headshotImage.url} width={instructor.headshotImage.width} height={instructor.headshotImage.height} alt={instructor.headshotImage.altText} className={classes.bioImg}/>
                         </GridItem>
                         <GridItem xs={12} md={12}>
                             <Typography variant={"body1"}>

diff --git a/src/pages-sections/Page-Sections/AboutSection.js b/src/pages-sections/Page-Sections/AboutSection.js
@@ -4,12 +4,11 @@ import classNames from "classnames";
 // @material-ui/core components
 import {makeStyles} from "@material-ui/core/styles";
 // core components
+import Image from "next/image";
 import GridContainer from "../../components/Grid/GridContainer";
 import GridItem from "../../components/Grid/GridItem";
 import Card from "../../components/Card/Card.js";
 import CardBody from "../../components/Card/CardBody";
-import ale from "../../assets/img/faces/ale_01.jpeg";
-import hbh from "../../assets/img/faces/hbh_01.jpeg";
 import hCones from "../../assets/img/bck/svg/bckHorizonalCones.svg";
 import Typography from "@material-ui/core/Typography";
 import {cardTitle, title} from "../../assets/jss/nextjs-material-kit";
@@ -71,9 +70,9 @@ const style = ({
 });
 const useStyles = makeStyles(style);
 
-
-export default function AboutSection() {
+export default function AboutSection(props) {
   const classes = useStyles();
+  const { staffPictures} = props
   const imageClasses = classNames(
     classes.imgRaised,
     classes.imgRoundedCircle,
@@ -103,7 +102,7 @@ export default function AboutSection() {
           <GridItem xs={12} sm={12} md={6}>
             <Card plain>
               <GridItem xs={12} sm={12} md={6} className={classes.itemGrid}>
-                <img src={ale} alt="Studio Director" className={imageClasses} />
+                <Image src={staffPictures.ashleah.instructor.staffPicture.url} width={staffPictures.ashleah.instructor.staffPicture.width} height={staffPictures.ashleah.instructor.staffPicture.height} alt={staffPictures.ashleah.instructor.staffPicture.altText} className={imageClasses} />
               </GridItem>
               <h4 className={classes.cardTitle}>
                 Ashleah Elias
@@ -149,7 +148,7 @@ export default function AboutSection() {
           <GridItem xs={12} sm={12} md={6}>
             <Card plain>
               <GridItem xs={12} sm={12} md={6} className={classes.itemGrid}>
-                <img src={hbh} alt="Director of Operations" className={imageClasses} />
+                <Image src={staffPictures.heather.instructor.staffPicture.url} width={staffPictures.heather.instructor.staffPicture.width} height={staffPictures.heather.instructor.staffPicture.height} alt={staffPictures.heather.instructor.staffPicture.altText} className={imageClasses} />
               </GridItem>
               <h4 className={classes.cardTitle}>
                 Heather Hodapp

diff --git a/src/pages/classes-encounters.js b/src/pages/classes-encounters.js
@@ -107,6 +107,9 @@ const classCategories = gql`{
                 firstName
                 lastName
                 headshotImage {
+                    altText
+                    height
+                    width
                     url
                 }
                 bio {

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -6,8 +6,61 @@ import CLPSection from "../pages-sections/Page-Sections/CLPSection";
 import AboutSection from "../pages-sections/Page-Sections/AboutSection";
 import Layout from "../pages-sections/Page-Sections/Layout";
 import BrandedHeader from "../components/BrandedHeader/BrandedHeader";
+import gql from "graphql-tag";
+import {queryCMS} from "../utils/queryCMS";
 
-export default function homePage() {
+
+const ashPictureQuery = gql`{
+    instructor(where: {id: "ckbzbrp9c0vtj0178zpaznj2m"}) {
+        staffPicture{
+            altText
+            height
+            width
+            url
+        }
+    }
+}`
+
+const meganPictureQuery = gql`{
+    instructor(where: {id: "ckcgx7lug0dgh0181iu3966gy"}) {
+        staffPicture{
+            altText
+            height
+            width
+            url
+        }
+    }
+}`
+
+const heatherPictureQuery = gql`{
+    instructor(where: {id: "ckduor4kw036a0176q133bekd"}) {
+        staffPicture{
+            altText
+            height
+            width
+            url
+        }
+    }
+}`
+
+export async function getStaticProps(context) {
+    const preview = context.preview ? context.preview : null;
+    const prodToken = process.env.NEXT_PUBLIC_GRAPHCMS_WEBCLIENT_API_TOKEN;
+    const token = preview ? (context.previewData.token + process.env.NEXT_PUBLIC_GRAPH_CMS_PREVIEW_TOKEN_CLIENT) : prodToken;
+    const endPoint = process.env.NEXT_PUBLIC_GRAPHCMS_ENDPOINT
+
+    const ashPicture = await queryCMS(ashPictureQuery, token, endPoint);
+    const meganPicture = await queryCMS(meganPictureQuery, token, endPoint);
+    const heatherPicture = await queryCMS(heatherPictureQuery, token, endPoint);
+    const staffPictures = {ashleah: ashPicture, megan: meganPicture, heather: heatherPicture}
+
+    return {
+        props: { staffPictures, preview }, // will be passed to the page component as props
+    }
+}
+
+export default function homePage(props) {
+    const {staffPictures, preview } = props
     return (
         <div>
             <Head>
@@ -21,7 +74,7 @@ export default function homePage() {
                 <BrandedHeader>
                     <CLPSection/>
                 </BrandedHeader>
-                <AboutSection/>
+                <AboutSection staffPictures={staffPictures}/>
             </Layout>
         </div>
     );