cwparsons.ca

Reusable partial design component for SitecoreAI

Wed, 27 May 2026 00:00:00 GMT

Previously, Sitecore Experience Accelerator (SXA) supported Snippets, which allowed content made up of multiple renderings to be reused across a site.

SitecoreAI has a similar concept called partial designs. Components can be composed and reused across pages, but they take over the placeholder they live in. For example, if you create a header partial design and place it in the headless-header placeholder for a page design, individual pages cannot put additional components within that placeholder. This limits partial designs to fixed placeholders instead of letting you use them anywhere.

Instead, I wanted to use partial designs like components: drop one into any placeholder, around any other component. After some research, I found I could fetch the contents of a partial design and create my own component.

Warning

This is not the intended usage of partial designs and may not be supported. Use at your own risk.

Partial design component

The component uses a Datasource Location that matches where partial designs are created by default:

query:$site/*[@@name='Presentation']/*[@@templatename='Partial Designs']|query:$sharedSites/*[@@name='Presentation']/*[@@templatename='Partial Designs']

Then set the Datasource Template to Partial Design:

/sitecore/templates/Foundation/JSS Experience Accelerator/Presentation/Partial Design

Code

// PartialDesignComponent.tsx
import { useContext } from 'react';

import {
  type ComponentParams,
  ComponentPropsContext,
  ComponentPropsReactContext,
  type ComponentRendering,
  type GetComponentServerProps,
  type LayoutServiceData,
  Placeholder,
  type PlaceholdersData,
} from '@sitecore-content-sdk/nextjs';

import componentMap from '@/../.sitecore/component-map';
import { getGraphQlClient } from '@/utils/graphql-client';

// Placeholder where components are added within the partial design.
const MAIN_PLACEHOLDER = 'headless-main';

// GraphQL query to fetch the partial design "page".
const GET_PARTIAL_DESIGN_QUERY = `
  query GetPartialDesign($datasource: String!, $language: String!) {
    item(path: $datasource, language: $language) {
      rendered
    }
  }
`;

type ComponentProps = {
  item?: {
    rendered: {
      sitecore: {
        route: {
          name: string;
          placeholders: {
            [MAIN_PLACEHOLDER]: ComponentRendering[];
          };
        };
      };
    };
  };
  params: ComponentParams;
  dataSource?: string;
  /** Merged getComponentServerProps results for each child rendering (keyed by uid) */
  componentProps?: Record<string, unknown>;
};

type PartialDesignResponse = {
  item: ComponentProps['item'];
};

type ComponentMapEntry = {
  getComponentServerProps?: GetComponentServerProps;
  dynamicModule?: () => Promise<unknown>;
};

/** Recursively flatten all renderings from placeholders */
function flattenRenderings(placeholders: PlaceholdersData | undefined): ComponentRendering[] {
  if (!placeholders) return [];

  const list: ComponentRendering[] = [];

  for (const renderings of Object.values(placeholders)) {
    for (const r of renderings) {
      list.push(r);

      if (r.placeholders) {
        list.push(...flattenRenderings(r.placeholders));
      }
    }
  }

  return list;
}

/** Resolve component module (handles dynamicModule) */
async function getResolvedModule(
  components: Map<string, ComponentMapEntry>,
  componentName: string,
): Promise<{ getComponentServerProps?: GetComponentServerProps } | null> {
  const component = components.get(componentName);

  if (!component) return null;

  const resolved = component.dynamicModule == null ? component : await component.dynamicModule();

  return resolved as { getComponentServerProps?: GetComponentServerProps };
}

export const Default = ({ item, params, componentProps: partialChildProps }: ComponentProps) => {
  const componentPropsContext = useContext(ComponentPropsReactContext);

  if (!item?.rendered?.sitecore?.route) {
    return null;
  }

  const { name: routeName, placeholders } = item.rendered.sitecore.route;
  const { DynamicPlaceholderId, styles } = params;
  const placeholderName = `partial-design-component-${DynamicPlaceholderId}`;

  const rendering = {
    name: routeName,
    placeholders: {
      [placeholderName]: placeholders[MAIN_PLACEHOLDER],
    },
  };

  // Merge our child getComponentServerProps results into context so Placeholder lookups find them
  const mergedComponentProps = {
    ...componentPropsContext,
    ...partialChildProps,
  };

  return (
    <div className={`component ${styles}`}>
      <ComponentPropsContext value={mergedComponentProps}>
        <Placeholder name={placeholderName} rendering={rendering} />
      </ComponentPropsContext>
    </div>
  );
};

export const getComponentServerProps: GetComponentServerProps = async (
  rendering,
  layoutData,
  context,
) => {
  if (!rendering.dataSource) {
    return {};
  }

  const graphQLClient = getGraphQlClient();
  const result = await graphQLClient.request<PartialDesignResponse>(GET_PARTIAL_DESIGN_QUERY, {
    datasource: rendering.dataSource,
    language: layoutData?.sitecore?.context?.language,
  });

  // Return an empty object if the item is missing.
  if (!result?.item) {
    return {};
  }

  const placeholders = result.item?.rendered?.sitecore?.route?.placeholders;
  const childRenderings = flattenRenderings(placeholders);
  const componentProps: Record<string, unknown> = {};

  // Get the results from every component that uses `getComponentServerProps`.
  await Promise.all(
    childRenderings.map(async (childRendering) => {
      const uid = childRendering.uid;

      if (!uid) return;

      const resolvedModule = await getResolvedModule(
        componentMap as Map<string, ComponentMapEntry>,
        childRendering.componentName,
      );

      if (!resolvedModule?.getComponentServerProps) return;

      const childProps = await resolvedModule.getComponentServerProps(
        childRendering,
        (layoutData ?? { sitecore: { route: null } }) as LayoutServiceData,
        context,
      );

      componentProps[uid] = childProps ?? {};
    }),
  );

  return {
    ...result,
    dataSource: rendering.dataSource,
    componentProps,
  };
};

Bench dedications

Sun, 31 Aug 2025 00:00:00 GMT

While surfing the web, I found OpenBenches, a site that catalogs all memorial benches across the world. I didn’t see any entries for my city, but forgot about it. A few months later while walking to the park with my son, I was reminded of the site while looking at park benches. I started taking photos and came up with a goal to capture all the benches close by.

To help figure that out, I found all the bench data and then created a site that overlaid my own OpenBenches progress on top.

Bench dedications

Features

Show all OpenBench data on a map
Match up city data with OpenBench data to show remainders
Group remaining data by park/region
Show total progress and progress in each park/region
Search dedication text

Improvements and stuff to figure out

The city data is not great. Some benches are just physically not there, or their dedication plaque has been removed
Unclear how to deal with multiple plaques on one bench
Do tables count as benches?
Many benches near me are inaccessible by construction
Lots of benches are on gravel paths, which isn’t great for pushing a stroller

Vibe coding

This is my first project where I’ve tried to use AI to generate as much code as possible.

Every new feature makes the entire project harder to understand, so after a few, I’ve prompted to refactor the work.
Functionality I knew how to write by hand was easy to review. Functionality I had not dealt with before, like Cloudflare’s Wrangler configuration, ended up being complicated to troubleshoot.
Describing styling as a prompt is hard and I resorted to changing Tailwind classes by hand to it to look right.
To troubleshoot certain bugs, the output added console logs and asked the output to be pasted into chat. I’m sure there is some browser/MCP way to do this that would have made it easier.
One bug could never be fixed by prompting. It would generate a fix that would cause a second issue and then fix that issue which would return to the original bug.

Setting up a new MacBook in 2025 for web development

Mon, 17 Mar 2025 00:00:00 GMT

To help automate the setup of a new MacBook in 2025, I use the following scripts:

Check for Command Line Tools update

xcode-select --install

Install homebrew

bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

.Brewfile

Create the following .Brewfile, then run brew bundle.

brew "dockutil"
brew "ffmpeg"
brew "fnm"
brew "git"
brew "imagemagick"
brew "mas"
brew "yt-dlp"
brew "zsh-autosuggestions"
cask "1password"
cask "android-platform-tools"
cask "appcleaner"
cask "bambu-studio"
cask "cursor"
cask "docker"
cask "elgato-control-center"
cask "elgato-stream-deck"
cask "figma"
cask "firefox"
cask "google-chrome"
cask "imageoptim"
cask "iterm2"
cask "jabra-direct"
cask "lastfm"
cask "maccy"
cask "microsoft-edge"
cask "microsoft-office"
cask "microsoft-remote-desktop"
cask "microsoft-teams"
cask "monitorcontrol"
cask "obs"
cask "openvpn-connect"
cask "plex"
cask "powershell"
cask "sonos"
cask "steam"
cask "sublime-text"
cask "vlc"
mas "1Password for Safari", id: 1569813296
mas "Divvy", id: 413857545
mas "DuckDuckGo Privacy for Safari", id: 1482920575
mas "Microsoft Remote Desktop", id: 1295203466
mas "uBlock Origin Lite", id: 6745342698
mas "Velja", id: 1607635845
mas "Xcode", id: 497799835

Packages

Casks

macOS App Store

macOS changes

# Dock
dockutil --remove 'App Store'
dockutil --remove 'iPhone Mirroring'
dockutil --remove Calendar
dockutil --remove Contacts
dockutil --remove FaceTime
dockutil --remove Freeform
dockutil --remove Keynote
dockutil --remove Mail
dockutil --remove Maps
dockutil --remove News
dockutil --remove Notes
dockutil --remove Numbers
dockutil --remove Pages
dockutil --remove Photos
dockutil --remove Reminders
dockutil --remove Safari
dockutil --remove TV

dockutil --add /Applications/Firefox.app
dockutil --add /Applications/Cursor.app
dockutil --add /Applications/iTerm.app

# Install `oh-my-zsh`
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)" "" --unattended

# Add `zsh-autosuggestions` to ~/.zshrc
grep -q "zsh-autosuggestions" ~/.zshrc || echo "source $(brew --prefix)/share/zsh-autosuggestions/zsh-autosuggestions.zsh" >> ~/.zshrc

# Add `fnm` to ~/.zshrc
grep -q "fnm" ~/.zshrc || echo 'eval "$(fnm env --use-on-cd --shell zsh)"' >> ~/.zshrc

# Install latest LTS version of Node
fnm install --lts

# Install `bum`
curl -fsSL https://raw.githubusercontent.com/owenizedd/bum/25fa0552c92aa9a1434e63d465ebaba014efe770/install.sh | bash

# Screenshots
mkdir ~/Screenshots
defaults write com.apple.screencapture location ~/Screenshots

# Show hidden files
defaults write com.apple.finder AppleShowAllFiles YES

# Hide dock
osascript -e "tell application \"System Events\" to set the autohide of the dock preferences to true"

# Restart Dock
killall Dock

Manual steps

Rename computer
Enable SSH agent in 1Password

2026 update

Updated to use .Brewfile
Replaced nvm with fnm in formulae
Added zsh-autosuggestions in formulae
Added bambu-studio, jabra-direct, openvpn-connect to casks
Removed lunar, raycast, visual-studio-code from casks
Added Windows App to App Store
Added bum, oh-my-zsh to manual steps

Bookmarklet to copy a page

Sat, 01 Mar 2025 00:00:00 GMT

On a recent project, I needed to pull the HTML of an existing site and rebrand it in another environment. Unfortunately, due to CORS and anti-crawling measures, I couldn’t fetch the data using a script.

To help speed up the process, I created a bookmarklet that could fetch the contents of pages while on the document. It created a little bash script to create the directory and file, then open it immediately in VS Code.

javascript: (async function () {
  let response = await fetch(location.href, { cache: 'no-store' });
  let html = await response.text();

  let parser = new DOMParser();
  let doc = parser.parseFromString(html, 'text/html');

  let title = (doc.querySelector('title')?.textContent || 'Untitled').trim();
  let description = (doc.querySelector('meta[name="description"]')?.content || '').trim();
  let main = doc.querySelector('main')?.outerHTML || '\x3C!-- No <main> found -->';

  let path = location.pathname
    .replace(/\/$/, '')
    .replace(/[^a-zA-Z0-9\\/_-]/g, '')
    .toLowerCase();
  if (!path || path === '/') path = 'home';

  let dirPath = `src${path}`;
  let filePath = `${dirPath}/index.liquid`;

  let bashScript = `mkdir -p "${dirPath}" && touch "${filePath}" && code "${filePath}"`;

  let frontMatter = `---\ntitle: "${title}"\ndescription: "${description}"\n---`;

  let content = `${frontMatter}\n${main}`;

  await navigator.clipboard.writeText(bashScript);

  alert('First Bash script copied to clipboard! Press OK to copy the full content.');

  await navigator.clipboard
    .writeText(content)
    .catch((err) => console.error('Clipboard error:', err));
})();

Drag me to your bookmark bar

Creating a site collection app catalog via the UI

Tue, 03 Dec 2024 00:00:00 GMT

Normally to create a site collection app catalog, this needs to be accomplished using PowerShell via Add-SPOSiteCollectionAppCatalog or Add-PnPSiteCollectionAppCatalog. However, if you’re creating a lot of sites constantly using the UI, it can be a bit of a pain to login to PowerShell just to create the app catalog. This is where this web part comes in:

Check out spfx-site-collection-app-catalog on GitHub.

To use it, you need to use the workbench to load the web part. The web part can be installed in the tenant app catalog, or a site collection app catalog can be created for the admin site.

Behind the scenes, it sends the following XML to create the site:

<Request
  AddExpandoFieldTypeSuffix="true"
  SchemaVersion="15.0.0.0"
  LibraryVersion="16.0.0.0"
  ApplicationName="GO Development Tools"
  xmlns="http://schemas.microsoft.com/sharepoint/clientquery/2009"
>
  <Actions>
    <ObjectPath Id="38" ObjectPathId="37" />
    <ObjectPath Id="40" ObjectPathId="39" />
    <ObjectPath Id="42" ObjectPathId="41" />
    <ObjectPath Id="44" ObjectPathId="43" />
    <ObjectPath Id="46" ObjectPathId="45" />
    <ObjectPath Id="48" ObjectPathId="47" />
  </Actions>
  <ObjectPaths>
    <Constructor Id="37" TypeId="{268004ae-ef6b-4e9b-8425-127220d84719}" />
    <Method Id="39" ParentId="37" Name="GetSiteByUrl">
      <Parameters>
        <Parameter Type="String">https://contoso.sharepoint.com/sites/example</Parameter>
      </Parameters>
    </Method>
    <Property Id="41" ParentId="39" Name="RootWeb" />
    <Property Id="43" ParentId="41" Name="TenantAppCatalog" />
    <Property Id="45" ParentId="43" Name="SiteCollectionAppCatalogsSites" />
    <Method Id="47" ParentId="45" Name="Add">
      <Parameters>
        <Parameter Type="String">https://contoso.sharepoint.com/sites/example</Parameter>
      </Parameters>
    </Method>
  </ObjectPaths>
</Request>

This approach to installing web parts to the admin site is not recommended for production tenants.

Container bookmarklet

Tue, 19 Nov 2024 00:00:00 GMT

This bookmarklet outlines containers and shows their size to help test designs. Has some additional functionality for scrolling within modern SharePoint pages. Drag the following link to your bookmark bar.

View container sizes

javascript:(() => {
    const style = document.createElement('style');
    style.textContent = `
        .container-outline {
            outline: 2px dashed purple;
            pointer-events: none;
            position: fixed;
            z-index: 10000;
        }

        .container-outline-label {
            background: rgba(0, 0, 0, 0.7);
            color: white;
            font-family: var(--fontFamilyBase, system-ui);
            font-size: 0.75rem;
            padding: 0.25rem;
            position: absolute;
            transform: translateY(-100%);
        }
    `;
    document.head.appendChild(style);

    const updateOutlines = () => {
        document.querySelectorAll('.container-outline').forEach((el) => el.remove());

        document.querySelectorAll('body *:not(script):not(link)').forEach((el) => {
            const { containerType } = getComputedStyle(el);

            if (containerType === 'normal') return;

            const rect = el.getBoundingClientRect();

            const outline = document.createElement('div');
            outline.className = 'container-outline';
            outline.style.left = `${rect.left}px`;
            outline.style.top = `${rect.top}px`;
            outline.style.width = `${rect.width}px`;
            outline.style.height = `${rect.height}px`;

            const label = document.createElement('div');
            label.className = 'container-outline-label';
            label.textContent = `${Math.round(rect.width)} x ${Math.round(rect.height)}`;
            outline.appendChild(label);

            document.body.appendChild(outline);
        });
    };

    updateOutlines();

    window.addEventListener('resize', updateOutlines);
    window.addEventListener('scroll', updateOutlines);
    document
        .querySelector('[data-automation-id="contentScrollRegion"]')
        .addEventListener('scroll', updateOutlines);
})();

spfx-azure-pipeline

Wed, 13 Nov 2024 00:00:00 GMT

A sample azure-pipeline.yml for building SharePoint Framework projects within Azure DevOps.

Assumes a .nvmrc file in the root, defining the Node version to use.

One package

trigger:
  batch: 'true'
  branches:
    include:
      - main

variables:
  - name: release
    value: '1'

name: $(release)$(rev:.r).0+$(Date:yyyyMMdd).$(BuildID)

pool:
  name: Azure Pipelines # Update pool name

steps:
  - checkout: self
    clean: false

  - task: DeleteFiles@1
    displayName: 'Delete files from artifacts folder'
    inputs:
      SourceFolder: '$(build.artifactstagingdirectory)'
      Contents: '**'

  - powershell: |
      git clean -xdf --exclude=node_modules/
    displayName: 'Clean up all files, except for node_modules'

  - task: NodeTool@0
    displayName: 'Use Node version from .nvmrc'
    inputs:
      versionSource: 'fromFile'
      versionFilePath: '$(build.sourcesdirectory)/.nvmrc'

  - powershell: |
      $version, $metadata = ("$(Build.BuildNumber)" -split '\+')[0, -1]
      Write-Verbose "Setting package versions to $version"

      $json = Get-Content "$(build.sourcesdirectory)/config/package-solution.json" -raw | ConvertFrom-Json
      $json.solution.version = "$version.0"
      $json | ConvertTo-Json -depth 32 | Set-Content "$(build.sourcesdirectory)/config/package-solution.json"
    displayName: 'Set package-solution.json to use Azure DevOps build number'

  - powershell: |
      npm install --loglevel=error
      npx gulp bundle --ship
      npx gulp package-solution --ship
    displayName: 'Install, build and publish packages'

  - task: CopyFiles@2
    displayName: 'Copy built packages'
    inputs:
      SourceFolder: '$(build.sourcesdirectory)'
      Contents: 'sharepoint/solution/*.sppkg'
      TargetFolder: '$(build.artifactstagingdirectory)'
      OverWrite: true
      FlattenFolders: true

  - task: PublishBuildArtifacts@1
    displayName: 'Publish artifacts'

Multiple packages

Assumes a packages/ folder where each SharePoint Framework project lives.
Places built .sppkg files in a staging packages/ folder.

trigger:
  batch: 'true'
  branches:
    include:
      - master

variables:
  - name: release
    value: '1'

name: $(release)$(rev:.r).0+$(Date:yyyyMMdd).$(BuildID)

pool:
  name: Azure Pipelines # Update pool name

steps:
  - checkout: self
    clean: false

  - task: DeleteFiles@1
    displayName: 'Delete files from artifacts folder'
    inputs:
      SourceFolder: '$(build.artifactstagingdirectory)'
      Contents: '**'

  - powershell: |
      git clean -xdf --exclude=node_modules/
    displayName: 'Clean up all files, except for node_modules'

  - task: NodeTool@0
    displayName: 'Use Node version from .nvmrc'
    inputs:
      versionSource: 'fromFile'
      versionFilePath: '$(build.sourcesdirectory)/.nvmrc'

  - powershell: |
      $version, $metadata = ("$(Build.BuildNumber)" -split '\+')[0, -1]
      Write-Verbose "Setting package versions to $version"

      Get-ChildItem -Path "$(build.sourcesdirectory)/packages" -Recurse -Filter "package-solution.json" -Force -ErrorAction SilentlyContinue | ForEach-Object {
        $json = Get-Content $_.FullName -raw | ConvertFrom-Json
        $json.solution.version = "$version.0"
        $json | ConvertTo-Json -depth 32 | Set-Content $_.FullName
      }
    displayName: 'Set module package-solution.json to use Azure DevOps build number'

  - powershell: |
      Get-ChildItem -Path "packages" -Directory -Force | ForEach-Object {
        Push-Location $_.FullName
        npm install --loglevel=error
        npx gulp bundle --ship
        npx gulp package-solution --ship
      }
    displayName: 'Install, build and publish packages'

  - task: CopyFiles@2
    displayName: 'Copy built packages'
    inputs:
      SourceFolder: '$(build.sourcesdirectory)'
      Contents: 'packages/*/sharepoint/solution/*.sppkg'
      TargetFolder: '$(build.artifactstagingdirectory)/packages'
      OverWrite: true
      FlattenFolders: true

  - task: PublishBuildArtifacts@1
    displayName: 'Publish artifacts'

GeoIP experiment

Fri, 08 Nov 2024 00:00:00 GMT

On some projects, we use IP address lookup to personalize content. However, we’ve been curious how well this works on mobile networks. To help test this, I got v0.dev to build out a page that compares the IP address lookup (through Vercel) versus what the device GPS spits out.

Try the experiment.

Check out the GitHub repository.

Recreational viewer

Sun, 03 Nov 2024 00:00:00 GMT

The Recreational viewer is an alternative front-end to the City of Richmond activities site. It also supports a number of other sites that use similar software. The site is built with Next.js and hosted on Vercel.

When using the filtering on the normal site, the filters get unselected every time you switch between category. This tool saves the filters in local storage.

Check out the repository on GitHub.

Power Apps people picker

Wed, 28 Aug 2024 00:00:00 GMT

This people picker is inspired by posts like How to Create a People Picker in Power Apps. If you have the ability to use the PeoplePicker control from the Creator Kit, use that instead.

This control requires using the Office365Users connector, and is styled to look like a modern combobox (while is actually a classic combobox). It filters out external guests and disabled users. Using a modern combobox is not possible, due to the items not appearing during the search experience.

- cb_PeoplePicker:
    Control: Classic/ComboBox
    Properties:
      AccessibleLabel: ="People picker"
      DisplayFields: =["DisplayName","Mail"]
      InputTextPlaceholder: ="Search for a person"
      Items: |-
        =Filter(
            Office365Users.SearchUserV2(
                {
                    searchTerm: Trim(Self.SearchText),
                    isSearchTermRequired: true
                }
            ).value,
            Not("#EXT#" in UserPrincipalName),
            AccountEnabled
        )
      SearchFields: =["DisplayName","Mail"]
      BorderColor: =Color.Transparent
      BorderThickness: =0
      ChevronBackground: =
      ChevronFill: =RGBA(97, 97, 97, 1)
      ChevronHoverBackground: =Self.ChevronBackground
      ChevronHoverFill: =RGBA(79, 90, 94, 1)
      Fill: =RGBA(245, 245, 245, 1)
      Height: =32
      HoverBorderColor: =Self.ChevronBackground
      PressedColor: =RGBA(0, 0, 0, 1)
      SelectionColor: =RGBA(0, 0, 0, 255)
      SelectionFill: =
      SelectionTagColor: =RGBA(0, 0, 0, 255)
      SelectionTagFill: =
      Size: =11
      Width: =Parent.Width

Yoto Player experience

Tue, 27 Aug 2024 00:00:00 GMT

The Yoto Player has been a fun addition to our household and we’ve been leveraging their Make Your Own cards a lot. Funnily enough, I only heard about the product due to their recall on one of their products.

Useful links

Notes

Using the web app is best to create cards and playlists, not the app.
Selecting unique icons for each track is hard.
I recorded myself reading a bunch of kid’s books, but my son didn’t seem to like them.

yt-dlp can pull music from YouTube easily.

yt-dlp -x -f bestaudio --extract-audio --audio-quality 0 --audio-format mp3 --cookies cookies.txt -o '%(title)s.%(ext)s' https://music.youtube.com/playlist\?list\=PLkrDMi8luNY8myLTDcSCtdcMJqtHP-0ww

I still need to figure out the best way to print full colour stickers for the Make Your Own cards

Hiding a web part in SharePoint Framework (SPFx)

Tue, 13 Aug 2024 00:00:00 GMT

In some first-party web parts, like the Highlighted content web part, you can hide the web part if there’s nothing to show:

This not only hides the contents of the web part but also sets the .ControlZone to [aria-hidden="true"] and the inner .ControlZone--control to be display: none.

For PnP Modern Search, they accomplish this by manually removing the margins and padding from ancestor elements:

if (this.properties.showBlankIfNoResult) {
  let element = this.domElement.parentElement;
  // check up to 3 levels up for padding and exit once found
  for (let i = 0; i < 3; i++) {
    const style = window.getComputedStyle(element);
    const hasPadding = style.paddingTop !== '0px';
    if (hasPadding) {
      element.style.paddingTop = '0px';
      element.style.paddingBottom = '0px';
      element.style.marginTop = '0px';
      element.style.marginBottom = '0px';
    }
    element = element.parentElement;
  }
}

However, there is an unsupported way to hide a web part like the first-party ones can. There is a private property on BaseClientSideWebPart called isVisible. Setting this to false will hide the web part.

export default class CredentialsWebPart extends BaseClientSideWebPart<CredentialsWebPartProps> {
  public render(): void {
    if (shouldHide) {
      //@ts-expect-error `isVisible` is a private property.
      this._isVisible = false;
    }
  }
}

Generating images dynamically using Satori

Sat, 10 Aug 2024 00:00:00 GMT

Open Graph images are used by messaging apps and social media sites to show a preview of the content of a page. Creating these graphics with dynamic metadata would be a chore to do manually, but luckily there are a lot of resources out there to build them.

Satori
Usage in Next.js
Usage in Astro
Sharp vs resvg-js
Open Graph example with Next.js
Open Graph example with Astro
Non-Open Graph example

Satori

Satori is a tool that takes JSX and converts it into an SVG. It doesn’t support every CSS property unfortunately, but is an easy way for a front-end developer to make images.

OG Image Playground is a supporting tool to help visualize and debug your image generation. On more complex images, I have found that flexing works correctly in the HTML view, but not in the actual generated SVG.

Usage in Next.js

Satori is made by Vercel, so it’s easy to use within Next.js with the next/og library. However, if you’re using the app router and statically generating your site (output: export), you cannot dynamically generate images at build time. I ended up using the following comment to get around the problem.

Usage in Astro

There’s nothing out-of-the-box to help generate images for Astro, but I did try a few plugins. astro-opengraph-images creates images by crawling your generated content and pulls out metadata from it. This didn’t work in my use case, because my page titles have site suffixes on them and I didn’t want this in the output.

Resources

Sharp vs resvg-js

For this blog, I thought that the generated PNG text could look sharper and thought it might be an issue with sharp. I tried switching over to resvg-js, but this made no difference.

Open Graph example with Next.js

This comes from meetingkickstarters.com, where we dynamically generated an image for each kickstarter with it’s illustration and title.

Next.js code

/* eslint-disable @next/next/no-img-element */

import type { JSXElementConstructor, ReactElement } from 'react';
import { ImageResponse } from 'next/og';
import { readFileSync } from 'node:fs';
import path from 'node:path';

import { PageMetadata } from '@/types';
import { GOAL_COLOR_MAP_EXPORT } from '@/constants';

// Image metadata
export const alt = 'Meeting Kickstarters by Habanero Consulting Inc.';
export const size = {
  width: 1200,
  height: 630,
};

export const contentType = 'image/png';

// Image generation
export default async function Image({
  element,
  metadata,
}: {
  element?: ReactElement<any, string | JSXElementConstructor<any>>;
  metadata: PageMetadata;
}) {
  // Use CDN based woff file since resources need to be absolute.
  // Only woff (and not woff2) is supported.
  const ProximaNovaBold = await fetch(
    `https://cdn.habaneroconsulting.com/Content/Habanero/fonts/ProximaNova/ProximaNova-Bold.woff`
  ).then((res) => res.arrayBuffer());

  // Get the illustration and convert it to base64 to use within the image tag.
  const filePath = path.join('./public', metadata.imageSrc);
  const svgData = readFileSync(path.resolve(filePath));
  const base64Svg = svgData.toString('base64');
  const dataUri = `data:image/svg+xml;base64,${base64Svg}`;

  return new ImageResponse(
    element ? (
      element
    ) : (
      <div
        style={{
          backgroundColor: GOAL_COLOR_MAP_EXPORT[metadata.goal],
          display: 'flex',
          flexDirection: 'column',
          padding: 64,
          height: '630px',
          width: '1200px',
        }}
      >
        <div
          style={{
            display: 'flex',
            flexGrow: 1,
            overflow: 'hidden',
            width: '100%',
          }}
        >
          <img
            alt=""
            src={dataUri}
            width="1072px"
            height="400px"
            style={{
              maxHeight: 400,
              objectFit: 'contain',
              objectPosition: 'center',
              width: '100%',
            }}
          />
        </div>
        <div
          style={{
            color: '#293339',
            display: 'flex',
            fontSize: 50,
            justifyContent: 'center',
            marginBlockStart: 32,
            textAlign: 'center',
          }}
        >
          {metadata.title}
        </div>
      </div>
    ),
    // ImageResponse options
    {
      ...size,
      fonts: [
        {
          name: 'Proxima Nova',
          data: ProximaNovaBold,
          style: 'normal',
          weight: 400,
        },
      ],
    }
  );
}

Open Graph example with Astro

Astro code

import type { JSX } from 'astro/jsx-runtime';

import fs from 'fs/promises';
import satori from 'satori';
import sharp from 'sharp';

// @see https://og-playground.vercel.app/?share=VZHfS8MwEMf_lXAgU6hYdYqE6ctU9E2YsJe9pM2tzUyTkqTOWvq_m9sPuwYSct_73F0u10FuJQKHmVTfK8OYD63Gx66jOy2hVWHeA1aes8la48-lD8KFSXIEMpF_Fc42Rs6tti5SrsjOb-4Stt8XA5qfArfkPRwnjFS-1qI9FBt0sp6Vwzwoa6I35moqc-K3JryKSmkKXdjG5cgWwnj24eyYWqhf5Ox-OhKXqIoyRDlN__VaSKlMMWLLAze5TtOzIe-m8UGt23nMhIbcu59CIwdkq2Qoj4Ek9v3KPNHlDbW2CVtap-XKzK7iJKIOCdiamvXAO9hFA3-Iz4P9G4BPyZCYNQXwtdAeE8DKbtRnW9NEw3ZnxTzU4EuVoQQeXIN9AkFkkSip8JbKQv8H

export function OpenGraphImage({ title }: { title: string }) {
  return {
    type: 'div',
    props: {
      style: {
        alignItems: 'flex-start',
        backgroundColor: 'rgb(25, 25, 25)',
        color: 'rgb(235, 235, 235)',
        display: 'flex',
        flexDirection: 'column',
        fontFamily: 'Source Sans Pro',
        gap: 32,
        height: '100%',
        justifyContent: 'flex-end',
        padding: 64,
        width: '100%',
      },
      children: [
        {
          type: 'div',
          props: {
            style: {
              fontSize: 32,
              fontWeight: 600,
            },
            children: 'cwparsons.ca',
          },
        },
        {
          type: 'div',
          props: {
            style: {
              fontSize: 88,
              fontWeight: 600,
            },
            children: title,
          },
        },
      ],
    },
  };
}

export async function SVG(component: JSX.Element) {
  return await satori(component, {
    width: 1200,
    height: 630,
    fonts: [
      {
        name: 'Source Sans Pro',
        weight: 400,
        style: 'normal',
        data: await fs.readFile(
          './node_modules/@fontsource/source-sans-pro/files/source-sans-pro-latin-400-normal.woff',
        ),
      },
      {
        name: 'Source Sans Pro',
        weight: 600,
        style: 'normal',
        data: await fs.readFile(
          './node_modules/@fontsource/source-sans-pro/files/source-sans-pro-latin-600-normal.woff',
        ),
      },
    ],
  });
}

export async function PNG(title: string) {
  const svg = await SVG(OpenGraphImage({ title }));

  return sharp(Buffer.from(svg)).png().toBuffer();
}

Non-Open Graph example

This is another example of an dynamically generated image, using other images and translated content as a source. This takes in content from another app to get automatically posted in a Google Photos album.

This uses resvg-js to generate the image.

Node code

import { readFile } from "node:fs/promises";
import React from "react";
import satori from "satori";
import { Resvg } from "@resvg/resvg-js";

import { ImagePool } from "@squoosh/lib";
import { cpus } from "os";
const imagePool = new ImagePool(cpus().length);

export async function generateImage(
  date: string,
  description: string,
  images?: string[]
) {
  const _images = images;

  // Pad images to be a multiple of four. This helps align the images later.
  if (_images) {
    for (let i = _images.length; i % 4 !== 0; i++) {
      _images.push('');
    }
  }

  const fontArrayBuf = await readFile(
    "./src/public/fonts/Noto-Sans-JP-regular.woff"
  );
  const emojiFontArrayBuffer = await readFile(
    "./src/public/fonts/Noto-Sans-Emoji-regular.woff"
  );

  const translation = await fetch(...);

  const { data } = await translation.json();
  const ja = data.translations[0].translatedText;

  const Flex = ({
    style,
    ...props
  }: React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  >) => <div style={{ display: "flex", ...style }} {...props} />;

  const svg = await satori(
    <Flex
      style={{
        backgroundColor: "white",
        padding: "8px",
        width: "100%",
      }}
    >
      <Flex
        style={{
          border: "3px solid #c2d2c7",
          flexDirection: "column",
          gap: "16px",
          color: "black",
          padding: "10px",
          width: "100%",
        }}
      >
        <Flex style={{ fontSize: "14px" }}>{date}</Flex>

        {_images && (
          <Flex
            style={{
              justifyContent: "space-between",
              flexWrap: "wrap",
              gap: "10px",
            }}
          >
            {_images.map((image, i) => (
              <Flex key={i} style={{ width: 75, height: 75 }}>
                {image !== "" && (
                  <img
                    alt=""
                    src={image}
                    width="100%"
                    height="100%"
                    style={{ objectFit: "cover", objectPosition: "center" }}
                  />
                )}
              </Flex>
            ))}
          </Flex>
        )}
        <Flex style={{ whiteSpace: "pre-wrap" }}>{description}</Flex>
        <Flex
          style={{
            whiteSpace: "pre-wrap",
          }}
          lang="ja-JP"
        >
          {ja.replace(/<br \/>/g, "\n")}
        </Flex>
      </Flex>
    </Flex>,
    {
      width: 375,
      fonts: [
        {
          name: "Noto Sans JP",
          data: fontArrayBuf,
          weight: 400,
          style: "normal",
        },
        {
          name: "Noto Emoji",
          data: emojiFontArrayBuffer,
          weight: 400,
          style: "normal",
        },
      ],
    }
  );

  const resvg = new Resvg(svg, {
    background: "rgb(255, 255, 255)",
    fitTo: {
      mode: "width",
      value: 375 * 2,
    },
  });
  const pngData = resvg.render();
  const pngBuffer = pngData.asPng();

  const image = imagePool.ingestImage(pngBuffer);

  const result = await image.encode({ mozjpeg: {} });

  return result.mozjpeg.binary;
}

View transitions

Fri, 09 Aug 2024 00:00:00 GMT

I added view transitions to this site and am happy with the basic result in that it matched what I thought it would in my head.

Reading up on the View Transitions API is a little daunting. After transitions, I haven’t had to implement designs with complex animations. There are a bunch of guides for view transitions, so following examples seems straight forward, but I dread needing to implement something brand new.

@media not (prefers-reduced-motion) {
  @view-transition {
    navigation: auto;
  }
}

I struggled initially trying to use both the Astro functionality (<ViewTransitions>) and native CSS functionality. Even just using Astro’s transition:name prop caused it to create a ton of extra CSS styling. Moving towards just the CSS approach made things easier, but I forgot to remove some of the original Astro transition props.

Another issue I ran into is that view transitions don’t work on page redirects. This host enforces trailing slashes on URLs, and I wasn’t adding them into my links, so the 307 redirect killed the transition.

One thing I don’t like with my implementation is that if you scroll down on the homepage, click on a blog post, then click on the logo to return to the homepage, the original link is no longer in the viewport. This looks a little janky. There seems to be discussion in the CSS group regarding this issue.

Building a Sitecore personalization rule with multiple options

Thu, 08 Aug 2024 00:00:00 GMT

Create a new Condition that inherits StringOperatorCondition.

using Sitecore.Diagnostics;
using Sitecore.Rules;
using Sitecore.Rules.Conditions;
using System;

namespace Customer.Feature.FeatureName.Rules.Conditions
{
  public class NewCondition<T> : StringOperatorCondition<T> where T : RuleContext
  {
    public string Value { get; set; }

    protected override bool Execute(T ruleContext)
    {
      Assert.ArgumentNotNull(ruleContext, "ruleContext");

      // Logic that determines whether the rule applies.

      return true;
    }
  }
}

Create a new Condition under

/sitecore/system/Settings/Rules/Definitions/Elements

Create a folder underneath the Condition to contain the option types.
Create items of Standard Template to represent each option type. Leverage the name within your logic and set the display name to something helpful for the author.

Set the Text of the condition to:

where the (context) has any [Value,TreeList,root=/sitecore/system/Settings/Rules/Definitions/Elements/Options&&selection={1930BBEB-7805-471A-A3BE-4858AC7CF696}, the list]

Set the Type of the condition to:

Customer.Feature.FeatureName.Rules.Conditions.NewCondition, Customer.Feature.FeatureName

Initial Sanity impressions

Wed, 07 Aug 2024 00:00:00 GMT

This content is still a work-in-progress.

My workplace has been a Sitecore partner for many years, and while we still enjoy their product and look forward to using XM Cloud, it’s overall licensing is too much for smaller customers. I’ve been exploring different options and have been impressed with Sanity so far. We plan on using it with Next.js.

For alternatives, we looked at builder.io, Storyblok, Prismic, Plasmic, DataCMS, AgilityCMS, Contentful, Strapi, React Bricks, Payload.

Helpful links

Resources

Plugins

Existing projects

useActionState alternative with React

Thu, 01 Aug 2024 00:00:00 GMT

useActionState is currently in the canary channel of React. I want to use this for a new Next.js site, but I can’t switch to the canary channel without causing breaking issues to other areas of the site. Instead, I’m using this alternative. It doesn’t support the permalink parameter yet, but I’m not leveraging that part yet.

/** use-action-state.ts */
import { useState, useTransition } from 'react';

export function useActionState<State, Payload>(
  action: (state: Awaited<State>, payload: Payload) => State | Promise<State>,
  initialState: Awaited<State>,
  _permalink?: string,
): [state: Awaited<State>, dispatch: (payload: Payload) => void, isPending: boolean] {
  const [state, setState] = useState<Awaited<State>>(initialState);
  const [isPending, startTransition] = useTransition();

  const submitAction = async (payload: Payload) => {
    startTransition(async () => {
      const _state = await action(state, payload);
      setState(_state);
    });
  };

  return [state, submitAction, isPending];
}

Power Apps learnings

Thu, 01 Aug 2024 00:00:00 GMT

Project evolution

During my first project with Power Apps (May - August 2024), there were significant updates and new components introduced. This necessitated revisiting and updating existing components to leverage improved features.

Naming conventions

The client adhered to specific naming conventions for layers, aligning with the guidelines in 2024 Power Apps Coding Standards For Canvas Apps.

Consistent spacing

Utilizing vertical and horizontal containers is crucial for maintaining consistent spacing throughout your app.

HTML text components

While HTML text components may seem unconventional, they are essential in scenarios where vertical and horizontal containers cannot achieve the desired width or flex options, similar to web apps. They also support auto height.

SharePoint limitations

If a SharePoint list contains more than 12 lookup columns, it cannot be used directly within a Power App. Alternatives include creating a Power Automate flow to retrieve and return content or using the Office 365 Group connector to make Graph calls. The latter option could have saved time, as I initially created multiple flows for this purpose.

Data transformation

When building Power Apps that connect to Flows for data retrieval, I found it more efficient to handle all data transformations within Power Apps. The flow would simply retrieve data and return it without additional transformations.

Permissions challenges

Collaborating on the same app or flow can lead to permissions issues. Problems arise if the app is owned by one person and the flow or its connections are owned by another.

Flow stability

Many flows would randomly break, necessitating a refresh within the Power App.

YAML code copying and pasting

The ability to copy and paste YAML code within Power Apps, introduced during development, is extremely useful for duplicating fields. Copying and pasting layers appends a _{number} to the layer, which does not conform to naming conventions. Instead, copying YAML allows for find-and-replace adjustments before pasting the code back in. However, this can sometimes disrupt styling, requiring the removal of box shadows.

As of writing (August 2024), this feature disappeared. Hopefully it’s just a bug and will return.

Component borders

Adding lines or borders between components is not always straightforward, often necessitating the use of 1px rectangles.

Contextual information

All my Power Apps required contextual information, which was handled by passing query string parameters using named formulas.

fxUrlParameters = {
    ListItemId: Param("listItemId"),
    LaunchSource: Coalesce(
        Param("launchsource"),
        "Unknown"
    ),
    DebugMode: And(
        Not(IsBlank(Param("debugmode"))),
        Lower(Param("DebugMode")) = "true"
    )
};

Interactivity

There’s no way to handle enter presses on form inputs. There is very limited hover or focus state styling.

Re-usable functionality

In some cases, we may want to use the same set of functions multiple times on one screen. For example, if content needs to be fetched and refreshed after an add button or remove button click, you may need to write the same code twice. Instead, create a hidden button with the shared functionality in the OnSelect, and run Select(btn) in the areas where the function is necessary.

Git version control (experimental)

I tried turning on Git version control in May 2024, but it forced me to authenticate every time I opened the app. When I wanted to turn it off, it did not work. I had to export and re-import the app so that the feature was disabled. I had hoped that putting everything in source control was going to be useful, but it never panned out.

Scale to fit

Since our apps were built to be responsive, this feature was always toggled off first. Sometimes toggling it off after an app has been created will cause all sorts of weird issues.

Matthew Devaney’s blog is essential reading. I read every Power App post. Some notable pieces:
Reza Dorrani’s YouTube channel
Microsoft Power Apps - Create Apps from Figma UI Kit (Preview)
r/PowerApps on Reddit
Creator kit

Helpful Power Apps formulas

Mon, 22 Jul 2024 00:00:00 GMT

Error handling

Every external call should be wrapped with IfError, along with Notify to show error messaging.

IfError(
    Set(
        gblDocument,
        LookUp(
            'Document Library',
            And(
                'Document Id' = Value(fxUrlParameters.ListItemId),
                'Document revision' = gblDocumentRevision
            )
        )
    ),
    // On failure
    Notify(
        $"Sorry, something went wrong trying to get document data. Please try again.",
        NotificationType.Error
    );
    Notify(
        FirstError.Message,
        NotificationType.Error
    ),
    // On success
    ...
);

Getting content through Microsoft Graph

If you can’t connect to a SharePoint list or library due to the max lookup column issue, it is possible to retrieve content using the Graph Call.

With the Office 365 Groups connector, the following query can get a list item from a SharePoint list:

IfError(
    With(
        {
            varDocument: Office365Groups.HttpRequest(
                $"https://graph.microsoft.com/v1.0/sites/{fxUrlParameters.SiteId}/lists/{fxUrlParameters.ListId}/items/{fxUrlParameters.ListItemId}",
                "GET",
                ""
            )
        },
        UpdateContext({
            locDocumentTitle: Text(varDocument.fields.Title)
        });
    ),
    // On failure
    Notify(
        $"Sorry, something went wrong trying to get document metadata. Please try again.",
        NotificationType.Error
    );
    Notify(
        FirstError.Message,
        NotificationType.Error
    ),
    // On success
    ...
);

People picker using a combo box

Parsing JSON from a Power Automate flow

When a Power Automate flow returns JSON back, use the following convention for the respond step, and then the following query in the app.

Table(ParseJSON('Power Automate Flow name').Run().json).value)

Power Apps text width formulas

Mon, 01 Jul 2024 00:00:00 GMT

Inspired by this Reddit post, this CodePen creates formulas that can be used to determine text widths based on the content of a text component in Power Apps. It uses JavaScript to inspect the width of every character and then generates a formula that groups these characters.

This might be useful in scenarios where you need a text component to be the most minimal width in a horizontal container, like if it were an item of a flexed element in HTML.

In the end, this functionality was not used, and the HTML component with inline flex styles was used instead.

See the Pen <a href="https://codepen.io/cparsons/pen/RwmrPBj"> Power Apps width formulas for Segoe UI</a> by Christopher Parsons (<a href="https://codepen.io/cparsons">@cparsons</a>) on <a href="https://codepen.io">CodePen</a>.

Related search web component for PnP Modern Search

Thu, 20 Jun 2024 00:00:00 GMT

A web component for showing related search results within a PnP Modern Search result. At work, this was used within a pnp-panel web component to show documents related to the original search result.

This is best added by creating PnP Modern Search extensibility library.

It allows using a number of tokens, like {searchTerms}, {inputQueryText}, {TenantUrl}, {Hub.HubSiteId} and {Today}, and supports audience targeting.

<pnp-search
  query="test*"
  row-limit="10"
  select-properties="Title,Path,Description"
  sort-direction="1"
  sort-property="Created"
  use-audience-targeting="true"
>
  <template>
    <ul>
      {{#each results}}
      <li>
        <a href="{{Path}}">{{Title}}</a>
        {{#if Description}}
        <p>{{Description}}</p>
        {{/if}}
      </li>
      {{/each}}
    </ul>
  </template>
</pnp-search>

Since the inner template uses Handlebars, if the web component is to be used within a Handlebars component, the inner template needs to be escaped using {{{{raw}}}} and {{{{/raw}}}}.

import { SPHttpClient } from '@microsoft/sp-http';
import { PageContext } from '@microsoft/sp-page-context';
import { BaseWebComponent } from '@pnp/modern-search-extensibility';

/**
 * A web component that can display its own search results using Handlebars.
 */
export class SearchWebComponent extends BaseWebComponent {
  private readonly DEFAULT_ROW_LIMIT = 10;
  private readonly DEFAULT_SELECTED_PROPERTIES = ['Title', 'Path', 'Description'];
  private readonly DEFAULT_SOURCE_ID = '8413cd39-2156-4e00-b54d-11efd9abdb89';

  constructor() {
    super();

    this.attachShadow({ mode: 'open' });
  }

  public async connectedCallback() {
    await this.render();
  }

  private async render() {
    const QueryTemplate = this.getAttribute('query');
    const RowLimit = parseInt(this.getAttribute('row-limit') ?? this.DEFAULT_ROW_LIMIT.toString());
    const SelectProperties =
      this.getAttribute('select-properties')?.split(',') ?? this.DEFAULT_SELECTED_PROPERTIES;
    const SourceId = this.getAttribute('source-id') ?? this.DEFAULT_SOURCE_ID;
    const SortDirection = this.getAttribute('sort-direction') ?? undefined;
    const SortProperty = this.getAttribute('sort-property') ?? undefined;
    const UseAudienceTargeting = this.getAttribute('use-audience-target') === 'true';

    const templateElement = this.querySelector('template');

    if (!QueryTemplate || !templateElement || !this.shadowRoot) {
      return;
    }

    const hbs = templateElement.innerHTML.replaceAll('\\{', '{');

    const Handlebars = await import(
      /* webpackChunkName: 'search-extensibility-handlebars' */ 'handlebars'
    );
    const template = Handlebars.compile(hbs);

    const results = await this.fetchSearchResults({
      QueryTemplate,
      RowLimit,
      SelectProperties,
      SourceId,
      SortDirection,
      SortProperty,
      UseAudienceTargeting,
    });

    const renderedHtml = template({ results });
    this.shadowRoot.innerHTML = renderedHtml;
  }

  private async fetchSearchResults({
    QueryTemplate,
    RowLimit,
    SelectProperties,
    SourceId,
    SortDirection,
    SortProperty,
    UseAudienceTargeting = false,
  }: {
    QueryTemplate: string;
    RowLimit: number;
    SelectProperties: string[];
    SourceId: string;
    SortDirection?: string;
    SortProperty?: string;
    UseAudienceTargeting?: boolean;
  }) {
    const spHttpClient = this._serviceScope.consume(SPHttpClient.serviceKey);
    const pageContext = this._serviceScope.consume(PageContext.serviceKey);

    const body: any = {
      request: {
        QueryTemplate,
        ClientType: 'SearchWebComponent',
        TrimDuplicates: false,
        SelectProperties: {
          results: SelectProperties,
        },
        RowLimit,
        SourceId,
        SortList: undefined,
      },
    };

    if (SortDirection && SortProperty) {
      body.request.SortList = {
        results: [{ Direction: SortDirection, Property: SortProperty }],
      };
    }

    if (UseAudienceTargeting) {
      body.request.QueryTemplate +=
        ' AND (ModernAudienceAadObjectIds:{User.Audiences} OR NOT IsAudienceTargeted:true)';
    }

    body.request.QueryTemplate = await this.replaceTokens(body.request.QueryTemplate);

    const response = await spHttpClient.post(
      `${pageContext.web.serverRelativeUrl}/_api/search/postquery`,
      SPHttpClient.configurations.v1,
      {
        headers: {
          'odata-version': '3.0',
          accept: 'application/json;odata=nometadata',
        },
        body: JSON.stringify(body),
      },
    );

    if (!response.ok) {
      throw new Error(`Error: ${response.statusText}`);
    }

    const data = await response.json();

    return data.PrimaryQueryResult.RelevantResults.Table.Rows.map(this.transformResults);
  }

  private transformResults(row: any) {
    const result: any = {};

    row.Cells.forEach((cell: any) => {
      result[cell.Key] = cell.Value;
    });

    return result;
  }

  /**
   * @see https://microsoft-search.github.io/pnp-modern-search/usage/search-results/tokens/
   * @see https://github.com/microsoft-search/pnp-modern-search/blob/main/search-parts/src/services/tokenService/TokenService.ts
   * @param queryTemplate
   * @returns
   */
  private async replaceTokens(queryTemplate: string) {
    const pageContext = this._serviceScope.consume(PageContext.serviceKey);

    // Remove search terms, which would be common if copying directly from a search results web part
    queryTemplate = queryTemplate.replace(/\{searchTerms\}/gi, '');
    queryTemplate = queryTemplate.replace(/\{inputQueryText\}/gi, '');

    queryTemplate = queryTemplate.replace(
      /\{TenantUrl\}\/?/gi,
      pageContext.legacyPageContext.portalUrl,
    );

    // Current hub
    queryTemplate = queryTemplate.replace(
      /\{Hub.HubSiteId\}/gi,
      pageContext.legacyPageContext.hubSiteId,
    );

    // Current date
    queryTemplate = queryTemplate.replace(/\{Today\}/gi, new Date().toISOString().split('T')[0]);

    // Replace manually escaped curly braces
    queryTemplate = queryTemplate.replace(/\\({|})/gi, '$1');

    return queryTemplate;
  }
}

Looping through people in a PnP Modern Search result template

Fri, 31 May 2024 00:00:00 GMT

When retrieving multiple users using PnP Modern Search, you’ll get something like this:

{
  "DocumentOwnerOWSUSER": "user1@contoso.onmicrosoft.com | User One | C2D1...A407 i:0#.f|membership|user1@contoso.onmicrosoft.com\n\nuser2@contoso.onmicrosoft.com | User Two | C2D1...A407 i:0#.f|membership|user2@contoso.onmicrosoft.com"
}

Unfortunately, using handlebars and handlebars-helpers, it’s not possible to split on the new lines (\n\n).

Instead, we can split | and hardcode the indexes to get the email and name.

{{#if item.DocumentOwnerOWSUSER}}
  <ul>
    {{#withGroup (after (split item.DocumentOwnerOWSUSER '|') 1) 4}}
      <li>
        <picture>
          <img
            alt='Photo for {{itemAt this 0}}'
            height='24'
            loading='lazy'
            src='/_layouts/15/userphoto.aspx?size=L&username={{getUserEmail (itemAt this 3)}}'
            width='24'
          />
        </picture>
        <span>{{itemAt this 0}}</span>
      </li>
    {{/withGroup}}
  </ul>
{{else}}
  (None)
{{/if}}

Showing managed metadata tag names in PnP Modern Search result templates

Mon, 01 Apr 2024 00:00:00 GMT

When retrieving a mapped managed metadata value from a search result, you might get the following back:

"RefinableString100": "GP0|#f1527ba5-5934-44f9-85d2-bb05dde6630a;L0|#f77cc337-58b0-4791-b4c8-6d38f8882718|Sample term;GTSet|#f8c2158b-6890-4f8a-b016-c73676672638",

To get just the value Sample term, we can split it and loop through the values. If one starts with L0, we can use getTagName to get the text. This works with multiple tags too. It outputs (None) if there are no values.

{{#if item.RefinableString100}}
  <ul>
    {{#each (split item.RefinableString100 ';') as |tag|}}
      {{#startsWith 'L0' tag}}
        <li>{{getTagName tag}}</li>
      {{/startsWith}}
    {{/each}}
  </ul>
{{else}}
  <span>(None)</span>
{{/if}}

Meeting Kickstarters using Next.js, Decap CMS

Fri, 23 Feb 2024 00:00:00 GMT

MeetingKickstarters.com is my first production Next.js site that we built as part of a end-of-year experience to send to customers at Habanero.

The site leverages:

Framework: Next.js
CMS: DecapCMS, connected to Azure DevOps
- Connected to a Azure DevOps git repository
Hosting: Azure Static Web Apps

Azure Static Web Apps

Azure Static Web Apps have mixed support for Next.js 14 and the app directory. I wanted to get Next’s standalone server working, but I ran into tons of different errors. Since we were using Azure DevOps and not GitHub, we had to use the SWA CLI, which may have been one of the sources of the issues. Hopefully this works in the future, as Azure Static Web Apps fit into our workplace’s ecosystem well.

DecapCMS

DecapCMS was an easy and free way to allow content authors to make simple changes to the site. Since we already leverage Azure DevOps, integrating with it was simple and we got single-sign on for free. This feature is thousands of dollars with other platforms.

One pain with DecapCMS is that the live preview of the site within the tool requires using a client component. This prevents using server components within it, or in our case, using Node to dynamically get image dimensions.

react-aria

I leveraged react-aria to handle all of our interactive components. This made it a lot easier to deal with the accessibility concerns that interactions can have.

Image optimization

This site was built using Next’s static site generation rendering mode. SSG does not have an image optimization solution, so we leveraged next-image-export-optimizer. This tool is pretty great, but does not convert to AVIF yet.

Read more about the inspiration on habaneroconsulting.com.

Caching Airtable API requests using Azure Functions

Thu, 08 Feb 2024 00:00:00 GMT

At work we built a basic casino app that leveraged Airtable to store player transactions. To prevent hitting API limits and sending our Airtable tokens to the client, we proxied our Airtable requests through an Azure Function, created with our Static Web App.

Server-side

/* api/src/functions/airtable.mjs */

import { app } from '@azure/functions';
import NodeFetch from 'node-fetch';
import NodeCache from 'node-cache';

const AIRTABLE_API = `https://api.airtable.com/v0`;
const RESPONSE = {
  headers: {
    'Content-Type': 'application/json',
  },
};

const cache = new NodeCache({ stdTTL: 2 });

app.http('getTable', {
  methods: ['GET'],
  authLevel: 'anonymous',
  route: 'v0/{boardId}/{tableId}',
  handler: async (request, context) => {
    context.log(`GET HTTP function processed request for url "${request.url}"`);

    if (cache.has(request.url)) {
      console.log(`Cache hit. Returning cached content.`);

      let json = cache.get(request.url);

      return {
        ...RESPONSE,
        body: JSON.stringify(json),
      };
    }

    console.log(`Cache miss. Retrieving content from Airtable.`);

    const { boardId, tableId } = request.params;
    const url = `${AIRTABLE_API}/${boardId}/${tableId}?${request.query.toString()}`;

    const response = await NodeFetch(url, {
      headers: {
        Authorization: `Bearer ${process.env.AIRTABLE_API_KEY}`,
      },
    });

    let json = await response.json();

    cache.set(request.url, json);

    return {
      ...RESPONSE,
      body: JSON.stringify(json),
    };
  },
});

app.http('getRecord', {
  methods: ['GET'],
  authLevel: 'anonymous',
  route: 'v0/{boardId}/{tableId}/{recordId}',
  handler: async (request, context) => {
    context.log(`GET HTTP function processed request for url "${request.url}"`);

    if (cache.has(request.url)) {
      console.log(`Cache hit. Returning cached content.`);

      let json = cache.get(request.url);

      return {
        ...RESPONSE,
        body: JSON.stringify(json),
      };
    }

    console.log(`Cache miss. Retrieving content from Airtable.`);

    const { boardId, tableId, recordId } = request.params;
    const url = `${AIRTABLE_API}/${boardId}/${tableId}/${recordId}?${request.query.toString()}`;

    const response = await NodeFetch(url, {
      headers: {
        Authorization: `Bearer ${process.env.AIRTABLE_API_KEY}`,
      },
    });

    let json = await response.json();

    cache.set(request.url, json);

    return {
      ...RESPONSE,
      body: JSON.stringify(json),
    };
  },
});

/** Patch, post and delete records removed for brevity */

Client-side

/* src/app/_services/get-table.ts */

import Airtable from 'airtable';

const isServer = typeof window === 'undefined';

export function getTable(tableId: string) {
  const base = new Airtable({
    apiKey: 'fake-key',
    // Enforce our proxied endpoint URL
    endpointUrl: `${window.location.protocol}//${window.location.hostname}${
      window.location.port ? `:${window.location.port}` : ``
    }/api`,
  }).base(process.env.NEXT_PUBLIC_AIRTABLE_BASE_ID);

  return base(tableId);
}

Deploying a Next.js app to SWA using the CLI and Azure DevOps

Wed, 07 Feb 2024 00:00:00 GMT

Notes:

Requires a AZURE_STATIC_WEB_APPS_API_TOKEN environment variable to be available.
Assumes a .nvmrc file in the root with a specified version of Node.

name: $(BuildID)+$(Date:yyyyMMdd)

trigger:
  batch: true
  branches:
    include:
      - main

pool:
  name: Azure Pipelines # Update with pool name

stages:
  - stage: Build

    jobs:
      - job:
        steps:
          - checkout: self

          - task: NodeTool@0
            displayName: 'Use Node version from .nvmrc'
            inputs:
              versionSource: 'fromFile'
              versionFilePath: '$(build.sourcesdirectory)/.nvmrc'

          - script: npm install
            displayName: Install npm dependencies

          - script: npx @azure/static-web-apps-cli build
            displayName: Build NextJS site and API
            env:
              NEXT_PUBLIC_BUILD_NUMBER: $(Build.BuildNumber)

          # Optionally include APIs.
          - task: CopyFiles@2
            displayName: 'Copy `api/` to staging'
            inputs:
              SourceFolder: '$(build.sourcesdirectory)/api'
              TargetFolder: '$(build.artifactstagingdirectory)/api'
              OverWrite: true

          - task: CopyFiles@2
            displayName: 'Copy `out/` to staging'
            inputs:
              SourceFolder: '$(build.sourcesdirectory)/out'
              TargetFolder: '$(build.artifactstagingdirectory)/out'
              OverWrite: true

          - task: PublishBuildArtifacts@1
            displayName: 'Publish artifacts'

  - stage: Preview
    displayName: Deploy to preview

    dependsOn:
      - Build

    jobs:
      - job:
        steps:
          - checkout: none

          - task: DownloadPipelineArtifact@2
            inputs:
              buildType: 'current'
              artifactName: 'drop'
              targetPath: '$(build.sourcesdirectory)'

          - task: NodeTool@0
            displayName: 'Use Node version from .nvmrc'
            inputs:
              versionSource: 'fromFile'
              versionFilePath: '$(build.sourcesdirectory)/.nvmrc'

          - script: npx @azure/static-web-apps-cli deploy --env preview --api-location "$(build.sourcesdirectory)/api" --app-location "$(build.sourcesdirectory)/out" --verbose=silly --deployment-token $(AZURE_STATIC_WEB_APPS_API_TOKEN)
            displayName: Deploy to preview

          # Spot to add integration testing on preview.

  - stage: Production
    displayName: Deploy to production

    dependsOn:
      - Preview

    jobs:
      - job:
        steps:
          - checkout: none

          - task: DownloadPipelineArtifact@2
            inputs:
              buildType: 'current'
              artifactName: 'drop'
              targetPath: '$(build.sourcesdirectory)'

          - task: NodeTool@0
            displayName: 'Use Node version from .nvmrc'
            inputs:
              versionSource: 'fromFile'
              versionFilePath: '$(build.sourcesdirectory)/.nvmrc'

          - script: npx @azure/static-web-apps-cli deploy --env production --api-location "$(build.sourcesdirectory)/api" --app-location "$(build.sourcesdirectory)/out" --verbose=silly --deployment-token $(AZURE_STATIC_WEB_APPS_API_TOKEN)
            displayName: Deploy to production

spfx-redirect-extension

Thu, 01 Feb 2024 00:00:00 GMT

This SharePoint Framework extension adds a message bar at the top of a SharePoint page to inform users that the page has been moved. It can optionally redirect users after a short delay to a configured page.

Check out the repository on GitHub.

Script for creating a Google container for Firefox

Wed, 22 Nov 2023 00:00:00 GMT

After migrating from Google Chrome to Firefox, I investigated all the privacy related extensions and options. Multi-Account Containers’s extension is awesome and I ended up using it for shopping and basic VPN proxy for specific websites. For Google sites, I was inspired by philsnow’s gist, that helps setup a Google-based container, similar to how the Facebook container works.

View gist on GitHub.

// @see https://gist.github.com/philsnow/322bea2867d401171ada1c2eb7a38c89
// Go to about:debugging#/runtime/this-firefox

const domains = [
  'ggpht.com',
  'google.com',
  'google.ca',
  'google.org',
  'googleapis.com',
  'g.co',
  'gle',
  'blogger.com',
  'googleblog.com',
  'blog.google',
  'googleusercontent.com',
  'googlesource.com',
  'google.org',
  'google.net',
  '466453.com',
  'gooogle.com',
  'gogle.com',
  'ggoogle.com',
  'gogole.com',
  'goolge.com',
  'googel.com',
  'googlee.com',
  'googil.com',
  'googlr.com',
  'elgoog.im',
  'ai.google',
  'com.google',
  'about.google',
  'registry.google',
  'google',
  'gstatic.com',
  'goog',
  'googleplex.com',

  'like.com',
  'keyhole.com',
  'panoramio.com',
  'picasa.com',
  'urchin.com',
  'igoogle.com',
  'foofle.com',
  'froogle.com',
  'localguidesconnect.com',
  'googlemail.com',
  'googleanalytics.com',
  'google-analytics.com',
  'googletagmanager.com',
  'googlecode.com',
  'googlesource.com',
  'googledrive.com',
  'googlearth.com',
  'googleearth.com',
  'googlemaps.com',
  'googlepagecreator.com',
  'googlescholar.com',
  'advertisercommunity.com',
  'thinkwithgoogle.com',
  'googlegroups.com',

  'youtube.com',
  'youtu.be',
  'yt.be',
  'ytimg.com',
  'youtube-nocookie.com',
  'youtubegaming.com',
  'youtubeeducation.com',
  'youtube',

  'doubleclickbygoogle.com',
  'feedburner.com',
  'doubleclick.com',
  'doubleclick.net',
  'adwords.com',
  'adsense.com',
  'admob.com',
  'advertisercommunity.com',
  'googlesyndication.com',
  'googlecommerce.com',
  'googlebot.com',
  'googleapps.com',
  'googleadservices.com',
  'gmodules.com',
  'googl.com',
  '1e100.net',
  'domains.google',
  'gv.com',
  'googletraveladservices.com',

  'madewithcode.com',
  'design.google',
  'wellbeing.google',
  'gallery.io',
  'domains.google',
  'material.io',
  'getmdl.io',
  'android.com',
  'chromium.org',
  'cobrasearch.com',
  'chromecast.com',
  'chrome.com',
  'chromebook.com',
  'madewithcode.com',
  'whatbrowser.org',
  'withgoogle.com',
  'web.dev',
  'google.dev',
  'pub.dev',
  'flutter.dev',
  'dart.dev',
  'grasshopper.app',

  'accounts.google.com',
  'ads.google.com',
  'adsense.google.com',
  'analytics.google.com',
  'answers.google.com',
  'apps.google.com',
  'artsandculture.google.com',
  'books.google.com',
  'calendar.google.com',
  'chat.google.com',
  'chrome.google.com',
  'classroom.google.com',
  'cloud.google.com',
  'code.google.com',
  'contacts.google.com',
  'crowdsource.google.com',
  'datacompute.google.com',
  'developers.google.com',
  'docs.google.com',
  'drive.google.com',
  'duo.google.com',
  'earth.google.com',
  'edu.google.com',
  'files.google.com',
  'finance.google.com',
  'firebase.google.com',
  'fonts.google.com',
  'fonts.googleapis.com',
  'groups.google.com',
  'hangouts.google.com',
  'images.google.com',
  'lh3.google.com',
  'lens.google.com',
  'maps.google.com',
  'meet.google.com',
  'myaccount.google.com',
  'news.google.com',
  'one.google.com',
  'opensource.google.com',
  'photos.google.com',
  'picasa.google.com',
  'play.google.com',
  'podcasts.google.com',
  'scholar.google.com',
  'search.google.com',
  'sites.google.com',
  'stadia.google.com',
  'store.google.com',
  'support.google.com',
  'takeout.google.com',
  'translate.google.com',
  'videos.google.com',
  'workspace.google.com',
  'www.google.com',
  'www.google.ca',
];

(async () => {
  obj = Object(await browser.storage.local.get('siteContainerMap@@_mail.google.com'));

  for (let domain of domains) {
    obj[`siteContainerMap@@_${domain}`] = obj['siteContainerMap@@_mail.google.com'];
  }

  await browser.storage.local.set(obj);
})();

Nani Kana - Hiragana and katakana practice

Sun, 15 Oct 2023 00:00:00 GMT

I built this project for my adult Japanese class to help me learn hiragana and katakana, and also to get some basic experience with Vue. It’s deployed to GitHub Pages.

My initial impression of Vue was okay? I could see how I can do everything I do in React, but I don’t immediately see any specific reasons why I would use it over React.

Nani Kana

Check out the repository on GitHub.

Show recently created or updated tags in PnP Modern Search

Fri, 01 Sep 2023 00:00:00 GMT

The following Handlebars template shows New if the item is created in the past 7 days. If it’s not new, it will show Recently updated if the item was modified in the past 7 days.

{{#if (lt (divide (minus (getDate (date) 'X') (getDate item.Created 'X')) 86400) 7)}}
  <b title='Created on {{getDate item.Created "LL"}}'>New</b>
{{else}}
  {{#if (lt (divide (minus (getDate (date) 'X') (getDate item.ModifiedOWSDATE 'X')) 86400) 7)}}
    <b
      title='Last updated on {{getDate item.ModifiedOWSDATE "LL"}}.
      Created on {{getDate item.Created "LL"}}'
    >
      Recently updated
    </b>
  {{/if}}
{{/if}}

Azure Pipelines self-hosted agent installation

Wed, 23 Aug 2023 00:00:00 GMT

A simple set of instructions for installing self-hosted agents for Azure DevOps. This helps when needing to create many agents at once.

References

Steps

Install Windows updates. May require restart.
Install Chocolately

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

Install agent dependencies

choco install visualstudio2022buildtools -y

Download agent

mkdir C:\Installs
Invoke-WebRequest -Uri "https://vstsagentpackage.azureedge.net/agent/3.220.2/vsts-agent-win-x64-3.220.2.zip" -OutFile "C:\Installs\vsts-agent-win-x64-3.220.2.zip"

Create directory for new agent. The naming structure for the agent name and folder is {{computer name}}-agent{{number}}

mkdir C:\build01-agent01
cd C:\build01-agent01
Add-Type -AssemblyName System.IO.Compression.FileSystem
[System.IO.Compression.ZipFile]::ExtractToDirectory("C:\Installs\vsts-agent-win-x64-3.220.2.zip", "$PWD")

Configure the agent

.\config.cmd --unattended --url https://dev.azure.com/[organizaiton] --auth PAT --token [token] --pool "Self-hosted" --agent build01-agent01 --runAsService --windowsLogonAccount "NT AUTHORITY\NETWORK SERVICE"

ClientSidePages translation error

Wed, 23 Aug 2023 00:00:00 GMT

While trying to provision a translated pnp:ClientSidePage, I got the error:

The web has source language 1033 while the template expects 0

Turns out the original pnp:ClientSidePage needed to have my source language in an LCID attribute, which was missing.

SharePoint full-page capture bookmarklet

Wed, 17 May 2023 00:00:00 GMT

This bookmarklet allows users to take a full-page screenshot without needing to stitch together images. It requires using Microsoft Edge.

Check out the page to get the bookmarklet.

Check out the repository on GitHub.

Bookmarklet for MLB The Show

Thu, 20 Apr 2023 00:00:00 GMT

MLB The Show 23 has a game mode called Diamond Dynasty, similar to EA’s Ultimate Team. The game has a web page to help view inventory and purchase players using in-game currency. This bookmarklet submits bids for players at one currency more than the highest bid.

//@ts-check
javascript: (() => {
  if (window.location.href.includes('/inventory')) {
    const links = document.querySelectorAll(
      'body > div.page-wrap > div.page-body > div > div.layout-primary > div > div.scrollable.has-scroll > div > table > tbody > tr > td:nth-child(3) > a',
    );

    for (let link of links) {
      if (sessionStorage.getItem(link.href) === null) {
        sessionStorage.setItem(link.href, 'true');
        link.click();
        break;
      }
    }

    return;
  }

  if (document.querySelector('form[action*="cancel"]')) {
    document.querySelector('body > div.page-wrap-items > div.referer-block > div > a').click();
    return;
  }

  const saleTableContainer = document.evaluate(
    '//h2[text()="Sell"]',
    document,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null,
  ).singleNodeValue.parentElement;
  const cheapestSaleElement = saleTableContainer.querySelector(
    'tbody > tr:nth-child(1) > td:nth-child(2)',
  );
  const price = parseInt(cheapestSaleElement?.innerText?.trim() ?? '25');

  const input = document.querySelector(
    'form[action*="create_buy_order"]:has(input[name="authenticity_token"]) #price',
  );
  input.value = price + 1;
  input.form.querySelector('button[type="submit"]').click();

  console.log(`Buying player for ${price + 1}`);
})();

Image replacer bookmarklet

Mon, 07 Nov 2022 00:00:00 GMT

This bookmarklet allows for replacing images or background images using a local file for design testing.

Check out the page to get the bookmarklet.

Check out the repository on CodeSandbox.

Mass download images from Dropbox

Thu, 29 Sep 2022 00:00:00 GMT

When receiving a link from Dropbox that is too big to download a ZIP, you may need to automate the download process.

Download script

This script can be run when in the image preview window. It downloads the current image and then moves to the next image.

window.dropboxInterval = setInterval(() => {
  document.querySelector('.dig-Button').click();
  document.querySelector('[aria-label="Next"]').click();
}, 1000);

Notes

I started with an interval of 500ms, but this was too fast and my browser wasn’t able to keep up with the downloads. This probably wasn’t bad, but I cancelled out and increased the interval to 1000ms.
Nothing appeared to throttle me.
At the 400~ image mark, the browser tab process crashed and I needed to restart the script at the last downloaded image.

Image conversion and resize

To convert the images from PNG to JPG and resize them down to a maximum width:

for image in *.png ;
do
    convert "$image" -resize 2880x\> -quality 92 "${image%.*}.jpg" ;
done

Notes

This resizes the images from original to a maximum of 2880px wide, which is retina for a normal laptop screen.
Default quality of ImageMagick is 85, this upps it to 92.

spfx-github-action-workflow

Thu, 28 Jul 2022 00:00:00 GMT

This repository has a couple sample GitHub Actions for building SharePoint Framework (SPFx) packages.

Check out the repository on GitHub.

build-package.yml

name: Build and package

on:
  workflow_call:
    inputs:
      zipped-package:
        description: Path to sppkg file
        required: false
        type: string

jobs:
  build:
    name: Build and package
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version-file: 'package.json'
          cache: npm

      - name: Install dependencies
        run: npm ci

      - name: Compile source code
        run: npx gulp bundle --ship

      - name: Create SharePoint Framework package
        run: npx gulp package-solution --ship

      - name: Upload SharePoint Framework package
        uses: actions/upload-artifact@v4
        if: ${{ inputs.zipped-package != '' }}
        with:
          name: package
          path: sharepoint/${{ inputs.zipped-package }}

ci.yml

A workflow that runs on all code pushes to main, feature and hotfix branches. This workflow is to help quickly identify changes that prevent building and packaging our SharePoint Framework project.

name: Continuous integration

on:
  push:
    branches:
      - 'main'
      - 'feature/*'
      - 'hotfix/*'

jobs:
  build:
    name: CI build
    uses: ./.github/workflows/build-package.yml

release.yml

A workflow that runs on commits that are tagged with a version (v*). This will attempt to build and package the SharePoint Framework package, and then create a draft GitHub release. The package will be attached to the release.

name: Release

on:
  push:
    tags:
      - 'v*'

jobs:
  setup:
    name: Get package configuration
    runs-on: ubuntu-latest
    outputs:
      package: ${{ steps.set-package.outputs.package }}
      zipped-package: ${{ steps.set-zipped-package.outputs.zipped-package }}
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Get package-solution.json
        id: package-solution-json
        run: |
          echo "config<<EOF" >> $GITHUB_OUTPUT
          cat ./config/package-solution.json >> $GITHUB_OUTPUT
          echo "EOF" >> $GITHUB_OUTPUT

      - name: Output zipped-package
        id: set-zipped-package
        run: |
          echo "zipped-package=${{ fromJson(steps.package-solution-json.outputs.config).paths.zippedPackage }}" >> $GITHUB_OUTPUT

      - name: Output package
        id: set-package
        run: |
          filepath="${{ steps.set-zipped-package.outputs.zipped-package }}"
          filename=${filepath##*/}
          echo "package=$filename" >> $GITHUB_OUTPUT

  build:
    name: Release build
    needs: setup
    uses: ./.github/workflows/build-package.yml
    with:
      zipped-package: ${{ needs.setup.outputs.zipped-package }}

  release:
    name: Create GitHub release
    runs-on: ubuntu-latest
    needs: [setup, build]
    steps:
      - name: Download package
        uses: actions/download-artifact@v4
        with:
          name: package

      - name: Create release
        uses: softprops/action-gh-release@v1
        if: startsWith(github.ref, 'refs/tags/')
        with:
          draft: true
          files: ${{ needs.setup.outputs.package }}
          prerelease: true

spfx-command-palette

Wed, 27 Jul 2022 00:00:00 GMT

A command palette for SharePoint using SharePoint Framework (SPFx) and ninja-keys.

I’ve always been interested in command palettes — I use them all the time with Sublime Text, VS Code, Microsoft Edge development tools.

Check out the repository on GitHub.

Using Yeoman without installing global packages

Sat, 28 May 2022 00:00:00 GMT

I don’t like installing modules globally, especially when using nvm, since global packages don’t apply to every version.

Using Yeoman is a pain without global packages, but the following commands help:

npx -p yo -p {{generator package}}@latest

Example for SharePoint Framework

npx -p yo -p @microsoft/generator-sharepoint@latest --yes -- yo @microsoft/sharepoint --skip-install --solution-name "spfx-project-template" --component-type "webpart" --component-description "HelloWorld description" --component-name "HelloWorld" --framework "react" --package-manager "npm" --skip-feature-deployment

Git pull recursively using PowerShell

Thu, 03 Mar 2022 00:00:00 GMT

This script allows me to run a git pull against all my local repositories every morning. Works on macOS too if PowerShell is installed.

# Runs `git pull --rebase` on each subfolder that contains a .git folder.
Get-ChildItem -Directory -Hidden -Depth 3 -Filter .git | ForEach-Object {
    Write-Host "Pulling $($_.FullName)..."
    git --git-dir="$($_.FullName)" --work-tree="$(Split-Path $_.FullName)" pull --rebase
}

spfx-custom-card-designer-ace

Tue, 01 Feb 2022 00:00:00 GMT

A generic adaptive card extension, inspired by the Card designer extension. Allows for creating dynamic properties in the property pane, instead of using JSON for the quick view data.

Check out the repository on GitHub.

SharePoint Framework web part icon generator

Tue, 01 Feb 2022 00:00:00 GMT

This generator creates custom SharePoint Framework web part icons using Fluent UI icons and a custom SVG.

It uses text-to-svg to convert Fluent UI icons into SVGs, where a second SVG can be merged together. This resulting SVG is then outputted as a JSON property that can be copied into a SPFx manifest.

Check it out.

Check out the CodeSandbox.

SharePoint Framework debug bookmarklet

Sun, 01 Aug 2021 00:00:00 GMT

This bookmark adds the default development query string for SPFx to the current URL.

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

Drag this to your bookmark bar.

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');

  var separator = uri.indexOf('?') !== -1 ? '&' : '?';

  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + '=' + value + '$2');
  } else {
    return uri + separator + key + '=' + value;
  }
}

var url = window.location.href;

url = updateQueryStringParameter(url, 'loadSPFX', 'true');
url = updateQueryStringParameter(
  url,
  'debugManifestsFile',
  'https://localhost:4321/temp/manifests.js',
);

window.location.href = url;

SharePoint maintenance mode bookmarklet

Thu, 01 Jul 2021 00:00:00 GMT

This bookmark adds the default ?maintenancemode=true query string to the current URL.

Drag this to your bookmark bar.

function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp('([?&])' + key + '=.*?(&|$)', 'i');
  var separator = uri.indexOf('?') !== -1 ? '&' : '?';

  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + '=' + value + '$2');
  } else {
    return uri + separator + key + '=' + value;
  }
}

const url = updateQueryStringParameter(window.location.href, 'maintenancemode', 'true');
window.location.href = url;

sp-theme-provider

Fri, 16 Apr 2021 00:00:00 GMT

A React provider and hook for getting SharePoint theme values.

/**
 * Create a SharePoint theme context provider, allowing children components to
 * use the SharePoint theme and update when the theme changes.
 *
 * Usage:
 * ```typescript
 * <SpThemeProvider observer={this} serviceScope={this.context.serviceScope}>
 *     {children}
 * </SpThemeProvider>
 * ```
 *
 * ```typescript
 * const theme = useTheme();
 * ```
 */

import { IReadonlyTheme, ThemeProvider, ThemeChangedEventArgs } from '@microsoft/sp-component-base';
import { ISPEventObserver, ServiceScope } from '@microsoft/sp-core-library';
import { isEqual } from '@microsoft/sp-lodash-subset';
import { createContext, createElement, useContext, useEffect, useRef, useState } from 'react';

/**
 * Create the React context for storing the SharePoint theme.
 */
export const SpThemeContext = createContext<IReadonlyTheme>(undefined);

type SpThemeProviderProps = {
  children?: React.ReactNode;
  observer?: ISPEventObserver;
  serviceScope: ServiceScope;
};

/**
 * Create the provider element that gets the SharePoint theme from the
 * ThemeProvider, and handles changes to the theme using React state.
 */
export const SpThemeProvider = ({ children, observer, serviceScope }: SpThemeProviderProps) => {
  // Use a ref to lazy load the ThemeProvider service.
  const themeProviderRef = useRef<ThemeProvider>(null);

  // Only load the ThemeProvider service once.
  if (themeProviderRef.current === null) {
    themeProviderRef.current = serviceScope.consume(ThemeProvider.serviceKey);
  }

  // Use a function to only get the theme once.
  const [theme, setTheme] = useState<IReadonlyTheme>(() => themeProviderRef.current.tryGetTheme());

  // Add events to handle changes to the theme.
  useEffect(() => {
    if (!observer) {
      return;
    }

    const themeChangeCallback = (themeChangeEventArgs: ThemeChangedEventArgs) => {
      // Only change the state if the theme is different.
      if (!isEqual(theme, themeChangeEventArgs.theme)) {
        setTheme(themeChangeEventArgs.theme);
      }
    };

    themeProviderRef.current.themeChangedEvent.add(observer, themeChangeCallback);

    return () => {
      themeProviderRef.current.themeChangedEvent.remove(observer, themeChangeCallback);
    };
  }, [theme]);

  return createElement(SpThemeContext.Provider, {
    children,
    value: theme,
  });
};

SpThemeProvider.displayName = 'SpThemeProvider';

export const SpThemeConsumer = SpThemeContext.Consumer;

export const useTheme = () => {
  return useContext(SpThemeContext);
};

The 500 Greatest Albums of All Time

Tue, 16 Feb 2021 00:00:00 GMT

A gist with the 500 greatest albums of all time, by the Rolling Stone magazine.

spfx-google-tag-manager

Wed, 20 Jan 2021 00:00:00 GMT

This application customizer for SharePoint Online adds Google Tag Manager to your SharePoint site. It is configurable to generate encrypted user IDs to send to the dataLayer for use within Google Analytics.

Check out the repository on GitHub.

spfx-email-signature

Sun, 20 Sep 2020 00:00:00 GMT

This web part allows users to copy their company’s branded email signature and paste it into their email client. Includes an example of using Testing Library with the SharePoint Framework.

Check out the repository on GitHub.

Client-side image resizing using Habasizer

Wed, 12 Aug 2020 00:00:00 GMT

This tool helps resize and crop basic images and provides a set of query string parameters to link to specific maximum widths and aspect ratios. It is meant to help content authors create specific sized imagery when their content management system may not provide cropping.

Check out the repository on GitHub or read more about it at habaneroconsulting.com.

Favourite albums by year

Sun, 12 May 2019 00:00:00 GMT

A gist with a list of my favourite music albums by year.