From e3fd245b2ac54f423414491ebec9694347e55e36 Mon Sep 17 00:00:00 2001 From: nnecec Date: Thu, 21 Mar 2024 17:19:47 +0800 Subject: [PATCH] feat: prepare website --- .github/workflows/ci.yml | 3 + .github/workflows/website.yml | 69 +++++++++++++++++++ apps/website/app/page.tsx | 5 +- apps/website/components/palette/footer.tsx | 2 +- apps/website/components/palette/index.ts | 4 ++ apps/website/components/palette/intro.tsx | 20 ++---- apps/website/components/palette/swatches.tsx | 18 ++--- apps/website/components/palette/tools.tsx | 16 +++-- apps/website/next.config.mjs | 23 +++++++ apps/website/package.json | 1 - .../{postcss.config.js => postcss.config.mjs} | 2 +- apps/website/public/.nojekyll | 0 apps/website/tsconfig.json | 6 +- apps/website/utils/use-window-dimensions.ts | 31 +++++++++ eslint.config.js | 1 + package.json | 3 +- 16 files changed, 159 insertions(+), 45 deletions(-) create mode 100644 .github/workflows/website.yml create mode 100644 apps/website/components/palette/index.ts rename apps/website/{postcss.config.js => postcss.config.mjs} (76%) create mode 100644 apps/website/public/.nojekyll create mode 100644 apps/website/utils/use-window-dimensions.ts diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 0650281..7df7408 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml new file mode 100644 index 0000000..0c49c18 --- /dev/null +++ b/.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 diff --git a/apps/website/app/page.tsx b/apps/website/app/page.tsx index e16fc6a..5054fd4 100644 --- a/apps/website/app/page.tsx +++ b/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 ( diff --git a/apps/website/components/palette/footer.tsx b/apps/website/components/palette/footer.tsx index 26cd6a6..389d0fc 100644 --- a/apps/website/components/palette/footer.tsx +++ b/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} /> { - 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 (
diff --git a/apps/website/components/palette/swatches.tsx b/apps/website/components/palette/swatches.tsx index 27dcc37..6c9a99b 100644 --- a/apps/website/components/palette/swatches.tsx +++ b/apps/website/components/palette/swatches.tsx @@ -1,20 +1,20 @@ '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) @@ -22,16 +22,6 @@ export function PaletteSwatches() { 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 (
(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() { - + @@ -167,7 +171,7 @@ export function PaletteTools() { How to configure your Tailwind.CSS? - +

1. Install tailwind-plugin-palette

diff --git a/apps/website/next.config.mjs b/apps/website/next.config.mjs index 94be31c..9dc7c64 100644 --- a/apps/website/next.config.mjs +++ b/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: 'export', + reactStrictMode: true, } diff --git a/apps/website/package.json b/apps/website/package.json index 41e0589..a387fb0 100644 --- a/apps/website/package.json +++ b/apps/website/package.json @@ -5,7 +5,6 @@ "scripts": { "build": "next build", "dev": "PORT=3001 next dev", - "lint": "next lint", "start": "next start" }, "dependencies": { diff --git a/apps/website/postcss.config.js b/apps/website/postcss.config.mjs similarity index 76% rename from apps/website/postcss.config.js rename to apps/website/postcss.config.mjs index 6e41d95..ebf881f 100644 --- a/apps/website/postcss.config.js +++ b/apps/website/postcss.config.mjs @@ -1,4 +1,4 @@ -module.exports = { +export default { plugins: { autoprefixer: {}, tailwindcss: {}, diff --git a/apps/website/public/.nojekyll b/apps/website/public/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/apps/website/tsconfig.json b/apps/website/tsconfig.json index 504256b..9702880 100644 --- a/apps/website/tsconfig.json +++ b/apps/website/tsconfig.json @@ -18,7 +18,11 @@ { "name": "next" } - ] + ], + "baseUrl": ".", + "paths": { + "~/*": ["./*"] + } }, "include": [ "next-env.d.ts", diff --git a/apps/website/utils/use-window-dimensions.ts b/apps/website/utils/use-window-dimensions.ts new file mode 100644 index 0000000..69f4221 --- /dev/null +++ b/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({ + 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 +} diff --git a/eslint.config.js b/eslint.config.js index 1b0d95f..9a5f2fb 100644 --- a/eslint.config.js +++ b/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', diff --git a/package.json b/package.json index 7524c92..2ecbf12 100644 --- a/package.json +++ b/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"