Merge branch 'importantimport:main' into main

.gitignore

@@ -6,5 +6,6 @@ src/routes/**/
 static/
 build/
 .vercel_build_output/
+.netlify/
 .env.local
 .env.**.local

.prettierignore

@@ -3,4 +3,5 @@ static/**
 build/**
 node_modules/**
 pnpm-lock.yaml
-.vercel_build_output/
+.netlify/**
+.vercel_build_output/**

.vscode/extensions.json

@@ -2,7 +2,6 @@
   "recommendations": [
     "svelte.svelte-vscode",
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
-    "voorjaar.windicss-intellisense"
+    "esbenp.prettier-vscode"
   ]
 }

.vscode/settings.json

@@ -1,4 +1,5 @@
 {
+  "editor.formatOnSave": true,
   "files.eol": "\n",
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "css.lint.unknownAtRules": "ignore",

README.md

@@ -14,74 +14,85 @@
 <img src="https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimportantimport%2Furara.svg?type=shield" alt="FOSSA Status">
 </p>
 <p align="center">
-<a href="https://urara-demo.netlify.app">Demo</a>
+<a href="https://urara-demo.netlify.app">🚀 Demo</a>
 /
-<a href="https://github.com/importantimport/urara/discussions">Discussions</a>
+<a href="https://urara-docs.netlify.app">📝 Documentation</a>
+/
+<a href="https://github.com/importantimport/urara/discussions">💬 Discussions</a>
 </p>
 
-## 🎉 Try it now!
+## ✨ Try it now!
 
 ### Local
 
 ```bash
-npx degit importantimport/urara [blog-name]
+npx degit importantimport/urara [blog-name] && cd [blog-name]
+pnpm i # if u don't have pnpm installed, run: npx pnpm add -g pnpm
 ```
 
 ### Remote
 
 [![Use this template](https://img.shields.io/badge/-Use%20this%20Template-181717?style=for-the-badge&logo=GitHub)](https://github.com/importantimport/urara/generate) [![Deploy with Vercel](https://img.shields.io/badge/-Deploy%20with%20Vercel-1374ef?style=for-the-badge&logo=Vercel)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fimportantimport%2Furara&env=URARA_SITE_URL&envDescription=Site%20URL.&envLink=https%3A%2F%2Fexample.com&project-name=urara-blog&repository-name=urara-blog) [![Deploy to Netlify](https://img.shields.io/badge/-Deploy%20to%20Netlify-15847d?style=for-the-badge&logo=Netlify&logoColor=white)](https://app.netlify.com/start/deploy?repository=https%3A%2F%2Fgithub.com%2Fimportantimport%2Furara#URARA_SITE_URL=https://example.com&CUSTOM_LOGO=https://github.com/importantimport/urara/raw/main/urara/assets/[email protected])
 
-## ⚡️ Usage
 
-### Development
+## ⚡️ Usage
 
-This template recommends using [pnpm](https://pnpm.io) and [@antfu/ni](https://github.com/antfu/ni). start a development server:
+This template recommends using [@antfu/ni](https://github.com/antfu/ni).
 
 ```bash
-# http://localhost:3000
-nr dev
+pnpm i -g @antfu/ni
 ```
 
-or listen to different IP and port:
+### Developing
 
-```bash
-# http://0.0.0.0:3000
-nr dev --host 0.0.0.0
+Start a development server:
 
-# http://0.0.0.0:8080
-nr dev --host 0.0.0.0 --port 8080
+```bash
+# pnpm run dev
+nr dev
 ```
 
-### Build
+### Building
+
+Create a production version of ur blog:
 
 ```bash
+# pnpm run build
 nr build
 ```
 
-or use the specified adapter:
+u can preview the built app with `nr preview`.
 
-```bash
-# Vercel
-VERCEL=true nr build
+### Documentation
 
-# Cloudflare Pages
-CF_PAGES=true nr build
+For full documentation, visit [urara-docs.netlify.app](https://urara-docs.netlify.app).
 
-# Netlify
-NETLIFY=true nr build
-```
+### Give this project a star
+
+tyvm! ur ⭐ will give me more motivation to improve this project.
+
+## 📦️ Pre-packed
+
+### TailwindCSS & PostCSS Plugins
+
+- [daisyUI](https://github.com/saadeghi/daisyui) - Tailwind CSS Components
+- [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography) - Beautiful typographic defaults for HTML you don't control.
+- [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) - A utility-first CSS framework for rapid UI development.
+- [PostCSS](https://github.com/postcss/postcss) - a tool for transforming CSS with JavaScript
+- [PostCSS Preset Env](https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env) - Convert modern CSS into something browsers understand
+- [PostCSS Import](https://github.com/postcss/postcss-import) - PostCSS plugin to inline @import rules content
+- [CSSNANO](https://github.com/cssnano/cssnano) - A modular minifier, built on top of the PostCSS ecosystem.
 
-> This template uses `@sveltejs/adapter-auto@next` and `@sveltejs/adapter-static@next` by default.
+### Markdown preprocessor & Syntax highlighter
 
-> when the environment supported by adapter-auto is not detected, it will automatically fallback to adapter-static.
+- [MDsveX](https://github.com/pngwn/MDsveX) - A markdown preprocessor for Svelte.
+- [Shiki Twoslash](https://github.com/shikijs/twoslash) - A beautiful Syntax Highlighter.
 
-> u can modify it to any adapter supported by SvelteKit. see [SvelteKit Docs](https://kit.svelte.dev/docs#adapters)
+### Vite Plugins
 
-> u can preview the built app with `nr preview`, regardless of
-> whether u installed an adapter. This should _not_ be used to serve
-> ur app in production.
+- [Unplugin Icons](https://github.com/antfu/unplugin-icons) - Access thousands of icons as components on-demand universally.
 
-## ✨ Sites
+## 🚀 Sites
 
 - [./kwaa.dev](https://kwaa.dev)
 
@@ -96,7 +107,7 @@ are u using Urara? add the `urara-blog` topic on ur repo!
 
 This work is free, it comes without any warranty. You can redistribute it and/or modify it under the
 terms of the Do What The Fuck You Want To Public License, Version 2,
-as published by Sam Hocevar. See the COPYING file for more details.
+as published by Sam Hocevar. See the [COPYING](https://github.com/importantimport/urara/blob/main/COPYING) file for more details.
 
 [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fimportantimport%2Furara.svg?type=large)](https://app.fossa.com/projects/git%2Bgithub.com%2Fimportantimport%2Furara?ref=badge_large)
 

mdsvex.config.js

@@ -1,21 +1,15 @@
-import shiki from 'shiki'
 import rehypeSlug from 'rehype-slug'
 import rehypeAutolinkHeadings from 'rehype-autolink-headings'
 import rehypeExternalLinks from 'rehype-external-links'
+import { escapeSvelte } from 'mdsvex'
+import { lex, parse as parseFence } from 'fenceparser'
+import { renderCodeToHTML, runTwoSlash, createShikiHighlighter } from 'shiki-twoslash'
 import { statSync } from 'fs'
 import { parse, join } from 'path'
 import { visit } from 'unist-util-visit'
 import { toString } from 'mdast-util-to-string'
 import Slugger from 'github-slugger'
 
-const highlighter = async (code, lang) =>
-  `{@html \`${await shiki.getHighlighter({ theme: 'material-default' }).then(highlighter =>
-    highlighter
-      .codeToHtml(code, { lang })
-      .replace(/[{}`]/g, c => ({ '{': '{', '}': '}', '`': '`' }[c]))
-      .replace(/\\([trn])/g, '\$1')
-  )}\` }`
-
 const remarkUraraFm =
   () =>
   (tree, { data, filename }) => {
@@ -66,7 +60,13 @@ export const mdsvexConfig = {
     _: './src/lib/components/layout_post.svelte'
   },
   highlight: {
-    highlighter
+    highlighter: async (code, lang, meta) => {
+      let fence, twoslash
+      try { fence = parseFence(lex([lang, meta].filter(Boolean).join(' '))) }
+      catch (error) { throw new Error(`Could not parse the codefence for this code sample \n${code}`) }
+      if (fence?.twoslash === true) twoslash = runTwoSlash(code, lang)
+      return `{@html \`${escapeSvelte(renderCodeToHTML(code, lang, fence ?? {}, {}, await createShikiHighlighter({ theme: 'material-default' }), twoslash))}\` }`
+    }
   },
   remarkPlugins: [remarkUraraFm, remarkUraraSpoiler],
   rehypePlugins: [

package.json

@@ -18,45 +18,53 @@
     "format": "prettier --write --plugin-search-dir=. ."
   },
   "devDependencies": {
-    "@iconify-json/heroicons-outline": "^1.0.2",
-    "@iconify-json/heroicons-solid": "^1.0.2",
-    "@sveltejs/adapter-auto": "^1.0.0-next.18",
-    "@sveltejs/adapter-static": "^1.0.0-next.26",
-    "@sveltejs/kit": "^1.0.0-next.252",
+    "@iconify-json/heroicons-outline": "^1.1.1",
+    "@iconify-json/heroicons-solid": "^1.1.1",
+    "@sveltejs/adapter-auto": "^1.0.0-next.31",
+    "@sveltejs/adapter-node": "^1.0.0-next.71",
+    "@sveltejs/adapter-static": "^1.0.0-next.29",
+    "@sveltejs/kit": "^1.0.0-next.294",
+    "@tailwindcss/typography": "^0.5.2",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
     "chalk": "^4.1.2",
     "chokidar": "^3.5.3",
-    "daisyui": "1.16.6",
+    "cssnano": "^5.1.0",
+    "daisyui": "^2.6.0",
     "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.4.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte3": "^3.4.1",
+    "fenceparser": "^2.0.0",
     "github-slugger": "^1.4.0",
     "mdast-util-to-string": "^3.1.0",
     "mdsvex": "^0.9.8",
     "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.7",
+    "postcss-import": "^14.0.2",
+    "postcss-load-config": "^3.1.3",
+    "postcss-preset-env": "^7.4.2",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.6.0",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-external-links": "^1.0.1",
     "rehype-slug": "^5.0.1",
     "remark": "^14.0.2",
-    "shiki": "^0.9.15",
-    "svelte": "^3.46.3",
-    "svelte-check": "^2.4.1",
-    "svelte-preprocess": "^4.10.2",
+    "shiki-twoslash": "^3.0.2",
+    "svelte": "^3.46.4",
+    "svelte-check": "^2.4.5",
+    "svelte-preprocess": "^4.10.4",
+    "tailwindcss": "^3.0.23",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.5",
+    "typescript": "^4.6.2",
     "unist-util-visit": "^4.1.0",
-    "unplugin-icons": "^0.13.0",
-    "vite": "^2.7.13",
-    "vite-plugin-windicss": "^1.6.3",
+    "unplugin-icons": "^0.13.2",
+    "vite": "^2.8.6",
     "workbox": "^0.0.0",
-    "workbox-cacheable-response": "^6.4.2",
-    "workbox-expiration": "^6.4.2",
-    "workbox-precaching": "^6.4.2",
-    "workbox-routing": "^6.4.2",
-    "workbox-strategies": "^6.4.2"
+    "workbox-cacheable-response": "^6.5.1",
+    "workbox-expiration": "^6.5.1",
+    "workbox-precaching": "^6.5.1",
+    "workbox-routing": "^6.5.1",
+    "workbox-strategies": "^6.5.1"
   },
   "type": "module"
 }