The lingner.com is a website built with Eleventy static site generator (SSG) for the frontend and Sanity as CMS/backend for dynamic content. Is developed around the Jamstack architectural approach that decouples the web experience layer from data and business logic, but with a twist since some data is considered static and does not reside in the backend layer, but in the frontend itself.
The project has multi-language support and according to requirements, a granular control is implemented regarding which translated pages, document types or individual documents are built or enabled. The default language is german.
https://gitlab.dev.lingner.net/lingner/lingner-website-2022/lingner-website/lingner-website
The frontend follows a structure and implementation found on a typical Eleventy static site generator projects. Eleventy’s documentation provides an excellent and complete source of information and due to the large community using and supporting Eleventy, solutions or implementation examples are usually easy to find.
All partial templates and macros can be found inside the _includes folder, organized according to it’s purpose: components, elements and pages. Only one main layout is used and is placed inside the _layouts folder. All localized pages and respective data files are stored in top level folders according to the language de or en.
Also important is the translations folder, which contains localized files with all the translated content for the site static content.
The chosen templating language is the powerful and rich Mozilla’s Nunjucks.
Regarding styles, popular Sass is used as pre-processor. Sass structure is organized in the 7–1 architecture pattern https://sass-guidelin.es/#architecture.
Reach out to the project README file for additional info about installing the project and getting it up and running.
This project is really slim in regards to external tools and production dependencies. Swiper.js is placed in separate files on the local server, so only Vimeo player is called from Vimeo directly.
The cookie consent platform Cookie Hub is used for handling cookies behavior.
Tooling for linting and formatting JS and CSS is set in place as pre-commit hooks, as well as commit linting that follows conventional commit standards.
https://gitlab.dev.lingner.net/lingner/lingner-website-2022/lingner-website/sanity-studio
Sanity is the platform chosen as CMS/backend to create and manage dynamic content such as news, job categories or job offerings. Sanity is an open-source fully customisable react based project that allows to taillor both the data schema and editor UI to the exact business and editor needs.
The Sanity Content Lake is where the content is stored and accessed. It runs in the cloud and is fully managed by Sanity. Access the Content Lake via the Sanity API, either by using one of our client libraries or directly via the HTTP API.
Sanity’s documentation is quite well written and complete. Other channels like Sanity’s slack is also a great source of information and tips.
The content editor is available at https://lingner.sanity.studio/.
The schemas folder contains all schema files for documents and components which defines all field types, validation and other details about each one. The schema.js file works as the main entry point where all schemas must be declared.
A GraphQl playground is deployed at https://mlne9y99.api.sanity.io/v1/graphql/production/default.
Reach out to the project README file for additional info about installing the project and getting it up and running.
There’s two environments set up:
From Sanity it’s also possible to manually trigger the build and deployment of both environments from the GUI.