modellbau/Linksammlung
1
0
Fork 0
Code Pull Requests Releases Wiki Activity

Lint with pre-commit.

Browse Source
This commit is contained in:
Lucas FILIPPI
2025-05-30 23:44:58 +02:00
parent 504bb49748
commit 40d31c7e9c
12 changed files with 89 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.github/FUNDING.yml vendored
View File

@@ -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"]

2
.github/PULL_REQUEST_TEMPLATE.md vendored
View File

@@ -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.). -->

86
.github/workflows/contrast-check.yml vendored
View File

@@ -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:

2
.gitignore vendored
View File

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

2
README.md
View File

@@ -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

4
VERSION.md
View File

@@ -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`)

2
css/brands.css
View File

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

2
css/reset.css
View File

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

6
css/style.css
View File

@@ -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;

1
docker/README.md
View File

@@ -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
```

46
index.html
View File

@@ -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>

24
privacy.html
View File

@@ -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>