https://github.com/ally-ahmed/tss-blog-starter

A blog/portfolio starter project built with TanStack Start.
https://github.com/ally-ahmed/tss-blog-starter

blog content-collections mdx portfolio react shadcn-ui tailwind-css tanstack tanstack-start template

Last synced: about 7 hours ago
JSON representation

A blog/portfolio starter project built with TanStack Start.

• Host: GitHub
• URL: https://github.com/ally-ahmed/tss-blog-starter
• Owner: ally-ahmed
• License: mit
• Created: 2024-12-20T14:08:49.000Z (23 days ago)
• Default Branch: main
• Last Pushed: 2025-01-11T11:56:38.000Z (about 16 hours ago)
• Last Synced: 2025-01-11T12:33:56.658Z (about 16 hours ago)
• Topics: blog, content-collections, mdx, portfolio, react, shadcn-ui, tailwind-css, tanstack, tanstack-start, template
• Language: TypeScript
• Homepage: https://tss-blog-starter.pages.dev/
• Size: 1.13 MB
• Stars: 10
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# TSS Blog Starter 🏝️

A blog/portfolio starter project built with TanStack Start.

![demo](./demo.png)

## Demo

https://tss-blog-starter.pages.dev/

## Features

- MDX and Markdown support

- Syntax highlighting

- Light/dark mode toggle

- Tailwind CSS

- Custom fonts

- Dynamic OG images (coming soon)

- Font optimisation (coming soon)

## Tech

- [TanStack Start](https://tanstack.com/router/latest/docs/framework/react/guide/tanstack-start#tanstack-start)

- [Tailwind CSS](https://tailwindcss.com)

- [shadcn/ui](https://ui.shadcn.com/)

- [Content Collections](https://www.content-collections.dev/)

## Getting Started

There are two ways of initializing the `tss-blog-starter` app. You can either use this repository as a template or manually clone the app.

### Template

[Use this template](https://github.com/new?template_name=tss-blog-starter&template_owner=ally-ahmed)

### Manually

Clone project

```bash

  git clone [email protected]:ally-ahmed/tss-blog-starter.git

  cd tss-blog-starter

```

Install depndencies

```bash

pnpm install

```

Run app

```bash

pnpm dev

```

## Deployment

Currently using cloudflare as the deployment target in `tss-blog-starter`. To deploy to other targets see [TanStack Start docs on deployment](https://tanstack.com/router/latest/docs/framework/react/start/hosting#deployment).

## Roadmap

- [ ] Finish up `On this page` component

- [ ] Dynamic OG image generation

- [ ] Font optimisation - font change causing cumulative layout shift (CLS)

- [ ] Image optimisation

## Acknowledgements

- [UI inspired by Vercel portfolio blog starter](https://vercel.com/templates/next.js/portfolio-starter-kit)

- [Orc Dev screen size component](https://www.orcdev.com/components/screen-size)

- [shadcn-ui/taxonomy](https://github.com/shadcn-ui/taxonomy/tree/651f984e52edd65d40ccd55e299c1baeea3ff017)

- [antfu/eslint-config](https://github.com/antfu/eslint-config)