A Publish theme. ckitakishi.com is built with PaletteTheme.
- Simple and fast
- Mobile friendly
- Support both Light/Dark mode
- Customisable & Extendable
- Archive articles by year
- Social items
- Support comments system
- Support Google Analytics
- ...
| Desktop | Mobile |
|---|---|
Swift version 6.0 (or later)
PaletteTheme is distributed using the Swift Package Manager. To use it into a project, just add the following code to your Package.swift file:
let package = Package(
...
platforms: [.macOS(.v13)],
dependencies: [
.package(
url: "https://github.com/johnsundell/publish.git",
from: "0.9.0"
),
.package(
url: "https://github.com/Ckitakishi/PaletteTheme.git",
from: "0.3.0"
),
],
targets: [
.executableTarget(
name: "YourBlog",
dependencies: [
.product(name: "Publish", package: "publish"),
.product(name: "PaletteTheme", package: "paletteTheme"),
]
)
]
...
)Import PaletteTheme wherever you’d like to use it:
import PaletteThemeUse theme .palette to generate HTML:
try YourBlog().publish(using: [
...
.generateHTML(withTheme: .palette),
...
])Add the sections that you want your website to contain in SectionID enum. And you can customize the section by initializing PalettePage like below:
// Define all sections here.
enum SectionID: String, WebsiteSectionID {
case home
case posts
...
var pageConfig: PalettePage {
switch self {
case .home:
return .init(
id: self.rawValue, // Should be unique
title: "Home", // Section title shown on navigation bar
link: "/", // The path of section
isIndex: true // Represents whether an item is for home page, default is `false`
)
case .posts:
return .init(
id: self.rawValue,
title: "Writing",
link: "/posts"
)
...
}
}
}
// Make your blog comform `PaletteCustomizable` protocol.
extension YourBlog: PaletteCustomizable {
var pages: [PalettePage] {
SectionID.allCases.map { $0.pageConfig }
}
}aboutMe supports Markdown syntax as well.
var aboutMe: String {
"""
XXX is an iOS developer who has made [project 1](project1.link).
"""
}Set the path to the profile icon if needed, this property is optional.
var profileIconPath: URLRepresentable? { "/profile.jpg" }You can get social icon support by simply comform the PaletteCustomizable protocol and defining social items as following:
extension CkitakishiPlayground: PaletteCustomizable {
var socialItems: [SocialItem] {
[
.init(url: "link", type: .github),
.init(url: "link", type: .twitter),
.init(url: "mailto", type: .email),
]
}
}PaletteTheme enables you to import a comments system for your blog, currently only giscus is supported, the comments system could be configured by using below code. Of course, you could also add support for other comments systems to PaletteTheme.
var commentSystem: CommentSystem? {
.giscus(
script: """
<script src="https://giscus.app/client.js"
...
</script>
"""
)
}PaletteTheme supports Google Analytics by default.
var googleTrackingID: String? {
return "YOUR_TRACKING_ID"
}The copyright is shown in the footer. Check the defination of Copyright for more information.
var copyright: Copyright {
Copyright(owner: "Author", startYear: "2022")
}To use the post navigation at the bottom of each post, it is necessary to install the OrderedPosts plugin after adding markdown files.
try YourBlog().publish(using: [
...
.addMarkdownFiles(),
.installPlugin(.orderedPosts()),
...
])In the latest macOS versions, copyItem(at:to:) cannot copy folders correctly without a trailing slash. Becuase currently the Publish library is not actively maintained, this workaround can be used to ensure that subfolders in Resources folder are copied correctly.
try YourBlog().publish(using: [
...
.installPlugin(.copyResourcesWorkaround()),
...
])PaletteTheme is licensed under the MIT license. Check the LICENSE file for details.
Special thanks to the following project:
- tailwindcss - most of the styles are generated by tailwindcss.
- Monokai color scheme - code syntax highlight.
- Base16 color scheme - main colors.
- giscus - comments system powered by github discussion.