Fixed some CSS issues, added gradient overlay for link previews

braydoncoyer · braydoncoyer · commit 0e4c447fca4d · 2022-12-10T18:29:52.000-06:00
diff --git a/components/CustomLink.tsx b/components/CustomLink.tsx
@@ -79,7 +79,7 @@ export default function CustomLink({ children, href }) {
                   alt={children}
                 />
               ) : (
-                <span className="flex items-center justify-center w-56 h-40 bg-white rounded-md shadow-lg">
+                <span className="flex items-center justify-center w-56 h-40 bg-white rounded-md shadow-lg text-slate-800">
                   Loading...
                 </span>
               )}
diff --git a/components/TagList.tsx b/components/TagList.tsx
@@ -43,8 +43,8 @@ export function TagList({ tag, tags }) {
       </ul>
 
       {/* gradient fades */}
-      <div className="absolute w-12 h-16 top-[40px] left-0 bg-gradient-to-r from-white dark:from-dark"></div>
-      <div className="absolute w-12 h-16 top-[40px] right-0 bg-gradient-to-l from-white dark:from-dark"></div>
+      <div className="absolute w-12 h-16 top-[50px] left-0 bg-gradient-to-r from-white dark:from-dark"></div>
+      <div className="absolute w-12 h-16 top-[50px] right-0 bg-gradient-to-l from-white dark:from-dark"></div>
     </div>
   );
 }
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -6,7 +6,6 @@ export default function Document(props) {
     <Html lang="en">
       <Head>
         <link href="/static/favicons/favicon.ico" rel="shortcut icon" />
-        <link href="/static/favicons/site.webmanifest" rel="manifest" />
         <link
           href="/static/favicons/apple-touch-icon.png"
           rel="apple-touch-icon"
diff --git a/pages/about.tsx b/pages/about.tsx
@@ -47,9 +47,9 @@ export default function About({ recentArticles, workTimeline }) {
         <div className="hidden md:block md:float-left">
           <Image
             className="md:mr-8"
-            src="https://res.cloudinary.com/braydoncoyer/image/upload/v1667839711/family_photo.jpg"
+            src="https://res.cloudinary.com/braydoncoyer/image/upload/v1670716662/family_photo_scs57f.jpg"
             placeholder="blur"
-            blurDataURL="https://res.cloudinary.com/braydoncoyer/image/upload/v1667839711/family_photo.jpg"
+            blurDataURL="https://res.cloudinary.com/braydoncoyer/image/upload/v1670716662/family_photo_scs57f.jpg"
             width={340}
             height={448}
             alt={'article cover'}
diff --git a/pages/api/link-preview.ts b/pages/api/link-preview.ts
@@ -4,7 +4,13 @@ export default async function handler(req, res) {
   try {
     let { url } = req.query;
     const { status, data } = await mql(url, {
-      screenshot: true
+      screenshot: true,
+      // @ts-ignore
+      overlay: {
+        background:
+          'linear-gradient(225deg, #F472B6 0%, #7A96FC 50%, #26F0C0 100%)',
+        browser: 'dark'
+      }
     });
     res.status(200).json({
       image: data?.screenshot?.url
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -14,14 +14,14 @@ import { useRouter } from 'next/router';
 export default function Home({ recentArticles }) {
   const { push } = useRouter();
   return (
-    <Container showCircles>
+    <Container>
       <div>
         <div>
           <div className="grid items-center grid-cols-1 mt-12 text-center md:mt-24 md:text-left md:grid-cols-6">
             <h1 className="order-2 col-span-5 text-4xl leading-tight md:leading-normal md:order-1 sm:text-5xl">
               I'm{' '}
               <span className="text-teal-500 dark:text-teal-400">Braydon</span>.
-              I'm a developer, blogger and designer working at LogicGate.
+              I'm a developer, blogger and speaker working at LogicGate.
             </h1>
             <div className="order-1 md:order-2">
               <Image
@@ -36,7 +36,7 @@ export default function Home({ recentArticles }) {
               />
             </div>
           </div>
-          <div className="space-y-6 md:space-y-0 md:space-x-4">
+          <div className="space-y-6 text-center md:text-left md:space-y-0 md:space-x-4">
             <Button
               buttonType={ButtonType.PRIMARY}
               onButtonClick={() => push('/blog')}
diff --git a/public/rss/feed.xml b/public/rss/feed.xml
@@ -4,7 +4,7 @@
         <description><![CDATA[Braydon Coyer]]></description>
         <link>https://braydoncoyer.dev</link>
         <generator>RSS for Node</generator>
-        <lastBuildDate>Sat, 10 Dec 2022 22:13:42 GMT</lastBuildDate>
+        <lastBuildDate>Sat, 10 Dec 2022 23:49:57 GMT</lastBuildDate>
         <atom:link href="https://braydoncoyer.dev/rss.xml" rel="self" type="application/rss+xml"/>
         <item>
             <title><![CDATA[How To Create an Animated Loading Spinner with Tailwind CSS]]></title>
