During the process of updating our homepage from gatsby and styled components to next.js and scss modules, the power of AI, specifically ChatGPT, was harnessed to perform the conversion task.
In order to achieve satisfactory results, the system was guided with increasingly specific prompts. It was an iterative process, involving a bit of trial and error, but the results were worth the effort!
The initial prompt image:
And here's the exciting output - the converted code sans styled-components:
A longer prompt had to be devised, one that provided clear instructions stating the requirement of converting the available code into a scss module and a tsx file while discarding the usage of styled-components completely. It also specified how to import classes and naming conventions in addition to replacement of colors with css variables.
The application of ChatGPT to this conversion operation is promising. With such AI-backed tools at our disposal, the possibilities for improving software development productivity and efficiency appear to be endless. Feel free to experiment on your own and seek innovative methods to streamline your project migration operations!
Here's the original code snippet we inputted for transformation:
1
2import { Link } from 'gatsby';
3import { GatsbyImage } from 'gatsby-plugin-image';
4import React from 'react';
5import styled from 'styled-components';
6import { COLORS } from '../enums/colors';
7
8const AuthorContainer = styled.div`
9 display: flex;
10 flex-flow: column nowrap;
11 align-items: center;
12 position: relative;
13 text-align: center;
14 padding-bottom: 0.75rem;
15 width: 100%;
16
17 h5 {
18 margin-bottom: 0.25rem;
19 }
20
21 :hover {
22 color: ${(props) => (props.id === 'newcubator' ? COLORS.BACKGROUND.BLUEGREY : COLORS.MAIN.TURQUOISE)};
23 }
24`;
25
26const AuthorImage = styled(GatsbyImage)`
27 width: 175px;
28 border-radius: 100%;
29 margin-bottom: 1rem;
30 aspect-ratio: 1 / 1;
31 object-fit: cover;
32`;
33
34const TeamInvisibleLink = styled(Link)`
35 position: absolute;
36 left: 0;
37 right: 0;
38 top: 0;
39 bottom: 0;
40 z-index: 1;
41`;
42
43const Author = ({ id, team }) => {
44 const member = team.find((member) => member.id === id);
45
46 return (
47 <AuthorContainer id={id}>
48 {id !== 'newcubator' && <TeamInvisibleLink to={`/team/#${id}`} />}
49 <AuthorImage image={{ ...member?.image?.childImageSharp?.gatsbyImageData, aspectRatio: 1 }} />
50 <div>
51 <h5>{member?.name}</h5>
52 <p>{member?.position}</p>
53 </div>
54 </AuthorContainer>
55 );
56};
57
58export default Author;
59
60
