chore: cleaning up

.eslintignore

@@ -0,0 +1,6 @@
+node_modules
+.eslintrc
+next.config.js
+blog
+snippets
+next-seo.config.js

.eslintrc

@@ -0,0 +1,77 @@
+/* eslint-disable no-console, no-param-reassign */
+/* eslint-disable-next-line no-console*/
+{
+    "plugins": ["prettier", "@typescript-eslint"],
+    "extends": ["airbnb-typescript", "react-app", "prettier"],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "project": "./tsconfig.json"
+    },
+    "settings": {
+        "import/resolver": {
+            "typescript": {
+                "alwaysTryTypes": true
+            }
+        }
+    },
+    "rules": {
+        "jsx-a11y/anchor-is-valid": [
+            "error",
+            {
+                "components": ["Link"],
+                "specialLink": ["hrefLeft", "hrefRight"],
+                "aspects": ["invalidHref", "preferButton"]
+            }
+        ],
+        "no-param-reassign": 0,
+        "object-curly-spacing": ["warn", "always"],
+        "no-unused-vars": [
+            "warn",
+            {
+                "vars": "all",
+                "args": "none"
+            }
+        ],
+        "@typescript-eslint/no-unused-vars": [
+            "warn",
+            {
+                "vars": "all",
+                "args": "none"
+            }
+        ],
+        "@typescript-eslint/no-explicit-any": [
+            "error",
+            {
+                "ignoreRestArgs": true
+            }
+        ],
+        "max-len": "off",
+        "no-plusplus": [
+            "error",
+            {
+                "allowForLoopAfterthoughts": true
+            }
+        ],
+
+        "react/jsx-key": "error",
+        "import/no-extraneous-dependencies": "off",
+        "react/jsx-props-no-spreading": "off",
+        "import/prefer-default-export": "off",
+        "react/jsx-boolean-value": "off",
+        "react/prop-types": "off",
+        "react/no-unescaped-entities": "off",
+        "react/jsx-one-expression-per-line": "off",
+        "react/jsx-wrap-multilines": "off",
+        "react/destructuring-assignment": "off",
+        "@typescript-eslint/comma-dangle": [
+            "error",
+            {
+                "arrays": "only-multiline",
+                "objects": "only-multiline",
+                "imports": "only-multiline",
+                "exports": "only-multiline",
+                "functions": "never"
+            }
+        ]
+    }
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+.DS_Store
+.next

.prettierignore

@@ -0,0 +1 @@
+node_modules

.prettierrc

@@ -0,0 +1,8 @@
+{
+    "semi": true,
+    "tabWidth": 4,
+    "printWidth": 100,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "jsxBracketSameLine": true
+}

assets/icons/Moon.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+function SvgMoon(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={24}
+            height={24}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={1.5}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="moon_svg__feather moon_svg__feather-moon"
+            {...props}>
+            <path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" />
+        </svg>
+    );
+}
+
+export default SvgMoon;

assets/icons/Sun.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+function SvgSun(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={24}
+            height={24}
+            viewBox="0 0 24 24"
+            {...props}>
+            <path d="M17 12c0 2.762-2.238 5-5 5s-5-2.238-5-5 2.238-5 5-5 5 2.238 5 5zm-5-7c.34 0 .672.033 1 .08V3h-2v2.08c.328-.047.66-.08 1-.08zM7.816 6.401L6.344 4.928 4.929 6.343l1.473 1.473a7.048 7.048 0 011.414-1.415zm9.782 1.414l1.473-1.473-1.414-1.414-1.473 1.473a7.043 7.043 0 011.414 1.414zM12 19c-.34 0-.672-.033-1-.08V21h2v-2.08c-.328.047-.66.08-1 .08zm4.185-1.402l1.473 1.473 1.415-1.415-1.473-1.472a7.1 7.1 0 01-1.415 1.414zM5 12c0-.34.033-.672.08-1H3v2h2.08A7.026 7.026 0 015 12zm13.92-1c.047.328.08.66.08 1s-.033.672-.08 1H21v-2h-2.08zM6.401 16.184l-1.473 1.473 1.414 1.414 1.473-1.473a7.043 7.043 0 01-1.414-1.414z" />
+        </svg>
+    );
+}
+
+export default SvgSun;

assets/logo/logo.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+function LogoSvg(props: React.SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={40}
+            height={40}
+            viewBox="0 0 493 383"
+            fillRule="evenodd"
+            clipRule="evenodd"
+            strokeLinejoin="round"
+            strokeMiterlimit={2}
+            {...props}>
+            <path d="M218.618 0h69.188l204.933 382.941h-78.407L248.034 69.947l-29.416 49.748 141.486 263.246h-214.66l34.124-69.638h73.685L145.444 119.695 218.618 0z" />
+            <path d="M118.883 159.521l41.552 79.868-72.369 143.552H0l118.883-223.42z" />
+        </svg>
+    );
+}
+
+export default LogoSvg;

components/Code.tsx

@@ -0,0 +1,27 @@
+import React, { PropsWithChildren } from 'react';
+
+interface Props {
+    id: string;
+}
+
+const Code: React.FC<PropsWithChildren<Props>> = ({ id, children }) => {
+    const copyFunction = () => {
+        const copyText = document.getElementById(id)!.textContent;
+        const textArea = document.createElement('textarea');
+        textArea.textContent = copyText;
+        document.body.append(textArea);
+        textArea.select();
+        document.execCommand('copy');
+        textArea.remove();
+    };
+    return (
+        <div>
+            <button onClick={() => copyFunction()} type="button">
+                Copy Code
+            </button>
+            <div id={id}>{children}</div>
+        </div>
+    );
+};
+
+export default Code;

components/Footer.tsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Footer = () => <footer>Footer</footer>;
+
+export default Footer;

components/MDXComponents.tsx

@@ -0,0 +1,9 @@
+import Image from 'next/image';
+import Code from './Code';
+
+const MDXComponents = {
+    Image,
+    Code
+};
+
+export default MDXComponents;

components/Navbar.tsx

@@ -0,0 +1,94 @@
+import SvgMoon from '@/assets/icons/Moon';
+import SvgSun from '@/assets/icons/Sun';
+import React from 'react';
+import Link from 'next/link';
+import LogoSvg from '@/assets/logo/logo';
+
+const Navbar = () => {
+    const [isDark, setIsDark] = React.useState<boolean>(true);
+    React.useEffect(() => {
+        const docHtml = document.documentElement.dataset;
+        const winLocal = window.localStorage;
+        // theme saved
+        if (winLocal.getItem('theme')) {
+            const savedTheme = winLocal.getItem('theme');
+            docHtml.theme = savedTheme === 'dark' ? 'dark' : 'light';
+            setIsDark(savedTheme === 'dark');
+        }
+        // unsaved
+        else {
+            docHtml.theme = 'dark';
+            winLocal.setItem('theme', 'dark');
+            setIsDark(true);
+        }
+    }, []);
+    const toggleTheme = () => {
+        const docHtml = document.documentElement.dataset;
+        // toggle theme
+        // set local storage
+        window.localStorage.setItem('theme', `${!isDark ? 'dark' : 'light'}`);
+        // update the html data
+        docHtml.theme = `${!isDark ? 'dark' : 'light'}`;
+        // update the state
+        setIsDark(!isDark);
+    };
+    return (
+        <nav>
+            <div className="nav-logo">
+                <Link href="/">
+                    <LogoSvg className="pointer" fill={isDark ? `white` : `black`} />
+                </Link>
+
+                <span
+                    aria-label="theme-toggle-button"
+                    className="pointer"
+                    role="button"
+                    tabIndex={0}
+                    onKeyPress={() => toggleTheme()}
+                    onClick={() => toggleTheme()}>
+                    {isDark ? <SvgMoon /> : <SvgSun />}
+                </span>
+            </div>
+            <div className="nav-wrapper">
+                {/* <Link href="/blogs">
+                    <span className="pointer">Blogs</span>
+                </Link> */}
+            </div>
+            <style jsx>
+                {`
+                    nav {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        width: 100%;
+                        padding: 30px 0;
+                        margin-bottom: 40px;
+                        position: sticky;
+                        z-index: 50;
+                        top: 0;
+                        background-color: var(--background);
+                    }
+                    .nav-logo {
+                        display: flex;
+                        align-items: center;
+                    }
+                    .nav-logo span {
+                        margin-top: 5px;
+                        margin-left: 15px;
+                    }
+                    .nav-wrapper {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        font-weight: 600;
+                    }
+                    .nav-wrapper span {
+                        margin-left: 15px;
+                    }
+                `}
+            </style>
+        </nav>
+    );
+};
+
+export default Navbar;

components/NoteCard.tsx

@@ -0,0 +1,37 @@
+import { NoteDataType } from '@/typings/noteData';
+import React from 'react';
+import Link from 'next/link';
+
+interface Props {
+    index: number;
+    note: NoteDataType;
+}
+
+const NoteCard = ({ note, index }: Props) => (
+    <Link href={`/notes/${note.slug}`}>
+        <div className="note-card">
+            <h4>
+                {index + 1}. {`  `} {note.title}
+            </h4>
+            <p>{note.excerpt}</p>
+
+            <style jsx>{`
+                .note-card {
+                    margin-bottom: 10px;
+                    border-bottom: 1px solid var(--accents2);
+                    cursor: pointer;
+                    padding-bottom: 5px;
+                }
+                h4 {
+                    font-size: 20px;
+                }
+                p {
+                    margin: 5px 0px;
+                    color: var(--accents6);
+                }
+            `}</style>
+        </div>
+    </Link>
+);
+
+export default NoteCard;

constants/index.ts

@@ -0,0 +1,11 @@
+export interface GlobalDataType {
+  title: string;
+  description: string;
+  subTitle: string;
+}
+
+export const globalData: GlobalDataType = {
+  title: `Javascript Programming`,
+  description:`JavaScript is a lightweight, interpreted programming language. It is designed for creating network-centric applications. It is complimentary to and integrated with Java. JavaScript is very easy to implement because it is integrated with HTML. It is open and cross-platform.`,
+  subTitle: `Contents`
+}