Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/erkobridee/astro-ts-tw-hello

Astro Build using TypeScript plus TailwindCSS
https://github.com/erkobridee/astro-ts-tw-hello

astro devcontainer editorconfig eslint gh-pages github-actions postcss prettier tailwindcss template typescript

Last synced: about 1 month ago
JSON representation

Astro Build using TypeScript plus TailwindCSS

Host: GitHub
URL: https://github.com/erkobridee/astro-ts-tw-hello
Owner: erkobridee
Created: 2024-04-22T18:52:15.000Z (7 months ago)
Default Branch: main
Last Pushed: 2024-09-26T12:50:56.000Z (about 2 months ago)
Last Synced: 2024-09-27T09:21:39.700Z (about 2 months ago)
Topics: astro, devcontainer, editorconfig, eslint, gh-pages, github-actions, postcss, prettier, tailwindcss, template, typescript
Language: Astro
Homepage: https://erkobridee.github.io/astro-ts-tw-hello/
Size: 681 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 3
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # astro-ts-tw-hello

[Astro Build](https://astro.build/) using [TypeScript](https://www.typescriptlang.org/) plus [TailwindCSS](https://tailwindcss.com/)

## Local Development

- [VS Code](https://code.visualstudio.com/) + [Development Containers](https://containers.dev/) ( [Customizations](https://containers.dev/supporting#visual-studio-code) | [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) )

  - [[GitHub] erkobridee/devcontainer-hello](https://github.com/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](https://docs.npmjs.com/about-scopes) ) which normally starts with `@{user_name/org_name}`.

So to avoid that I tested the pattern `~/* -> src/*`, inspired on Unix OS, but those 2 caracteres for a lazy person like me it's too much.

So later on, I saw some cases where it's been using the pattern `#* -> src/*` ( [tsconfig.json](/tsconfig.json) ) which avoid the issue from `@`.

## Astro

- [[YouTube] Astro in 100 Seconds | Fireship](https://www.youtube.com/watch?v=dsTXcSeAZq8) ( 2021-07-15 )

- [Astro Docs](https://docs.astro.build/en/getting-started/)

  - [Install and set up Astro](https://docs.astro.build/en/install-and-setup/)

  - [Project Structure | Astro Docs](https://docs.astro.build/en/basics/project-structure/)

  - [Import Aliases | Astro Docs](https://docs.astro.build/en/guides/aliases/)

  - [Markdown & MDX | Astro Docs](https://docs.astro.build/en/guides/markdown-content/)

    - [Configuring Markdown and MDX](https://docs.astro.build/en/guides/markdown-content/#configuring-markdown-and-mdx)

  - [View Transitions | Astro Docs](https://docs.astro.build/en/guides/view-transitions/)

    - [astro:after-swap](https://docs.astro.build/en/guides/view-transitions/#astroafter-swap)

    - [Astro View Transitions | Chrome for Developers](https://developer.chrome.com/blog/astro-view-transitions?hl=en) - [live](https://live-transitions.pages.dev/), [source code](https://github.com/Charca/view-transitions-live)

  - [Deploy your Astro Site to GitHub Pages | Astro Docs](https://docs.astro.build/en/guides/deploy/github/)

    - [[GitHub] withastro/github-pages](https://github.com/withastro/github-pages) - Automatically deploy an Astro site to GitHub Pages

    - [Create gh-pages branch in existing repo | jf](https://jiafulow.github.io/blog/2020/07/09/create-gh-pages-branch-in-existing-repo/)

  - [@astrojs/tailwind](https://docs.astro.build/en/guides/integrations-guide/tailwind/)

### Editor Setup

- [Editor Setup | Astro Docs](https://docs.astro.build/en/editor-setup/)

  - [ESLint](https://docs.astro.build/en/editor-setup/#eslint)

    - [[GitHub] ota-meshi/eslint-plugin-astro](https://github.com/ota-meshi/eslint-plugin-astro)

  - [Prettier](https://docs.astro.build/en/editor-setup/#prettier)

    - [[GitHub] withastro/prettier-plugin-astro](https://github.com/withastro/prettier-plugin-astro)

- [Get VSCode, eslint & prettier working with Astro | Geek's blog](https://patheticgeek.dev/blog/astro-prettier-eslint-vscode) (2023/02/11)

- [Effortless Code Styling: Configuring Astro with Prettier, ESLint, and Tailwind CSS | Raj Vadeghar](https://r44j.dev/blog/beginner-s-guide-to-setting-up-astro-astro-prettier-eslint-tailwind-css/) (2024/03/03)

## Test it online

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/erkobridee/astro-ts-tw-hello)

[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/erkobridee/astro-ts-tw-hello?devcontainer_path=.devcontainer/devcontainer.json)

## Setup a new project using this repository

You can use the `Use this template ` button

### degit

```sh

npx degit erkobridee/astro-ts-tw-hello {project_name}

```

### create a new project based on a GitHub repository’s main branch

```sh

npm create astro@latest -- --template erkobridee/astro-ts-tw-hello

```