vue-about-me
Version:
A Vue component for displaying About Me Info.
317 lines (316 loc) • 13.6 kB
JavaScript
import { markRaw as p, openBlock as t, createElementBlock as l, createElementVNode as i, defineComponent as b, computed as f, createBlock as _, normalizeStyle as a, toRefs as v, unref as n, toDisplayString as d, createVNode as w, createCommentVNode as C, Fragment as Y, renderList as M } from "vue";
const B = {
viewBox: "0 0 24 24",
width: "1.11em",
height: "1.11em"
};
function q(r, e) {
return t(), l("svg", B, e[0] || (e[0] = [
i("path", {
fill: "currentColor",
d: "M7.172 2.757L10.414 6h3.171l3.243-3.242a1 1 0 1 1 1.415 1.415L16.414 6H18.5A3.5 3.5 0 0 1 22 9.5v8a3.5 3.5 0 0 1-3.5 3.5h-13A3.5 3.5 0 0 1 2 17.5v-8A3.5 3.5 0 0 1 5.5 6h2.085L5.757 4.171a1 1 0 0 1 1.415-1.415M18.5 8h-13a1.5 1.5 0 0 0-1.493 1.356L4 9.5v8a1.5 1.5 0 0 0 1.356 1.493L5.5 19h13a1.5 1.5 0 0 0 1.493-1.355L20 17.5v-8A1.5 1.5 0 0 0 18.5 8M8 11a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1m8 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1"
}, null, -1)
]));
}
const j = p({ name: "ri-bilibili-line", render: q }), S = {
viewBox: "0 0 24 24",
width: "1.11em",
height: "1.11em"
};
function L(r, e) {
return t(), l("svg", S, e[0] || (e[0] = [
i("path", {
fill: "currentColor",
d: "M12 2a7 7 0 0 1 6.992 7.339A6 6 0 0 1 17 21H7A6 6 0 0 1 5.008 9.339A7 7 0 0 1 12 2m0 2a5 5 0 0 0-4.994 5.243l.07 1.488l-1.404.494A4.002 4.002 0 0 0 7 19h10a4 4 0 1 0-3.796-5.265l-1.898-.633A6 6 0 0 1 17 9a5 5 0 0 0-5-5"
}, null, -1)
]));
}
const J = p({ name: "ri-cloud-line", render: L }), D = {
viewBox: "0 0 24 24",
width: "1.11em",
height: "1.11em"
};
function z(r, e) {
return t(), l("svg", D, e[0] || (e[0] = [
i("path", {
fill: "currentColor",
d: "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10s-4.477 10-10 10m-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.01 8.01 0 0 0 5.648 6.667M10.03 13c.151 2.439.848 4.73 1.97 6.752A15.9 15.9 0 0 0 13.97 13zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.01 8.01 0 0 0 19.938 13M4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333A8.01 8.01 0 0 0 4.062 11m5.969 0h3.938A15.9 15.9 0 0 0 12 4.248A15.9 15.9 0 0 0 10.03 11m4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.01 8.01 0 0 0-5.648-6.667"
}, null, -1)
]));
}
const U = p({ name: "ri-global-line", render: z }), V = {
viewBox: "0 0 24 24",
width: "1.11em",
height: "1.11em"
};
function H(r, e) {
return t(), l("svg", V, e[0] || (e[0] = [
i("path", {
fill: "currentColor",
d: "M15.35 5.55a2.9 2.9 0 0 0-2.9 2.847l-.028 1.575a.6.6 0 0 1-.68.583l-1.562-.212c-2.053-.28-4.021-1.226-5.91-2.799c-.597 3.31.57 5.603 3.383 7.372L9.4 16.014a.6.6 0 0 1 .035.993L7.843 18.17c.947.059 1.846.017 2.592-.131c4.718-.942 7.855-4.492 7.855-10.348c0-.478-1.013-2.141-2.94-2.141m-4.9 2.81a4.9 4.9 0 0 1 8.385-3.355c.711-.005 1.316.175 2.668-.645c-.334 1.64-.5 2.352-1.213 3.331c0 7.642-4.697 11.358-9.464 12.309c-3.267.652-8.02-.419-9.38-1.841c.693-.054 3.513-.357 5.143-1.55c-1.38-.91-6.868-4.14-3.261-12.823q2.54 2.966 5.15 4.037c1.157.475 1.442.466 1.973.538"
}, null, -1)
]));
}
const E = p({ name: "ri-twitter-line", render: H }), I = {
viewBox: "0 0 24 24",
width: "1.11em",
height: "1.11em"
};
function N(r, e) {
return t(), l("svg", I, e[0] || (e[0] = [
i("path", {
fill: "currentColor",
d: "M8.667 11.511a1.276 1.276 0 0 1-1.285-1.285c0-.718.568-1.286 1.285-1.286c.718 0 1.285.568 1.285 1.286c0 .717-.567 1.285-1.285 1.285m6.667 0a1.276 1.276 0 0 1-1.285-1.285c0-.718.568-1.286 1.285-1.286s1.285.568 1.285 1.286c0 .717-.568 1.285-1.285 1.285m-8.511 7.704l.715-.436a4 4 0 0 1 2.706-.536q.317.05.52.076q.61.081 1.237.081c4.42 0 7.9-3.022 7.9-6.6S16.42 5.2 12 5.2c-4.421 0-7.9 3.022-7.9 6.6c0 1.365.5 2.673 1.431 3.78q.073.088.215.236a4 4 0 0 1 1.1 3.102zm-.63 2.727a1 1 0 0 1-1.527-.93l.189-2.26a2 2 0 0 0-.55-1.551a7 7 0 0 1-.303-.333C2.806 15.447 2.1 13.695 2.1 11.8c0-4.75 4.432-8.6 9.9-8.6c5.467 0 9.9 3.85 9.9 8.6s-4.433 8.6-9.9 8.6q-.765-.001-1.5-.098q-.229-.03-.568-.084a2 2 0 0 0-1.353.268z"
}, null, -1)
]));
}
const O = p({ name: "ri-wechat2-line", render: N }), R = {
viewBox: "0 0 24 24",
width: "1.11em",
height: "1.11em"
};
function T(r, e) {
return t(), l("svg", R, e[0] || (e[0] = [
i("path", {
fill: "currentColor",
d: "M20.195 14.197c0 3.362-4.53 6.424-9.926 6.424c-4.95 0-9.268-2.432-9.268-6.087c0-1.947 1.18-4.087 3.24-6.088C7.072 5.7 10.47 4.413 12.098 5.998c.498.482.723 1.122.719 1.858c1.975-.576 3.65-.404 4.483.752c.449.623.532 1.38.326 2.207c1.511.61 2.568 1.77 2.568 3.382m-4.44-2.07c-.386-.41-.4-.92-.198-1.41c.208-.508.213-.812.12-.94c-.264-.368-1.533-.363-3.194.311a2 2 0 0 1-.509.14c-.344.046-.671.001-.983-.265c-.419-.359-.473-.855-.322-1.316c.214-.67.18-1.076.037-1.215c-.186-.18-.777-.191-1.659.143C7.978 7.98 6.75 8.799 5.633 9.88c-1.707 1.659-2.632 3.337-2.632 4.653c0 2.242 3.276 4.087 7.268 4.087c4.42 0 7.926-2.37 7.926-4.424c0-.738-.637-1.338-1.673-1.652c-.394-.113-.536-.171-.767-.417m7.054-1.617a1 1 0 1 1-1.936-.502a4 4 0 0 0-4.693-4.924a1 1 0 0 1-.407-1.958a6 6 0 0 1 7.036 7.384"
}, null, -1)
]));
}
const F = p({ name: "ri-weibo-line", render: T }), G = {
viewBox: "0 0 24 24",
width: "1.11em",
height: "1.11em"
};
function K(r, e) {
return t(), l("svg", G, e[0] || (e[0] = [
i("path", {
fill: "currentColor",
d: "M20 12a8 8 0 1 1-16 0a8 8 0 0 1 16 0m-8 10c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10m.358-12.618q-1.458.607-5.831 2.513q-.711.282-.744.552c-.038.304.343.424.862.587l.218.07c.51.166 1.198.36 1.555.368q.486.01 1.084-.4q4.086-2.76 4.218-2.789c.063-.014.149-.032.207.02c.059.052.053.15.047.177c-.038.161-1.534 1.552-2.308 2.271q-.344.324-.683.653c-.474.457-.83.8.02 1.36c.861.568 1.73 1.134 2.57 1.733c.414.296.786.56 1.246.519c.267-.025.543-.276.683-1.026c.332-1.77.983-5.608 1.133-7.19a1.8 1.8 0 0 0-.017-.393a.42.42 0 0 0-.142-.27c-.12-.098-.305-.118-.387-.117c-.376.007-.953.207-3.73 1.362"
}, null, -1)
]));
}
const P = p({ name: "ri-telegram-line", render: K }), Q = {
viewBox: "0 0 24 24",
width: "1.11em",
height: "1.11em"
};
function W(r, e) {
return t(), l("svg", Q, e[0] || (e[0] = [
i("path", {
fill: "currentColor",
d: "M5.884 18.653c-.3-.2-.558-.455-.86-.816a51 51 0 0 1-.466-.579c-.463-.575-.755-.841-1.056-.95a1 1 0 1 1 .675-1.882c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.588.196 1.15.14c.024-.382.094-.753.202-1.095c-2.968-.726-4.648-2.64-4.648-6.396c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.124 1.937.17 3.415 1.096a11.7 11.7 0 0 1 2.687-.308c.912 0 1.819.104 2.684.308c1.477-.933 2.614-1.227 3.422-1.096q.128.02.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.296.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.878.19 1.38c0 .665-.002 1.299-.007 2.01c0 .19-.002.394-.005.706a1 1 0 0 1-.018 1.958c-1.14.227-1.984-.532-1.984-1.525l.002-.447l.005-.705c.005-.707.008-1.337.008-1.997c0-.697-.184-1.152-.426-1.361c-.661-.57-.326-1.654.541-1.751c2.966-.333 4.336-1.482 4.336-4.66c0-.955-.312-1.744-.913-2.404A1 1 0 0 1 17.2 6.19c.166-.414.236-.957.095-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135a9.6 9.6 0 0 0-2.592-.349c-.89 0-1.772.118-2.592.35a1 1 0 0 1-.829-.134c-.753-.507-1.374-.807-1.87-.947c-.143.653-.072 1.194.093 1.607a1 1 0 0 1-.189 1.045c-.597.655-.913 1.458-.913 2.404c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.202 1.177.545 1.748c-.193.168-.43.732-.43 1.364v3.15c0 .985-.834 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.661-.088-2.254-.485"
}, null, -1)
]));
}
const X = p({ name: "ri-github-line", render: W }), Z = ["data-icon"], k = /* @__PURE__ */ b({
__name: "SocialIcon",
props: {
type: String,
icon: String,
color: String
},
setup(r) {
const e = r, o = f(() => ({
"--vam-color": e.color
}));
return (m, c) => {
const y = X, s = P, u = F, h = O, g = E, A = U, x = J, $ = j;
return e.type === "github" ? (t(), _(y, {
key: 0,
style: a(o.value)
}, null, 8, ["style"])) : e.type === "telegram" ? (t(), _(s, {
key: 1,
style: a(o.value)
}, null, 8, ["style"])) : e.type === "weibo" ? (t(), _(u, {
key: 2,
style: a(o.value)
}, null, 8, ["style"])) : e.type === "wechat" ? (t(), _(h, {
key: 3,
style: a(o.value)
}, null, 8, ["style"])) : e.type === "twitter" ? (t(), _(g, {
key: 4,
style: a(o.value)
}, null, 8, ["style"])) : e.type === "blog" ? (t(), _(A, {
key: 5,
style: a(o.value)
}, null, 8, ["style"])) : e.type === "cloud" ? (t(), _(x, {
key: 6,
style: a(o.value)
}, null, 8, ["style"])) : e.type === "bilibili" ? (t(), _($, {
key: 7,
style: a(o.value)
}, null, 8, ["style"])) : (t(), l("span", {
key: 8,
class: "iconify",
"data-icon": e.icon
}, null, 8, Z));
};
}
}), e1 = ["href", "target"], t1 = { class: "tooltip-text" }, n1 = /* @__PURE__ */ b({
__name: "LinkItem",
props: {
link: {},
isDark: { type: Boolean }
},
setup(r) {
const e = r, { link: o, isDark: m } = v(e), c = [
{
type: "github",
color: "black"
},
{
type: "telegram",
color: "#1da1f2"
},
{
type: "weibo",
color: "#DB2828"
},
{
type: "twitter",
color: "#1da1f2"
},
{
type: "wechat",
color: "#1AAD19"
},
{
type: "blog",
color: "#6435C9"
},
{
type: "cloud",
color: "#0078e7"
},
{
type: "bilibili",
color: "#fb7299"
}
], y = f(() => {
const s = c.find((h) => h.type === o.value.type), u = {
"--vam-color": (s == null ? void 0 : s.color) || "#0078e7"
};
return c.length > 6 && (u["--vam-icon-size"] = "1.6rem"), s && ["black", "#000", "#000000", "rgb(0,0,0)"].includes(s.color) && m.value && (u["--vam-color"] = "white", u["--vam-hover-color"] = "black"), u;
});
return (s, u) => (t(), l("a", {
class: "link-item tooltip",
trigger: "hover",
style: a(y.value),
href: n(o).href,
target: n(o).target || "_blank"
}, [
i("span", t1, d(n(o).label), 1),
w(k, {
type: n(o).type,
icon: n(o).icon,
color: n(o).color
}, null, 8, ["type", "icon", "color"])
], 12, e1));
}
}), o1 = { id: "vue-about-me" }, c1 = { class: "copyright" }, l1 = ["href"], r1 = ["href"], i1 = ["href"], a1 = { key: 2 }, s1 = { class: "links" }, _1 = /* @__PURE__ */ b({
__name: "VueAboutMe",
props: {
isDark: { type: Boolean, default: !1 },
copyright: { default: () => ({
name: "Vue About Me",
repo: "YunYouJun/vue-about-me",
author: "YunYouJun",
authorUrl: "https://www.yunyoujun.cn",
icon: "cloud",
iconUrl: "https://sponsors.yunyoujun.cn",
link: "https://sponsors.yunyoujun.cn",
color: "black"
}) },
links: { default: () => [
{
type: "github",
label: "GitHub: YunYouJun",
href: "https://github.com/YunYouJun"
},
{
type: "telegram",
label: "Telegram Channel",
href: "https://t.me/elpsycn"
},
{
type: "weibo",
label: "微博：机智的云游君",
href: "http://weibo.com/jizhideyunyoujun"
},
{
type: "twitter",
label: "Twitter: YunYouJun",
href: "https://twitter.com/YunYouJun"
},
{
type: "wechat",
label: "微信公众号：云游君",
href: "https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/about/white-qrcode-and-search.jpg"
},
{
type: "bilibili",
label: "云游君Official",
href: "https://space.bilibili.com/1579790"
},
{
type: "blog",
label: "博客：yunyoujun.cn",
href: "http://www.yunyoujun.cn"
}
] }
},
setup(r) {
const e = r, { links: o, isDark: m } = v(e), c = Object.assign(
{
author: "YunYouJun",
icon: "cloud",
iconUrl: "https://sponsors.yunyoujun.cn",
color: "#0078e7"
},
e.copyright
);
return (y, s) => {
const u = k;
return t(), l("div", o1, [
i("div", c1, [
n(c).repo ? (t(), l("a", {
key: 0,
href: `https://github.com/${n(c).repo}`,
target: "_blank",
class: "repo-link"
}, d(n(c).name ? n(c).name : n(c).repo), 9, l1)) : C("", !0),
i("a", {
href: n(c).iconUrl || "https://sponsors.yunyoujun.cn",
style: a({ color: n(c).color }),
target: "_blank",
class: "logo"
}, [
w(u, {
class: "animate-logo",
type: n(c).icon || "cloud",
icon: n(c).icon || "cloud",
color: n(c).color || "#0078E7"
}, null, 8, ["type", "icon", "color"])
], 12, r1),
n(c).authorUrl ? (t(), l("a", {
key: 1,
class: "author-link",
href: n(c).authorUrl,
target: "_blank"
}, d(n(c).author), 9, i1)) : (t(), l("span", a1, d(n(c).author), 1))
]),
i("div", s1, [
(t(!0), l(Y, null, M(n(o), (h, g) => (t(), _(n1, {
key: g,
link: h,
"is-dark": n(m)
}, null, 8, ["link", "is-dark"]))), 128))
])
]);
};
}
});
export {
_1 as VueAboutMe
};