Merge pull request #248 from ixartz/minor-improvement

Minor improvement
ixartz · Feb 9, 2024 · af67fce · af67fce
2 parents a8d22d5 + 99575c5
commit af67fce
Show file tree

Hide file tree

Showing 13 changed files with 148 additions and 233 deletions.
diff --git a/playwright.config.ts b/playwright.config.ts
@@ -17,8 +17,8 @@ export default defineConfig({
   testDir: './tests',
   // Timeout per test
   timeout: 30 * 1000,
-  // Run tests in files in parallel
-  fullyParallel: true,
+  // Run tests in files in parallel on CI
+  fullyParallel: !!process.env.CI,
   // Fail the build on CI if you accidentally left test.only in the source code.
   forbidOnly: !!process.env.CI,
   // Retry on CI only

diff --git a/sentry.client.config.ts b/sentry.client.config.ts
@@ -23,7 +23,7 @@ Sentry.init({
 
   // You can remove this option if you're not planning to use the Sentry Session Replay feature:
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional Replay configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,

diff --git a/src/app/[locale]/(unauth)/about/page.tsx b/src/app/[locale]/(unauth)/about/page.tsx
@@ -23,12 +23,16 @@ export default function About() {
 
       <div className="mt-2 text-center text-sm">
         {`${t('translation_powered_by')} `}
-        <a href="https://l.crowdin.com/next-js" target="_blank">
+        <a
+          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
+          href="https://l.crowdin.com/next-js"
+          target="_blank"
+        >
           Crowdin
         </a>
       </div>
 
-      <a href="https://l.crowdin.com/next-js">
+      <a href="https://l.crowdin.com/next-js" target="_blank">
         <Image
           className="mx-auto mt-2"
           src="https://support.crowdin.com/assets/logos/core-logo/svg/crowdin-core-logo-cDark.svg"

diff --git a/src/app/[locale]/(unauth)/guestbook/page.tsx b/src/app/[locale]/(unauth)/guestbook/page.tsx
@@ -32,14 +32,15 @@ const Guestbook = () => {
       <div className="mt-2 text-center text-sm">
         {`${t('database_powered_by')} `}
         <a
+          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
           href="https://turso.tech/?utm_source=nextjsstarterbp"
           target="_blank"
         >
           Turso
         </a>
       </div>
 
-      <a href="https://turso.tech/?utm_source=nextjsstarterbp">
+      <a href="https://turso.tech/?utm_source=nextjsstarterbp" target="_blank">
         <Image
           className="mx-auto mt-2"
           src="/assets/images/turso.png"

diff --git a/src/app/[locale]/(unauth)/layout.tsx b/src/app/[locale]/(unauth)/layout.tsx
@@ -79,9 +79,7 @@ export default function Layout(props: { children: React.ReactNode }) {
         </>
       }
     >
-      <div className="py-5 text-xl [&_a:hover]:border-b-2 [&_a:hover]:border-blue-700 [&_a]:text-blue-700 [&_p]:my-6 [&_ul]:my-6">
-        {props.children}
-      </div>
+      <div className="py-5 text-xl [&_p]:my-6">{props.children}</div>
     </BaseTemplate>
   );
 }
diff --git a/src/app/[locale]/(unauth)/page.test.tsx b/src/app/[locale]/(unauth)/page.test.tsx
@@ -15,7 +15,7 @@ describe('Index page', () => {
       );
 
       const heading = screen.getByRole('heading', {
-        name: /Boilerplate code/,
+        name: /Boilerplate Code/,
       });
 
       expect(heading).toBeInTheDocument();

diff --git a/src/app/[locale]/(unauth)/page.tsx b/src/app/[locale]/(unauth)/page.tsx
@@ -1,4 +1,3 @@
-import Image from 'next/image';
 import { getTranslations } from 'next-intl/server';
 
 import { Sponsors } from '@/components/Sponsors';
@@ -18,205 +17,86 @@ export async function generateMetadata(props: { params: { locale: string } }) {
 export default function Index() {
   return (
     <>
-      <Image
-        src="/assets/images/nextjs-starter-banner.png"
-        alt="Nextjs starter banner"
-        width={600}
-        height={315}
-        unoptimized
-      />
-      GitHub repository:{' '}
-      <a href="https://github.com/ixartz/Next-js-Boilerplate">
-        NextJS Boilerplate
-      </a>
+      <p>
+        Explore our GitHub project for more information about{' '}
+        <a
+          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
+          href="https://github.com/ixartz/Next-js-Boilerplate"
+        >
+          Next.js Boilerplate
+        </a>
+        .
+      </p>
+      <p>
+        Our sponsors&apos; exceptional support has made this project possible.
+        Their services integrate seamlessly with the boilerplate, and we
+        recommend trying them out.
+      </p>
       <h2 className="mt-5 text-2xl font-bold">Sponsors</h2>
       <Sponsors />
       <h2 className="mt-5 text-2xl font-bold">
-        Boilerplate code for your Nextjs project with Tailwind CSS
+        Boilerplate Code for Your Next.js Project with Tailwind CSS
       </h2>
-      <p>
+      <p className="text-base">
         <span role="img" aria-label="rocket">
           🚀
         </span>{' '}
-        Next.js Boilerplate is a starter code for your Next js project by
-        putting developer experience first .{' '}
+        Next.js Boilerplate is a developer-friendly starter code for Next.js
+        projects, built with Tailwind CSS, and TypeScript.{' '}
         <span role="img" aria-label="zap">
           ⚡️
         </span>{' '}
-        Made with Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged,
-        VSCode, Netlify, PostCSS, Tailwind CSS, Authentication with Clerk,
-        Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and Turso.
-      </p>
-      <h3 className="text-lg font-semibold">Next js Boilerplate Features</h3>
-      <p>Developer experience first:</p>
-      <ul>
-        <li>
-          <span role="img" aria-label="fire">
-            🔥
-          </span>{' '}
-          <a href="https://nextjs.org" rel="nofollow">
-            Next.js
-          </a>{' '}
-          for Static Site Generator
-        </li>
-        <li>
-          <span role="img" aria-label="art">
-            🎨
-          </span>{' '}
-          Integrate with{' '}
-          <a href="https://tailwindcss.com" rel="nofollow">
-            Tailwind CSS
-          </a>
-        </li>
-        <li>
-          <span role="img" aria-label="nail_care">
-            💅
-          </span>{' '}
-          PostCSS for processing Tailwind CSS
-        </li>
-        <li>
-          <span role="img" aria-label="tada">
-            🎉
-          </span>{' '}
-          Type checking Typescript
-        </li>
-        <li>
-          <span role="img" aria-label="pencil2">
-            ✏️
-          </span>{' '}
-          Linter with{' '}
-          <a href="https://eslint.org" rel="nofollow">
-            ESLint
-          </a>
-        </li>
-        <li>
-          <span role="img" aria-label="hammer_and_wrench">
-            🛠
-          </span>{' '}
-          Code Formatter with{' '}
-          <a href="https://prettier.io" rel="nofollow">
-            Prettier
-          </a>
-        </li>
-        <li>
-          <span role="img" aria-label="fox_face">
-            🦊
-          </span>{' '}
-          Husky for Git Hooks
-        </li>
-        <li>
-          <span role="img" aria-label="no_entry_sign">
-            🚫
-          </span>{' '}
-          Lint-staged for running linters on Git staged files
-        </li>
-        <li>
-          <span role="img" aria-label="lock">
-            🔒
-          </span>{' '}
-          Authentication with{' '}
-          <a href="https://clerk.com?utm_source=github&utm_medium=sponsorship&utm_campaign=nextjs-boilerplate">
-            Clerk
-          </a>
-        </li>
-        <li>
-          <span role="img" aria-label="package">
-            📦
-          </span>{' '}
-          Type-safe ORM with DrizzleORM, compatible with SQLite, PostgreSQL, and
-          MySQL
-        </li>
-        <li>
-          <span role="img" aria-label="computer_disk">
-            💽
-          </span>{' '}
-          Global Database with{' '}
-          <a href="https://turso.tech/?utm_source=nextjsstarterbp">Turso</a>
-        </li>
-        <li>
-          <span role="img" aria-label="gyrophare">
-            🚨
-          </span>{' '}
-          Monitoring with{' '}
-          <a href="https://www.checklyhq.com/?utm_source=github&utm_medium=sponsorship&utm_campaign=next-js-boilerplate">
-            Checkly
-          </a>
-        </li>
-        <li>
-          <span role="img" aria-label="no_entry_sign">
-            🗂
-          </span>{' '}
-          VSCode configuration: Debug, Settings, Tasks and extension for
-          PostCSS, ESLint, Prettier, TypeScript
-        </li>
-        <li>
-          <span role="img" aria-label="robot">
-            🤖
-          </span>{' '}
-          SEO metadata, JSON-LD and Open Graph tags with Next SEO
-        </li>
-        <li>
-          <span role="img" aria-label="robot">
-            ⚙️
-          </span>{' '}
-          <a
-            href="https://www.npmjs.com/package/@next/bundle-analyzer"
-            rel="nofollow"
-          >
-            Bundler Analyzer
-          </a>
-        </li>
-        <li>
-          <span role="img" aria-label="rainbow">
-            🌈
-          </span>{' '}
-          Include a FREE minimalist theme
-        </li>
-        <li>
-          <span role="img" aria-label="hundred">
-            💯
-          </span>{' '}
-          Maximize lighthouse score
-        </li>
-      </ul>
-      <p>Built-in feature from Next.js:</p>
-      <ul>
-        <li>
-          <span role="img" aria-label="coffee">
-            ☕
-          </span>{' '}
-          Minify HTML &amp; CSS
-        </li>
-        <li>
-          <span role="img" aria-label="dash">
-            💨
-          </span>{' '}
-          Live reload
-        </li>
-        <li>
-          <span role="img" aria-label="white_check_mark">
-            ✅
-          </span>{' '}
-          Cache busting
-        </li>
-      </ul>
-      <h3 className="text-lg font-semibold">Our Starter code Philosophy</h3>
-      <ul>
-        <li>Minimal code</li>
-        <li>SEO-friendly</li>
-        <li>
-          <span role="img" aria-label="rocket">
-            🚀
-          </span>{' '}
-          Production-ready
-        </li>
-      </ul>
-      <p>
-        Check our GitHub project for more information about{' '}
-        <a href="https://github.com/ixartz/Next-js-Boilerplate">
-          Nextjs Boilerplate
+        Made with developer experience first: Next.js, TypeScript, ESLint,
+        Prettier, Husky, Lint-Staged, Jest, Testing Library, Commitlint, VSCode,
+        PostCSS, Tailwind CSS, Authentication with{' '}
+        <a
+          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
+          href="https://clerk.com?utm_source=github&amp;utm_medium=sponsorship&amp;utm_campaign=nextjs-boilerplate"
+          target="_blank"
+        >
+          Clerk
         </a>
-        .
+        , Database with DrizzleORM (SQLite, PostgreSQL, and MySQL) and{' '}
+        <a
+          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
+          href="https://turso.tech/?utm_source=nextjsstarterbp"
+          target="_blank"
+        >
+          Turso
+        </a>
+        , Error Monitoring with{' '}
+        <a
+          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
+          href="https://sentry.io/for/nextjs/?utm_source=github&amp;utm_medium=paid-community&amp;utm_campaign=general-fy25q1-nextjs&amp;utm_content=github-banner-nextjsboilerplate-logo"
+          target="_blank"
+        >
+          Sentry
+        </a>
+        , Logging with Pino.js and Log Management with{' '}
+        <a
+          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
+          href="https://betterstack.com/?utm_source=github&amp;utm_medium=sponsorship&amp;utm_campaign=next-js-boilerplate"
+          target="_blank"
+        >
+          Better Stack
+        </a>
+        , Monitoring as Code with{' '}
+        <a
+          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
+          href="https://www.checklyhq.com/?utm_source=github&amp;utm_medium=sponsorship&amp;utm_campaign=next-js-boilerplate"
+          target="_blank"
+        >
+          Checkly
+        </a>
+        , Storybook, Multi-language (i18n), One-Click Deploy on{' '}
+        <a
+          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
+          href="https://www.netlify.com"
+          target="_blank"
+        >
+          Netlify
+        </a>
+        , and more.
       </p>
     </>
   );

diff --git a/src/app/[locale]/(unauth)/portfolio/[slug]/page.tsx b/src/app/[locale]/(unauth)/portfolio/[slug]/page.tsx
@@ -35,21 +35,26 @@ const PortfolioDetail = (props: IPortfolioDetailProps) => {
       <div className="mt-5 text-center text-sm">
         {`${t('error_reporting_powered_by')} `}
         <a
+          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
           href="https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
           target="_blank"
         >
           Sentry
         </a>{' '}
         - {`${t('coverage_powered_by')} `}
         <a
+          className="text-blue-700 hover:border-b-2 hover:border-blue-700"
           href="https://about.codecov.io/codecov-free-trial/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
           target="_blank"
         >
           Codecov
         </a>
       </div>
 
-      <a href="https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo">
+      <a
+        href="https://sentry.io/for/nextjs/?utm_source=github&utm_medium=paid-community&utm_campaign=general-fy25q1-nextjs&utm_content=github-banner-nextjsboilerplate-logo"
+        target="_blank"
+      >
         <Image
           className="mx-auto mt-2"
           src="/assets/images/sentry-dark.png"