) {
+ const isDarkState = useIsDarkState()
+
+ return (
+ <>
+
+ {props.children}
+
+ )
+}
diff --git a/src/layouts/DefaultLayout/index.ts b/src/layouts/DefaultLayout/index.ts
new file mode 100644
index 0000000..c58a2b6
--- /dev/null
+++ b/src/layouts/DefaultLayout/index.ts
@@ -0,0 +1 @@
+export { default as DefaultLayout } from './Default.layout'
diff --git a/src/layouts/HeaderLayout/Header.layout.tsx b/src/layouts/HeaderLayout/Header.layout.tsx
deleted file mode 100644
index 3f9efb7..0000000
--- a/src/layouts/HeaderLayout/Header.layout.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { Header } from "@/components/Header";
-import { HeaderTags } from "@/components/HeaderTags";
-import { Navbar } from "@/components/Navbar";
-import { Search } from "@/components/Search";
-import useIsDarkState from "@/states/isDarkState/isDarkState";
-
-export default function HeaderLayout() {
- const isDarkState = useIsDarkState();
- return (
- <>
-
-
-
-
-
- );
-}
diff --git a/src/layouts/HeaderLayout/index.ts b/src/layouts/HeaderLayout/index.ts
deleted file mode 100644
index aababef..0000000
--- a/src/layouts/HeaderLayout/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as HeaderLayout } from './Header.layout';
\ No newline at end of file
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 4e15ff0..e2f0ab5 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,17 +1,40 @@
-import useIsDarkState from "@/states/isDarkState/isDarkState";
-import { defaultThemes, ThemeProvider } from "@acid-info/lsd-react";
-import { css, Global } from "@emotion/react";
-import type { AppProps } from "next/app";
-import Head from "next/head";
+import useIsDarkState from '@/states/isDarkState/isDarkState'
+import { defaultThemes, ThemeProvider } from '@acid-info/lsd-react'
+import { css, Global } from '@emotion/react'
+import type { AppProps } from 'next/app'
+import Head from 'next/head'
+import { uiConfigs } from '@/configs/ui.configs'
+import { DefaultLayout } from '@/layouts/DefaultLayout'
+import { ReactNode } from 'react'
+import { NextComponentType, NextPageContext } from 'next'
-export default function App({ Component, pageProps }: AppProps) {
- const isDark = useIsDarkState().get();
+type NextLayoutComponentType = NextComponentType<
+ NextPageContext,
+ any,
+ P
+> & {
+ getLayout?: (page: ReactNode) => ReactNode
+}
+
+type AppLayoutProps
= AppProps & {
+ Component: NextLayoutComponentType
+}
+
+export default function App({ Component, pageProps }: AppLayoutProps) {
+ const isDark = useIsDarkState().get()
+
+ const getLayout =
+ Component.getLayout ||
+ ((page: ReactNode) => {page})
return (
-
-
+ Acid
+
+ {getLayout()}
- );
+ )
}
diff --git a/src/pages/article/[:slug].tsx b/src/pages/article/[:slug].tsx
new file mode 100644
index 0000000..f820bd8
--- /dev/null
+++ b/src/pages/article/[:slug].tsx
@@ -0,0 +1,15 @@
+import { NextPage } from 'next'
+import { ArticleLayout } from '@/layouts/ArticleLayout'
+import { ReactNode } from 'react'
+
+type Props = NextPage<{}>
+
+const ArticlePage = (props: Props) => {
+ return article
+}
+
+ArticlePage.getLayout = function getLayout(page: ReactNode) {
+ return {page}
+}
+
+export default ArticlePage
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 42cab72..0a3fb38 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,23 +1,9 @@
import PostsDemo from '@/components/Post/PostsDemo'
-import { HeaderLayout } from '@/layouts/HeaderLayout'
-import Head from 'next/head'
export default function Home() {
return (
<>
-
- Logos Press Engine
-
-
-
-
-
-
-
-
+
)
}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index d4f491e..e69de29 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,107 +0,0 @@
-:root {
- --max-width: 1100px;
- --border-radius: 12px;
- --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
- 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
- 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
-
- --foreground-rgb: 0, 0, 0;
- --background-start-rgb: 214, 219, 220;
- --background-end-rgb: 255, 255, 255;
-
- --primary-glow: conic-gradient(
- from 180deg at 50% 50%,
- #16abff33 0deg,
- #0885ff33 55deg,
- #54d6ff33 120deg,
- #0071ff33 160deg,
- transparent 360deg
- );
- --secondary-glow: radial-gradient(
- rgba(255, 255, 255, 1),
- rgba(255, 255, 255, 0)
- );
-
- --tile-start-rgb: 239, 245, 249;
- --tile-end-rgb: 228, 232, 233;
- --tile-border: conic-gradient(
- #00000080,
- #00000040,
- #00000030,
- #00000020,
- #00000010,
- #00000010,
- #00000080
- );
-
- --callout-rgb: 238, 240, 241;
- --callout-border-rgb: 172, 175, 176;
- --card-rgb: 180, 185, 188;
- --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --foreground-rgb: 255, 255, 255;
- --background-start-rgb: 0, 0, 0;
- --background-end-rgb: 0, 0, 0;
-
- --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
- --secondary-glow: linear-gradient(
- to bottom right,
- rgba(1, 65, 255, 0),
- rgba(1, 65, 255, 0),
- rgba(1, 65, 255, 0.3)
- );
-
- --tile-start-rgb: 2, 13, 46;
- --tile-end-rgb: 2, 5, 19;
- --tile-border: conic-gradient(
- #ffffff80,
- #ffffff40,
- #ffffff30,
- #ffffff20,
- #ffffff10,
- #ffffff10,
- #ffffff80
- );
-
- --callout-rgb: 20, 20, 20;
- --callout-border-rgb: 108, 108, 108;
- --card-rgb: 100, 100, 100;
- --card-border-rgb: 200, 200, 200;
- }
-}
-
-* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
-}
-
-html,
-body {
- max-width: 100vw;
- overflow-x: hidden;
-}
-
-body {
- color: rgb(var(--foreground-rgb));
- background: linear-gradient(
- to bottom,
- transparent,
- rgb(var(--background-end-rgb))
- )
- rgb(var(--background-start-rgb));
-}
-
-a {
- color: inherit;
- text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
- html {
- color-scheme: dark;
- }
-}
diff --git a/src/types/ui.types.ts b/src/types/ui.types.ts
new file mode 100644
index 0000000..6ef6e21
--- /dev/null
+++ b/src/types/ui.types.ts
@@ -0,0 +1,4 @@
+export enum ESearchScope {
+ GLOBAL = 'global',
+ ARTICLE = 'article',
+}
diff --git a/src/utils/.placeholder b/src/utils/.placeholder
deleted file mode 100644
index e69de29..0000000
diff --git a/src/utils/general.utils.ts b/src/utils/general.utils.ts
new file mode 100644
index 0000000..3b10ad8
--- /dev/null
+++ b/src/utils/general.utils.ts
@@ -0,0 +1 @@
+export const nope = (...args: any) => {}
diff --git a/src/utils/ui.utils.ts b/src/utils/ui.utils.ts
new file mode 100644
index 0000000..fcf9697
--- /dev/null
+++ b/src/utils/ui.utils.ts
@@ -0,0 +1,64 @@
+import { RefObject, useEffect, useRef, useState } from 'react'
+
+export const useSticky = (dy: number = 0) => {
+ const stickyRef = useRef(null)
+ const [sticky, setSticky] = useState(false)
+ const [offset, setOffset] = useState(0)
+ const [height, setHeight] = useState(0)
+
+ useEffect(() => {
+ if (!stickyRef.current) {
+ return
+ }
+ setOffset(stickyRef.current.offsetTop)
+ setHeight(stickyRef.current.clientHeight)
+ }, [stickyRef, setOffset])
+
+ useEffect(() => {
+ const handleScroll = () => {
+ if (!stickyRef.current) {
+ return
+ }
+ setSticky(window.scrollY > offset - dy)
+ }
+ window.addEventListener('scroll', handleScroll)
+ return () => window.removeEventListener('scroll', handleScroll)
+ }, [dy, setSticky, stickyRef, offset])
+
+ return { stickyRef, sticky, height: sticky ? height : 0 }
+}
+
+export const useOutsideClick = (
+ ref: RefObject,
+) => {
+ const [isOutside, setIsOutside] = useState(false)
+
+ useEffect(() => {
+ function handleClickOutside(event: any) {
+ const isOutside = !!(ref.current && !ref.current.contains(event.target))
+ setIsOutside(isOutside)
+ }
+ document.addEventListener('mousedown', handleClickOutside)
+
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside)
+ }
+ }, [ref])
+
+ return { isOutside }
+}
+
+export const useIsScrolling = () => {
+ const [isScrolling, setIsScrolling] = useState(false)
+ useEffect(() => {
+ let timeout: NodeJS.Timeout
+ function handleScroll() {
+ setIsScrolling(true)
+ clearTimeout(timeout)
+ timeout = setTimeout(() => setIsScrolling(false), 100)
+ }
+ window.addEventListener('scroll', handleScroll)
+ return () => window.removeEventListener('scroll', handleScroll)
+ }, [setIsScrolling])
+ return isScrolling
+}