This article will demonstrate how PnP Search Web Parts can be used to build a comprehensive Site Directory that not only enhances navigation but also improves the overall user experience by providing a centralized resource for accessing various sites within your organization.
Pre-Requisites
PnP Modern Search – Search Web Parts – v4
From your SharePoint site
Instructions
Create a new Page
Edit the Page
Add the PnP Search Results Web Part

Next click ‘Configure’

Next click ‘SharePoint Search’

Next click ‘Customize’ under ‘Layouts slots’

Add SiteUrl — mapped to SPSiteUrl, click ‘Save’

Edit the Query Template, using this as my base. It will show all ‘Sites’ and not the app catalog or my sites.
contentclass:STS_Site NOT (Path:"https://z5hb8-my.sharepoint.com" OR Path:"https://z5hb8.sharepoint.com/sites/appcatalog")
Make sure to hit Apply to save the query.
Scroll down to the Paging Options
For our example we want to show as many sites as possible.
Set the number of items per page to 500

Click ‘Next’ to go to the second page of the property pane
Click ‘Custom’ Template and then {}

Replace this CSS
/* Insert your CSS overrides here */
.example-themePrimary a {
color: {{@root.theme.palette.themePrimary}};
}
.site-logo {
width: 35px;
margin-right: 10px;
}
.icon {
width: 20px;
height: 16px;
}
ul.template--custom {
list-style: none;
padding-left: 5px;
columns: 4;
}
ul.template--custom li {
display: flex;
padding: 8px;
}
.site-link {
line-height: 20px;
}
.site-link > a {
display: flex;
align-items: center;
}
.site-link, .site-link a, .site-link a:visited, .site-link a:hover, .site-link a:link {
color: #000 !important;
text-decoration: none;
}
Next replace the item template
<template id="content">
{{#> resultTypes item=item}}
{{!-- The block below will be used as default item template if no result types matched --}}
<li class="site-link">
<a href="{{slot item @root.slots.SiteUrl}}">
<img class="site-logo" src="{{slot item @root.slots.SiteUrl}}/_api/siteiconmanager/getsitelogo?type='1'"/>
<span class="site-name">{{slot item @root.slots.Title}}</span>
</a>
</li>
{{/resultTypes}}
</template>
Click ‘Save’
Click Republish
Your page should now look something like this

Conclusion
This is the first step toward making a Site Directory with all the sites you have access to. You could easily extend this to use a search box to filter these items down or change the KQL query to show only certain types of sites. You might also notice that the sites are not in order. In the next article I’ll walk you through the process of implementing the sort on the Site Name.
Hey Tom, I am learning more each day about the power of the PnP Search webparts, and they are becoming one of the “big” tools in my tool bag. I think you have a typo in the sentence above the last image. Should it read “Your page should now look something like this” with “now” replacing the “not” word? I hate it when “not” gets put into my text! Cheers!
Thanks for the correction Don! type by a human 🙂