Skip to content

Instantly share code, notes, and snippets.

@patrikalienus
Last active April 19, 2021 14:36
Show Gist options
  • Save patrikalienus/be67dc15d6d9cc53ed096b07888012de to your computer and use it in GitHub Desktop.
Save patrikalienus/be67dc15d6d9cc53ed096b07888012de to your computer and use it in GitHub Desktop.
Pages in 11ty from consumed GraphCMS data with localization
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment