Skip to content

Instantly share code, notes, and snippets.

Avatar

Ryan Florence ryanflorence

View GitHub Profile
View stage.tsx
// TODO: make `pages` optional and measure the div when unspecified, this will
// allow more normal document flow and make it easier to do both mobile and
// desktop.
import {
createContext,
useCallback,
useContext,
useEffect,
useMemo,
useRef,
View details-menu.tsx
import { useLocation } from "@remix-run/react";
import * as React from "react";
/**
* An enhanced `<details>` component that's intended to be used as a menu (a bit
* like a menu-button).
*/
export let DetailsMenu = React.forwardRef<
HTMLDetailsElement,
React.ComponentPropsWithRef<"details">
View repo-content.ts
import fsp from "fs/promises";
import invariant from "tiny-invariant";
import path from "path";
/**
* Fetches the contents of a file in a repository or from your local disk.
*
* @param ref The GitHub ref, use `"local"` for local docs development
* @param filepath The filepath inside the repo (including "docs/")
* @returns The text of the file
View router.tsx
import "./index.css";
import React from "react";
import ReactDOM from "react-dom";
import {
DataBrowserRouter,
Route,
useLoaderData,
Form,
useNavigation,
} from "react-router-dom";
View routes
/routes
/__landing.tsx -> (layout: __landing.*)
/__landing.index.tsx -> /
/__landing.company.tsx -> /company
/__landing.company.team.tsx -> /company/team
/__landing.company.careers.tsx -> /company/careers
/__landing.docs.doc.$.tsx -> /docs/*
/__auth.tsx -> (layout: _auth.*)
/__auth.login.tsx -> /login
/__auth.signup.tsx -> /signup
View remix-meetup-webapps.md
  • 💿 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
View pending-link.js
View people.tsx
import { useEffect, useRef } from "react";
import {
Form,
useFetcher,
useLoaderData,
useTransition,
} from "remix";
import { arc } from "~/arc.server";
export async function loader() {
View twitter.js
// hard, buggy, incomplete, slower
<button
onClick={async () => {
setLoading(true);
let result = await updateProject({
status: "active"
});
setLoading(false);
setResult(result);
}}
View action.tsx
export let action: ActionFunction = async ({ request, params }) => {
let session = await requireAuthSession(request);
await ensureUserAccount(session.get("auth"));
let data = Object.fromEntries(await request.formData());
invariant(typeof data._action === "string", "_action should be string");
switch (data._action) {
case Actions.CREATE_TASK:
case Actions.UPDATE_TASK_NAME: {