Minimal Blog Theme

A minimal blog theme using Tailwind CSS for ScissorHands.NET, inspired by astro-minimal-blog.

Theme Structure

This is the overall structure of the theme.

.
└── src/
    ├── assets/
    │   ├── css/
    │   │   └── theme.css
    │   ├── images/
    │   │   ├── logo.png
    │   │   ├── moon-icon.svg
    │   │   └── sun-icon.svg
    │   └── js/
    │       └── theme.js
    │
    ├── favicon.ico
    │
    ├── theme.json
    │
    ├── Components/
    │   ├── Header.razor
    │   ├── Footer.razor
    │   ├── PostCard.razor
    │   └── TagList.razor
    ├── _Imports.razor
    ├── MainLayout.razor
    ├── IndexView.razor
    ├── PostView.razor
    └── PageView.razor

Getting Started

Theme Manifest – theme.json

• theme.json defines the metadata of the theme.

  {
    "name": "Minimal Blog",
    "version": "1.0.0",
    "description": "A minimal blog theme using Tailwind CSS for ScissorHands.NET, inspired by [astro-minimal-blog](https://github.com/alexanderhodes/astro-minimal-blog).",
    "slug": "minimal-blog",
    "stylesheets": [
      "/assets/css/theme.css"
    ],
    "scripts": [
      "/assets/js/theme.js"
    ]
  }

  You can have one or more CSS and JavaScript files. If you choose to do so, make sure to include them all in this theme.json.

Integrated Plugins

• Google Analytics
• Open Graph

Layout Components

_Imports.razor Global Component

• It defines the global namespace and using directives.

  @using ScissorHands.Core.Manifests
  @using ScissorHands.Core.Models
  @using ScissorHands.Plugin.GoogleAnalytics
  @using ScissorHands.Plugin.OpenGraph
  @using ScissorHands.Theme.MinimalBlog.Components.Footer
  @using ScissorHands.Theme.MinimalBlog.Components.Header
  @using ScissorHands.Theme.MinimalBlog.Components.PostCard
  @using ScissorHands.Theme.MinimalBlog.Components.TagList
  
  @using Theme = ScissorHands.Core.Manifests.ThemeManifest
  
  @namespace ScissorHands.Theme.MinimalBlog

MainLayout.razor Layout Component

• This is the overall HTML layout structure.

• It calls both UI components and plugin components.

• To change the way of displaying the @PageTitle value, override the CalculatePageTitle() method:

  @code {
      protected override string CalculatePageTitle()
      {
          // ADD LOGIC HERE
      }
  }

• To change the way of displaying the @PageDescription value, override the CalculatePageDescription() method:

  @code {
      protected override string CalculatePageDescription()
      {
          // ADD LOGIC HERE
      }
  }

IndexView.razor Page Component

• This is the landing page of your static website.

PostView.razor Page Component

• This is the blog post page.

PageView.razor Page Component

• This is the non-blog post page.

UI Components

• The list of UI components used in this theme are:
  • Header
  • Footer
  • PostCard
  • TagList

Previewing Theme

1. Set environment variables for GitHub NuGet Package Registry.

   # zsh/bash
   source ./scripts/setup-gh-auth.sh --username "<GITHUB_USERNAME>" --token "<GITHUB_TOKEN>"

   # PowerShell
   . ./scripts/setup-gh-auth.ps1 -Username "<GITHUB_USERNAME>" -Token "<GITHUB_TOKEN>"

   NOTE: Make sure to sourcing the script instead of executing it.

2. Add a NuGet package for the theme.

   dotnet add package ScissorHands.Theme --prerelease

3. Create a symbolic link under the themes directory.

   # zsh/bash
   REPOSITORY_ROOT=$(git rev-parse --show-toplevel)
   ln -s $REPOSITORY_ROOT/src $REPOSITORY_ROOT/preview/ScissorHands/themes/minimal-blog

   # PowerShell
   $REPOSITORY_ROOT = git rev-parse --show-toplevel
   New-Item -ItemType SymbolicLink -Path "$REPOSITORY_ROOT/preview/ScissorHands/themes/minimal-blog" -Target "$REPOSITORY_ROOT/src"

4. Run the app.

   dotnet run --project ./preview/ScissorHands -- --preview

5. Verify the generated HTML properly renders your theme.