Need to learn AFAP

Jia-Rou Stille

Things in the Tutorial that I'm skipping temporarily.

The Astro logo on a dark background with a purple gradient arc.

tutorial, page 2

---
const happy = true;
const finished = false;
const goal = 3;
---
{happy && <p>I am happy to be learning Astro!</p>}
{finished && <p>I finished this tutorial!</p>}
{goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}

What is “refractor”?

Responsive CSS…

Inline Scripts

Things I’m using but don’t understand

const { variableHere } = Astro.props;
{allPosts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
---
import Base from '../layouts/Base.astro'
const allPosts = Object.values(import.meta.glob('./posts/*.md', { eager: true }));
const pageTitle = "My Astro Learning Blog";
import Post from '../components/Post.astro';
---
<Base pageTitle={pageTitle}>
  <p>This is where I will post about my journey learning Astro.</p>
  {allPosts.map((post: any) => <Post url={post.url} title={post.frontmatter.title} />)}
</Base>

Whatever this is:

export async function getStaticPaths() {
  const allPosts = Object.values(import.meta.glob('../posts/*.md', { eager: true }));

  const uniqueTags = [...new Set(allPosts.map((post: any) => post.frontmatter.tags).flat())];

  return uniqueTags.map((tag) => {
    const filteredPosts = allPosts.filter((post: any) => post.frontmatter.tags.includes(tag));
    return {
      params: { tag },
      props: { posts: filteredPosts },
    };
  });
}

This /tutorial/6-islands/1/

YAY! Done >w<