patrikalienus/r_pages.11tydata.js

## r_pages.11tydata.js
require("dotenv").config(); // Store of GCMS_ENDPOINT and GCMS_TOKEN
const { gql } = require("graphql-request");
const { GraphQLClient } = require("graphql-request");

const client = new GraphQLClient(process.env.GCMS_ENDPOINT);

const requestHeaders = {
	authorization: "Bearer " + process.env.GCMS_TOKEN,
};

const variables = {};

const Query = gql`
	query {
		pages(locales: [en, sv]) {
			localizations(includeCurrent: true) {
				locale
				id
				pageTitle
				slug
				updatedAt
				createdAt

				pageContent {
					html
				}
				parentPage {
					localizations(includeCurrent: true) {
						locale
						id
						slug
						pageTitle
					}
				}
			}
		}
	}
`;

const getPages = async () => {
	try {
		const { pages } = await client.request(
			Query,
			variables,
			requestHeaders
		);
		const result = pages.map((page) => ({
			...page,
		}));

		return result;
	} catch (e) {
		throw new Error("There was a problem getting Pages", e);
	}
};

/**
 * The following isn't very pretty, but it does the job. Localization
 * really made everything more convoluted as I have to match the
 * parent page's locale with currently iterated locale. Also, there's
 * no support for sub-sub-pages. I.e. /LOCALE/what/ever/ is fine, but
 * /LOCALE/wha/tev/er/ would not work properly.
 */
module.exports = async () => {
	const r_pages_raw = await getPages();

	let localizations;
	let r_pages_full = new Array();

	r_pages_raw.forEach((item, index) => {
		localizations = item.localizations;
		localizations.forEach((subitem, index2) => {
			let eSlug = subitem.slug;
			let pSlug = "";
			let tSlug = "";

			if (subitem.parentPage.length > 0) {
				let parentPageObj = subitem.parentPage;
				parentPageObj.forEach((element) => {
					let locs = element.localizations;
					locs.forEach((loc) => {
						pSlug = "";
						tSlug = "";
						if (subitem.locale === loc.locale) {
							pSlug = loc.slug;
							if (pSlug.length > 0) {
								tSlug = pSlug + "/" + eSlug;
								localizations[index2]["final_slug"] = tSlug;
								localizations[index2]["pre_slug"] = pSlug;
							}
						}
					});
				});
			} else {
				tSlug = eSlug;
				// I know, this isn't very DRY... sorry.
				localizations[index2]["final_slug"] = tSlug;
				localizations[index2]["pre_slug"] = pSlug;
			}
		});

		r_pages_full.push(localizations);
	});

	r_pages_final = [];
	r_pages_final = r_pages_full.reduce((acc, items) => [...acc, ...items], []);

	const r_pages = r_pages_final;
	return { r_pages };
};

## r_pages.njk
---
tags: "r_pages"
pagination:
  data: r_pages
  size: 1
  alias: r_page
  addAllPagesToCollections: true
permalink: "/{{ r_page.locale }}/{{ r_page.final_slug }}/"
layout: layouts/r_pages_template.njk

eleventyComputed:
  gcms_id: "{{ r_page.id | safe }}"
  title: "{{ r_page.pageTitle | safe }}"
  slug: "{{ r_page.slug }}"
  pslug: "{{ r_page.pre_slug }}"
  lang: "{{ r_page.locale }}"
---

## r_pages_template.njk
{#
	This would go in
	/_includes/layouts/r_pages_template.njk
#}

{% include "../_components/head.njk" %}
<body>
	{% include "../_components/site-header.njk" %}
	{% block page_title %}
		<section class="primary-hero">
			<h1>{{ r_page.pageTitle | safe }}</h1>
		</section>
		<div class="global-separator"></div>
	{% endblock %}

	<section class="payload">
		{{ r_page.pageContent.html | safe }}
	</section>

	{% include "../_components/site-footer.njk" %}
</body>

</html>
	require("dotenv").config(); // Store of GCMS_ENDPOINT and GCMS_TOKEN
	const { gql } = require("graphql-request");
	const { GraphQLClient } = require("graphql-request");

	const client = new GraphQLClient(process.env.GCMS_ENDPOINT);

	const requestHeaders = {
	authorization: "Bearer " + process.env.GCMS_TOKEN,
	};

	const variables = {};

	const Query = gql`
	query {
	pages(locales: [en, sv]) {
	localizations(includeCurrent: true) {
	locale
	id
	pageTitle
	slug
	updatedAt
	createdAt

	pageContent {
	html
	}
	parentPage {
	localizations(includeCurrent: true) {
	locale
	id
	slug
	pageTitle
	}
	}
	}
	}
	}
	`;

	const getPages = async () => {
	try {
	const { pages } = await client.request(
	Query,
	variables,
	requestHeaders
	);
	const result = pages.map((page) => ({
	...page,
	}));

	return result;
	} catch (e) {
	throw new Error("There was a problem getting Pages", e);
	}
	};

	/**
	* The following isn't very pretty, but it does the job. Localization
	* really made everything more convoluted as I have to match the
	* parent page's locale with currently iterated locale. Also, there's
	* no support for sub-sub-pages. I.e. /LOCALE/what/ever/ is fine, but
	* /LOCALE/wha/tev/er/ would not work properly.
	*/
	module.exports = async () => {
	const r_pages_raw = await getPages();

	let localizations;
	let r_pages_full = new Array();

	r_pages_raw.forEach((item, index) => {
	localizations = item.localizations;
	localizations.forEach((subitem, index2) => {
	let eSlug = subitem.slug;
	let pSlug = "";
	let tSlug = "";

	if (subitem.parentPage.length > 0) {
	let parentPageObj = subitem.parentPage;
	parentPageObj.forEach((element) => {
	let locs = element.localizations;
	locs.forEach((loc) => {
	pSlug = "";
	tSlug = "";
	if (subitem.locale === loc.locale) {
	pSlug = loc.slug;
	if (pSlug.length > 0) {
	tSlug = pSlug + "/" + eSlug;
	localizations[index2]["final_slug"] = tSlug;
	localizations[index2]["pre_slug"] = pSlug;
	}
	}
	});
	});
	} else {
	tSlug = eSlug;
	// I know, this isn't very DRY... sorry.
	localizations[index2]["final_slug"] = tSlug;
	localizations[index2]["pre_slug"] = pSlug;
	}
	});

	r_pages_full.push(localizations);
	});

	r_pages_final = [];
	r_pages_final = r_pages_full.reduce((acc, items) => [...acc, ...items], []);

	const r_pages = r_pages_final;
	return { r_pages };
	};
	---
	tags: "r_pages"
	pagination:
	data: r_pages
	size: 1
	alias: r_page
	addAllPagesToCollections: true
	permalink: "/{{ r_page.locale }}/{{ r_page.final_slug }}/"
	layout: layouts/r_pages_template.njk

	eleventyComputed:
	gcms_id: "{{ r_page.id \| safe }}"
	title: "{{ r_page.pageTitle \| safe }}"
	slug: "{{ r_page.slug }}"
	pslug: "{{ r_page.pre_slug }}"
	lang: "{{ r_page.locale }}"
	---
	{#
	This would go in
	/_includes/layouts/r_pages_template.njk
	#}

	{% include "../_components/head.njk" %}
	<body>
	{% include "../_components/site-header.njk" %}
	{% block page_title %}
	<section class="primary-hero">
	<h1>{{ r_page.pageTitle \| safe }}</h1>
	</section>
	<div class="global-separator"></div>
	{% endblock %}

	<section class="payload">
	{{ r_page.pageContent.html \| safe }}
	</section>

	{% include "../_components/site-footer.njk" %}
	</body>

	</html>