Last active
April 19, 2021 14:36
-
-
Save patrikalienus/be67dc15d6d9cc53ed096b07888012de to your computer and use it in GitHub Desktop.
Pages in 11ty from consumed GraphCMS data with localization
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 }; | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| --- | |
| 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 file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {# | |
| 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