Thursday, March 28, 2024
HomeRuby On RailsIncluding customized HTML and CSS to GitHub README

Including customized HTML and CSS to GitHub README



Abstract art
Lucas Kapla on Unsplash

Are you bored with the identical previous, usual private GitHub profile README? Or are you simply on the lookout for inspiration on what to do with your individual? Nice, you discover a good put up that can present how one can go above and past to what’s supplied when styling your private README.

GitHub Profile README

Earlier than we begin, what’s a GitHub profile README in any respect?

As of July 2020, GitHub permits you to create a repository with the identical title as your username and use its README so as to add some persona to your web page.

You’ve most likely seen numerous these with numerous information in them. A few of them are neat wanting. A few of them are full of knowledge. However nearly all of them encompass:

  • Intro concerning the person and their profession orientation
  • Presumably some programming languages they know or use
  • Then yow will discover a bunch of “add-ons” or “feeds” of some kinds
    • You possibly can join your GitHub README with Spotify, your weblog, or nearly something that has an RSS feed after which present it on the README
    • You possibly can present your GitHub stats – PRs merged, commits pushed, your GitHub contributions, contribution streaks and so on.
    • A few of them even have GIFs, photos, and so forth.

However in the present day, I’ll present you one thing else.

I’ll present you add any HTML web page you need and “embed” it contained in the README. We’ll obtain this by including customized HTML and CSS inside an SVG file.

Customized CSS and HTML in an SVG

GitHub helps including HTML in Markdown, however it’s fairly aggressive when eradicating HTML that may be doubtlessly harmful to customers. Issues like scripts, iframes, and comparable will get eliminated or “silenced” to keep away from malicious content material from being served to customers.

Fortunately, there’s one option to sneak in some HTML (or an internet web page) contained in the README. You are able to do it by way of SVG and foreignObject SVG aspect. Let’s see do it.

First, create SVG file in your favourite editor like good day.svg:

<svg fill="none" viewBox="0 0 600 300" width="600" top="300" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" top="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <type>
        .container {
          show: flex;
          width: 100%;
          top: 300px;
          background-color: black;
          coloration: white;
        }
      </type>

      <div class="container">
        <h1>Hello there, my title is Nikola 👋</h1>
      </div>
    </div>
  </foreignObject>
</svg>

Superior, if you happen to open it, it ought to appear to be this:

An SVG file with basic styles

Fairly fundamental, nothing too fancy. What’s necessary to notice right here is that it’s
attainable so as to add CSS and HTML inside an SVG, and it’ll work properly. Additionally, discover the
type block. Proper now, it solely units the background coloration. Come on, let’s push it
additional.

<svg fill="none" viewBox="0 0 600 300" width="600" top="300" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" top="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <type>
        @keyframes hello  {
            0% { remodel: rotate( 0.0deg) }
           10% { remodel: rotate(14.0deg) }
           20% { remodel: rotate(-8.0deg) }
           30% { remodel: rotate(14.0deg) }
           40% { remodel: rotate(-4.0deg) }
           50% { remodel: rotate(10.0deg) }
           60% { remodel: rotate( 0.0deg) }
          100% { remodel: rotate( 0.0deg) }
        }

        .container {
          background-color: black;

          width: 100%;
          top: 300px;

          show: flex;
          justify-content: heart;
          align-items: heart;
          coloration: white;

          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Colour Emoji", "Segoe UI Emoji", "Segoe UI Image";
        }

        .hello {
          animation: hello 1.5s linear -0.5s infinite;
          show: inline-block;
          transform-origin: 70% 70%;
        }

        @media (prefers-reduced-motion) {
          .hello {
            animation: none;
          }
        }
      </type>

      <div class="container">
        <h1>Hello there, my title is Nikola <div class="hello">👋</div></h1>
      </div>
    </div>
  </foreignObject>
</svg>

Right here’s the way it ought to look:

Complex hello inside an SVG

The brand new modifications add a bit of favor to the entire picture. The textual content is centered and the font modified. Additionally, the emoji hand is waving to us. We additionally used the prefers-reduced-motion CSS rule to show off animations in case customers choose it that approach. So, if don’t see the animations inside photos, ensure that your accessibility choices enable movement or animations. Right here’s a information on toggle movement/animations on a system stage.

Nice, let’s make our SVG even fancier.

<svg fill="none" viewBox="0 0 600 300" width="600" top="300" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" top="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <type>
        @keyframes hello  {
            0% { remodel: rotate( 0.0deg) }
           10% { remodel: rotate(14.0deg) }
           20% { remodel: rotate(-8.0deg) }
           30% { remodel: rotate(14.0deg) }
           40% { remodel: rotate(-4.0deg) }
           50% { remodel: rotate(10.0deg) }
           60% { remodel: rotate( 0.0deg) }
          100% { remodel: rotate( 0.0deg) }
        }

        @keyframes gradient {
          0% {
            background-position: 0% 50%;
          }
          50% {
            background-position: 100% 50%;
          }
          100% {
            background-position: 0% 50%;
          }
        }

        .container {
          background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
          background-size: 400% 400%;
          animation: gradient 15s ease infinite;

          width: 100%;
          top: 300px;

          show: flex;
          justify-content: heart;
          align-items: heart;
          coloration: white;

          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Colour Emoji", "Segoe UI Emoji", "Segoe UI Image";
        }

        .hello {
          animation: hello 1.5s linear -0.5s infinite;
          show: inline-block;
          transform-origin: 70% 70%;
        }

        @media (prefers-reduced-motion) {
          .container {
            animation: none;
          }

          .hello {
            animation: none;
          }
        }
      </type>

      <div class="container">
        <h1>Hello there, my title is Nikola <div class="hello">👋</div></h1>
      </div>
    </div>
  </foreignObject>
</svg>

Let’s see what we did:

Fancy animation

Now, the picture has its background animated. Virtually able to be showcased on a GitHub README. Let’s take it a step additional. We’re going to use the prefers-color-scheme CSS rule to help mild and darkish modes. That is do it:

<svg fill="none" viewBox="0 0 600 300" width="600" top="300" xmlns="http://www.w3.org/2000/svg">
  <foreignObject width="100%" top="100%">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <type>
        @keyframes hello  {
            0% { remodel: rotate( 0.0deg) }
           10% { remodel: rotate(14.0deg) }
           20% { remodel: rotate(-8.0deg) }
           30% { remodel: rotate(14.0deg) }
           40% { remodel: rotate(-4.0deg) }
           50% { remodel: rotate(10.0deg) }
           60% { remodel: rotate( 0.0deg) }
          100% { remodel: rotate( 0.0deg) }
        }

        @keyframes gradient {
          0% {
            background-position: 0% 50%;
          }
          50% {
            background-position: 100% 50%;
          }
          100% {
            background-position: 0% 50%;
          }
        }

        .container {
          --color-main: #5452ee;
          --color-primary: #e73c7e;
          --color-secondary: #23a6d5;
          --color-tertiary: #ffff;

          background: linear-gradient(-45deg, var(--color-main), var(--color-primary), var(--color-secondary), var(--color-tertiary));
          background-size: 400% 400%;
          animation: gradient 15s ease infinite;

          width: 100%;
          top: 300px;

          show: flex;
          justify-content: heart;
          align-items: heart;
          coloration: white;

          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Colour Emoji", "Segoe UI Emoji", "Segoe UI Image";
        }

        .hello {
          animation: hello 1.5s linear -0.5s infinite;
          show: inline-block;
          transform-origin: 70% 70%;
        }

        @media (prefers-color-scheme: mild) {
          .container {
            --color-main: #F15BB5;
            --color-primary: #24b0ef;
            --color-secondary: #4526f6;
            --color-tertiary: #f6f645;
          }
        }

        @media (prefers-reduced-motion) {
          .container {
            animation: none;
          }

          .hello {
            animation: none;
          }
        }
      </type>

      <div class="container">
        <h1>Hello there, my title is Nikola <div class="hello">👋</div></h1>
      </div>
    </div>
  </foreignObject>
</svgg

Right here’s the ultimate model (professional tip: toggle your system’s coloration scheme to see the gradient change):

Animated SVG changing color based on color scheme

And right here’s the way it modifications relying on the colour scheme:

SVG changing color when color scheme changes

What we did is the next:

.container {
  --color-main: #ef476f;
  --color-primary: #ffd166;
  --color-secondary: #06d6a0;
  --color-tertiary: #118ab2;

  background: linear-gradient(
    -45deg,
    var(--color-main),
    var(--color-primary),
    var(--color-secondary),
    var(--color-tertiary)
  );

  //...
}

@media (prefers-color-scheme: mild) {
  .container {
    --color-main: #ffc8dd;
    --color-primary: #ffafcc;
    --color-secondary: #bde0fe;
    --color-tertiary: #a2d2ff;
  }
}

Now, when a person has a light-weight variant of a coloration scheme, one other set of colours will get utilized to the gradient.

You have to be asking now – how do I render the newly created SVG? Glad you requested – let’s bounce into the subsequent part the place we’ll be taught that.

Render SVG inside GitHub README

You should use the usual Markdown syntax for rendering a picture like ![Image alt text](hello-animated.svg).

To point out an SVG picture in full width of a README on GitHub, you may render it like so:

<div type="width: 100%;">
  <img src="animated.svg" type="width: 100%;" alt="Click on to see the supply">
</div>

This makes positive that the width of an SVG is 100% of the width of the Markdown file so it reveals up properly.

Render native README recordsdata earlier than pushing to GitHub

To make certain every thing is working correctly earlier than you push to GitHub, you should use a cool device referred to as grip. The grip is a CLI device written in Python and it makes use of the GitHub API to render your Markdown recordsdata. I put in it shortly with brew set up grip and you’ll run it by simply typing grip contained in the repo with .md recordsdata after which urgent enter. It would then run a server along with your Markdown recordsdata.

I made a decision to make use of grip as a result of I needed to check these SVGs on my cell phone on the native community. If you wish to do this otherwise you’re simply fascinated by do it, I wrote a weblog put up on preview a localhost web site on a cell phone.

To have the ability to preview the README file in your cell, I ran grip like so:

Now that we all know preview README recordsdata with out pushing them to GitHub, let’s see a respiratory and residing instance within the wild.

Actual-world instance

I pimped out my GitHub profile in the identical approach we went via within the above sections. You possibly can test it out beneath:

nikolalsvk's GitHub profile README

Right here’s the hyperlink to my GitHub profile repo and the precise SVG file that’s rendered there.

I additionally created one other repo with all of the SVGs that we constructed in the present day, have a look right here.

Sum up

We went via create a easy HTML and CSS inside SVG, to totally animate and alter CSS guidelines based mostly on the person’s coloration scheme. We additionally noticed render the SVG file correctly within the Markdown file on GitHub. You are actually able to pimp out your GitHub READMEs. Go loopy!

Thanks for becoming a member of and studying. I hope this helps and/or evokes you to create one thing.

Till the subsequent one, cheers.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments