PowerShell 7.x - قسمت سیزدهم - ساخت یک Static Site Generator ساده توسط PowerShell و GitHub Actions
نویسنده: سیروان عفیفی
تاریخ: ۱۴۰۲/۰۲/۲۴ ۰:۴۵
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
├── _layout │ ├── _footer.html │ ├── _header.html │ ├── _nav.html │ └── main.html ├── build ├── img ├── posts └── set-posts.ps1
<!--main.html-->
<!DOCTYPE html>
<html dir="rtl">
{{header}}
<body>
{{nav}}
<main>
{{content}}
</main>
{{footer}}
</body>
<!--_header.html-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/samim-font@v4.0.5/dist/font-face.css" rel="stylesheet"
type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
<style>
* {
}
</style>
</head>
<!--_nav.html-->
<header>
<nav>
<div>
<div>
<a href="#">بلاگ من</a>
</div>
<div>
<ul>
{{nav}}
</ul>
</div>
</div>
</nav>
</header>
<!--_footer.html-->
<footer>
<div>
<div>
<p>
تمامی حقوق محفوظ است
</p>
</div>
</div>
</footer> --- title: اولین پست من slug: hello date: 2023-04-26 author: سیروان عفیفی tags: [tag1, tag2, tag3] excerpt: این یک پست تستی است در مورد اینکه چطور میتوانیم از این قالب استفاده کنیم --- # اولین پست من ## اولین پست من ### اولین پست من #### اولین پست من ##### اولین پست من ###### اولین پست من لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی میباشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را میطلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت میتوان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. <img src="/img/graphql.jpg"/>
Function Get-Layouts {
$headerLayout = Get-Content -Path ./_layout/_header.html -Raw
$homeLayout = Get-Content -Path ./_layout/main.html -Raw
$footerLayout = Get-Content -Path ./_layout/_footer.html -Raw
Return @{
Header = $headerLayout
Home = $homeLayout
Footer = $footerLayout
}
}
Function Get-PostFrontMatter($postContent) {
$frontMatter = [regex]::Match($postContent, "(---(?:\r?\n(?!--|\s*$).*)*)\s*((?:\r?\n(?!---).*)*\r?\n---)")
Return $frontMatter
}
Function Set-Headings($postHtml) {
Return $postHtml -Replace '<h(\d) id="(.*)">', {
$level = $_.Groups[1].Value
$id = $_.Groups[2].Value
$class = Switch ($level) {
'1' { 'text-4xl font-bold mb-2' }
'2' { 'text-3xl font-bold mb-2' }
'3' { 'text-2xl font-bold mb-2' }
'4' { 'text-xl font-bold mb-2' }
'5' { 'text-lg font-bold mb-2' }
'6' { 'text-base font-bold mb-2' }
}
"<h$level class='$class' id='$id'>"
}
}
Function ConvertTo-Slug {
[CmdletBinding()]
param(
[Parameter(Mandatory = $true, ValueFromPipeline = $true)]
[string]$String
)
process {
$slug = $String -replace '[^\w\s-]', '' # remove non-word characters except hyphens
$slug = $slug -replace '\s+', '-' # replace whitespace with a single hyphen
$slug = $slug -replace '^-+|-+$', '' # remove leading/trailing hyphens
$slug = $slug.ToLower() # convert to lowercase
Write-Output $slug
}
}
Function Get-Posts {
$markdownPosts = Get-ChildItem -Path ./posts -Filter *.md
$posts = @()
Foreach ($post in $markdownPosts) {
$postContent = Get-Content -Path $post.FullName -Raw
$frontMatter = Get-PostFrontMatter $postContent
$frontMatterObject = $frontMatter | ConvertFrom-Yaml
$slug = $frontMatterObject.slug ?? (ConvertTo-Slug "$($frontMatterObject.date)-$($frontMatterObject.title)")
$body = $postContent.Replace($frontMatter.Value, "") | ConvertFrom-Markdown
$postHtml = $layouts.Home -replace '{{header}}', $layouts.Header `
-replace '{{title}}', $frontMatterObject.title `
-replace '{{nav}}', (Set-Navs) `
-replace '{{content}}', $body.Html `
-replace '{{footer}}', $layouts.Footer
$postHtml = Set-Headings $postHtml
$postHtml | Out-File -FilePath ./build/$slug.html
$posts += @{
title = $frontMatterObject.title
slug = $slug
excerpt = $frontMatterObject.excerpt
date = $frontMatterObject.date
author = $frontMatterObject.author
body = $body.Html
}
}
Return $posts
}
Function Set-Archive {
$posts = Get-Posts
$archive = @()
$archive = @"
<ul>
$($posts | ForEach-Object { "<li><a href='$($_.slug).html'>$($_.title)</a></li>" })
</ul>
"@
Return $archive -join "`r`n"
}
Function Copy-ToBuild {
$layouts = Get-Layouts
$latestPosts = Get-Posts | ForEach-Object { @"
<div>
<img src="https://via.placeholder.com/300x200" alt="$($_.title)">
<h2>$($_.title)</h2>
<p>$($_.excerpt)</p>
<a href="$($_.slug).html">ادامه مطلب</a>
</div>
"@
}
$homeLayout = $layouts.Home -replace '{{header}}', $layouts.Header `
-replace '{{nav}}', (Set-Navs) `
-replace '{{title}}', 'بلاگ من' `
-replace '{{content}}', ('<div>' + $latestPosts + '</div>') `
-replace '{{footer}}', $layouts.Footer
$homeLayout | Out-File -FilePath ./build/index.html
Copy-Item -Path ./img -Destination ./build -Recurse -Force
}
Function Set-Navs {
$navs = @(
@{
title = "صفحه اصلی"
url = "/sample"
},
@{
title = "درباره ما"
url = "/sample/about.html"
},
@{
title = "تماس با ما"
url = "/sample/contact.html"
}
)
$navLayout = Get-Content -Path ./_layout/_nav.html -Raw
$navLayout -replace '{{nav}}', ($navs | ForEach-Object { "<li><a href=""$($_.url)""text-gray-700 hover:text-gray-800 m-2"">$($_.title)</a></li>" })
}
Copy-ToBuild name: Deploy static content to Pages
on:
push:
branches:
- main
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
concurrency:
group: "pages"
cancel-in-progress: false
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout Repository
uses: actions/checkout@v2
- name: Install powershell-yaml module
shell: pwsh
run: |
Set-PSRepository PSGallery -InstallationPolicy Trusted
Install-Module powershell-yaml -ErrorAction Stop
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Build Static Site
shell: pwsh
run: |
. ./set-posts.ps1
- name: Upload Static Site Artifact
uses: actions/upload-pages-artifact@v1
with:
path: build
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2 --- title: اولین پست من slug: hello date: 2023-04-26 author: سیروان عفیفی tags: [tag1, tag2, tag3] excerpt: این یک پست تستی است در مورد اینکه چطور میتوانیم از این قالب استفاده کنیم --- content
کدهای این مطلب را میتوانید از اینجا دریافت کنید.
dotnet tool update -g docfx
docfx docs/docfx.json --serve
- run: dotnet tool update -g docfx
- run: docfx docs/docfx.json
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: docs/_site