DEV Community: Gareth Wright

Umbraco, Security and Headers

Gareth Wright — Thu, 14 Dec 2023 11:31:02 +0000

If you want to improve your security within modern umbraco (9+), and potentially get an 'A' within securityheaders.com. Follow these steps!

Firstly install this nuget package:

NetEscapades.AspNetCore.SecurityHeaders

Create a new extension class, with the following code

public static class SecurityExtensions
{
    public static IApplicationBuilder ConfigureSecurityHeaders(this IApplicationBuilder app)
    {
        app.UseSecurityHeaders(
            new HeaderPolicyCollection()
            .AddFrameOptionsSameOrigin()
            .AddXssProtectionBlock()
            .AddContentTypeOptionsNoSniff()
            .AddReferrerPolicyNoReferrer()
            .AddPermissionsPolicy(b =>
            {
                b.AddAccelerometer().None();
                b.AddAutoplay().None();
                b.AddCamera().None();
                b.AddEncryptedMedia().None();
                b.AddFullscreen().All();
                b.AddGeolocation().None();
                b.AddGyroscope().None();
                b.AddMagnetometer().None();
                b.AddMicrophone().None();
                b.AddMidi().None();
                b.AddPayment().None();
                b.AddPictureInPicture().None();
                b.AddSyncXHR().None();
                b.AddUsb().None();
            })          
            .RemoveServerHeader()
            .RemoveCustomHeader("X-Powered-By")
            .AddCustomHeader("Strict-Transport-Security", $"max-age={StrictTransportSecurityHeader.OneYearInSeconds}; preload"));

        return app;
    }
}

Call the extension method within your startup.cs

   public void Configure(IApplicationBuilder app,
       IWebHostEnvironment env)
   {
      ...
       app.ConfigureSecurityHeaders();
      ...
      app.UseUmbraco()
        .WithMiddleware(u =>
        {
            u.UseBackOffice();
            u.UseWebsite();
        })
        .WithEndpoints(u =>
        {      
            u.UseInstallerEndpoints();
            u.UseBackOfficeEndpoints();
            u.UseWebsiteEndpoints();
        });
   }

This is completely configurable to your needs, but this should give you better security and improve your securityheaders.com score.

For the NetEscapades package, see this github repository:

https://github.com/andrewlock/NetEscapades.AspNetCore.SecurityHeaders

Improve security even further, secure your cookies


 public static class CookieExtensions
 {
     public static void ConfigureCookies(this IServiceCollection services)
     {
         services.Configure<CookiePolicyOptions>(o =>
         {
             o.MinimumSameSitePolicy = SameSiteMode.Strict;
             o.Secure = CookieSecurePolicy.Always;
         });

         services.ConfigureApplicationCookie(o =>
         {
             o.Cookie.HttpOnly = true;
             o.Cookie.SameSite = SameSiteMode.Strict;
             o.ExpireTimeSpan = TimeSpan.FromMinutes(30);
             o.SlidingExpiration = true;
             o.Cookie.SecurePolicy = CookieSecurePolicy.Always;
         });

         services.AddAntiforgery(o =>
         {
             o.SuppressXFrameOptionsHeader = false;
             o.Cookie.SecurePolicy = CookieSecurePolicy.Always;
         });
     }

     public static IApplicationBuilder ConfigureCookies(this IApplicationBuilder app)
     {
         app.UseCookiePolicy(new CookiePolicyOptions
         {
             Secure = CookieSecurePolicy.Always,
         });
         return app;
     }
 }

Call this within your Startup.cs

       public void ConfigureServices(IServiceCollection services)
       {
           ...
           services.ConfigureCookies();
           ...
       }
       ...
       public void Configure(IApplicationBuilder app, IWebHostEnvironment env)   
       {
          ...
          app.ConfigureCookies();
          ...
       }

This should secure up your cookies.

Contact

If you need any help, give me a shout! https://garpunkal.dev

Umbraco 10 - punkTwoFactor Authentication Package

Gareth Wright — Tue, 14 Jun 2022 12:53:51 +0000

I needed to easily rollout Two Factor authentication on Umbraco, so I decided to take the Umbraco Documentation and create a package to make installation simple for Umbraco 9.5+ sites.

I've changed some of the code to be extensions on the IUmbracoBuilder rather than a composer, added the manual key to the dialog modal and added configuration for each environment.

Nuget

https://www.nuget.org/packages/punkTwoFactor/

Install-Package punkTwoFactor

Installation

Install the nuget package, then add the following section to your appsettings.json:

"punkTwoFactor": {
    "ProviderName": "Two Factor Authentication",
    "Issuer": "Two Factor Authentication - Dev",
    "BackOfficeView": "..\\App_Plugins\\punkTwoFactor\\twoFactorProviderGoogleAuthenticator.html"
  }

Add the following code block within your ConfigureServices section above the Umbraco setup:

services.Configure<TwoFactorConfig>(_config.GetSection("punkTwoFactor"));
TwoFactorConfig twoFactorConfiguration = new();
_config.GetSection("punkTwoFactor").Bind(twoFactorConfiguration);

Now add the "AddBackOfficeTwoFactorAuthentication" extension to the Umbraco setup.

services
    .AddUmbraco(_env, _config)
    .AddBackOffice()
    .AddWebsite()            
    .AddBackOfficeTwoFactorAuthentication(twoFactorConfiguration)
    .Build();

Usage

Click on your profile picture in Umbraco:

Click the Configure Two Factor button:

Then click Enable:

You'll then see the familar QR code, with the additional Manual Input key:

Once you add this QR code to your authenticator, you can enter the code and you're good!

You'll now be configured to use Two Factor Authentication on your account! :)

GitHub

https://github.com/garpunkal/punkTwoFactor

Contact

If you need any help, give me a shout on twitter.

Umbraco 10 - Sort those crops out!

Gareth Wright — Wed, 27 Apr 2022 10:39:03 +0000

I've always though that the image cropper in Umbraco, looked a little messy and the view for the main image wasn't large enough.

So I decided to tweak the CSS and see if I can tidy it up:

I think this looks better and it gives the main image 100% of the area to use!

It's fairly straightforward to achieve this, just follow these steps:

1 - Create the following structure in your site under app_plugins

2 - Add a package.manifest with this code:

{
  "css": [
    "~/app_plugins/tweaks/cropper.css"
  ]
}

3 - Add this CSS in a file called: cropper.css

.imagecropper {
  display: block;
}

.imagecropper .umb-sortable-thumbnails {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
  overflow: auto;
  max-height: 300px;
}

.imagecropper .umb-sortable-thumbnails li {
  display: flex;
  flex-wrap: wrap;
  width: 10%;
  align-items: flex-start;
}

.imagecropper .umb-sortable-thumbnails li .crop-information {
  align-items: flex-start;
}

4 - Restart the Umbraco website, and the image cropper should be updated :)

Nuget Package:

Install-Package punkCropperStyles

https://www.nuget.org/packages/punkCropperStyles/

If you need any help, give me a shout on twitter.

Umbraco 10 - Azure Cache for Redis

Gareth Wright — Mon, 25 Apr 2022 14:28:51 +0000

I've recently needed to use Azure Cache for Redis on an Umbraco 9 website for user sessions to store information.

After some research, I went with the following approach:

Install Nuget Package

Install the following nuget package from Microsoft:



Install-Package Microsoft.Extensions.Caching.StackExchangeRedis

Create an "AzureCacheConfig" Model

Create a configuration model, so I can bind to my appsettings section:



public class AzureCacheConfig
{
    public string ConnectionString { get; set; } 
    public string InstanceName {get; set; }
}

Add settings into appsettings.json

Add the following into my appsettings.json and replace the ConnectionString value with my secret one from Azure:



"AzureCache": {
    "ConnectionString": "XXXX.redis.cache.windows.net:YYYY,password=ZZZZ,ssl=True,abortConnect=False",
    "InstanceName": "Session_"
  }

You can get your ConnectionString for "Azure Cache for Redis", within the Azure Portal.

example:

Add Redis to Startup.cs

Then within the Startup.cs file found in the root of the web project, add the following code under ConfigureServices method above the services.AddUmbraco() line:



services.AddStackExchangeRedisCache(o =>
{
    AzureCacheConfig azureCacheConfig = new();
    _config.GetSection("AzureCache").Bind(azureCacheConfig);

    if (!string.IsNullOrWhiteSpace(azureCacheConfig.ConnectionString))
        o.Configuration = azureCacheConfig.ConnectionString;

    if (!string.IsNullOrWhiteSpace(azureCacheConfig.InstanceName))
        o.InstanceName = azureCacheConfig.InstanceName;
});

For the basic setup, that's it!

Restart your application and now Umbraco will be Redis for user sessions.

This only works for IDistributedCache, which I believe Umbraco doesn't use for the backoffice. However user sessions will now be scalable through Redis, which is what's needed on a scalable frontend solution.

A handy tool that I used to view my Redis cache keys to make sure it was working correct: RedisInsight-v2

If you need any help, give me a shout on twitter

Umbraco 10 - ContentWithAside BlockList editor package

Gareth Wright — Thu, 07 Apr 2022 12:40:02 +0000

I've packaged up a piece of code that was posted about in this Umbraco 24days.in article: https://24days.in/umbraco-cms/2020/grid-nouveau-block-list/ by Søren Kottal, https://github.com/skttl.

I've made a couple of tweaks to the CSS to tighten up the look and feel. However, it's basically a package that allows you to see two columns in the block list editor.

You need to install the package via nuget:
https://www.nuget.org/packages/punkContentWithAside

Install-Package punkContentWithAside

Once installed, configure your block list editor as follows:

Using the block list editor, select the component you want to use, ensuring the component has multiple block list properties for "content" and "aside".

Set the custom view of the component to be

~/app_plugins/punkContentWithAside/punkcontentwithaside.html

Also set the "force hide content editor" in the advanced settings of the component.

garpunkal / punkContentWithAside

An app_plugin for Umbraco that allows you to view a Block List in two columns.

Any questions, just give me a shout on https://twitter.com/garpunkal

Umbraco 10 - DropDownList with text and values

Gareth Wright — Thu, 10 Mar 2022 14:02:58 +0000

Antoher plugin for Umbraco that provides an Umbraco Drop Down List with Text and Values.

There is an included PropertyValueConverter to provide you with the value of the selected item in the CMS.

Nuget

Install-Package punkDropDownList

https://www.nuget.org/packages/punkDropDownList/

Compatibility

Umbraco 9+

Credits

I used uDynamic's dropdownlist property editor to form the basis of this propertyeditor.

https://github.com/Alain-es/uDynamic/tree/master/uDynamic/App_Plugins/PropertyEditors/DropdownList

Screenshots

Property

DataType

github

https://github.com/garpunkal/punkDropDownList

Umbraco 10 - Thumbnail ListView

Gareth Wright — Thu, 10 Mar 2022 13:59:25 +0000

I created a plugin for Umbraco that allows you to use a ListView with the following extras:

A image with the field alias: (thumbnail, image, logo, listingImage)
A name field from a linked document.

It works with all the original functionality of ListView, including selections, sort and search.

Just create a new listview in Umbraco, add your custom fields for images or linked relations then use this path for a view:

/app_plugins/punkThumbnailListView/punkthumbnailListView.html

It should display your images and relational titles in the listview.

nuget

Install-Package punkThumbnailListView
https://www.nuget.org/packages/punkThumbnailListView/

Compatibility

Umbraco 9+

Screenshots

ListView

DataType

github:

https://github.com/garpunkal/punkThumbnailListView

Umbraco 9 - BlockList editor with added ViewComponents

Gareth Wright — Tue, 08 Mar 2022 15:17:38 +0000

Umbraco 9 is built using .net 5, which is .net core. This allows us to utilise ViewComponents with BlockList editor within Umbraco.

We've updated our blocklist implementation to use the following code to make use of ViewComponent invoking. The following code is an extract from the views/partials/blocklist/default.cshtml view.

@inherits UmbracoViewPage<BlockListModel>
@inject IOptions<OurConfiguration> _configuration
@inject IViewComponentSelector _selector;
@if (Model == null || !Model.Any()) { return; }

@foreach (var block in Model.Where(x => x?.ContentUdi != null))
{
    if (block.Content is SiteMapTree)
    {
        @await Component.InvokeAsync(block.Content.ContentType.Alias, Umbraco.AssignedContentItem)
    }
    else if (_selector.SelectComponent(block.Content.ContentType.Alias) is not null)
    {
        @await Component.InvokeAsync(block.Content.ContentType.Alias, block.Content)
    }
    else if (block.Content.ContentType.Alias.Equals(Form.ModelTypeAlias))
    {
        @await Html.PartialAsync("components/" + block.Content.ContentType.Alias + "/default", block.Content)
    }
    else
    {
        @await Html.CachedPartialAsync(
            "components/" + block.Content.ContentType.Alias + "/default", 
            block.Content,
            TimeSpan.FromSeconds(_configuration.Value.CacheDuration), 
            true,
            contextualKeyBuilder: (model, viewData) => (model as IPublishedElement)?.Key.ToString())
    }
}

If we take the code above apart, we're doing a series of new things...

We're injecting directly into our view, which allows us to inject our configuration and the IViewComponentSelector. https://docs.microsoft.com/en-us/aspnet/core/mvc/views/dependency-injection?view=aspnetcore-6.0
SiteMapTree ViewComponent has a specific implementation that we need to pass the AssignedContentItem.
We can now test to see if our block is a ViewComponent and Invoke it without having to type out each block. This is what the IViewComponentSelector is for, as it can tell us whether the block is a ViewComponent.
If the block is a Form, we can avoid caching, as this is bad. Never cache a form, this can result in customer data being stored in cache and showing for another request.
If the block is a simple block, without any logic and not a form, we can then cache it and serve it directly through a partial.

All components are then stored under components directly in the root of views. This is standard .net core practice for ViewComponents: https://docs.microsoft.com/en-us/aspnet/core/mvc/views/view-components?view=aspnetcore-6.0

This allows us to create components in Umbraco for the BlockList editor, then add renderings all within one area. This keeps everything nice and neat.

Any improvements or suggestions let me know!

Umbraco 8 - Image optimisation using PunkOptimise

Gareth Wright — Wed, 24 Mar 2021 13:24:45 +0000

About a year ago, I build a simple plugin for Umbraco 8 that allows you shrink your image via TinyPNG or reduce the image size using ImageProcessor (which is built into Umbraco).

This allows the editor to decide how they want to optimise their images, rather than doing it automatically.

nuget

Install-Package punkOptimise.Core

Basic Requirements

Umbraco 8.4+

Screenshots

Context Menu

Action Menu

Instructions

Install the nuget package:

Install-Package punkOptimise.Core

Add the following config to your web.config:

<add key="punkOptimise:ReduceFileExtensions" value="jpg,jpeg" />

<add key="punkOptimise:ShrinkfileExtensions" value="png" />

<add key="punkOptimise:DefaultQuality" value="70" />

<add key="punkOptimise:TinyPng:ApiUrl" value="https://api.tinify.com/shrink" />

<add key="punkOptimise:TinyPng:ApiKey" value="" />

Complete the TinyPNG developer API key registration: https://tinypng.com/developers

Add the key to the config above: punkOptimise:TinyPng:ApiKey

Repo

garpunkal / punkOptimise

A package for Umbraco that allows you to optimise your media using different providers.

Umbraco 8 - Umbraco Forms and converting fields to translations nodes

Gareth Wright — Wed, 24 Mar 2021 08:42:25 +0000

I've developed a package that will convert form fields into Umbraco translation fields, by clicking the convert context button on the Umbraco Form. It'll allow you to have multilingual forms by utilising the Umbraco dictionary.

This package will allow you to convert an existing Umbraco Form to dictionary items. It will switch the existing fields to dictionary items, using the hash prefix.

Only fields populated will be converted.

Only the following field properties are converted:

Caption
ToolTip
Placeholder
Default Value
Invalid Error Message
Required Error Message

Screenshots

Umbraco Form Action

Fields before conversion

Fields after conversion

Translations

Dependencies

Flurl 2.8.2
Flurl.Http 2.4.2
Humanizer.Core 2.8.26
UmbracoCms.Core 8.11.1
UmbracoCms.Web 8.11.1
UmbracoForms.Core 8.6.0

garpunkal / UmbracoFormsTranslations

An Umbraco Forms field translation generator

Umbraco 8 - Personalisation with Members and Tagging

Gareth Wright — Wed, 24 Mar 2021 08:37:21 +0000

A few months ago, I developed a tag-based personalisation system for Members. It's simple to use and easy on your database.

It works based on tags on pages and content and stores these against members efficiently in session. Once the member has finished their journey, it stores them into your Umbraco database.

Upon a repeat visit, the code pulls the member's persona from the database and back into session for efficient access. It then displays personalised content appropriately.

Homepage

This shows examples of how content can be displayed to the member, including personalised navigation, promotions, promotions with backfilled content.

Page

This screenshot shows how easy it is to add tagging to a page to enable personalisation.

Content

This screenshot shows how easy it is to add tagging to a content item to enable personalisation.

Members

This screenshot shows what tags are part of this members persona. members

Getting Started

Personalisation of content is easy with simple base controllers and methods:

Methods

viewModel.PersonalisedPromotions = Personalise(viewModel.Promotions, true);
viewModel.PersonalisedPromotionsWithoutBackfill = Personalise(viewModel.Promotions);
viewModel.Pages = Personalise(viewModel.MenuItems, true);

There is also a Global.cs file that sets the persona to the database upon session end.

Please reference the controllers in the web project within the solution for an example of this.

There is a new website project in the solution with an example of how to use the nuget package.

Important, remember to change the global.asax to use the Personalisation.Core.Global to upsert to database on session end.

Umbraco Version

Umbraco 8.5.3 +

Questions

Any questions or suggestions, please let me know :)

garpunkal / Personalisation

Personalisation Engine for Umbraco 8

SquidexCMS to Gridsome using Content API

Gareth Wright — Tue, 23 Mar 2021 08:40:44 +0000

I've recently created a portfolio website and needed a CMS to populate certain areas of my website.

I've been using Gridsome to generate a static website, so I wanted to hook that up to a headless CMS.

I chose SquidexCMS for the starter free pricing:

20.000 API Calls per Month
2 GB Traffic per Month
500 MB Storage
2 Contributors

This enabled me to use it for a basic portfolio website, as the stats above covered me.

It was quite easy to setup SquidexCMS, using schemas and content and it didn't take too long to populate with my content (I'll write this up in another post soon).

Next I needed to connect Squidex to my local website. In Gridsome you can do this within the gridsome.server.js file docs, which is located in the root of the solution.

This is my solution to connecting to the Content API used within Squidex and Gridsome JS to add GraphQL collections.

gridsome.server.js

const axios = require('axios');

module.exports = function (api) {

  api.loadSource(async actions => {

    // config
    const baseApiUrl = 'https://cloud.squidex.io/api/content/garpunkaldev/';
    const config = {
      headers: {
        "X-Flatten": true,
        "X-NoResolveLanguages": 1,
        "X-Languages": "en",
        "timeout": 1000,
        "retry": 3,
        "retryDelay": 4000
      }
    };

    // gather data from api
    const { data: companyData } = await GetAsync(baseApiUrl + 'company', config);
    const { data: projectData } = await GetAsync(baseApiUrl + 'project', config);
    const { data: experienceData } = await GetAsync(baseApiUrl + 'experience', config);
    const { data: homeData } = await GetAsync(baseApiUrl + 'home', config);

    // experiences    
    const expCollection = actions.addCollection({ typeName: 'Experiences' })
    for (const item of experienceData.items) {

      // filter relations   
      const company = companyData.items.find(function (x) { return x.id === item.data.company[0] });
      const projects = BuildList(item.data.projects, projectData.items);
      const contribs = BuildList(item.data.contributions, projectData.items);
      // map
      expCollection.addNode(MapExperience(item, company, projects, contribs))
    }

    // highlights
    const highCollection = actions.addCollection({ typeName: 'Highlights' })
    for (const item of projectData.items) {
      // map
      if (item.data.IsHighlight === true) {
        highCollection.addNode(MapProject(item));
      }
    }

    // home
    const homeCollection = actions.addCollection({ typeName: 'Homes' })
    for (const item of homeData.items) {
      homeCollection.addNode(MapHome(item));
    } 
  })

  async function GetAsync(url, config) {
    return await axios
      .get(url, config)
      .then(response => { return response; })
      .catch(err => { console.log(err); });
  }

  function BuildList(selection, source) {
    var items = [];

    if (selection)
      selection.forEach(function (item) {
        const found = source.find(x => x.id == item);
        if (found != null)
          items.push(found);
      });

    return items;
  }

  function MapProject(item) {
    return {
      "id": item.data.id,
      "title": item.data.title,
      "position": item.data.position,
      "url": item.data.url,
      "image": {
        "webp": "https://cloud.squidex.io/api/assets/garpunkaldev/" + item.data.image[0] + "?cache=31536000&format=WEBP",
        "url": "https://cloud.squidex.io/api/assets/garpunkaldev/" + item.data.image[0] + "?cache=31536000",
        "alt": item.data.title
      },
      "sortOrder": item.data.SortOrder ?? 0,
      "isHighlight": GetBool(item.data.IsHighlight),
      "isWinner": GetBool(item.data.IsWinner)
    }
  }

  function MapExperience(item, company, projects, contribs) {
    return {
      "id": item.data.id,
      "title": company.data.title,
      "job": item.data.job,
      "location": item.data.location,
      "logo": {
        "webp": "https://cloud.squidex.io/api/assets/garpunkaldev/" + company.data.logo[0] + "?cache=31536000&format=WEBP",
        "url": "https://cloud.squidex.io/api/assets/garpunkaldev/" + company.data.logo[0] + "?cache=31536000",
        "background": company.data.logoBackgroundColour,
        "alt": company.data.title
      },
      "url": company.data.url,
      "shortUrl": company.data.shortUrl,
      "from": GetDate(item.data.from),
      "to": GetDate(item.data.to),
      "isCurrent": GetBool(item.data.isCurrent),
      "description": item.data.description,
      "hideDescription": GetBool(item.data.hideDescription),
      "projects": {
        "title": item.data.projectsLabel,
        "items": projects.map(p => ({ "name": p.data.title, "url": p.data.url }))
      },
      "contributions": {
        "title": item.data.contributionsLabel,
        "items": contribs.map(p => ({ "name": p.data.title, "url": p.data.url }))
      },
      "orderDate": item.data.from
    }
  }

  function MapHome(item) {
    return {
      "id": item.id,
      "title": item.data.title,
      "subTitle": item.data.subTitle,
      "githubUrl": item.data.githubUrl,
      "image": {
        "webp": "https://cloud.squidex.io/api/assets/garpunkaldev/" + item.data.profileImage[0] + "?cache=31536000&format=WEBP",
        "url": "https://cloud.squidex.io/api/assets/garpunkaldev/" + item.data.profileImage[0] + "?cache=31536000",
        "alt": item.data.title
      },
      githubSource: MapLink(item.data.githubSource),
      specialisms: item.data.specialisms.map(p => MapLink(p)),
      socials: item.data.socials.map(p => MapLink(p)),
      footerLinks: item.data.footerLinks.map(p => MapLink(p)),
      projectsLabel: item.data.projectsLabel,
      articlesLabel: item.data.articlesLabel,
      experiencesLabel: item.data.experiencesLabel,
    };
  }

  function MapLink(item) {
    return {
      "title": item.title ?? "",
      "url": item.url ?? "",
      "cssClasses": item.cssClasses?? "",
      "svgPath": item.svgPath?? "",
      "svgStroke": item.svgStroke?? "",
      "svgStrokeWidth": item.svgStrokeWidth?? "",
      "svgFill": item.svgFill?? "",
      "svgStrokeLineCap": item.svgStrokeLineCap?? "",
      "svgStrokeLineJoin": item.svgStrokeLineJoin?? ""
    }
  }

I use Axios to connect to Squidex and pull the response.

It's easier to consume the Squidex content source for single language based content, if you use these headers:

const config = {
      headers: {
        "X-Flatten": true,
        "X-NoResolveLanguages": 1,
        "X-Languages": "en",
        "timeout": 1000,
        "retry": 3,
        "retryDelay": 4000
      }
    };

This will flatten the output so you don't need to be concerned about multilingual content.

I then pulled in all of the sources at once to reduce API calls, as you're limited on these within the starter plan:

    const { data: companyData } = await GetAsync(baseApiUrl + 'company', config);
    const { data: projectData } = await GetAsync(baseApiUrl + 'project', config);
    const { data: experienceData } = await GetAsync(baseApiUrl + 'experience', config);
    const { data: homeData } = await GetAsync(baseApiUrl + 'home', config);

Once I had the data locally, I could filter this based on my requirements.

 // experiences    
    const expCollection = actions.addCollection({ typeName: 'Experiences' })
    for (const item of experienceData.items) {

      // filter relations   
      const company = companyData.items.find(function (x) { return x.id === item.data.company[0] });
      const projects = BuildList(item.data.projects, projectData.items);
      const contribs = BuildList(item.data.contributions, projectData.items);
      // map
      expCollection.addNode(MapExperience(item, company, projects, contribs))
    }

    // highlights
    const highCollection = actions.addCollection({ typeName: 'Highlights' })
    for (const item of projectData.items) {
      // map
      if (item.data.IsHighlight === true) {
        highCollection.addNode(MapProject(item));
      }
    }

    // home
    const homeCollection = actions.addCollection({ typeName: 'Homes' })
    for (const item of homeData.items) {
      homeCollection.addNode(MapHome(item));
    }

I filtered the contents down, building up a list and then adding to a collection.

These collections would then be used on the Index.vue page as a PageQuery with GraphQL.


query {
   homes: allHomes(limit: 1) {        
    edges { 
      node {
        id
        title
        subTitle
        githubUrl       
        image {
          webp
          url
          alt
        }
        githubSource {
          title
          url
          svgPath
        }
        socials { 
          title         
          url
          cssClasses
          svgPath
          svgStroke
          svgStrokeWidth
          svgFill
          svgStrokeLineCap
          svgStrokeLineJoin
        }
        specialisms {           
          title         
          url
          cssClasses
          svgPath
          svgStroke
          svgStrokeWidth
          svgFill
          svgStrokeLineCap
          svgStrokeLineJoin
        }
        footerLinks { 
          title         
          url
          cssClasses
          svgPath
          svgStroke
          svgStrokeWidth
          svgFill
          svgStrokeLineCap
          svgStrokeLineJoin
        }
        projectsLabel
        articlesLabel
        experiencesLabel
        }
      } 
    }
    articles: allDevToArticles(page:0, perPage: 11, sortBy: "published_at", order: DESC) {
      edges {
        node {
          id
          title
          published_at        
          description
          tag_list
          canonical_url
          cover_image
          positive_reactions_count
          comments_count         
        }
      }
    }  
   experiences: allExperiences(sortBy: "orderDate", order: DESC) {
    edges {
      node {
        id
        title
        job
        location       
        logo {
          webp
          url              
      background
      alt
        }
        url
        shortUrl  
        from
        to
        isCurrent
        hideDescription
        description
        projects {
          title
          items {
            name
            url
          }
        }       
        contributions {
           title
          items {
            name
            url
          }
        }
        orderDate
      }
    }
   }
  highlights : allHighlights(sort: [{ by: "sortOrder", order: DESC }, { by: "title", order: ASC }]) {
    edges {
      node {
        id        
        title
        image {
          webp
          url
          alt         
        }
        url
        position        
        sortOrder
        isHighlight
        isWinner       
      }
    }
  }  
}

This was a real quick example of how to import data into Gridsome from Squidex.

I hope it helps, and if you have any questions, please feel free to ask! :)

Thanks