Merge pull request #6 from cocdeshijie/master

Update Type Writer and Added Scroll Down for Hero Component

Author: cocdeshijie

components/hero/IconHero.tsx

@@ -3,45 +3,54 @@ import { cn } from "@/lib/utils";
 import { Typing } from "@/components/hero/typist/Typing";
 import { blogConfig } from "@/config";
 import Link from "next/link";
+import { ImQuotesLeft, ImQuotesRight } from "react-icons/im";
+import ScrollDown from "@/components/hero/components/ScrollDown";
 
 const heroSetting = require("@/config").blogConfig.hero.settings
 
 export default function IconHero() {
 
     return (
-        <div className={"grid content-center justify-items-center min-h-screen"}>
-            <div className="w-36 h-36 mx-auto mb-3">
-                <Image
-                    src={heroSetting.icon_path}
-                    alt="Profile Image"
-                    width={256}
-                    height={256}
-                    style={{ width: 'auto', height: '100%' }}
-                    className="object-cover hover:rotate-[360deg] duration-500"/>
-            </div>
-            <div className={"w-10/12 max-w-xl"}>
-                <div className={cn(
-                    "backdrop-blur-sm drop-shadow-md w-full rounded-2xl text-center py-5",
-                    "bg-secondary_color/50 dark:bg-secondary_color-dark/50"
-                )}>
-                    <Typing />
+        <div className={"relative flex flex-col min-h-screen"}>
+            <div className={"grid content-center justify-items-center flex-grow"}>
+                <div className="w-36 h-36 mx-auto mb-3">
+                    <Image
+                        src={heroSetting.icon_path}
+                        alt="Icon Image"
+                        width={256}
+                        height={256}
+                        style={{ width: 'auto', height: '100%' }}
+                        className="object-cover hover:rotate-[360deg] duration-500"/>
                 </div>
-            </div>
-            <div className="flex mt-5 space-x-3">
-                {blogConfig.social.map((social) => {
-                    return (
-                        <Link href={social.href}
-                              key={social.title}
-                              className={cn(
-                                  "backdrop-blur-sm drop-shadow rounded-xl w-8 h-8",
-                                  "bg-secondary_color/70 dark:bg-secondary_color-dark/70"
-                              )}>
-                            <div className={"m-1"}>
-                                {social.icon}
-                            </div>
-                        </Link>
-                    );
-                })}
+                <div className={"w-10/12 max-w-xl"}>
+                    <div className={cn(
+                        "backdrop-blur-sm drop-shadow-md w-full rounded-2xl text-center py-5",
+                        "bg-secondary_color/50 dark:bg-secondary_color-dark/50"
+                    )}>
+                        <div className="flex justify-center items-center space-x-1 font-semibold">
+                            <ImQuotesLeft className={"w-4 h-4 mb-2"} />
+                            <Typing />
+                            <ImQuotesRight className={"w-4 h-4 mb-2"} />
+                        </div>
+                    </div>
+                </div>
+                <div className="flex mt-5 space-x-3">
+                    {blogConfig.social.map((social) => {
+                        return (
+                            <Link href={social.href}
+                                  key={social.title}
+                                  className={cn(
+                                      "backdrop-blur-sm drop-shadow rounded-xl w-8 h-8",
+                                      "bg-secondary_color/70 dark:bg-secondary_color-dark/70"
+                                  )}>
+                                <div className={"m-1"}>
+                                    {social.icon}
+                                </div>
+                            </Link>
+                        );
+                    })}
+                </div>
+                <ScrollDown />
             </div>
         </div>
     )

components/hero/components/ScrollDown.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { GoChevronDown } from "react-icons/go";
+import { motion } from "framer-motion";
+import { cn } from "@/lib/utils";
+
+export default function ScrollDown() {
+    const scrollToNextSection = () => {
+        window.scrollTo({
+            top: window.innerHeight * 0.9,
+            behavior: "smooth"
+        });
+    };
+
+    return (
+        <div className={"absolute bottom-0 w-full flex justify-center pb-10"}>
+            <motion.div
+                animate={{
+                    y: [0, -5, 0]
+                }}
+                transition={{
+                    repeat: Infinity,
+                    repeatType: 'reverse',
+                    duration: 2
+                }}
+            >
+                <button onClick={scrollToNextSection}
+                        className={cn(
+                            "backdrop-blur-[1px] rounded-3xl focus:outline-none",
+                            "text-accent_color dark:text-accent_color-dark opacity-60"
+                        )}>
+                    <GoChevronDown className="w-14 h-14" />
+                </button>
+            </motion.div>
+        </div>
+    )
+}

components/hero/typist/Typing.tsx

@@ -1,15 +1,16 @@
 "use client"
 
-import Typist from "react-typist-component";
+import Typewriter from 'typewriter-effect';
 import { blogConfig } from "@/config";
 
 
 export function Typing() {
 
     return (
-        <Typist typingDelay={100}
-        >
-            <span>{blogConfig.typist}</span>
-        </Typist>
+        <Typewriter
+            onInit={(typewriter) => {
+                typewriter.typeString(blogConfig.typewriter).start();
+            }}
+        />
     )
 }

config/index.ts

@@ -15,7 +15,7 @@ export const blogConfig: BlogConfig = {
     title: "Next Sakurairo",
     description: "A blog system made with Next.js.",
     author: "cocdeshijie",
-    typist: "by cocdeshijie",
+    typewriter: "by cocdeshijie",
     articles_per_load: 5,
 
     navigation: [

config/type.ts

@@ -29,7 +29,7 @@ export type BlogConfig = {
      * This will appear in front page typing component.
      * @example "by cocdeshijie"
      */
-    typist: string;
+    typewriter: string;
 
     /*
      * The number of articles per load.

content/articles/documentation/user-en-US.mdx

@@ -7,33 +7,39 @@ tags:
 - Documentation
 ---
 
-## Blog URL
+## URL
 Set the URL of your blog. This should be a fully qualified domain name (FQDN) pointing to your site.
 
-## Blog Title
+## Title
 This is the main title of your blog. It is often shown in the browser title bar and used as the default title for bookmarks.
 
-## Blog Description
+## Description
 Provide a brief description of your blog. This description often appears in search engine results.
 
 ## Author
 Set the author's name. This will be used for meta.
 
-## Typist
+## Type Writer
 Set the typist's text. This will appear in the front page typing component.
 
 ## Articles Per Load
 Define the number of articles to load for each fetch. For example, if you want to load 5 articles each time you fetch more articles, set this to 5.
 
-## Navigation Bar
-Define your blog's navigation bar items, including the title of the navigation bar item and the href.
+## Navigation
+Define your blog's navigation items, including the title of the navigation item and the href.
+
+## Header
+Define the header component to use.
+
+### Floating Header
+Header will always float at top.
 
 ## Background Image
-Define the background image for your blog.
+Define the background image component for your blog.
 
-### APIBackgroundImage
+### API Background Image
 If you choose the "APIBackgroundImage" option, you need to provide the URL and filter type (grid, dot, none).
-- _`url`_: Set the URL for the background image.
+- _`url`_: Set the URL for the background image. If not set, it will use local image api. Local images are at _`/public/image-api`_.
 - _`filter`_: Choose the filter for the background image. Available options are 'grid', 'dot', 'none'.
 
 ## Hero
@@ -59,13 +65,13 @@ For an image logo, you need to provide an _`image_path`_.
 
 - _`image_path`_: Set the path of the image. If the logo image is in the public folder, the path should be "/logo.png". Make sure that the image exists at the specified path in your project.
 
-## Social Media Links
+## Social
 Set the social media links that will appear in the front page landing screen. For each social media link, define the title, icon, and href.
 
-## Theme Colors
+## Colors
 Define the color scheme for your blog. You can set the _`primary_color`_, _`secondary_color`_, and _`accent_color`_ for both light and dark modes.
 
-## Comment Component
+## Comment
 Configure the comment component which will appear under each article. You have the option to use "GiscusComment". Check [https://giscus.app/](https://giscus.app/) on how to use it.
 
 ### Giscus Comment

package.json

@@ -50,14 +50,14 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.10.1",
-    "react-typist-component": "^1.0.5",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.1.0",
     "remark-gfm": "^3.0.1",
     "swr": "^2.2.0",
     "tailwind-merge": "^1.12.0",
     "tailwindcss": "3.3.2",
     "typescript": "5.0.4",
+    "typewriter-effect": "^2.20.1",
     "zustand": "^4.3.8"
   }
 }