Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/samlfair/prismic-svelte-archive
https://github.com/samlfair/prismic-svelte-archive
Last synced: 8 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/samlfair/prismic-svelte-archive
- Owner: samlfair
- Created: 2021-07-19T12:38:24.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2021-09-02T12:38:39.000Z (about 3 years ago)
- Last Synced: 2024-04-29T13:50:36.753Z (7 months ago)
- Language: JavaScript
- Size: 58.6 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# `prismic-svelte`
**WARNING: This project is in early development. See issues and planning on [the GitHub repo](https://github.com/samlfair/prismic-svelte).**
A set of helpers for developing Prismic projects with Svelte.
## To do
- [ ] Add HTML Serializer to config (and asHTML)
- [ ] Add Slices to config
- [ ] Create a SliceZone component
- [ ] Handle the API options
Do we want to add an Image component?
## Installation
To add `prismic-svelte`, first install:
```bash
npm i prismic-svelte
```
Then, create `/src/lib/prismic.js`, and paste in the following code:
```js
import createPrismicSvelte from 'prismic-svelte'
const config = {
// Fill in your repo name (required)
repoName: 'prismicio-docs-v3',
// Define a route for each Custom Type
routes: [
{
type: 'homepage',
path: '/',
},
{
type: 'page',
path: '/:uid',
},
{
type: 'post',
path: '/blog/:uid',
},
],
// Add an access token (only if your repo is private)
accessToken: null,
// Add any API options
options: null,
}
const Prismic = createPrismicSvelte(config)
export const { repoName, endpoint, Client, asText, asHTML, asLink, asDate } =
Prismic
export default Prismic
```
Fill in the config options. Only `repoName` is required.
`repoName`: The name of your [repository](https://prismic.io/docs/core-concepts/what-is-a-repo) in Prismic (required).
`routes`: A collection of routes for Prismic's [Route Resolver](https://prismic.io/docs/core-concepts/link-resolver-route-resolver).
`accessToken`: An access token for the Prismic API; required only when your repo is private.
`options`: Options for your Prismic API queries.
## Usage
In Svelte projects, use a relative path to import the Prismic helpers:
```html
import Prismic from './lib/prismic'
```
In SvelteKit, use the `$` alias:
```html
import Prismic from '$lib/prismic'
```
The plugin exports the following properties and methods:
- `repoName`
- `endpoint`
- `asText()`
- `asHTML()`
- `asLink()`
- `asDate()`
- `Client()`
- `Client().get()`
- `Client().getFirst()`
- `Client().getAll()`
- `Client().getByID()`
- `Client().getByIDs()`
- `Client().getAllByIDs()`
- `Client().getByUID()`
- `Client().getSingle()`
- `Client().getByType()`
- `Client().getAllByType()`
- `Client().getByTag()`
- `Client().getAllByTag()`
- `Client().getByTags()`
- `Client().getAllByTags()`
- ...
See prismic.io/docs for information on how to use these methods.