☘️ feat(app): improve env styling

.env.example

@@ -1,34 +1,30 @@
 # ?? =======================================
 # !! | ENVIRONMENT VARIABLES CONFIGURATION |
-# ?? =======================================
-
-# Since the ".env" file is gitignored, you can use the ".env.example" file to
-# build a new ".env" file when you clone the repo. Keep this file up-to-date
-# when you add new variables to `.env`.
-
-# This file will be committed to version control, so make sure not to have any
-# secrets in it. If you are cloning this repo, create a copy of this file named
-# ".env" and populate it with your secrets.
-
+# ?? =======================================================================
+# ** Install VS Code ext `aaron-bond.better-comments` for better experience.
+# ** -----------------------------------------------------------------------
+# Since the ".env" file is gitignored, you can use the ".env.example" file 
+# to build a new ".env" file when you clone the repo. Keep this file
+# up-to-date when you add new variables to `.env`.
+# ** -----------------------------------------------------------------------
+# This file will be committed to version control, so make sure not to have
+# any secrets in it. If you are cloning this repo, create a copy of this
+# file named ".env" and populate it with your secrets.
+# ** -----------------------------------------------------------------------
 # When adding additional environment variables, the schema in "/src/env.mjs"
 # should be updated accordingly.
-
 # ?? =======================================================================
 
-# !! DRIZZLE DB: PLANETSCALE CREDENTIALS (https://planetscale.com)
+# !! [DB] DRIZZLE: PLANETSCALE (https://planetscale.com)
 # Get the Database data from the "prisma" dropdown selector in PlanetScale.
-# Connect -> Connect with `@planetscale/database`:
-DATABASE_HOST="" # ?? [1] aws.connect.psdb.cloud
-DATABASE_USERNAME="" # ?? [2] ****
-DATABASE_PASSWORD="" # ?? [3] pscale_pw_****
-NEXT_SECRET_URL_ORM_DRIZZLE="" # ?? [4] Change the query params at the end of the URL to "?ssl={"rejectUnauthorized":true}"
+# 1) Connect -> Connect with `Prisma`
+# 2) Change the query params at the end of the URL to "?ssl={"rejectUnauthorized":true}"
+NEXT_SECRET_URL_ORM_DRIZZLE="" # ?? [4] mysql://<...>?ssl={"rejectUnauthorized":true}
 
-# !! PRISMA DB: PLANETSCALE CREDENTIALS (https://planetscale.com)
+# !! [DB] PRISMA: PLANETSCALE (https://planetscale.com)
 # https://www.prisma.io/docs/reference/database-reference/connection-urls#env
-# Get the Database URL from the "prisma" dropdown selector in PlanetScale.
-# End of the URL must be: ?sslaccept=strict
-# Connect -> Connect with `Prisma`:
-NEXT_SECRET_URL_ORM_PRISMA="" # ?? [5] End of the URL must be: ?sslaccept=strict
+# just: Connect -> Connect with `Prisma`
+NEXT_SECRET_URL_ORM_PRISMA="" # ?? [5] mysql://<...>?sslaccept=strict
 
 # !! CLERK CREDENTIALS (https://clerk.com)
 # pk_test, and sk_test are development keys

README.md

@@ -1,11 +1,11 @@
-# Bleverse Relivator: The Powerful Starter for Next.js 13
-
-**Crafting the world's most iconic Next.js starter.**
+# Bleverse Relivator: i18n Store & Landing Starter for Next.js 13
 
 ![GitHub repo size](https://img.shields.io/github/repo-size/blefnk/relivator?style=for-the-badge)
 ![GitHub language count](https://img.shields.io/github/languages/count/blefnk/relivator?style=for-the-badge)
 ![GitHub forks](https://img.shields.io/github/forks/blefnk/relivator?style=for-the-badge)
 
+**Crafting the world's most iconic Next.js starter.**
+
 ## 🚀 About the Project
 
 **The Bleverse Framework for the Next.js!**
@@ -20,7 +20,7 @@ This is our experimental space where we tinkered with the new Next.js app direct
 > The README.md is not yet finished and may or may not represent features that have not been implemented yet.
 > Please check back soon for more features, which are currently in production.
 
-## 🔥 TO-DO Features
+## 🔥 App Features
 
 This roadmap outlines the key features and improvements to be implemented in this web project.
 
@@ -36,13 +36,28 @@ This roadmap outlines the key features and improvements to be implemented in thi
 - 📡 Data-fetching streamlined with [**tRPC**](https://github.com/trpc/trpc).
 - 📧 Email verification and a lot more features to enhance the application.
 
+## 🌟 Project Roadmap
+
+- [ ] Authentication with **Clerk**
+- [ ] File uploads with **uploadthing**
+- [ ] Newsletter subscription with **React Email** and **Resend**
+- [ ] Blog using **MDX** with, maybe, **Contentlayer**
+- [ ] ORM using **Drizzle ORM** and **Prisma**
+- [ ] Database on **PlanetScale**
+- [ ] Validation with **Validabot** and **Zod**
+- [ ] Storefront with products, categories, and subcategories
+- [ ] Seller and customer workflows
+- [ ] User subscriptions with **Stripe**
+- [ ] Checkout with **Stripe Checkout**
+- [ ] Admin dashboard with stores, products, orders, subscriptions, and payments
+
 ## 🌍 i18n: Internationalization
 
 At Bleverse, the approach to multilingualism is a separate holy grail. We love talking about this topic. In the future, we'll be writing a lot of interesting things about internationalization with Next.js 13 App Router. Stay tuned for updates!
 
-## Configure The App
+## 👋 Project Configuration
 
-The `app.ts` file contains essential configuration used to modify the contents and settings of the website.
+The `src/app.ts` file contains essential configuration used to modify the contents and settings of the website.
 
 - Manage the content displayed on the website.
 - Customize various settings, such as disabling theme toggle.
@@ -126,7 +141,7 @@ Because the project is still in active development, sometimes we need to deviate
 
 A quick snapshot of the roadblocks or nuances as of now:
 
-1. There is a possibility that `.d.ts` files do not work correctly in VS Code. They have been temporarily renamed to `.ts`.
+1. There is a possibility that `.d.ts` files do not work correctly in VS Code. Temporarily renamed to `.ts`.
 2. Occasionally, MySQL throws a tantrum about excessive connections. A quick restart of your Next.js app should soothe it.
 3. Pricing plans are playing hard-to-get with the database sync.
 4. The RBAC feature is still on probation; thorough testing pending.

cspell.json

@@ -24,15 +24,18 @@
     "clsx",
     "cmdk",
     "commitlint",
+    "Contentlayer",
     "Gtkq",
     "hookform",
+    "ianvs",
     "Kbwps",
     "knip",
     "lemonsqueezy",
     "lucide",
     "mfpiano",
     "mfpianotutorial",
     "nextjs",
+    "packagejson",
     "planetscale",
     "PSCALE",
     "relivator",

drizzle.config.ts

@@ -1,4 +1,5 @@
 import type { Config } from "drizzle-kit";
+
 import * as dotenv from "dotenv";
 
 dotenv.config();

prettier.config.cjs

@@ -3,48 +3,47 @@
 
 /** @type {PrettierConfig | SortImportsConfig} */
 const config = {
-  semi: true,
-  tabWidth: 2,
   printWidth: 80,
+  tabWidth: 2,
+  semi: true,
   useTabs: false,
-  endOfLine: "lf",
   singleQuote: false,
+  bracketSameLine: false,
   trailingComma: "none",
   arrowParens: "always",
-  bracketSameLine: false,
-  // ====================
+  endOfLine: "lf",
   importOrder: [
-    "^~/app.ts",
     "^~/styles/(.*)$",
+    "^~/app.ts",
+    "",
+    "<TYPES>",
+    "^types$",
+    "<TYPES>^[./]",
+    "^~/types/(.*)$",
     "",
     "^(react/(.*)$)|^(react$)",
     "^(next/(.*)$)|^(next$)",
     "",
-    "<TYPES>",
-    "<TYPES>^[./]",
     "<THIRD_PARTY_MODULES>",
     "",
-    "^types$",
-    "^~/types/(.*)$",
-    "",
+    "^~/data/(.*)$",
     "^~/hooks/(.*)$",
     "^~/utils/(.*)$",
-    "^~/data/(.*)$",
     "",
     "^~/islands/(.*)$",
     "^~/app/(.*)$",
+    "^~/schema/(.*)$",
     "",
     "^[./]",
     ""
   ],
-  importOrderTypeScriptVersion: "5.1.6",
-  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
-  // =======
   plugins: [
-    require.resolve("@ianvs/prettier-plugin-sort-imports"),
+    require.resolve("prettier-plugin-tailwindcss"),
     require.resolve("prettier-plugin-packagejson"),
-    require.resolve("prettier-plugin-tailwindcss")
-  ]
+    require.resolve("@ianvs/prettier-plugin-sort-imports")
+  ],
+  importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
+  importOrderTypeScriptVersion: "5.1.6"
 };
 
 module.exports = config;

src/app/[locale]/about/page.tsx

@@ -1,4 +1,5 @@
 import type { GenerateMetadata } from "~/utils/types/metadata";
+
 import { REPOSITORY_URL } from "~/app";
 import { Balancer } from "react-wrap-balancer";
 import { cnBase } from "tailwind-variants";

src/app/[locale]/features/page.tsx

@@ -1,7 +1,7 @@
-import Link from "next/link";
-
 import type { GenerateMetadata } from "~/utils/types/metadata";
 
+import Link from "next/link";
+
 import { getScopedI18n } from "~/utils/server/i18n";
 import { typography } from "~/utils/server/text";
 

src/app/[locale]/layout.tsx

@@ -2,8 +2,8 @@ import { Inter } from "next/font/google";
 
 import { siteConfig } from "~/app";
 
-import { GenerateMetadata } from "~/utils/types/metadata";
 import { defaultLocale, localeList } from "~/data/i18n";
+import { GenerateMetadata } from "~/utils/types/metadata";
 
 import { Providers } from "~/islands/common/providers";
 

src/data/db/index.ts → src/data/db/drizzle.ts

@@ -17,7 +17,7 @@ env.NODE_ENV === "development" &&
     .then((res) => res)
     .catch((err) =>
       console.log(
-        "[error] Migration failed. The file ~/data/db/index.ts said:",
+        "[error] Migration failed. The file ~/data/db/drizzle.ts error:",
         err
       )
     );

src/data/db/schema.ts

@@ -4,6 +4,7 @@ import type {
   StoredFile
 } from "~/utils/types/store-main";
 import type { InferModel } from "drizzle-orm";
+
 import { relations } from "drizzle-orm";
 import {
   boolean,

src/islands/common/providers.tsx

@@ -1,14 +1,15 @@
 "use client";
 
 import type { ComponentProps } from "react";
+
 import { QueryClientProvider } from "@tanstack/react-query";
 import { settings } from "~/app";
 import { ThemeProvider as NextThemeProvider } from "next-themes";
 
+import en from "~/data/i18n/en";
 import { I18nProviderClient } from "~/utils/client/i18n";
 import { queryClient } from "~/utils/server/query";
 import { WithChildren } from "~/utils/types/with-children";
-import en from "~/data/i18n/en";
 
 import { Toaster } from "~/islands/primitives/toast/toaster";
 

src/islands/modules/headers/navbar.tsx

@@ -1,9 +1,10 @@
 // import type { Route } from "next";
 // import TLink from "~/islands/wrappers/typed-link";
 
+import type { VariantProps } from "tailwind-variants";
+
 import Link from "next/link";
 
-import type { VariantProps } from "tailwind-variants";
 import { ActivitySquare, Github, Twitter } from "lucide-react";
 import { tv } from "tailwind-variants";
 

src/islands/primitives/button.tsx

@@ -1,6 +1,7 @@
+import type { VariantProps } from "tailwind-variants";
+
 import { forwardRef } from "react";
 
-import type { VariantProps } from "tailwind-variants";
 import { Slot } from "@radix-ui/react-slot";
 import { tv } from "tailwind-variants";
 

src/islands/primitives/toast/toast.tsx

@@ -1,8 +1,9 @@
 "use client";
 
+import type { VariantProps } from "tailwind-variants";
+
 import { forwardRef } from "react";
 
-import type { VariantProps } from "tailwind-variants";
 import * as ToastPrimitives from "@radix-ui/react-toast";
 import { AlertTriangle, Check, X } from "lucide-react";
 import { cnBase, tv } from "tailwind-variants";

src/islands/primitives/toast/use-toast.ts

@@ -1,10 +1,10 @@
-import { useEffect, useState } from "react";
-
 import type {
   ToastActionElement,
   ToastProps
 } from "~/islands/primitives/toast/toast";
 
+import { useEffect, useState } from "react";
+
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;
 

src/islands/wrappers/icons.tsx

@@ -1,4 +1,5 @@
 import type { LucideIcon, LucideProps } from "lucide-react";
+
 import {
   AlarmClock,
   AlertTriangle,

src/utils/appts/islands/unified-bleverse-header.tsx

@@ -436,7 +436,9 @@ export function BleverseIcon() {
       aria-hidden="true"
       className="relative mr-1 h-5 w-4 rounded-sm border-2 border-current opacity-90"
     >
-      <span className="absolute left-1/2 top-1/2 border p-4">B</span>
+      <span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
+        B
+      </span>
     </div>
   );
 }

src/utils/global/utils.ts

@@ -1,4 +1,5 @@
 import type { ClassValue } from "clsx";
+
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 

src/utils/server/links.ts

@@ -1,4 +1,5 @@
 import type { Route } from "next";
+
 import { REPOSITORY_URL } from "~/app";
 
 export const navItems = {

src/utils/server/query.ts

@@ -1,4 +1,5 @@
 import type { DefaultOptions } from "@tanstack/react-query";
+
 import { QueryClient } from "@tanstack/react-query";
 
 export const defaultQueryOptions = {

src/utils/types/store-main.ts

@@ -1,11 +1,12 @@
 import type { cartItemSchema, checkoutItemSchema } from "~/schema/zod/cart";
-import { type userPrivateMetadataSchema } from "~/schema/zod/auth";
+
 import { type FileWithPath } from "react-dropzone";
 import { type z } from "zod";
 
 import { type Product } from "~/data/db/schema";
 
 import { type Icons } from "~/islands/wrappers/icons";
+import { type userPrivateMetadataSchema } from "~/schema/zod/auth";
 
 export interface NavItem {
   title: string;

tailwind.config.ts

@@ -1,4 +1,5 @@
 import type { Config } from "tailwindcss";
+
 import { fontFamily } from "tailwindcss/defaultTheme";
 
 export default {