Giter Club home page Giter Club logo

astro-nomy's Introduction

Astronomy

An open source application built using the latest features in Astro v4 with shadcn/ui.

blog

Warning This app is a work in progress. I'm building this in public. You can follow the progress on Twitter @miickasmt. See the roadmap below.

About this project

This project as an experiment to see how a modern app (with features like authentication, subscriptions, API routes, Markdown, Content Collections ...etc) would work in Astro v4 and shadcn/ui.

Note I would like to inform you that for the time being, my example app built with Astro.js is still under development and cannot yet be considered a starter template.

Project Structure

├── public/
│   └── fonts/
├── src/
│   ├── components/
│   ├── config/
│   ├── content/
│   ├── hooks/
│   ├── icons/
│   ├── layouts/
│   ├── lib/
│   ├── pages/
│   ├── styles/
│   └── types/
├── astro.config.mjs
├── README.md
├── package.json
├── tailwind.config.cjs
└── tsconfig.json

Features

  • Config files
  • Views Transitions
  • Routing and Layouts
  • React components & hooks
  • UI Components built using shadcn/ui
  • Documentation and blog using MDX and Content Collections
  • Styled using Tailwind CSS
  • Validations using Zod
  • Written in TypeScript
  • 100/100 Lighthouse performance
  • Minimal styling (make it your own!)
  • RSS Feed support
  • Sitemap support
  • Data Fetching
  • API Endpoint

Not implemented yet :

  • SEO component
  • Subscriptions using Lemon Squeezy ?

Roadmap

  • Dark mode
  • Add Markdown & MDX support
  • Sheet mobile nav
  • Build changelog pages
  • Build waitlist with React Hook Form
  • Build newsletter with Simple Form
  • Build animes pages (graphql)
  • Build blog with Astro DB (work on it)
  • Build ecommerce pages (work on it)
  • Build auth/dashboard pages
  • Add search support for blog
  • Add OG image for blog and others
  • Add SEO component & metadata
  • Subscriptions using Stripe (or Lemon Squeezy?)

Running Locally

  1. Install dependencies using pnpm:
pnpm install
  1. Start the development server:
pnpm run dev

Credit

This theme is based off of the example app Taxonomy of shadcn.

License

Licensed under the MIT license.

astro-nomy's People

Contributors

diomed avatar mickasmt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

astro-nomy's Issues

sheet.tsx errors out

src/components/ui/sheet.tsx:18:26 - error ts(2322): Type '{ children?: ReactNode; container?: HTMLElement | null | undefined; forceMount?: true | undefined; className: string; }' is not assignable to type 'IntrinsicAttributes & DialogPortalProps'.
  Property 'className' does not exist on type 'IntrinsicAttributes & DialogPortalProps'.

18   <SheetPrimitive.Portal className={cn(className)} {...props} />
                            ~~~~~~~~~
src/components/ui/sheet.tsx:15:3 - error ts(2339): Property 'className' does not exist on type 'DialogPortalProps'.

15   className,

A question from a beginner 🧐

Why do I need to take the ui with react if then I have to export it to pages, but the point of astro is to optimize more, but because of the addition of react and non-optimizing UI parts, the meaning of using astro in general is lost, since then you can write it all on nextjs. And another question, astro seems to be more like for static, authorization is written in the plans, is it even possible?

how to handle navigation?

I'd appreciate a bit of a guide for navigation.

I dont know how to create new pages in navigation, and would like to do so.
For example, after I create FAQ.astro how to put it in navigation as new navigation menu item, just before About

Reusable Layout Support

Can we extend project to support multiple instances with docs layout

  1. Documentation - Doc Layout
  2. Guides - Doc Layout
  3. Podcast - Blog Layout
  4. Posts - Blog Layout
  5. Articles - Blog Layout
  6. Use Cases - Blog Layout

Similarly, we can extend contents with different layouts simply reusing the concept.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.