Extending Glitch In Bio

You can extend Glitch in Bio in various ways over and above setting your own links:

• Customizing the style and creating new themes by editing the CSS files
• Editing your HTML page outline in index.html
• Creating or tweaking the partial layout components that make up the page in the layout folder
• The app is built using Vite, so you can import dependencies in package.json and configure vite.config.js to pass in data / functions such as Handlebars helpers when the site builds
• Adding new data to settings.json that your app components can build into the site

Extending your site HTML and using Settings data

Your site content is contained within the layout defined in index.html, where you'll find lots of comments explaining more. You can directly edit the HTML in the file, but you'll also notice code blocks that look like this: {{> links}}

These blocks are importing the partial chunks of HTML defined in the files inside the layout folder, and initially include sections for the page head, avatar, name, links, social media, and footer.

You can access the values in settings.json in your HTML layout files using Handlebars syntax as follows, replacing name with whatever property you want to include: {{settings.name}}

Try changing your HTML content to use the settings data differently!

Packages and Handlebars helpers

You can add NPM packages to your Glitch in Bio site in packages.json and access them in your site build process. If you take a look in vite.config.js you'll see how the site imports our Glitch version of the Handlebars plugin for Vite, then passes it in along with some config.

Your site will have one custom Handlebars helper included by default: hostasclass, which takes a URL for a link and returns a string based on it that the site uses as a class attribute. Open layout > links.html to see this helper function being used. 

Take a look at the settings.json links array. Each link has a url property which the HTML above is referencing. The syntax {{hostasclass this.url}} calls the function defined in vite.config.js, passing it the url value, and building the result into the site as the list item element class attribute, so it'll be something like this:

Check out the generated website markup by opening the developer tools on your preview (right-click + I or control+click+I).

Try adding a new Handlebars helper!

Check out the featured remixes to use and inspire your own!