feat: prepare website

.github/workflows/ci.yml

@@ -25,6 +25,9 @@ jobs:
       - name: Install Dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Lint
+        run: pnpm lint
+
       - name: Build
         run: pnpm build
 

.github/workflows/website.yml

@@ -0,0 +1,69 @@
+# Sample workflow for building and deploying a Next.js site to GitHub Pages
+#
+# To get started with Next.js see: https://nextjs.org/docs/getting-started
+#
+name: Deploy Next.js site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ['main']
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: 'pages'
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 8
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile --prefer-offline
+
+      - name: Build with Next.js
+        run: pnpm build
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./apps/website/out
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

apps/website/app/page.tsx

@@ -3,10 +3,7 @@
 import { MotionConfig } from 'framer-motion'
 import { Provider } from 'jotai'
 
-import { PaletteFooter } from '../components/palette/footer'
-import { PaletteIntro } from '../components/palette/intro'
-import { PaletteSwatches } from '../components/palette/swatches'
-import { PaletteTools } from '../components/palette/tools'
+import { PaletteFooter, PaletteIntro, PaletteSwatches, PaletteTools } from '../components/palette'
 
 export default function RootPage() {
   return (

apps/website/components/palette/footer.tsx

@@ -24,7 +24,7 @@ export function PaletteFooter() {
           className="relative z-10 bg-white"
           height={120}
           initial={{ x: 0 }}
-          src="/assets/logo.svg"
+          src="/palette/assets/logo.svg"
           width={120}
         />
         <motion.div

apps/website/components/palette/index.ts

@@ -0,0 +1,4 @@
+export * from './footer'
+export * from './intro'
+export * from './swatches'
+export * from './tools'

apps/website/components/palette/intro.tsx

@@ -1,27 +1,17 @@
 'use client'
 
-import { useState } from 'react'
-
-import { motion, useMotionValueEvent, useScroll, useTransform } from 'framer-motion'
+import { motion, useScroll, useTransform } from 'framer-motion'
 
 import { Snippet } from '@nextui-org/react'
 
-export function PaletteIntro() {
-  const innerHeight = typeof window === undefined ? 600 : window.innerHeight
+import { useWindowDimensions } from '~/utils/use-window-dimensions'
 
-  const [inPaletteView, setInPaletteView] = useState(false)
+export function PaletteIntro() {
+  const { height = 600 } = useWindowDimensions()
 
   const { scrollY } = useScroll()
 
-  useMotionValueEvent(scrollY, 'change', latest => {
-    if (latest > innerHeight / 2) {
-      !inPaletteView && setInPaletteView(true)
-    } else {
-      inPaletteView && setInPaletteView(false)
-    }
-  })
-
-  const titleY = useTransform(scrollY, [0, innerHeight], [0, innerHeight / 2.5])
+  const titleY = useTransform(scrollY, [0, height], [0, height / 2.5])
 
   return (
     <div className="flex h-screen items-center justify-center">

apps/website/components/palette/swatches.tsx

@@ -1,37 +1,27 @@
 'use client'
 
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef } from 'react'
 
 import { CheckIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import clsx from 'clsx'
-import { motion, useMotionValueEvent, useScroll } from 'framer-motion'
+import { motion } from 'framer-motion'
 import { useAtom } from 'jotai'
 
 import { Button, Input, Tooltip } from '@nextui-org/react'
 
-import { getColorName } from '../../utils/color'
+import { getColorName } from '~/utils/color'
+
 import { ColorPicker } from '../color-picker'
 import { colorsAtom, editingSwatchesAtom, paletteAtom } from './utils'
 
 export function PaletteSwatches() {
-  const [inPaletteView, setInPaletteView] = useState(false)
   const [colors, setColors] = useAtom(colorsAtom)
   const [palette] = useAtom(paletteAtom)
 
   const [editingSwatches, setEditingSwatches] = useAtom(editingSwatchesAtom)
 
   const isEmptyPalette = colors.length === 0
 
-  const { scrollY } = useScroll()
-
-  useMotionValueEvent(scrollY, 'change', latest => {
-    if (latest > window.innerHeight / 2) {
-      !inPaletteView && setInPaletteView(true)
-    } else {
-      inPaletteView && setInPaletteView(false)
-    }
-  })
-
   return (
     <div
       className={clsx(

apps/website/components/palette/tools.tsx

@@ -21,16 +21,20 @@ import {
   useDisclosure,
 } from '@nextui-org/react'
 
-import { ColorPicker } from '../../components/color-picker'
-import { randomColor } from '../../utils/color'
+import { ColorPicker } from '~/components/color-picker'
+import { randomColor } from '~/utils/color'
+import { useWindowDimensions } from '~/utils/use-window-dimensions'
+
 import { IconButton, colorsAtom, optionsAtom } from './utils'
 
 export function PaletteTools() {
+  const { height = 600 } = useWindowDimensions()
+
   const [inPaletteView, setInPaletteView] = useState(false)
   const [options, setOptions] = useAtom(optionsAtom)
   const [colors, setColors] = useAtom(colorsAtom)
   const { isOpen, onOpen, onOpenChange } = useDisclosure()
-  const toolsRef = useRef()
+  const toolsRef = useRef<HTMLDivElement>(null)
 
   const [, startTransition] = useTransition()
 
@@ -48,7 +52,7 @@ export function PaletteTools() {
   const { scrollY } = useScroll()
 
   useMotionValueEvent(scrollY, 'change', latest => {
-    if (latest > window.innerHeight / 2) {
+    if (latest > height / 2) {
       !inPaletteView && setInPaletteView(true)
     } else {
       inPaletteView && setInPaletteView(false)
@@ -113,7 +117,7 @@ export function PaletteTools() {
               </IconButton>
             </Tooltip>
 
-            <Popover placement="top-start" portalContainer={toolsRef.current} shouldCloseOnBlur>
+            <Popover placement="top-start" portalContainer={toolsRef.current!} shouldCloseOnBlur>
               <PopoverTrigger>
                 <IconButton>
                   <CogIcon width={14} />
@@ -167,7 +171,7 @@ export function PaletteTools() {
       <Modal backdrop="blur" isOpen={isOpen} onOpenChange={onOpenChange} scrollBehavior="inside" size="xl">
         <ModalContent>
           <ModalHeader className="text-xl">How to configure your Tailwind.CSS?</ModalHeader>
-          <ModalBody className="prose dark:prose-invert max-h-[50vh] overflow-y-auto">
+          <ModalBody className="prose max-h-[50vh] overflow-y-auto dark:prose-invert">
             <div>
               <h4>1. Install tailwind-plugin-palette</h4>
               <div className="not-prose flex gap-2">

apps/website/next.config.mjs

@@ -1,5 +1,28 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  /**
+   * Set base path. This is the slug of your GitHub repository.
+   *
+   * @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath
+   */
+  basePath: '/palette',
+  /**
+   * Disable server-based image optimization. Next.js does not support
+   * dynamic features with static exports.
+   *
+   * @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
+   */
+  images: {
+    unoptimized: true,
+  },
+
+  /**
+   * Enable static exports for the App Router.
+   *
+   * @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
+   */
+  output: 'out',
+
   reactStrictMode: true,
 }
 

apps/website/package.json

@@ -5,7 +5,6 @@
   "scripts": {
     "build": "next build",
     "dev": "PORT=3001 next dev",
-    "lint": "next lint",
     "start": "next start"
   },
   "dependencies": {

apps/website/postcss.config.js → apps/website/postcss.config.mjs

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   plugins: {
     autoprefixer: {},
     tailwindcss: {},

apps/website/tsconfig.json

@@ -18,7 +18,11 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"]
+    }
   },
   "include": [
     "next-env.d.ts",

apps/website/utils/use-window-dimensions.ts

@@ -0,0 +1,31 @@
+/**
+ * // useWindowDimension.ts
+ * * This hook returns the viewport/window height and width
+ */
+
+import { useEffect, useState } from 'react'
+
+type WindowDimentions = {
+  height: number | undefined
+  width: number | undefined
+}
+
+export const useWindowDimensions = (): WindowDimentions => {
+  const [windowDimensions, setWindowDimensions] = useState<WindowDimentions>({
+    height: undefined,
+    width: undefined,
+  })
+  useEffect(() => {
+    function handleResize(): void {
+      setWindowDimensions({
+        height: window.innerHeight,
+        width: window.innerWidth,
+      })
+    }
+    handleResize()
+    window.addEventListener('resize', handleResize)
+    return (): void => window.removeEventListener('resize', handleResize)
+  }, []) // Empty array ensures that effect is only run on mount
+
+  return windowDimensions
+}

eslint.config.js

@@ -31,6 +31,7 @@ export default [
   },
   {
     files: ['apps/**/*.{js,jsx,ts,tsx}'],
+    ignores: ['**/node_modules/**', '**/out/**', '**/.next/**'],
     settings: {
       tailwindcss: {
         config: './apps/website/tailwind.config.ts',

package.json

@@ -6,8 +6,7 @@
     "changeset": "changeset",
     "clean": "turbo run clean",
     "dev": "turbo run dev --filter='!./apps/*'",
-    "lint": "turbo run lint",
-    "play": "turbo run dev --filter=playground",
+    "lint": "npx eslint . --fix",
     "release": "changeset publish",
     "test": "turbo run test",
     "version": "changeset version"