From 7a1331ee0f8c63a24b0298b28de83123aaf1628e Mon Sep 17 00:00:00 2001 From: Ken Matsui <26405363+ken-matsui@users.noreply.github.com> Date: Mon, 25 Dec 2023 22:35:32 -0800 Subject: [PATCH 01/32] Migration to NextUI & App Router --- {styles => app}/globals.css | 17 + pages/index.tsx => app/home-page.tsx | 20 +- app/layout.tsx | 29 + pages/404.tsx => app/not-found.tsx | 6 +- app/page.tsx | 21 + app/providers.tsx | 12 + components/Footer.tsx | 2 + components/Header.tsx | 19 +- components/Link.tsx | 1 + components/Search.tsx | 28 +- next-env.d.ts | 1 + package.json | 7 +- pages/_app.tsx | 3 +- pages/_document.tsx | 2 - postcss.config.js | 6 + tailwind.config.js | 18 + tsconfig.json | 28 +- utils/theme.ts | 28 - yarn.lock | 2337 +++++++++++++++++++++++++- 19 files changed, 2479 insertions(+), 106 deletions(-) rename {styles => app}/globals.css (55%) rename pages/index.tsx => app/home-page.tsx (61%) create mode 100644 app/layout.tsx rename pages/404.tsx => app/not-found.tsx (79%) create mode 100644 app/page.tsx create mode 100644 app/providers.tsx create mode 100644 postcss.config.js create mode 100644 tailwind.config.js delete mode 100644 utils/theme.ts diff --git a/styles/globals.css b/app/globals.css similarity index 55% rename from styles/globals.css rename to app/globals.css index e5e2dcc2..07253a3b 100644 --- a/styles/globals.css +++ b/app/globals.css @@ -1,3 +1,20 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +html { + font-size: 16px; + padding: 0px !important; + overflow-x: hidden; + scroll-padding-top: 64px; +} + +body { + min-height: 100vh; + position: relative; +} + + html, body { padding: 0; diff --git a/pages/index.tsx b/app/home-page.tsx similarity index 61% rename from pages/index.tsx rename to app/home-page.tsx index 8134809e..afac0308 100644 --- a/pages/index.tsx +++ b/app/home-page.tsx @@ -1,23 +1,17 @@ +"use client"; + import { DownloadIcon, InfoIcon } from "@chakra-ui/icons"; import { Button, HStack, Heading, VStack } from "@chakra-ui/react"; -import type { NextPage } from "next"; -import Meta from "~/components/Meta"; +// import Meta from "~/components/Meta"; import Search from "~/components/Search"; -const Home: NextPage = () => { +export function HomePage() { return ( <> - + {/* */} - A package manager and build system for C++ developers - - Poac is a C++ package manager and build system which is for open source - software. -
- Easy to introduce to your projects; you can use packages - intuitively. - + A Poac's community registry - - - - - ); -}; diff --git a/app/layout.tsx b/app/layout.tsx index e0fcac4d..b78c5b8b 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -6,14 +6,16 @@ import Footer from "~/components/Footer"; import Header from "~/components/Header"; import { Providers } from "~/app/providers"; -import './globals.css' +import "./globals.css"; export default function Layout({ children, }: { children: React.ReactNode }): JSX.Element { return ( - - + + {/* */} diff --git a/app/not-found.tsx b/app/not-found.tsx index 0b3297f5..b95ad1a9 100644 --- a/app/not-found.tsx +++ b/app/not-found.tsx @@ -1,5 +1,5 @@ import { Center, HStack, Heading } from "@chakra-ui/react"; -import { Metadata } from 'next'; +import { Metadata } from "next"; export const metadata: Metadata = { title: "404: Not Found", diff --git a/app/page.tsx b/app/page.tsx index 993e8857..a3d6db74 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,21 +1,132 @@ -import { HomePage } from './home-page'; -import { Metadata } from 'next'; +import { Metadata } from "next"; +import { Code } from "@nextui-org/react"; +import { Button } from "@nextui-org/react"; +import NextLink from "next/link"; +import { faDownload, faArrowRight } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; export const metadata: Metadata = { title: "Poac: Package Manager for C++", }; +const green = "#ABCF76"; +const brightGreen = "#C3E88D"; + export default function Home() { return ( -
+
-
-
-

A Poac's comminity registry

- {/* */} +
+
+
+
+

+ + Effortlessly + {" "} + build and share your C++ packages. +

+
+

+ Intuitive, fast package manager and build + system. +

+
+ + +
+
+
+ + $ poac new + hello_world +
+     + + Created + {" "} + binary (application) `hello_world` package +
+
$ cd{" "} + hello_world +
+
${" "} + poac run +
+   + + Compiling + {" "} + src/main.cc +
+     + + Linking + {" "} + hello_world +
+    + + Finished + {" "} + debug target(s) in 1.28333s +
+     + + Running + {" "} + poac-out/debug/hello_world +
+ Hello, world! + +
-
+
- ) -}; + ); +} diff --git a/app/providers.tsx b/app/providers.tsx index 0987320a..2a196627 100644 --- a/app/providers.tsx +++ b/app/providers.tsx @@ -1,12 +1,14 @@ -'use client' +"use client"; -import { NextUIProvider } from '@nextui-org/react' +import { NextUIProvider } from "@nextui-org/react"; import { ThemeProvider as NextThemesProvider } from "next-themes"; export function Providers({ children }: { children: React.ReactNode }) { return ( - {children} + + {children} + - ) + ); } diff --git a/components/Footer.tsx b/components/Footer.tsx index 551c4ac6..fb57d27d 100644 --- a/components/Footer.tsx +++ b/components/Footer.tsx @@ -1,56 +1,11 @@ -"use client"; - -import { Divider, HStack, LinkBox, VStack } from "@chakra-ui/react"; -import type { IconProp } from "@fortawesome/fontawesome-svg-core"; -import { faGithub } from "@fortawesome/free-brands-svg-icons"; -import { - faBookOpen, - faHandHoldingHeart, -} from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; - -import { LinkOverlay } from "~/components/Link"; - -interface LinkWithIconProps { - icon: IconProp; - href: string; - name: string; -} - -function LinkWithIcon(props: LinkWithIconProps): JSX.Element { - return ( - - - - - {props.name} - - - - ); -} - -export default function Footer(): JSX.Element { +export default function Footer() { return ( - - - - - - - - +
+
+

+ © {new Date().getFullYear()} Ken Matsui +

+
+
); } diff --git a/components/Header.tsx b/components/Header.tsx index 9a424c96..62a7639e 100644 --- a/components/Header.tsx +++ b/components/Header.tsx @@ -1,47 +1,50 @@ -"use client"; - -import { MoonIcon, SunIcon } from "@chakra-ui/icons"; import { - Center, - Flex, - IconButton, - Image, - LinkBox, - Spacer, - useColorMode, - useColorModeValue, -} from "@chakra-ui/react"; -import { usePathname } from "next/navigation"; + Navbar, + NavbarBrand, + NavbarContent, + NavbarItem, + Link, +} from "@nextui-org/react"; +import NextLink from "next/link"; -import { Link, LinkOverlay } from "~/components/Link"; -import Search from "~/components/Search"; +import { Logo } from "./Logo"; export default function Header(): JSX.Element { - const pathname = usePathname(); - // const { toggleColorMode } = useColorMode(); - const logoName = "/logo-white.svg"; - return ( - - - - - Logo - - - {pathname === "/" ? ( - <> - -
- - Browse all packages - -
- - ) : ( - - )} - - + + + + + +

Poac

+ + + + + + + Docs + + + + + GitHub + + + + + Sponsor + + + + + + Browse all packages + + + ); } diff --git a/components/Logo.tsx b/components/Logo.tsx new file mode 100644 index 00000000..35bf0491 --- /dev/null +++ b/components/Logo.tsx @@ -0,0 +1,39 @@ +import React from "react"; + +export const Logo = () => ( + + Group + + + + + + + + + + + +); diff --git a/pages/_app.tsx b/pages/_app.tsx deleted file mode 100644 index 02868502..00000000 --- a/pages/_app.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { ChakraProvider } from "@chakra-ui/react"; -import { Analytics } from "@vercel/analytics/react"; -import type { AppProps } from "next/app"; -import NextNProgress from "nextjs-progressbar"; -import "../styles/globals.css"; - -import Layout from "~/components/Layout"; - -function MyApp({ Component, pageProps }: AppProps): JSX.Element { - return ( - <> - - - - - - - - - ); -} - -export default MyApp; diff --git a/postcss.config.js b/postcss.config.js index 33ad091d..67cdf1a5 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,6 +1,6 @@ module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -} + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/public/logo-black.svg b/public/logo-black.svg deleted file mode 100644 index b2ad9342..00000000 --- a/public/logo-black.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - Group - - - - - - - - - - - \ No newline at end of file diff --git a/public/logo-white.svg b/public/logo-white.svg deleted file mode 100644 index 3e0c67ba..00000000 --- a/public/logo-white.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - Group - - - - - - - - - - - \ No newline at end of file diff --git a/styles/Home.module.css b/styles/Home.module.css deleted file mode 100644 index 32a57d52..00000000 --- a/styles/Home.module.css +++ /dev/null @@ -1,116 +0,0 @@ -.container { - padding: 0 2rem; -} - -.main { - min-height: 100vh; - padding: 4rem 0; - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} - -.footer { - display: flex; - flex: 1; - padding: 2rem 0; - border-top: 1px solid #eaeaea; - justify-content: center; - align-items: center; -} - -.footer a { - display: flex; - justify-content: center; - align-items: center; - flex-grow: 1; -} - -.title a { - color: #0070f3; - text-decoration: none; -} - -.title a:hover, -.title a:focus, -.title a:active { - text-decoration: underline; -} - -.title { - margin: 0; - line-height: 1.15; - font-size: 4rem; -} - -.title, -.description { - text-align: center; -} - -.description { - margin: 4rem 0; - line-height: 1.5; - font-size: 1.5rem; -} - -.code { - background: #fafafa; - border-radius: 5px; - padding: 0.75rem; - font-size: 1.1rem; - font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Courier New, monospace; -} - -.grid { - display: flex; - align-items: center; - justify-content: center; - flex-wrap: wrap; - max-width: 800px; -} - -.card { - margin: 1rem; - padding: 1.5rem; - text-align: left; - color: inherit; - text-decoration: none; - border: 1px solid #eaeaea; - border-radius: 10px; - transition: color 0.15s ease, border-color 0.15s ease; - max-width: 300px; -} - -.card:hover, -.card:focus, -.card:active { - color: #0070f3; - border-color: #0070f3; -} - -.card h2 { - margin: 0 0 1rem 0; - font-size: 1.5rem; -} - -.card p { - margin: 0; - font-size: 1.25rem; - line-height: 1.5; -} - -.logo { - height: 1em; - margin-left: 0.5rem; -} - -@media (max-width: 600px) { - .grid { - width: 100%; - flex-direction: column; - } -} diff --git a/tailwind.config.js b/tailwind.config.js index 5d18a8e8..d770f77f 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,13 +6,13 @@ const config = { "./app/**/*.{js,ts,jsx,tsx,mdx}", "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", - "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}" + "./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}", ], theme: { extend: {}, }, darkMode: "class", - plugins: [nextui()] -} + plugins: [nextui()], +}; export default config; From 267b06545acef623eb3d8c210a540f64b703fe79 Mon Sep 17 00:00:00 2001 From: Ken Matsui <26405363+ken-matsui@users.noreply.github.com> Date: Tue, 26 Dec 2023 01:06:09 -0800 Subject: [PATCH 03/32] Tweak meta --- app/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index a3d6db74..9291afff 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -6,7 +6,7 @@ import { faDownload, faArrowRight } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; export const metadata: Metadata = { - title: "Poac: Package Manager for C++", + title: "Poac - Intuitive and fast C++ package manager and build system", }; const green = "#ABCF76"; @@ -28,7 +28,7 @@ export default function Home() {

- Intuitive, fast package manager and build + Intuitive and fast package manager and build system.

From 9151dbd902da029ea23e46980a218b763e9b329d Mon Sep 17 00:00:00 2001 From: Ken Matsui <26405363+ken-matsui@users.noreply.github.com> Date: Tue, 26 Dec 2023 01:14:19 -0800 Subject: [PATCH 04/32] Add new progress bar --- app/layout.tsx | 2 -- app/providers.tsx | 2 ++ components/Meta.tsx | 43 +------------------------------------------ package.json | 2 +- yarn.lock | 26 +++++++++++++------------- 5 files changed, 17 insertions(+), 58 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index b78c5b8b..54bb248f 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,6 +1,5 @@ import { VStack } from "@chakra-ui/react"; import { Analytics } from "@vercel/analytics/react"; -// import NextNProgress from "nextjs-progressbar"; import Footer from "~/components/Footer"; import Header from "~/components/Header"; @@ -17,7 +16,6 @@ export default function Layout({ className={"min-h-screen bg-background font-sans antialiased"} > - {/* */}
{children} diff --git a/app/providers.tsx b/app/providers.tsx index 2a196627..552cb883 100644 --- a/app/providers.tsx +++ b/app/providers.tsx @@ -2,12 +2,14 @@ import { NextUIProvider } from "@nextui-org/react"; import { ThemeProvider as NextThemesProvider } from "next-themes"; +import { Next13ProgressBar } from 'next13-progressbar'; export function Providers({ children }: { children: React.ReactNode }) { return ( {children} + ); diff --git a/components/Meta.tsx b/components/Meta.tsx index 47b8ef5d..c202800d 100644 --- a/components/Meta.tsx +++ b/components/Meta.tsx @@ -4,36 +4,6 @@ import truncate from "truncate"; import type { Package } from "~/utils/types"; -function constructOgImageUrl( - name: string, - version: string, - description: string, -): string { - const ogImageUrlLeft = "https://res.cloudinary.com/poac/image/upload"; - const ogImageUrlRight = "opg_bg.png"; - - const cldFit = "w_1000,c_fit"; - const cldFont = "l_text:Roboto"; - const cldHeading = `${cldFont}_70_bold_center`; - const cldText = `${cldFont}_35_center`; - const cldRelativeBottom = (y: number): string => - `fl_layer_apply,y_${y}_add_$lineHeight`; - - const ogImageName = `${cldFit},${cldHeading}:${name.replace( - "/", - "%252F", - )},$lineHeight_h`; - const ogImageVersion = `${cldFit},${cldText}:(${ - version !== "latest" ? "v" : "" - }${version})/${cldRelativeBottom(10)}`; - const ogImageDesc = `${cldFit},${cldText}:${truncate( - description, - 180, - )}/${cldRelativeBottom(70)}`; - - return `${ogImageUrlLeft}/${ogImageName}/${ogImageVersion}/${ogImageDesc}/${ogImageUrlRight}`; -} - interface MetaProps { title?: string; package?: Pick; @@ -47,14 +17,7 @@ export default function Meta(props: MetaProps): JSX.Element { ? `${props.title} - Poac` : "Poac: Package Manager for C++"; const description = props.description ?? "Package Manager for C++."; - const ogImagePath = - props.package && props.description - ? constructOgImageUrl( - props.package.name, - props.package.version, - props.description, - ) - : "https://poac.dev/icon-512x512.png"; + const ogImagePath = "https://poac.dev/icon-512x512.png"; return ( @@ -75,10 +38,6 @@ export default function Meta(props: MetaProps): JSX.Element { - {/* - manifest.json provides metadata used when your web app is added to the - homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ - */} Date: Tue, 26 Dec 2023 01:15:51 -0800 Subject: [PATCH 05/32] Finish layout --- app/layout.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index 54bb248f..8a8a88bc 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,4 +1,3 @@ -import { VStack } from "@chakra-ui/react"; import { Analytics } from "@vercel/analytics/react"; import Footer from "~/components/Footer"; @@ -16,11 +15,9 @@ export default function Layout({ className={"min-h-screen bg-background font-sans antialiased"} > - -
- {children} -