mirror of
https://github.com/soconnor0919/october.today.git
synced 2026-02-05 00:06:40 -05:00
feat: Reimplement the October counter application using Next.js, tRPC, and shadcn/ui, replacing the original static HTML/JS setup.
This commit is contained in:
Sean O'Connor
BIN
.github/.DS_Store
vendored
Normal file
BIN
.github/.DS_Store
vendored
Normal file
Binary file not shown.
58
.github/workflows/deploy.yml
vendored
Normal file
58
.github/workflows/deploy.yml
vendored
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
# Deploy to GitHub Pages
|
||||||
|
|
||||||
|
name: Deploy to GitHub Pages
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches: ["main", "master"]
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
permissions:
|
||||||
|
contents: read
|
||||||
|
pages: write
|
||||||
|
id-token: write
|
||||||
|
|
||||||
|
concurrency:
|
||||||
|
group: "pages"
|
||||||
|
cancel-in-progress: false
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
steps:
|
||||||
|
- name: Checkout
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
|
- name: Setup Bun
|
||||||
|
uses: oven-sh/setup-bun@v1
|
||||||
|
with:
|
||||||
|
bun-version: latest
|
||||||
|
|
||||||
|
- name: Setup Pages
|
||||||
|
uses: actions/configure-pages@v5
|
||||||
|
with:
|
||||||
|
static_site_generator: next
|
||||||
|
|
||||||
|
- name: Install dependencies
|
||||||
|
run: bun install
|
||||||
|
|
||||||
|
- name: Build with Next.js
|
||||||
|
run: bun run build
|
||||||
|
env:
|
||||||
|
SKIP_ENV_VALIDATION: true
|
||||||
|
|
||||||
|
- name: Upload artifact
|
||||||
|
uses: actions/upload-pages-artifact@v3
|
||||||
|
with:
|
||||||
|
path: ./out
|
||||||
|
|
||||||
|
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
|
||||||
111
.gitignore
vendored
Normal file
111
.gitignore
vendored
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||||
|
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||||
|
|
||||||
|
# Runtime data
|
||||||
|
pids
|
||||||
|
*.pid
|
||||||
|
*.seed
|
||||||
|
*.pid.lock
|
||||||
|
|
||||||
|
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||||
|
lib-cov
|
||||||
|
|
||||||
|
# Coverage directory used by tools like istanbul
|
||||||
|
coverage
|
||||||
|
*.lcov
|
||||||
|
|
||||||
|
# nyc test coverage
|
||||||
|
.nyc_output
|
||||||
|
|
||||||
|
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||||
|
.grunt
|
||||||
|
|
||||||
|
# Bower dependency directory (https://bower.io/)
|
||||||
|
bower_components
|
||||||
|
|
||||||
|
# node-waf configuration
|
||||||
|
.lock-wscript
|
||||||
|
|
||||||
|
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||||
|
build/Release
|
||||||
|
|
||||||
|
# Dependency directories
|
||||||
|
jspm_packages/
|
||||||
|
|
||||||
|
# node modules
|
||||||
|
node_modules
|
||||||
|
node_modules/*
|
||||||
|
|
||||||
|
# build output
|
||||||
|
out
|
||||||
|
out/*
|
||||||
|
|
||||||
|
# TypeScript v1 declaration files
|
||||||
|
typings/
|
||||||
|
|
||||||
|
# TypeScript cache
|
||||||
|
*.tsbuildinfo
|
||||||
|
|
||||||
|
# Optional npm cache directory
|
||||||
|
.npm
|
||||||
|
|
||||||
|
# Optional eslint cache
|
||||||
|
.eslintcache
|
||||||
|
|
||||||
|
# Microbundle cache
|
||||||
|
.rpt2_cache/
|
||||||
|
.rts2_cache_cjs/
|
||||||
|
.rts2_cache_es/
|
||||||
|
.rts2_cache_umd/
|
||||||
|
|
||||||
|
# Optional REPL history
|
||||||
|
.node_repl_history
|
||||||
|
|
||||||
|
# Output of 'npm pack'
|
||||||
|
*.tgz
|
||||||
|
|
||||||
|
# Yarn Integrity file
|
||||||
|
.yarn-integrity
|
||||||
|
|
||||||
|
# dotenv environment variables file
|
||||||
|
.env
|
||||||
|
.env.test
|
||||||
|
|
||||||
|
# parcel-bundler cache (https://parceljs.org/)
|
||||||
|
.cache
|
||||||
|
|
||||||
|
# Next.js build output
|
||||||
|
.next
|
||||||
|
|
||||||
|
# Nuxt.js build / generate output
|
||||||
|
.nuxt
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Gatsby files
|
||||||
|
.cache/
|
||||||
|
# Comment in the public line in if your project uses Gatsby and *not* Next.js
|
||||||
|
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||||
|
# public
|
||||||
|
|
||||||
|
# vuepress build output
|
||||||
|
.vuepress/dist
|
||||||
|
|
||||||
|
# Serverless directories
|
||||||
|
.serverless/
|
||||||
|
|
||||||
|
# FuseBox cache
|
||||||
|
.fusebox/
|
||||||
|
|
||||||
|
# DynamoDB Local files
|
||||||
|
.dynamodb/
|
||||||
|
|
||||||
|
# TernJS port file
|
||||||
|
.tern-port
|
||||||
65
README.md
65
README.md
@@ -1,30 +1,63 @@
|
|||||||
# October.Today
|
# october.today
|
||||||
|
|
||||||
A simple website that displays the date as if October 2019 never ended.
|
A simple, elegant counter showing how many days it's been since October 1, 2019.
|
||||||
|
|
||||||
## About
|
Built with Next.js, shadcn/ui, and the "Soft, Translucent, Alive" design philosophy.
|
||||||
|
|
||||||
This website is based on a running joke between friends where we count the days as if we're still in October 2019. Instead of showing today's actual date, it displays it as "October Nth, 2019" where N is the number of days since October 1, 2019.
|
## Features
|
||||||
|
|
||||||
## How It Works
|
- **Dynamic Counter**: Calculates and displays days since October 1, 2019
|
||||||
|
- **Smooth Animations**: Number counting animation and interactive hover effects
|
||||||
|
- **Share Functionality**: Share via SMS with a single click
|
||||||
|
- **Modern Design**: Glassmorphism UI with "Living Blob" background animation
|
||||||
|
- **Typography**: Editorial-style typography using Playfair Display and Inter
|
||||||
|
- **Analytics**: Optional Umami tracking support
|
||||||
|
|
||||||
The site uses JavaScript to:
|
## Development
|
||||||
1. Calculate the number of days since October 1, 2019
|
|
||||||
2. Display the result as "October [day count]" with the appropriate ordinal suffix (st, nd, rd, th)
|
```bash
|
||||||
|
# Install dependencies
|
||||||
|
bun install
|
||||||
|
|
||||||
|
# Run development server
|
||||||
|
bun dev
|
||||||
|
|
||||||
|
# Build for production
|
||||||
|
bun run build
|
||||||
|
# or
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Type check
|
||||||
|
bun typecheck
|
||||||
|
```
|
||||||
|
|
||||||
## Deployment
|
## Deployment
|
||||||
|
|
||||||
This site is meant to be deployed on GitHub Pages. To deploy:
|
This project is configured for static export and deploys automatically to GitHub Pages via GitHub Actions.
|
||||||
|
|
||||||
1. Push this repository to GitHub
|
### Setup
|
||||||
2. Go to repository Settings > Pages
|
|
||||||
3. Select the main branch as the source
|
|
||||||
4. The site will be published at https://[your-username].github.io/[repository-name]/
|
|
||||||
|
|
||||||
## Local Development
|
1. Enable GitHub Pages in repository settings (Source: GitHub Actions)
|
||||||
|
2. (Optional) Add repository secrets for Umami analytics:
|
||||||
|
- `NEXT_PUBLIC_UMAMI_URL`
|
||||||
|
- `NEXT_PUBLIC_UMAMI_WEBSITE_ID`
|
||||||
|
|
||||||
To run this site locally, simply open the `index.html` file in a web browser.
|
## Tech Stack
|
||||||
|
|
||||||
|
- **Framework**: Next.js 16 (App Router, Static Export)
|
||||||
|
- **Styling**: Tailwind CSS v4, shadcn/ui
|
||||||
|
- **Fonts**: Playfair Display (headings), Inter (body)
|
||||||
|
- **Package Manager**: Bun
|
||||||
|
- **Deployment**: GitHub Pages
|
||||||
|
|
||||||
|
## Design Philosophy
|
||||||
|
|
||||||
|
The design follows three core principles:
|
||||||
|
|
||||||
|
- **Soft**: Deep border radii (1rem-1.5rem) for organic, friendly shapes
|
||||||
|
- **Translucent**: Glassmorphism effects with backdrop blur
|
||||||
|
- **Alive**: Continuous subtle animations that make the UI feel dynamic
|
||||||
|
|
||||||
## License
|
## License
|
||||||
|
|
||||||
This project is open source and available for anyone to use or modify.
|
MIT
|
||||||
|
|||||||
59
api.js
59
api.js
@@ -1,59 +0,0 @@
|
|||||||
/**
|
|
||||||
* October Today API
|
|
||||||
* Simple client-side API that returns the current October day count
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Calculate days since October 1, 2019
|
|
||||||
function calculateOctoberDay() {
|
|
||||||
const startDate = new Date(2019, 9, 1); // Month is 0-indexed, so 9 is October
|
|
||||||
const today = new Date();
|
|
||||||
|
|
||||||
// Calculate difference in days
|
|
||||||
const diffTime = Math.abs(today - startDate);
|
|
||||||
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
|
|
||||||
|
|
||||||
return diffDays;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set ordinal suffix (st, nd, rd, th)
|
|
||||||
function getOrdinalSuffix(number) {
|
|
||||||
const j = number % 10;
|
|
||||||
const k = number % 100;
|
|
||||||
|
|
||||||
if (j === 1 && k !== 11) {
|
|
||||||
return "st";
|
|
||||||
}
|
|
||||||
if (j === 2 && k !== 12) {
|
|
||||||
return "nd";
|
|
||||||
}
|
|
||||||
if (j === 3 && k !== 13) {
|
|
||||||
return "rd";
|
|
||||||
}
|
|
||||||
return "th";
|
|
||||||
}
|
|
||||||
|
|
||||||
// Handle requests for the API
|
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
|
||||||
// Check if this is an API request from the URL
|
|
||||||
const urlParams = new URLSearchParams(window.location.search);
|
|
||||||
const isApiRequest = urlParams.get('api');
|
|
||||||
|
|
||||||
if (isApiRequest === 'json') {
|
|
||||||
const octoberDay = calculateOctoberDay();
|
|
||||||
const suffix = getOrdinalSuffix(octoberDay);
|
|
||||||
|
|
||||||
// Create the response object
|
|
||||||
const response = {
|
|
||||||
day: octoberDay,
|
|
||||||
ordinal: suffix,
|
|
||||||
formatted: `${octoberDay}${suffix}`,
|
|
||||||
text: `happy october ${octoberDay}${suffix}`
|
|
||||||
};
|
|
||||||
|
|
||||||
// Display as JSON and prevent normal page rendering
|
|
||||||
document.body.innerHTML = `<pre>${JSON.stringify(response, null, 2)}</pre>`;
|
|
||||||
document.body.style.fontFamily = 'monospace';
|
|
||||||
document.body.style.padding = '20px';
|
|
||||||
document.body.style.backgroundColor = '#f5f5f5';
|
|
||||||
}
|
|
||||||
});
|
|
||||||
23
components.json
Normal file
23
components.json
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
|
"style": "new-york",
|
||||||
|
"rsc": true,
|
||||||
|
"tsx": true,
|
||||||
|
"tailwind": {
|
||||||
|
"config": "",
|
||||||
|
"css": "src/styles/globals.css",
|
||||||
|
"baseColor": "neutral",
|
||||||
|
"cssVariables": true,
|
||||||
|
"prefix": ""
|
||||||
|
},
|
||||||
|
"iconLibrary": "lucide",
|
||||||
|
"rtl": false,
|
||||||
|
"aliases": {
|
||||||
|
"components": "~/components",
|
||||||
|
"utils": "~/lib/utils",
|
||||||
|
"ui": "~/components/ui",
|
||||||
|
"lib": "~/lib",
|
||||||
|
"hooks": "~/hooks"
|
||||||
|
},
|
||||||
|
"registries": {}
|
||||||
|
}
|
||||||
48
eslint.config.js
Normal file
48
eslint.config.js
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
import { FlatCompat } from "@eslint/eslintrc";
|
||||||
|
import tseslint from "typescript-eslint";
|
||||||
|
|
||||||
|
const compat = new FlatCompat({
|
||||||
|
baseDirectory: import.meta.dirname,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{
|
||||||
|
ignores: [".next"],
|
||||||
|
},
|
||||||
|
...compat.extends("next/core-web-vitals"),
|
||||||
|
{
|
||||||
|
files: ["**/*.ts", "**/*.tsx"],
|
||||||
|
extends: [
|
||||||
|
...tseslint.configs.recommended,
|
||||||
|
...tseslint.configs.recommendedTypeChecked,
|
||||||
|
...tseslint.configs.stylisticTypeChecked,
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
"@typescript-eslint/array-type": "off",
|
||||||
|
"@typescript-eslint/consistent-type-definitions": "off",
|
||||||
|
"@typescript-eslint/consistent-type-imports": [
|
||||||
|
"warn",
|
||||||
|
{ prefer: "type-imports", fixStyle: "inline-type-imports" },
|
||||||
|
],
|
||||||
|
"@typescript-eslint/no-unused-vars": [
|
||||||
|
"warn",
|
||||||
|
{ argsIgnorePattern: "^_" },
|
||||||
|
],
|
||||||
|
"@typescript-eslint/require-await": "off",
|
||||||
|
"@typescript-eslint/no-misused-promises": [
|
||||||
|
"error",
|
||||||
|
{ checksVoidReturn: { attributes: false } },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
linterOptions: {
|
||||||
|
reportUnusedDisableDirectives: true,
|
||||||
|
},
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
projectService: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
);
|
||||||
3
grid.svg
3
grid.svg
@@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
|
||||||
<circle cx="10" cy="10" r="1" fill="currentColor"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 145 B |
43
index.html
43
index.html
@@ -1,43 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>October Today</title>
|
|
||||||
<link rel="stylesheet" href="style.css">
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
|
|
||||||
<script defer src="https://stats.soconnor.dev/script.js" data-website-id="6c3731c6-5940-499a-a71f-2d362c861dfc"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="orb primary"></div>
|
|
||||||
<!-- <div class="orb secondary"></div> -->
|
|
||||||
<div class="container">
|
|
||||||
<h1>Today is</h1>
|
|
||||||
<div class="date">
|
|
||||||
<h2>October <span id="october-day">??</span><sup id="ordinal">th</sup></h2>
|
|
||||||
<p class="year">2019.</p>
|
|
||||||
</div>
|
|
||||||
<div class="buttons">
|
|
||||||
<button id="share-button" class="share-button">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<path d="M7 11l5-5 5 5"/>
|
|
||||||
<path d="M12 6v13"/>
|
|
||||||
</svg>
|
|
||||||
Share via SMS
|
|
||||||
</button>
|
|
||||||
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" class="why-button">
|
|
||||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<circle cx="12" cy="12" r="10"/>
|
|
||||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>
|
|
||||||
<path d="M12 17h.01"/>
|
|
||||||
</svg>
|
|
||||||
Why?
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="script.js"></script>
|
|
||||||
<script src="api.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
6
next-env.d.ts
vendored
Normal file
6
next-env.d.ts
vendored
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
/// <reference types="next" />
|
||||||
|
/// <reference types="next/image-types/global" />
|
||||||
|
import "./.next/types/routes.d.ts";
|
||||||
|
|
||||||
|
// NOTE: This file should not be edited
|
||||||
|
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
|
||||||
16
next.config.ts
Normal file
16
next.config.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
/**
|
||||||
|
* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
|
||||||
|
* for Docker builds.
|
||||||
|
*/
|
||||||
|
// import "./src/env.ts";
|
||||||
|
|
||||||
|
import { type NextConfig } from "next";
|
||||||
|
|
||||||
|
const config: NextConfig = {
|
||||||
|
output: "export",
|
||||||
|
images: {
|
||||||
|
unoptimized: true,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
56
package.json
Normal file
56
package.json
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
{
|
||||||
|
"name": "october.today",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"build": "next build",
|
||||||
|
"check": "next lint && tsc --noEmit",
|
||||||
|
"dev": "next dev",
|
||||||
|
"format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
|
||||||
|
"format:write": "prettier --write \"**/*.{ts,tsx,js,jsx,mdx}\" --cache",
|
||||||
|
"lint": "next lint",
|
||||||
|
"lint:fix": "next lint --fix",
|
||||||
|
"preview": "next build && next start",
|
||||||
|
"start": "next start",
|
||||||
|
"typecheck": "tsc --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@t3-oss/env-nextjs": "^0.12.0",
|
||||||
|
"@tanstack/react-query": "^5.69.0",
|
||||||
|
"@trpc/client": "^11.0.0",
|
||||||
|
"@trpc/react-query": "^11.0.0",
|
||||||
|
"@trpc/server": "^11.0.0",
|
||||||
|
"class-variance-authority": "^0.7.1",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"lucide-react": "^0.563.0",
|
||||||
|
"next": "^16.1.6",
|
||||||
|
"radix-ui": "^1.4.3",
|
||||||
|
"react": "^19.2.4",
|
||||||
|
"react-dom": "^19.2.4",
|
||||||
|
"server-only": "^0.0.1",
|
||||||
|
"superjson": "^2.2.1",
|
||||||
|
"tailwind-merge": "^3.4.0",
|
||||||
|
"tailwindcss-animate": "^1.0.7",
|
||||||
|
"zod": "^3.24.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/eslintrc": "^3.3.1",
|
||||||
|
"@tailwindcss/postcss": "^4.0.15",
|
||||||
|
"@types/node": "^20.14.10",
|
||||||
|
"@types/react": "^19.0.0",
|
||||||
|
"@types/react-dom": "^19.0.0",
|
||||||
|
"eslint": "^9.23.0",
|
||||||
|
"eslint-config-next": "^15.2.3",
|
||||||
|
"postcss": "^8.5.3",
|
||||||
|
"prettier": "^3.5.3",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.6.11",
|
||||||
|
"tailwindcss": "^4.0.15",
|
||||||
|
"tw-animate-css": "^1.4.0",
|
||||||
|
"typescript": "^5.8.2",
|
||||||
|
"typescript-eslint": "^8.27.0"
|
||||||
|
},
|
||||||
|
"ct3aMetadata": {
|
||||||
|
"initVersion": "7.40.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
5
postcss.config.js
Normal file
5
postcss.config.js
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
4
prettier.config.js
Normal file
4
prettier.config.js
Normal file
@@ -0,0 +1,4 @@
|
|||||||
|
/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
|
||||||
|
export default {
|
||||||
|
plugins: ["prettier-plugin-tailwindcss"],
|
||||||
|
};
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
84
script.js
84
script.js
@@ -1,84 +0,0 @@
|
|||||||
document.addEventListener('DOMContentLoaded', function() {
|
|
||||||
// Set the start date - October 1, 2019
|
|
||||||
const startDate = new Date(2019, 9, 1); // Month is 0-indexed, so 9 = October
|
|
||||||
|
|
||||||
// Get today's date
|
|
||||||
const today = new Date();
|
|
||||||
|
|
||||||
// Calculate days difference
|
|
||||||
const diffTime = Math.abs(today - startDate);
|
|
||||||
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
|
|
||||||
|
|
||||||
// Add 1 because October 1 is the first day
|
|
||||||
const octoberDay = diffDays + 1;
|
|
||||||
|
|
||||||
// Animate the counter
|
|
||||||
const octoberDayElement = document.getElementById('october-day');
|
|
||||||
const targetNumber = octoberDay;
|
|
||||||
|
|
||||||
// Start from a lower number for animation
|
|
||||||
let currentNumber = Math.max(1, targetNumber - 50);
|
|
||||||
|
|
||||||
// Set initial value
|
|
||||||
octoberDayElement.textContent = currentNumber;
|
|
||||||
|
|
||||||
// Animate the number counting up
|
|
||||||
const counterAnimation = setInterval(() => {
|
|
||||||
currentNumber++;
|
|
||||||
octoberDayElement.textContent = currentNumber;
|
|
||||||
|
|
||||||
if (currentNumber >= targetNumber) {
|
|
||||||
clearInterval(counterAnimation);
|
|
||||||
// Once animation is done, set the correct ordinal suffix
|
|
||||||
setOrdinalSuffix(targetNumber);
|
|
||||||
}
|
|
||||||
}, 30);
|
|
||||||
|
|
||||||
// Set the correct ordinal suffix (st, nd, rd, th)
|
|
||||||
function setOrdinalSuffix(number) {
|
|
||||||
const ordinal = document.getElementById('ordinal');
|
|
||||||
|
|
||||||
if (number % 100 >= 11 && number % 100 <= 13) {
|
|
||||||
// Special case for 11th, 12th, 13th
|
|
||||||
ordinal.textContent = 'th';
|
|
||||||
} else {
|
|
||||||
switch (number % 10) {
|
|
||||||
case 1:
|
|
||||||
ordinal.textContent = 'st';
|
|
||||||
break;
|
|
||||||
case 2:
|
|
||||||
ordinal.textContent = 'nd';
|
|
||||||
break;
|
|
||||||
case 3:
|
|
||||||
ordinal.textContent = 'rd';
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
ordinal.textContent = 'th';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set the page title to include the current October day
|
|
||||||
document.title = `October ${number}${ordinal.textContent}, 2019`;
|
|
||||||
|
|
||||||
// Setup SMS share button
|
|
||||||
setupShareButton(number, ordinal.textContent);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Setup SMS share button
|
|
||||||
function setupShareButton(dayNumber, ordinalSuffix) {
|
|
||||||
const shareButton = document.getElementById('share-button');
|
|
||||||
|
|
||||||
if (shareButton) {
|
|
||||||
shareButton.addEventListener('click', function() {
|
|
||||||
// Create the message: "happy october xxxxth"
|
|
||||||
const message = `happy october ${dayNumber}${ordinalSuffix}`;
|
|
||||||
|
|
||||||
// Create SMS link with the message
|
|
||||||
const smsLink = `sms:?&body=${encodeURIComponent(message)}`;
|
|
||||||
|
|
||||||
// Open the SMS app
|
|
||||||
window.open(smsLink, '_blank');
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
BIN
src/.DS_Store
vendored
Normal file
BIN
src/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
src/app/.DS_Store
vendored
Normal file
BIN
src/app/.DS_Store
vendored
Normal file
Binary file not shown.
50
src/app/_components/post.tsx
Normal file
50
src/app/_components/post.tsx
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
import { api } from "~/trpc/react";
|
||||||
|
|
||||||
|
export function LatestPost() {
|
||||||
|
const [latestPost] = api.post.getLatest.useSuspenseQuery();
|
||||||
|
|
||||||
|
const utils = api.useUtils();
|
||||||
|
const [name, setName] = useState("");
|
||||||
|
const createPost = api.post.create.useMutation({
|
||||||
|
onSuccess: async () => {
|
||||||
|
await utils.post.invalidate();
|
||||||
|
setName("");
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full max-w-xs">
|
||||||
|
{latestPost ? (
|
||||||
|
<p className="truncate">Your most recent post: {latestPost.name}</p>
|
||||||
|
) : (
|
||||||
|
<p>You have no posts yet.</p>
|
||||||
|
)}
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
createPost.mutate({ name });
|
||||||
|
}}
|
||||||
|
className="flex flex-col gap-2"
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Title"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
className="w-full rounded-full bg-white/10 px-4 py-2 text-white"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="rounded-full bg-white/10 px-10 py-3 font-semibold transition hover:bg-white/20"
|
||||||
|
disabled={createPost.isPending}
|
||||||
|
>
|
||||||
|
{createPost.isPending ? "Submitting..." : "Submit"}
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
43
src/app/layout.tsx
Normal file
43
src/app/layout.tsx
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
import "~/styles/globals.css";
|
||||||
|
|
||||||
|
import { type Metadata } from "next";
|
||||||
|
import { Inter, Playfair_Display } from "next/font/google";
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: "October Today",
|
||||||
|
description: "October Today",
|
||||||
|
icons: [{ rel: "icon", url: "/favicon.ico" }],
|
||||||
|
};
|
||||||
|
|
||||||
|
const inter = Inter({
|
||||||
|
subsets: ["latin"],
|
||||||
|
variable: "--font-sans",
|
||||||
|
});
|
||||||
|
|
||||||
|
const playfair = Playfair_Display({
|
||||||
|
subsets: ["latin"],
|
||||||
|
variable: "--font-heading",
|
||||||
|
});
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{ children: React.ReactNode }>) {
|
||||||
|
return (
|
||||||
|
<html lang="en" className={`${inter.variable} ${playfair.variable}`}>
|
||||||
|
<body>
|
||||||
|
<div className="pointer-events-none fixed inset-0 -z-10 flex items-center justify-center overflow-hidden">
|
||||||
|
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
|
||||||
|
<div className="animate-blob h-[800px] w-[800px] rounded-full bg-neutral-400/40 blur-3xl dark:bg-neutral-500/30"></div>
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
{process.env.NEXT_PUBLIC_UMAMI_URL && process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID && (
|
||||||
|
<script
|
||||||
|
defer
|
||||||
|
src={process.env.NEXT_PUBLIC_UMAMI_URL}
|
||||||
|
data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}
|
||||||
|
></script>
|
||||||
|
)}
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
9
src/app/page.tsx
Normal file
9
src/app/page.tsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import OctoberCounter from "~/components/OctoberCounter";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<main className="flex min-h-screen flex-col items-center justify-center p-4">
|
||||||
|
<OctoberCounter />
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
159
src/components/OctoberCounter.tsx
Normal file
159
src/components/OctoberCounter.tsx
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { Button } from "~/components/ui/button";
|
||||||
|
import { Card, CardContent } from "~/components/ui/card";
|
||||||
|
|
||||||
|
export default function OctoberCounter() {
|
||||||
|
const [day, setDay] = useState(0);
|
||||||
|
const [ordinal, setOrdinal] = useState("th");
|
||||||
|
const [isAnimating, setIsAnimating] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Set the start date - October 1, 2019
|
||||||
|
const startDate = new Date(2019, 9, 1); // Month is 0-indexed, so 9 = October
|
||||||
|
const today = new Date();
|
||||||
|
|
||||||
|
// Calculate days difference
|
||||||
|
const diffTime = Math.abs(today.getTime() - startDate.getTime());
|
||||||
|
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
|
||||||
|
|
||||||
|
// Add 1 because October 1 is the first day
|
||||||
|
const octoberDay = diffDays + 1;
|
||||||
|
|
||||||
|
// Check for API request
|
||||||
|
const urlParams = new URLSearchParams(window.location.search);
|
||||||
|
if (urlParams.get("api") === "json") {
|
||||||
|
const response = {
|
||||||
|
day: octoberDay,
|
||||||
|
ordinal: getOrdinalSuffix(octoberDay),
|
||||||
|
formatted: `${octoberDay}${getOrdinalSuffix(octoberDay)}`,
|
||||||
|
text: `happy october ${octoberDay}${getOrdinalSuffix(octoberDay)}`,
|
||||||
|
};
|
||||||
|
|
||||||
|
// Replace entire document body to match legacy behavior exactly
|
||||||
|
document.body.innerHTML = `<pre>${JSON.stringify(response, null, 2)}</pre>`;
|
||||||
|
document.body.style.fontFamily = "monospace";
|
||||||
|
document.body.style.padding = "20px";
|
||||||
|
document.body.style.backgroundColor = "#f5f5f5";
|
||||||
|
document.body.style.color = "black";
|
||||||
|
return; // Stop animation loop setup
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start animation
|
||||||
|
const targetNumber = octoberDay;
|
||||||
|
let currentNumber = Math.max(1, targetNumber - 50);
|
||||||
|
|
||||||
|
setDay(currentNumber);
|
||||||
|
|
||||||
|
const interval = setInterval(() => {
|
||||||
|
currentNumber++;
|
||||||
|
setDay(currentNumber);
|
||||||
|
|
||||||
|
if (currentNumber >= targetNumber) {
|
||||||
|
clearInterval(interval);
|
||||||
|
setIsAnimating(false);
|
||||||
|
// Set ordinal suffix
|
||||||
|
setOrdinal(getOrdinalSuffix(targetNumber));
|
||||||
|
// Update document title
|
||||||
|
document.title = `October ${targetNumber}${getOrdinalSuffix(targetNumber)}, 2019`;
|
||||||
|
}
|
||||||
|
}, 30);
|
||||||
|
|
||||||
|
return () => clearInterval(interval);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getOrdinalSuffix = (number: number) => {
|
||||||
|
if (number % 100 >= 11 && number % 100 <= 13) {
|
||||||
|
return "th";
|
||||||
|
}
|
||||||
|
switch (number % 10) {
|
||||||
|
case 1:
|
||||||
|
return "st";
|
||||||
|
case 2:
|
||||||
|
return "nd";
|
||||||
|
case 3:
|
||||||
|
return "rd";
|
||||||
|
default:
|
||||||
|
return "th";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleShare = () => {
|
||||||
|
const message = `happy october ${day}${ordinal}`;
|
||||||
|
const smsLink = `sms:?&body=${encodeURIComponent(message)}`;
|
||||||
|
window.open(smsLink, "_blank");
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="group relative z-10 mx-auto mb-8 w-full max-w-[600px] overflow-hidden rounded-3xl border-none bg-background/80 shadow-sm backdrop-blur-md transition-all duration-300 hover:-translate-y-[5px] hover:shadow-[0_15px_40px_rgba(0,0,0,0.08)]">
|
||||||
|
<div className="absolute inset-0 -z-10 bg-gradient-to-br from-transparent from-0% via-white/5 via-50% to-transparent to-100% opacity-0 transition-opacity duration-300 group-hover:opacity-100"></div>
|
||||||
|
<CardContent className="p-8 sm:p-12 text-center">
|
||||||
|
<h1 className="mb-8 text-2xl font-medium tracking-tight sm:text-[2rem]">Today is</h1>
|
||||||
|
|
||||||
|
<div className="date my-8">
|
||||||
|
<h2 className="mb-1 text-[2.5rem] tracking-tight sm:text-[3.5rem] leading-none">
|
||||||
|
October{" "}
|
||||||
|
<span className="relative inline-block font-bold text-primary">
|
||||||
|
{day}
|
||||||
|
<span className="absolute bottom-[-5px] left-0 h-[3px] w-full origin-left scale-x-0 bg-primary transition-transform duration-300 ease-out group-hover:scale-x-100"></span>
|
||||||
|
</span>
|
||||||
|
<sup className="text-[0.6em]">{ordinal}</sup>
|
||||||
|
</h2>
|
||||||
|
<p className="year text-2xl tracking-tight text-muted-foreground sm:text-[1.5rem]">2019.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="buttons mt-6 flex flex-col justify-center gap-3 sm:flex-row sm:gap-2">
|
||||||
|
<Button
|
||||||
|
onClick={handleShare}
|
||||||
|
className="rounded-xl gap-2 transition-all duration-200 hover:-translate-y-[2px] group/btn"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="18"
|
||||||
|
height="18"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className="transition-transform duration-200 group-hover/btn:-translate-y-[2px]"
|
||||||
|
>
|
||||||
|
<path d="M7 11l5-5 5 5" />
|
||||||
|
<path d="M12 6v13" />
|
||||||
|
</svg>
|
||||||
|
Share via SMS
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
asChild
|
||||||
|
className="rounded-xl gap-2 transition-all duration-200 hover:-translate-y-[2px] group/link cursor-pointer"
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
width="18"
|
||||||
|
height="18"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
className="transition-transform duration-200 group-hover/link:rotate-12"
|
||||||
|
>
|
||||||
|
<circle cx="12" cy="12" r="10" />
|
||||||
|
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
||||||
|
<path d="M12 17h.01" />
|
||||||
|
</svg>
|
||||||
|
Why?
|
||||||
|
</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
64
src/components/ui/button.tsx
Normal file
64
src/components/ui/button.tsx
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
|
import { Slot } from "radix-ui"
|
||||||
|
|
||||||
|
import { cn } from "~/lib/utils"
|
||||||
|
|
||||||
|
const buttonVariants = cva(
|
||||||
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
|
{
|
||||||
|
variants: {
|
||||||
|
variant: {
|
||||||
|
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
|
destructive:
|
||||||
|
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
|
outline:
|
||||||
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||||
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
ghost:
|
||||||
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
|
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||||
|
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
|
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
icon: "size-9",
|
||||||
|
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
|
||||||
|
"icon-sm": "size-8",
|
||||||
|
"icon-lg": "size-10",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
variant: "default",
|
||||||
|
size: "default",
|
||||||
|
},
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
function Button({
|
||||||
|
className,
|
||||||
|
variant = "default",
|
||||||
|
size = "default",
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot.Root : "button"
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Comp
|
||||||
|
data-slot="button"
|
||||||
|
data-variant={variant}
|
||||||
|
data-size={size}
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Button, buttonVariants }
|
||||||
92
src/components/ui/card.tsx
Normal file
92
src/components/ui/card.tsx
Normal file
@@ -0,0 +1,92 @@
|
|||||||
|
import * as React from "react"
|
||||||
|
|
||||||
|
import { cn } from "~/lib/utils"
|
||||||
|
|
||||||
|
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card"
|
||||||
|
className={cn(
|
||||||
|
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-header"
|
||||||
|
className={cn(
|
||||||
|
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-title"
|
||||||
|
className={cn("leading-none font-semibold", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-action"
|
||||||
|
className={cn(
|
||||||
|
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-content"
|
||||||
|
className={cn("px-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardAction,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
}
|
||||||
44
src/env.ts
Normal file
44
src/env.ts
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import { createEnv } from "@t3-oss/env-nextjs";
|
||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
export const env = createEnv({
|
||||||
|
/**
|
||||||
|
* Specify your server-side environment variables schema here. This way you can ensure the app
|
||||||
|
* isn't built with invalid env vars.
|
||||||
|
*/
|
||||||
|
server: {
|
||||||
|
NODE_ENV: z.enum(["development", "test", "production"]),
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Specify your client-side environment variables schema here. This way you can ensure the app
|
||||||
|
* isn't built with invalid env vars. To expose them to the client, prefix them with
|
||||||
|
* `NEXT_PUBLIC_`.
|
||||||
|
*/
|
||||||
|
client: {
|
||||||
|
// NEXT_PUBLIC_CLIENTVAR: z.string(),
|
||||||
|
NEXT_PUBLIC_UMAMI_WEBSITE_ID: z.string().optional(),
|
||||||
|
NEXT_PUBLIC_UMAMI_URL: z.string().url().optional(),
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
|
||||||
|
* middlewares) or client-side so we need to destruct manually.
|
||||||
|
*/
|
||||||
|
runtimeEnv: {
|
||||||
|
NODE_ENV: process.env.NODE_ENV,
|
||||||
|
// NEXT_PUBLIC_CLIENTVAR: process.env.NEXT_PUBLIC_CLIENTVAR,
|
||||||
|
NEXT_PUBLIC_UMAMI_WEBSITE_ID: process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID,
|
||||||
|
NEXT_PUBLIC_UMAMI_URL: process.env.NEXT_PUBLIC_UMAMI_URL,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially
|
||||||
|
* useful for Docker builds.
|
||||||
|
*/
|
||||||
|
skipValidation: !!process.env.SKIP_ENV_VALIDATION,
|
||||||
|
/**
|
||||||
|
* Makes it so that empty strings are treated as undefined. `SOME_VAR: z.string()` and
|
||||||
|
* `SOME_VAR=''` will throw an error.
|
||||||
|
*/
|
||||||
|
emptyStringAsUndefined: true,
|
||||||
|
});
|
||||||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
23
src/server/api/root.ts
Normal file
23
src/server/api/root.ts
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
import { postRouter } from "~/server/api/routers/post";
|
||||||
|
import { createCallerFactory, createTRPCRouter } from "~/server/api/trpc";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is the primary router for your server.
|
||||||
|
*
|
||||||
|
* All routers added in /api/routers should be manually added here.
|
||||||
|
*/
|
||||||
|
export const appRouter = createTRPCRouter({
|
||||||
|
post: postRouter,
|
||||||
|
});
|
||||||
|
|
||||||
|
// export type definition of API
|
||||||
|
export type AppRouter = typeof appRouter;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a server-side caller for the tRPC API.
|
||||||
|
* @example
|
||||||
|
* const trpc = createCaller(createContext);
|
||||||
|
* const res = await trpc.post.all();
|
||||||
|
* ^? Post[]
|
||||||
|
*/
|
||||||
|
export const createCaller = createCallerFactory(appRouter);
|
||||||
40
src/server/api/routers/post.ts
Normal file
40
src/server/api/routers/post.ts
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
import { z } from "zod";
|
||||||
|
|
||||||
|
import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
|
||||||
|
|
||||||
|
// Mocked DB
|
||||||
|
interface Post {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
}
|
||||||
|
const posts: Post[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
name: "Hello World",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export const postRouter = createTRPCRouter({
|
||||||
|
hello: publicProcedure
|
||||||
|
.input(z.object({ text: z.string() }))
|
||||||
|
.query(({ input }) => {
|
||||||
|
return {
|
||||||
|
greeting: `Hello ${input.text}`,
|
||||||
|
};
|
||||||
|
}),
|
||||||
|
|
||||||
|
create: publicProcedure
|
||||||
|
.input(z.object({ name: z.string().min(1) }))
|
||||||
|
.mutation(async ({ input }) => {
|
||||||
|
const post: Post = {
|
||||||
|
id: posts.length + 1,
|
||||||
|
name: input.name,
|
||||||
|
};
|
||||||
|
posts.push(post);
|
||||||
|
return post;
|
||||||
|
}),
|
||||||
|
|
||||||
|
getLatest: publicProcedure.query(() => {
|
||||||
|
return posts.at(-1) ?? null;
|
||||||
|
}),
|
||||||
|
});
|
||||||
103
src/server/api/trpc.ts
Normal file
103
src/server/api/trpc.ts
Normal file
@@ -0,0 +1,103 @@
|
|||||||
|
/**
|
||||||
|
* YOU PROBABLY DON'T NEED TO EDIT THIS FILE, UNLESS:
|
||||||
|
* 1. You want to modify request context (see Part 1).
|
||||||
|
* 2. You want to create a new middleware or type of procedure (see Part 3).
|
||||||
|
*
|
||||||
|
* TL;DR - This is where all the tRPC server stuff is created and plugged in. The pieces you will
|
||||||
|
* need to use are documented accordingly near the end.
|
||||||
|
*/
|
||||||
|
import { initTRPC } from "@trpc/server";
|
||||||
|
import superjson from "superjson";
|
||||||
|
import { ZodError } from "zod";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. CONTEXT
|
||||||
|
*
|
||||||
|
* This section defines the "contexts" that are available in the backend API.
|
||||||
|
*
|
||||||
|
* These allow you to access things when processing a request, like the database, the session, etc.
|
||||||
|
*
|
||||||
|
* This helper generates the "internals" for a tRPC context. The API handler and RSC clients each
|
||||||
|
* wrap this and provides the required context.
|
||||||
|
*
|
||||||
|
* @see https://trpc.io/docs/server/context
|
||||||
|
*/
|
||||||
|
export const createTRPCContext = async (opts: { headers: Headers }) => {
|
||||||
|
return {
|
||||||
|
...opts,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 2. INITIALIZATION
|
||||||
|
*
|
||||||
|
* This is where the tRPC API is initialized, connecting the context and transformer. We also parse
|
||||||
|
* ZodErrors so that you get typesafety on the frontend if your procedure fails due to validation
|
||||||
|
* errors on the backend.
|
||||||
|
*/
|
||||||
|
const t = initTRPC.context<typeof createTRPCContext>().create({
|
||||||
|
transformer: superjson,
|
||||||
|
errorFormatter({ shape, error }) {
|
||||||
|
return {
|
||||||
|
...shape,
|
||||||
|
data: {
|
||||||
|
...shape.data,
|
||||||
|
zodError:
|
||||||
|
error.cause instanceof ZodError ? error.cause.flatten() : null,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Create a server-side caller.
|
||||||
|
*
|
||||||
|
* @see https://trpc.io/docs/server/server-side-calls
|
||||||
|
*/
|
||||||
|
export const createCallerFactory = t.createCallerFactory;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
|
||||||
|
*
|
||||||
|
* These are the pieces you use to build your tRPC API. You should import these a lot in the
|
||||||
|
* "/src/server/api/routers" directory.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is how you create new routers and sub-routers in your tRPC API.
|
||||||
|
*
|
||||||
|
* @see https://trpc.io/docs/router
|
||||||
|
*/
|
||||||
|
export const createTRPCRouter = t.router;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Middleware for timing procedure execution and adding an artificial delay in development.
|
||||||
|
*
|
||||||
|
* You can remove this if you don't like it, but it can help catch unwanted waterfalls by simulating
|
||||||
|
* network latency that would occur in production but not in local development.
|
||||||
|
*/
|
||||||
|
const timingMiddleware = t.middleware(async ({ next, path }) => {
|
||||||
|
const start = Date.now();
|
||||||
|
|
||||||
|
if (t._config.isDev) {
|
||||||
|
// artificial delay in dev
|
||||||
|
const waitMs = Math.floor(Math.random() * 400) + 100;
|
||||||
|
await new Promise((resolve) => setTimeout(resolve, waitMs));
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = await next();
|
||||||
|
|
||||||
|
const end = Date.now();
|
||||||
|
console.log(`[TRPC] ${path} took ${end - start}ms to execute`);
|
||||||
|
|
||||||
|
return result;
|
||||||
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Public (unauthenticated) procedure
|
||||||
|
*
|
||||||
|
* This is the base piece you use to build new queries and mutations on your tRPC API. It does not
|
||||||
|
* guarantee that a user querying is authorized, but you can still access user session data if they
|
||||||
|
* are logged in.
|
||||||
|
*/
|
||||||
|
export const publicProcedure = t.procedure.use(timingMiddleware);
|
||||||
217
src/styles/globals.css
Normal file
217
src/styles/globals.css
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@plugin "tailwindcss-animate";
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--font-sans: var(--font-sans), ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--font-heading: var(--font-heading), ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||||
|
|
||||||
|
--animate-blob: blob 7s infinite;
|
||||||
|
|
||||||
|
@keyframes blob {
|
||||||
|
0% {
|
||||||
|
transform: translate(0px, 0px) scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
33% {
|
||||||
|
transform: translate(30px, -50px) scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
66% {
|
||||||
|
transform: translate(-20px, 20px) scale(0.9);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate(0px, 0px) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base styles */
|
||||||
|
body {
|
||||||
|
background-size: 20px 20px;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--radius-xs: calc(var(--radius) - 8px);
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
--radius-2xl: calc(var(--radius) + 8px);
|
||||||
|
--radius-3xl: calc(var(--radius) + 12px);
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
|
||||||
|
/* Font Family utilities */
|
||||||
|
--font-sans: var(--font-sans);
|
||||||
|
--font-heading: var(--font-heading);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--radius: 1rem;
|
||||||
|
/* 16px base radius */
|
||||||
|
|
||||||
|
/* Light mode variables - Monochrome Zinc */
|
||||||
|
--background: hsl(0, 0%, 100%);
|
||||||
|
/* #FFFFFF */
|
||||||
|
--foreground: hsl(240, 10%, 3.9%);
|
||||||
|
/* #09090B */
|
||||||
|
--card: hsl(0, 0%, 100%);
|
||||||
|
/* #FFFFFF */
|
||||||
|
--card-foreground: hsl(240, 10%, 3.9%);
|
||||||
|
/* #09090B */
|
||||||
|
--popover: hsl(0, 0%, 100%);
|
||||||
|
/* #FFFFFF */
|
||||||
|
--popover-foreground: hsl(240, 10%, 3.9%);
|
||||||
|
/* #09090B */
|
||||||
|
--primary: hsl(240, 5.9%, 10%);
|
||||||
|
/* #18181B */
|
||||||
|
--primary-foreground: hsl(0, 0%, 98%);
|
||||||
|
/* #FAFAFA */
|
||||||
|
--secondary: hsl(240, 4.8%, 95.9%);
|
||||||
|
/* #F4F4F5 (Zinc-100) used for secondary/muted approx */
|
||||||
|
--secondary-foreground: hsl(240, 5.9%, 10%);
|
||||||
|
/* #18181B */
|
||||||
|
--muted: hsl(240, 4.8%, 95.9%);
|
||||||
|
/* #F4F4F5 */
|
||||||
|
--muted-foreground: hsl(240, 3.8%, 46.1%);
|
||||||
|
/* #71717A */
|
||||||
|
--accent: hsl(240, 4.8%, 95.9%);
|
||||||
|
/* #F4F4F5 */
|
||||||
|
--accent-foreground: hsl(240, 5.9%, 10%);
|
||||||
|
/* #18181B */
|
||||||
|
--destructive: hsl(0, 84.2%, 60.2%);
|
||||||
|
/* #EF4444 */
|
||||||
|
--destructive-foreground: hsl(0, 0%, 98%);
|
||||||
|
/* #FAFAFA */
|
||||||
|
--border: hsl(240, 5.9%, 90%);
|
||||||
|
/* #E4E4E7 */
|
||||||
|
--input: hsl(240, 5.9%, 90%);
|
||||||
|
/* #E4E4E7 */
|
||||||
|
--ring: hsl(240, 5.9%, 10%);
|
||||||
|
/* #18181B */
|
||||||
|
|
||||||
|
--chart-1: hsl(12, 76%, 61%);
|
||||||
|
--chart-2: hsl(173, 58%, 39%);
|
||||||
|
--chart-3: hsl(197, 37%, 24%);
|
||||||
|
--chart-4: hsl(43, 74%, 66%);
|
||||||
|
--chart-5: hsl(27, 87%, 67%);
|
||||||
|
|
||||||
|
--sidebar: hsl(0, 0%, 98%);
|
||||||
|
--sidebar-foreground: hsl(240, 5.3%, 26.1%);
|
||||||
|
--sidebar-primary: hsl(240, 5.9%, 10%);
|
||||||
|
--sidebar-primary-foreground: hsl(0, 0%, 98%);
|
||||||
|
--sidebar-accent: hsl(240, 4.8%, 95.9%);
|
||||||
|
--sidebar-accent-foreground: hsl(240, 5.9%, 10%);
|
||||||
|
--sidebar-border: hsl(220, 13%, 91%);
|
||||||
|
--sidebar-ring: hsl(217.2, 91.2%, 59.8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
/* Dark mode overrides - Monochrome Zinc */
|
||||||
|
--background: hsl(240, 10%, 3.9%);
|
||||||
|
/* #09090B */
|
||||||
|
--foreground: hsl(0, 0%, 98%);
|
||||||
|
/* #FAFAFA */
|
||||||
|
--card: hsl(240, 10%, 3.9%);
|
||||||
|
/* #09090B */
|
||||||
|
--card-foreground: hsl(0, 0%, 98%);
|
||||||
|
/* #FAFAFA */
|
||||||
|
--popover: hsl(240, 10%, 3.9%);
|
||||||
|
/* #09090B */
|
||||||
|
--popover-foreground: hsl(0, 0%, 98%);
|
||||||
|
/* #FAFAFA */
|
||||||
|
--primary: hsl(0, 0%, 98%);
|
||||||
|
/* #FAFAFA */
|
||||||
|
--primary-foreground: hsl(240, 5.9%, 10%);
|
||||||
|
/* #18181B */
|
||||||
|
--secondary: hsl(240, 3.7%, 15.9%);
|
||||||
|
/* #27272A */
|
||||||
|
--secondary-foreground: hsl(0, 0%, 98%);
|
||||||
|
/* #FAFAFA */
|
||||||
|
--muted: hsl(240, 3.7%, 15.9%);
|
||||||
|
/* #27272A */
|
||||||
|
--muted-foreground: hsl(240, 5%, 64.9%);
|
||||||
|
/* #A1A1AA */
|
||||||
|
--accent: hsl(240, 3.7%, 15.9%);
|
||||||
|
/* #27272A */
|
||||||
|
--accent-foreground: hsl(0, 0%, 98%);
|
||||||
|
/* #FAFAFA */
|
||||||
|
--destructive: hsl(0, 62.8%, 30.6%);
|
||||||
|
/* #7F1D1D */
|
||||||
|
--destructive-foreground: hsl(0, 0%, 98%);
|
||||||
|
/* #FAFAFA */
|
||||||
|
--border: hsl(240, 3.7%, 15.9%);
|
||||||
|
/* #27272A */
|
||||||
|
--input: hsl(240, 3.7%, 15.9%);
|
||||||
|
/* #27272A */
|
||||||
|
--ring: hsl(240, 4.9%, 83.9%);
|
||||||
|
/* #D4D4D8 */
|
||||||
|
|
||||||
|
--chart-1: hsl(220, 70%, 50%);
|
||||||
|
--chart-2: hsl(160, 60%, 45%);
|
||||||
|
--chart-3: hsl(30, 80%, 55%);
|
||||||
|
--chart-4: hsl(280, 65%, 60%);
|
||||||
|
--chart-5: hsl(340, 75%, 55%);
|
||||||
|
|
||||||
|
--sidebar: hsl(240, 5.9%, 10%);
|
||||||
|
--sidebar-foreground: hsl(240, 4.8%, 95.9%);
|
||||||
|
--sidebar-primary: hsl(224.3, 76.3%, 48%);
|
||||||
|
--sidebar-primary-foreground: hsl(0, 0%, 100%);
|
||||||
|
--sidebar-accent: hsl(240, 3.7%, 15.9%);
|
||||||
|
--sidebar-accent-foreground: hsl(240, 4.8%, 95.9%);
|
||||||
|
--sidebar-border: hsl(240, 3.7%, 15.9%);
|
||||||
|
--sidebar-ring: hsl(217.2, 91.2%, 59.8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground font-sans;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
@apply font-heading;
|
||||||
|
}
|
||||||
|
}
|
||||||
74
src/styles/globals.css.bak
Normal file
74
src/styles/globals.css.bak
Normal file
@@ -0,0 +1,74 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
|
||||||
|
@theme {
|
||||||
|
--font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
|
||||||
|
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
|
||||||
|
/* Light mode variables */
|
||||||
|
--color-background: hsl(200, 30%, 97%);
|
||||||
|
--color-foreground: hsl(200, 50%, 20%);
|
||||||
|
--color-card: hsla(0, 0%, 100%, 0.5);
|
||||||
|
--color-card-foreground: hsl(200, 50%, 20%);
|
||||||
|
--color-primary: hsl(200, 85%, 45%);
|
||||||
|
--color-primary-foreground: hsl(0, 0%, 100%);
|
||||||
|
--color-secondary: hsl(37, 95%, 58%);
|
||||||
|
--color-secondary-foreground: hsl(200, 50%, 20%);
|
||||||
|
--color-muted: hsl(200, 30%, 96%);
|
||||||
|
--color-muted-foreground: hsl(200, 30%, 40%);
|
||||||
|
--color-accent: hsl(200, 85%, 45%);
|
||||||
|
--color-accent-foreground: hsl(0, 0%, 100%);
|
||||||
|
--color-border: hsla(200, 30%, 90%, 0.2);
|
||||||
|
--radius: 0.75rem;
|
||||||
|
|
||||||
|
--animate-gradient-move-1: gradient-move-1 30s ease-in-out infinite;
|
||||||
|
|
||||||
|
@keyframes gradient-move-1 {
|
||||||
|
0% {
|
||||||
|
transform: translate(-50%, -50%) scale(1) rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: translate(-50%, -50%) scale(1.05) rotate(90deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translate(-50%, -50%) scale(0.95) rotate(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: translate(-50%, -50%) scale(1.05) rotate(270deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translate(-50%, -50%) scale(1) rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark mode overrides */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--color-background: hsl(200, 30%, 8%);
|
||||||
|
--color-foreground: hsl(200, 20%, 96%);
|
||||||
|
--color-card: hsla(200, 25%, 15%, 0.4);
|
||||||
|
--color-card-foreground: hsl(200, 15%, 85%);
|
||||||
|
--color-primary: hsl(200, 70%, 40%);
|
||||||
|
--color-primary-foreground: hsl(0, 0%, 100%);
|
||||||
|
--color-secondary: hsl(37, 92%, 50%);
|
||||||
|
--color-secondary-foreground: hsl(200, 20%, 96%);
|
||||||
|
--color-muted: hsl(200, 30%, 20%);
|
||||||
|
--color-muted-foreground: hsl(200, 30%, 65%);
|
||||||
|
--color-accent: hsl(200, 70%, 40%);
|
||||||
|
--color-accent-foreground: hsl(0, 0%, 100%);
|
||||||
|
--color-border: hsla(200, 30%, 20%, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Base styles */
|
||||||
|
body {
|
||||||
|
background-color: var(--color-background);
|
||||||
|
color: var(--color-foreground);
|
||||||
|
background-image: url('/grid.svg');
|
||||||
|
background-size: 20px 20px;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
25
src/trpc/query-client.ts
Normal file
25
src/trpc/query-client.ts
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import {
|
||||||
|
defaultShouldDehydrateQuery,
|
||||||
|
QueryClient,
|
||||||
|
} from "@tanstack/react-query";
|
||||||
|
import SuperJSON from "superjson";
|
||||||
|
|
||||||
|
export const createQueryClient = () =>
|
||||||
|
new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
// With SSR, we usually want to set some default staleTime
|
||||||
|
// above 0 to avoid refetching immediately on the client
|
||||||
|
staleTime: 30 * 1000,
|
||||||
|
},
|
||||||
|
dehydrate: {
|
||||||
|
serializeData: SuperJSON.serialize,
|
||||||
|
shouldDehydrateQuery: (query) =>
|
||||||
|
defaultShouldDehydrateQuery(query) ||
|
||||||
|
query.state.status === "pending",
|
||||||
|
},
|
||||||
|
hydrate: {
|
||||||
|
deserializeData: SuperJSON.deserialize,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
78
src/trpc/react.tsx
Normal file
78
src/trpc/react.tsx
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { QueryClientProvider, type QueryClient } from "@tanstack/react-query";
|
||||||
|
import { httpBatchStreamLink, loggerLink } from "@trpc/client";
|
||||||
|
import { createTRPCReact } from "@trpc/react-query";
|
||||||
|
import { type inferRouterInputs, type inferRouterOutputs } from "@trpc/server";
|
||||||
|
import { useState } from "react";
|
||||||
|
import SuperJSON from "superjson";
|
||||||
|
|
||||||
|
import { type AppRouter } from "~/server/api/root";
|
||||||
|
import { createQueryClient } from "./query-client";
|
||||||
|
|
||||||
|
let clientQueryClientSingleton: QueryClient | undefined = undefined;
|
||||||
|
const getQueryClient = () => {
|
||||||
|
if (typeof window === "undefined") {
|
||||||
|
// Server: always make a new query client
|
||||||
|
return createQueryClient();
|
||||||
|
}
|
||||||
|
// Browser: use singleton pattern to keep the same query client
|
||||||
|
clientQueryClientSingleton ??= createQueryClient();
|
||||||
|
|
||||||
|
return clientQueryClientSingleton;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const api = createTRPCReact<AppRouter>();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Inference helper for inputs.
|
||||||
|
*
|
||||||
|
* @example type HelloInput = RouterInputs['example']['hello']
|
||||||
|
*/
|
||||||
|
export type RouterInputs = inferRouterInputs<AppRouter>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Inference helper for outputs.
|
||||||
|
*
|
||||||
|
* @example type HelloOutput = RouterOutputs['example']['hello']
|
||||||
|
*/
|
||||||
|
export type RouterOutputs = inferRouterOutputs<AppRouter>;
|
||||||
|
|
||||||
|
export function TRPCReactProvider(props: { children: React.ReactNode }) {
|
||||||
|
const queryClient = getQueryClient();
|
||||||
|
|
||||||
|
const [trpcClient] = useState(() =>
|
||||||
|
api.createClient({
|
||||||
|
links: [
|
||||||
|
loggerLink({
|
||||||
|
enabled: (op) =>
|
||||||
|
process.env.NODE_ENV === "development" ||
|
||||||
|
(op.direction === "down" && op.result instanceof Error),
|
||||||
|
}),
|
||||||
|
httpBatchStreamLink({
|
||||||
|
transformer: SuperJSON,
|
||||||
|
url: getBaseUrl() + "/api/trpc",
|
||||||
|
headers: () => {
|
||||||
|
const headers = new Headers();
|
||||||
|
headers.set("x-trpc-source", "nextjs-react");
|
||||||
|
return headers;
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<api.Provider client={trpcClient} queryClient={queryClient}>
|
||||||
|
{props.children}
|
||||||
|
</api.Provider>
|
||||||
|
</QueryClientProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getBaseUrl() {
|
||||||
|
if (typeof window !== "undefined") return window.location.origin;
|
||||||
|
if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`;
|
||||||
|
return `http://localhost:${process.env.PORT ?? 3000}`;
|
||||||
|
}
|
||||||
30
src/trpc/server.ts
Normal file
30
src/trpc/server.ts
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import "server-only";
|
||||||
|
|
||||||
|
import { createHydrationHelpers } from "@trpc/react-query/rsc";
|
||||||
|
import { headers } from "next/headers";
|
||||||
|
import { cache } from "react";
|
||||||
|
|
||||||
|
import { createCaller, type AppRouter } from "~/server/api/root";
|
||||||
|
import { createTRPCContext } from "~/server/api/trpc";
|
||||||
|
import { createQueryClient } from "./query-client";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This wraps the `createTRPCContext` helper and provides the required context for the tRPC API when
|
||||||
|
* handling a tRPC call from a React Server Component.
|
||||||
|
*/
|
||||||
|
const createContext = cache(async () => {
|
||||||
|
const heads = new Headers(await headers());
|
||||||
|
heads.set("x-trpc-source", "rsc");
|
||||||
|
|
||||||
|
return createTRPCContext({
|
||||||
|
headers: heads,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
const getQueryClient = cache(createQueryClient);
|
||||||
|
const caller = createCaller(createContext);
|
||||||
|
|
||||||
|
export const { trpc: api, HydrateClient } = createHydrationHelpers<AppRouter>(
|
||||||
|
caller,
|
||||||
|
getQueryClient,
|
||||||
|
);
|
||||||
323
style.css
323
style.css
@@ -1,323 +0,0 @@
|
|||||||
:root {
|
|
||||||
/* Light mode variables */
|
|
||||||
--background: hsl(200, 30%, 97%);
|
|
||||||
--foreground: hsl(200, 50%, 20%);
|
|
||||||
--card: hsla(0, 0%, 100%, 0.5);
|
|
||||||
--card-foreground: hsl(200, 50%, 20%);
|
|
||||||
--primary: hsl(200, 85%, 45%);
|
|
||||||
--primary-foreground: hsl(0, 0%, 100%);
|
|
||||||
--secondary: hsl(37, 95%, 58%); /* Amber/orange color */
|
|
||||||
--secondary-foreground: hsl(200, 50%, 20%);
|
|
||||||
--muted: hsl(200, 30%, 96%);
|
|
||||||
--muted-foreground: hsl(200, 30%, 40%);
|
|
||||||
--accent: hsl(200, 85%, 45%);
|
|
||||||
--accent-foreground: hsl(0, 0%, 100%);
|
|
||||||
--border: hsla(200, 30%, 90%, 0.2);
|
|
||||||
--radius: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--background: hsl(200, 30%, 8%);
|
|
||||||
--foreground: hsl(200, 20%, 96%);
|
|
||||||
--card: hsla(200, 25%, 15%, 0.4);
|
|
||||||
--card-foreground: hsl(200, 15%, 85%);
|
|
||||||
--primary: hsl(200, 70%, 40%);
|
|
||||||
--primary-foreground: hsl(0, 0%, 100%);
|
|
||||||
--secondary: hsl(37, 92%, 50%); /* Darker amber for dark mode */
|
|
||||||
--secondary-foreground: hsl(200, 20%, 96%);
|
|
||||||
--muted: hsl(200, 30%, 20%);
|
|
||||||
--muted-foreground: hsl(200, 30%, 65%);
|
|
||||||
--accent: hsl(200, 70%, 40%);
|
|
||||||
--accent-foreground: hsl(0, 0%, 100%);
|
|
||||||
--border: hsla(200, 30%, 20%, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-color: var(--border);
|
|
||||||
font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gradient-move-1 {
|
|
||||||
0% {
|
|
||||||
transform: translate(-50%, -50%) scale(1) rotate(0deg);
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
transform: translate(-50%, -50%) scale(1.05) rotate(90deg);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translate(-50%, -50%) scale(0.95) rotate(180deg);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: translate(-50%, -50%) scale(1.05) rotate(270deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(-50%, -50%) scale(1) rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes gradient-move-2 {
|
|
||||||
0% {
|
|
||||||
transform: translate(-50%, -50%) scale(0.95) rotate(0deg);
|
|
||||||
}
|
|
||||||
25% {
|
|
||||||
transform: translate(-50%, -50%) scale(1) rotate(-90deg);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: translate(-50%, -50%) scale(1.05) rotate(-180deg);
|
|
||||||
}
|
|
||||||
75% {
|
|
||||||
transform: translate(-50%, -50%) scale(1) rotate(-270deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translate(-50%, -50%) scale(0.95) rotate(-360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
||||||
background-color: var(--background);
|
|
||||||
color: var(--foreground);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 100vh;
|
|
||||||
text-align: center;
|
|
||||||
padding: 20px;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
isolation: isolate;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dot grid background */
|
|
||||||
body {
|
|
||||||
background-image: url('grid.svg');
|
|
||||||
background-size: 20px 20px;
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Spinning orb gradient */
|
|
||||||
.orb {
|
|
||||||
position: fixed;
|
|
||||||
width: 120vmax;
|
|
||||||
height: 120vmax;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
border-radius: 50%;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: -10;
|
|
||||||
will-change: transform;
|
|
||||||
filter: blur(40px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.orb.primary {
|
|
||||||
background: radial-gradient(circle, var(--primary) 0%, transparent 70%);
|
|
||||||
opacity: 0.4;
|
|
||||||
animation: gradient-move-1 30s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
background-color: var(--card);
|
|
||||||
color: var(--card-foreground);
|
|
||||||
padding: 50px;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
|
|
||||||
max-width: 600px;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
backdrop-filter: blur(10px);
|
|
||||||
-webkit-backdrop-filter: blur(10px);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
z-index: -1;
|
|
||||||
border-radius: inherit;
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom right,
|
|
||||||
transparent 0%,
|
|
||||||
rgba(255, 255, 255, 0.05) 50%,
|
|
||||||
transparent 100%
|
|
||||||
);
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container:hover {
|
|
||||||
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
|
|
||||||
transform: translateY(-5px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.container:hover::before {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
font-weight: 500;
|
|
||||||
color: var(--foreground);
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date {
|
|
||||||
margin: 30px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 3.5rem;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
color: var(--foreground);
|
|
||||||
letter-spacing: -0.03em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#october-day {
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--primary);
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#october-day::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: -5px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 3px;
|
|
||||||
background-color: var(--primary);
|
|
||||||
transform: scaleX(0);
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.container:hover #october-day::after {
|
|
||||||
transform: scaleX(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.year {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
color: var(--muted-foreground);
|
|
||||||
letter-spacing: -0.02em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
font-style: italic;
|
|
||||||
margin-top: 20px;
|
|
||||||
color: var(--muted-foreground);
|
|
||||||
}
|
|
||||||
|
|
||||||
footer {
|
|
||||||
color: var(--muted-foreground);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
margin-top: 20px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 12px;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-button {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
background-color: var(--primary);
|
|
||||||
color: var(--primary-foreground);
|
|
||||||
border: none;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
padding: 10px 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-button:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-button:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-button svg {
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-button:hover svg {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.why-button {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px;
|
|
||||||
background-color: var(--secondary);
|
|
||||||
color: var(--secondary-foreground);
|
|
||||||
border: none;
|
|
||||||
border-radius: var(--radius);
|
|
||||||
padding: 10px 16px;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 500;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.why-button:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.why-button:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.why-button svg {
|
|
||||||
transition: transform 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.why-button:hover svg {
|
|
||||||
transform: rotate(12deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
.container {
|
|
||||||
padding: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 2.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.share-button, .why-button {
|
|
||||||
padding: 8px 12px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.buttons {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
53
tsconfig.json
Normal file
53
tsconfig.json
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
/* Base Options: */
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"target": "es2022",
|
||||||
|
"allowJs": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"isolatedModules": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
/* Strictness */
|
||||||
|
"strict": true,
|
||||||
|
"noUncheckedIndexedAccess": true,
|
||||||
|
"checkJs": true,
|
||||||
|
/* Bundled projects */
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"ES2022"
|
||||||
|
],
|
||||||
|
"noEmit": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"incremental": true,
|
||||||
|
/* Path Aliases */
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"~/*": [
|
||||||
|
"./src/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
"**/*.cjs",
|
||||||
|
"**/*.js",
|
||||||
|
".next/types/**/*.ts",
|
||||||
|
".next/dev/types/**/*.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"generated"
|
||||||
|
]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user