TRAINING_WHEELS.md

(Unofficial) Sleeper League Page Template

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

Training Wheels Instructions

Keep this open in a separate tab, to make setup as easy as possible

I. Initial Setup

1. Fork This Repo to Your GitHub Account

• If you don't already have a Github account, make a free account
• Go to League Page (https://github.com/nmelhado/league-page)
• Click on the Fork button

• You now have your own League Page!

2. Configure your League

• In your league page, go to /src/lib/utils/leagueInfo.js

• Click the edit button

• Replace your_league_name and your_league_id with your Sleeper league name and ID (how to find your league ID) :

• Scroll down to the bottom of the page and commit your changes

• Your league has been configured!

3. Deploy your League Page

• Go to Vercel, and sign up using your GitHub account
• Now link your Github account to your Vercel account

• Import League Page

• Skip the Create a Team step
• Leave all setting as they are, and click Deploy

• Wait for Vercel to deploy your League Page (should take about a minute)
• Click on Go to Dashboard
• Now click on Visit to visit your page (and then keep your league website open in that tab)
• You have officially built a website!

II. Adding Managers and Changing the Homepage Text

1. Now that you have a league website, it's time to personalize your homepage

• Go back to GitHub, and scroll back to the top of /src/lib/utils/leagueInfo.js
• Click edit

• Scroll down to lines 9-14

• Each line (which is sandwiched by a <p> and a </p>) creates a new paragraph on your homepage. Replace those paragraphs with the text you want to use to introduce your league
• If you want fewer paragraphs, delete one of the lines. If you want more, copy a line and paste it below the last <p>...</p> in this area

• Scroll down to the bottom of the page when you're done and Commit changes
• Now go back to your league website, wait a minute or two, and then refresh!

2. Add Managers

• You now have a functioning website, with a personalized homepage. But you're missing one of League Page's best features, Managers!
• Go back to GitHub and scroll back up to the top of /src/lib/utils/leagueInfo.js
• Click the edit button
• Highlight lines 27-92

• On Mac, click: ⌘ Command + /, on Windows, click: Ctrl + /. This will remove the // or, in coding terminology, uncomment these lines, so the code should now look like this:

• Each object (shown highlighted below) corresponds to one manager

• Fill each one out as follows:

  • "roster" : This has been deprecated! You can ignore this field as long as you provide a managerID

    • To find the roster ID for the manager, go back to your website and scroll down to the Power Rankings graph (or to any of the graphs in your records page) (Power Rankings are no longer in order)

  • "managerID" : the user ID of the manager

    • To find a manager's user ID, go to https://api.sleeper.app/v1/league/<your_league_id/users (for example: https://api.sleeper.app/v1/league/784583295500464128/users) and find the corresponding userID for each manager
    • This feld was added in version 2.1.0, so you will have to add it manually. Remember when adding it, to place the id within quotes (i.e. "managerID" : "12345678",)

  • "name" : The name of this manager

  • "tookOver" : This has been deprecated! You can ignore this field as long as you provide a managerID

    • If this manager took over an orphaned team in your league, give the year they took over. Otherwise set this to null

  • "location" : Where is this manager based out of (City, State, Country, whatever floats your boat)

  • "bio" : This manager's bio. If you don't have a bio yet, leave it as is and come back and edit this again when you have the bio.

  • "photo" : This manager's photo. To upload a photo:

    • Open up your repo's root in a new tab

    

    
    
    • Got to /static/managers/

    

    
    
    • Click on Add file then Upload files

    

    
    
    • Add one or all of the manager photos
    • When you're done, click Commit changes at the bottom of the page
    • Back in /src/routes/managers/managers.js tab, use the filename (please note that this IS case sensitive) to fill out the photo field. For the below file, you would fill out "photo" : "/managers/nick.jpg",

    

  • "fantasyStart" : what year did the manager start playing fantasy

  • "favoriteTeam" : supply the lowercase shorthand for a manager's favorite NFL team (i.e. "nyj", "cle", "sf", "ne", etc.)

  • "mode" : There are three options currently: "Win Now", "Dynasty", or "Rebuild"

  • "rival" : This has a nested object that should be filled out as follows:

    • "name" : The name of this manager's rival (can also be themselves, everyone, or nobody)
    • "link" : This corresponds to the other managers on this list.
      • If the manager's rival is the first manager you created in this list, you would supply 0, if their rival is the second manager, you would supply 1, if it's the 10th manager, you would supply 9, etc.
      • If the rival is nobody or everyone, then supply null
      • If the rival is themselves, and they are the third manager in this list, supply 2
    • "image" : Fill this out the same way you did for the manger photo above (you can upload and use specific rival photos if you want)

  • "favoritePlayer" : This is possibly the trickiest step

    • Go to https://api.sleeper.app/v1/players/nfl in a new tab
    • Use ⌘ Command + F (on Mac), or Ctrl + F on Windows to search for the player you are looking for and then copy down that player's player_id

    

    
    
    • Supply that number (i.e. 1426)

  • "favoritePlayer" : This is possibly the trickiest step.

  • "valuePosition" : Does the manager prefer "WR", "RB", "QB", "TE", etc. for fantasy

  • "rookiesOrVets" : Two options, does the manager prefer "Rookies" or "Vets"

  • "philosophy" : The fantasy manager's fantasy football philosophy

  • "tradingScale" : a number 1-10 representing how much the manager likes to trade

  • "preferredContact" : "Text", "WhatsApp", and "Carrier Pigeon" are the only options supplied by default

• You have finished your first manager! Now repeat the process for each manager in your league. Here's an example of a finished 12 team managers.js

• When you're done, scroll down and click Commit changes

• Go back to your league website tab, wait a minute or two, and then refresh. Now you'll have a Managers tab (located in LEAGUE INFO on desktop)

• Click on Managers and you'll see all the managers you just added!

III. Add a Blog

• Add blog capabilities to your League Page 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
  • Copy your Space ID
  • Create a Content Management API key and copy down the value
  • Create a Content Delivery / Preview API key and copy down the Content Delivery API - access token value
  • Now, go back to Vercel go to your project settings
  • Go to the environment variables section
  • Add the values using the following names
    • name: VITE_CONTENTFUL_SPACE value: Space ID (from contentful)
    • name: VITE_CONTENTFUL_ACCESS_TOKEN value: Content Management API - access token (from contentful)
    • name: VITE_CONTENTFUL_CLIENT_ACCESS_TOKEN value: Content Delivery API - access token (from contentful)
  • Go back to GitHub and scroll back up to the top of /src/lib/utils/leagueInfo.js
  • Click the edit button and set enableBlog to true
  • Scroll down and click Commit changes

IV. Updates

• League Page is constantly being updated and improved. Check back on your repo periodically and whenever you see the fetch update button, click fetch update and commit the changes to get the upgrades

• Another way to know there's an update available is if you see the following notification on your League Page:

  

  
  
  • To see what's changed in the newest updates (bugs fixed, features added, etc.), check the CHANGELOG
  
  

  • If you first created your league before August 7th, 2021, you may encounter merge conflicts when trying to fetch upstream.

    • In that situation (if you are new to coding), copy the contents of your managers page and your homepage text and delete your repo. Re-follow this guide and re-deploy your page.
    • There should be NO merge conflicts going forward.

  • WARNING: There may be merge conflicts in package-lock.json. This should be very rare.

    • Follow these instructions to resolve the conflict. For the most part, you'll most likely want to keep the changes from master (the second change)

V. Wrapping up

• That's it. You've built out your own league website!
• If you want to replace the league page logo with your league's own logo, replece static/badge.png with your own 120px x 120px png file (using the same name)
• If you want to delve further, you can also edit your league constitution page /src/routes/constitution/+page.svelte
  • This page is primarily HTML, so you can edit this in a similar way to how you edited the homepage
• If you and your league like League Page, please consider donating (and encouraging your league-mates to too!)

• If you run into any issues, go back to the original League Page repo and open an issue
• If you have any recommendations, go back to the original League Page repo and open a feature request