### Run Next.js Development Server

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/README.md

Commands to start the Next.js development server using different package managers. This allows for live code updates in the browser. Assumes Node.js and a package manager (npm, yarn, pnpm, or bun) are installed.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

--------------------------------

### Build and Serve Production App (npm run build, npm start)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/WARP.md

Builds the Next.js application for production and then starts a local server to preview the production build. The default port for 'npm start' is typically 3000, but can be specified.

```bash
# Build:
npm run build

# Start locally:
# Default:
npm start

# Specific port:
# PowerShell:
$env:PORT=3000; npm start

# Bash:
PORT=3000 npm start

# Or using npm start arguments:
npm start -- -p 3000
```

--------------------------------

### Production Environment Setup (.env.production.local)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/NEW ACF EXPORTS/README-ENVIRONMENT.md

This snippet demonstrates the configuration for a production environment using the `.env.production.local` file. It includes placeholders for the production WordPress URL, GraphQL endpoint, and the production Next.js site URL.

```bash
# .env.production.local
NEXT_PUBLIC_WORDPRESS_URL=https://your-wordpress-site.com
NEXT_PUBLIC_WORDPRESS_GRAPHQL_ENDPOINT=https://your-wordpress-site.com/graphql
NEXT_PUBLIC_SITE_URL=https://your-nextjs-site.com
```

--------------------------------

### Installing Dependencies

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/NEW ACF EXPORTS/PROJECT-OVERVIEW.md

The command to install all project dependencies listed in the package.json file. This is a standard step after cloning a repository.

```bash
npm install
```

--------------------------------

### CI/CD Integration - GitHub Actions - Bash

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/TEST-SUITE-README.md

Provides an example of a GitHub Actions step to integrate the CDA test suite into a CI/CD pipeline. It demonstrates starting the development server, running tests, and cleaning up resources.

```bash
# Example GitHub Actions step
- name: Run CDA Test Suite
  run: |
    npm run dev &
    sleep 10
    npm run test
    kill %1
```

--------------------------------

### Next.js Build and Start Commands

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/IMPLEMENTATION_STATUS.md

Commands for building and starting the Next.js application. `npm run build` compiles the project successfully, and `npm run start` is recommended for production instead of the dev server, which is currently experiencing a 500 error.

```bash
# Build the Next.js application
npm run build

# Start the production server (recommended over dev server)
npm run start
```

--------------------------------

### Starting Development Server

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/NEW ACF EXPORTS/PROJECT-OVERVIEW.md

Command to start the Next.js development server, which enables features like hot-reloading and provides a local development environment.

```bash
npm run dev
```

--------------------------------

### Build and Start Production Server

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Dynamic-Routes-Implementation-Summary.md

Commands to build the static routes of the application and start the production server. Also includes verification steps to list generated static routes for services, case studies, and team pages.

```bash
# Generate static routes and build
npm run build

# Start production server
npm start

# Verify static generation
ls .next/server/app/services
ls .next/server/app/case-studies
ls .next/server/app/team
```

--------------------------------

### Build and Start Production Server (npm)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/WARP.md

Builds the Next.js application for production and then starts the production server. The server can be configured to run on a specific port.

```bash
npm run build

```

```bash
npm start

```

```powershell
$env:PORT=3000; npm start

```

```bash
PORT=3000 npm start

```

```bash
npm start -- -p 3000

```

--------------------------------

### Install Dependencies (npm)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/WARP.md

Installs project dependencies using npm. It's recommended to use 'npm ci' for consistent installs based on package-lock.json. 'npm install' can be used if necessary.

```bash
npm ci

```

```bash
npm install

```

--------------------------------

### Local Development Environment Setup (.env.local)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/NEW ACF EXPORTS/README-ENVIRONMENT.md

This snippet shows how to configure the `.env.local` file for local development, specifying the WordPress URL, GraphQL endpoint, and the local site URL. These variables are prefixed with `NEXT_PUBLIC_` to be available in the browser.

```bash
# .env.local
NEXT_PUBLIC_WORDPRESS_URL=http://localhost/CDA-WEBSITE-PROJECT/CDA-WEBSITE/wordpress-backend
NEXT_PUBLIC_WORDPRESS_GRAPHQL_ENDPOINT=http://localhost/CDA-WEBSITE-PROJECT/CDA-WEBSITE/wordpress-backend/graphql
NEXT_PUBLIC_SITE_URL=http://localhost:3000
```

--------------------------------

### URL Structure Examples

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Index-Pages-Pagination-Implementation.md

Illustrates various URL structures for accessing different sections and filtered views of the website. These examples showcase how parameters are used for pagination, search, and filtering. This is essential for SEO and user navigation.

```url
/services                          # All services
/services?page=2                   # Page 2
/services?search=web               # Search results  
/services?service_type[]=id1       # Filtered by type
/services?search=web&page=2        # Combined filters
```

--------------------------------

### Page Implementation Example (React JSX)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/development guide/GLOBAL LAYERS/list-of-files-required-instructions-for-global-layers.txt

This example demonstrates how to import and use the `ApproachBlock` component within a React page file (e.g., `src/app/page.js`). It shows how to pass the relevant global and page-specific data down as props. Requires the `ApproachBlock` component and data fetched via GraphQL.

```javascript
import ApproachBlock from '../components/GlobalBlocks/ApproachBlock';

// Inside your page component:
const YourPage = ({ pageData }) => {
  return (
    <div>
      {/* ... other page content */}
      <ApproachBlock 
        globalData={pageData.globalOptions?.globalSharedContent}
        pageData={pageData.page?.approachBlockOverride} // Assuming a similar override structure
        useOverride={pageData.page?.overrideApproachBlock} // Assuming a similar override flag
      />
      {/* ... other page content */}
    </div>
  );
};

export default YourPage;
```

--------------------------------

### GraphQL Query for Ready To Start CTA Block

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Global-Blocks-Implementation-Summary.md

This GraphQL query fetches the 'Ready To Start CTA' block from the global shared content. It includes fields for pre-title, main title, button text and URL, and the background image, designed for driving user engagement.

```graphql
# Get just CTA block
query GetCTA {
  globalOptions {
    globalSharedContent {
      ctaBlock {
        pretitle
        title
        buttonText
        buttonUrl
        backgroundImage {
          node {
            sourceUrl
            altText
          }
        }
      }
    }
  }
}
```

--------------------------------

### Start Development Server (npm)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/WARP.md

Starts the development server for the Next.js application. The default port is 3000. You can specify a different port using environment variables.

```bash
npm run dev

```

```powershell
$env:PORT=3003; npm run dev

```

```bash
PORT=3003 npm run dev

```

--------------------------------

### Start Development Server (npm run dev)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/WARP.md

Starts the development server for the Next.js application. The default port is 3000. To run on a different port, environment variables can be set differently for PowerShell (Windows) or Bash (macOS/Linux).

```bash
# Default:
npm run dev  # serves on http://localhost:3000

# Change port for tests:
# PowerShell (Windows):
$env:PORT=3003; npm run dev

# Bash (macOS/Linux):
PORT=3003 npm run dev
```

--------------------------------

### Apollo Provider Setup (JavaScript)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/WARP.md

Wraps application components with ApolloProvider, making the Apollo Client instance available throughout the component tree. This is essential for data fetching with Apollo.

```javascript
// src/components/providers/ApolloProvider.js
import { ApolloProvider } from '@apollo/client';
import client from '../../lib/apollo-client';

function AppApolloProvider({ children }) {
  return (
    <ApolloProvider client={client}>
      {children}
    </ApolloProvider>
  );
}

export default AppApolloProvider;

```

--------------------------------

### Local Git Commit and Push Commands

Source: https://github.com/razvanvlad/cda-website-project/blob/main/PRODUCTION-COMMIT-GUIDE.md

These bash commands are used to add all changes to the Git staging area, commit them with a specific message, and push them to the 'main' branch of the remote repository. Ensure Git is installed and the project path is correct.

```bash
cd "C:\\xampp\\htdocs\\CDA-WEBSITE-PROJECT"
git add .
git commit -m "Production comit 3"
git push origin main
```

--------------------------------

### GraphQL: Get Basic List of Case Studies

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Working-GraphQL-Queries.md

Fetches a basic list of case studies, useful for archive pages. Includes essential information like title, slug, date, excerpt, featured image, and project overview data.

```graphql
query GetCaseStudies {
  caseStudies {
    nodes {
      id
      title
      slug
      date
      excerpt
      featuredImage {
        node {
          sourceUrl
          altText
        }
      }
      caseStudyFields {
        projectOverview {
          clientName
          clientLogo {
            node {
              sourceUrl
              altText
            }
          }
        }
        featured
      }
      projectTypes {
        nodes {
          name
          slug
          description
        }
      }
    }
  }
}
```

--------------------------------

### GraphQL RootQuery Fields Example

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/development guide/GLOBAL LAYERS/global troubleshoot/global-queries-testing.txt

This is an example response from a GraphQL query to the '__type' field for 'RootQuery'. It demonstrates the structure of the returned data, listing fields like 'allSettings', 'categories', 'contentNodes', and 'posts', along with their GraphQL types. This helps developers understand how to query specific data points.

```json
{
  "data": {
    "__type": {
      "fields": [
        {
          "name": "allSettings",
          "type": {
            "name": "Settings"
          }
        },
        {
          "name": "categories",
          "type": {
            "name": "RootQueryToCategoryConnection"
          }
        },
        {
          "name": "category",
          "type": {
            "name": "Category"
          }
        },
        {
          "name": "comment",
          "type": {
            "name": "Comment"
          }
        },
        {
          "name": "comments",
          "type": {
            "name": "RootQueryToCommentConnection"
          }
        },
        {
          "name": "contentNode",
          "type": {
            "name": "ContentNode"
          }
        },
        {
          "name": "contentNodes",
          "type": {
            "name": "RootQueryToContentNodeConnection"
          }
        },
        {
          "name": "contentType",
          "type": {
            "name": "ContentType"
          }
        },
        {
          "name": "contentTypes",
          "type": {
            "name": "RootQueryToContentTypeConnection"
          }
        },
        {
          "name": "discussionSettings",
          "type": {
            "name": "DiscussionSettings"
          }
        },
        {
          "name": "generalSettings",
          "type": {
            "name": "GeneralSettings"
          }
        },
        {
          "name": "globalOptions",
          "type": {
            "name": "GlobalOptions"
          }
        },
        {
          "name": "mediaItem",
          "type": {
            "name": "MediaItem"
          }
        },
        {
          "name": "mediaItems",
          "type": {
            "name": "RootQueryToMediaItemConnection"
          }
        },
        {
          "name": "menu",
          "type": {
            "name": "Menu"
          }
        },
        {
          "name": "menuItem",
          "type": {
            "name": "MenuItem"
          }
        },
        {
          "name": "menuItems",
          "type": {
            "name": "RootQueryToMenuItemConnection"
          }
        },
        {
          "name": "menus",
          "type": {
            "name": "RootQueryToMenuConnection"
          }
        },
        {
          "name": "node",
          "type": {
            "name": "Node"
          }
        },
        {
          "name": "nodeByUri",
          "type": {
            "name": "UniformResourceIdentifiable"
          }
        },
        {
          "name": "page",
          "type": {
            "name": "Page"
          }
        },
        {
          "name": "pages",
          "type": {
            "name": "RootQueryToPageConnection"
          }
        },
        {
          "name": "plugin",
          "type": {
            "name": "Plugin"
          }
        },
        {
          "name": "plugins",
          "type": {
            "name": "RootQueryToPluginConnection"
          }
        },
        {
          "name": "post",
          "type": {
            "name": "Post"
          }
        },
        {
          "name": "postFormat",
          "type": {
            "name": "PostFormat"
          }
        },
        {
          "name": "postFormats",
          "type": {
            "name": "RootQueryToPostFormatConnection"
          }
        },
        {
          "name": "posts",
          "type": {
            "name": "RootQueryToPostConnection"
          }
        },
        {
          "name": "readingSettings",
          "type": {
            "name": "ReadingSettings"
          }
        },
        {
          "name": "registeredScripts",
          "type": {
            "name": "RootQueryToEnqueuedScriptConnection"
          }
        },
        {
          "name": "registeredStylesheets",
          "type": {
            "name": "RootQueryToEnqueuedStylesheetConnection"
          }
        },
        {
          "name": "revisions",
          "type": {
            "name": "RootQueryToRevisionsConnection"
          }
        },
        {
          "name": "tag",
          "type": {
            "name": "Tag"
          }
        },
        {
          "name": "tags",
          "type": {
            "name": "RootQueryToTagConnection"
          }
        },
        {
          "name": "taxonomies",
          "type": {
            "name": "RootQueryToTaxonomyConnection"
          }
        },
        {
          "name": "taxonomy",
          "type": {
            "name": "Taxonomy"
          }
        },
        {
          "name": "termNode",
          "type": {
            "name": "TermNode"
          }
        },
        {
          "name": "terms",
          "type": {
            "name": "RootQueryToTermNodeConnection"
          }
        },
        {
          "name": "theme",
          "type": {
            "name": "Theme"
          }
        }
      ]
    }
  }
}
```

--------------------------------

### Next.js Environment Variable Debug Output

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/NEW ACF EXPORTS/README-ENVIRONMENT.md

This is an example of the console output when Next.js is in development mode, showing the detected environment, WordPress URL, site URL, and GraphQL endpoint. This helps in debugging environment configurations.

```text
🔧 Next.js Config Debug:
  Environment: development
  Is Local: true
  WordPress URL: http://localhost/...
  Site URL: http://localhost:3000
  GraphQL Endpoint: http://localhost/.../graphql
```

--------------------------------

### Build and Development Commands

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/NEW ACF EXPORTS/PROJECT-OVERVIEW.md

Standard npm scripts for managing the Next.js application lifecycle. These commands cover building for production, running the production server, starting the development server, and linting the code.

```bash
npm run build        # Production build
npm run start        # Production server
npm run dev          # Development server
npm run lint         # Code linting
```

--------------------------------

### Define Ready to Start CTA Configuration

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/CDA-Complete-ACF-Field-Definitions.txt

Sets up a call-to-action section with a main heading, button text, and a button URL. This structure is designed for promotional purposes and includes GraphQL integration.

```php
array(
    'key' => 'field_global_cta',
    'label' => 'Ready To Start CTA',
    'name' => 'cta_block',
    'type' => 'group',
    'show_in_graphql' => 1,
    'graphql_field_name' => 'ctaBlock',
    'sub_fields' => array(
        array(
            'key' => 'field_global_cta_heading',
            'label' => 'Main Heading',
            'name' => 'heading',
            'type' => 'text',
            'default_value' => 'Ready To Start Your Project?',
            'show_in_graphql' => 1,
        ),
        array(
            'key' => 'field_global_cta_button_text',
            'label' => 'CTA Button Text',
            'name' => 'button_text',
            'type' => 'text',
            'default_value' => "Let's Talk",
            'show_in_graphql' => 1,
        ),
        array(
            'key' => 'field_global_cta_button_url',
            'label' => 'CTA Button URL',
            'name' => 'button_url',
            'type' => 'url',
            'show_in_graphql' => 1,
        ),
    ),
)
```

--------------------------------

### Install Dependencies (npm ci)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/WARP.md

Installs project dependencies using npm ci, which is recommended for reproducible builds as it uses the package-lock.json file. If necessary, 'npm install' can be used to add or update packages.

```bash
npm ci
# If needed:
npm install
```

--------------------------------

### Apollo Client Setup (JavaScript)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/WARP.md

Configuration for Apollo Client used to interact with the WordPress GraphQL endpoint. It reads the GraphQL endpoint from environment variables.

```javascript
// src/lib/apollo-client.js
import { ApolloClient, InMemoryCache } from '@apollo/client';

const client = new ApolloClient({
  uri: process.env.NEXT_PUBLIC_WORDPRESS_GRAPHQL_ENDPOINT || 'http://localhost/CDA-WEBSITE-PROJECT/CDA-WEBSITE/wordpress-backend/graphql',
  cache: new InMemoryCache()
});

export default client;

```

--------------------------------

### WordPress GraphQL Query Example

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/IMPLEMENTATION_STATUS.md

An example JSON structure representing the data returned from the WordPress GraphQL endpoint. It shows the `globalOptions` with `globalContentBlocks` and `page` data, including toggles for content blocks like `valuesBlock` and `enableValues`.

```json
{
  "globalOptions": {
    "globalContentBlocks": {
      "valuesBlock": {
        "title": "Our Values",
        "subtitle": "The Foundation Of Our Work",
        "values": null
      }
    }
  },
  "page": {
    "title": "Homepage",
    "homepageContentClean": {
      "globalContentSelection": {
        "enableValues": true,
        "enableTechnologiesSlider": false
      }
    }
  }
}
```

--------------------------------

### GraphQL Queries

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Global-Blocks-Implementation-Summary.md

Example GraphQL queries to fetch data for the global blocks, including a complete query for all shared content and individual queries for specific blocks.

```APIDOC
## GraphQL Query Examples

### Complete Global Content Query
```graphql
query GetAllGlobalContent {
  globalOptions {
    globalSharedContent {
      # Existing blocks
      whyCdaBlock {
        title
        subtitle
        cards {
          title
          description
          image {
            node {
              sourceUrl
              altText
            }
          }
        }
      }
      
      approachBlock {
        title
        subtitle
        steps {
          stepNumber
          title
          description
          image {
            node {
              sourceUrl
              altText
            }
          }
        }
      }
      
      # New blocks added
      technologiesBlock {
        title
        subtitle
        categories {
          icon {
            node {
              sourceUrl
              altText
            }
          }
          name
          description
          url
        }
      }
      
      showreelBlock {
        title
        subtitle
        videoThumbnail {
          node {
            sourceUrl
            altText
          }
        }
        videoUrl
        clientLogos {
          logo {
            node {
              sourceUrl
              altText
            }
          }
          name
          url
        }
      }
      
      newsletterBlock {
        title
        subtitle
        description
        submitText
        privacyText
      }
      
      ctaBlock {
        pretitle
        title
        buttonText
        buttonUrl
        backgroundImage {
          node {
            sourceUrl
            altText
          }
        }
      }
    }
  }
}
```

### Individual Block Queries

#### Technologies Block Query
```graphql
query GetTechnologies {
  globalOptions {
    globalSharedContent {
      technologiesBlock {
        title
        subtitle
        categories {
          icon {
            node {
              sourceUrl
              altText
            }
          }
          name
          description
          url
        }
      }
    }
  }
}
```

#### Showreel Block Query
```graphql
query GetShowreel {
  globalOptions {
    globalSharedContent {
      showreelBlock {
        title
        subtitle
        videoThumbnail {
          node {
            sourceUrl
            altText
          }
        }
        videoUrl
        clientLogos {
          logo {
            node {
              sourceUrl
              altText
            }
          }
          name
          url
        }
      }
    }
  }
}
```

#### CTA Block Query
```graphql
query GetCTA {
  globalOptions {
    globalSharedContent {
      ctaBlock {
        pretitle
        title
        buttonText
        buttonUrl
        backgroundImage {
          node {
            sourceUrl
            altText
          }
        }
      }
    }
  }
}
```
```

--------------------------------

### Start Development Server with Verbose Logging (Bash)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/GraphQL-Query-Testing-Methods.md

Initiates the development server for the CDA frontend with verbose logging enabled. This is crucial for monitoring GraphQL errors in real-time during development. It requires navigating to the 'cda-frontend' directory and running the 'npm run dev' command.

```bash
cd cda-frontend && npm run dev
```

--------------------------------

### Apollo Client Setup (JavaScript/TypeScript)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/WARP.md

Configuration for Apollo Client used for GraphQL data fetching. It reads the GraphQL endpoint from the NEXT_PUBLIC_WORDPRESS_GRAPHQL_ENDPOINT environment variable. If unset, it falls back to a default local endpoint. The setup is typically found in src/lib/apollo-client.js and src/lib/graphql/client.js.

```javascript
// Example from src/lib/apollo-client.js (conceptual)
import { ApolloClient, HttpLink, InMemoryCache } from '@apollo/client';

const endpoint = process.env.NEXT_PUBLIC_WORDPRESS_GRAPHQL_ENDPOINT || 'http://localhost/CDA-WEBSITE-PROJECT/CDA-WEBSITE/wordpress-backend/graphql';

const client = new ApolloClient({
  link: new HttpLink({ uri: endpoint }),
  cache: new InMemoryCache(),
});

export default client;

```

--------------------------------

### Basic Archive Access URLs

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Index-Pages-Pagination-Implementation.md

Provides examples of base URLs for accessing main archive sections of the website. These are foundational links for users and search engines to discover content.

```url
https://example.com/services
https://example.com/case-studies  
https://example.com/team
```

--------------------------------

### Homepage Fetch Data (JavaScript)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/WARP.md

Example of a client component on the homepage fetching WordPress GraphQL data directly using the native fetch API. It normalizes fetched data for UI components.

```javascript
// src/app/page.js (simplified example)
'use client';

import { useEffect, useState } from 'react';

async function fetchGlobalContent() {
  const res = await fetch(process.env.NEXT_PUBLIC_WORDPRESS_GRAPHQL_ENDPOINT, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      query: `query GetHomePageContent { ... }` // Your GraphQL query
    })
  });
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }
  return res.json();
}

export default function HomePage() {
  const [content, setContent] = useState(null);

  useEffect(() => {
    fetchGlobalContent().then(data => {
      // Normalize data here
      setContent(data);
    }).catch(error => {
      console.error('Error fetching content:', error);
    });
  }, []);

  // Render components based on normalized content
  return (
    <div>
      {/* Render content blocks */}
    </div>
  );
}

```

--------------------------------

### Remote WordPress for Local Development

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/NEW ACF EXPORTS/README-ENVIRONMENT.md

This configuration allows local development to connect to a remote WordPress instance. It specifies the remote WordPress URL and its GraphQL endpoint in the `.env.local` file.

```bash
# .env.local
NEXT_PUBLIC_WORDPRESS_URL=https://cdanewwebsite.wpenginepowered.com
NEXT_PUBLIC_WORDPRESS_GRAPHQL_ENDPOINT=https://cdanewwebsite.wpenginepowered.com/graphql
```

--------------------------------

### Browser Testing Checklist Example (Text)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/BROWSER-COMPATIBILITY-MATRIX.md

A sample checklist format for manual browser testing, indicating status with checkmarks or warnings. Useful for tracking testing progress across different browsers.

```text
□ All layouts render correctly
□ Animations are smooth
□ JavaScript functions without errors
```

--------------------------------

### PowerShell Example for Testing Policy GraphQL Query

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/cda-frontend/policies.md

A PowerShell script demonstrating how to send a POST request to the WordPress GraphQL endpoint to fetch a single policy by its slug. It includes the query and variables, and outputs the JSON response.

```powershell
$body = @{
  query = @"
query PolicyCoreBySlug($slug: ID!) {
  policy(id: $slug, idType: SLUG) {
    id
    slug
    title
    date
    modified
    excerpt
    content
    featuredImage { node { sourceUrl altText } }
  }
}
"@
  variables = @{ slug = "privacy-policy" }
}
 | ConvertTo-Json -Depth 10

Invoke-WebRequest -Uri "http://localhost/CDA-WEBSITE-PROJECT/CDA-WEBSITE/wordpress-backend/graphql" `
  -Method POST -ContentType "application/json" -Body $body | 
  Select-Object -ExpandProperty Content
```

--------------------------------

### GraphQL Cursor Pagination Example (GraphQL)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Project-Success-Summary.md

Illustrates the correct implementation of cursor-based pagination for fetching services in GraphQL. This pattern is essential for handling large datasets efficiently and avoiding issues with deprecated offset-based pagination. It includes parameters like 'first', 'after', and 'search', along with 'pageInfo' for navigation.

```graphql
# Cursor Pagination (Correct)
query GetServicesWithPagination($first: Int = 12, $after: String, $search: String) {
  services(first: $first, after: $after, where: { search: $search }) {
    nodes { /* fields */ }
    pageInfo {
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
    }
  }
}
```

--------------------------------

### Production Environment Variables (.env.production.local)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/cda-frontend/README-ENVIRONMENT.md

This snippet demonstrates the environment variables for a production deployment. It includes the production WordPress URL, GraphQL endpoint, and the production site URL. These are typically configured in a `.env.production.local` file or directly in the hosting platform's environment settings.

```bash
# .env.production.local
NEXT_PUBLIC_WORDPRESS_URL=https://your-wordpress-site.com
NEXT_PUBLIC_WORDPHRESS_GRAPHQL_ENDPOINT=https://your-wordpress-site.com/graphql
NEXT_PUBLIC_SITE_URL=https://your-nextjs-site.com
```

--------------------------------

### Switching to Remote WordPress for Development (.env.local)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/CDA-WEBSITE/cda-frontend/README-ENVIRONMENT.md

This configuration allows developers to use a remote WordPress instance for development by updating the `NEXT_PUBLIC_WORDPRESS_URL` and `NEXT_PUBLIC_WORDPHRESS_GRAPHQL_ENDPOINT` in the `.env.local` file. This is useful for testing against a staging or live environment.

```bash
# .env.local
NEXT_PUBLIC_WORDPRESS_URL=https://cdanewwebsite.wpenginepowered.com
NEXT_PUBLIC_WORDPHRESS_GRAPHQL_ENDPOINT=https://cdanewwebsite.wpenginepowered.com/graphql
```

--------------------------------

### Case Studies GraphQL Query - GraphQL

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Custom-Post-Types-Implementation-Summary.md

Example GraphQL query to fetch case study data. It retrieves the case study title, project overview details (client name, logo, URL, completion date), key metrics, featured status, and associated project types.

```graphql
query GetCaseStudies {
  caseStudies {
    nodes {
      title
      caseStudyFields {
        projectOverview {
          clientName
          clientLogo {
            node {
              sourceUrl
              altText
            }
          }
          projectUrl
          completionDate
        }
        keyMetrics {
          metric
          value
          description
        }
        featured
      }
      projectTypes {
        nodes {
          name
          slug
        }
      }
    }
  }
}
```

--------------------------------

### Vercel Production Environment Variables Configuration

Source: https://github.com/razvanvlad/cda-website-project/blob/main/PRODUCTION-COMMIT-GUIDE.md

These environment variables are crucial for configuring the Vercel deployment of the Next.js application. They specify the URLs for WordPress, its GraphQL endpoint, the site's public URL, and GraphQL caching/revalidation times. Page ID variables are also included for specific content retrieval.

```env
NEXT_PUBLIC_WORDPRESS_URL=https://cdanewwebsite.wpenginepowered.com
NEXT_PUBLIC_WORDPRESS_GRAPHQL_ENDPOINT=https://cdanewwebsite.wpenginepowered.com/graphql
NEXT_PUBLIC_SITE_URL=https://cda-frontend-nine.vercel.app
NEXT_PUBLIC_GRAPHQL_REVALIDATE=3600

NEXT_PUBLIC_HOMEPAGE_ID=2
NEXT_PUBLIC_ABOUT_PAGE_ID=317
NEXT_PUBLIC_CONTACT_PAGE_ID=791
```

--------------------------------

### GraphQL: Case Studies Pagination

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Working-GraphQL-Queries.md

Fetches case studies with cursor-based pagination, utilizing `first`, `after`, and `search` variables. This query is designed for paginated case study archives and includes project overview details.

```graphql
query GetCaseStudiesWithPagination($first: Int = 12, $after: String, $search: String) {
  caseStudies(first: $first, after: $after, where: { search: $search }) {
    nodes {
      id
      title
      slug
      date
      excerpt
      featuredImage {
        node {
          sourceUrl
          altText
        }
      }
      caseStudyFields {
        projectOverview {
          clientName
          clientLogo {
            node {
              sourceUrl
              altText
            }
          }
        }
        featured
      }
      projectTypes {
        nodes {
          id
          name
          slug
        }
      }
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
    }
  }
}
```

--------------------------------

### Case Studies - Basic List

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Working-GraphQL-Queries.md

Retrieves a list of case studies for the archive page, including project overview data.

```APIDOC
## GET /case-studies

### Description
Fetches a list of case studies suitable for an archive page. This includes basic information like title, excerpt, and project overview details.

### Method
GET

### Endpoint
/case-studies

### Parameters
None

### Request Example
```graphql
query GetCaseStudies {
  caseStudies {
    nodes {
      id
      title
      slug
      date
      excerpt
      featuredImage {
        node {
          sourceUrl
          altText
        }
      }
      caseStudyFields {
        projectOverview {
          clientName
          clientLogo {
            node {
              sourceUrl
              altText
            }
          }
        }
        featured
      }
      projectTypes {
        nodes {
          name
          slug
          description
        }
      }
    }
  }
}
```

### Response
#### Success Response (200)
- **id** (ID) - The unique identifier of the case study.
- **title** (String) - The title of the case study.
- **slug** (String) - The slug of the case study.
- **date** (String) - The publication date of the case study.
- **excerpt** (String) - A brief excerpt of the case study content.
- **featuredImage** (Object) - Information about the featured image.
  - **node** (Object) - Details of the image node.
    - **sourceUrl** (String) - The URL of the image.
    - **altText** (String) - The alt text of the image.
- **caseStudyFields** (Object) - Custom fields for the case study.
  - **projectOverview** (Object) - Overview of the project.
    - **clientName** (String) - The name of the client.
    - **clientLogo** (Object) - The client's logo.
      - **node** (Object) - Details of the logo image node.
        - **sourceUrl** (String) - The URL of the logo.
        - **altText** (String) - The alt text of the logo.
  - **featured** (Boolean) - Indicates if the case study is featured.
- **projectTypes** (Object) - Information about project types.
  - **nodes** (Array) - An array of project type nodes.
    - **name** (String) - The name of the project type.
    - **slug** (String) - The slug of the project type.
    - **description** (String) - The description of the project type.

#### Response Example
```json
{
  "data": {
    "caseStudies": {
      "nodes": [
        {
          "id": "case-study-1",
          "title": "Successful Client Project",
          "slug": "successful-client-project",
          "date": "2023-10-26T10:00:00+00:00",
          "excerpt": "<p>Details about a successful project with a key client.</p>",
          "featuredImage": {
            "node": {
              "sourceUrl": "/path/to/case-study-image.jpg",
              "altText": "Case Study Image Alt Text"
            }
          },
          "caseStudyFields": {
            "projectOverview": {
              "clientName": "Client Corp",
              "clientLogo": {
                "node": {
                  "sourceUrl": "/path/to/client-logo.png",
                  "altText": "Client Logo Alt Text"
                }
              }
            },
            "featured": true
          },
          "projectTypes": {
            "nodes": [
              {
                "name": "Web Development",
                "slug": "web-development",
                "description": "Custom web solutions."
              }
            ]
          }
        }
      ]
    }
  }
}
```
```

--------------------------------

### Run Existing Test Suite and Access GraphQL Test Page (Bash)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/GraphQL-Query-Testing-Methods.md

Commands to execute the existing GraphQL test suite and access a local GraphQL testing interface. This involves navigating to the 'cda-frontend' directory, running the development server, and then visiting a specific URL in the browser.

```bash
# Run existing test suite
cd cda-frontend
npm run dev
# Then visit: http://localhost:3006/test-graphql
```

--------------------------------

### Fetch Homepage and Global Content with WPGraphQL

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/home-and-about-implementation-reference.md

This GraphQL query retrieves global content blocks and specific homepage content. It demonstrates fetching data for the header, projects, case studies sections, and global content toggles. Global content is fetched from `globalOptions.globalContentBlocks`, while page-specific content is fetched using the `page` query by `DATABASE_ID`.

```graphql
{
  globalOptions {
    globalContentBlocks {
      imageFrameBlock { title subtitle text button { url title target } contentImage { node { sourceUrl altText } } frameImage { node { sourceUrl altText } } arrowImage { node { sourceUrl altText } } }
      servicesAccordion { title subtitle illustration { node { sourceUrl altText } } services { nodes { ... on Service { id title uri } } } }
      technologiesSlider { title subtitle logos { nodes { ... on Technology { id title uri featuredImage { node { sourceUrl altText } } } } } }
      valuesBlock { title subtitle values { title text } illustration { node { sourceUrl altText } } }
      showreel { title subtitle button { url title target } largeImage { node { sourceUrl altText } } logos { logo { node { sourceUrl altText } } } }
      locationsImage { title subtitle countries { countryName offices { name address email phone } } illustration { node { sourceUrl altText } } }
      newsCarousel { title subtitle articleSelection category { nodes { name slug } } manualArticles { nodes { ... on Post { id title excerpt uri featuredImage { node { sourceUrl altText } } } } } }
      newsletterSignup { title subtitle hubspotScript termsText }
      image { __typename }
    }
  }

  page(id: 289, idType: DATABASE_ID) {
    title
    homepageContentClean {
      headerSection { title text button1 { url title target } button2 { url title target } illustration { node { sourceUrl altText } } }
      projectsSection { title subtitle link { url title target } }
      caseStudiesSection {
        subtitle
        title
        knowledgeHubLink { url title target }
        selectedStudies { nodes { ... on CaseStudy { id title uri excerpt } } }
      }
      globalContentSelection {
        enableValues
        enableImageFrame
        enableTechnologiesSlider
        enableServicesAccordion
        enableShowreel
        enableStatsImage
        enableLocationsImage
        enableNewsCarousel
        enableNewsletterSignup
      }
    }
  }
}
```

--------------------------------

### Get Departments for Filtering (GraphQL)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Working-GraphQL-Queries.md

Retrieves department information, including ID, name, slug, and count. This query is used for filtering team members and is functional.

```graphql
query GetDepartments {
  departments {
    nodes {
      id
      name
      slug
      count
    }
  }
}
```

--------------------------------

### Case Studies - Working Case Studies Pagination

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Working-GraphQL-Queries.md

Retrieves case studies with cursor-based pagination for the archive, including project details.

```APIDOC
## GET /case-studies/paginated

### Description
Fetches a list of case studies with cursor-based pagination, suitable for an archive page. Includes project overview and type information.

### Method
GET

### Endpoint
/case-studies/paginated

### Parameters
#### Query Parameters
- **first** (Int) - Optional - The number of case studies to return per page (default: 12).
- **after** (String) - Optional - A cursor for pagination, indicating the starting point for the next set of results.
- **search** (String) - Optional - A search term to filter case studies.

### Request Example
```graphql
query GetCaseStudiesWithPagination($first: Int = 12, $after: String, $search: String) {
  caseStudies(first: $first, after: $after, where: { search: $search }) {
    nodes {
      id
      title
      slug
      date
      excerpt
      featuredImage {
        node {
          sourceUrl
          altText
        }
      }
      caseStudyFields {
        projectOverview {
          clientName
          clientLogo {
            node {
              sourceUrl
              altText
            }
          }
        }
        featured
      }
      projectTypes {
        nodes {
          id
          name
          slug
        }
      }
    }
    pageInfo {
      hasNextPage
      hasPreviousPage
      startCursor
      endCursor
    }
  }
}
```

### Response
#### Success Response (200)
- **nodes** (Array) - An array of case study objects.
  - **id** (ID) - The unique identifier of the case study.
  - **title** (String) - The title of the case study.
  - **slug** (String) - The slug of the case study.
  - **date** (String) - The publication date.
  - **excerpt** (String) - A brief excerpt of the case study content.
  - **featuredImage** (Object) - Information about the featured image.
    - **node** (Object) - Details of the image node.
      - **sourceUrl** (String) - The URL of the image.
      - **altText** (String) - The alt text of the image.
  - **caseStudyFields** (Object) - Custom fields for the case study.
    - **projectOverview** (Object) - Overview of the project.
      - **clientName** (String) - The name of the client.
      - **clientLogo** (Object) - The client's logo.
        - **node** (Object) - Details of the logo image node.
          - **sourceUrl** (String) - The URL of the logo.
          - **altText** (String) - The alt text of the logo.
    - **featured** (Boolean) - Indicates if the case study is featured.
  - **projectTypes** (Object) - Information about project types.
    - **nodes** (Array) - An array of project type nodes.
      - **id** (ID) - The unique identifier of the project type.
      - **name** (String) - The name of the project type.
      - **slug** (String) - The slug of the project type.
- **pageInfo** (Object) - Pagination information.
  - **hasNextPage** (Boolean) - Indicates if there are more pages.
  - **hasPreviousPage** (Boolean) - Indicates if there are previous pages.
  - **startCursor** (String) - The cursor for the first item on the current page.
  - **endCursor** (String) - The cursor for the last item on the current page.

#### Response Example
```json
{
  "data": {
    "caseStudies": {
      "nodes": [
        {
          "id": "case-study-1",
          "title": "Project Alpha",
          "slug": "project-alpha",
          "date": "2023-10-27T10:00:00+00:00",
          "excerpt": "<p>Summary of Project Alpha.</p>",
          "featuredImage": {
            "node": {
              "sourceUrl": "/path/to/project-alpha-image.jpg",
              "altText": "Project Alpha Image"
            }
          },
          "caseStudyFields": {
            "projectOverview": {
              "clientName": "Client Beta",
              "clientLogo": {
                "node": {
                  "sourceUrl": "/path/to/client-beta-logo.png",
                  "altText": "Client Beta Logo"
                }
              }
            },
            "featured": false
          },
          "projectTypes": {
            "nodes": [
              {
                "id": "type-2",
                "name": "Design",
                "slug": "design"
              }
            ]
          }
        }
      ],
      "pageInfo": {
        "hasNextPage": true,
        "hasPreviousPage": false,
        "startCursor": "cursor1",
        "endCursor": "cursor12"
      }
    }
  }
}
```
```

--------------------------------

### Get Project Types for Filtering (GraphQL)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/Working-GraphQL-Queries.md

Fetches project types, providing their ID, name, slug, and count. This query is utilized for filtering case studies and is functional.

```graphql
query GetProjectTypes {
  projectTypes {
    nodes {
      id
      name
      slug
      count
    }
  }
}
```

--------------------------------

### Environment Configuration - Bash Script

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/documentation/GraphQL-Query-Testing-Methods.md

Sets up environment variables for local development, defining URLs for the frontend, GraphQL endpoint, and WordPress admin. These variables are crucial for running tests and accessing different parts of the application during development.

```bash
# Development URLs
FRONTEND_URL=http://localhost:3006
GRAPHQL_ENDPOINT=http://localhost/CDA-WEBSITE-PROJECT/CDA-WEBSITE/wordpress-backend/graphql
WORDPRESS_ADMIN=http://localhost/CDA-WEBSITE-PROJECT/CDA-WEBSITE/wordpress-backend/wp-admin
```

--------------------------------

### Run Full-Featured Test Suite

Source: https://github.com/razvanvlad/cda-website-project/blob/main/WARP.md

Executes a full-featured test suite for the application. Ensure the development server is running on port 3002 before executing.

```powershell
$env:PORT=3002; npm run dev

```

```bash
node test-suite.js

```

--------------------------------

### Run CDA Website Tests (Bash)

Source: https://github.com/razvanvlad/cda-website-project/blob/main/DOCS AND DB - NO GIT/TEST-SUITE-README.md

Commands to run the CDA website test suite. Requires the development server to be running. Supports direct execution via Node.js.

```bash
# Ensure development server is running
npm run dev

# Run the comprehensive test suite
npm run test

# Or run directly with Node.js
node test-suite-node.js
```