Fix: Dynamic links loading wrong template (#1639)

* Fix: Dynamic links loading wrong template * img alt text * fallback for blog title
tinacms · Aug 10, 2023 · 38353cf · 38353cf · vercel · Aug 10, 2023
1 parent 044da8d
commit 38353cf
Show file tree

Hide file tree

Showing 12 changed files with 131 additions and 154 deletions.
diff --git a/components/blocks/Testimonials.tsx b/components/blocks/Testimonials.tsx
@@ -30,6 +30,7 @@ const Testimonial = ({ data, ...props }) => {
         {data.avatar && (
           <div className="relative shrink-0 w-14 h-14 rounded-full shadow-[0_1px_3px_1px_rgba(66,_153,_225,0.3)] overflow-hidden">
             <Image
+              alt="Testimonial avatar"
               width={56}
               height={56}
               className={`block absolute w-full h-full top-0 left-0 object-fill ${

diff --git a/components/layout/CloudBanner.tsx b/components/layout/CloudBanner.tsx
@@ -11,7 +11,7 @@ export function CloudBanner() {
           <span className="desktop">
             <p className="text">We're excited about what's coming in 2022!</p>
           </span>
-          <Link href="/blog/tinacms-2022/">
+          <Link legacyBehavior href="/blog/tinacms-2022/">
             <a className="link">
               <span className="desktop">Read more</span>
               <span className="mobile">From the blog: TinaCMS in 2022</span>
@@ -21,12 +21,12 @@ export function CloudBanner() {
         </div>
         <div className="actions">
           <ButtonGroup>
-            <Link href="https://app.tina.io/">
+            <Link legacyBehavior href="https://app.tina.io/">
               <Button size="small" color="white">
                 Sign In
               </Button>
             </Link>
-            <Link href="https://tina.io/docs/setup-overview/">
+            <Link legacyBehavior href="https://tina.io/docs/setup-overview/">
               <Button size="small" color="blue">
                 Get Started
               </Button>

diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
@@ -293,7 +293,7 @@ export const Footer = ({}) => {
 
 const FooterLink = ({ link, label }) => {
   return (
-    <Link href={link} passHref>
+    <Link legacyBehavior href={link} passHref>
       <a className="transition ease-out duration-150 hover:drop-shadow-[0_0_6px_rgba(255,255,255,0.5)] hover:opacity-100 opacity-70 whitespace-nowrap">
         {label}
       </a>

diff --git a/components/layout/Navbar.tsx b/components/layout/Navbar.tsx
@@ -61,7 +61,7 @@ export function Navbar({}) {
             </button>
             <ul className="flex flex-col py-4 px-6 relative z-20">
               <li className="pb-4 pt-2">
-                <Link href={'/'}>
+                <Link legacyBehavior href={'/'}>
                   <a
                     onClick={() => {
                       setOpen(false)
@@ -80,7 +80,7 @@ export function Navbar({}) {
                   const { id, href, label, external } = item
                   return (
                     <li key={id} className={`group ${navLinkClasses}`}>
-                      <Link href={href}>
+                      <Link legacyBehavior href={href}>
                         <a
                           className="py-2"
                           onClick={() => {
@@ -104,7 +104,7 @@ export function Navbar({}) {
                       const { id, href, label, external } = child
                       return (
                         <li key={id} className={`group ${navLinkClasses}`}>
-                          <Link href={href}>
+                          <Link legacyBehavior href={href}>
                             <a
                               className="py-2"
                               onClick={() => {
@@ -137,7 +137,7 @@ export function Navbar({}) {
               setOpen(false)
             }}
           ></div>
-          <Link href={'/'}>
+          <Link legacyBehavior href={'/'}>
             <a>
               <h1 className="flex items-center">
                 <TinaIconSvg className={`w-10 h-auto fill-orange-500`} />
@@ -169,7 +169,7 @@ export function Navbar({}) {
               : `translate-y-2 px-4 pt-4 pb-6`
           } z-40 w-full min-[1135px]:px-10 hidden min-[1135px]:flex items-center justify-between gap-6`}
         >
-          <Link href={'/'}>
+          <Link legacyBehavior href={'/'}>
             <a>
               <h1 className="flex items-center">
                 <TinaIconSvg
@@ -187,7 +187,7 @@ export function Navbar({}) {
                   const { id, href, label, external } = item
                   return (
                     <li key={id} className={`group ${navLinkClasses}`}>
-                      <Link href={href}>
+                      <Link legacyBehavior href={href}>
                         <a className="py-2">
                           {label}{' '}
                           {external ? (
@@ -216,7 +216,7 @@ export function Navbar({}) {
                                 key={id}
                                 className={`${navLinkClasses} w-full whitespace-nowrap`}
                               >
-                                <Link href={href}>
+                                <Link legacyBehavior href={href}>
                                   <a className="block px-2 py-1.5 text-gray-600 hover:text-blue-500">
                                     {label}{' '}
                                     {external ? (

diff --git a/components/logo/TinaIcon.tsx b/components/logo/TinaIcon.tsx
@@ -9,7 +9,7 @@ export const TinaIcon = ({
   color = 'white',
 }) => {
   return (
-    <Link href={link}>
+    <Link legacyBehavior href={link}>
       <a className={className}>
         <h1 className="flex items-center">
           <TinaIconSvg

diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
@@ -66,7 +66,7 @@ export const LinkButton = ({
   ...props
 }) => {
   return (
-    <Link href={link} passHref>
+    <Link legacyBehavior href={link} passHref>
       <a
         className={`${baseClasses} ${
           colorClasses[color] ? colorClasses[color] : colorClasses['seafoam']

diff --git a/components/ui/DynamicLink.tsx b/components/ui/DynamicLink.tsx
@@ -9,9 +9,8 @@ interface DynamicLinkProps extends ExtraProps {
 }
 
 export const DynamicLink = ({ children, href, ...props }: DynamicLinkProps) => {
-  const dynamicHref = getDynamicPath(href)
   return (
-    <Link href={dynamicHref} as={href} {...props}>
+    <Link legacyBehavior href={href} {...props}>
       {children}
     </Link>
   )

diff --git a/content/blocksPages/home.json b/content/blocksPages/home.json
@@ -9,7 +9,7 @@
           "icon": false,
           "variant": "blue",
           "size": "medium",
-          "url": "https://tina.io/docs/setup-overview/"
+          "url": "/docs/setup-overview/"
         },
         {
           "label": "npx create-tina-app@latest",
@@ -256,4 +256,4 @@
       "_template": "recentPosts"
     }
   ]
-}
+}
diff --git a/package.json b/package.json
@@ -65,7 +65,7 @@
     "matter": "^0.2.0",
     "moment": "^2.24.0",
     "moment-locales-webpack-plugin": "^1.2.0",
-    "next": "^12.1.0",
+    "next": "^13.4.13",
     "next-seo": "^4.1.0",
     "next-svgr": "0.0.2",
     "next-tinacms-cloudinary": "4.3.1",
@@ -80,10 +80,10 @@
     "prop-types": "^15.7.2",
     "qs": "^6.9.1",
     "raw-loader": "^4.0.0",
-    "react": "^16.12.0",
+    "react": "^18.2.0",
     "react-animate-height": "^3.1.0",
     "react-dismissible": "^1.1.3",
-    "react-dom": "^16.12.0",
+    "react-dom": "^18.2.0",
     "react-dropzone": "^10.2.1",
     "react-final-form": "^6.3.5",
     "react-github-btn": "^1.4.0",

diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
@@ -311,7 +311,7 @@ export const getStaticProps: GetStaticProps = async function ({
       query: res.query,
       data: res.data,
       vars,
-      siteConfig: { title: siteConfig.title },
+      siteConfig: { title: siteConfig.title || 'TinaCMS' },
     },
   }
 }

diff --git a/pages/docs/product-tour.tsx b/pages/docs/product-tour.tsx
@@ -100,9 +100,11 @@ export default function Page(props) {
 
     return () => {
       if (imgTransitionTimeout) {
-        activeImg.current.src = imageSrc
-        transitionImg.current.style.opacity = '0'
-        activeImg.current.style.opacity = '1'
+        if (activeImg?.current && transitionImg?.current) {
+          activeImg.current.src = imageSrc
+          transitionImg.current.style.opacity = '0'
+          activeImg.current.style.opacity = '1'
+        }
 
         clearTimeout(imgTransitionTimeout)
       }