Merge pull request #564 from canopas/fix-seo-in-blog-detais

Fix fonts and SEO

nuxt-frontend/assets/css/app.css

@@ -6,14 +6,6 @@
   src: url(~/assets/fonts/ProductSans-Regular-Subset.woff2) format("woff2");
 }
 
-@font-face {
-  font-display: swap;
-  font-family: FuturaLT-Bold;
-  font-style: bold;
-  font-weight: 700;
-  src: url(~/assets/fonts/FuturaLT-Bold-Subset.woff2) format("woff2");
-}
-
 @font-face {
   font-display: swap;
   font-family: Inter-Bold;
@@ -54,100 +46,20 @@
   src: url(~/assets/fonts/Inter-Light-Subset.woff2) format("woff2");
 }
 
-@font-face {
-  font-display: swap;
-  font-family: Roboto-Bold;
-  font-style: normal;
-  font-weight: 600;
-  src: url(~/assets/fonts/Roboto-Bold-Subset.woff2) format("woff2");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: Roboto-Medium;
-  font-style: normal;
-  font-weight: 500;
-  src: url(~/assets/fonts/Roboto-Medium-Subset.woff2) format("woff2");
-}
-
 @font-face {
   font-display: swap;
   font-family: Opensans-Bold;
   font-style: bold;
   font-weight: 700;
-  src: url(~/assets/fonts/Open-Sans-Bold.woff2) format("woff2");
+  src: url(~/assets/fonts/OpenSans-Bold-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-display: swap;
   font-family: Opensans-SemiBold;
   font-style: normal;
   font-weight: 600;
-  src: url(~/assets/fonts/Open-Sans-SemiBold.woff2) format("woff2");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: Source CodePro;
-  font-style: normal;
-  font-weight: 400;
-  src: url(~/assets/fonts/Source-codePro.woff2) format("woff2");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: Poppins Regular;
-  font-style: normal;
-  font-weight: 400;
-  src: url(~/assets/fonts/Poppins-Regular.woff2) format("woff2");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: Poppins Medium;
-  font-style: medium;
-  font-weight: 500;
-  src: url(~/assets/fonts/Poppins-Medium.woff2) format("woff2");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: Inter-ExtraLight;
-  font-style: normal;
-  font-weight: 200;
-  src: url(~/assets/fonts/Inter-ExtraLight.woff2) format("woff2");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: Comme-Light;
-  font-style: normal;
-  font-weight: 300;
-  src: url(~/assets/fonts/Comme-Light.woff2) format("woff2");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: Comme-Regular;
-  font-style: normal;
-  font-weight: 400;
-  src: url(~/assets/fonts/Comme-Regular.woff2) format("woff2");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: Comme-Medium;
-  font-style: normal;
-  font-weight: 500;
-  src: url(~/assets/fonts/Comme-Medium.woff2) format("woff2");
-}
-
-@font-face {
-  font-display: swap;
-  font-family: Comme-SemiBold;
-  font-style: normal;
-  font-weight: 600;
-  src: url(~/assets/fonts/Comme-SemiBold.woff2) format("woff2");
+  src: url(~/assets/fonts/OpenSans-SemiBold-Subset.woff2) format("woff2");
 }
 
 @font-face {
@@ -163,53 +75,53 @@
   font-family: Poppins Regular;
   font-style: normal;
   font-weight: 400;
-  src: url(~/assets/fonts/Poppins-Regular.woff2) format("woff2");
+  src: url(~/assets/fonts/Poppins-Regular-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-display: swap;
   font-family: Poppins Medium;
   font-style: medium;
   font-weight: 500;
-  src: url(~/assets/fonts/Poppins-Medium.woff2) format("woff2");
+  src: url(~/assets/fonts/Poppins-Medium-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-display: swap;
   font-family: Inter-ExtraLight;
   font-style: normal;
   font-weight: 200;
-  src: url(~/assets/fonts/Inter-ExtraLight.woff2) format("woff2");
+  src: url(~/assets/fonts/Inter-ExtraLight-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-display: swap;
   font-family: Comme-Light;
   font-style: normal;
   font-weight: 300;
-  src: url(~/assets/fonts/Comme-Light.woff2) format("woff2");
+  src: url(~/assets/fonts/Comme-Light-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-display: swap;
   font-family: Comme-Regular;
   font-style: normal;
   font-weight: 400;
-  src: url(~/assets/fonts/Comme-Regular.woff2) format("woff2");
+  src: url(~/assets/fonts/Comme-Regular-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-display: swap;
   font-family: Comme-Medium;
   font-style: normal;
   font-weight: 500;
-  src: url(~/assets/fonts/Comme-Medium.woff2) format("woff2");
+  src: url(~/assets/fonts/Comme-Medium-Subset.woff2) format("woff2");
 }
 
 @font-face {
   font-display: swap;
   font-family: Comme-SemiBold;
   font-style: normal;
   font-weight: 600;
-  src: url(~/assets/fonts/Comme-SemiBold.woff2) format("woff2");
+  src: url(~/assets/fonts/Comme-SemiBold-Subset.woff2) format("woff2");
 }

nuxt-frontend/components/home-new/BlogSection.vue

@@ -109,7 +109,7 @@
                     class="flex justify-between mt-[0.9375rem] md:mt-4 lg:mt-8 text-black-60"
                   >
                     <span class="w-auto sub-h4-regular lg:sub-h1-semibold">
-                      {{ blog.authorName }}
+                      {{ blog.author.name }}
                     </span>
                     <nuxt-link
                       :to="'/' + blog.slug"

nuxt-frontend/pages/[slug].vue

@@ -48,10 +48,9 @@ if (status.value !== config.SUCCESS) {
   });
 } else {
   post.value = postData?.value;
+  published_time = new Date(post.value?.published_on).toLocaleTimeString();
 }
 
-published_time = new Date(post?.value?.published_on).toLocaleTimeString();
-
 useHead({
   script: [
     {
@@ -69,7 +68,7 @@ function seoData() {
     ogTitle: post.value.title,
     ogType: "article",
     ogImage: post.value.image_url,
-    ogUrl: config.BASE_URL + post.value.slug,
+    ogUrl: config.BASE_URL + "/" + post.value.slug,
     ogDescription: post.value.meta_description,
     twitterTitle: post.value.title,
     twitterDescription: post.value.meta_description,
@@ -80,15 +79,15 @@ function seoData() {
     twitterCta: "Read on Canopas",
     keywords: post.value.keywords,
     twitterTileInfo1Icon: "Person",
-    twitterTileInfo1Text: post.value.authorName,
+    twitterTileInfo1Text: post.value.author.name,
     twitterTileInfo2Icon: "Calendar",
     twitterTileInfo2Text: post.value.published_on,
     twitterImageSrc: post.value.image_url,
     twitterTileImage: post.value.image_url,
-    articleAuthor: post.value.authorName,
+    articleAuthor: post.value.author.name,
     articlePublished_time: published_time,
     ogSite_name: "Canopas blogs",
-    author: post.value.authorName,
+    author: post.value.author.name,
   };
 }
 
@@ -101,19 +100,20 @@ function getJsonLdSchema() {
     publisher: {
       "@type": "Organization",
       name: "Canopas",
-      url: "https://canopas.com/",
+      url: config.BASE_URL,
     },
-    url: config.BASE_URL + post.value.slug,
+    url: config.BASE_URL + "/" + post.value.slug,
     datePublished: post.value.published_on,
     dateModified: post.value.published_on,
     description: post.value.meta_description,
     author: {
       "@type": "Person",
-      name: post.value.authorName,
+      name: post.value.author.name,
     },
     mainEntityOfPage: {
       "@type": "Blog Website",
-      "@id": "https://canopas.com/resources",
+      "@id":
+        "https://canopas.com/" + post.value.is_resource ? "blog" : "resources",
     },
   };
 }

nuxt-frontend/tailwind.config.js

@@ -110,9 +110,6 @@ module.exports = {
       },
       fontFamily: {
         "product-sans": ["Product Sans"],
-        "futura-bold": ["FuturaLT-Bold"],
-        "roboto-bold": ["Roboto-Bold"],
-        "roboto-medium": ["Roboto-Medium"],
         "inter-light": ["Inter-Light"],
         "inter-bold": ["Inter-Bold"],
         "inter-medium": ["Inter-Medium"],