npm package: @sebaofficial/svelte-qwer
Description: <p align="right"><strong>English</strong> | <a href="https://github.com/SebaOfficial/svelte-QWER/blob/main/README-zh.md">中文</a></p>
Author: Sebastiano Racca
Latest version: 0.13.4

<p align="right"><strong>English</strong> | <a href="https://github.com/SebaOfficial/svelte-QWER/blob/main/README-zh.md">中文</a></p>

<p align="center">
<a href="https://svelte-qwer.vercel.app/"><img src=https://raw.githubusercontent.com/kwchang0831/svelte-QWER/main/user/assets/avatar.png width=96 hieght=96 style="border-radius: 9999px; object-fit: cover;" /></a>
</p>

<h1 align="center">QWER</h1>

<p align="center">
Simply Awesome <b>Blog Starter</b> built with <b>SvelteKit</b> and <b>❤</b>
</p>

<p align="center"><img src="https://img.shields.io/github/languages/top/SebaOfficial/svelte-QWER?color=%23ff3e00&logo=Svelte" alt="Language" />
<a href="https://github.com/SebaOfficial/svelte-QWER/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/SebaOfficial/svelte-QWER" alt="License"></a>
<a href="https://github.com/SebaOfficial/svelte-QWER/blob/main/CHANGELOG.md"><img src="https://img.shields.io/badge/CHANGELOG-svelte--QWER-lightgreen?logo=Keep a Changelog" alt="svelte-QWER"></a>
<a href="https://github.com/SebaOfficial/svelte-QWER/blob/main/QWER/CHANGELOG.md"><img src="https://img.shields.io/badge/CHANGELOG-QWER-lightgreen?logo=Keep a Changelog" alt="QWER"></a>
</p>

<p align="center">
<a href="https://svelte-qwer.vercel.app/"><img src="https://img.shields.io/badge/🚀 DEMO-Vercel-informational?style=for-the-badge" alt="QWER Vercel DEMO">
</a><a href="https://svelte-qwer.netlify.app/"><img src="https://img.shields.io/badge/🚀 DEMO-Netlify-informational?style=for-the-badge" alt="QWER Netlify DEMO"></a>
</a><a href="https://qwer.racca.me/"><img src="https://img.shields.io/badge/🚀DEMO-Github%20Pages-informational?style=for-the-badge" alt="QWER Github Pages DEMO"></a>
</p>
<p align="center">
<a href="https://github.com/kwchang0831/svelte-QWER/discussions/categories/q-a"><img src="https://img.shields.io/badge/💬 Discussion-Q&A-informational?style=for-the-badge" alt="QWER Q&A"></a>
<a href="https://docs-svelte-qwer.vercel.app/"><img src="https://img.shields.io/badge/📝 Documentation-DOCS-informational?style=for-the-badge" alt="QWER DOCS"></a>
</p>

<p align="center"><a href="https://pagespeed.web.dev/report?url=https%3A%2F%2Fqwer.racca.me%2F&form_factor=desktop"><img style="float:middle" width="auto" alt="PAGESPEED" src="https://raw.githubusercontent.com/gist/kwchang0831/acd18fa5e12de9be28a34617beffe5de/raw/metrics.pagespeed.svg"></a></p>

## 🎉 Try [QWER](https://github.com/SebaOfficial/svelte-QWER/) out

```bash
npx degit sebaofficial/svelte-QWER my-blog
```

<p align="center"><a href="https://svelte-qwer.vercel.app"><img src="https://raw.githubusercontent.com/kwchang0831/svelte-QWER/main/user/assets/preview.webp" alt="https://raw.githubusercontent.com/kwchang0831/svelte-QWER/main/user/assets/mobile-preview.webp" /></a></p>
<br/>
<p align="center"><a href="https://svelte-qwer.vercel.app"><img src="https://raw.githubusercontent.com/kwchang0831/svelte-QWER/main/user/assets/mobile-preview.webp" alt="https://raw.githubusercontent.com/kwchang0831/svelte-QWER/main/user/assets/mobile-preview.webp" /></a></p>

## ⚡️ Usage

1. Get [npm v18.x](https://nodejs.org/en/blog/release/v18.17.0)

1. Get [pnpm](https://github.com/pnpm/pnpm).

   ```bash
   npm i -g pnpm
   ```

1. Install all the dependencies.

   ```bash
   pnpm i
   ```

1. Run local dev server.

   ```bash
   pnpm dev
   ```

1. Create an article folder (For Windows users, make sure to use a terminal that supports Bash scripts, such as Git Bash).

   ```bash
   pnpm run createblog YOURDIRNAME

   ```

## ✨ Features

- ⚡ Super fast site performance. Near **Perfect** [PageSpeed](https://pagespeed.web.dev/) score.

- 🤗 SEO ready with meta, [Open Graph](https://ogp.me/), [Schema](https://schema.org/), [JSON-LD](https://json-ld.org/), [microformats2](https://indieweb.org/microformats2).

- 🔎 On-site Search.

- 📱 Mobile-First / Responsive design.

- ✍️ Write post with [Markdown syntax](https://www.markdownguide.org/basic-syntax/).

- 🧮 🧪 Write Math and Chemical formulas with [TeX Syntax](https://www.math.brown.edu/johsilve/ReferenceCards/TeXRefCard.v1.5.pdf) via [Katex](https://katex.org/) & [mhchem](https://mhchem.github.io/MathJax-mhchem/).

- 📁 Folder-based organization for creating posts.

- 🏷️ Multi-Tags filtering.

- 📄 Auto-Generate Table of Content for posts.

- 📦 Out-of-the-box support for [Atom feed](https://validator.w3.org/feed/docs/atom.html), Sitemap, [PWA](https://web.dev/progressive-web-apps/), [JSON Feed](https://www.jsonfeed.org/).

- 🖼️ Automatic image optimization via [vite-imagetools](https://github.com/JonasKruckenberg/imagetools).

- ⚙️ Support embedding Svelte components and Javascript with Markdown.

- 💬 Supports [Giscus](https://github.com/giscus/giscus) - a comments system powerd by Github Discussions.

- 💄 Utilizes [UnoCSS](https://github.com/unocss/unocss) - the instant on-demand atomic CSS engine.

- 🌐 i18n via [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n).

- 🚀 Deploy the blog **Free** on [Vercel](https://vercel.com/), [Netlify](https://Netlify.com/), or [Cloudflare Pages](https://pages.cloudflare.com/).

## 📚 Learn More

Please read our [Documentation](https://docs-svelte-qwer.vercel.app/).

## 👷 Current State

[QWER](https://github.com/kwchang0831/svelte-QWER) is at its' very early stage. Kindly expect frequent breaking changes.

Just copy and paste your `user` folder to the latest release.

Watch out for the CHANGELOG to see if yor are required to migrate `user/config` or other places.

## ❓ Issues / Problems / Questions

Please take advantage of our [Github's Q&A Discussion board](https://github.com/kwchang0831/svelte-QWER/discussions/categories/q-a).

## 😊 Are you using QWER?

Please consider adding `svelte-qwer` topic to your repository.

To see who else are using QWER, please check [Github-Topics: svelte-qwer](https://github.com/topics/svelte-qwer).

## 🎉 Support

<div class="flex" style="display:inline-block; font-size: 24px; --un-bg-opacity: 1; background-color: rgba(255, 221, 0); border-radius: 0.5rem; padding: 12px 18px; border: 2px solid;">
<a class="flex"  href="https://www.buymeacoffee.com/sebadev" style="color: black;" >
<span>🥓</span>
<span>Buy me a Bacon</span>
</a>
</div>

## 📝 License

[MIT](https://github.com/SebaOfficial/svelte-QWER/blob/main/LICENSE)

## 🙏 Credits

- Cover Photo by <a href="https://unsplash.com/@jessbaileydesigns?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jess Bailey</a> on <a href="https://unsplash.com/s/photos/note?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

- Avatar Illustration by <a href="https://icons8.com/illustrations/author/GrbQqWBEhaDS">Liam Moore</a> from <a href="https://icons8.com/illustrations">Ouch!</a>