introduce the new logo #74

Author: officialrajdeepsingh

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

@@ -2,7 +2,7 @@ const themeConfig = {
   settings: {
     title: "My title",
     description: "my descript is here ",
-    SiteURL:"https://officialrajdeepsingh.dev",
+    SiteURL: "https://officialrajdeepsingh.dev",
     defaultSEO: {
       title: "default SEO  title is here",
       titleTemplate: '%s | Section Blog Theme',
@@ -13,7 +13,7 @@ const themeConfig = {
       }
     }
   },
-  bannerMessage: "Start your markdown portfolio blog with nextjs, nextra, tailwind CSS, and Shadcn UI using <a style='margin: 0px 4px;' target='_blank' href='https://www.npmjs.com/package/section-blog-theme'>  the section blog theme. </a>",
+  bannerMessage: "Start your markdown portfolio blog with nextjs, nextra, tailwind CSS, and Shadcn UI using <a style='margin: 0px 4px;text-decoration:underline;' target='_blank' href='https://www.npmjs.com/package/section-blog-theme'>  the section blog theme. </a>",
   SocialLinks: [
     {
       name: "twitter",
@@ -29,7 +29,15 @@ const themeConfig = {
     },
   ],
   Logo: {
-    TextLogo: "Section"
+    logo: (
+      <>
+        <svg width="36" height="36" viewBox="0 0 434 420" xmlns="http://www.w3.org/2000/svg">
+          <path fillRule="evenodd" clipRule="evenodd" fill="currentColor" d="M226.569 66.5458C222.348 59.1514 211.686 59.1514 207.464 66.5458L63.4636 318.753C59.2767 326.086 64.5719 335.207 73.0163 335.207H361.018C369.462 335.207 374.757 326.086 370.57 318.753L226.569 66.5458ZM217.017 270.333C235.355 270.333 250.221 256.557 250.221 239.563C250.221 222.57 235.355 208.793 217.017 208.793C198.679 208.793 183.813 222.57 183.813 239.563C183.813 256.557 198.679 270.333 217.017 270.333Z" />
+        </svg>
+      </>
+    ),
+    link: "/",
+    target: "_blank"
   },
   PrimaryNavigation: [
     {

packages/section-blog-theme/components/Footer/Footer.tsx

@@ -3,15 +3,17 @@ import type { Logo, Navigation, SocialLinks } from "@/src/types";
 import Link from "next/link";
 import NavigationItem from "@/components/Navigation/NavgationItem";
 import { SocialLink } from "@/components/SocialLink/SocialLink";
+import { renderComponent } from "@/utility/render";
 
 export function Footer({ Logo, SecondaryNavigation, socialLinks }: { Logo: Logo; SecondaryNavigation: Navigation[]; socialLinks: SocialLinks[] }) {
 
   return (
     <footer className="print:hidden container flex flex-wrap flex-row item-center justify-center my-5 p-5 mx-auto lg:flex-row divide-gray-400">
 
-     { Logo.TextLogo && <Link href="/" className="ml-2 self-center text-xl font-semibold whitespace-nowrap !text-foreground dark:text-white">
-        {Logo.TextLogo}
-      </Link>}
+      <Link target={Logo.target ? Logo.target : "_blank"} href={Logo.link ? Logo.link : "/"} className="flex flex-row items-center justify-between text-black dark:text-white">
+        {renderComponent(Logo.logo)}
+      </Link>
+
 
       <NavigationMenu className="my-3 flex flex-wrap justify-between items-center mx-auto md:my-0">
         <NavigationMenuList>

packages/section-blog-theme/components/Header/Header.tsx

@@ -6,17 +6,17 @@ import NavigationItems from "@/components/Navigation/NavigationItems";
 import NavigationItem from "@/components/Navigation/NavgationItem";
 import { SocialLink } from "@/components/SocialLink/SocialLink";
 import { SearchCommandDialog } from "@/components/Command/Command";
+import { renderComponent } from "@/utility/render";
 
 export function Header({ Logo, PrimaryNavigation, socialLinks }: { Logo: Logo; PrimaryNavigation: Navigation[]; socialLinks: SocialLinks[]; }) {
 
   return (
 
     <header className="container print:hidden mt-3 px-4 lg:px-6 py-8 flex gap-y-5 justify-center flex-col sm:flex-row md:justify-between items-center mx-auto">
 
-
-      {Logo.TextLogo && <Link href="/" className="ml-2 self-center text-xl font-semibold whitespace-nowrap !text-foreground dark:text-white">
-        {Logo.TextLogo}
-      </Link>}
+      <Link target={Logo.target ? Logo.target : "_blank"} href={Logo.link ? Logo.link : "/"} className="flex flex-row items-center justify-between text-black dark:text-white">
+        {renderComponent(Logo.logo)}
+      </Link>
 
       <NavigationMenu className="my-3 flex flex-wrap justify-between items-center mx-auto md:my-0">
 

packages/section-blog-theme/src/types.ts

@@ -1,15 +1,16 @@
-import type { ReactNode } from "react";
 import dynamicIconImports from 'lucide-react/dynamicIconImports';
 import { DefaultSeoProps } from "next-seo";
 import { LucideProps } from 'lucide-react';
+import type {  ReactNode, FC } from 'react';
 
-
+// SubNavigation 
 export interface SubNavigation {
   title: string;
   href: string;
   target: string;
   description: string;
 }
+// Navigation
 export interface Navigation {
   href?: string;
   title: string;
@@ -18,19 +19,22 @@ export interface Navigation {
   target: string;
   subNavigation?: SubNavigation[];
 }
-
+// Social link
 export interface SocialLinks extends IconProps {
   url: string;
 }
 
+// Lucide icon
 export interface IconProps extends LucideProps {
   name: keyof typeof dynamicIconImports;
 }
 
+// logo
 export interface Logo {
-  TextLogo: string;
+  logo: React.ReactNode | FC;
+  link?: string;
+  target?: string;
 }
-
 export interface settingsTypes {
   SiteURL?: string;
   title?: string;
@@ -58,6 +62,7 @@ export type MdxFileCard<FrontMatterType = BlogFrontMatter> = {
   frontMatter: FrontMatterType;
 };
 
+// layout type
 export type LayoutTypes =
   | "home"
   | "post"
@@ -67,20 +72,13 @@ export type LayoutTypes =
   | 404
   | 500;
 
-// export interface MetaImage {
-//   src: string;
-//   width?: number;
-//   height?: number;
-//   alt?: string;
-//   type?: string;
-//   caption?: string
-// }
-
+// author 
 export interface authorType {
   name: string;
   url: string;
 }
 
+// blog front matter
 export type BlogFrontMatter = {
   author?: authorType | string;
   date?: string;
@@ -90,6 +88,8 @@ export type BlogFrontMatter = {
   title: string;
   type: "post";
 };
+
+// icon type 
 export type iconsType =
   | "facebook"
   | "twitter"
@@ -100,5 +100,5 @@ export type iconsType =
 
 export type GetMetaData = MdxFileCard
 
-// space the type
+// type for space component
 export type spaceType = "xs"| "sm"| "md" | "lg" | "xl" | "2xl"

packages/section-blog-theme/utility/render.tsx

@@ -0,0 +1,8 @@
+import type { FC, ReactNode } from 'react'
+
+export function renderComponent<T>( ComponentOrNode: FC<T> | ReactNode, props?: T) {
+  if (!ComponentOrNode) return null
+  if (typeof ComponentOrNode !== 'function') return ComponentOrNode
+  // @ts-expect-error TS2322: Type '{}' is not assignable to type 'T'
+  return <ComponentOrNode {...props} />
+};