PaulPetty.com
Back to projects
•
3 min read
This website

I wanted to use a static site generator that supported MDX, documentation (and maybe demos). Astro checks the box on that & I started with Astro Nano created by Mark Horn.

Astro Nano:

demoURL: “https://astro-nano-demo.vercel.app” repoURL: “https://github.com/markhorn-dev/astro-nano”

MDX is largely an extension of markdown with the ability to import .astro, .jsx, .tsx and other framework components you have integrated.

I’ve made very few changes to Nano out of the box … but they include:

A custom component for embedding Codepens:

<CodePen id="jEbvgoP" defaultTabs="result" />

Syntax Highlighting (to match a Codepen embed theme I created):

My CodePen:

See the Pen

CodePen vs astro-code syntax hightlighting:

const links = document.querySelectorAll('a')

links.forEach(a => {
    console.log('link', a)
})
// demo css

body {
  padding: 20px;
}

nav {
  display: flex;
  margin: 2px;
}

nav a {
  display: grid;
  padding: 12px;
  font-size: 30px;
  line-height: 45px;
  white-space: nowrap;

  &:not(:last-of-type) {
    border-right: 1px solid black;
  }
}

// pertinent css

.restricted-width {
  width: 900px;
  max-width: 100%;
  border: 1px solid black;
  overflow-y: hidden;
  overflow-x: auto;
  background-color: transparent;
  margin: auto;
}

.horizontal-nav {
  border-bottom: 2px solid red;
}

.scroll-shadow-for-reaching-the-ends {
    background-attachment: local, local, scroll, scroll;
    background-color: #fff;
    background-image: linear-gradient(90deg, #fff, #fff),
                      linear-gradient(90deg, #fff, #fff),
                      linear-gradient(90deg, rgba(0, 0, 20, .666), hsla(0, 0%, 100%, 0)),
                      linear-gradient(270deg, rgba(0, 0, 20, .666), hsla(0, 0%, 100%, 0));
    background-position: 0, 100%, 0, 100%;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 40px 100%, 40px 100%;
    margin-bottom: 20px;

    transition: all 500ms ease-in-out;
}
 <div class="restricted-width scroll-shadow-for-reaching-the-ends">

  <div class="horizontal-nav">

    <nav>

      <a href="#">
        home
      </a>

      <a href="#">
        news
      </a>

      <a href="#">
        sports
      </a>

      <a href="#">
        tv
      </a>

      <a href="#">
        radio
      </a>

      <a href="#">
        about
      </a>

      <a href="#">
        privacy policy
      </a>

      <a href="#">
        terms of service
      </a>

    </nav>

  </div>

</div>

<p>

  This demo shows uses CSS to indicate with a shadow (background-image using linear-gradients) that the content of an element can be scrolled or swiped side to side.

</p>