/league-page

Create a custom league page for your Sleeper fantasy football league!

Primary LanguageSvelteMIT LicenseMIT

League Page logo

(Unofficial) Sleeper League Page Template

Generate a custom league page for your Sleeper fantasy football league in just a few steps
GitHub node GitHub top language Lines of code GitHub forks GitHub pull requests GitHub issues

League Page demo

Live demo


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



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

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): league ID instructions
  • Write your homepage text (league intro/bio) /src/lib/utils/leagueInfo.js (lines 9-14) homepage text
  • 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). manager object manager rendering
  • 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): content model comment model
      • 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: