Code Monkey home page Code Monkey logo

importantimport / urara Goto Github PK

View Code? Open in Web Editor NEW
551.0 11.0 63.0 1.8 MB

🌸 Sweet, Powerful, IndieWeb-Compatible SvelteKit Blog Starter. [δ](Delta)

Home Page: https://urara-demo.netlify.app

License: Do What The F*ck You Want To Public License

CSS 3.59% HTML 0.79% Svelte 61.01% TypeScript 29.67% JavaScript 4.93%
sveltekit sveltekit-template blog daisyui mdsvex svelte typescript blog-template urara sveltejs tailwindcss postcss jamstack tailwind indieweb unocss progressive-web-app microformats

urara's Introduction



fff Language License FOSSA Status

🚀 Demo / 📝 Documentation / 💬 Discussions

English | 正體中文

🎉 Try it now!

Local

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

Open in StackBlitz Use this template Deploy with Vercel Deploy to Netlify

⚡️ Usage

Developing

Start a development server:

pnpm dev

Building

Create a production version of ur blog:

pnpm build

u can preview the built app with pnpm preview.

Documentation

For full documentation, visit 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 Compatibility - Multi-kind posts with microformats2 markup content, Showcasing Webmentions via 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.
  • Comment Components: Webmentions, Giscus, Utterances... u can use more than one.

📦️ Pre-packed

TailwindCSS & PostCSS Plugins

  • daisyUI - The most popular, free and open-source Tailwind CSS component library.
  • Tailwind CSS Typography - Beautiful typographic defaults for HTML you don't control.
  • Autoprefixer - Parse CSS and add vendor prefixes to rules by Can I Use.
  • CSSNANO - A modular minifier, built on top of the PostCSS ecosystem.

Markdown preprocessor & Syntax highlighter

Vite Plugins

  • UnoCSS - The instant on-demand atomic CSS engine.
  • VitePWA - Zero-config PWA for Vite.

🚀 Sites

and more...

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 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 file for more details.

FOSSA Status

special thanks / inspired from:

urara's People

Contributors

barnwell avatar fossabot avatar hash3lizer avatar interstellar750 avatar kwaa avatar kwchang0831 avatar sarcevicantonio avatar sevichecc avatar shadowking68 avatar wingstako avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

urara's Issues

Can't deploy

8:23:33 PM: Installing npm packages using pnpm version 8.14.1
8:23:33 PM:  ERR_PNPM_OUTDATED_LOCKFILE  Cannot install with "frozen-lockfile" because pnpm-lock.yaml is not up to date with package.json
8:23:33 PM: Note that in CI environments this setting is true by default. If you still need to run install in such cases, use "pnpm install --no-frozen-lockfile"
8:23:33 PM: Failure reason:
8:23:33 PM: specifiers in the lockfile ({"@builder.io/partytown":"^0.7.6","@unocss/extractor-svelte":"^0.53.6","sharp":"^0.30.7","@iconify-json/heroicons-outline":"^1.1.6","@iconify-json/heroicons-solid":"^1.1.7","@iconify-json/simple-icons":"^1.1.61","@sveltejs/adapter-node":"1.3.1","@sveltejs/adapter-static":"2.0.2","@sveltejs/adapter-vercel":"3.0.2","@sveltejs/kit":"^1.22.3","@tailwindcss/typography":"^0.5.9","@types/unist":"^2.0.7","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0","@vite-pwa/sveltekit":"^0.1.3","autoprefixer":"^10.4.14","chalk":"^5.3.0","chokidar":"^3.5.3","cross-env":"^7.0.3","cssnano":"^5.1.15","daisyui":"^2.52.0","eslint":"^8.45.0","eslint-config-prettier":"^8.8.0","eslint-plugin-svelte3":"^4.0.0","fenceparser":"^2.2.0","fff-flavored-frontmatter":"~0.4.2","github-slugger":"^2.0.0","mdast-util-to-string":"^3.2.0","mdsvex":"^0.11.0","npm-run-all":"^4.1.5","postcss":"^8.4.27","postcss-preset-env":"^7.8.3","prettier":"^2.8.8","prettier-plugin-svelte":"^2.10.1","rehype-autolink-headings":"^6.1.1","rehype-external-links":"^1.0.1","rehype-slug":"^5.1.0","remark":"^14.0.3","remark-fff":"~0.4.2","remark-footnotes":"~2.0.0","rollup-plugin-visualizer":"^5.9.2","shiki-twoslash":"^3.1.2","svelte":"4.1.1","svelte-bricks":"^0.1.7","svelte-check":"^3.4.6","svelte-preprocess":"^5.0.4","tailwindcss":"^3.3.3","tslib":"^2.6.0","typescript":"^5.1.6","unist-util-visit":"^5.0.0","unocss":"^0.53.6","vite":"^4.4.6","vite-plugin-pwa":"^0.16.4","workbox-window":"^7.0.0"}) don"t match specs in package.json ({"@iconify-json/heroicons-outline":"^1.1.4","@iconify-json/heroicons-solid":"^1.1.5","@sveltejs/adapter-auto":"next","@sveltejs/adapter-node":"next","@sveltejs/adapter-static":"next","@sveltejs/kit":"1.0.0-next.456","@tailwindcss/typography":"^0.5.4","@types/node":"^18.7.14","@types/unist":"^2.0.6","@typescript-eslint/eslint-plugin":"^5.36.1","@typescript-eslint/parser":"^5.36.1","autoprefixer":"^10.4.8","chalk":"^5.0.1","chokidar":"^3.5.3","cross-env":"^7.0.3","cssnano":"^5.1.13","daisyui":"^2.24.0","eslint":"^8.23.0","eslint-config-prettier":"^8.5.0","eslint-plugin-svelte3":"^4.0.0","fenceparser":"2.0.0","fff-flavored-frontmatter":"~0.2.2","github-slugger":"^1.4.0","mdast-util-to-string":"^3.1.0","mdsvex":"^0.10.6","npm-run-all":"^4.1.5","postcss":"^8.4.16","prettier":"^2.7.1","prettier-plugin-svelte":"^2.7.0","rehype-autolink-headings":"^6.1.1","rehype-external-links":"^1.0.1","rehype-slug":"^5.0.1","remark":"^14.0.2","remark-footnotes":"~2.0.0","shiki-twoslash":"^3.1.0","svelte":"^3.49.0","svelte-check":"^2.9.0","svelte-preprocess":"^4.10.7","tailwindcss":"^3.1.8","tslib":"^2.4.0","typescript":"^4.8.2","unist-util-visit":"^4.1.1","unocss":"^0.45.13","vite":"^3.1.0-beta.1","vite-plugin-pwa":"^0.12.4","workbox-window":"^6.5.4"})
Error during pnpm install
8:23:33 PM: Failing build: Failed to install dependencies

Auto-determined post type

Currently, the post type is specified via FrontMatter's layout, while the default is article:
this reduces my motivation to refine other types.

so instead of setting the post type via layout, it might be better to detect a specific FrontMatter value?

---
title: My New Post
photo: '/featured.avif'
- layout: article
---
article with title and featured image
---
photo: '/photo.avif'
- layout: photo
---
photo (based on note)

for users, this reduces complexity and encourages experimentation with other types.

SvelteKit Embed v0.0.13 available

Hey!

Love this template! 🤗

Just an FYI I recently updated SvelteKit Embed to v0.0.13 on a @next tag

this update gives the ability to pass iframe style props, so you can add a border radius to avoid embeds like this

image

Next time you're working on this, if you try it out let me know if there's any issues, I'd really appreciate it.

Also, thanks for chosing my project 😍

Login for utterances and giscus don't seem to work.

I tried using utterances and giscus for comments but Sign In with Github doesn't seem to work right. Also doesn't work on https://kwaa.dev/ for example.

I added the following post config

import type { PostConfig } from '$lib/types/post'

export const post: PostConfig = {
  comment: {
    use: ['Giscus'],
    giscus: {
      repo: 'SarcevicAntonio/SarcevicAntonio',
      repoID: 'MDEwOlJlcG9zaXRvcnkxODkzMDAxNjM=',
      category: 'Comments',
      categoryID: 'DIC_kwDOC0h9w84CSwfL',
      reactionsEnabled: true,
      inputPosition: 'top',
      lang: 'en',
      theme: 'preferred_color_scheme',
      loading: 'lazy'
    }
  }
}

Result: sign in button redirects to main page and user isn't signed in.

Expected: sign in button redirects back to post page and user can comment.

Fix A11y Warning

The old component did not do well in a11y and needs to be fixed.

Markdown parser for latex based equations

I am getting errors when I use latex equations in my markdown posts. Even for characters like this ' and \pi \gamma are not working..
It throws this error: Expecting Unicode escape sequence \uXXXX

Please help me resolve this error. I heavily rely on latex math equations for my blog posts. Please suggest a fix as soon as possible.

在 Safari 内核的浏览器上,在标题栏上固定的一些文章在访问时需要手动刷新

/src/lib/config/general.ts 文件内第 124 行 export const header: HeaderConfig {} 内设定的 Header 内容,在 iOS 的 Safari 与 Chrome 浏览器都没法正常访问,需要手动刷新页面才能正常显示页面

但有一个奇怪的现象,如果点击了标题栏的按钮并手动刷新,这个时候再次点击标题栏内的其他文章又可以正常访问了

不过也不是所有标题栏的页面都无法在 iOS 直接点击访问,例如您博客的 Friends 页面是可以像普通文章那样直接访问的

您的博客主页好多文章在 iOS 似乎都有问题

Add mathematical formula rendering such as Katex

Hey there!
I found that the program cannot render mathematical formulas in the process of using Urara, could you please help me to provide a solution?

写题解发现没法加数学公式,现在直接以rehype插件的形式加到mdsvex的配置中好像不会生效,可能是我对svelte还不够了解,应该怎么做呐
我之前看到的解决方案是可以在渲染静态文件的时候将其转为SVG格式的图片,这样能解决单页面应用需要主动重载渲染的问题,有好的解决方案吗?
感谢!

Pagination

Is it possible to enable pagination in home?

ServiceWorker doesn't work

ServiceWorker files are not automatically copied to ./build after updating to the latest versions of SvelteKit and Vite.

Progress tracking here, looks like need to wait for vite-pwa/vite-plugin-pwa#327.

But I might be able to create a temporary solution until it updates?

Missing start script

Currently, build command is specified, but the start command is not specified.
In some cloud environments, it is necessary to specify the execution command of the build copy through the start command.

I think it would be good to add the following like this command.

{
  "start": "serve build"
}

Back button doesn't seem to work to return to home page

I noticed this after downloading an running my own version of the Urara locally. The demo site https://urara-demo.netlify.app/ also has this issue. https://kwaa.dev/ does not seem to have this issue so wondering what is causing it, seems like there probably is a fix for it though unsure of what it is.

If you navigate to any page from the homepage, for example from urara-demo.netlify.app to urara-demo.netlify.app/hello-world/ then press the back arrow, the URL will update to the home page but the page itself stays the same. Only refreshing the page or pressing the home button will bring you back to the home page. If you go between any other 2 pages that aren't the homepage, like for example site/page1 to site/page2 the back button works fine, so it is only the home page.

Metadata not provided as expected

Hello,

I just cloned the repository and started it. Somehow though I am not able to provide a meta description to any of my posts using something like the following at the top of the post.svelte.md file.

---
title: 'My title'
summary: 'My summary'
date: 2022-06-11
lastmod: 2022-06-11
tags:
  - 'tag1'
  - 'tag2'
cover: '/post/cover.jpg'
---

For example using this:

// src/lib/components/head_opengraph.svelte
console.log(post)

I get an almost empty post object.

I will try to debug this further and provide a cleaned example if I can.

best regards!

Fix ToC flat-to-nested algorithm

The current algorithm does not consider robustness for the sake of simplicity and has a requirement for the heading level.
It needs to be improved.

Metadata icon dosen't work and causes errors

Discussed in #26

Originally posted by gaelgoth July 31, 2022
Hello,

I used your stunning template since yesterday. I'm a bit new with Svelte and I can not do this simple task which adding icons with the link under the bio.

Here is what I did from a fresh template:

  1. pnpm add @iconify-json/simple-icons
  2. Edit src/lib/config/site.ts and add the following metadata:
...
metadata: [
      {
        text: 'gaelgoth',
        icon: 'i-simple-icons-github;',
        link: 'https://github.com/gaelgoth'
      },
    ]
  },

Then I got this error:

Transform failed with 1 error:
/home/gael/workspace/urara-blog/src/lib/config/site.ts:34:22: ERROR: Expected ";" but found "{"

It works when I edit the CCS class in index_profile.svelte

Do you have hint to fix this error ?

Thanks, Gaël

404 pages not working as intented when deployed

Expected Behavior

In local dev, 404 pages are working as intented.
For non-existent path, it will generate dynamic 404 pages like the following image.
image

Current Behavior

However, when depolyed on both vercel and netlify, it will show function crash message.
On Vercel, it will always show function crash message.
On Netlify, for the same path it will show the crash message the first time. Next time, it will show the correct 404 page.

To Reproduce on Vercel

Go to the following URL, it will show function crash message
https://kwaa.dev/404

Result:
image

Go to the instance on Vercel > View Build Logs > Functions > Realtime Logs
You will get similar erorr like the following image.
image

To Reporduce on Netlify

Go to the following URL, the 1st time it will show function crash message
https://urara-demo.netlify.app/404

Result:
image

Go to the following URL, the 2nd time it will show the correct 404 page
https://urara-demo.netlify.app/404

Result:
image

help me,plz. orz

hello,i'm in trouble.
Here's the problem.
Your Node version is incompatible with "/@sveltejs/kit/[email protected][email protected]".

Expected version: >=16.14
Got: v14.19.2

I tried to change my node version,but it doesn't work.
So I need your help.

Thx.

Deletion of pre-existing route folders in `urara.clean()`

urara/urara.js

Lines 86 to 96 in b5520f9

const clean = async () => {
fs.rm('static', { recursive: true }).then(log('yellow', 'remove dir', 'static')).catch(error)
fs.readdir('src/routes', { withFileTypes: true }).then(files =>
files.forEach(file => {
if (file.isDirectory()) {
const dest = path.join('src/routes', file.name)
fs.rm(dest, { recursive: true }).then(log('yellow', 'remove dir', dest)).catch(error)
}
})
)
}

I noticed that pre-existing folders in the routes directory are blown away by the urara.clean function, as you can see in the section of code highlighted above. Urara apparently just deletes all routes folders arbitrarily, without checking if it was a route that it created or not.

This means if I had a subfolder for photos, for example, after running the dev server urara would destroy them and not even realize it made a mistake. This has huge implications down the line. Unfortunately I don't have the bandwidth to draft a PR right now, but I'll still try to squeeze it in.

That being said: wonderful project you have here so far, I'm quite eager to try it in production as soon as possible 😉

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.