Merge pull request #161 from Web-Dev-Path/feat/add-styled-components

Added styled-components

Author: klezi10

CHANGELOG.md

@@ -85,6 +85,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Blog page which pulls content from dev.to
 - Search functionality for blog posts
+- Styled components to Title component
 
 ### Fixed
 

components/blog/BlogPostsContainer.js

@@ -32,9 +32,13 @@ const BlogPostsContainer = ({
     <RevealContentContainer>
       <div className={styles.blogContainer}>
         {heading ? (
-          <Title customClass='blogTitle' title={heading} />
+          <Container>
+            <Title title={heading} />
+          </Container>
         ) : tag ? (
-          <Title customClass='blogTitle' title={tagToHeading[tag]} />
+          <Container>
+            <Title title={tagToHeading[tag]} />
+          </Container>
         ) : null}
         {
           // put in rows of 3 if more than 3 posts (for swipable cards)

components/snippets/Title.js

@@ -1,15 +1,12 @@
-import styles from '@/styles/Title.module.scss';
+import styled from 'styled-components';
 
-const Title = ({ title, customClass }) => {
-  return (
-    <h2
-      className={
-        customClass ? `${styles.title} ${styles[customClass]}` : styles.title
-      }
-    >
-      {title}
-    </h2>
-  );
+export const StyledTitle = styled.h2`
+  align-self: flex-start;
+  margin: '0 auto 1rem';
+`;
+
+const Title = ({ title }) => {
+  return <StyledTitle>{title}</StyledTitle>;
 };
 
 export default Title;

next.config.js

@@ -19,4 +19,26 @@ module.exports = withPWA({
       },
     ],
   },
+  compiler: {
+    // see https://styled-components.com/docs/tooling#babel-plugin for more info on the options.
+    styledComponents:
+      true |
+      {
+        // Enabled by default in development, disabled in production to reduce file size,
+        // setting this will override the default for all environments.
+        displayName: true,
+        // Enabled by default.
+        ssr: true,
+        // Enabled by default.
+        fileName: true,
+        // Empty by default.
+        topLevelImportPaths: '',
+        // Defaults to ["index"].
+        meaninglessFileNames: '',
+        // Enabled by default.
+        cssProp: true,
+        // Empty by default.
+        namespace: '',
+      },
+  },
 });

package.json

@@ -21,20 +21,24 @@
   "dependencies": {
     "@sendgrid/mail": "^7.7.0",
     "html-entities": "^2.3.2",
-    "next": "^13.0.5",
+    "next": "^13.1.6",
     "next-pwa": "^5.5.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-google-recaptcha": "^2.1.0",
     "react-hook-form": "^7.35.0",
     "react-mailchimp-subscribe": "^2.1.3",
     "sass": "^1.35.1",
+    "styled-components": "^5.3.6",
     "swiper": "^8.2.2"
   },
   "devDependencies": {
     "husky": "^8.0.0",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "prettylint": "^1.0.0"
+  },
+  "resolutions": {
+    "styled-components": "^5"
   }
 }

pages/blog/index.js

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import BlogPostsContainer from '@/components/blog/BlogPostsContainer';
+import Container from '@/components/containers/Container';
 import SearchBar from '@/components/blog/SearchBar';
 import Title from '@/components/snippets/Title';
 import styles from '@/styles/Blog.module.scss';
@@ -27,10 +28,13 @@ export default function Blog({ posts }) {
 
   return (
     <>
-      <div className={styles.blogSearch}>
-        <Title customClass='blogTitle' title={!searchTerm && 'Latest Posts'} />
-        <SearchBar setSearchTerm={setSearchTerm} />
-      </div>
+      <Container>
+        <div className={styles.blogSearch}>
+          <Title blogTitle title={!searchTerm && 'Latest Posts'} />
+          <SearchBar setSearchTerm={setSearchTerm} />
+        </div>
+      </Container>
+
       <BlogPostsContainer {...filteredData} />
       {!searchTerm &&
         Object.keys(tagToHeading).map(tag => (

styles/Blog.module.scss

@@ -23,15 +23,14 @@
 
 .blogSearch {
   display: flex;
-  align-items: center;
   padding-top: 2.5rem;
-  margin: 0 auto;
-  width: 90%;
-  max-width: $large-desktop-breakpoint;
+  justify-content: space-between;
+  flex-direction: column-reverse;
+  align-items: flex-start;
 
-  @include mobile {
-    flex-direction: column-reverse;
-    align-items: flex-start;
+  @include desktop {
+    align-items: center;
+    flex-direction: row;
   }
 }
 

styles/SearchBar.module.scss

@@ -4,16 +4,17 @@
 .searchBar {
   display: flex;
   justify-content: space-between;
-  width: 19rem;
   height: 2.5rem;
   border-radius: 0.5rem;
   border: 0;
   box-shadow: 2px 4px 8px 3px rgba(0, 0, 0, 0.08);
   font-size: 1.2rem;
+  width: 100%;
+  margin-top: 3rem;
 
-  @include mobile {
-    width: 80%;
-    margin: 3rem auto;
+  @include desktop {
+    width: 24rem;
+    margin: unset;
   }
 
   input[type='search'] {