Skip to content

Commit

Permalink
feat: add visit revolvermaps & optimized some images & i18n
Browse files Browse the repository at this point in the history
  • Loading branch information
Dachao Chen committed Mar 18, 2023
1 parent e08260c commit 77ad74a
Show file tree
Hide file tree
Showing 12 changed files with 195 additions and 16 deletions.
6 changes: 6 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@
- [自动替换图像的背景](https://bgsub.cn/)
- [SVG Compressor](https://jakearchibald.github.io/svgomg/)
- [Convert Font to SVG](https://onlinefontconverter.com/)
- [Media Convert](https://mconverter.eu/convert/jpg/jxl/)
- [Convert images to AVIF](https://avif.io/)
- [Pixel Perfect Icon Solutions && Custom Font](https://icomoon.io/)
- [SVG Sprit](https://svgsprit.es/) - has some issues, be caution with it.
- [Hotjar](https://insights.hotjar.com/sites/1939682/dashboard)
Expand Down Expand Up @@ -81,6 +83,9 @@
- https://www.checkmycolours.com/
- https://kazuhikoarase.github.io/qrcode-generator/js/demo/
- https://iconmonstr.com/
- https://feathericons.com/
- https://tabler-icons.io/
- https://www.iconbolt.com/
- https://validator.nu/
- https://obfuscator.io/
- https://mailto.now.sh/
Expand Down Expand Up @@ -119,6 +124,7 @@
- [Security Headers](https://securityheaders.com/?q=https%3A%2F%2Flarrychen.tech%2F&followRedirects=on)
- https://webcode.tools
- [Image Maps](https://pictogon.com/?ref=usniemvuilaptrinh)
- https://www.revolvermaps.com/

> **Note**
> - [JSON description](https://chendachao.netlify.app/assets/data/en/chendachao.json)
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/dialog.css
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ only screen and (device-width: 767px) {
.qrcode-dialog .actions {
margin-top: 0.5rem;
display: flex;
justify-content: space-around;
justify-content: center;
}

.dialog-bg::backdrop {
Expand Down
16 changes: 10 additions & 6 deletions src/app/components/tooltip-wechat.template.html
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
<div class="wechat-qrcode-container text-center scan-overlay">
<figure>
<img
class="wechat-qrcode lazyload"
src="./assets/images/wechat-qr-code.jpg"
alt="wechat: ProgrammerLarry"
id="wechat-qrcode"
/>
<picture>
<source srcset="./assets/images/wechat-qr-code.avif" type="image/avif" />
<source srcset="./assets/images/wechat-qr-code.jxl" type="image/jxl" />
<img
class="wechat-qrcode lazyload"
src="./assets/images/wechat-qr-code.jpg"
alt="wechat: ProgrammerLarry"
id="wechat-qrcode"
/>
</picture>
<figcaption class="wechat-qrcode-desc" data-i18n-id="APP.QRCODE_DESC">
Add me in WeChat
</figcaption>
Expand Down
144 changes: 144 additions & 0 deletions src/app/utils/tools.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,144 @@
const axios = require('axios');
const request = axios.create({ timeout: 3000 });

// 为空时请求本地IP
const getNetIPInfo = async (searchIp = '') => {
searchIp = searchIp.replace(/::ffff:/g, '') || ''; // fix: nginx反代
if(['::ffff:', '::1'].includes(searchIp)) searchIp = '127.0.0.1';
try {
let date = Date.now();
let ipUrls = [
// 45次/分钟&支持中文(无限制)
`http://ip-api.com/json/${ searchIp }?lang=zh-CN`,
// 10000次/月&支持中文(依赖IP计算调用次数)
`http://ipwho.is/${ searchIp }?lang=zh-CN`,
// 1500次/天(依赖密钥, 超出自行注册)
`https://api.ipdata.co/${ searchIp }?api-key=c6d4d04d5f11f2cd0839ee03c47c58621d74e361c945b5c1b4f668f3`,
// 50000/月(依赖密钥, 超出自行注册)
`https://ipinfo.io/${ searchIp }/json?token=41c48b54f6d78f`,
// 1000次/天(依赖密钥, 超出自行注册)
`https://api.ipgeolocation.io/ipgeo?apiKey=105fc2c7e8864ec08b98e1ad4e8cbc6d&ip=${ searchIp }`,
// 1000次/天(依赖IP计算调用次数)
`https://ipapi.co${ searchIp ? `/${ searchIp }` : '' }/json`,
// 国内IP138提供(无限制)
`https://sp1.baidu.com/8aQDcjqpAAV3otqbppnN2DJv/api.php?query=${ searchIp }&resource_id=5809`
];
let result = await Promise.allSettled(ipUrls.map(url => request.get(url)));

let [ipApi, ipwho, ipdata, ipinfo, ipgeolocation, ipApi01, ip138] = result;

let searchResult = [];
if(ipApi.status === 'fulfilled') {
let { query: ip, country, regionName, city } = ipApi.value?.data || {};
searchResult.push({ ip, country, city: `${ regionName } ${ city }`, date });
}

if(ipwho.status === 'fulfilled') {
let { ip, country, region: regionName, city } = ipwho.value?.data || {};
searchResult.push({ ip, country, city: `${ regionName } ${ city }`, date });
}

if(ipdata.status === 'fulfilled') {
let { ip, country_name: country, region: regionName, city } = ipdata.value?.data || {};
searchResult.push({ ip, country, city: `${ regionName } ${ city }`, date });
}

if(ipinfo.status === 'fulfilled') {
let { ip, country, region: regionName, city } = ipinfo.value?.data || {};
searchResult.push({ ip, country, city: `${ regionName } ${ city }`, date });
}

if(ipgeolocation.status === 'fulfilled') {
let { ip, country_name: country, state_prov: regionName, city } = ipgeolocation.value?.data || {};
searchResult.push({ ip, country, city: `${ regionName } ${ city }`, date });
}

if(ipApi01.status === 'fulfilled') {
let { ip, country_name: country, region: regionName, city } = ipApi01.value?.data || {};
searchResult.push({ ip, country, city: `${ regionName } ${ city }`, date });
}

if(ip138.status === 'fulfilled') {
let [res] = ip138.value?.data?.data || [];
let { origip: ip, location: country, city = '', regionName = '' } = res || {};
searchResult.push({ ip, country, city: `${ regionName } ${ city }`, date });
}
// console.log(searchResult)
let validInfo = searchResult.find(item => Boolean(item.country));
console.info('查询IP信息:', validInfo);
return validInfo || { ip: '获取IP信息API出错,请排查或更新API', country: '未知', city: '未知', date };
} catch (error) {
console.error('getIpInfo Error: ', error);
return {
ip: '未知',
country: '未知',
city: '未知',
error
};
}
};

const throwError = ({ status = 500, msg = 'defalut error' } = {}) => {
const err = new Error(msg);
err.status = status; // 主动抛错
throw err;
};

const isIP = (ip = '') => {
const isIPv4 = /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$/;
const isIPv6 = /^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}|:((:[\da−fA−F]1,4)1,6|:)|:((:[\da−fA−F]1,4)1,6|:)|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)|([\da−fA−F]1,4:)2((:[\da−fA−F]1,4)1,4|:)|([\da−fA−F]1,4:)2((:[\da−fA−F]1,4)1,4|:)|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)|([\da−fA−F]1,4:)4((:[\da−fA−F]1,4)1,2|:)|([\da−fA−F]1,4:)4((:[\da−fA−F]1,4)1,2|:)|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?|([\da−fA−F]1,4:)6:|([\da−fA−F]1,4:)6:/;
return isIPv4.test(ip) || isIPv6.test(ip);
};

const randomStr = (len) =>{
len = len || 16;
let str = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678',
a = str.length,
res = '';
for (let i = 0; i < len; i++) res += str.charAt(Math.floor(Math.random() * a));
return res;
};

// 获取UTC-x时间
const getUTCDate = (num = 8) => {
let date = new Date();
let now_utc = Date.UTC(date.getUTCFullYear(), date.getUTCMonth(),
date.getUTCDate(), date.getUTCHours() + num,
date.getUTCMinutes(), date.getUTCSeconds());
return new Date(now_utc);
};

const formatTimestamp = (timestamp = Date.now(), format = 'time') => {
if(typeof(timestamp) !== 'number') return '--';
let date = new Date(timestamp);
let padZero = (num) => String(num).padStart(2, '0');
let year = date.getFullYear();
let mounth = padZero(date.getMonth() + 1);
let day = padZero(date.getDate());
let hours = padZero(date.getHours());
let minute = padZero(date.getMinutes());
let second = padZero(date.getSeconds());
let weekday = ['周日', '周一', '周二', '周三', '周四', '周五', '周六' ];
let week = weekday[date.getDay()];
switch (format) {
case 'date':
return `${ year }-${ mounth }-${ day }`;
case 'week':
return `${ year }-${ mounth }-${ day } ${ week }`;
case 'hour':
return `${ year }-${ mounth }-${ day } ${ hours }`;
case 'time':
return `${ year }-${ mounth }-${ day } ${ hours }:${ minute }:${ second }`;
default:
return `${ year }-${ mounth }-${ day } ${ hours }:${ minute }:${ second }`;
}
};

module.exports = {
getNetIPInfo,
throwError,
isIP,
randomStr,
getUTCDate,
formatTimestamp
};
4 changes: 2 additions & 2 deletions src/assets/data/en/chendachao.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@
"Today-Someday : Architect & CTO @Top Tech",
"2020/03-Today : Senior Frontend Engineering & Javascript Dev @CP",
"2015/10-2020/03 : Senior Frontend Dev & Frontend Architect & Full-Stack Dev @Accenture",
"2013/11-2015/10 : Java Intern & Senior Frontend Dev @CSTS"
"2013/08-2015/10 : Java Intern & Senior Frontend Dev @CSTS"
],
"School": {
"Name": "University of Zhengzhou",
"Major": "Computer Science",
"Dates": "2010-2014"
"Period": "2010-2014"
},
"TechStack": {
"HTML(5)":
Expand Down
4 changes: 2 additions & 2 deletions src/assets/data/zh/chendachao.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
"邮箱": "chendachao@outook.com",
"Github": "https://github.com/chendachao",
"主页": "https://larrychen.tech",
"状态": "着迷于Javascript/NodeJS的小巧玲珑, 废寝忘食, 无法自拔",
"状态": "整日沉迷于Javascript/NodeJS的小巧玲珑, 而废寝忘食, 衣带渐宽, 无法自拔",
"履历": [
"今天-某天 : 架构师 & CTO @Top Tech",
"2020/03-至今 : 高级前端工程师 & Javascript开发 @保密",
"2015/10-2020/03 : 高级前端开发 & 前端架构师 & 全栈 @埃森哲",
"2013/11-2015/10 : Java实习生, 高级前端开发 @花旗金融信息"
"2013/08-2015/10 : Java实习生, 高级前端开发 @花旗金融信息"
],
"学校": {
"名字": "郑州大学",
Expand Down
Binary file added src/assets/images/wechat-qr-code.avif
Binary file not shown.
Binary file added src/assets/images/wechat-qr-code.jxl
Binary file not shown.
11 changes: 10 additions & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -235,7 +235,16 @@
</header>

<main class="app-main">
<div class="left-side"></div>
<div class="left-side">
<div></div>
<div class="globe-container">
<script
type="text/javascript"
src="//rf.revolvermaps.com/0/0/8.js?i=5nwz9giuftw&amp;m=8&amp;c=ff0000&amp;cr1=ffffff&amp;f=arial&amp;l=33"
async="async"
></script>
</div>
</div>
<div class="app-content">
<section hidden class="print-site-qrcode">
<div>
Expand Down
16 changes: 15 additions & 1 deletion src/styles/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -159,6 +159,10 @@ body {
grid-column: span 1;

/* width: clamp(100px, 50px, 200px); */

display: flex;
flex-direction: column;
justify-content: space-between;
}

.app-content {
Expand Down Expand Up @@ -189,6 +193,15 @@ body {
.right-side {
grid-column: 1 / -1;
}
.globe-container {
margin-left: auto;
margin-bottom: auto;
}
}

.globe-container {
margin-left: 1em;
margin-bottom: 3em;
}

.help-icon-menu-bar {
Expand Down Expand Up @@ -399,6 +412,7 @@ body {
.wechat-qrcode {
width: calc(2em + 10vw);
height: auto;

/* aspect-ratio: 1 / 1;
width: 100%;
object-fit: contain; */
Expand Down Expand Up @@ -656,9 +670,9 @@ details.my-portfolio[open] summary + div {
.mobile-qrcode {
width: 100% !important;
aspect-ratio: 1 / 1;

/* object-fit: contain; */
object-fit: cover;

border-radius: 4px;
box-shadow: 0 0 4px 0 var(--color-shadow2);
will-change: transform;
Expand Down
6 changes: 4 additions & 2 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -112,12 +112,13 @@ const commonConfig = merge([
script-src 'self' 'unsafe-inline' 'unsafe-eval' data:
larrychen.tech instant.page platform-api.sharethis.com
count-server.sharethis.com buttons-config.sharethis.com
rf.revolvermaps.com
www.google.com www.google.co.kr www.googletagmanager.com
www.google-analytics.com stats.g.doubleclick.net *.hotjar.com wss://ws1.hotjar.com
wss://ws12.hotjar.com wss://ws16.hotjar.com cdn.jsdelivr.net hm.baidu.com;
frame-src 'self' vars.hotjar.com;
frame-src 'self' vars.hotjar.com rf.revolvermaps.com;
style-src 'self' 'unsafe-inline' cdn.jsdelivr.net;
img-src 'self' data: platform-cdn.sharethis.com hm.baidu.com;
img-src 'self' data: platform-cdn.sharethis.com hm.baidu.com rf.revolvermaps.com;
connect-src 'self' larrychen.tech chendachao.github.io chendachao.netlify.app
chendachao-github-io-chendachao.vercel.app l.sharethis.com *.ingest.sentry.io/
extreme-ip-lookup.com http://ip-api.com/json botd.fpapi.io;
Expand Down Expand Up @@ -193,6 +194,7 @@ const commonConfig = merge([
}
}),
new webpack.ProvidePlugin({
// Buffer: ['buffer', 'Buffer'],
process: 'process/browser',
}),
new webpack.DefinePlugin({
Expand Down
2 changes: 1 addition & 1 deletion webpack.parts.js
Original file line number Diff line number Diff line change
Expand Up @@ -199,7 +199,7 @@ exports.loadImages = ({ include, exclude, options } = {}) => ({
// },

{
test: /\.(gif|png|jpe?g|svg)$/i,
test: /\.(gif|png|jpe?g|svg|avif|jxl)$/i,
type: 'asset',
// type: 'asset/resource',
// generator: {
Expand Down

1 comment on commit 77ad74a

@vercel
Copy link

@vercel vercel bot commented on 77ad74a Mar 18, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

homepage – ./

homepage-chendachao.vercel.app
chendachao.vercel.app
homepage-git-main-chendachao.vercel.app

Please sign in to comment.