{"id":20093106,"url":"https://github.com/lottiefiles/plugin-strapi","last_synced_at":"2025-05-06T04:31:59.000Z","repository":{"id":173366318,"uuid":"603885595","full_name":"LottieFiles/plugin-strapi","owner":"LottieFiles","description":null,"archived":false,"fork":false,"pushed_at":"2024-09-02T08:37:04.000Z","size":2668,"stargazers_count":4,"open_issues_count":9,"forks_count":2,"subscribers_count":7,"default_branch":"main","last_synced_at":"2025-04-09T08:23:25.764Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LottieFiles.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-19T21:02:04.000Z","updated_at":"2024-05-16T21:57:34.000Z","dependencies_parsed_at":"2024-11-13T16:56:07.476Z","dependency_job_id":null,"html_url":"https://github.com/LottieFiles/plugin-strapi","commit_stats":null,"previous_names":["lottiefiles/plugin-strapi"],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fplugin-strapi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fplugin-strapi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fplugin-strapi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fplugin-strapi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LottieFiles","download_url":"https://codeload.github.com/LottieFiles/plugin-strapi/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252622228,"owners_count":21777945,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T16:45:53.823Z","updated_at":"2025-05-06T04:31:58.587Z","avatar_url":"https://github.com/LottieFiles.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# LottieFiles plugin for Strapi\n\nA plugin for [Strapi CMS](https://strapi.io), that allows creating a custom input field for adding lottie animations seamlessly via [LottieFiles](https://lottiefiles.com/recent) public animation repository.\n\n## Table of contents\n\n- ✨ [Features](##-features)\n- ⏳ [Installation](##-installation)\n- 🔧 [Configuration](##-configuration)\n- 👨‍💻 [Usage](##-usage)\n- 🕸️ [API](##-api)\n\n---\n\n## ✨ `features`\n\n- Custom field creation in Strapi models\n- Browse LottieFiles public animation repository based on:\n  - [Recent animations](https://lottiefiles.com/recent)\n  - [Popular animations](https://lottiefiles.com/popular)\n  - [Featured animations](https://lottiefiles.com/featured)\n- Keyword based search\n- Animation metadata, with creator info\n\n---\n\n## ⏳ `installation`\n\nAt the root of your Strapi project, run the following commands to add the plugin\n\n```\nnpm install strapi-plugin-lottie\n# or\nyarn add strapi-plugin-lottie\n```\n\nStart your Strapi application with in development mode\n\n```\nnpm run develop\n# or\nyarn develop\n```\n\n---\n\n## 🔧 `configuration`\n\nTo start using the plugin, enable the plugin in strapi configuration.\n\n```\n./config/plugins.ts\n\nexport default {\n    // ...\n    \"strapi-plugin-lottie\": {\n        enabled: true\n    },\n    // ...\n}\n```\n\nAlso, configure the `strapi::security` middleware by adding the directives below to allow the plugin to load required assets.\n\n```\n./config/middleware.ts\n\nexport default [\n  // ...\n  {\n      name: \"strapi::security\",\n      config: {\n        contentSecurityPolicy: {\n          useDefaults: true,\n          directives: {\n            \"connect-src\": [\"'self'\", \"https:\"],\n            \"img-src\": [\n              \"'self'\",\n              \"data:\",\n              \"blob:\",\n              \"market-assets.strapi.io\",\n              \"*.lottiefiles.com\",\n            ],\n            upgradeInsecureRequests: null,\n          },\n        },\n      }\n  },\n  // ...\n];\n```\n\n---\n\n## 👨‍💻 `usage`\n\n- Goto `Content-Type Builder` and create a new collection type. In the field selection dialogue, navigate to `custom` tab. Select `Lottie` field\n- Give the new field a name and confirm. The new field should be visible in the collection's field list, with type: `Custom field`\n- Goto `Content Manager`, select the collection type that was created. Click the `Create new entry`\n- Click the `Lottie Field`, to open the animation browser modal.\n- Once selected, the animation preview can be seen in the Lottie field as well as collection list view after saving the entry\n\n---\n\n## 🕸️ `api`\n\nLottie field data can be consumed via both REST and GraphQL APIs provided by Strapi CMS.\n\nIn both apis, the returned field data has the following structure\n\n```\n{\n    \"bgColor\": \"#fff\",\n    \"gifUrl\": \"https://assets1.lottiefiles.com/render/lhu59gtz.gif\",\n    \"imageUrl\": \"https://assets3.lottiefiles.com/render/lhu59gtz.png\",\n    \"lottieUrl\": \"https://assets9.lottiefiles.com/dotlotties/dlf10_rrHcSPZWAB.lottie\",\n    \"name\": \"Wave Form\",\n    \"createdBy\": {\n      \"avatarUrl\": \"https://lh3.googleusercontent.com/a/AGNmyxburVBP66UgfPD1D-I7l1wIwJmc1vVKOiGHXfrM=s96-c\",\n      \"firstName\": \"Juan\"\n    }\n  }\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flottiefiles%2Fplugin-strapi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flottiefiles%2Fplugin-strapi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flottiefiles%2Fplugin-strapi/lists"}