finished site

This commit is contained in:
Alyx 2026-03-04 10:43:28 +01:00
parent 9fb50d0f18
commit 82841af1e7
18 changed files with 22 additions and 908 deletions

View File

@ -1,8 +0,0 @@
spec:
name: littlelink
static_sites:
- name: littlelink
git:
branch: main
repo_clone_url: https://github.com/sethcottle/littlelink.git
output_dir: /

6
.github/FUNDING.yml vendored
View File

@ -1,6 +0,0 @@
# These are supported funding model platforms
github: sethcottle
patreon: sethcottle
ko_fi: sethcottle
custom: ["https://buymeacoffee.com/seth", "https://paypal.me/sethcottle"]

View File

@ -1,43 +0,0 @@
## 📄 Description
<!-- Provide a short description of the brand you're adding or the changes you're making. Include context about why this is a valuable addition. -->
---
## ✅ Contribution Checklist
Please confirm that you've met the following criteria before submitting your contribution:
- [ ] **Widespread Recognition:** The brand has widespread recognition and is suitable for the core LittleLink repository (most additions belong in [LittleLink Extended](https://github.com/sethcottle/littlelink-extended)).
- [ ] **Brand Styling Guidelines:** Youve followed the brand's official styling guidelines (if available).
- [ ] **Consistent Styling:** If no guidelines exist, the button style is consistent with the brand's public image (e.g., website, social media).
- [ ] **Icon Clarity:** The brand's logo/icon is clear and recognizable in a 24x24px format.
- [ ] If the primary logo doesnt scale well, youve adapted it using the brands social media avatar or favicon while maintaining the essence of the original logo.
- [ ] The icon is provided in `.svg` format.
- [ ] **Theme Testing:** You've tested the button against both light and dark themes:
- [ ] Manually swapped `theme-auto.css` with `theme-light.css` and `theme-dark.css` in `index.html` to check contrast or used [LittleLink Button Builder](https://builder.littlelink.io) contrast checker.
- [ ] Added a `#000000`/`#FFFFFF` stroke if necessary to improve contrast and accessibility. [LittleLink Button Builder](https://builder.littlelink.io) will automatically recommend when to add a stroke.
- [ ] **Accessibility Compliance:** The button's background and text colors meet visual accessibility standards (unless it contradicts brand guidelines).
- [ ] **Alphabetical Order:** Your contribution is alphabetically organized in `brands.css` and `index.html`.
- [ ] **Button Preview:** You've added a button preview in `index.html`.
- [ ] **Variant Naming Schema:** If adding a variant button (e.g., inverted color scheme):
- [ ] Naming follows the existing pattern (`[Brand Name] Alt` and `.button-brandname-alt`).
- [ ] Any additional icons are named according to `brandname-alt.svg` schema.
- [ ] **Proper Capitalization:**
- [ ] In `brands.css`, the brand name comment follows `/* Brand Name */` format.
- [ ] Code uses lowercase for `.button.button-brandname`.
- [ ] In `index.html`, comments reflect `<!-- Brand Name -->` format.
- [ ] Button text and `alt` attributes match the brands official capitalization.
- [ ] **PR Details:**
- [ ] Included a brief description of the brand addition.
- [ ] Included a screenshot of the new button(s).
- [ ] Provided relevant information on the brands global/regional reach or usage stats.
- [ ] Bumped VERSION.md / Major.Minor.Patch (you'll likely want to bump minor if you're just adding a new brand or making a small tweak)
---
## 📸 Screenshot
<!-- Attach a screenshot of the new button(s) to ensure consistency and clarity. -->
---
## 🚀 Additional Notes
<!-- Add any other information that might help the reviewer understand the changes better (e.g., source of logo, special handling, etc.). -->

View File

@ -1,242 +0,0 @@
name: "Contrast Check"
on:
pull_request:
paths:
- 'css/brands.css'
workflow_dispatch: # Manual trigger for testing
jobs:
contrast-check:
runs-on: ubuntu-latest
steps:
- name: Checkout code
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"
if [[ -n "$color" ]]; then
echo "$color" | tr '[:upper:]' '[:lower:]'
else
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
color=$(echo "$input" | sed -E 's/.*1px solid (#[0-9a-fA-F]{6}).*/\1/')
elif [[ "$input" =~ "solid #" ]]; then
color=$(echo "$input" | sed -E 's/.*solid (#[0-9a-fA-F]{6}).*/\1/')
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"
local background_color="$2"
local context="$3"
local border_color="$4"
local recommend_stroke="$5"
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
echo "✅ [$context → $button_name] Contrast ratio $contrast_ratio fails WCAG but has a $recommend_stroke border → Treated as passing."
echo "✅ [$context → $button_name] Issue resolved by stroke → Fully passing."
check_failed=0
else
echo "❌ [$context → $button_name] Contrast ratio $contrast_ratio fails WCAG — Recommend adding a $recommend_stroke stroke."
check_failed=1
fi
else
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!"
exit 1
elif [[ "$ALL_RESOLVED" -eq 1 ]]; then
echo "✅ All contrast checks passed!"
exit 0
else
echo "❌ Contrast issues found!"
exit 1
fi
EOF
chmod +x contrast-check.sh
./contrast-check.sh
env:
GITHUB_BASE_REF: ${{ github.base_ref }}

View File

@ -1,20 +0,0 @@
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

View File

@ -1,8 +0,0 @@
MIT License
Copyright 2019-2024 Seth Cottle
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

133
README.md
View File

@ -1,133 +0,0 @@
![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).
---
### 🆕 LittleLink Button Builder
Want to make your own buttons for LittleLink but you're not too sure where to start? [Check out our new Button Builder](https://builder.littlelink.io). This new builder lets you preview button styles and with a single click, copy the generated CSS code to put in `css/brands.css`, and copy the generated HTML code to put in `index.html`. This builder also helps automate accessibility features by checking contrast ratios and suggesting strokes when needed, ensuring your custom buttons maintain LittleLink's high standards for visibility in both light and dark themes. Design your buttons visually, preview them live, and get ready to go code. [Live Site](https://builder.littlelink.io) | [GitHub Repo](https://github.com/sethcottle/littlelink-button-builder)
---
### 🌞 Themes and Accessibility
LittleLink offers `auto`, `light`, and `dark` themes right out of the box. If the default color schemes don't match your preference, you can easily customize them by updating the values in `style.css`. You can set any of the themes right in `index.html`. To enhance visual accessibility in both `light` and `dark` modes, buttons lacking sufficient contrast with the background are outlined with an inverse stroke to ensure visibility. While LittleLink emphasizes accessibility, it's important to acknowledge that not all brands incorporated into LittleLink achieve this standard. Branded buttons that come into LittleLink always retain the original essence of the brand and some branded buttons might fall short of optimal accessibility in terms of contrast.
![Theme](https://cdn.cottle.cloud/GitHub/LittleLink/ThemeSupport.gif)
---
### 🥇 Performance
![Performance](https://cdn.cottle.cloud/GitHub/LittleLink/ranking.gif)
LittleLink epitomizes simplicity and minimalism. When evaluating the [LittleLink sample page](https://littlelink.io/sample/seth) (which mirrors a typical LittleLink setup for an individual) through tools such as [Google PageSpeed Insights](https://pagespeed.web.dev/analysis/https-littlelink-io-sample-seth/17ex80ryq4?form_factor=mobile), showcases LittleLink's excellence with 100/100 in Performance, Accessibility, Best Practices, and SEO. My initial vision for LittleLink was to craft it from the fundamentals. LittleLink leverages it's own vanilla `css` to remove the unnecessary bloat you would get from using a large framework for a page that requires nothing more than simplicity.
---
### ☁️ Deploy
![Publish](https://cdn.cottle.cloud/GitHub/LittleLink/test/css/deploy.gif)
No need for gulp, npm, or anything else to make LittleLink work—it uses the bare essentials. You can automatically fork and deploy LittleLink with [Cloudflare](https://workers.cloudflare.com/), [DigitalOcean](https://www.digitalocean.com/products/app-platform), [Vercel](https://vercel.com/), [Netlify](https://www.netlify.com/), or [Amplify](https://aws.amazon.com/amplify) using the buttons below. LittleLink is also easy to host through [GitHub Pages](https://pages.github.com/) or on your home lab server, CDN, or other frontend hosting services. To edit, all you need is a little basic HTML knowledge to add a link to the exisiting buttons or you can create your own. See our [adding custom buttons to your own fork wiki](https://github.com/sethcottle/littlelink/wiki/Adding-custom-buttons-to-your-own-fork). It's simple, promise. 🤞
---
##### One-Click Deployments
[![Deploy to Cloudflare](https://cdn.cottle.cloud/littlelink/button-deploy-cloudflare.svg)](https://deploy.workers.cloudflare.com/?url=https://github.com/sethcottle/littlelink)
[![Deploy to DigitalOcean](https://cdn.cottle.cloud/littlelink/button-deploy-digitalocean.svg)](https://cloud.digitalocean.com/apps/new?repo=https://github.com/sethcottle/littlelink/tree/main)
[![Deploy to Vercel](https://cdn.cottle.cloud/littlelink/button-deploy-vercel.svg)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsethcottle%2Flittlelink&project-name=littlelink&repository-name=littlelink)
[![Deploy to Netlify](https://cdn.cottle.cloud/littlelink/button-deploy-netlify.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/sethcottle/littlelink)
[![Deploy to Amplify](https://cdn.cottle.cloud/littlelink/button-deploy-amplify.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/sethcottle/littlelink)
---
### 🤝 Contributions
Please reference the [submitting a new brand to LittleLink wiki](https://github.com/sethcottle/littlelink/wiki/Submitting-a-new-brand-to-LittleLink) before opening a PR.
---
### 📦 Community Extras
#### 🛸 LittleLink Extended
Looking for more niche services to add to your copy of LittleLink? Check out [LittleLink Extended](https://github.com/sethcottle/littlelink-extended). Users can add more niche services to this repository to help keep the core LittleLink repository less cluttered and more focused on delivering branded experiences for the majority of users.
#### 🎨 Figma
Duplicate the [LittleLink Template on Figma Community](https://www.figma.com/community/file/846568099968305613) to help plan out and design your LittleLink page.
[![Figma Community](https://cdn.cottle.cloud/littlelink/button-figma-community.svg)](https://www.figma.com/community/file/846568099968305613)
#### 🐋 Docker
• [Techno Tim](https://github.com/timothystewart6) is building [LittleLink-Server](https://github.com/techno-tim/littlelink-server). Check out [his video](https://youtu.be/42SqfI_AjXU)!
• [Drew](https://github.com/davisdre) is building a [super simple Docker implementation of LittleLink](https://github.com/davisdre/littlelink).
#### 🗃️ Misc
• [Julian](https://github.com/JulianPrieber) is building [LinkStack](https://github.com/LinkStackOrg/LinkStack), which is a fork of [Khashayar](https://github.com/khashayarzavosh)'s [LittleLink Admin](https://github.com/khashayarzavosh/admin-littlelink).
---
### 💖 Supporters
You can support LittleLink by [buying me a coffee](https://www.buymeacoffee.com/seth). You can also have your name or your company added to this section and the supporters page of the [LittleLink.io](https://littlelink.io) website.
#### 🏢 Business Supporters
**[Unallocated Space](https://connect.unallocatedspace.org/)** | Hacker/Makerspace in Millersville, MD, serving the greater Baltimore-Washington area
**[links.dev](https://github.com/fatih-yavuz/links.dev)**
[![Add Your Company Name](https://cdn.cottle.cloud/littlelink/button-buy-me-a-coffee-company.svg)](https://www.buymeacoffee.com/seth/e/50574)
#### ✨ Individual Supporters
**[Drew Davis](https://connect.davisdre.me)**
**[Robotter112](https://robotter112.de/)**
[![Buy Me A Coffee](https://cdn.cottle.cloud/littlelink/button-buy-me-a-coffee-individual.svg)](https://www.buymeacoffee.com/seth/e/50573)
#### 🐙 Active GitHub Sponsors
**[Your Name Here](https://github.com/sponsors/sethcottle)**
[![GitHub Sponsors](https://cdn.cottle.cloud/littlelink/button-github-sponsors.svg)](https://github.com/sponsors/sethcottle)
#### 🥰 More Ways to Support LittleLink
[![Buy Me A Coffee](https://cdn.cottle.cloud/littlelink/button-buy-me-a-coffee.svg)](https://www.buymeacoffee.com/seth/)
[![Ko-Fi](https://cdn.cottle.cloud/littlelink/button-ko-fi.svg)](https://ko-fi.com/sethcottle)
[![PayPal](https://cdn.cottle.cloud/littlelink/button-paypal.svg)](https://paypal.me/sethcottle/)
---
### 🆕 Stay Connected
Join the [Seth's Nook Discord](https://discord.gg/PrAEQFF2fK) server to get updates on LittleLink and more. Use the invite code `PrAEQFF2fK` or click the button below.
[![Discord](https://cdn.cottle.cloud/littlelink/button-discord.svg)](https://discord.gg/PrAEQFF2fK)
---
### 📊 Analytics
To help build a more privacy focused product, we recommend using [Fathom Analytics](https://usefathom.com/ref/EQVZMV)*. [View our Fathom analytics dashboard](https://app.usefathom.com/share/xbmnwxxl/littlelink.io#/?filters=%5B%5D&range=last_7_days&site=2251799827005303)**.
###### * This is a referral link. Using this link to sign up for Fathom is an easy way to help support LittleLink!
###### ** Analytics in this dashboard start May 03, 2022. View this [Google Sheets file](https://docs.google.com/spreadsheets/d/1GL4SroAdH-OZphBVR5z-BoSukHIEVJfao25q_e9-Ii8/edit?usp=sharing) with the generic unique pageview data from Google Analytics.
[![Fathom](https://cdn.cottle.cloud/littlelink/button-fathom-analytics.svg)](https://usefathom.com/ref/EQVZMV)
---
### 🐳 Docker Support
LittleLink includes Docker support for easy deployment and development. All Docker-related files are located in the `docker/` directory.
To run LittleLink using Docker:
```bash
docker compose -f docker/compose.yaml up
```
This will make the site available at http://localhost:8080
For more information about Docker configuration, see [docker/README.md](docker/README.md).
---

View File

@ -1,97 +0,0 @@
# LittleLink Version History
## Current Version: v3.10.0
### v3.10.0 - 01/27/2026
- Added quick deploy files for Cloudflare & DigitalOcean.
### v3.9.0 - 07/25/2025
- Fixed Unsplash Icon [PR #161](https://github.com/sethcottle/littlelink/pull/161), thanks to [@majal](https://github.com/majal)
### v3.8.0 - 06/29/2025
- Added pre-commit for auto-lint the files before commit them [PR #158](https://github.com/sethcottle/littlelink/pull/158), thanks to [@luclis](https://github.com/luclis).
### v3.7.0 - 4/18/2025
- Added [Meetup](https://www.meetup.com/).
### v3.6.0 - 3/25/2025
- Finally adds Docker support to LittleLink. See [PR #151](https://github.com/sethcottle/littlelink/pull/151), thank you [@lllahaye](https://github.com/lllahaye).
- Docker support has been a long-standing community request. While I previously closed similar PRs in an effort to keep the LittleLink repo as minimal as possible, several community forks emerged that added Docker support independently. Over the last few weeks I had been reconsidering this stance—this PR arrived at just the right time.
- Updated the brand color for Signal.
### v3.5.0 - 3/10/2025
- Added LittleLink Extended information in `index.html`
- Added `PULL_REQUEST_TEMPLATE.md` to `.github` which is a reflection of [submitting a new brand](https://github.com/sethcottle/littlelink/wiki/Submitting-a-new-brand-to-LittleLink) wiki.
### v3.4.0 - 3/04/2025
- Added Matrix
### v3.3.0 - 03/01/2025
- Updated Facebook Logo
- Updated Messenger Logo
- Updated Messenger Button Color
### v3.2.0 - 2/14/2025
- Added Apple Invites
- Removed Read.cv (service is winding down)
### 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`)
### v3.0.2 - 12/20/2024
- Added Obsidian as a brand
### v3.0.1 - 11/13/2024
- Removed Trakt logo from `images/icons` since this now lives in LittleLink Extended
- Favicon update for `privacy.html`
### v3.0.0 - 11/13/2024
A complete modernization of LittleLink focusing on accessibility, maintainability, and more modern web standards.
#### Major Changes
- Complete rebuild of CSS architecture
- Moved away from Skeleton CSS dependency to custom, purpose-built CSS
- Improved maintainability with modular CSS structure
- Enhanced dark mode and auto theming implementation
- Enhanced `brands.css`
- Accessibility Improvements
- Improved keyboard navigation throughout
- Enhanced screen reader compatibility
- Better focus management and visible focus states
- Proper ARIA labels and semantic HTML structure
- HTML Modernization
- Rebuilt `index.html`
- Rebuilt `privacy.html`
- Optimized meta tags and SEO structure
#### Developer Experience
- Better documented codebase
- Simplified customization process
- Improved maintainability
- More consistent standards
- Added VERSION.md so you know what version of LittleLink you downloaded
#### Brand Changes
- Updated PayPal button color
- Updated Discord button color
- Updated YouTube button color
- Updated Pinterest button color
- Updated Ko-fi button color and updated their logo
- Updated Medium logo
- Updated WordPress button color
- Moved NGL to LittleLink Extended
- Moved Redbubble to LittleLink Extended
- Moved Revolut to LittleLink Extended
- Moved Trakt to LittleLink Extended
- Moved Untapped to LittleLink Extended
- Moved Upwork to LittleLink Extended
---
For the complete history of changes, please visit:
https://github.com/sethcottle/littlelink/releases

View File

@ -631,3 +631,10 @@
--button-background:#0B5CFF; --button-background:#0B5CFF;
--button-border:1px solid #FFFFFF; --button-border:1px solid #FFFFFF;
} }
/* VGen */
.button-vgen {
--button-text: #000000;
--button-background: #b8ff26;
--button-border: 1px solid #000000;
}

View File

@ -1,46 +0,0 @@
# Include any files or directories that you don't want to be copied to your
# container here (e.g., local build artifacts, temporary files, etc.).
#
# For more help, visit the .dockerignore file reference guide at
# https://docs.docker.com/go/build-context-dockerignore/
# Git
.git
.github
.gitignore
# Docker
.dockerignore
docker-compose*
compose.yaml
# Logs
*.log
# Editor directories and files
.idea
.vscode
**/.DS_Store
# Documentation files
README*
LICENSE*
VERSION*
CONTRIBUTING*
# Exclude unnecessary files
**/__pycache__
**/.venv
**/bin
**/obj
**/charts
**/.env
**/secrets.dev.yaml
**/values.dev.yaml
# Keep only essential files for the static website
!index.html
!privacy.html
!css/
!images/
!fonts/

View File

@ -1,35 +0,0 @@
FROM nginx:alpine
# Copy static website files
COPY . /usr/share/nginx/html/
# Configure nginx with basic optimization and logging to stdout/stderr
RUN echo 'server { \
listen 80; \
server_name localhost; \
root /usr/share/nginx/html; \
index index.html index.htm; \
\
# Enable access logging to stdout \
access_log /dev/stdout; \
error_log /dev/stderr; \
\
# Enable gzip compression \
gzip on; \
gzip_vary on; \
gzip_types text/plain text/css application/json application/javascript; \
\
# Basic cache settings \
location ~* \\.(?:css|js|jpg|jpeg|gif|png|ico|svg)$ { \
expires 7d; \
add_header Cache-Control "public"; \
} \
}' > /etc/nginx/conf.d/default.conf
# Forward nginx logs to Docker log collector
RUN ln -sf /dev/stdout /var/log/nginx/access.log && \
ln -sf /dev/stderr /var/log/nginx/error.log
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

View File

@ -1,230 +0,0 @@
# Docker for LittleLink
Docker configuration to run LittleLink in a container.
## File Structure
- `Dockerfile`: Defines how the image is built using nginx:alpine
- `compose.yaml`: Configuration for Docker Compose with volumes for development
- `.dockerignore`: Excludes unnecessary files from the image
## Technical Details
### Base Image
- Uses `nginx:alpine` for minimal image size (~20MB)
- Includes gzip compression for static files
- Optimized cache configuration for CSS, JavaScript, and images
- Configured to forward nginx logs to Docker log collector
### Volumes and Ports
- Mounts the project root directory as a volume for live development
- Exposes port 80 in the container, mapped to 8080 on the host
## Common Use Cases
### Creating Personal Link Pages for Different People
One of the main advantages of this Docker setup is how easily you can create multiple personalized instances of LittleLink:
```bash
# Clone the repository
git clone https://github.com/sethcottle/littlelink.git littlelink-john
# Customize the content for John
cd littlelink-john
# Edit index.html with John's links, customize images, etc.
# Build a Docker image for John's page
docker build -f docker/Dockerfile -t littlelink-john .
# Run John's page on port 8080
docker run -d --name john-links -p 8080:80 littlelink-john
```
For additional pages:
```bash
# Similarly for another person
git clone https://github.com/sethcottle/littlelink.git littlelink-jane
cd littlelink-jane
# Customize for Jane...
# Build and run on a different port
docker build -f docker/Dockerfile -t littlelink-jane .
docker run -d --name jane-links -p 8081:80 littlelink-jane
```
This approach allows you to:
- Maintain separate customized sites for different people
- Run multiple instances on different ports
- Update each site independently
- Easily deploy to various environments
## Development vs. Production
There are two main ways to use Docker with LittleLink:
### Development Workflow
In development, we use Docker Compose with mounted volumes to allow for live editing:
```bash
# Start development environment
docker compose -f docker/compose.yaml up
```
This configuration:
- Mounts local files as a volume, so changes are reflected immediately
- Requires manual browser refresh to see changes
- Is ideal for testing and development
### Production Workflow
For production, you have two options:
#### Option 1: Production with Docker Compose
Create a production-specific docker-compose file:
```yaml
# docker/compose.prod.yaml
services:
web:
image: yourname/littlelink:latest
restart: always
ports:
- "8080:80"
# Optional volume for customizable content
volumes:
- /path/on/server/custom-content:/usr/share/nginx/html
```
Deploy using:
```bash
# Build and tag the image
docker build -f docker/Dockerfile -t yourname/littlelink:latest .
# Run in production with compose
docker compose -f docker/compose.prod.yaml up -d
```
#### Option 2: Production with Docker Run
```bash
# Build a production image
docker build -f docker/Dockerfile -t yourname/littlelink:latest .
# Run in production (no volumes mounted)
docker run -d --name littlelink -p 80:80 --restart always yourname/littlelink:latest
```
## Using Volumes in Production
You can customize the content in production by mounting a local directory:
```bash
# Prepare a directory with your custom content
mkdir -p /path/on/server/custom-content
cp -r index.html css/ images/ /path/on/server/custom-content/
# Run with the custom content mounted
docker run -d --name littlelink -p 80:80 \
-v /path/on/server/custom-content:/usr/share/nginx/html \
yourname/littlelink:latest
```
With Docker Compose:
```yaml
services:
web:
image: yourname/littlelink:latest
ports:
- "80:80"
volumes:
- /path/on/server/custom-content:/usr/share/nginx/html
```
This approach:
- Allows content customization without rebuilding the image
- Makes it easy to update content independently of the container
## Docker Commands Reference
### Development Commands
```bash
# Start in development mode
docker compose -f docker/compose.yaml up
# Start in background
docker compose -f docker/compose.yaml up -d
# Stop container
docker compose -f docker/compose.yaml down
# View logs (including HTTP request logs)
docker compose -f docker/compose.yaml logs -f
```
### Production Commands
```bash
# Build production image
docker build -f docker/Dockerfile -t yourname/littlelink:latest .
# Run production container
docker run -d --name littlelink -p 80:80 yourname/littlelink:latest
# View logs for the running container
docker logs -f littlelink
```
## Customization
### Change Port
Edit `docker/compose.yaml` for development:
```yaml
ports:
- "8081:80" # Change 8080 to desired port
```
Or specify port when running production container:
```bash
docker run -p 8081:80 yourname/littlelink:latest
```
### Additional nginx Configuration
To modify the nginx configuration, you can edit the `Dockerfile` and add your own configuration:
```dockerfile
# Example: add custom configuration
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
```
## Deploying to Production
### Docker on VPS
```bash
# Pull image
docker pull yourname/littlelink:latest
# Run container
docker run -d --name littlelink -p 80:80 yourname/littlelink:latest
# With restart policy for auto-recovery
docker run -d --name littlelink --restart unless-stopped -p 80:80 yourname/littlelink:latest
```
### Multiple Sites on One Server
You can run multiple LittleLink instances on the same server:
```bash
# Run first site on port 8080
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
```

View File

@ -1,10 +0,0 @@
services:
web:
build:
context: ..
dockerfile: docker/Dockerfile
ports:
- "8080:80"
volumes:
- ..:/usr/share/nginx/html
restart: unless-stopped

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 80 KiB

BIN
images/icons/vgen.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -14,20 +14,20 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Page Title - Change this to your name/brand (50-60 characters recommended) --> <!-- Page Title - Change this to your name/brand (50-60 characters recommended) -->
<title>LittleLink</title> <title>Onkel_Noxy - vtube.gay</title>
<link rel="icon" type="image/x-icon" href="/images/avatar.png"> <!-- Update this with your own favicon --> <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 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."> <meta name="description" content="Replace this with your own, this appears in search results and when sharing.">
<!-- Keywords --> <!-- Keywords
<meta name="keywords" content="your name, industry, and specialties"> <meta name="keywords" content="your name, industry, and specialties">-->
<!-- Canonical URL - Helps prevent duplicate content issues --> <!-- Canonical URL - Helps prevent duplicate content issues -->
<meta rel="canonical" href="https://yourwebsite.com"> <meta rel="canonical" href="https://noxy.vtube.gay">
<!-- Author Information --> <!-- Author Information
<meta name="author" content="Your Name"> <meta name="author" content="Your Name">-->
<!-- Stylesheets --> <!-- Stylesheets -->
<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/reset.css">
@ -54,7 +54,7 @@
Be sure to replace the src with your own image path and update the alt text Be sure to replace the src with your own image path and update the alt text
--> -->
<img class="avatar avatar--soft" src="images/avatar.png" srcset="images/avatar@2x.png 2x" alt="LittleLink"> <img class="avatar avatar--soft" src="images/avatar.png" srcset="images/avatar@2x.png 2x" alt="A cartoon character with wavy blue hair, one blue eye, and one red eye is making a peace sign. They have cat-like ears and wear a purple suit with a black tie featuring a button. A small Piplup is perched on their shoulder, smiling. The background is plain white.">
<!-- Replace with your name or brand --> <!-- Replace with your name or brand -->
<h1> <h1>
@ -67,36 +67,27 @@
<!-- All your buttons go here --> <!-- All your buttons go here -->
<div class="button-stack" role="navigation"> <div class="button-stack" role="navigation">
<!-- VGen -->
<a class="button button-vgen" href="https://vgen.co/onkel_noxy" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/vgen.png" alt="VGen icon">VGen</a>
<!-- Bluesky --> <!-- 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> <a class="button button-bluesky" href="https://bsky.app/profile/noxy.vtube.gay" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/bluesky.svg" alt="Bluesky Logo">Bluesky</a>
<!-- Discord -->
<a class="button button-discord" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/discord.svg" alt="Discord Logo">Discord</a>
<!-- Instagram -->
<a class="button button-instagram" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/instagram.svg" alt="Instagram Logo">Instagram</a>
<!-- PayPal -->
<a class="button button-paypal" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/paypal.svg" alt="PayPal Logo">PayPal</a>
<!-- TikTok --> <!-- TikTok -->
<a class="button button-tiktok" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/tiktok.svg" alt="TikTok Logo">TikTok</a> <a class="button button-tiktok" href="https://www.tiktok.com/@onkel_noxy" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/tiktok.svg" alt="TikTok Logo">TikTok</a>
<!-- Twitch --> <!-- Twitch -->
<a class="button button-twitch" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/twitch.svg" alt="Twitch Logo">Twitch</a> <a class="button button-twitch" href="https://www.twitch.tv/onkel_noxy" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/twitch.svg" alt="Twitch Logo">Twitch</a>
<!-- X --> <!-- X -->
<a class="button button-x" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/x.svg" alt="X Logo">Follow on X</a> <a class="button button-x" href="https://x.com/Onkel__Noxy" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/x.svg" alt="X Logo">Follow on X</a>
<!-- YouTube Alt -->
<a class="button button-yt-alt" href="#" target="_blank" rel="noopener" role="button"><img class="icon" aria-hidden="true" src="images/icons/youtube-alt.svg" alt="YouTube Logo">YouTube</a>
</div> </div>
<!-- Feel free to add your own footer information, including updating `privacy.html` to reflect how your LittleLink fork is set up --> <!-- Feel free to add your own footer information, including updating `privacy.html` to reflect how your LittleLink fork is set up -->
<footer> <footer>
<a href="privacy.html">Privacy Policy</a> | Build your own by forking <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a> Hosted on <a href="https://vtube.gay" target="_blank">vtube.gay</a> by <a href="https://link.jaxoff.tv" target="_blank">Jax</a> :3| Built with <a href="https://littlelink.io" target="_blank" rel="noopener">LittleLink</a>
</footer> </footer>
</div> </div>

View File

@ -1,6 +0,0 @@
name = "littlelink"
compatibility_date = "2025-01-27"
[assets]
directory = "./"
html_handling = "auto-trailing-slash"