Light

prismicio / prismic-svelte Goto Github PK

View Code? Open in Web Editor NEW

21.0 11.0 6.0 1.33 MB

Svelte components and helpers to fetch and present Prismic content

Home Page: https://prismic.io/docs/technical-reference/prismicio-svelte

License: Apache License 2.0

JavaScript 7.04% TypeScript 31.44% Svelte 61.52%

javascript typescript prismic svelte

prismic-svelte's Introduction

@prismicio/svelte

Svelte components to present Prismic content.

📝 Display content from Prismic like Rich Text and Link fields;
🍡 Render Prismic Slice Zones declaratively with Svelte components;

Install

npm install @prismicio/svelte

Documentation

To discover what's new on this package check out the changelog. For full documentation, visit the official Prismic documentation.

Contributing

Whether you're helping us fix bugs, improve the docs, or spread the word, we'd love to have you as part of the Prismic developer community!

Asking a question: Open a new topic on our community forum explaining what you want to achieve / your question. Our support team will get back to you shortly.

Reporting a bug: Open an issue explaining your application's setup and the bug you're encountering.

Suggesting an improvement: Open an issue explaining your improvement or feature so we can discuss and learn more.

Submitting code changes: For small fixes, feel free to open a pull request with a description of your changes. For large changes, please first open an issue so we can discuss if and how the changes should be implemented.

For more clarity on this project and its structure you can also check out the detailed CONTRIBUTING.md document.

License

Copyright 2013-2023 Prismic <[email protected]> (https://prismic.io)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

prismic-svelte's People

Contributors

Stargazers

Watchers

Forkers

ekmixon svelterun sayantan-s seanpm2001 iyonghusaeng samlfair

prismic-svelte's Issues

Add inline component documentation using JSDoc (built into Svelte)

As this library is developed, it would be great to start adding inline documentation which can be used to provide intellisense through that Svelte Language Server.

For example, here's a component with basic documentation:

<script lang="ts">
	import { RichText } from 'prismic-dom';

	import type { RichTextField as RichTextFieldType } from '@prismicio/types';
	import type { TitleField as TitleFieldType } from '@prismicio/types';
        /** A Prismic field. */
	export let field: TitleFieldType | RichTextFieldType;
	export let separator: string = undefined;
</script>
<!--
	@component
	Produces plain text from Prismic Rich Text or Title fields.
	
-->
{@html RichText.asText(field, separator)}

https://svelte.dev/faq#how-do-i-document-my-components

This shows to the user like this:

PrismicImage lazy loading Svelte

I have an issue with handling images with slow internet connection in svelte app using prismic library
I've tried to use on:load like this

<script>
  import { PrismicImage } from '@prismicio/svelte'

  const a = () => {
    console.log(1)
  }
</script>
<PrismicImage
        on:load={a}
        on:loadeddata={()=>console.log(1)}
        on:loadedmetadata={()=>console.log(1)}
        loading='lazy'
        style="position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3rem; -webkit-clip-path: url(#{pathID}); clip-path: url(#{pathID});"
        {field}
        imgixParams={{ q: 30 }}
      />

but there is no any reaction on load and I do not really see any difference if I have loading='lazy'

It is the copy paste of my question on prismic community.

My suggestion is pretty simple, it would be nice to have working on:load handlers in PrismicImage component

BTW, thank you for easy understandable webs and docs :D

Recommend Projects

React

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

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

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.