Skip to content

Commit a02fb35

Browse files
nnececnnecec
committed
feat: prepare website
1 parent 395b6c6 commit a02fb35

16 files changed

+159
-45
lines changed

‎.github/workflows/ci.yml

+3
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ jobs:
2525
- name: Install Dependencies
2626
run: pnpm install --frozen-lockfile
2727

28+
- name: Lint
29+
run: pnpm lint
30+
2831
- name: Build
2932
run: pnpm build
3033

‎.github/workflows/website.yml

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# Sample workflow for building and deploying a Next.js site to GitHub Pages
2+
#
3+
# To get started with Next.js see: https://nextjs.org/docs/getting-started
4+
#
5+
name: Deploy Next.js site to Pages
6+
7+
on:
8+
# Runs on pushes targeting the default branch
9+
push:
10+
branches: ['main']
11+
12+
# Allows you to run this workflow manually from the Actions tab
13+
workflow_dispatch:
14+
15+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
16+
permissions:
17+
contents: read
18+
pages: write
19+
id-token: write
20+
21+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
22+
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
23+
concurrency:
24+
group: 'pages'
25+
cancel-in-progress: false
26+
27+
jobs:
28+
# Build job
29+
build:
30+
runs-on: ubuntu-latest
31+
steps:
32+
- name: Checkout
33+
uses: actions/checkout@v4
34+
35+
- name: Setup Node
36+
uses: actions/setup-node@v4
37+
with:
38+
node-version: 'lts/*'
39+
40+
- name: Setup pnpm
41+
uses: pnpm/action-setup@v3
42+
with:
43+
version: 8
44+
45+
- name: Setup Pages
46+
uses: actions/configure-pages@v4
47+
48+
- name: Install dependencies
49+
run: pnpm install --frozen-lockfile --prefer-offline
50+
51+
- name: Build with Next.js
52+
run: pnpm build
53+
54+
- name: Upload artifact
55+
uses: actions/upload-pages-artifact@v3
56+
with:
57+
path: ./apps/website/out
58+
59+
# Deployment job
60+
deploy:
61+
environment:
62+
name: github-pages
63+
url: ${{ steps.deployment.outputs.page_url }}
64+
runs-on: ubuntu-latest
65+
needs: build
66+
steps:
67+
- name: Deploy to GitHub Pages
68+
id: deployment
69+
uses: actions/deploy-pages@v4

‎apps/website/app/page.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@
33
import { MotionConfig } from 'framer-motion'
44
import { Provider } from 'jotai'
55

6-
import { PaletteFooter } from '../components/palette/footer'
7-
import { PaletteIntro } from '../components/palette/intro'
8-
import { PaletteSwatches } from '../components/palette/swatches'
9-
import { PaletteTools } from '../components/palette/tools'
6+
import { PaletteFooter, PaletteIntro, PaletteSwatches, PaletteTools } from '../components/palette'
107

118
export default function RootPage() {
129
return (

‎apps/website/components/palette/footer.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export function PaletteFooter() {
2424
className="relative z-10 bg-white"
2525
height={120}
2626
initial={{ x: 0 }}
27-
src="/assets/logo.svg"
27+
src="/palette/assets/logo.svg"
2828
width={120}
2929
/>
3030
<motion.div

‎apps/website/components/palette/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export * from './footer'
2+
export * from './intro'
3+
export * from './swatches'
4+
export * from './tools'

‎apps/website/components/palette/intro.tsx

+5-15
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,17 @@
11
'use client'
22

3-
import { useState } from 'react'
4-
5-
import { motion, useMotionValueEvent, useScroll, useTransform } from 'framer-motion'
3+
import { motion, useScroll, useTransform } from 'framer-motion'
64

75
import { Snippet } from '@nextui-org/react'
86

9-
export function PaletteIntro() {
10-
const innerHeight = typeof window === undefined ? 600 : window.innerHeight
7+
import { useWindowDimensions } from '~/utils/use-window-dimensions'
118

12-
const [inPaletteView, setInPaletteView] = useState(false)
9+
export function PaletteIntro() {
10+
const { height = 600 } = useWindowDimensions()
1311

1412
const { scrollY } = useScroll()
1513

16-
useMotionValueEvent(scrollY, 'change', latest => {
17-
if (latest > innerHeight / 2) {
18-
!inPaletteView && setInPaletteView(true)
19-
} else {
20-
inPaletteView && setInPaletteView(false)
21-
}
22-
})
23-
24-
const titleY = useTransform(scrollY, [0, innerHeight], [0, innerHeight / 2.5])
14+
const titleY = useTransform(scrollY, [0, height], [0, height / 2.5])
2515

2616
return (
2717
<div className="flex h-screen items-center justify-center">

‎apps/website/components/palette/swatches.tsx

+4-14
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,27 @@
11
'use client'
22

3-
import { useEffect, useRef, useState } from 'react'
3+
import { useEffect, useRef } from 'react'
44

55
import { CheckIcon, XMarkIcon } from '@heroicons/react/20/solid'
66
import clsx from 'clsx'
7-
import { motion, useMotionValueEvent, useScroll } from 'framer-motion'
7+
import { motion } from 'framer-motion'
88
import { useAtom } from 'jotai'
99

1010
import { Button, Input, Tooltip } from '@nextui-org/react'
1111

12-
import { getColorName } from '../../utils/color'
12+
import { getColorName } from '~/utils/color'
13+
1314
import { ColorPicker } from '../color-picker'
1415
import { colorsAtom, editingSwatchesAtom, paletteAtom } from './utils'
1516

1617
export function PaletteSwatches() {
17-
const [inPaletteView, setInPaletteView] = useState(false)
1818
const [colors, setColors] = useAtom(colorsAtom)
1919
const [palette] = useAtom(paletteAtom)
2020

2121
const [editingSwatches, setEditingSwatches] = useAtom(editingSwatchesAtom)
2222

2323
const isEmptyPalette = colors.length === 0
2424

25-
const { scrollY } = useScroll()
26-
27-
useMotionValueEvent(scrollY, 'change', latest => {
28-
if (latest > window.innerHeight / 2) {
29-
!inPaletteView && setInPaletteView(true)
30-
} else {
31-
inPaletteView && setInPaletteView(false)
32-
}
33-
})
34-
3525
return (
3626
<div
3727
className={clsx(

‎apps/website/components/palette/tools.tsx

+10-6
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,20 @@ import {
2121
useDisclosure,
2222
} from '@nextui-org/react'
2323

24-
import { ColorPicker } from '../../components/color-picker'
25-
import { randomColor } from '../../utils/color'
24+
import { ColorPicker } from '~/components/color-picker'
25+
import { randomColor } from '~/utils/color'
26+
import { useWindowDimensions } from '~/utils/use-window-dimensions'
27+
2628
import { IconButton, colorsAtom, optionsAtom } from './utils'
2729

2830
export function PaletteTools() {
31+
const { height = 600 } = useWindowDimensions()
32+
2933
const [inPaletteView, setInPaletteView] = useState(false)
3034
const [options, setOptions] = useAtom(optionsAtom)
3135
const [colors, setColors] = useAtom(colorsAtom)
3236
const { isOpen, onOpen, onOpenChange } = useDisclosure()
33-
const toolsRef = useRef()
37+
const toolsRef = useRef<HTMLDivElement>(null)
3438

3539
const [, startTransition] = useTransition()
3640

@@ -48,7 +52,7 @@ export function PaletteTools() {
4852
const { scrollY } = useScroll()
4953

5054
useMotionValueEvent(scrollY, 'change', latest => {
51-
if (latest > window.innerHeight / 2) {
55+
if (latest > height / 2) {
5256
!inPaletteView && setInPaletteView(true)
5357
} else {
5458
inPaletteView && setInPaletteView(false)
@@ -113,7 +117,7 @@ export function PaletteTools() {
113117
</IconButton>
114118
</Tooltip>
115119

116-
<Popover placement="top-start" portalContainer={toolsRef.current} shouldCloseOnBlur>
120+
<Popover placement="top-start" portalContainer={toolsRef.current!} shouldCloseOnBlur>
117121
<PopoverTrigger>
118122
<IconButton>
119123
<CogIcon width={14} />
@@ -167,7 +171,7 @@ export function PaletteTools() {
167171
<Modal backdrop="blur" isOpen={isOpen} onOpenChange={onOpenChange} scrollBehavior="inside" size="xl">
168172
<ModalContent>
169173
<ModalHeader className="text-xl">How to configure your Tailwind.CSS?</ModalHeader>
170-
<ModalBody className="prose dark:prose-invert max-h-[50vh] overflow-y-auto">
174+
<ModalBody className="prose max-h-[50vh] overflow-y-auto dark:prose-invert">
171175
<div>
172176
<h4>1. Install tailwind-plugin-palette</h4>
173177
<div className="not-prose flex gap-2">

‎apps/website/next.config.mjs

+23
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,28 @@
11
/** @type {import('next').NextConfig} */
22
const nextConfig = {
3+
/**
4+
* Set base path. This is the slug of your GitHub repository.
5+
*
6+
* @see https://nextjs.org/docs/app/api-reference/next-config-js/basePath
7+
*/
8+
basePath: '/palette',
9+
/**
10+
* Disable server-based image optimization. Next.js does not support
11+
* dynamic features with static exports.
12+
*
13+
* @see https://nextjs.org/docs/app/api-reference/components/image#unoptimized
14+
*/
15+
images: {
16+
unoptimized: true,
17+
},
18+
19+
/**
20+
* Enable static exports for the App Router.
21+
*
22+
* @see https://nextjs.org/docs/app/building-your-application/deploying/static-exports
23+
*/
24+
output: 'out',
25+
326
reactStrictMode: true,
427
}
528

‎apps/website/package.json

-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
"scripts": {
66
"build": "next build",
77
"dev": "PORT=3001 next dev",
8-
"lint": "next lint",
98
"start": "next start"
109
},
1110
"dependencies": {

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
module.exports = {
1+
export default {
22
plugins: {
33
autoprefixer: {},
44
tailwindcss: {},

‎apps/website/public/.nojekyll

Whitespace-only changes.

‎apps/website/tsconfig.json

+5-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,11 @@
1818
{
1919
"name": "next"
2020
}
21-
]
21+
],
22+
"baseUrl": ".",
23+
"paths": {
24+
"~/*": ["./*"]
25+
}
2226
},
2327
"include": [
2428
"next-env.d.ts",

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

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* // useWindowDimension.ts
3+
* * This hook returns the viewport/window height and width
4+
*/
5+
6+
import { useEffect, useState } from 'react'
7+
8+
type WindowDimentions = {
9+
height: number | undefined
10+
width: number | undefined
11+
}
12+
13+
export const useWindowDimensions = (): WindowDimentions => {
14+
const [windowDimensions, setWindowDimensions] = useState<WindowDimentions>({
15+
height: undefined,
16+
width: undefined,
17+
})
18+
useEffect(() => {
19+
function handleResize(): void {
20+
setWindowDimensions({
21+
height: window.innerHeight,
22+
width: window.innerWidth,
23+
})
24+
}
25+
handleResize()
26+
window.addEventListener('resize', handleResize)
27+
return (): void => window.removeEventListener('resize', handleResize)
28+
}, []) // Empty array ensures that effect is only run on mount
29+
30+
return windowDimensions
31+
}

‎eslint.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ export default [
3131
},
3232
{
3333
files: ['apps/**/*.{js,jsx,ts,tsx}'],
34+
ignores: ['**/node_modules/**', '**/out/**', '**/.next/**'],
3435
settings: {
3536
tailwindcss: {
3637
config: './apps/website/tailwind.config.ts',

‎package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@
66
"changeset": "changeset",
77
"clean": "turbo run clean",
88
"dev": "turbo run dev --filter='!./apps/*'",
9-
"lint": "turbo run lint",
10-
"play": "turbo run dev --filter=playground",
9+
"lint": "npx eslint . --fix",
1110
"release": "changeset publish",
1211
"test": "turbo run test",
1312
"version": "changeset version"

0 commit comments

Comments
 (0)