Extensions #

✅ This extension is included in Urara, no additional download is needed.

Components to be imported before use: #

<script>
  import Alert from '$lib/components/extra/alert.svelte'
</script>

Usage: #

<Alert status="warning" description="warning message" title="warning title"/>

You can modify the status of the prompt as needed. The available options are: info, success, warning and error.

You can also refer to the use case source code: Urara-Blog/+page.svelte.md at main · Sevichecc/Urara-Blog.

⚠ This extension is not yet included in Urara, you need to download the component manually.

Download the profile.svelte file and put it in the src/lib/components/extra/ directory.

Components to be imported before use: #

<script lang="ts">
  import Profile from '$lib/components/extra/profile.svelte'
</script>

Usage: #

<Profile subname="Here is the last name."/>

This extension will display a profile card within your post, where the avatar, name and profile will follow your settings in site.ts, and you can also specify them manually via avatar="<image path>", name="name" and bio={`bio`}.

<Profile name="name" avatar="/assets/maskable@512.png" subname="Here is the last name." bio={`Here is the bio <br>This is the second line of the bio.`} />

You can also refer to the use case source code: blog/+page.svelte.md at main · kwaa/blog.

⚠ This extension is not yet included in Urara, you need to download the component manually.

Download the github.svelte file and put it in the src/lib/components/extra/ directory.

Components to be imported before use: #

<script>
  import GitHub from '$lib/components/extra/github.svelte'
</script>

Usage: #

<GitHub user="importantimport" repo="urara"/>

This extension will show the https://github.com/importantimport/urara repository within your post, and you can replace importantimport to another user or organization, and urara to a GitHub repository under that user's or organization's name.

You can also refer to the use case source code: blog/+page.svelte.md at main · kwaa/blog.

✅ This extension is included in Urara, no additional download is needed.

Usage: #

First you need to add the IndieAuth attribute to src/lib/config/general.ts.

export const head: HeadConfig = {
  custom: ({ dev, post, page }) =>
    dev
      ? []
      : [
          // IndieAuth
          '<link rel="authorization_endpoint" href="https://indieauth.com/auth">',
          '<link rel="token_endpoint" href="https://tokens.indieauth.com/token">',
        ],
  me: ['https://github.com/example']
}

You can replace the https://github.com/example above with a link to your GitHub account. To use other authentication methods see: [IndieAuth Documentation - Sign in with your domain name](https:// indieauth.com/setup).

Next, the src/lib/config/post.ts file needs to be modified as required:

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

export const post: PostConfig = {
  comment: {
    use: ['Webmention', 'other comment systems'],
    style: 'boxed', // comment system bar styles: none / bordered / lifted / boxed
    webmention: {
      username: '[enter domain here]',
      sortBy: 'created', // sort by: created / updated
      sortDir: 'down', // sort order: up / down
      form: true, // enable comments: true / false
      commentParade: true // enable anonymous comments: true / false
    }
  }
}

After this, you can log in to Webmention.io with the set domain name, and after passing the authentication, you can view the recent Webmentions.

Once configured, Webmention is ready to use and will be displayed after the end of the article.

You can also refer to the use case source code: blog/post.ts at main · kwaa/blog。

✅ This extension is included in Urara, no additional download is needed.

Usage: #

Visit the Giscus page for configuration. After following the steps to configure, you will get the following:

<script src="https://giscus.app/client.js"
      data-repo="[enter repository here]"
      data-repo-id="[enter repository ID here]"
      data-category="[enter category name here]"
      data-category-id="[enter category ID here]"
      data-mapping="pathname"
      data-strict="0"
      data-reactions-enabled="1"
      data-emit-metadata="0"
      data-input-position="top"
      data-theme="preferred_color_scheme"
      data-lang="en"
      crossorigin="anonymous"
      async>
</script>

Next, you will need to modify the src/lib/config/post.ts file as required:

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

export const post: PostConfig = {
  comment: {
    use: ['Giscus', 'other comment systems'],
    style: 'boxed', // comment system bar styles: none / bordered / lifted / boxed
    giscus: {
      repo: '[enter repository here]',
      repoID: '[enter repository ID here]',
      category: '[enter category name here]',
      categoryID: '[enter category ID here]',
      reactionsEnabled: true, // reactions: true / false
      inputPosition: 'top' // position of comment box: top / bottom
      lang: 'en', // language
      theme: 'preferred_color_scheme' // theme
    }
  }
}

⚠ This extension enables the pathname mapping method and lazyload loading option for Giscus by default.

Once configured, Giscus is ready to use and will be displayed after the end of the article.

You can also refer to the use case source code: blog/post.ts at main · kwaa/blog.

✅ This extension is included in Urara, no additional download is needed.

Usage: #

Visit the Utterances page for configuration. After following the steps to configure, you will get the following:

<script src="https://utteranc.es/client.js"
      repo="[enter repository here]"
      issue-term="pathname"
      theme="preferred-color-scheme"
      crossorigin="anonymous"
      async>
</script>

Next, you will need to modify the src/lib/config/post.ts file as required:

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

export const post: PostConfig = {
  comment: {
    use: ['Utterances', 'other comment systems'],
    style: 'boxed', // comment system bar styles: none / bordered / lifted / boxed
    utterances: {
      repo: '[enter repository here]',
      lable: '', // lable
      theme: 'preferred-color-scheme', // theme
    }
  }
}

⚠ This extension enables the pathname mapping method for Utterances by default.

Once configured, Utterances is ready to use and will be displayed after the end of the article.

⚠ These extensions are not yet included in Urara, you need to download the components manually.

Components to be downloaded before use: #

• Reply: reply.svelte - Made by 藍+85CD | Demo - ./kwaa.dev

• Share: share.svelte - Made by 藍+85CD | Demo - ./kwaa.dev

• Translate: translate.svelte - Made by 藍+85CD | Demo - ./kwaa.dev

After downloading the required action buttons above, create a new folder named actions in the src/lib/components/ directory and put it there.

Usage: #

When you have completed the above settings, the function buttons are available, please note: This extension will only be displayed when the width of the article page is sufficient.

You can also refer to the use case source code: blog/src/lib/components/actions at main · kwaa/blog.

⚠ This extension is not yet included in Urara, you need to download the component manually.

1. Download the friend.svelte file and put it in the src/lib/components/extra/ directory.

2. Download the +page.svelte file and create a new folder named friends in the src/routes/ directory and put it there.

3. Download the friends.ts file and put it in the src/lib/config/ directory.

4. Install the svelte-bricks dependence:

pnpm add -D svelte-bricks

Usage: #

The default style is provided in friends.ts and can be replaced by yourself:

export const friends: Friend[] = [
  {
    id: 'id', // HTML ID
    rel: 'friend', // contact type: contact / acquaintance / friend
    name: 'Name', // friend nickname
    title: 'Title', // title
    avatar: '/favicon.png', // friend avatar
    link: 'https://urara-demo.netlify.app/', // link
    descr: 'A Descriptions.', //  friend description
  }
]

You can also refer to the use case source code: blog/friends.ts at main · kwaa/blog.

⚠ This extension is not yet included in Urara, you need to download the component manually.

1. Download the projects.svelte file and put it in the src/lib/components/extra/ directory.

2. Download the +page.svelte file and create a new folder named projects in the src/routes/ directory and put it there.

3. Download the projects.ts file and put it in the src/lib/config/ directory.

Usage: #

The default style is provided in projects.ts and can be replaced by yourself:

export type Project = {
  id: string
  name: string
  tags?: string[]
  feature?: string
  description?: string
  img: string
  link?: string
}

export const projects: Project[] = [
  {
    id: 'urara', // HTML ID
    name: 'Urara', // project Name
    tags: ['Svelte', 'TypeScript'],  // tag
    description: // description
      "🌸 Sweet, Powerful, IndieWeb-Compatible SvelteKit Blog Starter. [δ](Delta)",
    feature: 'Svelte', // feature
    img: 'https://github.com/importantimport/urara/raw/main/urara/hello-world/urara.webp',
    link: 'https://github.com/importantimport/urara'
  }
]

You can also refer to the use case source code: Urara-Blog/projects.ts at main · Sevichecc/Urara-Blog.