Elements

This page demonstrate some basic elements and typography which you will use frequently within your site. Make the text bold or make it italic. Why not bold and italic both at a time. Here is the link to Astro.js website. Do you want to link a long text here how it looks in this theme.

URLs will automatically get turned into links. https://astro.build/.

Heading two

Heading three

Heading four

Heading five
Heading six

Paragraph

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Ordered List

  1. The leap into electronic typesetting
  2. It was popularised in the 1960s
    1. Recently with desktop publishing software
    2. An unknown printer took a galley
      1. Recently with desktop publishing software
      2. An unknown printer took a galley
  3. It has survived not only five centuries
  4. The final item

Unordered List

  • The leap into electronic typesetting
  • It was popularised in the 1960s
    • Recently with desktop publishing software
    • An unknown printer took a galley
      • Recently with desktop publishing software
      • An unknown printer took a galley
  • It has survived not only five centuries
  • The final item

Syntax Highlighting

style.scss
/* form autofill style reset */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}
[...slug].astro
export async function getStaticPaths() {
  const posts: CollectionEntry<"blog">[] = await getCollection("blog");
  const authors: CollectionEntry<"author">[] = await getCollection("author");


  return posts.map((post) => {
    const currentAuthor = authors.find(
      (author) => author.data.title === post.data.author
    );
    return {
      params: { slug: post.slug },
      props: { post, currentAuthor },
    };
  });
}
interface User {
  id: number;
  firstName: string;
  lastName: string;
  role: string;
}


function updateUser(id: number, update: Partial<User>) {
  const user = getUser(id);
  const newUser = { ...user, ...update };
  saveUser(id, newUser);
}

Callout

Callout Support’s Title, Theme and Icon. Also they all can be empty!
Themes are info | warning | success | error.
You can use emoji as icon.
if you keep the icon=""; it will be default icon. and if you didn’t set it; no icon will be shown.
You can use Markdown and HTML both inside callout.

<Callout title="Astro Is Awesome" theme="info" icon="🔥">
  **Create your own platform on the web.** Astro is a tool for building static
  websites with your favorite JS framework. But it will ship zero JavaScript to
  the browser 🤯.
</Callout>

Blockquote

Since its beginning in the 1950s, the field of artificial intelligence has cycled several times between periods of optimistic predictions and investment

Alexender Toto

Image