Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benjamincharity/remix-vite-markdown-pwa
A RemixJS starter template focused on performance, offering dynamic content, optimized loading, and PWA features for efficient, high-speed blogging.
https://github.com/benjamincharity/remix-vite-markdown-pwa
Last synced: 2 months ago
JSON representation
A RemixJS starter template focused on performance, offering dynamic content, optimized loading, and PWA features for efficient, high-speed blogging.
- Host: GitHub
- URL: https://github.com/benjamincharity/remix-vite-markdown-pwa
- Owner: benjamincharity
- License: mit
- Created: 2024-02-15T17:23:08.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-22T12:48:31.000Z (11 months ago)
- Last Synced: 2024-10-28T14:22:32.850Z (4 months ago)
- Language: TypeScript
- Homepage: https://remix-vite-markdown-pwa.vercel.app
- Size: 5.2 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# remix-vite-markdown-pwa






Welcome to Remix Vite Markdown PWA, a feature-rich template designed to
streamline your markdown-based blog or web-app experience while ensuring
top-notch performance, accessibility, and user experience. Below is an overview
of the key features and functionalities offered by this template:- [Key Features](#key-features)
- [Getting Started](#getting-started)
- [FAQ](#faq)
- [I am getting an error when I run `npm run dev`](#i-am-getting-an-error-when-i-run-npm-run-dev)
- [How can I update the PWA images?](#how-can-i-update-the-pwa-images)
- [Do I need to use Tailwind CSS?](#do-i-need-to-use-tailwind-css)## Key Features
### 🔄 Dynamically Built Posts and Tags List
Say goodbye to manual management of your posts and tags list. Our template
dynamically generates these lists, saving you time and effort.### ⬇️ Load More Pagination
Choose between infinite scroll or click-to-load-more pagination options to
enhance user experience and navigation on your site.### 📱 Progressive Web App (PWA) Support
Transform your website into a PWA, allowing users to enjoy a native app-like
experience, including offline access and push notifications.### 🏆 Perfect Lighthouse Score
Achieve a flawless Lighthouse score across all categories, ensuring optimal
performance, accessibility, best practices, and SEO.### ⚡ CSS Injected to Initial Payload
Optimize loading times by injecting CSS into the initial payload, enhancing the
rendering speed of your website.### ⏩ Preload Most Recent Articles
Improve user experience by preloading the most recent articles, reducing latency
and ensuring swift access to content.### 🛑 Reduced Motion Mode Support
Cater to users with motion sensitivity by providing support for reduced motion
mode, enhancing accessibility and inclusivity.### 🛠️ Full Control Over Markdown Compilation Pipeline
Enjoy complete control over your markdown compilation pipeline using unified and
re-hype, allowing for semantic table output, responsive image rendering, code
highlighting, GitHub flavor support, Codepen embeds, deep linking, reading time
calculation, and more.### 🎨 Tailwind CSS Integration
Integrate Tailwind CSS seamlessly into your project, though you may encounter a
recompilation issue in development mode. Detailed instructions are provided to
address this concern, and removing Tailwind CSS is made easy if needed.### 🌈 Bulletproof Color Mode Support
Offer users a customizable color mode preference, with settings stored locally
via cookies, ensuring a personalized browsing experience.### 📡 RSS Feed and Sitemap Support
Enhance discoverability and SEO by providing RSS feed and sitemap support for
your website.### 🔗 Local Link Support and Full Meta-Data Support
Facilitate smooth navigation with local link support and ensure optimal sharing
on social platforms with full meta-data support, including custom images per
post.### ✂️ Prettier with Import Sorting
Maintain clean and organized code with Prettier and ESLint integration,
including import sorting for improved readability and maintainability.### 🚀 Ready-to-Deploy to Vercel or Netlify
Deploy your website effortlessly to Vercel or Netlify, leveraging their robust
hosting solutions for optimal performance and scalability.## Getting Started
To get started with Remix Vite Markdown PWA, follow these steps:
1. Clone this repository.
2. Install dependencies using `pnpm install`.
3. Customize your content and configurations as needed.
1. Update the `siteMetadata` object in
[`app/data/siteMetadata.ts`](app/data/siteMetadata.ts) with your site's
information.
2. Update the `config` object in [`app/config.ts`](app/config.ts) to adjust
site-wide settings. (Number of posts to preload, pagination settings,
etc.)
3. Update the
[`app/routes/manifest[.]webmanifest.ts`](app/routes/manifest[.]webmanifest.ts)
to customize your PWA settings.
4. Replace the images in the `public/images/pwa` folder with your own PWA
images. (See the FAQ for some helpful tools.)
5. If needed, you can customize the MDX processing pipeline in
[`app/utils/mdxProcessor.server.tsx`](app/utils/mdxProcessor.server.tsx).
4. Deploy your website to your preferred hosting platform.---
If you have any questions or need further assistance, please don't hesitate to
reach out or
[open an issue](https://github.com/benjamincharity/remix-vite-markdown-pwa/issues)
on GitHub!## FAQ
### I am getting an error when I run `npm run dev`
```
can not read a block mapping entry; a multiline key may not be an implicit key at line 2, column 8:
```Check your yaml file for any syntax errors. This error is usually caused by
unescaped quotes.### How can I update the PWA images?
Generate the images using
[Real Favicon Generator](https://realfavicongenerator.net/), then replace the
images in the `public/images/pwa` folder.There is also a CLI tool called
[pwa-asset-generator](https://github.com/elegantapp/pwa-asset-generator)### Do I need to use Tailwind CSS?
No, you don't need to use Tailwind CSS. If you don't want to use it, you can
remove it by following these steps:1. Remove the `tailwind.config.js` file.
2. Remove any `tailwind` related items from `app/styles/shared.css`.
3. Remove any `tailwind` related items from `package.json` scripts.
4. Uninstall `tailwind` items:
`pnpm remove tailwindcss prettier-plugin-tailwindcss`.See: https://remix.run/docs/en/main/styling/tailwind