TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use next/image for all <img> tags

Browse Source
This commit is contained in:
Aarni Halinen
2021-01-16 18:21:42 +02:00
parent e0ff72ce7c
commit 6d5c0bebe9
9 changed files with 100 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
next.config.js
+13 -2
View File
@@ -1,11 +1,22 @@
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
module.exports = withBundleAnalyzer({
target: "server",
images: {
domains: [
"api.sika.sik.party",
"api.dev.sik.party",
"static.sika.sik.party",
"sahkoinsinoorikilta.fi",
"api.sahkoinsinoorikilta.fi",
"static.sahkoinsinoorikilta.fi",
"placehold.it"
],
},
webpack: (config) => {
config.plugins.push(
new FaviconsWebpackPlugin({
src/components/AddIcon.tsx
+15
View File
@@ -0,0 +1,15 @@
import React from "react";
import Image from "next/image";
const Icon = "/img/add-icon.png";
const AddIcon: React.FC = () => (
<Image
src={Icon}
width={20}
height={20}
alt="Add"
/>
);
export default AddIcon;
src/components/AddLink.tsx
+5 -7
View File
@@ -2,8 +2,7 @@ import React, { ComponentProps } from "react";
import styled from "styled-components";
import { colors } from "@theme/colors";
import { Link } from "@components/index";
const AddIcon = "/img/add-icon.png";
import AddIcon from "@components/AddIcon";
const StyledLink = styled(Link)`
display: flex;
@@ -15,10 +14,9 @@ const StyledLink = styled(Link)`
color: ${colors.orange2};
}
img {
margin-right: 8px;
margin-top: -2px;
width: 20px;
& > div {
margin-right: 8px !important;
margin-top: -2px !important;
}
`;
@@ -28,7 +26,7 @@ type AddLinkProps = ComponentProps<typeof Link> & {
const AddLink: React.FC<AddLinkProps> = ({ text, ...props }) => (
<StyledLink passHref {...props}>
<img src={AddIcon} />
<AddIcon />
{text}
</StyledLink>
);
src/components/Card.tsx
+2 -7
View File
@@ -1,4 +1,5 @@
import React from "react";
import Image from "next/image";
import styled from "styled-components";
import { colors } from "@theme/colors";
import { Link } from "@components/index";
@@ -19,12 +20,6 @@ const StyledCard = styled.article`
margin: 1rem;
text-align: center;
img {
width: 100%;
max-height: 300px;
margin-bottom: 1rem;
}
p {
font-size: 1rem;
text-overflow: ellipsis;
@@ -77,7 +72,7 @@ const WrappedCard: React.FC<WrappedCardProps> = ({
};
const datetime = new Date(start_time).toLocaleString("fi-FI", options);
const img = image ? (
<img src={image} alt={imageAlt} />
<Image src={image} alt={imageAlt} layout="responsive" width={0} height={0} objectFit="scale-down" />
) : null;
const button = (
src/components/ContactCard.tsx
+7 -5
View File
@@ -1,4 +1,5 @@
import React from "react";
import Image from "next/image";
import styled from "styled-components";
import { colors } from "@theme/colors";
@@ -12,7 +13,7 @@ const Card = styled.article`
`;
const ImageContainer = styled.div`
padding: 0.5rem;
position: relative;
display: flex;
flex-shrink: 0;
justify-content: center;
@@ -20,9 +21,8 @@ const ImageContainer = styled.div`
height: 5rem;
width: 5rem;
& > img {
width: 100%;
height: 100%;
img {
padding: 0.5rem !important;
border-radius: 50%;
}
`;
@@ -60,9 +60,11 @@ const ContactCard: React.FC<ContactCardProps> = ({
<Card>
{image ? (
<ImageContainer>
<img
<Image
src={image}
alt={name}
layout="fill"
objectFit="scale-down"
/>
</ImageContainer>
) : null}
src/components/Widgets/SignupQuestionsWidget/SignupQuestionsWidget.tsx
+5 -7
View File
@@ -5,8 +5,7 @@ import { DragDropContext, Droppable } from "react-beautiful-dnd";
import { Question } from ".";
import colors from "@theme/colors";
import QuestionList from "./QuestionList";
const AddIcon = "/img/add-icon.png";
import AddIcon from "@components/AddIcon";
const Widget = styled.div`
& > button {
@@ -18,10 +17,9 @@ const Widget = styled.div`
padding: 0;
margin: 1rem 0;
& > img {
margin-right: 8px;
margin-top: -2px;
width: 20px;
& > div {
margin-right: 8px !important;
margin-top: -2px !important;
}
}
`;
@@ -90,7 +88,7 @@ const SignupQuestionsWidget: React.FC<SignupQuestionsWidgetProps> = ({ value, on
</Droppable>
</DragDropContext>
<AddQuestionButton type="button" onClick={handleNewRowClick(questions)} data-e2e="admin-signup-new-question">
<img src={AddIcon} />
<AddIcon />
New Question
</AddQuestionButton>
</Widget>
src/views/ActualPage/ActualPageView.tsx
+10 -6
View File
@@ -1,5 +1,7 @@
import React from "react";
import Image from "next/image";
import styled from "styled-components";
import breakpoints from "@theme/breakpoints";
import { Event } from "@models/Event";
import { Post } from "@models/Feed";
@@ -19,10 +21,12 @@ const Gallery = styled.div`
display: flex;
flex-flow: row nowrap;
img {
max-width: calc(100% / 3);
@media screen and (max-width: ${breakpoints.mobile}) {
flex-flow: column;
}
div {
flex: 1 0;
object-fit: cover;
}
`;
@@ -45,9 +49,9 @@ const ActualPageView: React.FC<ActualPageViewProps> = ({ events, feed }) => (
</CTASection>
<Gallery>
<img src="https://placehold.it/400x400" />
<img src="https://placehold.it/400x400" />
<img src="https://placehold.it/400x400" />
<Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} />
<Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} />
<Image src="https://placehold.it/400x400" alt="TODO" layout="responsive" objectFit="cover" width={400} height={400} />
</Gallery>
<CTASection
src/views/EventPage/EventPageView.tsx
+8 -7
View File
@@ -1,4 +1,5 @@
import React from "react";
import Image from "next/image";
import styled from "styled-components";
import colors from "@theme/colors";
import { Event } from "@models/Event";
@@ -21,10 +22,6 @@ const StyledTextSection = styled(TextSection)`
p {
color: ${colors.orange1};
}
img {
width: 100%;
}
}
`;
@@ -47,9 +44,13 @@ const EventPageView: React.FC<EventPageViewProps> = ({ event }) => {
<p>
{event.description_fi}
</p>
<div>
<img src={event.image || event.tags[0].icon} alt={event.title_fi} />
</div>
<Image
src={event.image || event.tags[0].icon}
alt={event.title_fi}
layout="responsive"
width={0}
height={0}
/>
</h1>
<div>
<Content source={event.content_fi} escapeHtml={false} />
src/views/FrontPage/FrontPageView.tsx
+35 -16
View File
@@ -1,4 +1,5 @@
import React from "react";
import Image from "next/image";
import styled from "styled-components";
import {
Card,
@@ -45,13 +46,9 @@ const SponsorReel = styled.div`
& > * {
margin: 1rem;
min-width: 200px;
}
}
img {
width: 200px;
object-fit: cover;
}
a {
color: ${colors.blue1};
text-decoration: underline;
@@ -122,17 +119,39 @@ const FrontPageView: React.FC<FrontPageViewProps> = ({ events, feed }) => (
<h6>Yhteistyössä:</h6>
<SponsorReel>
<div>
<Link to="https://new.abb.com/fi/uralle"><img src={ABB} /></Link>
<Link to="https://www.capgemini.com/"><img src={Capgemini} /></Link>
<Link to="https://www.caruna.fi/tietoa-meista/tyonhakijalle/tyonantajalupaus"><img src={Caruna} /></Link>
<Link to="https://www.eaton.com/us/en-us.html"><img src={Eaton} /></Link>
<Link to="https://www.ensto.com/fi"><img src={Ensto} /></Link>
<Link to="https://www.esett.com/"><img src={eSett} /></Link>
<Link to="https://www.fennovoima.fi/"><img src={Fennovoima} /></Link>
<Link to="https://www.fingrid.fi/"><img src={Fingrid} /></Link>
<Link to="https://www.nrcgroup.fi/"><img src={NRCGroup} /></Link>
<Link to="https://www.okmetic.com/fi/"><img src={Okmetic} /></Link>
<Link to="https://www.sogeti.com/"><img src={Sogeti} /></Link>
<Link to="https://new.abb.com/fi/uralle">
<Image src={ABB} alt="ABB" layout="responsive" width={200} height={100} objectFit="contain" />
</Link>
<Link to="https://www.capgemini.com/">
<Image src={Capgemini} alt="Capgemini" layout="responsive" width={200} height={100} objectFit="contain" />
</Link>
<Link to="https://www.caruna.fi/tietoa-meista/tyonhakijalle/tyonantajalupaus">
<Image src={Caruna} alt="Caruna" layout="responsive" width={200} height={100} objectFit="contain" />
</Link>
<Link to="https://www.eaton.com/us/en-us.html">
<Image src={Eaton} alt="Eaton" layout="responsive" width={200} height={100} objectFit="contain" />
</Link>
<Link to="https://www.ensto.com/fi">
<Image src={Ensto} alt="Ensto" layout="responsive" width={200} height={100} objectFit="contain" />
</Link>
<Link to="https://www.esett.com/">
<Image src={eSett} alt="eSett" layout="responsive" width={200} height={100} objectFit="contain" />
</Link>
<Link to="https://www.fennovoima.fi/">
<Image src={Fennovoima} alt="Fennovoima" layout="responsive" width={200} height={100} objectFit="contain" />
</Link>
<Link to="https://www.fingrid.fi/">
<Image src={Fingrid} alt="Fingrid" layout="responsive" width={200} height={100} objectFit="contain" />
</Link>
<Link to="https://www.nrcgroup.fi/">
<Image src={NRCGroup} alt="NRCGroup" layout="responsive" width={200} height={100} objectFit="contain" />
</Link>
<Link to="https://www.okmetic.com/fi/">
<Image src={Okmetic} alt="Okmetic" layout="responsive" width={200} height={100} objectFit="contain" />
</Link>
<Link to="https://www.sogeti.com/">
<Image src={Sogeti} alt="Sogeti" layout="responsive" width={200} height={100} objectFit="contain" />
</Link>
</div>
<Link to="/yritysyhteistyo">Haluatko kuulla lisää yhteistyöstä kanssamme?</Link>
</SponsorReel>