astro-ts-tw-svelte

• Project template: [GitHub] erkobridee/astro-ts-tw-hello

Local Development

• VS Code + Development Containers ( Customizations | VS Code Extension )

  • [GitHub] erkobridee/devcontainer-hello - Learning about Development Containers

import path alias

It's commonly used the pattern @* -> src/*, but this approach annoys me due to the current npm package namespaces ( scopes | npm docs ) which normally starts with @{user_name/org_name}.

Following a Unix OS approach, that beens said so we have the following alias mapping ~/* -> src/* ( tsconfig.json ) which avoid the issue from @.

Astro

• [YouTube] Astro in 100 Seconds | Fireship ( 2021-07-15 )

• Astro Docs

  • Install and set up Astro

  • Project Structure | Astro Docs

  • Import Aliases | Astro Docs

  • Markdown & MDX | Astro Docs

    • Configuring Markdown and MDX

  • View Transitions | Astro Docs

    • astro:after-swap

    • Astro View Transitions | Chrome for Developers - live, source code

  • Deploy your Astro Site to GitHub Pages | Astro Docs

    • [GitHub] withastro/github-pages - Automatically deploy an Astro site to GitHub Pages

    • Create gh-pages branch in existing repo | jf

  • Svelte integration with Astro | Astro Docs - @astrojs/svelte@5 to use the Svelte v4

    • Svelte v4

      • TypeScript | Svelte v4 Docs

      • Svelte: Components with Typed Props | Daaang Amy

      • [StackOverflow] Svelte - Extend standard html elements with typescript

  • [Deprecated] @astrojs/tailwind

    • Tailwind 4 support >>> Astro TailwindCSS Integration >>> Install Tailwind CSS v4 with Astro

    • [GitHub] tailwindlabs/tailwindcss-typography - Beautiful typographic defaults for HTML you don't control.

  • Components | Astro Docs

    • Template expressions reference | Astro Docs

    • Write in Astro: the syntax ✍️ | DEV Community

    • Astro if...else statements | Future Web Design

Editor Setup

• Editor Setup | Astro Docs

  • ESLint

    • [GitHub] ota-meshi/eslint-plugin-astro

  • Prettier

    • [GitHub] withastro/prettier-plugin-astro

• Get VSCode, eslint & prettier working with Astro | Geek's blog (2023/02/11)

• Effortless Code Styling: Configuring Astro with Prettier, ESLint, and Tailwind CSS | Raj Vadeghar (2024/03/03)