Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/SpectralDragon/TagColorCSSGeneratorPlugin
A Publish plugin that generates a custom tags styles for each tag name.
https://github.com/SpectralDragon/TagColorCSSGeneratorPlugin
css dark-theme publish publish-plugin swift tags
Last synced: 3 months ago
JSON representation
A Publish plugin that generates a custom tags styles for each tag name.
- Host: GitHub
- URL: https://github.com/SpectralDragon/TagColorCSSGeneratorPlugin
- Owner: SpectralDragon
- Created: 2020-04-13T01:21:03.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-05-10T00:05:42.000Z (almost 2 years ago)
- Last Synced: 2024-08-07T11:11:09.558Z (6 months ago)
- Topics: css, dark-theme, publish, publish-plugin, swift, tags
- Language: Swift
- Size: 6.84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-publish - Tag Color CSS
README
# TagColorCSSGeneratorPlugin
A [Publish](https://github.com/johnsundell/publish) plugin that generates a custom tags styles for each tag name.
## Install
To install it into your [Publish](https://github.com/johnsundell/publish) package, add it as a dependency within your `Package.swift` manifest:
```swift
let package = Package(
...
dependencies: [
...
.package(url: "https://github.com/SpectralDragon/TagColorCSSGeneratorPlugin.git", from: "0.1.0")
],
targets: [
.target(
...
dependencies: [
...
"TagColorCSSGeneratorPlugin"
]
)
]
...
)
```
## Usage
The plugin can be installed below `.addMarkdownFiles()` method.
```swift
// available tags: swiftui
Site().publish(using: [
.addMarkdownFiles(),
.installPlugin(
.tagColorCSSGenerator(tagsCSSPrefix: "tag-", builder: { tag -> Color in
return Color(hex: "#ff0000")
})
)
])
```
When you run your project, plugin will generate `tags.css` by default. This file will contains next css:
```css
.tag-swiftui {
background-color: #FF00004F; // red with alpha component 0.4
color: #FF0000FF; // red with alpha component 1
}
.tag-swiftui:hover {
background-color: #FF00007F; // red with alpha component 0.7
}
```
### Dark mode
If you need dark color mode, just call method `adaptiveToDarkTheme(Color)` in your Color object. In generated file will contains next code:
```css
.tag-swiftui {
background-color: #FF00004F; // red with alpha component 0.4
color: #FF0000FF; // red with alpha component 1
}
.tag-swiftui:hover {
background-color: #FF00007F; // red with alpha component 0.7
}
@media(prefers-color-scheme: dark) {
.tag-swiftui {
background-color: #FF00004F; // red with alpha component 0.4
color: #FF0000FF; // red with alpha component 1
}
.tag-swiftui:hover {
background-color: #FF00007F; // red with alpha component 0.7
}
}
```
## Check tags availability
Sometimes, user can mistake in tag name and `TagColorCSSGeneratorPlugin` can generate a wrong color, to avoid this problem, we add `CheckTagsAvailabilityPlugin`. The plugin check all exists tags and compare it with our own available tag list.
```swift
// available tags: ui, lifestyle
enum AvailableTag: String, CaseIterable {
case ui, lifestyle
}
Site().publish(using: [
.addMarkdownFiles(),
.checkTagsIsExists(AvailableTag.self) // will crash if tag doesn't exists in AvailableTag enum
})
```
Thank you and enjoy 💯