Merge pull request #53 from frontendweb3/fix-tag-issue

Fix tag issue

Author: officialrajdeepsingh

examples/demo-section-blog/theme.config.tsx

@@ -2,6 +2,7 @@ const themeConfig = {
   settings: {
     title: "My title",
     description: "my descript is here ",
+    SiteURL:"https://officialrajdeepsingh.dev",
     defaultSEO: {
       title: "default SEO  title is here",
       titleTemplate: '%s | Section Blog Theme',

packages/section-blog-theme/components/Layouts/Read.tsx

@@ -1,5 +1,5 @@
 import { Article } from "@/components/Article/Article";
-import * as React from "react";
+import { useState, useEffect } from "react";
 import type { PageOpts } from "nextra";
 import dayjs from "dayjs";
 import { Button } from "@/components/ui/button";
@@ -10,8 +10,10 @@ import Link from "next/link";
 import { Seo } from "@/components/Seo/Seo";
 import { slugify } from "@/utility/slugify";
 import { TypeSectionBlogTheme } from "@/src/types";
+import type {ReactNode} from "react";
 
-export function Read({ pageOpts, themeConfig, children }: { pageOpts: PageOpts; themeConfig: TypeSectionBlogTheme; children: React.ReactNode; }) {
+export function Read({ pageOpts, themeConfig, children }: { pageOpts: PageOpts; themeConfig: TypeSectionBlogTheme; children: ReactNode; }) {
+  const [domain, setDomain] = useState<string>()
 
   const { frontMatter } = pageOpts;
 
@@ -24,17 +26,21 @@ export function Read({ pageOpts, themeConfig, children }: { pageOpts: PageOpts;
   let getSite = settings?.SiteURL
 
   let getAuthorURL = frontMatter?.author?.url
-  
-  let getTagURL = Next_URL(getSite) + "tags/" + getTag 
 
-  let getRwebURL = Next_URL(getSite) + (pageOpts.route.replace("/",""))
-  
+  useEffect(function () {
+    let getDomain = window.location.origin as string
+    setDomain(getDomain)
+  }, [])
+
+  let getTagURL = Next_URL(getSite) + "tags/" + getTag
+
+  let getRwebURL = domain + "/" + (pageOpts.route.replace("/", ""))
+
   return (
     <>
 
       <Seo pageOpts={pageOpts} themeConfig={themeConfig} />
 
-
       <div className="px-3 sm:px-0 mx-auto my-6 print:block prose prose-pre:bg-primary-foreground prose-zinc sm:prose-sm md:prose-base lg:prose-lg xl:prose-xl 2xl:prose-2xl dark:prose-invert">
 
         <section className="not-prose flex flex-row justify-between items-center">
@@ -65,11 +71,11 @@ export function Read({ pageOpts, themeConfig, children }: { pageOpts: PageOpts;
               title={getDate}
             >
               {getDate}
-            </time> • <Link href={getTagURL} className="capitalize ml-2 hover:text-gray-600"> {frontMatter.tags[0]} </Link>
+            </time> • <Link href={getTagURL} className="capitalize ml-2 hover:text-gray-600"> {getTag} </Link>
           </div>
 
           <div className="hidden sm:flex flex-row print:block">
-            
+
             <RWebShare
               data={{
                 text: frontMatter.description,
@@ -78,9 +84,9 @@ export function Read({ pageOpts, themeConfig, children }: { pageOpts: PageOpts;
               }}
               onClick={() => console.log("shared successfully!")}
             >
-              
+
               <Button aria-label="Share a Post" variant="ghost" size="icon">
-                
+
                 <Share2Icon className="h-4 w-4" />
 
               </Button>

packages/section-blog-theme/components/Layouts/Tag.tsx

@@ -1,13 +1,15 @@
-import type { PageOpts, ThemeConfig } from "nextra";
-import { useRouter } from "next/router";
+import type { PageOpts } from "nextra";
 import { useTagContent } from "@/utility/useTagContent"
 import { ArticleCard } from "@/components/Card/Card";
 import dayjs from "dayjs";
 import { Article } from "@/components/Article/Article";
 import { Error404 } from "./404";
 import { TypeSectionBlogTheme } from "@/src/types"
+import type {ReactNode} from "react";
+import { useRouter } from 'next/router'
 
-export function Tag({ pageOpts, themeConfig, children }: { pageOpts: PageOpts; themeConfig: TypeSectionBlogTheme; children: React.ReactNode; }) {
+
+export function Tag({ pageOpts, themeConfig, children }: { pageOpts: PageOpts; themeConfig: TypeSectionBlogTheme; children: ReactNode; }) {
 
   const { DateFormat } = themeConfig;
 
@@ -16,33 +18,36 @@ export function Tag({ pageOpts, themeConfig, children }: { pageOpts: PageOpts; t
   let tagSlug = router.query && router.query.tag && typeof router.query.tag === "string" ? router.query.tag : router?.query?.tag as string
 
   const { posts } = useTagContent(pageOpts, tagSlug)
-  
-  if ( posts === undefined || posts.length === 0) {
-    return (<Error404 /> )
+
+  if (posts === undefined || posts.length === 0) {
+    return (<Error404 />)
   }
   return (
     <>
       <Article>{children}</Article>
-      <div className="mx-auto my-24 divide-y divide-slate-700 grid-cols-1 grid max-w-[724px] lg:max-w-[1024px] gap-4">
-        {posts?.map(
-          (post) => {
-            
-            let getDate  = dayjs(post.frontMatter.date).format(DateFormat? DateFormat : "MMM DD, YYYY");
-
-            return (
-              <ArticleCard
-                key={post.frontMatter.date + post.frontMatter.title}
-                title={post.frontMatter.title}
-                description={post.frontMatter.description}
-                tag={post.frontMatter.tags}
-                date={getDate}
-                URL={post.route}
-                author={post.frontMatter?.author}
-              />
-            );
-          },
-        )}
-      </div>
+
+      <section className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
+        <div className="grid gap-8 lg:grid-cols-2">
+          {posts?.map(
+            (post) => {
+
+              let getDate = dayjs(post.frontMatter.date).format(DateFormat ? DateFormat : "MMM DD, YYYY");
+
+              return (
+                <ArticleCard
+                  key={post.frontMatter.date + post.frontMatter.title}
+                  title={post.frontMatter.title}
+                  description={post.frontMatter.description}
+                  tag={post.frontMatter.tags}
+                  date={getDate}
+                  URL={post.route}
+                  author={post.frontMatter?.author}
+                />
+              );
+            },
+          )}
+        </div>
+      </section>
     </>
   );
 }

packages/section-blog-theme/package.json

@@ -1,6 +1,6 @@
 { 
   "name": "section-blog-theme",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "main": "dist/index.js",
   "types": "dist/types.d.mts",
   "keywords": [

packages/section-blog-theme/utility/NextURL.ts

@@ -1,17 +1,19 @@
 
 export function Next_URL(Site: string | undefined): string {
 
-  let getPort = process.env.PORT || 3000
+  if (process.env.NODE_ENV === 'development') {
+    return "/"
+  }
+
+  if (process.env.NODE_ENV === 'production' && Site) {
 
-  let getDomain = `http://localhost:${getPort}`
+    return Site
 
-  if (process.env.NODE_ENV === 'development' || getPort) {
-    return getDomain + "/"
   } else {
-    if (Site) {
-      return Site
-    } else {
-      return getDomain + "/"
-    }
+
+    throw new Error("Please add your production URL in theme.config.tsx file.")
+
   }
+
+
 }