Merge pull request #158 from luclis/lint

Lint

.github/FUNDING.yml

@@ -3,4 +3,4 @@
 github: sethcottle
 patreon: sethcottle
 ko_fi: sethcottle
-custom: [https://buymeacoffee.com/seth, https://paypal.me/sethcottle]
+custom: ["https://buymeacoffee.com/seth", "https://paypal.me/sethcottle"]

.github/PULL_REQUEST_TEMPLATE.md

@@ -39,4 +39,4 @@ Please confirm that you've met the following criteria before submitting your con
 ---
 
 ## 🚀 Additional Notes  
-<!-- Add any other information that might help the reviewer understand the changes better (e.g., source of logo, special handling, etc.). -->
+<!-- Add any other information that might help the reviewer understand the changes better (e.g., source of logo, special handling, etc.). -->

.github/workflows/contrast-check.yml

@@ -13,36 +13,36 @@ jobs:
         uses: actions/checkout@v3
         with:
           fetch-depth: 0
-          
+
       - name: Setup for PR comparison
         run: |
           echo "Fetching base branch for comparison"
           git fetch origin ${{ github.base_ref }}
-          
+
       - name: Contrast Check (Review Me)
         run: |
           cat > contrast-check.sh << 'EOF'
           #!/bin/bash
-          
+
           # WCAG Minimum Contrast Ratio
           MIN_CONTRAST=4.5
-          
+
           FAILED=0
           ALL_RESOLVED=1
           NEEDS_MANUAL_REVIEW=0
-          
+
           # Only get buttons that were modified in the PR
           echo "Finding changed button styles..."
           BUTTON_CLASSES=$(git diff origin/$GITHUB_BASE_REF -- css/brands.css | grep -E "^\+.*\.button-[a-zA-Z0-9]+" | sed -E 's/.*\.button-([a-zA-Z0-9]+).*/\1/' | sort -u)
-          
+
           if [[ -z "$BUTTON_CLASSES" ]]; then
             echo "✅ No button changes to check."
             exit 0
           fi
-          
+
           echo "Found button classes to check: $BUTTON_CLASSES"
           echo "🔍 Auditing CSS for contrast issues..."
-          
+
           # Function to normalize hex colors to lowercase
           normalize_color() {
               local color="$1"
@@ -52,56 +52,56 @@ jobs:
                   echo ""
               fi
           }
-          
+
           # Function to calculate luminance
           get_luminance() {
               local color="$1"
-              
+
               if [[ -z "$color" || "$color" == "#" ]]; then
                   echo 0
                   return
               fi
-              
+
               color="${color#'#'}"
-              
+
               if [[ ${#color} -ne 6 ]]; then
                   echo 0
                   return
               fi
-              
+
               r=$(printf "%d" 0x${color:0:2} 2>/dev/null || echo 0)
               g=$(printf "%d" 0x${color:2:2} 2>/dev/null || echo 0)
               b=$(printf "%d" 0x${color:4:2} 2>/dev/null || echo 0)
-              
+
               r=$(awk "BEGIN { print ($r/255 <= 0.03928) ? ($r/255)/12.92 : ((($r/255) + 0.055)/1.055) ^ 2.4 }")
               g=$(awk "BEGIN { print ($g/255 <= 0.03928) ? ($g/255)/12.92 : ((($g/255) + 0.055)/1.055) ^ 2.4 }")
               b=$(awk "BEGIN { print ($b/255 <= 0.03928) ? ($b/255)/12.92 : ((($b/255) + 0.055)/1.055) ^ 2.4 }")
-              
+
               echo $(awk "BEGIN { print (0.2126 * $r) + (0.7152 * $g) + (0.0722 * $b) }")
           }
-          
+
           # Function to calculate contrast ratio
           get_contrast_ratio() {
               local lum1=$(get_luminance "$1")
               local lum2=$(get_luminance "$2")
-          
+
               if [[ -z "$lum1" || -z "$lum2" ]]; then
                   echo 0
                   return
               fi
-          
+
               if (( $(awk "BEGIN { print ($lum1 > $lum2) ? 1 : 0 }") )); then
                   awk "BEGIN { printf \"%.5f\", ($lum1 + 0.05) / ($lum2 + 0.05) }"
               else
                   awk "BEGIN { printf \"%.5f\", ($lum2 + 0.05) / ($lum1 + 0.05) }"
               fi
           }
-          
+
           # Function to extract hex color
           extract_color() {
               local input="$1"
               local color=""
-              
+
               if [[ "$input" =~ "#[0-9a-fA-F]{6}" ]]; then
                   color=$(echo "$input" | grep -o "#[0-9a-fA-F]\{6\}")
               elif [[ "$input" =~ "1px solid #" ]]; then
@@ -111,11 +111,11 @@ jobs:
               elif [[ "$input" =~ "#" ]]; then
                   color=$(echo "$input" | grep -o "#[0-9a-fA-F]*" | head -1)
               fi
-              
+
               # Return normalized (lowercase) hex color
               normalize_color "$color"
           }
-          
+
           # Check contrast
           check_contrast() {
               local text_color="$1"
@@ -126,25 +126,25 @@ jobs:
               local is_background_check="$6"
               local button_name="$7"
               local check_failed=0
-              
+
               # Normalize all colors to lowercase for comparison
               text_color=$(normalize_color "$text_color")
               background_color=$(normalize_color "$background_color")
               border_color=$(normalize_color "$border_color")
               recommend_stroke=$(normalize_color "$recommend_stroke")
-              
+
               if [[ -z "$text_color" || -z "$background_color" ]]; then
                   return 0
               fi
-          
+
               local contrast_ratio=$(get_contrast_ratio "$text_color" "$background_color")
-          
+
               if [[ -z "$contrast_ratio" ]]; then
                   contrast_ratio=0
               fi
-          
+
               contrast_ratio=$(printf "%.2f" "$contrast_ratio")
-          
+
               # Case-insensitive comparison for hex colors
               if (( $(awk "BEGIN { print ($contrast_ratio < $MIN_CONTRAST) ? 1 : 0 }") )); then
                   if [[ -n "$border_color" && "$border_color" == "$recommend_stroke" && "$is_background_check" -eq 1 ]]; then
@@ -159,70 +159,70 @@ jobs:
                   echo "✅ [$context → $button_name] Contrast ratio $contrast_ratio passes WCAG"
                   check_failed=0
               fi
-              
+
               return $check_failed
           }
-          
+
           # For each button class, check its properties
           for button_class in $BUTTON_CLASSES; do
               echo "Checking button: $button_class"
-              
+
               # Extract button section
               # Avoid partial matches
               button_start=$(grep -n "\.button-$button_class\( \|{\)" css/brands.css | cut -d: -f1)
               if [[ -z "$button_start" ]]; then
                   button_start=$(grep -n "\.button-$button_class$" css/brands.css | cut -d: -f1)
               fi
-              
+
               if [[ -z "$button_start" ]]; then
                   echo "Could not find button-$button_class in css/brands.css"
                   continue
               fi
-              
+
               # Look for the next closing bracket
               button_end=$(tail -n +$button_start css/brands.css | grep -n "}" | head -1 | cut -d: -f1)
               if [[ -z "$button_end" ]]; then
                   button_end=10
               fi
-              
+
               button_section=$(tail -n +$button_start css/brands.css | head -n $button_end)
-              
+
               # Check for gradient
               if echo "$button_section" | grep -q "background-image"; then
                   echo "🚩 [./css/brands.css → $button_class] Detected gradient background → Flagging for manual review."
                   NEEDS_MANUAL_REVIEW=1
                   continue
               fi
-              
+
               # Extract colors
               text_color=$(echo "$button_section" | grep "button-text" | grep -o "#[0-9A-Fa-f]*")
               bg_color=$(echo "$button_section" | grep "button-background" | grep -o "#[0-9A-Fa-f]*")
               border_color=$(extract_color "$(echo "$button_section" | grep "button-border")")
-              
+
               button_failed=0
-              
+
               # Check text vs background
               if [[ -n "$text_color" && -n "$bg_color" ]]; then
                   check_contrast "$text_color" "$bg_color" "TEXT vs BUTTON" "$border_color" "" 0 "$button_class"
                   button_failed=$((button_failed | $?))
               fi
-              
+
               # Check button vs light theme
               if [[ -n "$bg_color" ]]; then
                   check_contrast "#ffffff" "$bg_color" "BUTTON vs LIGHT THEME" "$border_color" "#000000" 1 "$button_class"
                   button_failed=$((button_failed | $?))
-                  
+
                   # Check button vs dark theme
                   check_contrast "#121212" "$bg_color" "BUTTON vs DARK THEME" "$border_color" "#ffffff" 1 "$button_class"
                   button_failed=$((button_failed | $?))
               fi
-              
+
               if [[ $button_failed -eq 1 ]]; then
                   FAILED=1
                   ALL_RESOLVED=0
               fi
           done
-          
+
           # Final report
           if [[ "$NEEDS_MANUAL_REVIEW" -eq 1 ]]; then
               echo "⚠️ Manual review required for gradients!"
@@ -235,7 +235,7 @@ jobs:
               exit 1
           fi
           EOF
-          
+
           chmod +x contrast-check.sh
           ./contrast-check.sh
         env:

.gitignore

@@ -1,3 +1,3 @@
 .DS_Store
 .idea
-.devcontainer
+.devcontainer

.pre-commit-config.yaml

@@ -0,0 +1,20 @@
+repos:
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v5.0.0
+    hooks:
+      - id: trailing-whitespace
+        args: ["--markdown-linebreak-ext=md,markdown"]
+        exclude: \.svg$
+      - id: end-of-file-fixer
+        exclude: \.svg$
+      - id: check-yaml
+      - id: double-quote-string-fixer
+        exclude: \.svg$
+  - repo: https://github.com/gitleaks/gitleaks
+    rev: v8.26.0
+    hooks:
+      - id: gitleaks
+  - repo: https://github.com/thoughtworks/talisman
+    rev: v1.37.0
+    hooks:
+      - id: talisman-commit

README.md

@@ -1,7 +1,7 @@
 ![Logo](https://cdn.cottle.cloud/GitHub/LittleLink/littlelink.gif)
 
 # LittleLink
-The DIY self-hosted LinkTree alternative. LittleLink has more than 100 branded button styles you can easily use, with more regularly added by our community in this repo and in [LittleLink Extended](https://github.com/sethcottle/littlelink-extended). 
+The DIY self-hosted LinkTree alternative. LittleLink has more than 100 branded button styles you can easily use, with more regularly added by our community in this repo and in [LittleLink Extended](https://github.com/sethcottle/littlelink-extended).
 
 ---
 ### 🆕 LittleLink Button Builder

VERSION.md

@@ -16,7 +16,7 @@
 
 ### v3.4.0 - 3/04/2025
 - Added Matrix
-  
+
 ### v3.3.0 - 03/01/2025
 - Updated Facebook Logo
 - Updated Messenger Logo
@@ -28,7 +28,7 @@
 
 ### v3.1.1 - 1/28/2025
 - Fixed the alt text for Obsidian (`PR #138` / `@timtjtim`)
-  
+
 ### v3.1.0 - 1/20/2025
 - Added alternate YouTube button (`PR #138` / `@Omikorin`)
 - Fixed `index.html` accessibilty issues (`PR #137` / `@rosahaj`)

css/brands.css

@@ -630,4 +630,4 @@
 	--button-text:#ffffff;
 	--button-background:#0B5CFF;
   --button-border:1px solid #FFFFFF;
-}
+}

css/reset.css

@@ -88,4 +88,4 @@ select {
 /* Remove touch callout on iOS */
 a {
   -webkit-touch-callout: none;
-}
+}

css/style.css

@@ -100,7 +100,7 @@
   --scale-3:1.953rem;       /* 31px */
   --scale-4:2.441rem;       /* 39px */
   --scale-5:3.052rem;       /* 49px */
-  
+
   /* Spacing units */
   --spacing-xs:0.5rem;      /* 8px */
   --spacing-s:1rem;         /* 16px */
@@ -237,7 +237,7 @@ a:hover {
   .avatar--rounded {
 	border-radius: 50%;
   }
-  
+
   /* Modifier for slightly rounded corners */
   .avatar--soft {
 	border-radius: 0.5rem;   /* 8px rounded corners */
@@ -246,7 +246,7 @@ a:hover {
 /* Theme System
   –––––––––––––––––––––––––––––––––––––––––––––––––– */
 /* Light theme is default above */
-  
+
 /* Dark theme */
 :root.theme-dark {
 	color-scheme:dark;

docker/README.md

@@ -228,4 +228,3 @@ docker run -d --name site1 -p 8080:80 littlelink-site1
 # Run second site on port 8081
 docker run -d --name site2 -p 8081:80 littlelink-site2
 ```
-

index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 
-<!-- 
+<!--
   To change the theme, change the class on the html tag below to one of:
   - theme-auto: Automatically switches based on user's system preferences
   - theme-light: Forces light theme
@@ -12,31 +12,31 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-        
+
     <!-- Page Title - Change this to your name/brand (50-60 characters recommended) -->
     <title>LittleLink</title>
     <link rel="icon" type="image/x-icon" href="/images/avatar.png"> <!-- Update this with your own favicon -->
-    
+
     <!-- Meta Description - Write a description (150-160 characters recommended) -->
     <meta name="description" content="Replace this with your own, this appears in search results and when sharing.">
-    
+
     <!-- Keywords -->
     <meta name="keywords" content="your name, industry, and specialties">
-    
+
     <!-- Canonical URL - Helps prevent duplicate content issues -->
     <meta rel="canonical" href="https://yourwebsite.com">
-    
+
     <!-- Author Information -->
     <meta name="author" content="Your Name">
-    
+
     <!-- Stylesheets -->
     <link rel="stylesheet" href="css/reset.css">
     <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="css/brands.css">
-  
+
     <!-- LittleLink Extended Stylesheet (Optional) -->
     <!-- <link rel="stylesheet" href="css/brands-extended.css"> -->
-    <!-- Learn more at https://github.com/sethcottle/littlelink-extended. 
+    <!-- Learn more at https://github.com/sethcottle/littlelink-extended.
          Remove comments if you've added LittleLink Extended dependencies -->
 
   </head>
@@ -46,7 +46,7 @@
     <div class="container">
         <div class="column">
 
-            <!-- 
+            <!--
               By default, the Avatar is rounded. Use the following:
               - avatar--rounded: Automatically rounds the image
               - avatar--soft: Slightly rounds the image
@@ -74,23 +74,23 @@
               <a class="button button-amazon" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/amazon.svg" alt="Amazon Wishlist Logo">Amazon Wishlist</a>
 
               <!-- Amazon Music -->
-              <a class="button button-amazon-music" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/amazon-music.svg" alt="Amazon Music Logo">Listen on Amazon Music</a>  
+              <a class="button button-amazon-music" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/amazon-music.svg" alt="Amazon Music Logo">Listen on Amazon Music</a>
-              
+
               <!-- Apple App Store -->
               <a class="button button-appstore" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/apple.svg" alt="Apple Logo">Apple App Store</a>
-             
+
               <!-- Apple Invites -->
               <a class="button button-invites" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/apple-invites.svg" alt="Apple Invites Logo">Apple Invites</a>
 
               <!-- Apple Music -->
-              <a class="button button-apple-music" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/apple-music.svg" alt="Apple Music Logo">Listen on Apple Music</a>         
+              <a class="button button-apple-music" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/apple-music.svg" alt="Apple Music Logo">Listen on Apple Music</a>
-            
+
               <!-- Apple Music Alternate -->
               <a class="button button-apple-music-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/apple-music-alt.svg" alt="Apple Music Logo">Listen on Apple Music</a>
 
               <!-- Apple Podcasts -->
               <a class="button button-apple-podcasts" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/apple-podcasts.svg" alt="Apple Podcasts Logo">Listen on Apple Podcasts</a>
-              
+
               <!-- Apple Podcasts Alternate -->
               <a class="button button-apple-podcasts-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/apple-podcasts-alt.svg" alt="Apple Podcasts Logo">Listen on Apple Podcasts</a>
 
@@ -99,7 +99,7 @@
 
               <!-- Behance -->
               <a class="button button-behance" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/behance.svg" alt="Behance Logo">Behance</a>
-        
+
               <!-- Bluesky -->
               <a class="button button-bluesky" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/bluesky.svg" alt="Bluesky Logo">Bluesky</a>
 
@@ -183,7 +183,7 @@
 
               <!-- Kick Alt -->
               <a class="button button-kick-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/kick-alt.svg" alt="Kick Logo">Kick</a>
-              
+
               <!-- Kickstarter -->
               <a class="button button-kickstarter" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/kickstarter.svg" alt="Kickstarter Logo">Kickstarter</a>
 
@@ -225,10 +225,10 @@
 
               <!-- Microsoft Store -->
               <a class="button button-microsoft" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/microsoft.svg" alt="Microsoft Logo">Get it from Microsoft</a>
-              
+
               <!-- Notion -->
               <a class="button button-notion" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/notion.svg" alt="Notion Logo">Notion</a>
-              
+
               <!-- Obsidian -->
               <a class="button button-obsidian" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/obsidian.svg" alt="Obsidian Logo">Obsidian</a>
 
@@ -384,7 +384,7 @@
 
               <!-- Generic Shopping Bag -->
               <a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-shopping-bag.svg" alt="Shopping Bag Icon">Visit Our Shop</a>
-                      
+
               <!-- Generic Shopping Tag -->
               <a class="button button-default" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-shopping-tag.svg" alt="Shopping Tag Icon">10% Discount</a>
 
@@ -398,12 +398,12 @@
               <a class="button button-default" href="https://github.com/sethcottle/littlelink-extended" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/littlelink.svg" alt="LittleLink Logo">LittleLink Extended</a>
 
       </div>
-        
+
       <!-- Feel free to add your own footer information, including updating `privacy.html` to reflect how your LittleLink fork is set up -->
       <footer>
         <a href="privacy.html">Privacy Policy</a> | Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>
       </footer>
-    
+
     </div>
   </div>
 

privacy.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 
-<!-- 
+<!--
   To change the theme, change the class on the html tag below to one of:
   - theme-auto: Automatically switches based on user's system preferences
   - theme-light: Forces light theme
@@ -8,7 +8,7 @@
 -->
 
 <html class="theme-auto" lang="en"> <!-- Update `class="theme-auto"` with your preference -->
-  
+
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -28,51 +28,51 @@
     <link rel="stylesheet" href="css/brands.css">
 
   </head>
-  
+
   <body>
     <div class="container-left" role="main">
       <div class="column">
         <nav role="navigation">
           <a href="index.html" aria-label="Back to homepage">← Back to main page</a>
         </nav>
-    
+
         <h1>Privacy Overview</h1>
-    
+
         <section aria-labelledby="analytics-heading">
           <h2 id="analytics-heading">Analytics</h2>
           <p>The services contained in this section enable the Owner to monitor and analyze web traffic and can be used to keep track of User behavior.</p>
-    
+
           <h3>Example LLC</h3>
           <ul role="list">
             <li>Personal Data: various types of Data as specified in the privacy policy of the service</li>
             <li><a href="https://example.com/privacy/" target="_blank" rel="noopener">Privacy Policy</a></li>
           </ul>
         </section>
-    
+
         <section aria-labelledby="external-content-heading">
           <h2 id="external-content-heading">External Content</h2>
           <p>This type of service allows you to view content hosted on external platforms directly from the pages of this website and interact with them.</p>
           <p>This type of service might still collect web traffic data for the pages where the service is installed, even when Users do not use it.</p>
-    
+
           <h3>Example LLC</h3>
           <ul role="list">
             <li>Personal Data: Usage Data; various types of Data as specified in the privacy policy of the service</li>
             <li><a href="https://example.com/privacy/" target="_blank" rel="noopener">Privacy Policy</a></li>
           </ul>
         </section>
-    
+
         <section aria-labelledby="hosting-heading">
           <h2 id="hosting-heading">Hosting and Infrastructure</h2>
           <p>This type of service has the purpose of hosting Data and files that enable this website to exist.</p>
           <p>Some services among those listed below, if any, may work through geographically distributed servers, making it difficult to determine the actual location where the Personal Data are stored.</p>
-    
+
           <h3>Example LLC</h3>
           <ul role="list">
             <li>Personal Data: various types of Data as specified in the privacy policy of the service</li>
             <li><a href="https://example.com/privacy" target="_blank" rel="noopener">Privacy Policy</a></li>
           </ul>
         </section>
-    
+
         <footer>
           <p>Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink.</a></p>
         </footer>
@@ -81,4 +81,4 @@
 
   </body>
 
-</html>
+</html>