(Unofficial) Sleeper League Page Template

Generate a custom league page for your Sleeper fantasy football league in just a few steps

Live demo

---

If you and your league like League Page, please consider starring the repo and donating (and encouraging your league-mates to too!)

---

Features

• Up-to-date league information
• Easy to navigate trade and waiver history
• Awards and accolades
• Records and rankings for every season
• Current season power rankings
• Previous drafts and upcoming draft preview
• Season matchups
• Manager bio pages
• League constitution
• Helpful fantasy football resources and news
  
  
• Built using Svelte and SvelteKit
• Desktop, Mobile and PWA compatible
• League information generated from Sleeper API

Roadmap

• Add integration tests
• Cleanup repo
• Test redraft leagues
• Playoff matchups and current bracket
• Dynasty power rankings
• Hyperlink all manager references
• Fix all css issues when actively resizing the window

Some real-life League Pages

• Legends League

Setup your own League Page

If you've never touched a line of code, use the Training Wheels Guide instead

• Fork this repo
• Go to /src/lib/utils/leagueInfo.js and replace your_league_id (line 2) and your_league_name (line 3) with your Sleeper league ID and league name. (Optionally, also fill out the dues, and dynasty fields):
• Write your homepage text (league intro/bio) /src/lib/utils/leagueInfo.js (lines 9-14)
• Next, fill out and uncomment (delete the // at the beginning of each line) the managers' object (lines 27 - 92), also located in /src/lib/utils/leagueInfo.js, there should be one object for each manager. The structure may change in the future (it has already 😅). The source of truth is down at the bottom, lines 104-126 (for assistance, consult the Training Wheels guide).
• Add corresponding images for managers to the /static/managers/ directory and make the sure the name matches with what was provided above
• If you run into trouble adding managers, reference the Training Wheels' Manager section
• Add blog capabilities with contenful
  • Make a free contentful account
  • Click on Content model in the top bar and create Blog Post (id: blog_post) and Blog Comment (id: blog_comment) content models that matches the specs below (All fields are required):
    • Use sleeper your sleeper username for the author field when creating posts
  • Create a Content Management API key
  • For local development add a .env file to the root of your project and add the following variables
    • VITE_CONTENTFUL_ACCESS_TOKEN with the corresponding value obtained from contenful
    • VITE_CONTENTFUL_SPACE with your space ID, obtained from contenful
  • Create a Content Delivery / Preview API key
  • For local development add the following variable to your .env file
    • VITE_CONTENTFUL_CLIENT_ACCESS_TOKEN with the Content Delivery API - access token from contenful
  • To add the variables for production, go to your project settings and add the corresponding keys (using the same names as above) to the environment variables section
  • For more detailed instructions, follow the Training Wheels blog instructions
  • Finally, set enableBlog to true in src/lib/utils/leagueInfo.js
• Customize your league constitution /src/routes/constitution/index.svelte (remember to adjust the table of contents accordingly)

---

For local developing npm:

npm install
npm run dev --
npm run dev -- --host (to test on other devices locally)

For local developing with a container

npm run docker-run

To deploy on Vercel for free:

• Push up your changes
• Link your github repo to Vercel
• That's it!