Example of Article

The description goes here

example
getting-started

Written by Matteo in Jan 2001

H2 Heading

Lorem ipsum dolor sit amet consectetur adipisicing elit. Error eum in, possimus magnam, commodi modi a sunt maxime corrupti porro nesciunt. Atque porro aspernatur dicta repellendus cumque temporibus blanditiis officia.

H3 Heading

A (responsive) screenshot of the old page hosted at matteos.land

const foo = 'bar';

START ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint nemo voluptatum atque quae quo in eius. Voluptatem saepe repellendus doloribus quia eligendi quam iure voluptatum in non porro. Vero?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident hic culpa sapiente, sequi velit molestias veritatis saepe iste reiciendis delectus eveniet laborum aliquam praesentium doloremque, fugit repellat! Corporis, accusantium id!

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia recusandae aliquam optio harum nesciunt, architecto dignissimos assumenda quia in, distinctio itaque dolorem voluptatibus omnis, possimus nam repellat quis inventore qui END.

Pizza for you, tip for me

Delivering Adventures -- Pizza Guy

astro

/**
 *  An animated banner
 *
 *  text is moving inside a box, from right to left,
 *  it never stops
 */

interface Props {
  messages: string[];
}

const { messages = ['Welcome'] } = Astro.props;
// at least one message ==> lenght >= 1
// when length = 1 reduce will not call callbackfn
const bannerMsg = messages.reduce((accMsgs, msg) => accMsgs + ' -- ' + msg);
const msgLengthCss = `${bannerMsg.length}ch`;
---

<div class="banner">
  <p class="banner-content">
    <span>{bannerMsg}</span>
  </p>
</div>

<!-- todo add a nonce -->
<style define:vars={{ msgLengthCss }}>
  .banner-content {
    width: calc(100% + var(--msgLengthCss));
  }
</style>

<style>
  .banner {
    /* margin dont collapse with overflow hidden */
    overflow: hidden;
    white-space: nowrap;
    background: var(--color-yellow);
    color: var(--color-black);
  } 
  .banner-content {
    /* modify baseline behaviour */
    /* width: calc(100% + 200ch); */
    max-inline-size: none;
    margin: 0;
    text-align: right;
    font-size: var(--size-base-0);
    animation: banner 30s linear -5s infinite;
  }
  @keyframes banner {
    to {
      transform: translateX(-100%);
    }
  }
</style>

START Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint nemo voluptatum atque quae quo in eius. Voluptatem saepe repellendus doloribus quia eligendi quam iure voluptatum in non porro. Vero?

Example of Article

H2 Heading

Toc

H3 Heading