Split name env variable

.env.defaults

@@ -15,7 +15,8 @@ PRISMA_HIDE_UPDATE_MESSAGE=true
 # Ordered by how verbose they are: trace | debug | info | warn | error | silent
 # LOG_LEVEL=debug
 
-NAME=Ahmed Al-Taiar
+FIRST_NAME=Ahmed
+LAST_NAME=Al-Taiar
 
 GMAIL=example@gmail.com
 GMAIL_SMTP_PASSWORD=chan geme xyza bcde

.env.example

@@ -3,7 +3,8 @@
 # PRISMA_HIDE_UPDATE_MESSAGE=true
 # LOG_LEVEL=trace
 
-NAME=Firstname Lastname
+FIRST_NAME=firstname
+LAST_NAME=lastname
 
 GMAIL=example@gmail.com
 GMAIL_SMTP_PASSWORD=chan geme xyza bcde

api/src/lib/email.ts

@@ -17,7 +17,7 @@ const transporter = nodemailer.createTransport({
 
 export const sendEmail = async ({ to, subject, text, html }: Options) => {
   return await transporter.sendMail({
-    from: `"${process.env.NAME} (noreply)" <${process.env.GMAIL}>`,
+    from: `"${process.env.FIRST_NAME} ${process.env.LAST_NAME} (noreply)" <${process.env.GMAIL}>`,
     to: Array.isArray(to) ? to : [to],
     subject,
     text,

redwood.toml

@@ -6,10 +6,10 @@
 # https://redwoodjs.com/docs/app-configuration-redwood-toml
 
 [web]
-  title = "${NAME}"
+  title = "${FIRST_NAME} ${LAST_NAME}"
   port = 8910
   apiUrl = "/api"
-  includeEnvironmentVariables = ["NAME", "API_ADDRESS_PROD", "API_ADDRESS_DEV"]
+  includeEnvironmentVariables = ["FIRST_NAME", "LAST_NAME", "API_ADDRESS_PROD", "API_ADDRESS_DEV"]
 [generate]
   tests = false
   stories = false

web/src/components/ContactCard/ContactCard/ContactCard.tsx

@@ -56,7 +56,7 @@ const ContactCard = ({ portraitUrl }: ContactCardProps) => {
             <img
               className="contact-me-image aspect-portrait object-cover"
               src={portraitUrl}
-              alt={`${process.env.NAME}`}
+              alt={`${process.env.FIRST_NAME} ${process.env.LAST_NAME}`}
             />
           </figure>
           <div

web/src/components/Portrait/PortraitForm/PortraitForm.tsx

@@ -110,7 +110,7 @@ const PortraitForm = (props: PortraitFormProps) => {
         <img
           className="aspect-portrait max-w-2xl rounded-xl object-cover"
           src={props.portrait?.fileId}
-          alt={`${process.env.NAME} Portrait`}
+          alt={`${process.env.FIRST_NAME} Portrait`}
         />
         <div className="flex justify-center">
           <button
@@ -150,7 +150,7 @@ const PortraitForm = (props: PortraitFormProps) => {
           <img
             className="aspect-portrait max-w-2xl rounded-xl object-cover"
             src={fileId}
-            alt={`${process.env.NAME} Portrait`}
+            alt={`${process.env.FIRST_NAME} Portrait`}
           />
         )}
         {fileId && (

web/src/layouts/NavbarLayout/NavbarLayout.tsx

@@ -110,7 +110,7 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
               to={routes.home()}
               className="btn btn-ghost hidden font-syne text-xl sm:flex"
             >
-              {process.env.NAME}
+              {process.env.FIRST_NAME + ' ' + process.env.LAST_NAME}
             </Link>
           </div>
           <div className="navbar-center">
@@ -118,7 +118,7 @@ const NavbarLayout = ({ children }: NavbarLayoutProps) => {
               to={routes.home()}
               className="btn btn-ghost font-syne text-xl sm:hidden"
             >
-              {process.env.NAME}
+              {process.env.FIRST_NAME + ' ' + process.env.LAST_NAME}
             </Link>
           </div>
           <div className="navbar-center hidden lg:flex">