Merge pull request #112 from 2bitdesigns/4bitcss-docker

4bitcss 0.1.5

Author: StartAutomating

.github/workflows/Build4bitcss.yml

@@ -35,7 +35,7 @@ jobs:
           Install-Module -Name Pester -Repository PSGallery -Force -Scope CurrentUser -MaximumVersion $PesterMaxVersion -SkipPublisherCheck -AllowClobber
           Import-Module Pester -Force -PassThru -MaximumVersion $PesterMaxVersion} @Parameters
       - name: Check out repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: RunPester
         id: RunPester
         shell: pwsh
@@ -92,9 +92,6 @@ jobs:
           $result = 
               Invoke-Pester -PassThru -Verbose -OutputFile ".\$moduleName.TestResults.xml" -OutputFormat NUnitXml @codeCoverageParameters
           
-          "::set-output name=TotalCount::$($result.TotalCount)",
-          "::set-output name=PassedCount::$($result.PassedCount)",
-          "::set-output name=FailedCount::$($result.FailedCount)" | Out-Host
           if ($result.FailedCount -gt 0) {
               "::debug:: $($result.FailedCount) tests failed"
               foreach ($r in $result.TestResult) {
@@ -106,7 +103,7 @@ jobs:
           }
           } @Parameters
       - name: PublishTestResults
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         with: 
           name: PesterResults
           path: '**.TestResults.xml'
@@ -493,7 +490,7 @@ jobs:
     if: ${{ success() }}
     steps: 
       - name: Check out repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
       - name: Use PSSVG Action
         uses: StartAutomating/PSSVG@main
         id: PSSVG

4bit.js

@@ -1,7 +1,7 @@
 @{
-    ModuleVersion = '0.1.4'
+    ModuleVersion = '0.1.5'
     RootModule = '4bitcss.psm1'
-    Description = 'CSS3 Color Schemes'
+    Description = 'CSS3 Color Schemes for 4-bit color palettes'
     Guid = '93e1d6ab-ce88-4751-bb14-b21fbb9f66f3'
     CompanyName = 'Start-Automating'
     Author = 'James Brundage'
@@ -14,36 +14,26 @@
 > Like It? [Star It](https://github.com/2bitdesigns/4bitcss)
 > Love It? [Support It](https://github.com/sponsors/StartAutomating)
 
-## 0.1.4:
+## 0.1.5:
 
-* So many more new palettes!
-* `-background` classes (#42)
-* `$psStyle` compatibility (#43, #52, #53, #54, #55, #56, #57, #58)
-* Producing additional files:
-  * A .txt file per palette (#61)
-  * Palettes.json (#60)
-  * Palette-List.json, Dark-Palette-List.json, Bright-Palette-List.json
-* `<select>` support (#39)
-* Fixing strokes (#59)
-* Adding Docker Image (#49, #50, #51)
-* Module Improvements
-  * Mounting 4bitcss (#48)
-  * Exporting `$4bitcss` (#47)
-  * Repository Cleanup (#44, #45, #46)
-* New Commands   
-  * Convert-4bitName (#33)
-  * Export-4bitJS (#32)
-  * Export-4bitSVG (#34)
-* Allowing color palettes without `selectioncolor` or `cursorcolor` (#31)
-* Putting Palettes into directories (#30)
+* 336 color palettes (and counting)!
+* Improved functionality
+  * Support for `<button>` (#96)
+  * `carat-color` support (#97) 
+  * HighlightJS support (#104, #105, #107) 
+* Added json data files and credits (#79, #80) 
+* Adding `--Luma` and `--Contrast` to CSS (#94, #95)
+* 4bitcss Docker Container (#74, #75, #76, #77)
+* Animated Palette Example (#109, #111)
+* Improved documentation and examples
 
 ---
 
 Additional History in [Changelog](https://github.com/2bitdesigns/4bitcss/blob/main/CHANGELOG.md)
 '@
-            WebSite = @{  
+            Website = @{  
                 Url  = 'https://4bitcss.com/'
-                Tech = 'Jekyll'
+                Platform = 'Jekyll'
                 Root = '/docs'
             }
         }

4bitcss.psd1

@@ -93,6 +93,45 @@ svg -ViewBox 640, 240 @(
     }
 ) -OutputPath (Join-Path $docsRoot .\4bitpreviewtemplate.svg) -Class background-fill
 
+svg -ViewBox 1920, 1080 @(
+    svg.rect -Width 300% -Height 300% -X -100% -Y -100% -Class 'background-fill'
+
+    $initialRadius = (1080/2) - 42
+    $wobble = .23
+    $flipFlop = 1
+    $duration = "04.2s"
+    filter wobbler {
+        $initialRadius * (($wobble * $flipFlop) + 1)
+    }
+    SVG.ellipse -Id 'foregroundCircle' -Cx 50% -Cy 50% -RX $initialRadius -Ry $initialRadius -Class 'foreground-fill' -Children @(        
+        SVG.animate -Values "$initialRadius;$(wobbler);$initialRadius" -AttributeName 'rx' -Dur $duration -RepeatCount indefinite
+        $flipFlop *= -1
+        SVG.animate -Values "$initialRadius;$(wobbler);$initialRadius" -AttributeName 'ry' -Dur $duration -RepeatCount indefinite        
+
+        SVG.animate -Values "1;.42;1" -AttributeName 'opacity' -Dur $duration -RepeatCount indefinite
+    )
+    
+    foreach ($n in 0..7) {
+        $initialRadius -= 23
+        SVG.ellipse -Id "ANSI${N}-Ellipse" -cx 50% -cy 50% -rx $initialRadius -ry $initialRadius -Class "ansi$n-fill" -Fill $($colors[$n]) -Children @(
+            SVG.animate -Values "$initialRadius;$(wobbler);$initialRadius" -AttributeName 'rx' -Dur $duration -RepeatCount indefinite
+            $flipFlop *= -1
+            SVG.animate -Values "$initialRadius;$(wobbler);$initialRadius" -AttributeName 'ry' -Dur $duration -RepeatCount indefinite
+
+            SVG.animate -Values "1;.42;1" -AttributeName 'opacity' -Dur $duration -RepeatCount indefinite
+        )
+        $initialRadius -= 16
+        SVG.ellipse -Id "ANSI$($N + 8)-Ellipse" -Cx 50% -Cy 50% -RX $initialRadius -Ry $initialRadius -Class "ansi$($n + 8)-fill" -Fill $($colors[$n]) -Children @(
+            SVG.animate -Values "$initialRadius;$(wobbler);$initialRadius" -AttributeName 'rx' -Dur $duration -RepeatCount indefinite
+            
+            $flipFlop *= -1
+            SVG.animate -Values "$initialRadius;$(wobbler);$initialRadius" -AttributeName 'ry' -Dur $duration -RepeatCount indefinite
+
+            SVG.animate -Values "1;.42;1" -AttributeName 'opacity' -Dur $duration -RepeatCount indefinite
+        )        
+    }    
+) -OutputPath (Join-Path $includesRoot .\Animated-Palette.svg) -Class background-fill
+
 Copy-Item -Path (Join-Path $docsRoot .\4bitpreviewtemplate.svg) -Destination (Join-Path $assetsRoot ..\4bitpreviewtemplate.svg) -Force -PassThru
 Copy-Item -Path (Join-Path $docsRoot .\4bitpreviewtemplate.svg) -Destination (Join-Path $includesRoot .\4bitpreviewtemplate.svg) -Force -PassThru
 

Build/4bitcss.PSSVG.ps1

@@ -1,20 +1,44 @@
 Push-Location ($PSScriptRoot | Split-Path)
-# If running in a github workflow or not on C: drive, clone the repo.
-if ($env:GITHUB_WORKSPACE -or ($home -notmatch '^C:')) {
-    # clone the iTermColorSchemes repo
-    git clone https://github.com/mbadolato/iTerm2-Color-Schemes.git | Out-Host
-
-    # and get all of the JSON files from it
-    $jsonFiles = Get-ChildItem -Path iTerm2-Color-Schemes -Recurse -Filter *.json  |
-        Where-Object Fullname -like '*terminal*' |
-        Where-Object FullName -notlike '*templates*'
-} else {
-    # Otherwise get them locally
-    $jsonFiles = Get-ChildItem $home\documents\git\iTerm2-Color-Schemes -Recurse -Filter *.json  |
-        Where-Object Fullname -like '*terminal*' |
-        Where-Object FullName -notlike '*templates*'         
+# clone the iTermColorSchemes repo
+git clone https://github.com/mbadolato/iTerm2-Color-Schemes.git | Out-Host
+
+# and get all of the JSON files from it
+$jsonFiles = Get-ChildItem -Path iTerm2-Color-Schemes -Recurse -Filter *.json  |
+    Where-Object Fullname -like '*terminal*' |
+    Where-Object FullName -notlike '*templates*'
+
+# Get the credits from the CREDITS.md file in the iTerm2-Color-Schemes repo
+$creditLines = Get-Content -Path (Join-Path iTerm2-Color-Schemes CREDITS.md)
+# and declare a small pattern to match markdown links
+$markdownLinkPattern = '\[(?<text>.+?)\]\((?<link>.+?)\)'
+# and a filter to get the credits from the CREDITS.md file
+filter GetCredits {
+    $colorSchemeName = $_
+    $colorSchemePattern = [Regex]::Escape($colorSchemeName) -replace '\\ ', '\s'    
+    foreach ($line in $creditLines) {
+        if (-not $line ) { continue }
+        if ($line -notmatch $colorSchemePattern) {
+            continue            
+        }
+        if ($line -notmatch $markdownLinkPattern) {
+            continue
+        }        
+        [Ordered]@{credit=$Matches.text; link=$Matches.link}
+    }
 }
 
+filter GetLuma {
+    $colorString = $_
+    # Convert the background color to a uint32
+    $rgb = ($colorString -replace "#", "0x" -replace ';') -as [UInt32]
+    # then make it into a percentage red, green, and blue.
+    $r, $g, $b = ([float][byte](($rgb -band 0xff0000) -shr 16)/255),
+        ([float][byte](($rgb -band 0x00ff00) -shr 8)/255),
+        ([float][byte]($rgb -band 0x0000ff)/255)
+
+    # Calculate the luma of the background color
+    0.2126 * $R + 0.7152 * $G + 0.0722 * $B    
+}
 
 # Import the module
 Import-Module .\4bitcss.psd1 -Global
@@ -39,35 +63,64 @@ $allColorSchemes    = @()
 $brightColorSchemes = @()
 $darkColorSchemes   = @()
 
-$allPalletes = [Ordered]@{}
+$allPalettes = [Ordered]@{}
 
 # Walk thru each json file of a color scheme
 foreach ($jsonFile in $jsonFiles) {
-    # convert the contents from JSON    
-    $jsonObject = [IO.File]::ReadAllText($jsonFile.FullName) | ConvertFrom-Json
+    # convert the contents from JSON
+    $jsonContent = [IO.File]::ReadAllText($jsonFile.FullName)
+    $jsonObject = $jsonContent | ConvertFrom-Json
     # and determine the name of the scheme and it's files.
     $colorSchemeName = $jsonObject.Name
     $colorSchemeFileName =
         $jsonObject.Name | Convert-4BitName
+        
+    $creditInfo = @($colorSchemeName | GetCredits)[0]
+    $jsonObject | 
+        Add-Member NoteProperty creditTo -Force -PassThru -Value $creditInfo.credit |
+        Add-Member NoteProperty creditToLink -Force -Value $creditInfo.link
+    
+    if ($jsonObject.background) {
+        $jsonObject | 
+            Add-Member NoteProperty luma -Force -Value $($jsonObject.Background | GetLuma)
+    }
+
+    if ($jsonObject.foreground -and $jsonObject.background) {
+        $jsonObject | 
+            Add-Member NoteProperty contrast -Force -Value $(
+                [Math]::Abs(
+                    ($jsonObject.background | GetLuma) - ($jsonObject.foreground | GetLuma)
+                )                
+            )
+    }
+    
+    $jsonObject | 
+        Add-Member NoteProperty contrast -Force -PassThru -Value @($jsonObject.Background | GetLuma)
 
     if (-not $colorSchemeFileName) { continue }
     $distinctColors = @($jsonObject.psobject.Properties.value) -match '^#[0-9a-fA-F]{6}' | Select-Object -Unique
 
-    $allPalletes[$colorSchemeFileName] = $jsonObject
+    $allPalettes[$colorSchemeFileName] = $jsonObject
     # If the name wasn't there, continue.
     if (-not $jsonObject.Name) { continue }
     # If it wasn't legal, continue.
     if ($jsonObject.Name -match '^\{') { continue }
     $cssPath = (Join-Path $pwd css)
+    $jsonPath = (Join-Path $pwd json)
     # Export the theme to /css (so that repo-based CDNs have a logical link)
     $jsonObject | Export-4BitCSS -OutputPath $cssPath -OutVariable colorSchemeCssFile
-    
+    $jsonObject | Export-4BitJSON -OutputPath (
+        Join-Path $jsonPath "$colorSchemeFileName.json"
+    ) -OutVariable colorSchemeJsonFile
     $ColorSchemePath = Join-Path $docsPath $colorSchemeFileName
     if (-not (Test-Path $ColorSchemePath)) {
         $null = New-Item -ItemType Directory -Path $ColorSchemePath
     }
     # Then export it again to /docs (so the GitHub page works)
     $jsonObject | Export-4BitCSS -OutputPath $ColorSchemePath
+    $jsonObject | Export-4BitJSON -OutputPath (
+        Join-Path $ColorSchemePath "$colorSchemeFileName.json"
+    ) -OutVariable colorSchemeJsonFile
     $dotTextPath = Join-Path $ColorSchemePath "$colorSchemeFileName.txt"
     $distinctColors -join ';' | Set-Content -Path $dotTextPath -Encoding utf8
     Get-Item -Path $dotTextPath
@@ -84,6 +137,7 @@ foreach ($jsonFile in $jsonFiles) {
 
     # Create a preview file.  All we need to change is the stylesheet.
     $previewFilePath = Join-Path $ColorSchemePath "$colorSchemeFileName.md"
+        
 @"
 ---
 stylesheet: /$colorSchemeFileName/$colorSchemeFileName.css
@@ -144,13 +198,13 @@ Get-Item -Path $allDarkSchemesPath
 Get-Item -Path $allDarkSchemesPath |
     Copy-Item -Destination $DataPath -Force -PassThru
 
-$allPalletesPath = Join-Path $docsPath "Palletes.json"
-$allPalletes |
+$allPalettesPath = Join-Path $docsPath "Palettes.json"
+$allPalettes |
     ConvertTo-Json -Depth 4 -Compress |
-    Set-Content -Path $allPalletesPath
+    Set-Content -Path $allPalettesPath
 
-Get-Item -Path $allPalletesPath
-Get-Item -Path $allPalletesPath  |
+Get-Item -Path $allPalettesPath
+Get-Item -Path $allPalettesPath  |
     Copy-Item -Destination $DataPath -Force -PassThru
 
 $4bitJS = Export-4BitJS -ColorSchemeName $allColorSchemes -DarkColorSchemeName $darkColorSchemes -LightColorSchemeName $LightColorSchemeName
@@ -168,6 +222,7 @@ if (-not (Test-Path $IncludesPath)) {
 }
 
 Export-4BitSVG -SVG https://raw.githubusercontent.com/feathericons/feather/master/icons/download.svg -Stroke "ansi6" -OutputPath (Join-Path $IncludesPath "download-icon.svg")
+Export-4BitSVG -SVG https://raw.githubusercontent.com/feathericons/feather/master/icons/github.svg -Stroke "ansi6" -OutputPath (Join-Path $IncludesPath "github-icon.svg")
 Export-4BitSVG -SVG https://raw.githubusercontent.com/feathericons/feather/master/icons/download-cloud.svg -Stroke "ansi6" -OutputPath (Join-Path $IncludesPath "download-cloud-icon.svg")
 Export-4BitSVG -SVG https://raw.githubusercontent.com/feathericons/feather/master/icons/shuffle.svg -Stroke "ansi6" -OutputPath (Join-Path $IncludesPath "shuffle-icon.svg")
 Export-4BitSVG -SVG https://raw.githubusercontent.com/feathericons/feather/master/icons/help-circle.svg -Stroke "ansi6" -OutputPath (Join-Path $IncludesPath "help-circle-icon.svg")
@@ -177,8 +232,10 @@ Export-4BitSVG -SVG https://raw.githubusercontent.com/feathericons/feather/maste
 Get-Module 4bitcss | 
     Split-Path | 
     Join-Path -ChildPath Assets | 
-    Get-ChildItem -Filter 4bitpreview.svg |
-    Copy-Item -Destination (Join-Path $IncludesPath "4bitpreview.svg") -Force -PassThru
+    Get-ChildItem -Filter 4bit*.svg |
+    Copy-Item -Destination {
+        Join-Path $IncludesPath "$($_.Name)"
+    } -Force -PassThru
 
 $defaultColorScheme = 'Konsolas'
 @"
@@ -194,4 +251,8 @@ $transpiledText
 "@ |
     Set-Content (Join-Path $docsPath "index.md") -Encoding utf8
 Get-item -Path (Join-Path $docsPath "index.md")
-#endregion Icons 
+#endregion Icons 
+
+if  ($env:GITHUB_WORKSPACE) {
+    Remove-Item -Path iTerm2-Color-Schemes -Recurse -Force
+}

Build/4bitcss.build.ps1

@@ -1,3 +1,18 @@
+## 0.1.5:
+
+* 336 color palettes (and counting)!
+* Improved functionality
+  * Support for `<button>` (#96)
+  * `carat-color` support (#97) 
+  * HighlightJS support (#104, #105, #107) 
+* Added json data files and credits (#79, #80) 
+* Adding `--Luma` and `--Contrast` to CSS (#94, #95)
+* 4bitcss Docker Container (#74, #75, #76, #77)
+* Animated Palette Example (#109, #111)
+* Improved documentation and examples
+
+---
+
 ## 0.1.4:
 
 * So many more new palettes!
@@ -14,7 +29,7 @@
   * Mounting 4bitcss (#48)
   * Exporting `$4bitcss` (#47)
   * Repository Cleanup (#44, #45, #46)
-* New Commands   
+* New Commands
   * Convert-4bitName (#33)
   * Export-4bitJS (#32)
   * Export-4bitSVG (#34)