remix-run / remix-website Goto Github PK

Otherwise stripe creates more customers w/ the same email!

Quoting from the blog post Open Sourcing the Remix Website

We invite you to explore and learn from the source code
...
Open sourcing our website allows us to provide a real-world Remix site to learn from

I believe that if one of the ideas is to provide a real-world working site, it would be better to do it with the latest version of Remix.

Currently the website is using 2.5.1

I haven't used Vite so far, I'm waiting for it to become stable-stable to start using it on my projects, but I don't mind giving it a shot if you need help with this upgrade. I love solving issues :)

Would be nice to have a common set of meta tags that we can use/extend. Maybe just a simple function with some defaults.

The main page (_marketing._index.tsx) has a nice set of defaults

export const meta: MetaFunction<typeof loader> = (args) => {
  let { siteUrl } = args.data || {};
  let title = "Remix - Build Better Websites";
  let image = siteUrl ? `${siteUrl}/img/og.1.jpg` : null;
  let description =
    "Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.";
  return metaV1(args, {
    title,
    description,
    "og:url": siteUrl,
    "og:title": title,
    "og:description": description,
    "og:image": image,
    "twitter:card": "summary_large_image",
    "twitter:creator": "@remix_run",
    "twitter:site": "@remix_run",
    "twitter:title": title,
    "twitter:description": description,
    "twitter:image": image,
  });
};

I think we could possibly just extend this.

I've been curious about typesense as an alternative to DocSearch (what we use now). It would also be nice to add search to the react-router website, so curious if this is a good fit for that as well.

Would need to do a little spike work to see what's involved, if it's easier to use, and if it would be easy to migrate to

This suggestion came up in Discord

being able to choose between npn/yarn/pnpm/bun for the install command

I love the way shadcn/ui does this.

What version of Remix are you using?

remix.run

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

1. Access remix.run/docs
2. Click top left algolia search button.
3. Cursor is pointer on the modal.

Expected Behavior

Cursor is default on the modal.

Actual Behavior

Cursor is pointer on the modal.

Algoliasearch modal has [role=button] attribute.
When [role=button], cursor is pointer.
This class is set by TailwindCSS.

But algoliasearch don't set css for cursor.
So add css for cursor, fix that.

Ex.

.DocSearch-Container {
    cursor: auto;
}

The display dates seem to be off by 1 on our blog posts, which is no good. Probably just some faulty logic somewhere

Instead of asking users to go copy/paste their auth token from the dashboard, it'd be neat if we could open the login/purchase page in the browser for them and then call back to a localhost URL with the auth token when they're done. So the new user UX flow would be:

• npm init remix
• open the web browser
• purchase a license
• init script gets the token and finishes

See remix-run/remix#2943

See remix-run/remix#5276

Hey! I was interested in remix and browsed around. After I saw your tweet: https://twitter.com/remix_run/status/1321470965134471171 I did the following:
Clicked buy on the indie license,
Logged in with Github,
Loaded the stripe purchase page, but then backed out (not paying),
loaded remix.run/dashboard and I can see the docs while also having an invite to collaborate here.

Hopefully, if this is not intentional you can catch it early!

Right now you can't get back to the home page on the docs site. The logo takes you to the root of the docs, which is sometimes nice, but maybe not what you'd expect (especially if you came from the home page)

A suggestion from @brophdawg11

we should add some form of loading indicators to the top nav (Docs, Blog, Showcase, Resources). I clicked on one that didn't have a cache entry so it took ~1-2s and there's no visual feedback that my click did anything

useMatches and other cases of matches don't supply any types. With the v2 upgrade, this ended up causing TS to start failing. Added a bunch of @ts-expect-error statements with the intention of coming back and fixing them

If using zod makes this easy, that's great since we already have it in this project. However, avoid using it in any data that ships to the client (so server-side only)

Right now our search bar is inaccessible on mobile. However, ~20% of docs users are accessing the docs on mobile devices (all time analytics)

If if the number is less, it's worth figuring out a way to add the search bar for smaller screen sizes

See remix-run/remix#5291

This line

Should be

-  let repoUrl = "https://github.com/remix-run/react-router";
+  let repoUrl = "https://github.com/remix-run/remix";

For some reason, I can't create a PR, so that's why I'm posting this issue

Stripe lets them cancel any time. We've got automations in convertkit to warn them (to avoid getting a bunch of refund requests after the fact)

• If they cancel within 3 months
  • Deactivate their license
  • Give a special message from the registry instead of just 404, like "Your license has expired, to renew go to https://remix.run/renew/:token"
  • Add convertkit refunded tag

Other cases need to put more thought in:

• cancel after refund period months

  • add convertkit tag
  • add version to license so they can't install passed it
  • remove from any cool education material when we have it if they no longer hold a current license

• renew

  • have endpoint to do it /renew/:key
  • add ck tag

• unused license

  • after some time add ck tag

• team member

  • add ck tag for broadcasts

Need to add at least 20 templates to the templates.yaml file

A few other niceties to add in this one

• Validate with zod
• Add featured or something similar as a flag to determine which template is featured

See remix-run/remix#6127

File vitest.config.mts is the only place where dotenv is used and this is the code excerpt:

let env = dotenv.parse(
  fs.readFileSync(path.resolve(process.cwd(), ".env.example")),
);

As you can see, it has hardcoded the file to .env.example instead of reading from .env.

Too much margin and the font is kinda big. FIx it.

http://www.remix.run and https://www.remix.run should both redirect to https://remix.run

See remix-run/remix#1777

PS: Can't migrate the issue from remix-run/remix since remix-website is not a proposed target.

https://twitter.com/theycallmejpo/status/1460382927745785859

It would be nice to have a combo box on the templates page that allows you to search different tags and possibly template names

All issues but #66 should be closed as they are not applicable anymore.

#19 can be kept open too if you want to enhance the error message, but there's a proper error boundary now.

See how <Form> reads <Form>

From user Alem Tuzlak on Discord:

Just a small suggestion for the remix docs, it would be cool if i went to remix.run/docs/en it would redirect me to the latest version or the main one of the docs instead of me hitting an error boundary. if you go to remix.run/docs it goes to => remix.run/docs/en/main but if you go to remix.run/docs/en it enters an error boundary

https://discord.com/channels/770287896669978684/770287896669978687/1110137964090101760

Expected Behavior:
https://remix.run/en -> redirects to https://remix.run/en/main

Is there a serious showstopper reason to not be using pnpm yet?
(jump to the end to see about the bug from the title of this issue)

• For all these excerpts, assume $ rm -rf node_modules/ has been run prior to the timed command.
• First run was without lock file and second run was always with lock file.
• Verification made while standing on HEAD, which currently is commit f54dbcd

npm

First run: ~55 seconds

$ time npm ci

added 1261 packages, and audited 1262 packages in 54s

10 vulnerabilities (9 moderate, 1 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

real    0m54,574s
user    0m18,137s
sys     0m15,546s

Second run: ~20 seconds

$ time npm ci
[redacted...]
real    0m19,637s
user    0m11,526s
sys     0m8,368s

pnpm

First run: ~40 seconds

$ time pnpm i
Packages: +1168
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1232, reused 1167, downloaded 0, added 1168, done

[redacted...]

Done in 39.5s

real    0m39,637s
user    0m16,913s
sys     0m14,826s

Second run: ~3 seconds

$ time pnpm i
[redacted...]
Done in 2.7s

real    0m2,802s
user    0m8,708s
sys     0m2,670s

yarn

First run: ~113 seconds

$ time yarn install
yarn install v1.22.21
info No lockfile found.
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
[4/5] Linking dependencies...
warning "@docsearch/react > @algolia/[email protected]" has unmet peer dependency "@algolia/client-search@>= 4.9.1 < 6".
warning "@docsearch/react > @algolia/autocomplete-core > @algolia/[email protected]" has unmet peer dependency "search-insights@>= 1 < 3".
warning "@docsearch/react > @algolia/autocomplete-core > @algolia/[email protected]" has unmet peer dependency "@algolia/client-search@>= 4.9.1 < 6".
warning " > @remix-run/[email protected]" has unmet peer dependency "@remix-run/server-runtime@^1.15.0 || ^2.0.0".
[5/5] Building fresh packages...
success Saved lockfile.
Done in 112.08s.

real    1m52,302s
user    0m17,545s
sys     0m4,605s

Second run: ~7 seconds

$ time yarn install

Done in 6.84s.

real    0m7,085s
user    0m8,749s
sys     0m10,127s

Other considerations

• npm requires audit
npm shows "10 vulnerabilities (9 moderate, 1 high)". After running npm audit fix we are left still with "9 moderate severity vulnerabilities". Finally npm audit fix --force gets ride of all the warnings, however it requires further analysis as some packages needed a SemVer major change.

  pnpm produces a clean installation without warnings. However after installing I run pnpm audit just in case, and it found only one vulnerability:

$ pnpm audit
[redacted]
moderate │ xml2js is vulnerable to prototype pollution

• yarn leave us with "unmet peer dependencies"

• both yarn and npm let us use undeclared dependencies
  Whether we install and run with yarn or npm, the server starts and runs ok. However, if we install our dependencies with pnpm, and run the server, we encounter this bug:

Error: Cannot find module 'react-router-dom' imported from 'app/routes/docs.$lang.$ref.tsx'

This happens because the way both yarn and npm resolve peer dependencies, which is wrong, as it let us use packages that we haven't explicitly declared in our package.json.

I vote we jump head first to start using pnpm. If no arguments against are given, I'll do the PR.

As you can see, dark mode via system preferences does not persist well

I believe it's due to this script, which can get unsynchronized on navigation changes.

remix-run/remix#6291

Either add error messages/clear defaults when certain data doesn't load, or improve the error message shown. These are all the data fetching that needs to be handled:

• resources.yaml -- Can probably default to the main error page if this fails
• fetchReadme/getResourceReadme -- Individual resource page, show a message that the readme can't be loaded properly with a link to the repo
• image fails to fetch -- better fallback than a broken image
• getSponsorUrl -- Maybe just don't show the sponsor button if this one fails? I think this one actually works this way already
• fetchResourceGitHubData/getResourceGitHubData -- Maybe some good fallbacks, such as "failed to load description". I think this is better than the whole thing blowing up

The following packages needed to be bumped to the latest major versions:

• rehype-autolink-headings
• rehype-slug
• rehype-stringify
• remark-gfm
• remark-html
• remark-parse
• remark-rehype
• unified
• unist-util-visit

I upgraded them, deployed, and everything seemed to work fine. However, I got some type errors and am not familiar enough with these packages or the setup to quickly fix it. I figured this might be an issue someone else would be eager to dig their hands into

Make a button to create tokens for any random github account, free for our employees/friends/ourselves, or if somebody purchased and there was an error.

When done, give Lennart a license

Reproduction

1. Visit https://remix.run/docs/en/main/start/quickstart
2. Run an accessibility audit, such as with Lighthouse or axe Devtools

System Info

n/a

Used Package Manager

npm

Expected Behavior

Pages such as https://remix.run/docs/en/main/start/quickstart shouldn't have any web accessibility issues.

Actual Behavior

Scanning with axe DevTools finds two visual errors:

• Insufficient color contrast: folks with low color perception and/or poor hardware or lighting conditions might not be able to read...
  • ...in dark mode: the #666666 commented-out text (e.g. # install runtime dependencies)
  • ...in light mode: the #30ba2d light green commands (e.g. my-remix-app)
• Links indistinguishable without relying on color: the color contrast between link colors and regular body text similarly isn't enough for some folks to be able to see the difference...
  • ...in dark mode: between the #3992ff link text compared to #a4a4a4 body text
  • ...in light mode: between #1b6ef5 link text compared to #434343 body text

I haven't dug too deeply. There might be more insufficient color contrasts or other issues.

Some quick suggested remediations could be:

• Lightning the comments in dark mode to be more visually distinct
• Darkening the green text in light mode to be more visually distinct
• Adding an underline to link text, the way GitHub recently did for Markdown by default

Note that I'm not an accessibility professional and might have missed some issues. I'd be happy to send in a PR with these fixes or alternatives, but would recommend having a real professional go through a full site audit.

Right now we only support uploading only one author to Cloudinary for our meta images

So for Remix ❤️ Vite we just have Pedro

I believe this is just because we only allow a single author to be passed

• do it in typescript
• make a very clear note to use the no-ts branch for JS only

Need to pull the following data from GitHub for the templates

• description
• tags
• stars
• sponsor URL (if exists)

Will want to leverage server cache so we aren't constantly re-fetching this data. Will need to figure out a good strategy for fetching all of the templates, filtered templates, and individual templates. Ideally we want to use the same cache for each of these, and maybe a separate one or separate key for the README (for template slug pages)

Our Changelog doc is sad

This was a temporary addition, but we would really prefer to render the full doc on our website. Just a matter of fetching the correct file on that specific route instead of what's in the docs.

It looks that the development dependency dotenv-cli is unused. A grep through the repository didn't show matches. However I understand it's a CLI tool to run the project with different or even combine .env files.

While I don't see any reason for this dependency, if there's some valid use, then it should be documented.

package.json uses it for the preview script:

    "preview": "cross-env NODE_ENV=production dotenv node server.mjs",

But we already have dotenv setup on vitest.config.mts, so it seems is not doing any useful work there. Or at least I cannot see it after reading the package documentation.

• Price going up to $1,200 for commercial
• What "beta" means
  • We don't anticipate any more API changes
  • Now is a good time to get in and help us get it stable
  • Should be stable in a few weeks, work now can be deployed confidently then!