-
- 
-
-
- -
-
-
- {#if tags && tags.length > 0}
-
-
- tags: {#each tags as tag}
-
- {tag}
-
- {/each}
-
- {/if}
- On {formatDate(date)}
-
-
- {title}
-
-
- - -
+
+
+
+
+🚀 Demo +/ +📝 Documentation +/ +💬 Discussions +
++English +| +正體中文 +
-## Stack info +## 🎉 Try it now! -I focused on researching the best possible modern solutions to frontend and worked on my previous knowledge of svelte. +### Local -Javascript, Typescript -Framework: Sveltekit -CSS: Tailwindcss, postcss -[MDsveX](https://mdsvex.pngwn.io/) for markdown text file processing with plugins -Dockerfile, node-adapter for custom deploy -AWS S3 for static assets -AWS lambda for automation +```bash +npx degit importantimport/urara my-blog && cd my-blog # create a new project in my-blog +pnpm i # if u don't have pnpm installed, run: npm i -g pnpm +``` -## Technical Features +### Remote -- A possibility of great .md file processing with ability to use svelte components in .md -- Rss feed -- Sitemap, robots, Manifest, Workers -- Some playwright testing +[](https://stackblitz.com/github/importantimport/urara) [](https://github.com/importantimport/urara/generate) [](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) [](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/any@512.png) -[CSP from rodnylab](https://rodneylab.com/sveltekit-content-security-policy/) +## ⚡️ Usage -## Credits +### Developing -This project is using [Skeleton Labs UI / Component / utils Library](https://www.skeleton.dev/) for sveltekit. -This project used some logic of gitpod.io sveltekit blog with MIT License, however they have shortly pulled their site off of github, their source or license now unreachable. -I have learned some svelte tricks used here from [Matt Croat](https://matia.xyz) alias [https://joyofcode.xyz/] +Start a development server: + +```bash +pnpm dev +``` + +### Building + +Create a production version of ur blog: + +```bash +pnpm build +``` + +u can preview the built app with `pnpm preview`. + +### Documentation + +For full documentation, visit [urara-docs.netlify.app](https://urara-docs.netlify.app). + +### Give this project a star + +tyvm! ur ⭐ will give me more motivation to improve this project. + +## ✨ Features + +- Out of the box **Atom feed** (WebSub), **Sitemap**, **PWA** (Web app manifest & ServiceWorker) support. +- Present beautiful interface designs and animations with daisyUI, of course. +- Good [IndieWeb](https://indieweb.org/) Compatibility - Multi-kind posts with [microformats2](https://microformats.org/) markup content, Showcasing [Webmentions](https://indieweb.org/Webmention) via [webmentions.io](https://webmentions.io) API. +- Don't worry about the article and image directories - just put them under a folder and they'll be [copied automatically at build time](https://github.com/importantimport/urara/blob/main/urara.ts). +- [Comment Components](https://github.com/importantimport/urara/tree/main/src/lib/components/comments): Webmentions, Giscus, Utterances... u can use more than one. + +## 📦️ Pre-packed + +### TailwindCSS & PostCSS Plugins + +- [daisyUI](https://github.com/saadeghi/daisyui) - The most popular, free and open-source Tailwind CSS component library. +- [Tailwind CSS Typography](https://github.com/tailwindlabs/tailwindcss-typography) - Beautiful typographic defaults for HTML you don't control. +- [Autoprefixer](https://github.com/postcss/autoprefixer) - Parse CSS and add vendor prefixes to rules by Can I Use. +- [CSSNANO](https://github.com/cssnano/cssnano) - A modular minifier, built on top of the PostCSS ecosystem. + +### Markdown preprocessor & Syntax highlighter + +- [MDsveX](https://github.com/pngwn/MDsveX) - A markdown preprocessor for Svelte. +- [Shiki Twoslash](https://github.com/shikijs/twoslash) - A beautiful Syntax Highlighter. + +### Vite Plugins + +- [UnoCSS](https://github.com/unocss/unocss) - The instant on-demand atomic CSS engine. +- [VitePWA](https://github.com/antfu/vite-plugin-pwa) - Zero-config PWA for Vite. + +## 🚀 Sites + +- [./kwaa.dev](https://kwaa.dev) - [kwaa/blog](https://github.com/kwaa/blog) +- [Seviche.cc](https://seviche.cc) - [Sevichecc/Urara-Blog](https://github.com/Sevichecc/Urara-Blog) +- [./khatta.sh](https://blog.shameerkashif.me) - [hash3liZer/khatta](https://github.com/hash3liZer/khatta) + +and more... + +- [urara-blog - Discussions](https://github.com/importantimport/urara/discussions/2) +- [urara-blog - Topics](https://github.com/topics/urara-blog) + +are u using Urara? add the `urara-blog` topic on ur repo! + +## 👥 Contributing + +If u're interested in contributing to Urara, pls read [contributing docs](.github/CONTRIBUTING.md) before submitting a pull request. + +## 📝 License + +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](https://github.com/importantimport/urara/blob/main/COPYING) file for more details. + +[](https://app.fossa.com/projects/git%2Bgithub.com%2Fimportantimport%2Furara?ref=badge_large) + +special thanks / inspired from: + +- [@michaeloliverx - Generate Posts List](https://github.com/pngwn/MDsveX/issues/294#issuecomment-907029639) +- icon made by [Kpouri](https://github.com/kpouri) diff --git a/README.zh.md b/README.zh.md new file mode 100644 index 0000000..bd64e4b --- /dev/null +++ b/README.zh.md @@ -0,0 +1,125 @@ +
+
+
+
+English +| +正體中文 +
+ +## 🎉 現在就試試！ + +### 本地 + +```bash +npx degit importantimport/urara my-blog && cd my-blog # 在當前目錄創建一個名為 my-blog 的新項目 +pnpm i # 如果你沒有安裝 pnpm，運行：npm i -g pnpm +``` + +### 遠端 + +[](https://stackblitz.com/github/importantimport/urara) [](https://github.com/importantimport/urara/generate) [](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) [](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/any@512.png) + +## ⚡️ 用法 + +### 開發 + +啟動開發服務器： + +```bash +pnpm dev +``` + +### 構建 + +創建你的博客的產品版本： + +```bash +pnpm build +``` + +你還可以使用 `pnpm preview` 預覽構建的網站。 + +### 文檔 + +如需完整文檔，請訪問 [urara-docs.netlify.app](https://urara-docs.netlify.app)。 + +### 給這個項目一個 star + +非常感謝！你的 ⭐ 會給我更多的動力來改進這個項目。 + +## ✨ 特徵 + +- 開箱即用的 **Atom feed** (WebSub), **Sitemap**, **PWA** (Web app manifest & ServiceWorker) 支持。 +- 使用 daisyUI 呈現精美的界面設計和動畫效果，當然。 +- 良好的 [IndieWeb](https://indieweb.org/) 兼容性 - 帶有 [microformats2](https://microformats.org/) 標記內容的多種帖子，通過 [webmentions.io](https://webmentions.io) API 展示 [Webmentions](https://indieweb.org/Webmention)。 +- 不用擔心文章和圖像目錄 - 只需將它們放在一個文件夾下，它們就會[在構建時自動複製](https://github.com/importantimport/urara/blob/main/urara.ts)。 +- [評論組件](https://github.com/importantimport/urara/tree/main/src/lib/components/comments)： Webmentions、 Giscus、 Utterances... 你可以使用不止一個。 + +## 📦️ 預捆綁 + +### TailwindCSS & PostCSS 插件 + +- [daisyUI](https://github.com/saadeghi/daisyui) - The most popular, free and open-source Tailwind CSS component library. +- [Tailwind CSS Typography](https://github.com/tailwindlabs/tailwindcss-typography) - Beautiful typographic defaults for HTML you don't control. +- [Autoprefixer](https://github.com/postcss/autoprefixer) - Parse CSS and add vendor prefixes to rules by Can I Use. +- [CSSNANO](https://github.com/cssnano/cssnano) - A modular minifier, built on top of the PostCSS ecosystem. + +### Markdown 預處理器和語法高亮 + +- [MDsveX](https://github.com/pngwn/MDsveX) - A markdown preprocessor for Svelte. +- [Shiki Twoslash](https://github.com/shikijs/twoslash) - A beautiful Syntax Highlighter. + +### Vite 插件 + +- [UnoCSS](https://github.com/unocss/unocss) - The instant on-demand atomic CSS engine. +- [VitePWA](https://github.com/antfu/vite-plugin-pwa) - Zero-config PWA for Vite. + +## 🚀 網站 + +- [./kwaa.dev](https://kwaa.dev) - [kwaa/blog](https://github.com/kwaa/blog) +- [Seviche.cc](https://seviche.cc) - [Sevichecc/Urara-Blog](https://github.com/Sevichecc/Urara-Blog) + +和更多... + +- [urara-blog - Discussions](https://github.com/importantimport/urara/discussions/2) +- [urara-blog - Topics](https://github.com/topics/urara-blog) + +你在用 Urara 嗎？在你的 repo 上添加 `urara-blog` 主題！ + +## 👥 貢獻 + +如果您有興趣為 Urara 做出貢獻，請在提交拉取請求之前閱讀[貢獻文檔](.github/CONTRIBUTING.md)。 + +## 📝 License + +這項工作是免費的，它沒有任何保證。你可以在以下條款下重新發布和/或修改它： + +Do What The Fuck You Want To Public License, Version 2, +as published by Sam Hocevar. + +有關詳細信息，請參閱 [COPYING](COPYING) 文件。 + +[](https://app.fossa.com/projects/git%2Bgithub.com%2Fimportantimport%2Furara?ref=badge_large) + +特別感謝 / 靈感來自於： + +- [@michaeloliverx - Generate Posts List](https://github.com/pngwn/MDsveX/issues/294#issuecomment-907029639) +- [Kpouri](https://github.com/kpouri) 製作的圖標 diff --git a/mdsvex.config.js b/mdsvex.config.js index 028ba3c..162303b 100644 --- a/mdsvex.config.js +++ b/mdsvex.config.js @@ -1,73 +1,119 @@ -import { defineMDSveXConfig as defineConfig } from 'mdsvex'; -import remarkExternalLinks from 'remark-external-links'; -import remarkSetImagePath from './src/lib/utils/remark-set-image-path.js'; -import remarkLinkWithImageAsOnlyChild from './src/lib/utils/remark-link-with-image-as-only-child.js'; -import rehypeImgSize from 'rehype-img-size'; +// rehype plugins +import rehypeSlug from 'rehype-slug' +import rehypeAutolinkHeadings from 'rehype-autolink-headings' +import rehypeExternalLinks from 'rehype-external-links' -import remarkUnwrapImages from 'remark-unwrap-images'; -import remarkToc from 'remark-toc'; -import rehypeSlug from 'rehype-slug'; +// urara remark plugins +import { parse, join } from 'node:path' +import { visit } from 'unist-util-visit' +import { toString } from 'mdast-util-to-string' +import Slugger from 'github-slugger' +import remarkFFF from 'remark-fff' +import remarkFootnotes from 'remark-footnotes' -// import { highlightCode } from './src/lib/utils/highlighter.js'; +// highlighter +import { escapeSvelte } from 'mdsvex' +import { lex, parse as parseFence } from 'fenceparser' +import { renderCodeToHTML, runTwoSlash, createShikiHighlighter } from 'shiki-twoslash' -/** @type {import('mdsvex').MdsvexOptions} */ -const config = defineConfig({ - extensions: ['.svelte.md', '.md', '.svx'], - smartypants: { - dashes: 'oldschool' - }, - /* Wait for skeleton to implement Prismjs, for now use
- 
- - - {post.excerpt} - -
-+ {`sort-by=${config?.sortBy ?? 'created'}&sort-dir=${sortDirUp ? 'up' : 'down'}`} +
+ ++ {#if mention?.author?.url} + + {mention.author?.name ?? new URL(mention.url).host} + + {:else} + {mention?.author?.name ?? new URL(mention.url).host} + {/if} + + {wmProperty} + + this post on + + {mention.published ? mention.published.slice(0, 10) : mention['wm-received'].slice(0, 10)} + +
+{@html mention.content?.html ?? mention.content?.text}
+
- A dev with an array of skills from from frontend and devops to design. I have a
- strong passion for innovation and change in tech, automation and solving 👾 problems
- .
-
From wearing a lot of 🤠 hats in past projects and startups I became a
- generalist, now I am actively deepening my knowledge in software:
- DevOps, CyberSec and AI.
-
- I possess a wide range of skills that enable me to develop visually appealing and - interactive user interfaces for web applications. -
-- Over the years, I have honed my ability to create visually appealing interfaces that - are both user-friendly and intuitive. -
-- I understand the importance of creating a seamless UX for end-users. Which includes - a solid understanding user behavior. -
-{@html site.author.bio}
+ {#if site.author.metadata} +Invalid $drawerStore.id provided.
+ {post.summary} +
+ {/if} +
-
- - This site either never existed or just suddenly committed disappearance from this - universe. -
-{$page.error.message}
- {/if} - -Sorry! A grave error has occured. Maybe try one of these links?
- -{/if} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index c4dffae..17e5c53 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,147 +1,40 @@ -There is nothing to see yet
diff --git a/src/routes/feed.json/+server.ts b/src/routes/feed.json/+server.ts new file mode 100644 index 0000000..57d173c --- /dev/null +++ b/src/routes/feed.json/+server.ts @@ -0,0 +1,52 @@ +import type { RequestHandler } from './$types' +import { json } from '@sveltejs/kit' +import { site } from '$lib/config/site' +import { feed } from '$lib/config/general' +import { favicon, any } from '$lib/config/icon' +import { genPosts } from '$lib/utils/posts' + +const render = (posts = genPosts({ postHtml: true, postLimit: feed.limit, filterUnlisted: true })) => ({ + version: 'https://jsonfeed.org/version/1.1', + title: site.title, + home_page_url: site.protocol + site.domain, + feed_url: site.protocol + site.domain + '/feed.json', + description: site.description, + icon: any['512'].src ?? any['192'].src, + favicon: favicon?.src, + authors: [ + { + name: site.author.name, + url: site.protocol + site.domain, + avatar: site.author.avatar + } + ], + language: site.lang ?? 'en', + hubs: feed.hubs?.map(hub => ({ + type: 'WebSub', + url: hub + })), + items: posts.map(post => ({ + id: post.path.slice(1), + url: site.protocol + site.domain + post.path, + title: post.title, + content_html: post.html, + summary: post['summary'], + image: post['image'], + date_published: post.published ?? post.created, + date_modified: post.updated ?? post.published ?? post.created, + tags: post.tags, + _indieweb: { + type: post.type, + 'in-reply-to': post.in_reply_to + } + })) +}) + +export const prerender = true +export const trailingSlash = 'never' +export const GET: RequestHandler = async () => + json(render(), { + headers: { + 'content-type': 'application/feed+json; charset=utf-8' + } + }) diff --git a/src/routes/manifest.webmanifest/+server.ts b/src/routes/manifest.webmanifest/+server.ts index 57057fb..5541ee7 100644 --- a/src/routes/manifest.webmanifest/+server.ts +++ b/src/routes/manifest.webmanifest/+server.ts @@ -1,29 +1,37 @@ -import conf from '$lib/config'; -import { RequestHandler } from '$lib/types'; +import type { RequestHandler } from './$types' +import { site } from '$lib/config/site' +import { any, maskable } from '$lib/config/icon' -export const prerender = true; - -/** @type {import('./$types').RequestHandler} */ -export const GET: RequestHandler = ({ setHeaders }) => { - const { backgroundColor, description, /* siteShortTitle, */ title, themeColor } = conf; - - const manifest = { - name: title, - // short_name: siteShortTitle, - description, - start_url: '/', - background_color: backgroundColor, - theme_color: themeColor, - display: 'standalone', - icons: [ - { src: '/profile-pic.png', type: 'image/png', sizes: '540x540' }, - { src: '/icon-512.png', type: 'image/png', sizes: '512x512' } - ] - }; - - setHeaders({ - 'content-type': 'application/json' - }); - - return new Response(JSON.stringify(manifest)); -}; +export const prerender = true +export const trailingSlash = 'never' +export const GET: RequestHandler = () => + new Response( + JSON.stringify( + { + name: site.title, + short_name: site.title, + lang: site.lang, + description: site.description, + id: site.protocol + site.domain + '/', + start_url: '/', + scope: '/', + display: 'standalone', + orientation: 'portrait', + background_color: site.themeColor, + theme_color: site.themeColor, + icons: [ + ...Object.values(any) + .filter(icon => icon.sizes !== '180x180') + .map(icon => ({ ...icon, purpose: 'any' })), + ...Object.values(maskable).map(icon => ({ ...icon, purpose: 'maskable' })) + ] + }, + null, + 2 + ), + { + headers: { + 'Content-Type': 'application/manifest+json; charset=utf-8' + } + } + ) diff --git a/src/routes/posts.json/+server.ts b/src/routes/posts.json/+server.ts new file mode 100644 index 0000000..d394dcf --- /dev/null +++ b/src/routes/posts.json/+server.ts @@ -0,0 +1,7 @@ +import type { RequestHandler } from './$types' +import { json } from '@sveltejs/kit' +import { genPosts } from '$lib/utils/posts' + +export const prerender = true +export const trailingSlash = 'never' +export const GET: RequestHandler = async () => json(genPosts()) diff --git a/src/routes/projects/+page.server.ts b/src/routes/projects/+page.server.ts deleted file mode 100644 index b9caa36..0000000 --- a/src/routes/projects/+page.server.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { listProjects } from '$content/projects'; - -export const load = () => { - return { - projects: listProjects() - }; -}; diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte deleted file mode 100644 index a4ffd85..0000000 --- a/src/routes/projects/+page.svelte +++ /dev/null @@ -1,24 +0,0 @@ - - -
-