I want it all

I want it all

🎶 give it all I want it all

I want it all

🎶 yeah

And I want it now

It’s a song by Queen.

Freddy Mercury also wants to make a supersonic man out of you. how rude

More things you can do with this theme

Want to embed tweets? You betcha!

Fancy code blocks

In that article, there is some code, which looks quite nice on this theme, even if I say so myself.

(It’s a pregenerated theme, shhhhhh. I can adjust it, but it already looks real nice.)

const IndexPage = (props) => {
  const allBuildTimeJasons = props.data.JasonAPI.allJasons;
  const { loading, data: apolloData } = useQuery(APOLLO_QUERY);
  const allClientTimeJasons = apolloData.allJasons;
  return (
    <div>
      <h1>Look at all these Jasons!</h1>
      {loading ? (
        <JasonList grayOutWaveCount jasons={allBuildTimeJasons} />
      ) : (
        <JasonList jasons={allClientTimeJasons} />
      )}
    </div>
  );
};

Or a single line?

npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier

Would you prefer it if the copy button wasn’t there? Can do!

npm i eslint

Line highlighting? Got it!

Line 4 is lit. Gettit?

const getShouldHighlightLine = (hl) => {
  if (hl) {
    const lineNumbers = rangeParser(hl);
    return (index) => lineNumbers.includes(index + 1);
  }
  return () => false;
};

Code titles

A section at the top that can hold some text is useful to display the title (or path) of a file for a codeblock.

// ...
let testHorizontalScroll =
  "BEEF BEEF BEEF BEEF BEEF BEEF BEEF BEEF  BEEF BEEF  BEEF BEEF  BEEF BEEF  BEEF BEEF  BEEF BEEF  BEEF BEEF  BEEF BEEF  BEEF BEEF  BEEF BEEF  BEEF BEEF  BEEF BEEF BEEF BEEF ";
const shouldHighlightLine = calculateLinesToHighlight(metastring);
return (
  <Highlight {...defaultProps} code={children} language={language}>
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
      <pre className={className} style={{ ...style }}>
        {tokens.map((line, index) => {
          const lineProps = getLineProps({ line, key: index });
          if (shouldHighlightLine(index)) {
            lineProps.className = `${lineProps.className} highlight-line`;
          }
          return (
            <div key={index} {...lineProps}>
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token, key })} />
              ))}
            </div>
          );
        })}
      </pre>
    )}
  </Highlight>
);

Line numbering

1exports.slugify = (str) => {
2  const slug = str
3    .toLowerCase()
4    .replace(/[^a-z0-9]+/g, `-`)
5    .replace(/(^-|-\$)+/g, ``);
6  return slug;
7};

Everything at the same time

The line numbering can start at an arbitrary number!

42a {
43  color: #dfe5f3;
44  text-decoration: none;
45  background-image: linear-gradient(#222b40, #222b40), linear-gradient(
46      rgb(176, 251, 188),
47      rgb(176, 251, 188)
48    ), linear-gradient(#feb2b2, #feb2b2);
49  background-size: 20px 2px, 100% 2px, 0 2px;
50  background-position: calc(20px * -1) 100%, 100% 100%, 0 100%;
51  background-repeat: no-repeat;
52  transition: background-size 2s linear, background-position 2s linear;
53}
54
55a:hover {
56  background-size: 20px 2px, 0 2px, 100% 2px;
57  background-position: calc(100% + 20px) 100%, 100% 100%, 0 100%;
58}

Useful knowledge

Use the force Harry -Gandalf

Let us also not forget these words of wisdom.

I wish people would stop misquoting me -Albert Einstein

Barney Stinson has a foolproof method he applies whenever he gets sad.

• Stop being sad.
• Be awesome instead.

Written diffently that becomes: be sad be awesome

1. an
2. ordered
3. list
4. sorry
5. no
6. puns
7. here
8. ??
9. profit

Shed your bikes, let sleeping dogs lie

Should we use let or const?
Neither, var4lyfe

Puppies

Look at this doggo.

Puppy Ipsum

Puppy kitty ipsum dolor sit good dog foot stick canary. Teeth Mittens grooming vaccine walk swimming nest good boy furry tongue heel furry treats fish. Cage run fast kitten dinnertime ball run foot park fleas throw house train licks stick dinnertime window. Yawn litter fish yawn toy pet gate throw Buddy kitty wag tail ball groom crate ferret heel wet nose Rover toys pet supplies. Bird Food treats tongue lick teeth ferret litter box slobbery litter box crate bird small animals yawn small animals shake slobber gimme five toys polydactyl meow. Turtle cage lazy cat foot lazy cat groom canary window tooth brush bedding lazy cat pet supplies turtle water dog shake pet supplies kitty. Walk bird harness wet nose meow harness grooming water dog lol catz water bedding toys bird seed fetch lazy cat. Parakeet scratcher brush biscuit lick dog tooth walk food lazy cat biscuit. Cockatiel Snowball kitten Rover ferret puppy.

Pet Food pet supplies gimme five puppy cage food feathers food heel feathers running pet gate walk lazy dog Spike. Good Boy park lazy dog walk kibble Scooby snacks licks canary. Maine Coon Cat walk catch water dog slobber chew scratcher ID tag litter tuxedo dog house lazy cat park. Dinnertime fetch throw feathers fleas tongue lazy cat lick throw kitten parrot hamster wag tail aquarium chew heel good boy lick feathers cockatiel. Wet Nose food ferret vaccine finch vaccination Scooby snacks string wagging barky tail head good boy pet gate meow good boy. Commands shake bird biscuit left paw finch bark ferret bark gimme five turtle fur canary. Water puppy dog lick kisses pet supplies slobber cat bird seed. Food sit biscuit groom tongue cage.

Play Dead sit nap lazy dog wet nose Tigger run fast fish lazy cat wagging hamster toy field yawn feathers ferret yawn aquarium.Feathers bird seed food scratcher mouse running teeth licks heel walk pet gate maine coon cat collar twine parakeet. Roll Over kitty barky critters litter stick window litter box wagging field toy. Whiskers harness biscuit food lick small animals throw meow house train. Bedding field hamster small animals carrier polydactyl groom vaccine. Commands running gimme five groom slobber run fast head ball litter box biscuit catch run fast roll over. Roll Over litter box tabby pet slobbery play dead kitty roll over small animals barky good boy string kitty fish licks teeth chew drool. ID Tag barky lick parakeet wet nose ball walk tabby wag tail chirp nest. Spike bird seed water teeth leash ball. Crate pet food stripes carrier drool slobbery tabby dog puppy birds walk roll over bird food Mittens pet supplies.

Corgi Ipsum

Lorem ipsum dolor sit amet spike house train litter vaccination swimming purr kitten wet nose bird food. Puppy carrier purr whiskers fur litter licks wagging vitamins foot good boy Rover swimming. Mouse swimming small animals run fast house train bird food fetch. Harness tabby kitten parakeet litter dragging food. Ball biscuit toy water dog vaccination finch dog house grooming throw furry feathers aquarium tail stripes. Cockatiel fetch field fetch brush tooth hamster bed kitty ferret gimme five stay dinnertime catch warm.

Link in a header

It’s my twitter! Like, follow, and subscribe! Oh wait, that’s YouTube. Only follow, then.

I can haz maths

While it does not come standard in the theme, you can add some internal plugins to add functionality. This demo uses some plugins to support KaTeX.

$a$ = first item
$l$ = last item
$n$ = amount of items
$d$ = common difference

Some inline math, coming right up. $T_n = a + (n-1)d$

Time for a math block, have the formula to calculate the sum of an arithmetic progression: