Vite প্লাগিন

এক নজরে Types

import type {  } from '@sveltejs/kit/vite'
import type {  } from 'shiki/langs'
import type {  } from 'unified'
import type {  } from 'vite'

/**
 * The options accepted by SvelteKit's `sveltekit()` vite plugin.
 *
 * On the newer SvelteKit project layout there is no `svelte.config.js` and all
 * config (`compilerOptions`, `adapter`, ...) is passed inline to `sveltekit()`
 * in `vite.config.ts`. Forward those options through `sveltepress()` so the
 * standalone `sveltekit()` plugin can be removed (having both crashes the dev
 * server with duplicated Svelte compilation).
 */
export type  = <typeof >[0]

export type  = <[], any>

export type  = (: string, : , ?: string) => string | <string>

export type  = [] | ((: ) => <[]>) | ((: ) => [])

export interface SiteConfig {
  ?: string
  ?: string
}
export interface ResolvedTheme {
  : string
  : string
  : string
  : 
  : 
  ?: []
  ?: []
  /**
   * The footnote label used for [remark rehype](https://github.com/remarkjs/remark-rehype#api)
   */
  ?: string
}

export type  = ((: []) => [])

export type  = ((: []) => [])

export interface PageInfo {
  : string
  : string
  : string
  : <string, unknown>
}

export interface LlmsConfig {
  ?: boolean
  ?: string
  ?: string
  ?: string
  ?: string
  ?: (: string, : <string, unknown>) => boolean
  ?: (: PageInfo, : PageInfo) => number
}

export interface SveltepressVitePluginOptions {
  ?: ResolvedTheme
  ?: SiteConfig
  ?: boolean
  ?: [] | 
  ?: [] | 
  ?: LlmsConfig
  /**
   * Options forwarded to the SvelteKit vite plugin that `sveltepress()` sets up
   * internally.
   *
   * Use this on the newer SvelteKit layout (no `svelte.config.js`, config passed
   * inline to `sveltekit()`) to move your `compilerOptions`, `adapter`, etc. into
   * `sveltepress()` and remove the standalone `sveltekit()` plugin. `'.md'` is
   * always added to `extensions` automatically.
   *
   * When omitted, SvelteKit reads its config from `svelte.config.js` as before.
   */
  ?: 
}

export type < = any> = (?: ) => ResolvedTheme

export type  = <any[], any> | [<any[], any>, any]

export type  = <>
ts

প্লাগিন অপশন

siteConfig

  • title: সাইটের টাইটেল। না থাকলে 'Untitled site' দেখাবে।
  • description: সাইটের ডেসক্রিপশন। না থাকলে 'Build by sveltepress' দেখাবে।

addInspect

যদি true সেট করা হয়, তাহলে Vite plugin inspect যোগ করা হবে। ভিট পাইপলাইন দেখা ও পর্যবেক্ষণ করা বেশ উপকারী।

theme

নিম্নে ResolvedTheme দেখুন

remarkPlugins

The remark plugins ব্যবহার করা হয়েছে মার্কডাউন এর জন্য। আরো জানতে Remark plugins পড়ুন।

rehypePlugins

The rehype plugins ব্যবহার করা হয়েছে html জেনারেট করার জন্য। আরো জানতে Rehype plugins পড়ুন।

ResolvedTheme

name

থিমের নাম

globalLayout

গ্লোবাল লে আউটের অ্যাবসোলুট পাথ। svelte ফাইল হতে হবে যেমন: path.resolve(process.cwd(), 'ThemeGlobalLayout.svelte')

pageLayout

পেজ লে আউটের অ্যাবসোলুট পাথ svelte ফাইল হতে হবে যেমন: path.resolve(process.cwd(), 'ThemePageLayout.svelte')

vitePlugins

  • যদি এক বা একাধিক প্লাগিন পাস করা হয়, সেই প্লাগিনগুলো sveltepress এর সামনে অ্যাপ্লাই করা হবে।
  • যদি একটি ফাংশন পাস করা হয়, এটি sveltepress অ্যাক্সেপ্ট করবে এবং প্লাগিনের গ্রুপ রিটার্ন করবে। আপনি রিটার্নকৃত প্লাগিন চেইনে sveltepress এর প্লাগিন অর্ডার কাস্টমাইজ করতে পারেন।
থিম ভিট প্লাগিন সম্পর্কে

এটি হয়ত একটু অদ্ভুত যে থিমের ভিট প্লাগিন আছে। কিন্তু এটি উপকারী যখন থিম কিছু ভার্চুয়াল মডিউল যুক্ত করতে চায় অথবা কিছু টেম্প ফাইল তৈরি করতে চায়।

highlighter

কোড হাইলাইটিং এর জন্য ব্যবহৃত। যেমন, ডিফল্ট থিম shiki ব্যবহার করে। আপনি বিস্তারিত ব্যবহারবিধি জানতে ডিফল্ট থিম হাইলাইটার সোর্স কোড চেক করতে পারেন।

remarkPlugins

The remark plugins ব্যবহৃত হয় মার্কডাউন পার্সিং এর জন্য। বিস্তারিত জানতে Remark plugins পড়ুন।

rehypePlugins

html জেনারেটরের জন্য The rehype plugins ব্যবহৃত হয়। বিস্তারিত জানতে Rehype plugins পড়ুন।

প্লাগিনের ধারাবাহিকতা

থিম কর্তৃক প্রোভাইডকৃত The remark এবং rehype plugins তা ভিট প্লাগিনের প্রোভাইডকৃত প্লাগিনের পূর্বে কল করা হবে। উদাহরণস্বরূপ:

vite.config.(js|ts)
import {  } from '@sveltepress/theme-default'
import {  } from '@sveltepress/vite'
import {  } from 'vite'

export default ({
  : [
    ({
      : (/* theme options */),
      : [/* yourRemarkPlugin */]
    })
  ]
})
ts

yourRemarkPlugin রান হবে ডিফল্ট থিমের remark plugins এর পরে।

footnoteLabel

ফুটনোটের টাইটেল কাস্টমাইজ করতে। ডিফল্ট হচ্ছে "Footnotes"

Virtual modules

virtual:sveltepress/site

এই মডিউল siteConfig কে হোল্ড করে। এখানে একটি উদাহরণ-

The site title is: Sveltepress

The site description is: A content centered site build tool

<script>
  import  from 'virtual:sveltepress/site'
</script>

<p>The site title is: {.}</p>
<p>The site description is: {.}</p>
svelte
Click fold/expand code

Low level API

The @sveltepress/vite এর mdToSvelte একটি লোড লেভেল এপিআই ফাংশন আছে এটি Sveltepress এ সকল বড় বড় মার্কডাউন রেন্ডারের জন্য ব্যবহৃত হয়। এটি Svelte এর সাথে সম্পৃক্ত আরো বেসিক মার্কডাউন রেন্ডারিং ইঞ্জিনের জন্য ব্যবহার করা যাবে ।

ব্যবহারবিধি:

import {  } from '@sveltepress/vite'

const  = `
---
title: Foo
---
<script>
  const foo = 'bar'
</script>
# Title

foo in script is: {foo}

[Foo Link](https://foo.bar)
`

const { ,  } = await ({
  ,
  : [], // your custom remark plugins
  : [], // your custom rehype plugins
  : async (, , ) => .('The rendered highlighted code html'), // your custom code highlighter
  : 'foo.md', // the virtual file path
})

// The rendered svelte code


// The frontmatter object, { title: 'Foo' }
ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Typescript এর ব্যবহার

প্লাগিন অপশন এবং ভার্চুয়াল মডিউল টাইপ টিপসের জন্য src/app.d.ts তে @sveltepress/vite/types যুক্ত করতে হবে

/src/app.d.ts
/// <reference types="@sveltepress/vite/types" />

// এখানে আপনার অন্যান্য টাইপ থাকবে
ts
Suggest changes to this page
Last update at: 2024/11/25 05:47:03