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

Merge branch 'feature/next-image' into 'master'

Browse Source 
Use next/image for all <img> tags

See merge request sahkoinsinoorikilta/vtmk/web2.0-frontend!24
This commit is contained in:
Aarni Halinen
2021-01-16 17:18:18 +00:00
parent e0ff72ce7c 063abb199f
commit acda3ac35f
12 changed files with 135 additions and 85 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/HeaderLogo.tsx
+12 -13
View File
@@ -1,28 +1,27 @@
import React from "react";
import Image from "next/image";
import styled from "styled-components";
import { Link } from "@components/index";
import breakpoints from "@theme/breakpoints";
const TitleImage = "/img/SIK_RGB_W_side.png";
// TODO: Responsive size
const Logo = styled.img`
max-width: 300px;
margin: 1rem 1rem;
@media screen and (max-width: ${breakpoints.mobile}) {
max-width: 100% !important;
margin: 1rem 0 !important;
}
const Logo = styled(Link)`
position: relative;
min-width: 200px;
min-height: 100px;
margin: 1rem 0 !important;
flex: 1 0 auto;
`;
const HeaderLogo: React.FC = () => (
<Link to="/">
<Logo
<Logo to="/">
<Image
src={TitleImage}
alt="logo"
layout="fill"
objectFit="scale-down"
/>
</Link>
</Logo>
);
export default HeaderLogo;
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/FreshmenPage/FreshmenPageView.tsx
+17 -5
View File
@@ -1,14 +1,11 @@
import React from "react";
import Image from "next/image";
import styled from "styled-components";
import FreshmenPageHero from "./FreshmenPageHero";
import {
CTASection, TextSection, InfoBox, PageLink, Link,
} from "@components/index";
const KippariImage = styled.img`
max-width:100%;
`;
const FOPAS_LINK = "";
const FUKSI_POINTS_LINK = "";
const TG_GROUP_CHAT_LINK = "https://t.me/joinchat/GsmJjhst3-BYIHQSefVhHg";
@@ -16,6 +13,10 @@ const TG_NOTIFICATIONS_LINK = "";
const EMAIL_LINK = "sik-ftmk@list.ayy.fi";
const EMAIL_LINK_MAILTO = `mailto:${EMAIL_LINK}`;
const ImageContainer = styled.div`
width: 100%;
`;
const FreshmenPageView: React.FC = () => (
<>
<FreshmenPageHero />
@@ -53,7 +54,18 @@ const FreshmenPageView: React.FC = () => (
Fuksipisteohje
</PageLink>
</div>
<KippariImage src="https://static.sika.sik.party/uus_webi/fuksikipparit.jpg" />
<ImageContainer>
<Image
src="https://static.sika.sik.party/uus_webi/fuksikipparit.jpg"
alt="Kipparit"
layout="responsive"
width={0}
height={0}
objectFit="contain"
/>
</ImageContainer>
<div>
<InfoBox>
<h6>Telegram?</h6>
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>
src/views/StudiesPage/StudiesPageView.tsx
+6 -10
View File
@@ -1,17 +1,10 @@
import React from "react";
import styled from "styled-components";
import Image from "next/image";
import {
CTASection, TextSection, PageLink, Accordion, Link,
} from "@components/index";
import StudiesPageHero from "./StudiesPageHero";
// TODO: Responsive
const TestimonialImage = styled.img`
max-width: 500px;
max-height: 500px;
width: 100%;
`;
const StudiesPageView: React.FC = () => (
<>
<StudiesPageHero />
@@ -53,10 +46,13 @@ const StudiesPageView: React.FC = () => (
<h6>Alumnien tarinoita</h6>
<p>SIKin alumneja löytyy vaikka mistä! Tässä muutama esimerkki erilaisista työtehtävistä ja tarinoista.</p>
<TestimonialImage
<Image
src="https://static.sika.sik.party/uus_webi/images/original/Ville_Viikari_photo_by_Anni_Hanen_02_Original.jpg"
alt="Ville Viikari"
width={300}
height={150}
layout="responsive"
objectFit="contain"
/>
<h6>Ville Viikari</h6>
<p>