feat(): add customer api request for logo slider

Author: BenedictLang

.husky/pre-commit

@@ -1,5 +1 @@
-#! /bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-# Dein neuer Befehl hier
 pnpm lint-staged

public/images/logos/customers/Logo-ASMS.svg

@@ -1,6 +1,8 @@
 @import '../../../styles/settings/_settings';
 
 .header {
+	position: fixed;
+	z-index: 1;
 	display: flex;
 	justify-content: space-between;
 	align-items: center;

public/images/logos/customers/Logo-CD.svg

@@ -0,0 +1,7 @@
+import styles from './LogoSlider.module.scss';
+
+const LogoSlider = ({ children }) => {
+	return <div className={styles.container}>{children}</div>;
+};
+
+export default LogoSlider;

public/images/logos/customers/Logo-HdM.svg

@@ -0,0 +1,5 @@
+@import '../../../styles/settings/__settings';
+
+.container {
+	display: flex;
+}

public/images/logos/customers/Logo-Kanzlei-Lang.svg

@@ -0,0 +1 @@
+export { default } from './LogoSlider';

public/images/logos/customers/Logo-Med-Dent-Consult.svg

@@ -0,0 +1,50 @@
+import { gql } from '@apollo/client';
+
+export const QUERY_ALL_CUSTOMERS = gql`
+	query AllCustomers {
+		customers(where: { orderby: { field: DATE, order: ASC } }, first: 1000) {
+			edges {
+				node {
+					id
+					customerFieldGroup {
+						customerName
+						customerPage
+						customerLogo {
+							node {
+								altText
+								mediaItemUrl
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+
+export const QUERY_ALL_CUSTOMERS_SEO = gql`
+	query AllCustomers {
+		customers(first: 100, where: { orderby: { field: DATE, order: ASC } }) {
+			nodes {
+				id
+				seo {
+					metaDesc
+					metaRobotsNofollow
+					metaRobotsNoindex
+					title
+					social {
+						youTube
+						wikipedia
+						twitter
+						soundCloud
+						pinterest
+						mySpace
+						linkedIn
+						instagram
+						facebook
+					}
+				}
+			}
+		}
+	}
+`;

public/images/logos/customers/Logo-Praxis-Lang.svg

@@ -0,0 +1,149 @@
+import { getApolloClient } from 'lib/apollo-client';
+
+import parameterize from 'parameterize';
+
+import { QUERY_ALL_CUSTOMERS, QUERY_ALL_CUSTOMERS_SEO } from 'data/customers';
+
+/**
+ * customerPathBySlug
+ */
+
+export function customerPathBySlug(slug) {
+	return `/customer/${slug}`;
+}
+
+/**
+ * getCustomerBySlug
+ */
+
+export async function getCustomerBySlug(slug) {
+	const { customers } = await getAllCustomers();
+
+	const customer = customers.find((customer) => customer.slug === slug);
+
+	return {
+		customer,
+	};
+}
+
+/**
+ * customerPathByName
+ */
+
+export function customerPathByName(name) {
+	return `/customer/${parameterize(name)}`;
+}
+
+/**
+ * getCustomerByNameSlug
+ */
+
+export async function getCustomerByNameSlug(name) {
+	const { customers } = await getAllCustomers();
+
+	const customer = customers.find((customer) => parameterize(customer.name) === name);
+
+	return {
+		customer,
+	};
+}
+
+/**
+ * customerSlugByName
+ */
+
+export function customerSlugByName(name) {
+	return parameterize(name);
+}
+
+/**
+ * getAllCustomers
+ */
+
+export async function getAllCustomers() {
+	const apolloClient = getApolloClient();
+
+	let customerData;
+	let seoData;
+
+	try {
+		customerData = await apolloClient.query({
+			query: QUERY_ALL_CUSTOMERS,
+		});
+	} catch (e) {
+		console.log(`[customers][getAllCustomers] Failed to query customer data: ${e.message}`);
+		throw e;
+	}
+
+	let customers = customerData?.data.customers.edges.map(({ node = {} }) => node).map(mapCustomerData);
+
+	// If the SEO plugin is enabled, look up the data
+	// and apply it to the default settings
+
+	if (process.env.WORDPRESS_PLUGIN_SEO === true) {
+		try {
+			seoData = await apolloClient.query({
+				query: QUERY_ALL_CUSTOMERS_SEO,
+			});
+		} catch (e) {
+			console.log(`[customers][getAllCustomers] Failed to query SEO plugin: ${e.message}`);
+			console.log('Is the SEO Plugin installed? If not, disable WORDPRESS_PLUGIN_SEO in next.config.js.');
+			throw e;
+		}
+
+		customers = customers.map((customer) => {
+			const data = { ...customer };
+			const { id } = data;
+
+			const seo = seoData?.data?.customers.edges.map(({ node = {} }) => node).find((node) => node.id === id)?.seo;
+
+			return {
+				...data,
+				title: seo.title,
+				description: seo.metaDesc,
+				robots: {
+					nofollow: seo.metaRobotsNofollow,
+					noindex: seo.metaRobotsNoindex,
+				},
+				social: seo.social,
+			};
+		});
+	}
+
+	return {
+		customers,
+	};
+}
+
+/**
+ * mapCustomerData
+ */
+
+export function mapCustomerData(customer) {
+	const { id, customerFieldGroup } = customer;
+	return {
+		id,
+		name: customerFieldGroup?.customerName || '',
+		site: customerFieldGroup?.customerPage || '',
+		logo: {
+			alt: customerFieldGroup?.customerLogo?.node.altText || '',
+			url: customerFieldGroup?.customerLogo?.node.mediaItemUrl || '',
+		},
+	};
+}
+
+/**
+ * updateCustomerAvatar
+ */
+
+export function updateCustomerAvatar(avatar) {
+	// The URL by default that comes from Gravatar / WordPress is not a secure
+	// URL. This ends up redirecting to https, but it gives mixed content warnings
+	// as the HTML shows it as http. Replace the url to avoid those warnings
+	// and provide a secure URL by default
+
+	return {
+		...avatar,
+		url: avatar.url?.replace('http://', 'https://'),
+	};
+}

public/images/logos/customers/Logo-Zoopra.svg

@@ -13,8 +13,12 @@ import { ThreeSceneContext } from '../components/3D/ThreeSceneProvider';
 import { Vector3 } from 'three';
 import { useViewport } from '../components/_General/Viewport/ViewportProvider';
 import Hero from '../components/Sections/Heros/Hero';
+import LogoSlider from '../components/Slider/LogoSlider';
+import Image from 'next/image';
+import CustomLink from '../components/Link';
+import { getAllCustomers } from '../lib/customers';
 
-export default function Home({ posts, pagination }) {
+export default function Home({ posts, pagination, customers }) {
 	const { metadata = {} } = useSite();
 	const { title } = metadata;
 	const { isMobile } = useViewport();
@@ -34,6 +38,17 @@ export default function Home({ posts, pagination }) {
 		<Layout>
 			<WebsiteJsonLd siteTitle={title} />
 			<Hero />
+			<LogoSlider>
+				{customers.map((customer) => {
+					return (
+						<CustomLink key={customer.id} href={customer.site} className={styles.customerLink}>
+							<div className={styles.customerLogo}>
+								<Image src={customer.logo.url} alt={customer.logo.alt} width={53} height={33} />
+							</div>
+						</CustomLink>
+					);
+				})}
+			</LogoSlider>
 			<Section>
 				<Container>
 					<h2 className="sr-only">Posts</h2>
@@ -64,8 +79,11 @@ export async function getStaticProps() {
 	const { posts, pagination } = await getPaginatedPosts({
 		queryIncludes: 'archive',
 	});
+	const { customers } = await getAllCustomers();
+	console.log(customers);
 	return {
 		props: {
+			customers,
 			posts,
 			pagination: {
 				...pagination,

src/components/Sections/Header/Header.module.scss

@@ -8,13 +8,20 @@ import Modal from '../components/Modal';
 import OSXWindow from '../components/ContainerElements/OSXWindow';
 import Terminal from '../components/Terminal';
 import { useRouter } from 'next/router';
+import { ThreeSceneContext } from '../components/3D/ThreeSceneProvider';
+import { Vector3 } from 'three';
 
 export default function Start() {
 	const { playSound, stopSound } = useContext(AudioContext);
 	const [shape, setShape] = useState('sphere');
 	const [isModalVisible, setModalVisible] = useState(false);
 	const [terminalChildren, setTerminalChildren] = useState(null);
 	const router = useRouter();
+	const { setCameraTarget } = useContext(ThreeSceneContext);
+
+	useEffect(() => {
+		setCameraTarget(new Vector3());
+	}, [setCameraTarget]);
 
 	const changeParticles = useCallback(() => {
 		setShape(shape === 'sphere' ? 'cube' : 'sphere');

src/components/Slider/LogoSlider/LogoSlider.js

@@ -1,5 +1,10 @@
 @import '../../styles/settings/__settings';
 
+.customerLogo {
+	width: auto;
+	height: 10vh;
+}
+
 .description {
 	text-align: center;
 	line-height: 1.5;