yifanzz

[Project Name]

Every time you choose to apply a rule(s), explicitly state the rule(s) in the output. You can abbreviate the rule description to a single word or phrase.

Project Context

[Brief description ]

• [more description]
• [more description]
• [more description]

yifanzz

Git Usage

• use the following prefixes for commit messages followed by a colon and a space:
  • "fix" for bug fixes
  • "feat" for new features
  • "perf" for performance improvements
  • "docs" for documentation changes
  • "style" for formatting changes
  • "refactor" for code refactoring
  • "test" for adding missing tests
• "chore" for chore tasks

steven-tey

import { BlurImage, YouTube } from "@dub/ui";
import { nFormatter } from "@dub/utils";
import { Eye, UserCheck, Video } from "lucide-react";
import { Suspense } from "react";

export function YoutubeChannel({ id }: { id: string }) {
  return (
    <Suspense fallback={<div className="not-prose grid gap-4"></div>}>
      <YoutubeChannelRSC id={id} />
    </Suspense>

samselikoff

diff --git a/app/components/entry-form.tsx b/app/components/entry-form.tsx
index 50e5aeb..84c64fc 100644
--- a/app/components/entry-form.tsx
+++ b/app/components/entry-form.tsx
@@ -1,6 +1,6 @@
-import { useFetcher } from "@remix-run/react";
+import { Form, useSubmit } from "@remix-run/react";
 import { format } from "date-fns";
-import { useEffect, useRef } from "react";
+import { useRef } from "react";

alexanderson1993

"use client";
import * as React from "react";
import { Input } from "@/components/ui/Input";
import { Button } from "@/components/ui/Button";
import {
  AlertDialog,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,

ryanflorence

import type { V2_HtmlMetaDescriptor, V2_MetaFunction } from "@remix-run/node";

export const mergeMeta = (
  overrideFn: V2_MetaFunction,
  appendFn?: V2_MetaFunction,
): V2_MetaFunction => {
  return arg => {
    // get meta from parent routes
    let mergedMeta = arg.matches.reduce((acc, match) => {
      return acc.concat(match.meta || []);

mhaidarhanif

💡 HOWTO: Debug your server-side Remix code using VSCode

✨ New in Remix v1.3.5

The latest release of Remix fixes sourcemaps so you no longer need to use any hacks to set breakpoints in your route modules. Simply start the debugger and Remix will hit the breakpoint in your loaders and actions.

Debugging session even survives edits and Live Reload.

knowler

Fontsource with Remix

Fontsource is designed to work with projects that bundle their CSS. You import their stylesheet and the bundler will place the fonts in your build directory and the CSS file will have the correct URL for the @font-face src.

Remix doesn’t bundle CSS and so while you can import their CSS file and add it to your links, the URL to font will be incorrect. It is still possible to use Fontsource with Remix. We just need to create our own @font-face declaration with the correct URL to the font (ideally, one that benefits from Remix’s asset fingerprinting). There’s a bit of manual set up, but once that’s done, you can serve the font on your site and benefit from updates for the font.

1. Install your font:

   npm install --save @fontsource/montserrat

ryanflorence

• 💿 Open up the app and show all the features
• 💿 Build a little todo list from scratch
  • normal forms
    • ship it, it works and the UX is fine
  • iterate to useFetcher to show why you'd bring it in
    • useFetcher is the thing that turns your remix app from a "website" to a "web app", if you're into that terminology.
    • still just forms!
      • progressive enhancement is about two things
        • how the app goes from basic functionality to fancy
• how the developer is able to iterate their code from basic to fancy

diegohaz

What is Ariakit?

Ariakit is the successor of Reakit, an open source library that provides lower-level React components and hooks for building accessible web apps, design systems, and other component libraries.

Why the name change?

Reakit stands for React Toolkit. Ariakit stands for Aria Toolkit, which is better aligned with our goals.

Over the past years, we've been focusing more and more on the ARIA aspects of the library. In the future, we'd like to provide more framework-agnostic utilities.