feat: simplify new app setup by reducing areas that need modification

[jwdotjs]

Intro

Hello! Just wanted to say I'm using this for a new project and I'm super pumped to have found this. Thank you to all contributors for everything you've done to make this great.

As I was getting my project bootstrapped, I noticed a few things that could help speed up getting up and running and this PR covers one of them.

If any of the changes are undesirable or don't follow conventions, please let me know and I can adjust accordingly!

Summary

Moves all instances of Epic Notes to a single file so new Epic Stack users can modify a single line and have it propagate to all instances where that constant is used.

Note: In root.tsx, I split the APP_NAME value on spaces and then try to render the first word and all remaining words so there is one less place for developers to modify, at least early on.

Test Plan

I didn't add any additional tests, but I can if helpful. search.test.ts was checking for the string Epic Notes, and that test is still passing.

Checklist

• [x] Tests updated
• [x] Docs updated (no changes needed)

Screenshots

Screenshots showcase no regressions in the UI:

Behavior For 1-Word And 3+ Word App Name

[jwdotjs]

Ok, sounds good. I'll close this out.

Thanks again for the great starter app, it's been a lot of fun to work with.

[dalelotts]

This is actually it's a SUPER simple one-time change to replace Epic Notes with your app name - and you can use this same approach for any build-time substitution you would like :

Create ./types/vite-env.d.ts with the following content:

/// <reference types="vite/client" />

interface ImportMetaEnv {
    readonly VITE_APP_NAME: string
    readonly VITE_APP_DESCRIPTION: string
}

interface ImportMeta {
    readonly env: ImportMetaEnv
}

Add the VARS to GH Actions secrets as well as locally.

The you can update meta functions to use the variable. e.g. This is from root.tsx

export const meta: MetaFunction<typeof loader> = ({ data }) => {
    return [
        {
            title: data
                ? import.meta.env.VITE_APP_TITLE
                : `Error | ${import.meta.env.VITE_APP_TITLE}`,
        },
        { name: 'description', content: import.meta.env.VITE_APP_DESCRIPTION },
    ]
}

Or signup.tsx

    const response = await sendEmail({
        to: email,
        subject: `Welcome to ${import.meta.env.VITE_APP_TITLE}!`,
        react: <SignupEmail onboardingUrl={verifyUrl.toString()} otp={otp} />,
    })

Or forgot-password.tsx

    const response = await sendEmail({
        to: user.email,
        subject: `${import.meta.env.VITE_APP_TITLE} Password Reset`,
        react: (
            <ForgotPasswordEmail onboardingUrl={verifyUrl.toString()} otp={otp} />
        ),
    })