Refactor/to scss title

CHANGELOG.md

@@ -156,6 +156,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 - Updated husky script to avoid warning
 - Resolved incorrect meta tag rendering for nested routes
+- Prevent horizontal page scroll caused by overflowing long titles
 
 ### Changed
 
@@ -175,6 +176,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - Row
   - Container
   - Wrapper
+  - Title
   - Decorations/Bracket
   - Decorations/Stick
   - TwoColumn
@@ -187,4 +189,4 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - about page
   - home(index) page
 - Created a combineClasses function to clean up conditional class handling
-- Rename RowAlignLeft to Row
+- Rename RowAlignLeft to Row

components/blog/BlogPostsContainer/index.js

@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
 import { BlogCard } from '@/components/containers/Card/BlogCard';
-import Title from '@/components/snippets/Title';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
@@ -28,11 +27,11 @@ const BlogPostsContainer = ({
       <section className={styles.blogContainer}>
         {heading ? (
           <Container>
-            <Title title={heading} />
+            <h2>{heading}</h2>
           </Container>
         ) : tag ? (
           <Container>
-            <Title title={tagToHeading[tag]} />
+            <h2>{tagToHeading[tag]}</h2>
           </Container>
         ) : null}
         {swipe ? (

pages/about.js

@@ -1,7 +1,6 @@
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import TwoColumn from '@/components/containers/TwoColumn';
 import { OurGoalsCardsColumns } from '@/components/containers/CardColumns/OurGoalsCardsColumns';
-import Title from '@/components/snippets/Title';
 import Wrapper from '@/components/containers/Wrapper';
 import Container from '@/components/containers/Container';
 import { Row } from '@/components/containers/Row';
@@ -94,7 +93,7 @@ export default function AboutUs() {
       </RevealContentContainer>
       <RevealContentContainer>
         <Container>
-          <Title title='Our goals' />
+          <h2>Our goals</h2>
         </Container>
         <OurGoalsCardsColumns
           cards={[
@@ -214,7 +213,7 @@ export default function AboutUs() {
       <RevealContentContainer>
         <Wrapper customClass='primary__accent'>
           <Container>
-            <Title title='Who we are' />
+            <h2>Who we are</h2>
             <Row>
               {whoWeAre.map(_ => {
                 return (

pages/blog/index.js

@@ -2,7 +2,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 { BlogSearch } from '@/components/snippets/BlogSearch';
 import { blogRevalidate } from '@/utils/config';
 import { tagToHeading } from '@/utils/blogCategories';
@@ -29,11 +28,10 @@ export default function Blog({ posts }) {
     <>
       <Container>
         <BlogSearch>
-          <Title blogTitle title={!searchTerm && 'Latest Posts'} />
+          <h2>{!searchTerm && 'Latest Posts'}</h2>
           <SearchBar setSearchTerm={setSearchTerm} />
         </BlogSearch>
       </Container>
-
       <BlogPostsContainer posts={filteredPosts} heading={heading} />
       {!searchTerm &&
         Object.keys(tagToHeading).map(tag => (
@@ -48,8 +46,10 @@ export default function Blog({ posts }) {
 }
 
 export async function getStaticProps() {
-  const PER_PAGE = 1000
-  const res = await fetch(`https://dev.to/api/articles?username=wdp&per_page=${PER_PAGE}`);
+  const PER_PAGE = 1000;
+  const res = await fetch(
+    `https://dev.to/api/articles?username=wdp&per_page=${PER_PAGE}`,
+  );
   const posts = await res.json();
 
   return {

styles/globals.scss

@@ -14,3 +14,8 @@
   --dark-bg: #023047;
   --error: #be1313;
 }
+
+h2 {
+  overflow-wrap: break-word;
+  hyphens: auto;
+}