[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8739":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":32,"discoverSource":33},8739,"lotion","Dashibase\u002Flotion","Dashibase","An open-source Notion UI built with Vue 3 ","",null,"Vue",2910,142,23,17,0,2,58.67,"GNU General Public License v3.0",false,"main",true,[24,25,26,27,28],"editorjs","hacktoberfest","markdown","notion","vue","2026-06-12 04:00:41","\u003Ch1 align=\"center\">\u003Cb>🧴 Lotion\u003C\u002Fb>\u003C\u002Fh1>\n\u003Cp align=\"center\">\n  An open-source Notion UI built with Vue 3.\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Flotion.dashibase.com\" target=\"_blank\">Try demo\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fintent\u002Ffollow?screen_name=dashibase\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Ftwitter\u002Ffollow\u002Fdashibase?style=social&logo=twitter\" alt=\"follow on Twitter\">\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fdiscord.gg\u002FHjJCwm5\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fdiscord\u002F995844576013201449?logo=discord&logoColor=b0b7ff&color=5865f2\" alt=\"chat on Discord\">\n  \u003C\u002Fa>\n  \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fdashibase\u002Flotion?color=green\" \u002F>\n  \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@dashibase\u002Flotion\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@dashibase\u002Flotion\" \u002F>\n  \u003C\u002Fa>\n  \u003Cbr \u002F>\n\u003C\u002Fp>\n\n> We shared about Lotion and recreating the Notion UI during [CityJS Singapore's pre-conference meetup on 27th July](https:\u002F\u002Ftwitter.com\u002Fdashibase\u002Fstatus\u002F1554070309224861696?s=20&t=f9pkIgoxYUCgAL5tRTxK4Q)!\n\n\u003Cp align=\"center\">\n  \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FDashibase\u002Flotion\u002Fblob\u002Fmain\u002Fassets\u002Flotion.png\" style=\"border-radius: 10px;\" \u002F>\n\u003C\u002Fp>\n\n## Features\n\n- [x] Block-based editor\n- [x] Drag to reorder blocks\n- [x] Basic Markdown-parsing including bold, italic, headings and divider\n- [x] Type '\u002F' for command menu and shortcuts\n- [x] Register your own blocks\n- [x] Read-only mode\n\n## Getting Started\n\n**1. Install package**\n\n```bash\nnpm i @dashibase\u002Flotion\n```\n\n**2. Basic Lotion editor**\n\nThe following Vue component will initialize a basic Lotion editor.\n\n```javascript\n\u003Ctemplate>\n  \u003CLotion :page=\"page\" \u002F>\n\u003C\u002Ftemplate>\n\u003Cscript setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { v4 as uuidv4 } from 'uuid'\nimport { Lotion, registerBlock } from '@dashibase\u002Flotion'\n\nconst page = ref({\n  name: '🧴 Lotion',\n  blocks:[{\n    id: uuidv4(),\n    type: 'TEXT',\n    details: {\n      value: 'Hello, World!'\n    },\n  }],\n})\n\u003C\u002Fscript>\n```\n\n**3. Create custom components**\n\nSee `examples\u002FCustomBlock.vue` for an example of a custom block.\n\nThe custom block component can accept the following props:\n- `block`: A `Block` object. See `src\u002Futils\u002Ftypes.ts` for details.\n- `readonly`: A boolean, which sets whether the block\u002Feditor is in read-only mode.\n\nThe custom block component can also optionally expose the following methods (remember to call `defineExpose`):\n- `onSet`: This is triggered when a user converts any block into this blocktype. It is called before the blocktype is changed.\n- `onUnset`: This is triggered when a user converts this block into any blocktype. It is called before the blocktype is changed.\n\n```javascript\n\u003Ctemplate>\n  \u003Cdiv>\n    🧴\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript setup lang=\"ts\">\nimport { PropType } from 'vue'\nimport { types } from '..\u002Fsrc'\n\nconst props = defineProps({\n  block: {\n    type: Object as PropType\u003Ctypes.Block>,\n    required: true,\n  },\n  readonly: {\n    type: Boolean,\n    default: false,\n  },\n})\n\nfunction onSet () {\n  alert('Moisturizing...')\n}\n\nfunction onUnset () {\n  alert('Moisturized!')\n}\n\ndefineExpose({\n  onSet,\n  onUnset,\n})\n\u003C\u002Fscript>\n\n```\n\n**4. Register custom components**\n\nSee `examples\u002FExample.vue` for an example of registering a custom block.\n\nAfter creating the custom component, register it as follows:\n\n```javascript\nimport CustomBlock from '.\u002FCustomBlock.vue'\nimport { addIcons } from \"oh-vue-icons\"\nimport { FaPumpSoap } from \"oh-vue-icons\u002Ficons\"\nimport { registerBlock } from '@dashibase\u002Flotion'\n\n\u002F\u002F Add the icon (from oh-vue-icons.js.org\u002F)\naddIcons(FaPumpSoap)\n\u002F\u002F Register the block\n\u002F\u002F registerBlock('\u003CBLOCK_TYPE_ID>', '\u003CBLOCK_TYPE_LABEL>', \u003CBLOCK_COMPONENT>, 'BLOCK_ICON')\nregisterBlock('LOTION', 'Moisturize', CustomBlock, 'fa-pump-soap')\n\u003C\u002Fscript>\n```\n\nAfter that, you should be able to see the custom block when the user opens the menu to switch to different blocks.\n\n## Contributing\n\n**1. Clone this repository, go to the root directory and install packages**\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fdashibase\u002Flotion\ncd lotion\nnpm i\n```\n\n**2. Run dev**\n\n```bash\nnpm run dev\n```\n\nIf you head to http:\u002F\u002Flocalhost:5173 on your browser, you should see what looks like the screenshot above.\n\n**3. Contribute!**\n\nLotion is quite limited for now but we hope it serves as a good starting point for other folks looking to build their own editors.\n\nWe would love to make Lotion more extensible and welcome any suggestions or contributions!\n\nSee CONTRIBUTING.md for details.\n\n## Acknowledgements\n\nThis was made much easier with the following libraries and frameworks, thank you!\n\n- [vue-draggable-next](https:\u002F\u002Fgithub.com\u002Fanish2690\u002Fvue-draggable-next)\n- [tiptap](https:\u002F\u002Ftiptap.dev\u002F) and [ProseMirror](https:\u002F\u002Fprosemirror.net\u002F)\n- [Vue 3](https:\u002F\u002Fvuejs.org\u002F)\n- [Vite](https:\u002F\u002Fvitejs.dev\u002F)\n- [TypeScript](https:\u002F\u002Fwww.typescriptlang.org\u002F)\n- [Tailwind CSS](https:\u002F\u002Ftailwindcss.com\u002F)\n- [Headless UI](https:\u002F\u002Fheadlessui.dev\u002F)\n- [Oh, Vue Icons!](https:\u002F\u002Foh-vue-icons.js.org\u002F)\n- [Vitest](https:\u002F\u002Fvitest.dev\u002F)\n- [Playwright](https:\u002F\u002Fplaywright.dev\u002F)\n","Lotion 是一个使用 Vue 3 构建的开源 Notion UI。它提供基于块的编辑器，支持拖拽重排块、基本 Markdown 解析（如加粗、斜体、标题和分割线）、命令菜单及快捷方式等功能，并允许用户注册自定义块。此外，Lotion 还支持只读模式。该项目适用于需要高度可定制且功能丰富的文档编辑界面的应用场景中，如个人知识管理系统或团队协作工具等。通过简单的安装步骤和组件配置，开发者能够快速集成 Lotion 到自己的项目里，以提升用户体验。","2026-06-11 03:19:33","top_language"]