add the template, add yml

BlazorStatic · Jan 5, 2025 · 7cbf00a · 7cbf00a
1 parent c9adb29
commit 7cbf00a
Show file tree

Hide file tree

Showing 21 changed files with 654 additions and 0 deletions.
diff --git a/.github/workflows/build-github-template.yml b/.github/workflows/build-github-template.yml
@@ -0,0 +1,32 @@
+name: Build and Publish github template
+
+on:
+  push:
+    branches: 
+      - master
+
+  schedule:
+    - cron: "0 0 * * *" # Runs every day at midnight UTC
+
+jobs: 
+  build-and-publish:
+    runs-on: ubuntu-latest
+
+    steps:
+        - uses: actions/checkout@v4
+
+        - name: Install BlazorStatic.Templates and create the blog
+          run: |
+                dotnet new install BlazorStatic.Templates
+                dotnet new BlazorStaticMinimalBlog -o BlazorStaticMinimalBlog
+  
+        - name: Push to master branch of BlazorStatic/BlazorStaticMinimalBlog
+          run: |
+            git init --initial-branch=master
+            git config user.name "GitHub Action"
+            git config user.email "[email protected]"
+            git remote add origin https://x-access-token:${{ secrets.BLAZORSTATICMINIMALBLOG_REPO_TOKEN }}@github.com/BlazorStatic/BlazorStaticMinimalBlog.git
+            git add .
+            git commit -m "publish of the template"
+            git push -f origin master
+          working-directory: BlazorStaticMinimalBlog
diff --git a/templates/BlazorStaticMinimalBlogTemplate/BlazorStaticMinimalBlog.csproj b/templates/BlazorStaticMinimalBlogTemplate/BlazorStaticMinimalBlog.csproj
@@ -0,0 +1,26 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="BlazorStatic" Version="1.0.0-beta.13"/>
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Update="Content/**/*">
+      <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
+    </None>
+  </ItemGroup>
+
+
+  <!-- to make hot reload work on .md files -->
+  <ItemGroup>
+    <Watch Include="Content/**/*"/>
+  </ItemGroup>
+
+
+</Project>
diff --git a/templates/BlazorStaticMinimalBlogTemplate/BlazorStaticMinimalBlog.sln b/templates/BlazorStaticMinimalBlogTemplate/BlazorStaticMinimalBlog.sln
@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.8.34309.116
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorStaticMinimalBlog", "BlazorStaticMinimalBlog.csproj", "{97F44AF6-5AF6-4FD8-AE15-96648E0CA921}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{97F44AF6-5AF6-4FD8-AE15-96648E0CA921}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{97F44AF6-5AF6-4FD8-AE15-96648E0CA921}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{97F44AF6-5AF6-4FD8-AE15-96648E0CA921}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{97F44AF6-5AF6-4FD8-AE15-96648E0CA921}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {11C0E4EA-03B1-4426-AA27-ADFAF57D3327}
+	EndGlobalSection
+EndGlobal
diff --git a/templates/BlazorStaticMinimalBlogTemplate/Components/App.razor b/templates/BlazorStaticMinimalBlogTemplate/Components/App.razor
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <base href="/"/>
+    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+
+                    colors: {
+                        primary: tailwind.colors.violet
+                    },
+                },},
+                }
+    </script>
+
+
+    <HeadOutlet/>
+</head>
+
+<body class="bg-gray-950 font-sans text-gray-200">
+<Routes/>
+</body>
+
+</html>
diff --git a/templates/BlazorStaticMinimalBlogTemplate/Components/Layout/MainLayout.razor b/templates/BlazorStaticMinimalBlogTemplate/Components/Layout/MainLayout.razor
@@ -0,0 +1,32 @@
+@inherits LayoutComponentBase
+
+<div class="mx-auto max-w-3xl px-4 sm:px-6 xl:max-w-5xl xl:px-0 ">
+    <div class="flex h-screen flex-col justify-between">
+
+        <NavMenu/>
+
+        <main class="mb-auto">
+            @Body
+        </main>
+
+        <footer>
+            <div class="mt-16 flex flex-col items-center">
+                <div class="mb-3 flex space-x-4">
+                    <a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="@WebsiteKeys.GitHubRepo">
+                        <span class="sr-only">github</span>
+                        <Svg Icon="Svg.Icons.Github"/>
+                    </a>
+                    <a class="text-sm text-gray-500 transition hover:text-gray-600" target="_blank" rel="noopener noreferrer" href="@WebsiteKeys.X">
+                        <span class="sr-only">x</span>
+                        <Svg Icon="Svg.Icons.X"/>
+                    </a>
+                </div>
+                <div class="mb-2 flex space-x-2 text-sm text-gray-400">
+                    <a target="_blank" rel="noopener noreferrer" href="https://github.com/BlazorStatic/BlazorStatic"> Built with Blazor Static</a>
+                    <div>•</div>
+                    <div>© @DateTime.Now.Year</div>
+                </div>
+            </div>
+        </footer>
+    </div>
+</div>
diff --git a/templates/BlazorStaticMinimalBlogTemplate/Components/Layout/NavMenu.razor b/templates/BlazorStaticMinimalBlogTemplate/Components/Layout/NavMenu.razor
@@ -0,0 +1,70 @@
+@inject NavigationManager Nm
+
+<header class="flex items-center justify-between py-10">
+    <div>
+        <a href="">
+            <div class="flex items-center justify-between">
+                <div class=" h-6 text-2xl font-semibold sm:block text-primary-800">@WebsiteKeys.Title</div>
+            </div>
+        </a>
+    </div>
+    <div class="flex items-center space-x-4 leading-5 sm:space-x-6">
+        @foreach(var item in menuItems)
+        {
+            <NavLink ActiveClass="bg-primary-950 px-2 py-1 rounded-xl" class="hidden font-medium text-gray-100 sm:block"
+                     Match="@(item.Link == "" ? NavLinkMatch.All : NavLinkMatch.Prefix)" href="@item.Link">
+                @((MarkupString)item.Name)
+                <Svg Icon="item.Icon"/>
+            </NavLink>
+
+            @* <a class="hidden font-medium text-gray-100 sm:block   @(Nm.Uri.EndsWith(item.link)?"":"") " href="@item.link">@item.name</a> *@
+        }
+        <button id="toggle-button" aria-label="Toggle Menu" class="sm:hidden">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-8 w-8 text-gray-100">
+                <path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path>
+            </svg>
+        </button>
+        <div id="mobile-menu" class="fixed left-0 top-0 z-10 h-full w-full translate-x-full transform   duration-300 ease-in-out bg-gray-950 opacity-[0.98]">
+            <div class="flex justify-end">
+                <button id="close-mobile-menu-button" class="mr-8 mt-11 h-8 w-8" aria-label="Toggle Menu">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="text-gray-100">
+                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                    </svg>
+                </button>
+            </div>
+            <nav class="fixed mt-8 h-full">
+                @foreach(var item in menuItems)
+                {
+                    <div class="px-12 py-4">
+                        <NavLink ActiveClass="underline" class="text-2xl font-bold tracking-widest text-gray-100"
+                                 Match="@(item.Link == "" ? NavLinkMatch.All : NavLinkMatch.Prefix)" href="@item.Link">
+                            @((MarkupString)item.Name)
+                            <Svg Icon="item.Icon"/>
+                        </NavLink>
+                    </div>
+                }
+            </nav>
+        </div>
+    </div>
+</header>
+<script>
+//👎 but what can I do? It's a static html. I can't use C# here.
+ const toggleMobileMenu = () => document.querySelector('#mobile-menu').classList.toggle('translate-x-full');
+ 
+ document.querySelector('#toggle-button').addEventListener('click', toggleMobileMenu);
+ document.querySelector('#close-mobile-menu-button').addEventListener('click', toggleMobileMenu);
+</script>
+
+
+@code
+{
+    List<MenuItem> menuItems =
+    [
+        new("Home", ""),
+        new("Tags", "tags"),
+        new("", WebsiteKeys.GitHubRepo, Svg.Icons.Github)
+    ];
+
+
+    record MenuItem(string Name, string Link, Svg.Icons? Icon = null);
+}
diff --git a/templates/BlazorStaticMinimalBlogTemplate/Components/Pages/Blog.razor b/templates/BlazorStaticMinimalBlogTemplate/Components/Pages/Blog.razor
@@ -0,0 +1,122 @@
+@page "/"
+@page "/blog/{fileName}"
+@using System.Globalization
+@using BlazorStatic
+@using BlazorStatic.Services
+@inject BlazorStaticContentService<BlogFrontMatter> blazorStaticContentService
+
+
+@* No filename -> show latest posts *@
+@if (string.IsNullOrWhiteSpace(FileName))
+{
+    <div class="divide-y divide-gray-700">
+        <div class="space-y-2 pb-8 pt-6 md:space-y-5">
+            <h1 class="font-sans md:leading-14 text-3xl font-extrabold leading-9 tracking-tight text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl">Latest</h1>
+            <p class="text-lg leading-7 text-gray-400 prose prose-invert">@WebsiteKeys.BlogLead</p>
+        </div>
+
+        <PostsList/>
+    </div>
+    return;
+}
+
+@* Show specific post by filename param *@
+@if (post == null)
+{
+    <div>Post not found 🤷 </div>
+    return;
+}
+<article>
+    <div class="xl:divide-y  xl:divide-gray-700">
+        <header class="pt-6 xl:pb-6">
+            <div class="space-y-1 text-center">
+                <dl class="space-y-10">
+                    <div>
+                        <dt class="sr-only">Published on</dt>
+                        <dd class="text-base font-medium leading-6 text-gray-400">
+                            <time datetime="@post.FrontMatter.Published.ToString("yyyy-MM-ddTHH:mm:ss.fffK", CultureInfo.InvariantCulture)">
+                                @post.FrontMatter.Published.ToString("MMMM d, yyyy", new CultureInfo("en-US"))
+                            </time>
+                        </dd>
+                    </div>
+                </dl>
+                <div class="prose prose-invert mx-auto">
+                    <h1 class="">@post.FrontMatter.Title</h1>
+                </div>
+            </div>
+        </header>
+        <div class="grid-rows-[auto_1fr] divide-y  pb-8 divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0">
+
+            <dl class="pb-10 pt-6 xl:border-b  xl:pt-11 xl:border-gray-700">
+                <dt class="sr-only">Authors</dt>
+                <dd>
+                    <ul class="flex flex-wrap justify-center gap-4 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8">
+                        @foreach(var author in post.FrontMatter.Authors)
+                        {
+                            <li class="flex items-center space-x-2">
+                                @* <img alt="avatar" loading="lazy" width="38" height="38" decoding="async" data-nimg="1" class="h-10 w-10 rounded-full" srcset="/_next/image?url=%2Fstatic%2Fimages%2Favatar.png&amp;w=48&amp;q=75 1x, /_next/image?url=%2Fstatic%2Fimages%2Favatar.png&amp;w=96&amp;q=75 2x" src="/_next/image?url=%2Fstatic%2Fimages%2Favatar.png&amp;w=96&amp;q=75" style="color: transparent;"/> *@
+                                <dl class="whitespace-nowrap text-sm font-medium leading-5">
+                                    @if (!string.IsNullOrWhiteSpace(author.Name))
+                                    {
+                                        <dt class="sr-only">Name</dt>
+                                        <dd class="text-gray-900 dark:text-gray-100 flex gap-1 items-center">
+                                            @author.Name
+                                            @if (!string.IsNullOrWhiteSpace(author.XUserName))
+                                            {
+                                                <a target="_blank" rel="noopener noreferrer" href="https://x.com/@author.XUserName" class="flex gap-1 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
+                                                    <Svg SizeClasses="w-4 h-4" Icon="Svg.Icons.X"/>
+                                                </a>
+                                            }
+                                            @if (!string.IsNullOrWhiteSpace(author.GitHubUserName))
+                                            {
+                                                <a target="_blank" rel="noopener noreferrer" href="https://github.com/@author.GitHubUserName" class="flex gap-1 items-center text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
+                                                    <Svg SizeClasses="w-4 h-4" Icon="Svg.Icons.Github"/>
+                                                </a>
+                                            }
+                                        </dd>
+                                    }
+                                </dl>
+                            </li>
+                        }
+                    </ul>
+                </dd>
+            </dl>
+            <div class="divide-y  divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
+                <div class="prose prose-invert max-w-none pb-8 pt-10">
+                    @((MarkupString)post.HtmlContent)
+                </div>
+                <div class="pb-6 pt-6 text-sm text-gray-300">
+                    <a target="_blank" rel="noopener noreferrer" href="@($"{WebsiteKeys.BlogPostStorageAddress}/{FileName}")">View on GitHub</a>
+                </div>
+            </div>
+            <footer>
+                <div class=" text-sm font-medium leading-5 divide-gray-700 xl:col-start-1 xl:row-start-2 xl:divide-y">
+                    <div class="py-4 xl:py-8">
+                        <h2 class="text-xs uppercase tracking-wide text-gray-400">Tags</h2>
+                        <div class="flex flex-wrap">
+                            @foreach(var tag in post.FrontMatter.Tags)
+                            {
+                                <a class="text-primary-500 hover:text-primary-400 mr-3 text-sm font-medium uppercase" href="@blazorStaticContentService.Options.TagsPageUrl/@tag">@tag</a>
+                            }
+                        </div>
+                    </div>
+                </div>
+                <div class="pt-4 xl:pt-8">
+                    <a class="text-primary-500 hover:text-primary-400" aria-label="Back to the home" href="">← Back to the home</a>
+                </div>
+            </footer>
+        </div>
+    </div>
+</article>
+
+
+@code{
+    [Parameter] public string? FileName { get; set; }
+    Post<BlogFrontMatter>? post;
+
+    protected override void OnInitialized()
+    {
+        if (string.IsNullOrWhiteSpace(FileName)) return;
+        post = blazorStaticContentService.Posts.FirstOrDefault(x => x.Url == FileName);
+    }
+}
diff --git a/templates/BlazorStaticMinimalBlogTemplate/Components/Pages/Tags.razor b/templates/BlazorStaticMinimalBlogTemplate/Components/Pages/Tags.razor
@@ -0,0 +1,51 @@
+@page "/tags/{tagName}"
+@page "/tags"
+@using BlazorStatic
+@using BlazorStatic.Services
+@using System.Net
+@inject BlazorStaticContentService<BlogFrontMatter> blazorStaticContentService
+
+@if (TagName == null)
+{
+    <div class="flex flex-wrap justify-evenly gap-1">
+        @{
+            var tagsWithCount = blazorStaticContentService.Posts
+                .SelectMany(x => x.FrontMatter.Tags)
+                .GroupBy(x => x)
+                .Select(group => new { Tag = group.Key, Count = group.Count() })
+                .OrderByDescending(x => x.Count);
+
+            foreach(var tag in tagsWithCount)
+            {
+                <a class="text-primary-500 hover:text-primary-400 mr-3 text-sm font-medium uppercase" href="@blazorStaticContentService.Options.TagsPageUrl/@WebUtility.HtmlEncode(tag.Tag)">@tag.Tag (@tag.Count)</a>
+            }
+        }
+    </div>
+    return;
+}
+
+
+<div class="divide-y divide-gray-700">
+    <div class="space-y-2 pb-8 pt-6 md:space-y-5">
+        <h1 class="font-sans md:leading-14 text-3xl font-extrabold leading-9 tracking-tight text-gray-100 sm:text-4xl sm:leading-10 md:text-6xl">@TagName</h1>
+        <p class="text-lg leading-7 text-gray-400">
+            Blog posts tagged by
+            <span class="text-primary-300">@TagName</span>
+        </p>
+    </div>
+    <PostsList Posts="posts"/>
+</div>
+
+@code {
+
+    [Parameter] public string? TagName { get; set; }
+
+    List<Post<BlogFrontMatter>>? posts;
+
+    protected override void OnInitialized()
+    {
+        if (string.IsNullOrWhiteSpace(TagName)) return;
+        posts = blazorStaticContentService.Posts.Where(x => x.FrontMatter.Tags.Contains(TagName)).ToList();
+    }
+
+}