Skip to content

Add favicon and implement markdown copy functionality with UI enhancements #5339

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
gautamdsheth merged 1 commit into from
May 31, 2026
+455 −2
Merged

Add favicon and implement markdown copy functionality with UI enhancements #5339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 37 additions & 0 deletions pages/Build-Site.ps1
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ param(

$SourceRoot = (Resolve-Path $SourceRoot).Path
$PagesPath = Join-Path $SourceRoot "pages"
$ArticlesPath = Join-Path $PagesPath "articles"
$DocumentationPath = Join-Path $SourceRoot "documentation"
$CmdletsPath = Join-Path $PagesPath "cmdlets"
$DocFxConfigPath = Join-Path $PagesPath "docfx.json"
$SitePath = Join-Path $PagesPath "_site"
$MarkdownOutputPath = Join-Path $SitePath "markdown"
$CmdletIndexPath = Join-Path $CmdletsPath "index.md"
$AliasTemplatePath = Join-Path $CmdletsPath "alias.template"

Expand All @@ -35,6 +37,39 @@ function Clear-GeneratedCmdletPages {
}
}

function Copy-MarkdownFiles {
param(
[string]$SourcePath,
[string]$DestinationPath
)

if (!(Test-Path $SourcePath)) {
return
}

Get-ChildItem -Path $SourcePath -Filter "*.md" -File -Recurse | ForEach-Object {
$relativePath = [System.IO.Path]::GetRelativePath($SourcePath, $_.FullName)
$destinationFilePath = Join-Path $DestinationPath $relativePath
$destinationFolderPath = Split-Path -Parent $destinationFilePath
New-Item -Path $destinationFolderPath -ItemType Directory -Force | Out-Null
Copy-Item -Path $_.FullName -Destination $destinationFilePath -Force
}
}

function Copy-MarkdownSourceFiles {
Write-Host "Copying markdown source files to generated site"

Remove-Item -Path $MarkdownOutputPath -Recurse -Force -ErrorAction SilentlyContinue
New-Item -Path $MarkdownOutputPath -ItemType Directory -Force | Out-Null

Get-ChildItem -Path $PagesPath -Filter "*.md" -File | ForEach-Object {
Copy-Item -Path $_.FullName -Destination (Join-Path $MarkdownOutputPath $_.Name) -Force
}

Copy-MarkdownFiles -SourcePath $ArticlesPath -DestinationPath (Join-Path $MarkdownOutputPath "articles")
Copy-MarkdownFiles -SourcePath $CmdletsPath -DestinationPath (Join-Path $MarkdownOutputPath "cmdlets")
}

New-Item -Path $CmdletsPath -ItemType Directory -Force | Out-Null
$cmdletIndexTemplateBytes = [System.IO.File]::ReadAllBytes($CmdletIndexPath)

Expand Down Expand Up @@ -238,6 +273,8 @@ try {
throw "DocFX build failed with exit code $LASTEXITCODE"
}

Copy-MarkdownSourceFiles

if (!$SkipPublish) {
if ([string]::IsNullOrWhiteSpace($PublishPath)) {
$publishCandidate = Join-Path (Split-Path -Parent $SourceRoot) "gh-pages"
Expand Down
2 changes: 2 additions & 0 deletions pages/articles/buildingdocumentation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,8 @@ At minimum, verify the following:
1. The Cmdlets link opens the cmdlets index and shows cmdlet pages in the table of contents.
1. Search opens without JavaScript errors.
1. The theme selector in the top navigation can switch between Light, Dark and Auto.
1. The favicon loads from `images/favicon-pnp.svg` on the home page, article pages, and cmdlet pages.
1. The Copy markdown button copies the Markdown source for the home page, an article page, and a cmdlet page.
1. The browser developer tools do not show 404 responses for `public/docfx.min.css`, `public/docfx.min.js`, `public/main.css` or `public/main.js`.

DocFX 2.77 and newer emit the vendor assets as minified files. With the modern template, the site should load its built-in assets from the `public` folder and the PnP branding overrides from `public/main.css` and `public/main.js`. If these files return 404 responses, the template stack is not being applied correctly and the site can appear broken or unstyled.
Expand Down
2 changes: 1 addition & 1 deletion pages/docfx.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
"repo": "https://github.com/pnp/powershell",
"branch": "dev"
},
"_appFaviconPath": "https://c.s-microsoft.com/favicon.ico?v2",
"_appFaviconPath": "images/favicon-pnp.svg",
"_description": "PnP PowerShell is an open source, community driven, PowerShell Module designed to work with Microsoft 365.",
"_appLogoPath": "images/logo.svg",
"_enableSearch": true,
Expand Down
25 changes: 25 additions & 0 deletions pages/images/favicon-pnp.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
171 changes: 171 additions & 0 deletions pages/templates/pnp-modern/public/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,173 @@ article h4 {
--bs-alert-link-color: var(--bs-primary-text-emphasis);
}

.content > .actionbar {
gap: .5rem;
}

.content > .actionbar > .pnp-page-actions {
align-items: center;
display: flex;
gap: .5rem;
margin-left: auto;
}

.pnp-copy-markdown-group {
filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .08));
position: relative;
}

.pnp-copy-markdown,
.pnp-copy-markdown-toggle {
align-items: center;
background: var(--bs-body-bg);
border-color: rgba(var(--pnp-header-bg-rgb), .28) !important;
color: var(--bs-body-color);
display: inline-flex;
font-weight: 600;
min-height: 2.25rem;
white-space: nowrap;
}

.pnp-copy-markdown {
border-bottom-left-radius: 999px;
border-top-left-radius: 999px;
gap: .45rem;
padding-inline: .75rem;
}

.pnp-copy-markdown-toggle {
border-bottom-right-radius: 999px;
border-left-color: rgba(var(--pnp-header-bg-rgb), .18) !important;
border-top-right-radius: 999px;
justify-content: center;
min-width: 2.35rem;
padding-inline: .55rem;
}

.pnp-copy-markdown:hover,
.pnp-copy-markdown:focus,
.pnp-copy-markdown:focus-visible,
.pnp-copy-markdown-toggle:hover,
.pnp-copy-markdown-toggle:focus,
.pnp-copy-markdown-toggle:focus-visible,
.pnp-copy-markdown-group.show .pnp-copy-markdown-toggle {
background: var(--pnp-header-bg);
border-color: var(--pnp-highlight) !important;
color: var(--pnp-header-fg);
text-decoration: none;
}

.pnp-copy-markdown[data-copy-state="copied"] {
background: #198754;
border-color: #198754 !important;
color: #fff;
}

.pnp-copy-markdown[data-copy-state="failed"] {
background: #B02A37;
border-color: #B02A37 !important;
color: #fff;
}

.pnp-copy-markdown .bi,
.pnp-copy-markdown-toggle .bi {
font-size: 1rem;
line-height: 1;
}

.pnp-copy-markdown-menu {
--bs-dropdown-min-width: 17rem;
border-color: rgba(var(--pnp-header-bg-rgb), .16);
border-radius: .75rem;
box-shadow: 0 14px 36px rgba(0, 0, 0, .16);
left: auto;
max-width: calc(100vw - 1.5rem);
padding: .45rem;
right: 0;
top: calc(100% + .45rem);
}

.pnp-copy-markdown-menu.show {
display: block;
}

.pnp-copy-markdown-menu-item {
align-items: center;
border-radius: .5rem;
display: flex;
gap: .7rem;
padding: .6rem .65rem;
white-space: normal;
}

.pnp-copy-markdown-menu-icon {
align-items: center;
border: 1px solid rgba(var(--pnp-header-bg-rgb), .18);
border-radius: .5rem;
color: var(--bs-link-color);
display: inline-flex;
flex: 0 0 2rem;
height: 2rem;
justify-content: center;
width: 2rem;
}

.pnp-copy-markdown-menu-text {
display: block;
min-width: 0;
}

.pnp-copy-markdown-menu-label {
align-items: center;
display: flex;
font-weight: 700;
gap: .35rem;
line-height: 1.2;
}

.pnp-copy-markdown-menu-description {
color: var(--bs-secondary-color);
display: block;
font-size: .875rem;
line-height: 1.25;
margin-top: .15rem;
}

.pnp-copy-markdown-menu-item:hover .pnp-copy-markdown-menu-icon,
.pnp-copy-markdown-menu-item:focus .pnp-copy-markdown-menu-icon {
background: rgba(var(--pnp-highlight-rgb), .16);
border-color: rgba(var(--pnp-highlight-rgb), .5);
}

[data-bs-theme="dark"] .pnp-copy-markdown,
[data-bs-theme="dark"] .pnp-copy-markdown-toggle {
background: #202A33;
border-color: rgba(var(--pnp-highlight-rgb), .35) !important;
color: #E8F5FF;
}

[data-bs-theme="dark"] .pnp-copy-markdown:hover,
[data-bs-theme="dark"] .pnp-copy-markdown:focus,
[data-bs-theme="dark"] .pnp-copy-markdown:focus-visible,
[data-bs-theme="dark"] .pnp-copy-markdown-toggle:hover,
[data-bs-theme="dark"] .pnp-copy-markdown-toggle:focus,
[data-bs-theme="dark"] .pnp-copy-markdown-toggle:focus-visible,
[data-bs-theme="dark"] .pnp-copy-markdown-group.show .pnp-copy-markdown-toggle {
background: var(--pnp-highlight);
color: #06131C;
}

[data-bs-theme="dark"] .pnp-copy-markdown-menu {
background: #151D24;
border-color: rgba(var(--pnp-highlight-rgb), .26);
}

[data-bs-theme="dark"] .pnp-copy-markdown-menu-icon {
border-color: rgba(var(--pnp-highlight-rgb), .28);
color: #B9E0FF;
}

pre {
position: relative;
}
Expand Down Expand Up @@ -250,6 +417,10 @@ pre > .code-action .bi {
content: "";
margin: 0;
}

.pnp-copy-markdown > span {
display: none;
}
}

body > footer {
Expand Down
Loading
Loading