156 lines
7.5 KiB
Markdown
156 lines
7.5 KiB
Markdown
# Hello world, this is my personal site
|
|
|
|
I recently switched to Urara, an incredibly well made template, because although my site was beautiful and worked, it was an immense hassle to get it working and I couldn't fix some issues with mdsvex. I found Urara while looking for code highlighting and it has the same and more features than my completely own work. You should see my previous site at a backup branch. It should be able to be run in dev, but typography from tailwindcss is not working with articles...
|
|
Featuring a blog, projects, current social accounts, skills and so on and so on, look at [Technical Features](#technical-features)
|
|
|
|
## Stack info
|
|
|
|
I focused on researching the best possible modern solutions to frontend and worked on my previous knowledge of svelte.
|
|
|
|
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
|
|
|
|
## Technical Features
|
|
|
|
- A possibility of great .md file processing with ability to use svelte components in .md
|
|
- Rss feed
|
|
- Sitemap, robots, Manifest, Workers
|
|
- Some playwright testing
|
|
|
|
[CSP from rodnylab](https://rodneylab.com/sveltekit-content-security-policy/)
|
|
|
|
## Credits
|
|
|
|
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/]
|
|
|
|
<br />
|
|
<div align="center">
|
|
<a href="https://github.com/importantimport/urara">
|
|
<img src="https://github.com/importantimport/urara/raw/main/urara/hello-world/urara.webp" alt="urara" /></a>
|
|
</div>
|
|
<br />
|
|
|
|
<p align="center">
|
|
<a href="https://fff.js.org"><img src="https://img.shields.io/badge/%F0%9F%8C%9F%20F%20F%20F-1.0-yellow?style=flat" alt="fff" /></a>
|
|
<img src="https://img.shields.io/github/languages/top/importantimport/urara?color=%23ff3e00" alt="Language" />
|
|
<a href="https://github.com/importantimport/urara/blob/main/COPYING"><img src="https://img.shields.io/github/license/importantimport/urara?color=%23fff" alt="License" /></a>
|
|
<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-docs.netlify.app">📝 Documentation</a>
|
|
/
|
|
<a href="https://github.com/importantimport/urara/discussions">💬 Discussions</a>
|
|
</p>
|
|
<p align="center">
|
|
<span>English</span>
|
|
|
|
|
<a href="https://github.com/importantimport/urara/blob/main/README.zh.md">正體中文</a>
|
|
</p>
|
|
|
|
## 🎉 Try it now!
|
|
|
|
### Local
|
|
|
|
```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
|
|
```
|
|
|
|
### Remote
|
|
|
|
[](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=PUBLIC_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#PUBLIC_SITE_URL=https://example.com&CUSTOM_LOGO=https://github.com/importantimport/urara/raw/main/urara/assets/any@512.png)
|
|
|
|
## ⚡️ Usage
|
|
|
|
### Developing
|
|
|
|
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)
|