payload-next-starter 1.0.1 → 1.0.2

package/bin/setup.js

@@ -20,7 +20,7 @@ if (!existsSync(join(targetDir, 'package.json'))) {
 
 const pkg = JSON.parse(readFileSync(join(targetDir, 'package.json'), 'utf8'))
 if (!pkg.dependencies?.next) {
-  console.error('❌ This doesn\'t appear to be a Next.js project.')
+  console.error("❌ This doesn't appear to be a Next.js project.")
   process.exit(1)
 }
 
@@ -42,27 +42,43 @@ try {
 
 // Copy payload.config.ts
 if (existsSync(join(templatesDir, 'payload.config.ts'))) {
-  copyFileSync(
-    join(templatesDir, 'payload.config.ts'),
-    join(targetDir, 'src/payload.config.ts')
-  )
+  copyFileSync(join(templatesDir, 'payload.config.ts'), join(targetDir, 'src/payload.config.ts'))
   console.log('  ✓ payload.config.ts')
 }
 
 // Copy collections
 if (existsSync(join(templatesDir, 'collections'))) {
-  cpSync(join(templatesDir, 'collections'), join(targetDir, 'src/collections'), { recursive: true, force: true })
+  cpSync(join(templatesDir, 'collections'), join(targetDir, 'src/collections'), {
+    recursive: true,
+    force: true,
+  })
   console.log('  ✓ collections/')
 }
 
 // Copy app routes
 if (existsSync(join(templatesDir, 'app/(payload)'))) {
-  cpSync(join(templatesDir, 'app/(payload)'), join(targetDir, 'src/app/(payload)'), { recursive: true, force: true })
+  cpSync(join(templatesDir, 'app/(payload)'), join(targetDir, 'src/app/(payload)'), {
+    recursive: true,
+    force: true,
+  })
   console.log('  ✓ app/(payload)/')
 }
 
+// Copy frontend pages
+if (existsSync(join(templatesDir, 'app/(frontend)'))) {
+  mkdirSync(join(targetDir, 'src/app/(frontend)'), { recursive: true })
+  cpSync(join(templatesDir, 'app/(frontend)'), join(targetDir, 'src/app/(frontend)'), {
+    recursive: true,
+    force: true,
+  })
+  console.log('  ✓ Frontend pages (about-us, contact-us, share)/')
+}
+
 if (existsSync(join(templatesDir, 'app/api/[...payload]'))) {
-  cpSync(join(templatesDir, 'app/api/[...payload]'), join(targetDir, 'src/app/api/[...payload]'), { recursive: true, force: true })
+  cpSync(join(templatesDir, 'app/api/[...payload]'), join(targetDir, 'src/app/api/[...payload]'), {
+    recursive: true,
+    force: true,
+  })
   console.log('  ✓ app/api/[...payload]/')
 }
 
@@ -75,16 +91,19 @@ const deps = [
   '@payloadcms/richtext-lexical',
   '@payloadcms/ui',
   'dotenv',
-  'cross-env'
+  'cross-env',
 ]
 
 try {
-  const pkgManager = existsSync(join(targetDir, 'pnpm-lock.yaml')) ? 'pnpm' :
-                     existsSync(join(targetDir, 'yarn.lock')) ? 'yarn' : 'npm'
+  const pkgManager = existsSync(join(targetDir, 'pnpm-lock.yaml'))
+    ? 'pnpm'
+    : existsSync(join(targetDir, 'yarn.lock'))
+      ? 'yarn'
+      : 'npm'
 
   execSync(`${pkgManager} add ${deps.join(' ')}`, {
     cwd: targetDir,
-    stdio: 'inherit'
+    stdio: 'inherit',
   })
   console.log('✓ Dependencies installed\n')
 } catch (e) {
@@ -116,24 +135,30 @@ export default withPayload(nextConfig)
   }
 } else {
   console.log('  ⚠ No next.config found, creating one...')
-  writeFileSync(join(targetDir, 'next.config.ts'), `import { withPayload } from '@payloadcms/next/withPayload'
+  writeFileSync(
+    join(targetDir, 'next.config.ts'),
+    `import { withPayload } from '@payloadcms/next/withPayload'
 
 const nextConfig = {
   // your config
 }
 
 export default withPayload(nextConfig)
-`)
+`,
+  )
   console.log('  ✓ next.config.ts created\n')
 }
 
 // Create .env.example
 if (!existsSync(join(targetDir, '.env'))) {
-  writeFileSync(join(targetDir, '.env.example'), `# PayloadCMS
+  writeFileSync(
+    join(targetDir, '.env.example'),
+    `# PayloadCMS
 DATABASE_URI=postgresql://user:password@host:5432/database
 PAYLOAD_SECRET=your-secret-key-here-at-least-16-chars
 NEXT_PUBLIC_SERVER_URL=http://localhost:3000
-`)
+`,
+  )
   console.log('  ✓ .env.example created')
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "payload-next-starter",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "PayloadCMS starter for Next.js - install into any Next.js app",
   "license": "MIT",
   "type": "module",

package/templates/app/(frontend)/about-us/page.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export default function AboutUsPage() {
+  return (
+    <div className="about-us">
+      <div className="content">
+        <h1>About Us</h1>
+        <p>
+          Welcome to our company. We are dedicated to delivering exceptional
+          products and services that meet the needs of our customers. Our team
+          is passionate about innovation and committed to excellence.
+        </p>
+        <p>
+          Founded with a vision to make a difference, we have grown into a
+          trusted partner for businesses and individuals alike. Our mission is
+          to create value through quality, integrity, and customer-focused
+          solutions.
+        </p>
+      </div>
+    </div>
+  )
+}

package/templates/app/(frontend)/contact-us/page.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+export default function ContactUsPage() {
+  return (
+    <div className="contact-us">
+      <div className="content">
+        <h1>Contact Us</h1>
+        <p>
+          We would love to hear from you. Please reach out to us using the
+          information below or fill out the contact form.
+        </p>
+
+        <div className="contact-info">
+          <h2>Get in Touch</h2>
+          <ul>
+            <li>
+              <strong>Email:</strong> contact@example.com
+            </li>
+            <li>
+              <strong>Phone:</strong> +1 (555) 123-4567
+            </li>
+            <li>
+              <strong>Address:</strong> 123 Main Street, City, State 12345
+            </li>
+          </ul>
+        </div>
+
+        <div className="contact-form">
+          <h2>Send us a Message</h2>
+          <form>
+            <div className="form-group">
+              <label htmlFor="name">Name</label>
+              <input type="text" id="name" name="name" placeholder="Your name" />
+            </div>
+            <div className="form-group">
+              <label htmlFor="email">Email</label>
+              <input type="email" id="email" name="email" placeholder="Your email" />
+            </div>
+            <div className="form-group">
+              <label htmlFor="message">Message</label>
+              <textarea id="message" name="message" rows={5} placeholder="Your message"></textarea>
+            </div>
+            <button type="submit">Send Message</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/app/(frontend)/page.tsx

@@ -0,0 +1,59 @@
+import { headers as getHeaders } from 'next/headers.js'
+import Image from 'next/image'
+import { getPayload } from 'payload'
+import React from 'react'
+import { fileURLToPath } from 'url'
+
+import config from '@/payload.config'
+import './styles.css'
+
+export default async function HomePage() {
+  const headers = await getHeaders()
+  const payloadConfig = await config
+  const payload = await getPayload({ config: payloadConfig })
+  const { user } = await payload.auth({ headers })
+
+  const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
+
+  return (
+    <div className="home">
+      <div className="content">
+        <picture>
+          <source srcSet="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg" />
+          <Image
+            alt="Payload Logo"
+            height={65}
+            src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/ui/src/assets/payload-favicon.svg"
+            width={65}
+          />
+        </picture>
+        {!user && <h1>Welcome to your new project. Magically TESt</h1>}
+        {user && <h1>Welcome back, {user.email}</h1>}
+        <div className="links">
+          <a
+            className="admin"
+            href={payloadConfig.routes.admin}
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Go to admin panel
+          </a>
+          <a
+            className="docs"
+            href="https://payloadcms.com/docs"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            Documentation
+          </a>
+        </div>
+      </div>
+      <div className="footer">
+        <p>Update this page by editing</p>
+        <a className="codeLink" href={fileURL}>
+          <code>app/(frontend)/page.tsx</code>
+        </a>
+      </div>
+    </div>
+  )
+}

package/templates/app/(frontend)/share/page.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+
+export default function SharePage() {
+  return (
+    <div className="share">
+      <div className="content">
+        <h1>Share</h1>
+        <p>
+          Share our content with your friends and followers. Spread the word
+          and help us grow our community.
+        </p>
+
+        <div className="share-sections">
+          <div className="share-card">
+            <h2>Social Media</h2>
+            <p>Follow us and share our posts on your favorite platforms:</p>
+            <ul>
+              <li>
+                <a href="https://twitter.com/share" target="_blank" rel="noopener noreferrer">
+                  Twitter
+                </a>
+              </li>
+              <li>
+                <a href="https://facebook.com/share" target="_blank" rel="noopener noreferrer">
+                  Facebook
+                </a>
+              </li>
+              <li>
+                <a href="https://linkedin.com/share" target="_blank" rel="noopener noreferrer">
+                  LinkedIn
+                </a>
+              </li>
+              <li>
+                <a href="https://instagram.com" target="_blank" rel="noopener noreferrer">
+                  Instagram
+                </a>
+              </li>
+            </ul>
+          </div>
+
+          <div className="share-card">
+            <h2>Refer a Friend</h2>
+            <p>
+              Know someone who would benefit from our services? Share your
+              unique referral link and earn rewards.
+            </p>
+            <div className="referral-box">
+              <input
+                type="text"
+                value="https://example.com/ref/YOUR-CODE"
+                readOnly
+              />
+              <button>Copy Link</button>
+            </div>
+          </div>
+
+          <div className="share-card">
+            <h2>Newsletter</h2>
+            <p>
+              Stay updated with our latest news and updates. Subscribe to our
+              newsletter and share it with others.
+            </p>
+            <form className="newsletter-form">
+              <input type="email" placeholder="Enter your email" />
+              <button type="submit">Subscribe</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/app/(frontend)/styles.css

@@ -0,0 +1,164 @@
+:root {
+  --font-mono: 'Roboto Mono', monospace;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 18px;
+  line-height: 32px;
+
+  background: rgb(0, 0, 0);
+  -webkit-font-smoothing: antialiased;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+}
+
+body {
+  font-family: system-ui;
+  font-size: 18px;
+  line-height: 32px;
+
+  margin: 0;
+  color: rgb(1000, 1000, 1000);
+
+  @media (max-width: 1024px) {
+    font-size: 15px;
+    line-height: 24px;
+  }
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+h1 {
+  margin: 40px 0;
+  font-size: 64px;
+  line-height: 70px;
+  font-weight: bold;
+
+  @media (max-width: 1024px) {
+    margin: 24px 0;
+    font-size: 42px;
+    line-height: 42px;
+  }
+
+  @media (max-width: 768px) {
+    font-size: 38px;
+    line-height: 38px;
+  }
+
+  @media (max-width: 400px) {
+    font-size: 32px;
+    line-height: 32px;
+  }
+}
+
+p {
+  margin: 24px 0;
+
+  @media (max-width: 1024px) {
+    margin: calc(var(--base) * 0.75) 0;
+  }
+}
+
+a {
+  color: currentColor;
+
+  &:focus {
+    opacity: 0.8;
+    outline: none;
+  }
+
+  &:active {
+    opacity: 0.7;
+    outline: none;
+  }
+}
+
+svg {
+  vertical-align: middle;
+}
+
+.home {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  height: 100vh;
+  padding: 45px;
+  max-width: 1024px;
+  margin: 0 auto;
+  overflow: hidden;
+
+  @media (max-width: 400px) {
+    padding: 24px;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+
+    h1 {
+      text-align: center;
+    }
+  }
+
+  .links {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    a {
+      text-decoration: none;
+      padding: 0.25rem 0.5rem;
+      border-radius: 4px;
+    }
+
+    .admin {
+      color: rgb(0, 0, 0);
+      background: rgb(1000, 1000, 1000);
+      border: 1px solid rgb(0, 0, 0);
+    }
+
+    .docs {
+      color: rgb(1000, 1000, 1000);
+      background: rgb(0, 0, 0);
+      border: 1px solid rgb(1000, 1000, 1000);
+    }
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    @media (max-width: 1024px) {
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    .codeLink {
+      text-decoration: none;
+      padding: 0 0.5rem;
+      background: rgb(60, 60, 60);
+      border-radius: 4px;
+    }
+  }
+}