构建全球CC组件库,Creative Commons开源的卡塔尔vs葡萄牙分析

过程中我Outreachy Creative Commons实习,我得到了一些很酷的项目工作,其中一个是CC卡塔尔vs葡萄牙分析全球组件库由我的导师Brylie克里斯托弗·奥克斯利。

有一个统一的设计主题/外观或体验跨不同的CC网站一直在开发这些网站的一个重要因素。考虑到这一点,有几个组件是大多数CC web属性的一部分。特别是三个组件:-

而不是每个项目实现这些组件导致代码重复跨项目和维护问题,我们决定是最好有一个独立的组件库,最终导致了CC全球组件项目。

全球组件库的目的是构建一个定制的web组件,可以通过CDN服务。在规划的同时,我们需要决定要使用的技术。愉快地,大多数web框架的反应和Vue可用于开发,但我们想要一个简单的实现用更少的依赖关系。一些理想的特点,我们正在寻找的是一种技术,符合下列标准:

我们正在考虑的两个主要技术Vue JS和闪电Web组件但最终决定使用Vue JS因为我们已经有了其他项目开发的Vue(如选择器项目)。

脚手架项目中,我们使用Vue证监会汇总,这是一个CLI模板实用程序,支架的最小设置编译库多个Vue证监会(单文件组件)——通过npm成准备好分享。这样,我们就可以专注于建筑模板。我们使用词汇的CSS,我们自己的CC设计包样式的组件。

CC全球页脚组件是最简单的,因为主要是静态HTML。该组件有两个属性:

CC全球组件导入CDN脚本之后,我们可以使用CC等全球在任何页面页脚:

<cc-global-footerdonation-url=“http://example.com”logo-url=“/例子/ logo-white.png”/ >

这呈现如下所示:

CC全球页脚

CC探索组件是一个可扩展的横幅coontains CC网络所有属性的链接。该组件使用一个点击监听器的切换可扩展的旗帜被点击时显示或隐藏。与CC全球页脚组件,CC探索组件有两个属性。

<cc-exploredonation-url=“http://example.com”logo-url=“/例子/ logo-white.png”/ >

这呈现如下所示:

CC探索

CC全球头是一个重要组成部分,因为我们必须使API调用能够渲染等下游项目的菜单项许可证和工具。我们使用的Axios库API调用父项目的Wordpress的后端Projec_www.familygiver.com。

CC全球头有三个必需属性,基url,donation-url和logo-url,用于API调用的url,分别捐赠按钮和图标。有一个额外的属性use-menu-placeholders你可以设置显示占位符菜单项如果你在一个开发环境。然而,stagin /生产我们不使用这个属性设置。

<cc-global-header基url=“http://127.0.0.1:8000”donation-url=“http: / example.com”use-menu-placeholderslogo-url=“/例子/ logo-black.png”/ >

这显示如图所示:

CC全球头

这个库的第一个版本(0.1.1)发布,发布到NPM 12月10日,2021年。至今为止(撰写本文时)我们有一些变化和优化代码和目前的版本0.5.0。这对我来说是一个非常丰富的经验,因为它是我第一次使用Vue JS。我们也有额外的代码评审和优化胆小的机器人。

CC全球组件3所有组件使用显示为:

CC全球组件

你可以找到CC全球组件项目:

构建全球CC组件库