diff --git a/.env.example b/.env.example deleted file mode 100644 index 6937031..0000000 --- a/.env.example +++ /dev/null @@ -1,4 +0,0 @@ -# Update these with your Supabase details from your project settings > API -# https://app.supabase.com/project/_/settings/api -NEXT_PUBLIC_SUPABASE_URL=your-project-url -NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..b4bfed3 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + "plugins": ["prettier-plugin-tailwindcss"] +} diff --git a/app/(auth-pages)/forgot-password/page.tsx b/app/(auth-pages)/forgot-password/page.tsx index 203e37b..d62e816 100644 --- a/app/(auth-pages)/forgot-password/page.tsx +++ b/app/(auth-pages)/forgot-password/page.tsx @@ -13,7 +13,7 @@ export default function ForgotPassword({ }) { return ( <> -
+

Reset Password

@@ -23,7 +23,7 @@ export default function ForgotPassword({

-
+
diff --git a/app/(auth-pages)/layout.tsx b/app/(auth-pages)/layout.tsx index e038de1..aca8267 100644 --- a/app/(auth-pages)/layout.tsx +++ b/app/(auth-pages)/layout.tsx @@ -4,6 +4,6 @@ export default async function Layout({ children: React.ReactNode; }) { return ( -
{children}
+
{children}
); } diff --git a/app/(auth-pages)/sign-in/page.tsx b/app/(auth-pages)/sign-in/page.tsx index dabdf8c..1d30038 100644 --- a/app/(auth-pages)/sign-in/page.tsx +++ b/app/(auth-pages)/sign-in/page.tsx @@ -7,18 +7,18 @@ import Link from "next/link"; export default function Login({ searchParams }: { searchParams: Message }) { return ( - +

Sign in

Don't have an account?{" "} - + Sign up

-
+
-
+
+
); @@ -17,15 +17,15 @@ export default function Signup({ searchParams }: { searchParams: Message }) { return ( <> - +

Sign up

-

+

Already have an account?{" "} - + Sign in

-
+
diff --git a/app/(auth-pages)/smtp-message.tsx b/app/(auth-pages)/smtp-message.tsx index 84c21fc..d70a620 100644 --- a/app/(auth-pages)/smtp-message.tsx +++ b/app/(auth-pages)/smtp-message.tsx @@ -3,7 +3,7 @@ import Link from "next/link"; export function SmtpMessage() { return ( -
+
@@ -14,7 +14,7 @@ export function SmtpMessage() { Learn more diff --git a/app/favicon.ico b/app/favicon.ico index 718d6fe..8d9224b 100644 Binary files a/app/favicon.ico and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css index f450d1e..a4aeb69 100644 --- a/app/globals.css +++ b/app/globals.css @@ -2,6 +2,25 @@ @tailwind components; @tailwind utilities; +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: var(--font-lexend); +} + +p, +button, +label, +input, +select, +textarea, +a { + font-family: var(--font-manjari); +} + @layer base { :root { --background: 0 0% 100%; diff --git a/app/layout.tsx b/app/layout.tsx index 8d80488..15914f2 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,21 +1,33 @@ -import DeployButton from "@/components/deploy-button"; -import { EnvVarWarning } from "@/components/env-var-warning"; -import HeaderAuth from "@/components/header-auth"; -import { ThemeSwitcher } from "@/components/theme-switcher"; -import { hasEnvVars } from "@/utils/supabase/check-env-vars"; import { GeistSans } from "geist/font/sans"; import { ThemeProvider } from "next-themes"; -import Link from "next/link"; +import { Lexend, Manjari } from "next/font/google"; import "./globals.css"; const defaultUrl = process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000"; +const lexend = Lexend({ + subsets: ["latin"], + variable: "--font-lexend", +}); + +const manjari = Manjari({ + subsets: ["latin"], + variable: "--font-manjari", + weight: ["100", "400", "700"], +}); + export const metadata = { metadataBase: new URL(defaultUrl), - title: "Next.js and Supabase Starter Kit", - description: "The fastest way to build apps with Next.js and Supabase", + title: "Songscribe", + description: "The fastest way to turn any song into sheet music", + icons: { + icon: { + url: "favicon.png", + type: "image/png", + }, + }, }; export default function RootLayout({ @@ -24,7 +36,11 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - + -
-
- -
+
+
+ +
{children}
- +
diff --git a/app/opengraph-image.png b/app/opengraph-image.png deleted file mode 100644 index 57595e6..0000000 Binary files a/app/opengraph-image.png and /dev/null differ diff --git a/app/page.tsx b/app/page.tsx index 7e2e91a..f4ca5a1 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,15 +1,9 @@ -import Hero from "@/components/hero"; -import ConnectSupabaseSteps from "@/components/tutorial/connect-supabase-steps"; -import SignUpUserSteps from "@/components/tutorial/sign-up-user-steps"; -import { hasEnvVars } from "@/utils/supabase/check-env-vars"; - export default async function Index() { return ( <> - -
-

Next steps

- {hasEnvVars ? : } +
+

Songscribe

+

The fastest way to turn any song into sheet music

); diff --git a/app/protected/page.tsx b/app/protected/page.tsx index cbc4876..930e29e 100644 --- a/app/protected/page.tsx +++ b/app/protected/page.tsx @@ -15,22 +15,22 @@ export default async function ProtectedPage() { } return ( -
+
-
+
This is a protected page that you can only see as an authenticated user
-
-

Your user details

- 
+      

+        
Your user details

+        
           {JSON.stringify(user, null, 2)}
         

       

       

-        
Next steps

+        
Next steps
diff --git a/app/protected/reset-password/page.tsx b/app/protected/reset-password/page.tsx index 7b7ab95..110d936 100644 --- a/app/protected/reset-password/page.tsx +++ b/app/protected/reset-password/page.tsx @@ -10,7 +10,7 @@ export default async function ResetPassword({ searchParams: Message; }) { return ( - +

Reset password

Please enter your new password below. diff --git a/app/twitter-image.png b/app/twitter-image.png deleted file mode 100644 index 57595e6..0000000 Binary files a/app/twitter-image.png and /dev/null differ diff --git a/components/deploy-button.tsx b/components/deploy-button.tsx deleted file mode 100644 index 8a5a192..0000000 --- a/components/deploy-button.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import Link from "next/link"; -import { Button } from "./ui/button"; - -export default function DeployButton() { - return ( - <> - - - - - ); -} diff --git a/components/env-var-warning.tsx b/components/env-var-warning.tsx deleted file mode 100644 index b6a193f..0000000 --- a/components/env-var-warning.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import Link from "next/link"; -import { Badge } from "./ui/badge"; -import { Button } from "./ui/button"; - -export function EnvVarWarning() { - return ( -

- - Supabase environment variables required - -
- - -
-
- ); -} diff --git a/components/form-message.tsx b/components/form-message.tsx index 547fb9f..9f428e5 100644 --- a/components/form-message.tsx +++ b/components/form-message.tsx @@ -5,19 +5,19 @@ export type Message = export function FormMessage({ message }: { message: Message }) { return ( -
+
{"success" in message && ( -
+
{message.success}
)} {"error" in message && ( -
+
{message.error}
)} {"message" in message && ( -
{message.message}
+
{message.message}
)}
); diff --git a/components/header-auth.tsx b/components/header-auth.tsx index 49072e9..3cb6261 100644 --- a/components/header-auth.tsx +++ b/components/header-auth.tsx @@ -13,11 +13,11 @@ export default async function AuthButton() { if (!hasEnvVars) { return ( <> -
+
Please update .env.local file with anon key and url @@ -28,7 +28,7 @@ export default async function AuthButton() { size="sm" variant={"outline"} disabled - className="opacity-75 cursor-none pointer-events-none" + className="pointer-events-none cursor-none opacity-75" > Sign in @@ -37,7 +37,7 @@ export default async function AuthButton() { size="sm" variant={"default"} disabled - className="opacity-75 cursor-none pointer-events-none" + className="pointer-events-none cursor-none opacity-75" > Sign up diff --git a/components/hero.tsx b/components/hero.tsx deleted file mode 100644 index 6afca6b..0000000 --- a/components/hero.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import NextLogo from "./next-logo"; -import SupabaseLogo from "./supabase-logo"; - -export default function Header() { - return ( -
-
- - - - - - - -
-

Supabase and Next.js Starter Template

-

- The fastest way to build apps with{" "} - - Supabase - {" "} - and{" "} - - Next.js - -

-
-
- ); -} diff --git a/components/next-logo.tsx b/components/next-logo.tsx deleted file mode 100644 index 1655582..0000000 --- a/components/next-logo.tsx +++ /dev/null @@ -1,46 +0,0 @@ -export default function NextLogo() { - return ( - - - - - - - - - - - ); -} diff --git a/components/supabase-logo.tsx b/components/supabase-logo.tsx deleted file mode 100644 index 96a56a5..0000000 --- a/components/supabase-logo.tsx +++ /dev/null @@ -1,102 +0,0 @@ -export default function SupabaseLogo() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/components/tutorial/code-block.tsx b/components/tutorial/code-block.tsx deleted file mode 100644 index 9f1b13d..0000000 --- a/components/tutorial/code-block.tsx +++ /dev/null @@ -1,61 +0,0 @@ -"use client"; - -import { useState } from "react"; -import { Button } from "../ui/button"; - -const CopyIcon = () => ( - - - - -); - -const CheckIcon = () => ( - - - -); - -export function CodeBlock({ code }: { code: string }) { - const [icon, setIcon] = useState(CopyIcon); - - const copy = async () => { - await navigator?.clipboard?.writeText(code); - setIcon(CheckIcon); - setTimeout(() => setIcon(CopyIcon), 2000); - }; - - return ( - 
-      
-      {code}
-
- ); -} diff --git a/components/tutorial/connect-supabase-steps.tsx b/components/tutorial/connect-supabase-steps.tsx deleted file mode 100644 index 04ca37f..0000000 --- a/components/tutorial/connect-supabase-steps.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { TutorialStep } from "./tutorial-step"; - -export default function ConnectSupabaseSteps() { - return ( -
    - -

    - Head over to{" "} - - database.new - {" "} - and create a new Supabase project. -

    -     - - -

    - Rename the{" "} - - .env.example - {" "} - file in your Next.js app to{" "} - - .env.local - {" "} - and populate with values from{" "} - - your Supabase project's API Settings - - . -

    -     - - -

    - You may need to quit your Next.js development server and run{" "} - - npm run dev - {" "} - again to load the new environment variables. -

    -     - - -

    - You may need to refresh the page for Next.js to load the new - environment variables. -

    -     -
- ); -} diff --git a/components/tutorial/fetch-data-steps.tsx b/components/tutorial/fetch-data-steps.tsx deleted file mode 100644 index f0193fe..0000000 --- a/components/tutorial/fetch-data-steps.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import { TutorialStep } from "./tutorial-step"; -import { CodeBlock } from "./code-block"; - -const create = `create table notes ( - id bigserial primary key, - title text -); - -insert into notes(title) -values - ('Today I created a Supabase project.'), - ('I added some data and queried it from Next.js.'), - ('It was awesome!'); -`.trim(); - -const server = `import { createClient } from '@/utils/supabase/server' - -export default async function Page() { - const supabase = createClient() - const { data: notes } = await supabase.from('notes').select() - - return 
{JSON.stringify(notes, null, 2)}
-} -`.trim(); - -const client = `'use client' - -import { createClient } from '@/utils/supabase/client' -import { useEffect, useState } from 'react' - -export default function Page() { - const [notes, setNotes] = useState(null) - const supabase = createClient() - - useEffect(() => { - const getData = async () => { - const { data } = await supabase.from('notes').select() - setNotes(data) - } - getData() - }, []) - - return 
{JSON.stringify(notes, null, 2)}
-} -`.trim(); - -export default function FetchDataSteps() { - return ( -
    - -

    - Head over to the{" "} - - Table Editor - {" "} - for your Supabase project to create a table and insert some example - data. If you're stuck for creativity, you can copy and paste the - following into the{" "} - - SQL Editor - {" "} - and click RUN! -

    - -     - - -

    - To create a Supabase client and query data from an Async Server - Component, create a new page.tsx file at{" "} - - /app/notes/page.tsx - {" "} - and add the following. -

    - -

    Alternatively, you can use a Client Component.

    - -     - - -

    You're ready to launch your product to the world! 🚀

    -     -
- ); -} diff --git a/components/tutorial/sign-up-user-steps.tsx b/components/tutorial/sign-up-user-steps.tsx deleted file mode 100644 index c00fb66..0000000 --- a/components/tutorial/sign-up-user-steps.tsx +++ /dev/null @@ -1,88 +0,0 @@ -import Link from "next/link"; -import { TutorialStep } from "./tutorial-step"; -import { ArrowUpRight } from "lucide-react"; - -export default function SignUpUserSteps() { - return ( -
    - {process.env.VERCEL_ENV === "preview" || - process.env.VERCEL_ENV === "production" ? ( - -

    It looks like this App is hosted on Vercel.

    -

    - This particular deployment is - - "{process.env.VERCEL_ENV}" - {" "} - on - - https://{process.env.VERCEL_URL} - - . -

    -

    - You will need to{" "} - - update your Supabase project - {" "} - with redirect URLs based on your Vercel deployment URLs. -

    -
      -
    • - -{" "} - - http://localhost:3000/** - -
      • -
    • - -{" "} - - {`https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}/**`} - -
      • -
    • - -{" "} - - {`https://${process.env.VERCEL_PROJECT_PRODUCTION_URL?.replace(".vercel.app", "")}-*-[vercel-team-url].vercel.app/**`} - {" "} - (Vercel Team URL can be found in{" "} - - Vercel Team settings - - ) -
      • -
    - - Redirect URLs Docs - -     - ) : null} - -

    - Head over to the{" "} - - Sign up - {" "} - page and sign up your first user. It's okay if this is just you for - now. Your awesome idea will have plenty of users later! -

    -     -
- ); -} diff --git a/components/tutorial/tutorial-step.tsx b/components/tutorial/tutorial-step.tsx deleted file mode 100644 index 0ab9cd4..0000000 --- a/components/tutorial/tutorial-step.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Checkbox } from "../ui/checkbox"; - -export function TutorialStep({ - title, - children, -}: { - title: string; - children: React.ReactNode; -}) { - return ( -
  • - - -
    • - ); -} diff --git a/components/typography/inline-code.tsx b/components/typography/inline-code.tsx deleted file mode 100644 index 288f9e3..0000000 --- a/components/typography/inline-code.tsx +++ /dev/null @@ -1,7 +0,0 @@ -export function TypographyInlineCode() { - return ( - - @radix-ui/react-alert-dialog - - ); -} diff --git a/package-lock.json b/package-lock.json index 72bc24b..69dbeee 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,7 +18,6 @@ "lucide-react": "^0.436.0", "next": "latest", "next-themes": "^0.3.0", - "prettier": "^3.3.3", "react": "18.2.0", "react-dom": "18.2.0" }, @@ -27,6 +26,8 @@ "@types/react": "18.2.46", "@types/react-dom": "18.2.18", "postcss": "8.4.33", + "prettier": "^3.3.3", + "prettier-plugin-tailwindcss": "^0.6.8", "tailwind-merge": "^2.5.2", "tailwindcss": "3.4.1", "tailwindcss-animate": "^1.0.7", @@ -2194,6 +2195,7 @@ "version": "3.3.3", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", + "dev": true, "bin": { "prettier": "bin/prettier.cjs" }, @@ -2204,6 +2206,84 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/prettier-plugin-tailwindcss": { + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.8.tgz", + "integrity": "sha512-dGu3kdm7SXPkiW4nzeWKCl3uoImdd5CTZEJGxyypEPL37Wj0HT2pLqjrvSei1nTeuQfO4PUfjeW5cTUNRLZ4sA==", + "dev": true, + "engines": { + "node": ">=14.21.3" + }, + "peerDependencies": { + "@ianvs/prettier-plugin-sort-imports": "*", + "@prettier/plugin-pug": "*", + "@shopify/prettier-plugin-liquid": "*", + "@trivago/prettier-plugin-sort-imports": "*", + "@zackad/prettier-plugin-twig-melody": "*", + "prettier": "^3.0", + "prettier-plugin-astro": "*", + "prettier-plugin-css-order": "*", + "prettier-plugin-import-sort": "*", + "prettier-plugin-jsdoc": "*", + "prettier-plugin-marko": "*", + "prettier-plugin-multiline-arrays": "*", + "prettier-plugin-organize-attributes": "*", + "prettier-plugin-organize-imports": "*", + "prettier-plugin-sort-imports": "*", + "prettier-plugin-style-order": "*", + "prettier-plugin-svelte": "*" + }, + "peerDependenciesMeta": { + "@ianvs/prettier-plugin-sort-imports": { + "optional": true + }, + "@prettier/plugin-pug": { + "optional": true + }, + "@shopify/prettier-plugin-liquid": { + "optional": true + }, + "@trivago/prettier-plugin-sort-imports": { + "optional": true + }, + "@zackad/prettier-plugin-twig-melody": { + "optional": true + }, + "prettier-plugin-astro": { + "optional": true + }, + "prettier-plugin-css-order": { + "optional": true + }, + "prettier-plugin-import-sort": { + "optional": true + }, + "prettier-plugin-jsdoc": { + "optional": true + }, + "prettier-plugin-marko": { + "optional": true + }, + "prettier-plugin-multiline-arrays": { + "optional": true + }, + "prettier-plugin-organize-attributes": { + "optional": true + }, + "prettier-plugin-organize-imports": { + "optional": true + }, + "prettier-plugin-sort-imports": { + "optional": true + }, + "prettier-plugin-style-order": { + "optional": true + }, + "prettier-plugin-svelte": { + "optional": true + } + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", diff --git a/package.json b/package.json index e318539..495b078 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,6 @@ "lucide-react": "^0.436.0", "next": "latest", "next-themes": "^0.3.0", - "prettier": "^3.3.3", "react": "18.2.0", "react-dom": "18.2.0" }, @@ -28,6 +27,8 @@ "@types/react": "18.2.46", "@types/react-dom": "18.2.18", "postcss": "8.4.33", + "prettier": "^3.3.3", + "prettier-plugin-tailwindcss": "^0.6.8", "tailwind-merge": "^2.5.2", "tailwindcss": "3.4.1", "tailwindcss-animate": "^1.0.7",