Modernize package for Vue 3 and Vite

.github/workflows/ci.yml

@@ -0,0 +1,23 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - master
+      - main
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+      - name: Install dependencies
+        run: npm ci
+      - name: Build package
+        run: npm run build

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sergei Iudin
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,27 +1,99 @@
-# see-on-github Vue.js NPM Package
+# see-on-github-vue
 [![npm version](https://badge.fury.io/js/see-on-github-vue.svg)](https://badge.fury.io/js/see-on-github-vue)
-[![Build Status](https://travis-ci.com/yudin-s/see-on-github.svg?branch=master)](https://travis-ci.com/yudin-s/see-on-github)
+[![CI](https://github.com/yudin-s/see-on-github-vue/actions/workflows/ci.yml/badge.svg)](https://github.com/yudin-s/see-on-github-vue/actions/workflows/ci.yml)
 
-Improve your portfolio websites by this simple component! 
+A small Vue 3 component that adds a sticky "See on GitHub" link to the bottom of a page.
 
-## How to install? 
+## Install
 
-`npm i see-on-github-vue
-`
+```bash
+npm i see-on-github-vue
+```
 
-After just put this component code: 
+```bash
+yarn add see-on-github-vue
+```
 
-` <see-on-github linkTo="[Link to you github project]" />
-`
+```bash
+pnpm add see-on-github-vue
+```
 
-## Changelog 
+## Usage
 
-### 1.0.5
+### Global registration
 
-- Frontend changes for make center position correctness 
-- Fix huge SVG issue on Nuxt.js Run Generate issue. 
+```js
+import { createApp } from 'vue';
+import App from './App.vue';
+import SeeOnGithub from 'see-on-github-vue';
+import 'see-on-github-vue/style.css';
 
+const app = createApp(App);
+app.use(SeeOnGithub);
+app.mount('#app');
+```
 
-## How it's look like? 
+```vue
+<template>
+  <SeeOnGithub link-to="https://github.com/your/repo" />
+</template>
+```
 
-![Example image](https://github.com/yudin-s/see-on-github/blob/master/assets/example.png?raw=true)
+### Local component import
+
+```vue
+<script setup>
+import SeeOnGithub from 'see-on-github-vue';
+import 'see-on-github-vue/style.css';
+
+const repoUrl = 'https://github.com/your/repo';
+</script>
+
+<template>
+  <SeeOnGithub
+    :link-to="repoUrl"
+    caption="Open source on GitHub"
+  />
+</template>
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `linkTo` | `String` | Yes | - | URL opened by the sticky link. Supports `https://`, `http://`, protocol-relative, and root-relative URLs. |
+| `caption` | `String` | No | `Watch sources on GitHub` | Visible link text. |
+| `target` | `String` | No | `_blank` | Anchor target. |
+| `rel` | `String` | No | `''` | Anchor rel value. `noopener noreferrer` is added automatically for `_blank` targets. |
+| `ariaLabel` | `String` | No | `Open source code on GitHub` | Accessible label for the anchor. |
+
+## Development
+
+```bash
+npm install
+npm run dev
+npm run build
+npm run preview
+```
+
+The package is built with Vite library mode and publishes ESM, CommonJS, UMD, CSS, and TypeScript declaration files from `dist/`.
+
+## Migration from v1
+
+Version 2 targets Vue 3 and Node 18+. Vue 2 projects should stay on `see-on-github-vue@1`.
+
+Plugin registration changed from Vue 2's global constructor API to Vue 3's app API:
+
+```js
+// Vue 2 / v1
+Vue.use(SeeOnGithub);
+
+// Vue 3 / v2
+createApp(App).use(SeeOnGithub).mount('#app');
+```
+
+Template usage is still the same conceptually. In templates, use kebab-case props such as `link-to` and `aria-label`.
+
+## How it looks
+
+![Example image](https://github.com/yudin-s/see-on-github-vue/blob/master/assets/example.png?raw=true)

dist/index.d.ts

@@ -0,0 +1,22 @@
+import type { App, DefineComponent } from 'vue';
+
+export interface SeeOnGithubProps {
+  linkTo: string;
+  caption?: string;
+  target?: string;
+  rel?: string;
+  ariaLabel?: string;
+}
+
+declare const SeeOnGithub: DefineComponent<SeeOnGithubProps> & {
+  install(app: App, options?: { name?: string }): void;
+};
+
+declare const SeeOnGithubPlugin: {
+  install(app: App, options?: { name?: string }): void;
+};
+
+declare function install(app: App, options?: { name?: string }): void;
+
+export { SeeOnGithub, SeeOnGithubPlugin, install };
+export default SeeOnGithub;

dist/see-on-github-vue.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),c=(e,r)=>{const t=e.__vccOpts||e;for(const[o,s]of r)t[o]=s;return t},u={name:"SeeOnGithub",props:{linkTo:{type:String,required:!0,validator:e=>e.startsWith("http://")||e.startsWith("https://")||e.startsWith("//")||e.startsWith("/")},caption:{type:String,default:"Watch sources on GitHub"},target:{type:String,default:"_blank"},rel:{type:String,default:""},ariaLabel:{type:String,default:"Open source code on GitHub"}},computed:{safeRel(){if(this.target!=="_blank")return this.rel||null;const e=new Set(this.rel.split(" ").filter(Boolean));return e.add("noopener"),e.add("noreferrer"),Array.from(e).join(" ")}}},d={class:"see-on-github"},h=["href","target","rel","aria-label"],g={class:"see-on-github__caption"};function _(e,r,t,o,s,l){return n.openBlock(),n.createElementBlock("div",d,[n.createElementVNode("a",{class:"see-on-github__container",href:t.linkTo,target:t.target,rel:l.safeRel,"aria-label":t.ariaLabel},[r[0]||(r[0]=n.createElementVNode("span",{class:"see-on-github__icon","aria-hidden":"true"},[n.createElementVNode("svg",{role:"img",viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg"},[n.createElementVNode("title",null,"GitHub"),n.createElementVNode("path",{d:"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"})])],-1)),n.createElementVNode("span",g,n.toDisplayString(t.caption),1)],8,h)])}const a=c(u,[["render",_]]),i=function(r,t={}){r.component(t.name||a.name||"SeeOnGithub",a)},b={install:i};a.install=i;exports.SeeOnGithub=a;exports.SeeOnGithubPlugin=b;exports.default=a;exports.install=i;