Add word-break to external links so that layout doesnt get janky with long external links

Author: jason-roundtree

README.md

@@ -12,6 +12,7 @@ My personal blog, made with the following technologies:
 - [ ] add internal links between posts
 - [ ] fix tags associated with unpublished posts to not be displayed
 - [ ] prevent top-of-post list bullets from being rendered where post image gets rendered prior to image being rendered
+- [ ] what's going on with the flicker on the background of the most recent post when dark/light modes are toggled?
 - [ ] store theme preference in local storage
 - [ ] add logic that checks if manual published date is set before sorting
 - [ ] change how aside is serialized from asterisk

web/components/PostImg.js

@@ -3,20 +3,23 @@ import styled from 'styled-components'
 
 const PostImgContainer = styled.div`
     position: relative;
-    margin: 2.5em 0;
+    margin: 2.5em auto;
 `
 const PostImg = styled.img`
     position: relative;
-    /* top: 0;
-    left: 0; */
-    display: block;
-    width: 100%;
+    max-width: 100%;
+    height: auto;
     transition: opacity 400ms ease 0ms;
+    /* width: 100%; */
+    /* TODO: what exactly were these supposed to be doing? */
+    /* top: 0;
+    left: 0;
+    display: block; */
 `
 const PostLqipImg = styled(PostImg)`
     position: absolute;
     /* width: 100%; */
-    /* TODO: what exactly are these supposed to be doing? */
+    /* TODO: what exactly were these supposed to be doing? */
     /* transform: scale(1);
     transition: visibility 0ms ease 400ms; */
 `
@@ -25,7 +28,7 @@ const PhotoCredit = styled.p`
 `
 
 function PostImage(props) {
-    // console.log('PI props: ', props)
+    console.log('Image props: ', props)
     const [isLoaded, setIsLoaded] = useState(false);
     // const [fullImgUrl, setFullImgUrl] = useState(null)
     // const [lqipImgUrl, setLqipImgUrl] = useState(null)

web/pages/posts/[slug].js

@@ -85,6 +85,8 @@ const CodeNote = styled.p`
 const ExternalLink = styled.a`
     text-decoration: underline;
     color: ${({ theme }) => theme.articleLinks};
+    /* display:inline-block; */
+    word-break: break-word;
 `
 const Button = styled.button`
     font-size: .8em;