From 0eef0247e6a2bbde2492b9340bd73005efe23508 Mon Sep 17 00:00:00 2001 From: Luca Schneider <7972860+Mad-Kat@users.noreply.github.com> Date: Fri, 10 Jan 2025 13:14:39 +0100 Subject: [PATCH] Update docs (#254) Co-authored-by: Jan Nicklas --- .github/workflows/docs.yml | 26 +- packages/docs/app/(home)/page.tsx | 281 +++++-- packages/docs/app/docs/[[...slug]]/page.tsx | 2 + packages/docs/app/docs/global.css | 7 - packages/docs/app/docs/layout.tsx | 1 - packages/docs/app/layout.config.tsx | 2 +- packages/docs/app/layout.tsx | 2 +- packages/docs/components/lazyYakIcon.tsx | 27 - packages/docs/components/yakIcon.tsx | 33 +- packages/docs/content/docs/examples.mdx | 4 +- packages/docs/content/docs/faq.mdx | 166 +++- packages/docs/content/docs/features.mdx | 171 ++-- .../docs/content/docs/getting-started.mdx | 76 +- .../docs/content/docs/how-does-it-work.mdx | 157 +++- .../docs/migration-from-styled-components.mdx | 760 +++++++++--------- packages/docs/content/docs/roadmap.mdx | 27 +- packages/docs/content/docs/why-next-yak.mdx | 63 +- packages/docs/lib/utils/constants.yak.ts | 51 ++ packages/docs/next.config.mjs | 4 - packages/docs/public/img/yak-jumping.png | Bin 0 -> 165848 bytes packages/docs/public/yak-header.png | Bin 1587093 -> 0 bytes packages/docs/public/yak-icon-dark.svg | 3 - packages/docs/public/yak-icon-light.svg | 3 - packages/docs/tsconfig.json | 1 + pnpm-lock.yaml | 42 +- 25 files changed, 1185 insertions(+), 724 deletions(-) delete mode 100644 packages/docs/app/docs/global.css delete mode 100644 packages/docs/components/lazyYakIcon.tsx create mode 100644 packages/docs/lib/utils/constants.yak.ts create mode 100644 packages/docs/public/img/yak-jumping.png delete mode 100644 packages/docs/public/yak-header.png delete mode 100644 packages/docs/public/yak-icon-dark.svg delete mode 100644 packages/docs/public/yak-icon-light.svg diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml index ddf06dc8..37fd2462 100644 --- a/.github/workflows/docs.yml +++ b/.github/workflows/docs.yml @@ -4,6 +4,12 @@ env: VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }} on: + workflow_dispatch: + inputs: + pr_number: + description: "Pull Request Number" + required: true + type: string push: branches: - main @@ -25,24 +31,26 @@ jobs: build-and-deploy: runs-on: ubuntu-latest steps: - - name: Checkout + - name: Checkout uses: actions/checkout@v3 + with: + ref: ${{ github.event.pull_request.head.sha || github.event.inputs.pr_number && format('refs/pull/{0}/head', github.event.inputs.pr_number) || github.ref }} - name: Install pnpm uses: pnpm/action-setup@v4 with: version: 9.12.3 run_install: false - + - name: Install Node.js uses: actions/setup-node@v3 with: node-version: 20 cache: "pnpm" - + - name: Install node_modules run: pnpm install - + - name: Install Rust uses: actions-rs/toolchain@v1 with: @@ -67,15 +75,15 @@ jobs: - name: Link Vercel project run: vercel link --yes --token ${{ secrets.VERCEL_TOKEN }} - # Preview deployment (for pull requests and non-main pushes) + # Preview deployment (for pull requests, manual triggers, and non-main pushes) - name: Pull Vercel environment information (Preview) - if: github.event_name == 'pull_request' || (github.event_name == 'push' && github.ref != 'refs/heads/main') + if: github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch' || (github.event_name == 'push' && github.ref != 'refs/heads/main') run: vercel pull --yes --environment=preview --token ${{ secrets.VERCEL_TOKEN }} - name: Build project artifacts (Preview) - if: github.event_name == 'pull_request' || (github.event_name == 'push' && github.ref != 'refs/heads/main') + if: github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch' || (github.event_name == 'push' && github.ref != 'refs/heads/main') run: vercel build --token ${{ secrets.VERCEL_TOKEN }} - name: Deploy to Vercel (Preview) - if: github.event_name == 'pull_request' || (github.event_name == 'push' && github.ref != 'refs/heads/main') + if: github.event_name == 'pull_request' || github.event_name == 'workflow_dispatch' || (github.event_name == 'push' && github.ref != 'refs/heads/main') run: vercel deploy --prebuilt --token ${{ secrets.VERCEL_TOKEN }} # Production deployment (for main branch pushes) @@ -87,4 +95,4 @@ jobs: run: vercel build --prod --token ${{ secrets.VERCEL_TOKEN }} - name: Deploy to Vercel (Production) if: github.event_name == 'push' && github.ref == 'refs/heads/main' - run: vercel deploy --prebuilt --prod --token ${{ secrets.VERCEL_TOKEN }} \ No newline at end of file + run: vercel deploy --prebuilt --prod --token ${{ secrets.VERCEL_TOKEN }} diff --git a/packages/docs/app/(home)/page.tsx b/packages/docs/app/(home)/page.tsx index b91695df..bb2ef0ac 100644 --- a/packages/docs/app/(home)/page.tsx +++ b/packages/docs/app/(home)/page.tsx @@ -1,64 +1,239 @@ -import Link from "next/link"; +import { breakpoints, colors, theme } from "@/lib/utils/constants.yak"; +import { css, keyframes, styled } from "next-yak"; +import NextLink from "next/link"; export default function HomePage() { return ( -
- Image of yak coding -

+
- Next-Yak -

-

+ Next-Yak + Image of yak coding + + A CSS-in-JS solution tailored for Next.js that seamlessly combines the expressive power of styled-components syntax with efficient build-time extraction of CSS using Next.js's built-in CSS configuration. -

-
- + + + Get started - - + + + + + + + + + Github - -
-
+ + + + + + + Features + +
  • + NextJs Compatibility + Works smoothly with both React Server and Client Components +
    • +
  • + Build-time CSS + Reduces load time by handling CSS during the build phase, using + Next.js built-in CSS Modules features +
    • +
  • + Lightweight Runtime + Operates with minimal impact, simply changing CSS classes without + modifying the CSSOM +
    • +
  • + Standard CSS Syntax + Write styles in familiar, easy-to-use CSS +
    • +
  • + Integrates with Atomic CSS + Easily combines with atomic CSS frameworks like Tailwind CSS for more + design options +
    • +
  • + No significant build-time overhead + Doesn't increase the build time significantly, by only transforming + statically as much as possible without the need to evaluate arbitrary + JavaScript. +
    • +     +