I need help with Glitch-In-Bio

Hey there!

So I am still new to glitch and coding in general but have a basic knowledge of HTML & CSS. I’ve been working on stuff here on Glitch (viewable on my profile) using code snippets from codepen and some code I put together. I recently saw a notification announcing glitch-in-bio so I decided to experiment with it.

It seems pretty easy to customize once you get the hang of it but I still have a huge problem because I don’t really understand JS (or JSON) and glitch-in-bio is filled with it. I was thinking of however trying to incorporate it (Glitch-In-Bio) into a page onto a normal website (the code for the page and everything related to it would live in it’s own folder), for example: https://project863.glitch.me/ would be the main site and G-I-B would be on its own page like https://project863.glitch.me/links. How would I do this if it’s possible? (I’m asking because I’d have to update all the code references in the G-I-B page to point to the files in the ‘links’ folder instead of the root directory where it (the files) would have otherwise been.)

Some quick links: Remix - Glitch In Bio | My Profile

@jenn Can you help?

Hi! So Glitch in bio is an app in and of itself, not a simple static page that would be trivial to move to a subdirectory of another project - BUT! if you remove build from the .gitignore file
and refresh the editor of your glitch in bio, you will see the built static files used to create the page (see my own glitch in bio for example. If you put all the contents of build into your project’s /links directory as you want to, then it will live there.

If you want to have the whole development process and vite serving to happen too, I am not sure off the top of my head if that is even feasible without getting into how the rest of the project you’re adding the app to is built. Perhaps someone else in the forum could give some insight there!

4 Likes

Thank you SO much, I was so lost. I am just making a website using HTML, CSS & some occasional JS (if the code is from external sources like CodePen, etc.) so I wasn’t really interested in the Vite nor the development process.

But I do want to compliment you guys for making Glitch-In-Bio so capable as a standalone app. I have a question regarding the social icons (in a normal remix of G-I-B), how would I add icons that aren’t a preset/already available in the app code?

glad i could help!

the icons are set in the file layout/social.html which holds all the if statements that check for social icons mentioned in settings. you can copy one of the if statements, paste it after the last one, and replace the svg or add code to add an image element.

for example, here’s the if statement looking for a stackoverflow icon:

    <!-- ==================== -->
    <!-- Stack Overflow -->
    {{#if settings.social.stackoverflow}}
    <a
      aria-label="{{settings.name}} on Stack Overflow"
      href="{{settings.social.stackoverflow}}"
    >
      <svg
        class="social-profile-icon"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g fill="none">
          <path
            d="M18.372 20.222v-5.358h1.79V22H4v-7.136h1.79v5.358h12.582z"
            fill="currentColor"
          />
          <path
            d="M7.768 14.356l8.79 1.824l.372-1.755L8.14 12.6l-.372 1.756zm1.162-4.157l8.14 3.764l.744-1.617l-8.14-3.787l-.744 1.64zm2.256-3.973l6.907 5.705l1.14-1.363l-6.907-5.704l-1.14 1.362zM15.651 2L14.21 3.062l5.35 7.16L21 9.159L15.651 2zm-8.07 16.42h8.977v-1.778H7.581v1.778z"
            fill="currentColor"
          />
        </g>
      </svg>
    </a>
    {{/if}}

let’s say you want to add an icon for examplewebsite so in your settings.json array for “social” you add "examplewebsite": "https://example.com" - you’ll want to make sure the icon code for settings.social.examplewebsite exists in layout/social.html:

    <!-- ==================== -->
    <!-- replace stackoverflow with examplewebsite -->
    {{#if settings.social.examplewebsite}}
    <a
      aria-label="{{settings.name}} on example website"
      href="{{settings.social.examplewebsite}}"
    >
      <svg
        class="social-profile-icon"
        viewBox="0 0 24 24"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g fill="none">
          <path
            d="M18.372 20.222v-5.358h1.79V22H4v-7.136h1.79v5.358h12.582z"
            fill="currentColor"
          />
          <path
            d="M7.768 14.356l8.79 1.824l.372-1.755L8.14 12.6l-.372 1.756zm1.162-4.157l8.14 3.764l.744-1.617l-8.14-3.787l-.744 1.64zm2.256-3.973l6.907 5.705l1.14-1.363l-6.907-5.704l-1.14 1.362zM15.651 2L14.21 3.062l5.35 7.16L21 9.159L15.651 2zm-8.07 16.42h8.977v-1.778H7.581v1.778z"
            fill="currentColor"
          />
        </g>
      </svg>
    </a>
    {{/if}}

If you don’t have an svg icon to put there, you can upload an image to the glitch app and use that url to add the icon via an img tag instead, but it may get tricky to make the icon fit in with the rest if it’s a .png for example while the rest are svg. hope this sets you in the right direction!

and if you have a social icon request that you’d like to see be part of the official starter, let us know!

1 Like

Thanks for the assistance.

The Discord icon seems like it should be added since it’s becoming a pretty popular platform.

1 Like