Skip to content

Commit

Permalink
Merge pull request #28 from howznguyen/develop
Browse files Browse the repository at this point in the history
Develop
  • Loading branch information
howznguyen authored Mar 3, 2023
2 parents d2298ca + a6749ef commit ff40308
Show file tree
Hide file tree
Showing 43 changed files with 947 additions and 1,440 deletions.
8 changes: 7 additions & 1 deletion .env.example
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
#Site Setting
BASE_URL=https://howz.dev

# Notion Settings
NOTION_API_KEY=
SETTING_DATABASE_ID=
Expand All @@ -9,4 +12,7 @@ POST_DATABASE_ID=
GISCUS_REPO=
GISCUS_REPO_ID=
GISCUS_CATEGORY=
GISCUS_CATEGORY_ID=
GISCUS_CATEGORY_ID=

#Google Analytic
NEXT_PUBLIC_GA_MEASUREMENT_ID=
4 changes: 4 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,8 @@ yarn-error.log*
*.tsbuildinfo
next-env.d.ts

# project
.env
public/robots.txt
public/sitemap.xml
public/sitemap-*.xml
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

![](https://img.shields.io/github/issues/howznguyen/howz.dev?color=0088ff)
![](https://img.shields.io/github/languages/top/howznguyen/howz.dev)
![](https://img.shields.io/github/package-json/v/howznguyen/howz.dev)
![](https://img.shields.io/github/manifest-json/v/howznguyen/howz.dev)
![](https://img.shields.io/github/discussions/howznguyen/howz.dev)

💠 This is my personal website and blog, built using Next.js, TypeScript, Tailwind CSS, and Notion. The blog posts are managed in Notion, and the website pulls the content from the Notion API at build time.
Expand Down
26 changes: 26 additions & 0 deletions next-sitemap.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/** @type {import('next-sitemap').IConfig} */
module.exports = {
siteUrl: 'https://howz.dev',
generateRobotsTxt: true,
changefreq: 'daily',
priority: 0.7,
sitemapSize: 5000,
exclude: ['/sitemap-howz.xml'],
robotsTxtOptions: {
policies : [
{
userAgent: '*',
allow: '/',
disallow: [
'/post/[slug]',
'/post/',
'/tag/[tag]'
]
}

],
additionalSitemaps: [
'https://howz.dev/sitemap-howz.xml',
],
},
}
17 changes: 6 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
{
"name": "howz.dev",
"version": "0.0.2",
"version": "0.0.3",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"postbuild": "next-sitemap",
"start": "next start",
"lint": "next lint",
"prebuild": "next build && next-sitemap",
"start:all": "next build && next start"
},
"dependencies": {
Expand All @@ -16,43 +18,36 @@
"@types/node": "18.11.18",
"@types/react": "18.0.27",
"@types/react-dom": "18.0.10",
"date-fns": "^2.29.3",
"eslint": "8.32.0",
"eslint-config-next": "13.1.6",
"got": "^12.5.3",
"link-meta-extractor": "^1.3.4",
"moment": "^2.29.4",
"next": "13.1.6",
"next-seo": "^5.15.0",
"next-sitemap": "^3.1.52",
"next-themes": "^0.2.1",
"node-html-to-image": "^3.3.0",
"notion-client": "6.15.6",
"notion-compat": "^6.16.0",
"nextjs-google-analytics": "^2.3.0",
"notion-to-md": "^2.5.5",
"notion-types": "^6.16.0",
"notion-utils": "^6.16.0",
"prismjs": "^1.29.0",
"react": "18.2.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "18.2.0",
"react-icons": "^4.7.1",
"react-lazy-load-image-component": "^1.5.6",
"react-lazyload": "^3.2.0",
"react-medium-image-zoom": "^5.1.2",
"react-nl2br": "^1.0.4",
"react-notion-x": "^6.15.8",
"react-scrollspy": "^3.4.3",
"reading-time": "^1.5.0",
"remove-accents": "^0.4.4",
"swr": "^2.0.3",
"sharp": "^0.31.3",
"typescript": "4.9.4"
},
"devDependencies": {
"@tailwindcss/aspect-ratio": "^0.4.2",
"@tailwindcss/typography": "^0.5.9",
"@types/prismjs": "^1.26.0",
"@types/react-copy-to-clipboard": "^5.0.4",
"@types/react-lazy-load-image-component": "^1.5.2",
"@types/react-lazyload": "^3.2.0",
"@types/react-scrollspy": "^3.3.5",
"autoprefixer": "^10.4.13",
Expand Down
Binary file removed public/assets/images/default-cover.jpg
Binary file not shown.
Binary file removed public/assets/images/grain-gradient.png
Binary file not shown.
Binary file added public/assets/images/image-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/images/og.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/atoms/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Button = ({ children, type, className, onClick }: ButtonProps) => {
return (
<button
type={_type}
className={`${className} text-gray-500 border border-slate-600 dark:border-slate-200 dark:text-gray-400 hover:border-green-600 dark:hover:border-green-600 hover:text-green-600 dark:hover:text-green-600 rounded text-sm p-2.5 inline-flex items-center`}
className={`${className} text-gray-500 border border-gray-300 dark:border-slate-600 dark:text-gray-400 hover:border-blue-600 dark:hover:border-blue-600 hover:text-blue-600 dark:hover:text-blue-600 rounded text-sm p-2.5 inline-flex items-center`}
onClick={_onClick}
>
{children}
Expand Down
2 changes: 1 addition & 1 deletion src/components/atoms/CodeBlock.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ const CodeBlock = ({ children, language }: CodeBlockProps) => {
>
<button className="absolute top-2 right-2 hidden rounded border border-gray-600 p-2 text-lg transition-colors hover:bg-gray-700 md:block">
{isCopied ? (
<HiCheckCircle className="text-green-400" />
<HiCheckCircle className="text-blue-400" />
) : (
<HiClipboard />
)}
Expand Down
4 changes: 2 additions & 2 deletions src/components/atoms/Heading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ interface HeadingProps {
const Heading = ({ type, id, children }: HeadingProps) => {
let sizes = {
heading_1: "text-2xl",
heading_2: "font-xl",
heading_3: "text-base",
heading_2: "text-xl",
heading_3: "text-lg",
};

let _type = type ?? "heading_1";
Expand Down
2 changes: 1 addition & 1 deletion src/components/atoms/OrderedList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ interface OrderedListProps {
const OrderedList = ({ children , number } : OrderedListProps) => {

number = number ?? 1;
return (<ol start={number} className="space-y-1 text-gray-800 list-decimal list-inside dark:text-gray-400">
return (<ol start={number} className="space-y-1 font-medium text-gray-800 list-decimal list-inside dark:text-gray-400">
{children}
</ol>)
}
Expand Down
45 changes: 14 additions & 31 deletions src/components/atoms/Tag.tsx
Original file line number Diff line number Diff line change
@@ -1,38 +1,21 @@
import { Route } from "@/lib";
import React from "react";
import { Route } from '@/lib';
import Link from 'next/link'
import React from 'react'

interface TagProps {
name: string;
color?: string;
name: string;
}

const Tag = ({ name, color }: TagProps) => {
let colors = {
"light-gray": "bg-gray-700 dark:bg-gray-700",
gray: "bg-gray-500 dark:bg-gray-200",
brown: "bg-brown-500 dark:bg-brown-200",
orange: "bg-orange-500 dark:bg-orange-200",
yellow: "bg-yellow-500 dark:bg-yellow-200",
green: "bg-green-500 dark:bg-green-200",
blue: "bg-blue-500 dark:bg-blue-200",
purple: "bg-purple-500 dark:bg-purple-200",
pink: "bg-pink-500 dark:bg-pink-200",
red: "bg-red-500 dark:bg-red-200",
default: "bg-gray-700 dark:bg-gray-200",
};

let index = color ?? "";

let _color = colors[index] ?? colors["default"];

const Tag = ({name} : TagProps) => {
return (
<a
className={`inline-block px-2 py-1 mr-2 text-base font-semibold rounded-full text-white dark:text-black ${_color}`}
href={Route.tag(name)}
<Link
href={Route.tag.get(name)}
className="bg-opacity-80 dark:!bg-opacity-60 inline-block rounded-md px-1.5 py-0.5 font-medium transition-colors bg-gray-100 text-gray-700 hover:text-black disabled:text-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:disabled:bg-gray-600 focus:outline-none mr-2"
tabIndex={-1}
>
{name}
</a>
);
};
{name}
</Link>
)
}

export default Tag;
export default Tag
2 changes: 1 addition & 1 deletion src/components/atoms/UnorderedList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ interface UnorderedListProps {

const UnorderedList = ({ children } : UnorderedListProps) => {

return (<ul className="space-y-1 text-gray-800 list-disc list-inside dark:text-gray-400">
return (<ul className="space-y-1 font-medium text-gray-800 list-disc list-inside dark:text-gray-400">
{children}
</ul>)
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/atoms/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@ export { default as Paragraph } from './Paragraph';
export { default as Span } from './Span';
export { default as Toggle } from './Toggle';
export { default as Bookmark } from './Bookmark';
export { default as Tag } from './Tag';
export { default as Table } from './Table';
export { default as Table } from './Table';
export { default as Tag} from './Tag';
114 changes: 70 additions & 44 deletions src/components/molecules/IntroCard.tsx
Original file line number Diff line number Diff line change
@@ -1,54 +1,80 @@
import React from 'react'
import { Link } from '../atoms';
import { HiOutlineNewspaper } from 'react-icons/hi';
import { FaFacebook, FaGithub} from 'react-icons/fa';
import { AiOutlineArrowDown } from 'react-icons/ai';
import Image from 'next/image';
import React from "react";
import { Link } from "../atoms";
import { HiOutlineNewspaper } from "react-icons/hi";
import { FaFacebook, FaGithub } from "react-icons/fa";
import { AiOutlineArrowDown } from "react-icons/ai";
import Image from "next/image";

interface IntroCard {
className?: string;
className?: string;
}

const IntroCard = () => {
return (
<div data-fade="0" className="relative min-h-screen md:py-24 text-center lg:text-left text-black dark:text-white">
<div className="grid lg:grid-cols-2 pt-10 flex items-center">
<div className="block lg:hidden flex justify-center">
<Image src="/assets/images/orion-nebula.jpg" width={500} height={500} className="introduce-img md:w-[500px] shadow-lg fancy-border-radius rotate-lg-6" alt="" />
</div>
<div className="mb-0">
<div className="relative block rounded-lg shadow-lg px-6 py-12 -mt-20 md:px-12 lg:-mr-14 bg-transparen" style={{backdropFilter: 'blur(30px)', zIndex: 1}}>
<h2 className="text-xl md:text-3xl font-bold mb-4 display-5">
{"Hi there, I'm Howz Nguyen"}
</h2>
<p className="mb-5">
{"I'm a Fullstack Developer from Vietnamese. This website is developed for the purpose of sharing my personal knowledge. Hope everyone enjoys it."}
</p>
<div className="mt-4 flex flex-wrap gap-4 gap-y-2 md:mt-8">
<Link href="https://github.com/howznguyen/my-resume/blob/main/pdf/cv_en_vi_howznguyen.pdf" target="_blank" className="flex items-center">
<HiOutlineNewspaper className="mr-1" />
Resume
</Link>
<Link href="https://facebook.com/howznguyen/" target="_blank" className="flex items-center">
<FaFacebook className="mr-1" />
howznguyen
</Link>
<Link href="https://github.com/howznguyen/" target="_blank" className="flex items-center">
<FaGithub className="mr-1" />
howznguyen
</Link>
</div>
</div>
</div>
<div className="hidden lg:block">
<Image src="/assets/images/orion-nebula.jpg" width={500} height={500} className="w-full shadow-lg fancy-border-radius rotate-lg-6" alt="" />
<div
data-fade="0"
className="relative min-h-screen md:py-24 text-center lg:text-left text-black dark:text-white"
>
<div className="grid lg:grid-cols-2 pt-10 flex items-center">
<div className="mb-0">
<div
className="relative block rounded-lg shadow-lg px-6 py-12 md:px-12 lg:-mr-14 bg-transparent"
style={{ backdropFilter: "blur(30px)", zIndex: 1 }}
>
<h2 className="text-xl md:text-3xl font-bold mb-4 display-5">
{"Xin chào, Mình là Howz Nguyễn"}
</h2>
<p className="mb-5">
{
"Mình hiện tại đang là một Lập Trình Viên Fullstack. Đây là một website mình tạo ra với mong muốn được chia sẻ kiến thức của mình đến với mọi người. Cảm ơn mọi người đã ghé qua. ❤️"
}
</p>
<div className="mt-4 flex flex-wrap gap-4 gap-y-2 md:mt-8">
<Link
href="https://github.com/howznguyen/my-resume/blob/main/pdf/cv_en_vi_howznguyen.pdf"
target="_blank"
className="flex items-center"
>
<HiOutlineNewspaper className="mr-1" />
Resume
</Link>
<Link
href="https://facebook.com/howznguyen/"
target="_blank"
className="flex items-center"
>
<FaFacebook className="mr-1" />
howznguyen
</Link>
<Link
href="https://github.com/howznguyen/"
target="_blank"
className="flex items-center"
>
<FaGithub className="mr-1" />
howznguyen
</Link>
</div>
</div>
</div>
<a href="#featured-post" className="absolute bottom-20 left-1/2 -translate-x-1/2 cursor-pointer rounded-md transition-colors hover:text-primary-300 focus-visible:text-primary-300">
<AiOutlineArrowDown className="h-8 w-8 animate-bounce md:h-10 md:w-10" />
</a>
<div className="hidden lg:block">
<Image
src="/assets/images/orion-nebula.jpg"
width={500}
height={500}
className="w-full shadow-lg fancy-border-radius rotate-lg-6"
alt=""
/>
</div>
</div>
<a
href="#featured-post"
className="absolute bottom-20 left-1/2 -translate-x-1/2 cursor-pointer rounded-md transition-colors hover:text-primary-300 focus-visible:text-primary-300"
>
<AiOutlineArrowDown className="h-8 w-8 animate-bounce md:h-10 md:w-10" />
</a>
</div>
)
}
);
};

export default IntroCard
export default IntroCard;
7 changes: 4 additions & 3 deletions src/components/molecules/NotionRender.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export const NotionElementToReact = (content: any, _index: number, contents: Arr
let text = RichTextToReact(content[type].rich_text ?? []);
if (typeExist) {
// Paragraph

if (type === "paragraph") {
component = <Paragraph key={_index}>{text}</Paragraph>;
}
Expand Down Expand Up @@ -113,7 +114,7 @@ export const NotionElementToReact = (content: any, _index: number, contents: Arr
// Bulleted List
if (type === "bulleted_list_item") {
component = (
<UnorderedList>
<UnorderedList key={_index}>
<li key={1}>
{text}
{content.has_children && NotionToReact(content.children)}
Expand Down Expand Up @@ -184,15 +185,15 @@ export const RichTextToReact = (contents: Array<any>, options: any = {}) => {
if (options.getFirstNode && contents.length > 0) {
let content = contents[0];
let type = content.type;
let annotations = options?.rawContent ? content.annotations : {};
let annotations = content?.plain_text ? content.annotations : {};
return <Span annotations={annotations}>{content[type].content}</Span>;
}

return (
<>
{contents.map((content: any, index: number) => {
let type = content.type;
let annotations = options?.rawContent ? content.annotations : {};
let annotations = content?.plain_text ? content.annotations : {};
if (content[type].link)
return (
<Link
Expand Down
Loading

0 comments on commit ff40308

Please sign in to comment.