Skip to content

1. Setup & Configuration Guide

Jump to bottom
a9x edited this page Aug 19, 2025 · 3 revisions

Setup & Configuration Guide

Welcome to the detailed configuration guide for StarryBio! This page will walk you through every setting available in the config.js file. All of your site's content is managed from here, making it easy to update your page without touching any other code.

⚙️ Editing config.js

To get started, open the config.js file in your favorite text editor. The file is a JavaScript object that holds all your data. Pay close attention to the syntax:

  • Text values must be enclosed in double quotes ("").
  • Each line must end with a comma (,), except for the very last line inside a set of curly braces {}.
  • true and false values should not have quotes.

1. General Site Settings

This section controls the basic information for your site.

  • pageTitle: The title that appears in the browser tab.
    • Example: "John Doe's Links"

2. Announcement Banner

This section controls the banner that appears at the top of your page.

  • enabled: Set to true to show the banner, or false to hide it completely.
  • text: The message you want to display in the banner.
    • Example: "New project just launched! 🚀"
  • url: The full web address that the banner will link to when clicked.
    • Example: "https://github.com/your-username/your-repo"

3. Profile Section

This controls your main profile information and avatar.

  • name: Your name or username that appears in large text.
    • Example: "a9x"
  • title: A short bio, job title, or tagline that appears below your name.
    • Example: "Software Developer | Cat Enthusiast"
  • profileImage: The path to your profile picture. For best results, place your image in the /assets/images/ folder.
    • Example: "assets/images/profile-picture.webp"
  • profileImageFallback: A full URL to an online image that will be used as a backup if your main profileImage fails to load.
    • Example: "https://i.imgur.com/fallback.jpeg"

4. Status Indicator

This optional feature shows your real-time availability based on a schedule.

  • enabled: Set to true to show the status indicator on your profile picture.
  • displayTimeZone: Your local timezone. This is crucial for displaying your schedule correctly to visitors.
  • defaultStatus: The status that will be shown if no other schedule matches. This must match one of the keys in the statuses object below (e.g., "home").

Statuses Object

Define your custom statuses here. You can add, remove, or edit these.

  • "home": This is the key for the status. It's used to link to the schedule.
    • label: The text that appears in the tooltip and schedule modal (e.g., "Available").
    • color: The hex color code for the status dot (e.g., "#23A559").
    • icon: The icon to use. Must match a key in the icons object below (e.g., "online").
    • availabilityMessage: A short message for the tooltip (e.g., "Online and available to chat!").

Icons Object

Provide the paths to your status icon images. These should be local paths to images in your /assets/images/ folder.

  • "online": "assets/images/online.webp"

Schedule Object

Define your schedule here.

  • IMPORTANT: All times must be in 24-hour format and in UTC. Use an online time converter to find the correct UTC times for your local schedule.
  • weekdays / weekends: Add time blocks for when a certain status should be active.
    • Example: { "status": "sleep", "startUTC": "03:00", "endUTC": "11:00" } means from 3:00 AM UTC to 11:00 AM UTC, the "sleep" status will be shown.

5. Links Section

This is an array where you add all your link buttons. To add a new link, copy an entire block from { to } and paste it into the list.

  • mainText: The primary text on the button.
  • displaySubtitle: The smaller text below the main text.
  • url: The destination URL.
  • targetBlank: true opens the link in a new tab.
  • iconSVGPath: For icons, you can use the path data from an SVG. A great place to find these is Simple Icons. Click an icon, and you'll see the path data you can copy and paste here.
  • iconImageURL: Alternatively, you can use a local image file. Place the image in /assets/images/ and use the path here.
  • type: "discord": Use this special type for a Discord link to enable the "copy username" functionality. Make sure to fill in subtitleToCopy with the username you want copied.

6. Footer Section

This controls the copyright text at the very bottom of the profile card.

  • textPrefix: The text before the year (e.g., "©").
  • textSuffix: The text after the year (e.g., "Your Name").

Once you're done editing, just save the config.js file and refresh your index.html in the browser to see your changes!

Clone this wiki locally