LICENSE Documentation

Official TypeScript developer resources and documentation for crimx/LICENSE. Verified technical context for AI.

0 stars TypeScript TypeScript 1 file ยท ~64,239 tokens
RAW Doc

1. Project Overview & Quickstart (crimx/LICENSE)

LICENSE

Open-source repository crimx/LICENSE

Repository Details

Note: High-volume repository documentation is actively indexed and synchronized by YakaAI.

2. Official Technical Reference & Guides (crimx/crimx.github.io)

File: README.md

crimx.github.io

My site

Build Setup

bash
# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev

# build for production and launch server
$ yarn run build
$ yarn start

# generate static project
$ yarn run generate

For detailed explanation on how things work, checkout Nuxt.js docs.

File: package.json

{
"name": "crimx.github.io",
"version": "1.0.0",
"description": "CRIMX personal site.",
"author": "CRIMX",
"private": true,
"scripts": {
"dev": "nuxt --hostname 0.0.0.0",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"deploy": "node scripts/deploy.js",
"ship": "yarn generate && yarn deploy",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "yarn lint"
},
"dependencies": {
"cross-env": "^5.2.0",
"normalize-scss": "^7.0.1",
"nuxt": "^2.0.0",
"nuxt-i18n": "^5.4.4",
"sass": "^1.41.1"
},
"devDependencies": {
"babel-eslint": "^8.2.1",
"eslint": "^5.0.1",
"eslint-config-prettier": "^3.1.0",
"eslint-loader": "^2.0.0",
"eslint-plugin-prettier": "2.6.2",
"eslint-plugin-vue": "^4.0.0",
"html-loader": "^0.5.5",
"markdown-loader": "^4.0.0",
"nodemon": "^1.11.0",
"prettier": "1.14.3",
"sass-loader": "^7.1.0",
"shelljs": "^0.8.3"
}
}

File: assets/stacks.json

{
"antd": ["antd", "https://github.com/ant-design/ant-design/", "Ant Design"],
"bulma": ["bulma", "https://github.com/jgthms/bulma/", "Bulma"],
"codepen": ["codepen", "https://codepen.io/", "CodePen"],
"dexie": ["dexie", "https://github.com/dfahlander/Dexie.js", "Dexie(IndexedDB)"],
"gatsby": ["gatsby", "https://www.gatsbyjs.org/", "Gatsby"],
"github-api": ["github", "https://developer.github.com/", "Github APIs"],
"graphql": ["graphql", "https://graphql.org/", "GraphQL"],
"hexo": ["hexo", "https://hexo.io", "Hexo"],
"i18next": ["i18next", "https://github.com/i18next/i18next", "I18next"],
"iview": ["iview", "https://www.iviewui.com/", "IView"],
"lerna": ["lerna", "https://lerna.js.org/", "Lerna"],
"netlify": ["netlify", "https://www.netlify.com/", "Netlify"],
"netlifycms": ["netlifycms", "https://www.netlifycms.org/", "Netlify CMS"],
"neutrino": ["neutrino", "https://neutrinojs.org", "Neutrino"],
"nuxt": ["nuxt", "https://github.com/nuxt/nuxt.js", "NUXT"],
"nuxt-i18n": ["nuxt", "https://github.com/nuxt-community/nuxt-i18n", "Nuxt-i18n"],
"observable-hooks": ["observable-hooks", "https://github.com/crimx/observable-hooks", "Observable Hooks"],
"postcss": ["postcss", "https://github.com/postcss/postcss", "PostCSS"],
"react": ["react", "https://github.com/facebook/react/", "React.js"],
"redux": ["redux", "https://github.com/reactjs/redux", "Redux"],
"redux-thunk": ["redux", "https://github.com/reduxjs/redux-thunk", "Redux Thunk"],
"redux-observable": ["redux-observable", "https://redux-observable.js.org/", "Redux Observable"],
"rxjs": ["rxjs", "https://github.com/ReactiveX/rxjs", "RxJS"],
"sass": ["sass", "https://sass-lang.com/", "Sass"],
"storybook": ["storybook", "https://storybook.js.org/", "Storybook"],
"typescript": ["typescript", "https://www.typescriptlang.org/", "TypeScript"],
"vanilla-js": ["javascript", "http: //vanilla-js.com/", "VanillaJS"],
"vue": ["vue", "https://github.com/vuejs/vue", "Vue.js"],
"vue-i18n": ["vue", "https://github.com/kazupon/vue-i18n", "Vue-i18n"],
"vue-router": ["vue", "https://github.com/vuejs/vue-router", "Vue-router"],
"vue-ssr": ["vue", "https://ssr.vuejs.org/", "Vue SSR"],
"vuex": ["vue", "https://vuex.vuejs.org/", "Vuex"],
"webpack": ["webpack", "https://webpack.js.org", "Webpack"]
}

File: projects/blog-2019/en-US.md

A technical blog following JAMstack architecture, based on GatsbyJS, a React Framework using GraphQL to manage resources. Post contents are managed on Netlify CMS. The whole site is delivered via Netlify network.

This is also an attempt to replace Class components with React Hooks, which brings great convenience and pleasant development experience.

Managing data and resources with GraphQL is also powerful and dead easy.

With Netlify CMS and Utterances, post files and comments are stored back to Github which reduces the dependency of third-party services.

Site logo are designed with illustrator. Social media icons are taken from NViconsLib 2, edited with Boxy SVG, merged with IcoMoon and compressed with SVGOMG.

File: projects/blog-2019/meta.json

{
"title": {
"zh-CN": "CRIMX BLOG",
"en-US": "CRIMX BLOG"
},
"url": "https://blog.crimx.com",
"stack": [
"gatsby",
"graphql",
"react",
"bulma",
"sass",
"netlifycms",
"netlify"
],
"badges": {
"github": "crimx/blog-2019"
},
"hideExpand": false
}

File: projects/blog-2019/zh-CN.md

ไธ€ไธชๅŸบไบŽ JAMstack ๆžถๆž„็š„ๆŠ€ๆœฏๅšๅฎขใ€‚ๅˆฉ็”จ React ๆก†ๆžถ GatsbyJS ๆญ้… GraphQL ๅผ€ๅ‘๏ผŒไฝฟ็”จ Netlify CMS ็ฎก็†ๆ–‡็ซ ๅ†…ๅฎนๅนถๆ‰˜็ฎกๅœจ Netlify ๅนณๅฐไธŠใ€‚

ๅ…ทไฝ“ๆ›ดๆขๅŽŸๅ› ่งๅšๆ–‡ใ€Šไธบไป€ไนˆ้€‰ Gatsbyใ€‹ใ€‚

ๅˆฉ็”จ GraphQL ็ปŸไธ€็ฎก็†ไฟกๆฏๅ’Œ่ต„ๆบไธบๅผ€ๅ‘ๅธฆๆฅไบ†ๆžๅคง็š„ไพฟๅˆฉใ€‚

Netlify CMS ๅ’Œ Utterances ๅฎž็Žฐไบ†ๆ–‡็ซ ๅ’Œ่ฏ„่ฎบๆ•ฐๆฎ้ƒฝไฟๅญ˜ๅ›ž Github ไธŠ๏ผŒๅ‡ๅฐ‘ไบ†็ฌฌไธ‰ๆ–นๆœๅŠก็š„ไพ่ต–ใ€‚

ๆ ทๅผๅŸบไบŽไธ€ไธช็Žฐไปฃ CSS ๆก†ๆžถ Bulma๏ผŒ Sass ๆจกๅ—็š„่ฎพ่ฎกๅ€Ÿ้‰ดไบ† ITCSS ๆ€ๆƒณใ€‚

LOGO ๅ›พๆ ‡ไฝฟ็”จ illustrator ่ฎพ่ฎก๏ผŒ็คพไบคๅ›พๆกˆ้‡‡็”จ NViconsLib 2 ๏ผŒไฝฟ็”จ Boxy SVG ๆ‰‹ๅทฅ็ผ–่พ‘๏ผŒๅˆฉ็”จ IcoMoon ๅˆๅนถไปฅๅŠ SVGOMG ๅŽ‹็ผฉใ€‚

File: projects/empty-module-loader/en-US.md

A webpack loader that replaces module with empty function which can be eliminated with Webpack Tree Shaking.

File: projects/empty-module-loader/meta.json

{
"title": {
"zh-CN": "Empty Module Loader",
"en-US": "Empty Module Loader"
},
"url": "https://github.com/crimx/empty-module-loader",
"stack": [
"webpack"
],
"badges": {
"npm": "empty-module-loader"
},
"hideExpand": true
}

File: projects/empty-module-loader/zh-CN.md

ไธ€ไธชๅฏไปฅๅฐ†็‰นๅฎšๆจกๅ—ๆ›ฟๆขไธบ็ฉบๅ‡ฝๆ•ฐ็š„ webpack loader ใ€‚้…ๅˆ Tree Shaking ๅฏๅœจ็”Ÿๆˆ็š„ไปฃ็ ไธญๅฎŒๅ…จๆธ…้™คใ€‚

File: projects/ext-github-release-notifier/en-US.md

Chrome / Firefox extension for watching Github releases.

Unofficial "polyfill" for watching Github releases. It was based on this lovely idea. A year later Github finally added basic official support.

It uses Github APIs and takes advantage of 304 cache.

File: projects/ext-github-release-notifier/meta.json

{
"title": {
"zh-CN": "Release Notifier for Github",
"en-US": "Release Notifier for Github"
},
"url": "https://github.com/crimx/ext-github-release-notifier",
"stack": [
"vue",
"github-api"
],
"badges": {
"github": "crimx/ext-github-release-notifier",
"chrome": "gjhmlndokehcbkaockjlgeofgkiaiflg",
"firefox": "release-notifier-for-github"
},
"hideExpand": false
}

File: projects/ext-github-release-notifier/zh-CN.md

ไธ€ๆฌพๅฏไปฅๆŒ‰ majorใ€minor ๅ’Œ patch ็‰ˆๆœฌๆฅ่ฎข้˜… Github release ็š„ Chrome / Firefox ๆ‰ฉๅฑ•ใ€‚

็ตๆ„ŸๆบไบŽไธ€ไธช issue ็š„่ฎจ่ฎบใ€‚ไธ€ๅนดๅŽ Github ็ปˆไบŽๆŽจๅ‡บไบ†ๅˆๆญฅ็š„ๅฎ˜ๆ–นๆ”ฏๆŒใ€‚

่ฏทๆฑ‚ๅˆฉ็”จ E-Tags 304 ๏ผˆNot Modified๏ผ‰่ทณ่ฝฌๆฅๅฟซ้€ŸๆŸฅ่ฏขใ€‚

File: projects/get-selection-more/en-US.md

Get text and context (sentence, paragraph...) from window.getSelection().

File: projects/get-selection-more/meta.json

{
"title": {
"zh-CN": "Get Selection More",
"en-US": "Get Selection More"
},
"url": "https://github.com/crimx/get-selection-more",
"stack": ["typescript"],
"badges": {
"github": "crimx/get-selection-more",
"npm": "get-selection-more"
},
"hideExpand": true
}

File: projects/get-selection-more/zh-CN.md

ไปŽ window.getSelection() ่Žทๅ–้€‰ๅญ—ไปฅๅŠไธŠไธ‹ๆ–‡๏ผˆๆ‰€ๅœจๅฅๅญใ€ๆฎต่ฝ็ญ‰๏ผ‰ใ€‚

File: projects/hexo-filter-github-emojis/en-US.md

A Hexo plugin that adds emoji support, using Github Emojis API.

With accessibility in mind, this plugin generates unicodes for emojis then makes the font transparent and displays emoji images with background-image.

File: projects/hexo-filter-github-emojis/meta.json

{
"title": {
"zh-CN": "Hexo Filter Github Emojis",
"en-US": "Hexo Filter Github Emojis"
},
"url": "https://github.com/crimx/hexo-filter-github-emojis",
"stack": [
"hexo",
"github-api"
],
"badges": {
"github": "crimx/hexo-filter-github-emojis",
"npm": "hexo-filter-github-emojis"
},
"hideExpand": false
}

File: projects/hexo-filter-github-emojis/zh-CN.md

Hexo ๆ’ไปถ๏ผŒๅˆฉ็”จ Github Emojis API ๆ”ฏๆŒๅœจ Markdown ๅ’Œ HTML ๆจกๆฟไธญๆทปๅŠ ่ฏญไน‰ๅŒ–็š„ emojis ใ€‚

่€ƒ่™‘ๅˆฐๅฏ่ฎฟ้—ฎๆ€ง๏ผŒๆœฌๆ’ไปถไผš็”Ÿๆˆ emoji ็š„ unicode ๅนถๅฐ†ๅญ—ไฝ“่ฎพไธบ้€ๆ˜Ž๏ผŒ็„ถๅŽๅœจ่ƒŒๆ™ฏๅ›พ็‰‡ไธญๆทปๅŠ  Github emoji ๅ›พ็‰‡ใ€‚ๅฝ“ๅŠ ่ฝฝๅคฑ่ดฅๆ—ถๆขๅคๅญ—ไฝ“้ขœ่‰ฒใ€‚

ๆ’ไปถๅŒๆ—ถๆไพ›ไธฐๅฏŒ็š„้…็ฝฎ้€‰้กน๏ผŒๆปก่ถณๅ„็งไธๅŒ็š„้œ€ๆฑ‚ใ€‚

File: projects/javascript30/en-US.md

30-day vanilla JS coding challenge. Inspired by Wes Bos's JavaScript 30.

Some of my interesting ideas:

File: projects/javascript30/meta.json

{
"title": {
"zh-CN": "JavaScript 30",
"en-US": "JavaScript 30"
},
"url": "https://codepen.io/collection/DNdQZw/",
"stack": [
"codepen",
"vanilla-js"
],
"badges": {},
"hideExpand": false
}

File: projects/javascript30/zh-CN.md

ไธ‰ๅๅคฉๆฏๅคฉ็”จ็บฏ JavaScript ใ€CSS ๅ’Œ HTML ๅ†™ไธชๅฐไธœ่ฅฟ๏ผŒๅนถๅฐ้ฒœไธ€ไบ›ๆ–ฐ็š„ๆต่งˆๅ™จ API ใ€‚็ตๆ„Ÿๆฅ่‡ชไบŽ Wes Bos ็š„ JavaScript 30 ใ€‚ไป–็š„ไพ‹ๅญ็›ธๅฏน็ฎ€ๅ•๏ผŒๆˆ‘ๆ นๆฎ่‡ชๅทฑ็š„่ƒฝๅŠ›ๅฎž็Žฐไบ†ไบ›ๆ›ดๅคๆ‚็š„็‚นๅญใ€‚

ๆฏ”่พƒๆœ‰ๆ„ๆ€็š„ๅฆ‚

File: projects/leetmark/en-US.md

A Chrome extension that can generate a decent Github Flavored Markdown template from a Leetcode problem page.

Meta data is stored as Front Matter from which Github will generate a neat data table.

File: projects/leetmark/meta.json

{
"title": {
"zh-CN": "Leetmark",
"en-US": "Leetmark"
},
"url": "https://github.com/crimx/crx-leetmark",
"stack": [
"vanilla-js"
],
"badges": {
"chrome": "pbpcnaodgahdlijbhjeohbjoafbdafdp"
},
"hideExpand": true
}

File: projects/leetmark/zh-CN.md

ไธ€ๆฌพๅฏไปฅๅฐ† Leetcode ้ข˜็›ฎ่ฝฌๆขไธบ Markdown ็š„ Chrome ๆ‰ฉๅฑ•ใ€‚้ข˜็›ฎๅ…ƒๆ•ฐๆฎ่ขซไฟๅญ˜ไธบ Front Matter ๆ ผๅผใ€‚

File: projects/neutrino-webextension/en-US.md

Neutrino 9 preset for WebExtension development with hot reload and framework devtools.

Zero upfront configuration necessary to start developing and building a WebExtension.

Run development mode in a fake WebExtension environment which supports hot reload and framework devtools.

Webpack chunks are translated into manifest configs nicely.

Outputs are bundled for each browser respectively, with different manifest.

Works well with other official Neutrino presets.

File: projects/neutrino-webextension/meta.json

{
"title": {
"zh-CN": "Neutrino WebExtension",
"en-US": "Neutrino WebExtension"
},
"url": "https://github.com/crimx/neutrino-webextension",
"stack": ["neutrino", "webpack"],
"badges": {
"github": "crimx/neutrino-webextension"
},
"hideExpand": false
}

File: projects/neutrino-webextension/zh-CN.md

Neutrino 9 ่„šๆ‰‹ๆžถๆ’ไปถ๏ผŒๅผ€ๅ‘่ทจๆต่งˆๅ™จๆ‰ฉๅฑ•๏ผŒๆ”ฏๆŒ็ƒญๆ›ดๆ–ฐไปฅๅŠๆก†ๆžถ devtools ่ฐƒ่ฏ•ใ€‚

็›ฎๅ‰ๅผ€ๅ‘ๆต่งˆๅ™จๆ‰ฉๅฑ•็š„ๆต็จ‹ๅŸบๆœฌ่ฟ˜ๆ˜ฏๅˆ€่€•็ซ็ง็š„ๆ–นๅผ๏ผš

  • ๅผ•็”จ็š„ JS ๆ–‡ไปถๅ’Œๆ ทๅผๆ–‡ไปถ้œ€่ฆๆ‰‹ๅ†™ๅˆฐๆธ…ๅ•ๆ–‡ไปถ manifest.json ไธญ๏ผŒไธ่ƒฝไบซๅ—ๆ‰“ๅŒ…ๅทฅๅ…ท็š„ๅˆ†ๅ—ไผ˜ๅŒ–ใ€‚
  • ๅ„ไธชๆต่งˆๅ™จ็š„ๆ‰ฉๅฑ• API ๆ”ฏๆŒไธๅฎŒๅ…จไธ€่‡ด๏ผŒmanifest.json ๅ†…ๅฎนไนŸไธๅฎŒๅ…จ็›ธๅŒใ€‚
  • ๆต่งˆๅ™จๅฏนๆ‰ฉๅฑ•้กต้ข่ฎฟ้—ฎๆœ‰้™ๅˆถ๏ผŒๆ•…็ƒญๆ›ดๆ–ฐไปฅๅŠๆก†ๆžถ devtools ้ƒฝไธ่ƒฝไฝฟ็”จใ€‚

ๆ‰€ไปฅ้’ˆๅฏน่ฟ™ไบ›้—ฎ้ข˜๏ผŒๆˆ‘่ฎพ่ฎกไบ†ไธ€ๅฅ—่‡ชๅŠจๅŒ–่งฃๅ†ณๆ–นๆกˆ๏ผŒๅคงๅคง็ฎ€ๅŒ–ไบ†ๅผ€ๅ‘ๆต็จ‹๏ผš

  • ๅŸบไบŽ Neutrino 9 ่„šๆ‰‹ๆžถๅผ€ๅ‘ๆ’ไปถ๏ผŒๅฏไปฅ็ปงๆ‰ฟๅ…ถไผ—ๅคšไผ˜็‚น๏ผšๅผ€็ฎฑๅณ็”จ๏ผŒๅฏ้…็ฝฎๆ€ง้ซ˜๏ผˆWebpack Chain๏ผ‰๏ผŒๆœ‰ไธฐๅฏŒ็š„็”Ÿๆ€๏ผŒๅฏนๅ„็งๆก†ๆžถใ€ไปฃ็ ่ง„่Œƒ้ƒฝๆœ‰ๅพˆๅฅฝ็š„ๆ”ฏๆŒใ€‚
  • ้€š่ฟ‡ๅฎž็Žฐไธ€ไธชๆ‰ฉๅฑ•็Žฏๅขƒๆจกๆ‹Ÿๅ™จๅœจๆ™ฎ้€š็ฝ‘้กตไธญ่ท‘ๆ‰ฉๅฑ•้กต้ข๏ผŒๆˆๅŠŸๆ”ฏๆŒ็ƒญๆ›ดๆ–ฐไปฅๅŠๆก†ๆžถ devtools ่ฐƒ่ฏ•ใ€‚
  • ไธๅ†ๆ‰‹ๅŠจ้…็ฝฎๆธ…ๅ•ๆ–‡ไปถ๏ผŒๆˆ‘็ผ–ๅ†™ไบ†ไธ€ไธช Webpack ๆ’ไปถ่‡ชๅŠจๅฐ†ๆ‰“ๅŒ…ๅŽ็š„ๅ„ไธชๅ—ๆ›ดๆ–ฐๅˆฐๆธ…ๅ•็›ธๅบ”็š„้…็ฝฎไธญใ€‚
  • ไธบๅ„ไธชๆต่งˆๅ™จๅˆ†ๅˆซ่‡ชๅŠจๆ‰“ๅŒ…๏ผŒ่‡ชๅŠจ็”ŸๆˆไธๅŒ็š„ๆธ…ๅ•้…็ฝฎใ€‚

File: projects/observable-hooks/en-US.md

React hooks for RxJS Observables with super flexible APIs.

Why:

  • Component specific async logic, which are reused with the Component, no longer needs to be delegated to stateful parent or state management libraries.
  • With React Hooks, logic can be encapsulated nicely together for easy testing.
  • RxJS comes with a mature and abundant ecosystem which can address a wide range of async problems.

Features:

  • Simple yer powerful API. Not only easier to use but also simpler to implement and faster to run.
  • States, Props and Observables can interconvert into each other seamlessly.
  • Observables can be operated directly, whether they are hooks generated or from outside of the Component.
  • Operations on Observables are pure just like Epic in Redux Observable which can be reused and isolated for testing.
  • Supports Render-as-You-Fetch pattern with Suspense.
  • Fully tested. Stable API.

File: projects/observable-hooks/meta.json

{
"title": {
"zh-CN": "Observable Hooks",
"en-US": "Observable Hooks"
},
"url": "https://github.com/crimx/observable-hooks",
"stack": ["typescript", "react", "rxjs"],
"badges": {
"github": "crimx/observable-hooks",
"npm": "observable-hooks"
},
"hideExpand": false
}

File: projects/observable-hooks/zh-CN.md

้€š่ฟ‡ React hooks ๅœจ็ป„ไปถไธญๆ— ็ผ่ฟžๆŽฅ RxJS Observables ไปฅๅค็”จๅผ‚ๆญฅ้€ป่พ‘ใ€‚

ไธบไป€ไนˆ่ฆๅœจ็ป„ไปถไธญๅค็”จๅผ‚ๆญฅ้€ป่พ‘๏ผš

  • ไธ€ไบ›ๅช่ทŸๅฝ“ๅ‰็ป„ไปถ็›ธๅ…ณ็š„ๅผ‚ๆญฅ้€ป่พ‘ไธๅ†้œ€่ฆๅง”ๆ‰˜ๅˆฐ็ˆถ็ป„ไปถๆˆ–่€…็Šถๆ€็ฎก็†ๅบ“๏ผŒไปŽ่€Œ่พพๅˆฐ็œŸๆญฃ็š„็ป„ไปถๅค็”จใ€‚
  • React Hooks ็ดงๅ‡‘็š„ไปฃ็ ้ฃŽๆ ผๅฏไปฅ่ฎฉ้€ป่พ‘ๅฐ่ฃ…ๅˆฐไธ€่ตท๏ผŒๆ›ดๆ–นไพฟ้š”็ฆปๆต‹่ฏ•ใ€‚
  • ไฝฟ็”จ RxJS ๆ˜ฏๅ› ไธบๅ…ถๆˆ็†ŸไธฐๅฏŒ็š„็”Ÿๆ€๏ผŒๅฏน็ฎ€ๅ•ๅˆฐๅคๆ‚็š„ๅผ‚ๆญฅ้€ป่พ‘้ƒฝๆœ‰ๅพˆๅฅฝ็š„่งฃๅ†ณๆ–นๆกˆใ€‚

็›ธๆฏ”ๅŒ็ฑปๅบ“ไผ˜ๅŠฟ๏ผš

  • ็ฎ€ๆด็š„ API๏ผŒไธไป…ๆ›ดๅฎนๆ˜“ไฝฟ็”จไธ”ๅฎž็Žฐๆ›ด็ฎ€ๆด๏ผŒๅŒๆ—ถๆ้ซ˜ไบ†ๆ€ง่ƒฝใ€‚
  • States ๅ’Œ Props ๅฏไปฅๆ— ็ผไธŽ Observables ไบ’็›ธ่ฝฌๆขใ€‚
  • ๅฏๅฏนๅคšไธช Observables ็›ดๆŽฅ่ฟ›่กŒๅ„็งๆ“ไฝœ๏ผŒๆ— ่ฎบๆ˜ฏ hooks ไธญ็”Ÿๆˆ็š„่ฟ˜ๆ˜ฏ็ป„ไปถไปฅๅค–็š„ใ€‚
  • Observables ็š„ๆ“ไฝœๆ˜ฏ็บฏๅ‡€็š„๏ผŒ็ฑปไผผไบŽ Redux Observable ็š„ Epic๏ผŒๅฏไปฅๅค็”จไปฅๅŠๅ•็‹ฌ่ฟ›่กŒๆต‹่ฏ•ใ€‚
  • ๆ”ฏๆŒ็ป“ๅˆ Suspense ๅฎž็Žฐ Render-as-You-Fetch ๆจกๅผใ€‚
  • ๅฎŒๅ–„็š„ๆต‹่ฏ•๏ผŒAPI ็จณๅฎšใ€‚

File: projects/postcss-safe-important/en-US.md

PostCSS plugin that adds !important to style declarations safely. Used and recommended by many large projects like Uppy, stylelint, vmd and HoverCards.

  1. Accuracy. Unlike other regex based implementations, this plugin uses AST (Abstract Syntax Tree) generated by PostCSS to accurately locate rules.
  2. Safety. Adding !important to every declarations might break styles. This plugin will skip unnecessary declarations.
  3. Configurability. Flexible and fine-grained control over the plugin.

File: projects/postcss-safe-important/meta.json

{
"title": {
"zh-CN": "PostCSS Safe Important",
"en-US": "PostCSS Safe Important"
},
"url": "https://github.com/crimx/postcss-safe-important",
"stack": [
"postcss"
],
"badges": {
"github": "crimx/postcss-safe-important",
"npm": "postcss-safe-important"
},
"hideExpand": false
}

File: projects/postcss-safe-important/zh-CN.md

[Binary file]

File: projects/projects/en-US.md

NUXT based static website.

With SSR generated static pages, DOM can be rendered before JavaScript loading, after which Vue will take over DOM manipulation and routing is controled by Vue-router.

ไธบ้กน็›ฎไป‹็ปๆŠฝ่ฑกๅ‡บๅ…ฑ็”จ้ƒจๅˆ†๏ผŒๅฎž็Žฐ็ป„ไปถๅค็”จ๏ผŒๆฏไธช้กน็›ฎไป‹็ปๅช้œ€็ฎ€ๅ•้…็ฝฎๅณๅฏๆทปๅŠ ใ€‚

Common parts of each project description are abstracted and resued. Adding a new project description can be achieved with minimum configuration.

Nuxt-i18n overrides Nuxt default routes and adds locale prefixes to every URL. Description of each project is written in Markdown and transformed to HTML via markdown-loader.

File: projects/projects/meta.json

{
"title": {
"zh-CN": "ๆœฌ้กน็›ฎ",
"en-US": "This Project"
},
"url": "https://github.com/crimx/crimx.github.io",
"stack": [
"nuxt",
"nuxt-i18n",
"vue"
],
"badges": {},
"hideExpand": false
}

File: projects/projects/zh-CN.md

ๅŸบไบŽ NUXT ็”Ÿๆˆ็š„้™ๆ€็ฝ‘็ซ™ใ€‚

ๅˆฉ็”จ SSR ๏ผˆๆœๅŠกๅ™จๆธฒๆŸ“๏ผ‰ไธบๆฏไธช่ทฏ็”ฑ็”Ÿๆˆไบ†้™ๆ€้กต้ข๏ผŒๆ•…ๆ‰“ๅผ€้กต้ขๆ— ้œ€ๅŠ ่ฝฝ JavaScript ๅณๅฏๅผ€ๅง‹ๆธฒๆŸ“ DOM ๏ผŒๅพ… JavaScript ๅŠ ่ฝฝๅฎŒๆˆๅŽ็”ฑ Vue ๆŽฅ็ฎก DOM ไปฅๅŠ Vue-router ๆŽฅ็ฎก่ทฏ็”ฑ่ทณ่ฝฌใ€‚

ไธบ้กน็›ฎไป‹็ปๆŠฝ่ฑกๅ‡บๅ…ฑ็”จ้ƒจๅˆ†๏ผŒๅฎž็Žฐ็ป„ไปถๅค็”จ๏ผŒๆฏไธช้กน็›ฎไป‹็ปๅช้œ€็ฎ€ๅ•้…็ฝฎๅณๅฏๆทปๅŠ ใ€‚

ไฝฟ็”จไบ† nuxt-i18n ่‡ชๅŠจ็”Ÿๆˆๅคš่ฏญ่จ€่ทฏ็”ฑ๏ผŒๅŠจๆ€ๅŠ ่ฝฝ๏ผŒๆฏไธช้กน็›ฎ็š„ๅฏŒๆ–‡ๆœฌไป‹็ป็”จ Markdown ็ผ–ๅ†™๏ผŒไฝฟ็”จ markdown-loader ่ฝฌๆขไธบ HTML ๅŠ ่ฝฝใ€‚

File: projects/react-resize-reporter/en-US.md

Lightweight React Component that reports width and height changes when its parent resizes.

Why:

  1. Currently there is no perfect solution for detecting element resizing.
  2. Existing solutions are either buggy or with verbose API.

Highlights:

  1. Clean API.
  2. Two implementations with same interface.

File: projects/react-resize-reporter/meta.json

{
"title": {
"zh-CN": "React Resize Reporter",
"en-US": "React Resize Reporter"
},
"url": "https://github.com/crimx/react-resize-reporter",
"stack": ["typescript", "react"],
"badges": {
"github": "crimx/react-resize-reporter",
"npm": "react-resize-reporter"
},
"hideExpand": false
}

File: projects/react-resize-reporter/zh-CN.md

็›‘ๅฌ React ็ป„ไปถๅฐบๅฏธๅ˜ๅŒ–ใ€‚

ไธบไป€ไนˆ๏ผš

  1. ็›ฎๅ‰ๆฒกๆœ‰ๅฎŒ็พŽ็š„่งฃๅ†ณๆ–นๆกˆ็›‘ๅฌ React ็ป„ไปถๅฐบๅฏธๅ˜ๅŒ–ใ€‚
  2. ็Žฐๆœ‰็š„่งฃๅ†ณๆ–นๆกˆ่ฆไนˆไธ็จณๅฎš่ฆไนˆไฝฟ็”จ้žๅธธๅ•ฐๅ—ฆ็š„ APIใ€‚

ไบฎ็‚น๏ผš

  1. ็ฎ€ๆด็š„ APIใ€‚
  2. ไธค็งๅฎž็Žฐๆ–นๅผ๏ผŒๅ…ฑ็”จไธ€ๅฅ—็›ธๅŒ็š„ๆŽฅๅฃใ€‚

File: projects/retux/en-US.md

Minimalist declarative type-safe(strongly-typed) scalable TypeScript Redux architecture.

Features

  • Minimalist. Leveraging advanced features of TypeScript Retux reduces boilerplate code with better type-inferring and auto-completion.
  • Declarative. Action-First instead of Action-Creator-Fisrt desgin results in code that is clean and easy to read for new contributors and future-self.
  • Type-safe(strongly-typed). Retux enforces strict typings. With the utilities in Retux you will never lose the strictness of typings while enjoying great flexibility.
  • Scalable. A Retux module can be easily split into isomorphic sub-modules. Retux can also optionally leverage the power of meta-programming on modern engine for further performance boost.

File: projects/retux/meta.json

{
"title": {
"zh-CN": "Retux",
"en-US": "Retux"
},
"url": "https://github.com/crimx/retux",
"stack": ["typescript", "redux", "lerna"],
"badges": {
"github": "crimx/retux"
},
"hideExpand": false
}

File: projects/retux/zh-CN.md

็ฎ€ๆดใ€ๅฃฐๆ˜Žๅผใ€็ฑปๅž‹ๅฎ‰ๅ…จ๏ผˆๅผบ็ฑปๅž‹๏ผ‰ใ€ๅฏๆ‰ฉๅฑ•็š„ TypeScript Redux ๆžถๆž„ใ€‚

็‰นๆ€ง

  • ็ฎ€ๆดใ€‚ๅ€ŸๅŠฉ TypeScript ็š„้ซ˜็บง็‰นๆ€ง Retux ๅœจๅ‡ๅฐ‘ๆ ทๆฟไปฃ็ ็š„ๅŒๆ—ถไฟๆŒๆ›ดๅฅฝ็š„็ฑปๅž‹ๆŽจๅฏผๅ’Œ่‡ชๅŠจ่กฅๅ…จใ€‚
  • ๅฃฐๆ˜Žๅผใ€‚Action ไผ˜ๅ…ˆ่€Œไธๆ˜ฏ Action Creator ไผ˜ๅ…ˆ็š„่ฎพ่ฎกไฝฟๅˆฐไปฃ็ ๆ›ดๅŠ ๆธ…ๆ™ฐๆ˜“ๆ‡‚๏ผŒ็‰นๅˆซๆ˜ฏๅฏน้กน็›ฎๆ–ฐๆˆๅ‘˜่ฟ˜ๆœ‰ๆœชๆฅ็š„่‡ชๅทฑใ€‚
  • ็ฑปๅž‹ๅฎ‰ๅ…จ๏ผˆๅผบ็ฑปๅž‹๏ผ‰ใ€‚Retux ไฝฟ็”จไธฅๆ ผ็š„็ฑปๅž‹ใ€‚้€š่ฟ‡ Retux ็š„ๅทฅๅ…ทๅฏไปฅ็ตๆดปๅœฐ็ผ–ๅ†™ TypeScript ไปฃ็ ่€ŒไธไผšๅคฑๅŽป็ฑปๅž‹็š„ไธฅๆ ผๆ€งใ€‚
  • ๅฏๆ‰ฉๅฑ•ใ€‚Retux ๆจกๅ—ๅฏไปฅ่ฝปๆ˜“ๅˆ’ๅˆ†ไธบๅคšไธชๅŒๆž„็š„ๅญๆจกๅ—ใ€‚Retux ๅŒๆ—ถๅฏไปฅๅœจ็Žฐไปฃๅผ•ๆ“ŽไธŠๅ€ŸๅŠฉๅ…ƒ็ผ–็จ‹่ฟ›ไธ€ๆญฅๆๅ‡ๆ€ง่ƒฝใ€‚

File: projects/saladict/en-US.md

A handy dictionary extension with eye-pleasing UI. Praised(Chrome review / Firefox review) and supported by hundreds of thousands of users.

Highlights in terms of functional design:

  1. Results from different dictionaries are integrated into one panel with consistent styles for easy cross-reference.
  2. Rapid searching with multiple search modes plus different profiles.
  3. Search text contexts as well as translations are kept in notebook.
  4. High accessibility. Inside iframes, PDFs and even outside of browser.
  5. Follow Unix philosophy. Focus on experience on looking up words while offering flexible interface for force multiplier effects with other tools.

Highlights in terms of technical implementation:

  1. Mass use of React Hooks for abstracting Component async UI logic, with RxJS handling complex user inputs(See my other project observable-hooks).
  2. Components are built with Storybook which enables rapid UI development.
  3. Syltes of dictionary panel and each dictionary are isolated with Shadow DOM with lower cost of performance.
  4. Automation are introduced into the build process(with my other project neutrino-webextension). Dictionaries are loaded with a plugin mechanism.

File: projects/saladict/meta.json

{
"title": {
"zh-CN": "Saladict ๆฒ™ๆ‹‰ๆŸฅ่ฏ",
"en-US": "Saladict"
},
"url": "https://saladict.crimx.com/",
"stack": [
"typescript",
"react",
"observable-hooks",
"redux",
"redux-observable",
"redux-thunk",
"rxjs",
"dexie",
"i18next",
"antd",
"sass",
"neutrino",
"storybook"
],
"badges": {
"github": "crimx/ext-saladict",
"chrome": "cdonnmffkdaoajfknoeeecmchibpmkmg",
"firefox": "ext-saladict"
},
"hideExpand": false
}

File: projects/saladict/zh-CN.md

ไธ“ไธšๅˆ’่ฏๆ‰ฉๅฑ•๏ผŒๅ…ถๆ–ฐ้ข–็š„่ฎพ่ฎกไธŽๅฎž็Žฐๅพ—ๅˆฐๅคง้‡็”จๆˆท็š„่‚ฏๅฎšไธŽๅ–œ็ˆฑใ€‚่ฎธๅคš็”จๆˆท็•™่จ€่ฏ„ไปท๏ผˆ่ฐทๆญŒ็•™่จ€ / ็ซ็‹็•™่จ€๏ผ‰่ฟ™ๆ˜ฏๅ…ถ็”จ่ฟ‡ๆœ€ๅฅฝ็”จ็š„ๅˆ’่ฏๆ‰ฉๅฑ•ใ€‚

ๅŠŸ่ƒฝ่ฎพ่ฎก็š„ไบฎ็‚น๏ผŒ

  1. ่šๅˆๅคšไธช่ฏๅ…ธ็š„็ป“ๆžœๅฏไปฅๅ–ๅ„ๆ‰€้•ฟ๏ผŒๅนถ็”จ็ปŸไธ€็š„้ฃŽๆ ผ้‡ๆŽ’ๆ˜พ็คบ๏ผŒๆžๅคงๅœฐๆ–นไพฟไบ†ไบคๅ‰ๆŸฅ้˜…่ฏๅ…ธใ€‚
  2. ๅคš้‡ๅˆ’่ฏๆจกๅผๅ†็ป“ๅˆๅคš็งๆƒ…ๆ™ฏๆจกๅผ่ƒฝ่ฎฉ็”จๆˆทๅฟซ้€Ÿๅˆ‡ๆข๏ผŒไปฅไธๅŒๆ–นๅผ็ตๆดปๆŸฅ่ฏใ€‚
  3. ็”Ÿ่ฏๆœฌไฟ็•™ไบ†ๆŸฅ่ฏ็š„ไธŠไธ‹ๆ–‡ๅนถ่‡ชๅŠจ่Žทๅ–ๆ•ดๅฅ็ฟป่ฏ‘๏ผŒไปฅไฟ่ฏๅ‡†็กฎ็†่งฃใ€่ฎฐๅฟ†ๅ•่ฏใ€‚
  4. ้ซ˜ๅฏ่ฎฟ้—ฎๆ€ง๏ผŒๅ…ผๅฎนๅ„็งๅคๆ‚ไธไธ€็š„็ฝ‘้กต๏ผŒๅ…ผๅฎน iframe ๅ†…ๅˆ’่ฏ๏ผŒๆ”ฏๆŒ PDF ๅˆ’่ฏใ€‚
  5. Unix ๅ“ฒๅญฆ๏ผŒไธ“ๆณจๆŸฅ่ฏๅนถๆไพ›็ตๆดป็š„ๆŽฅๅฃ๏ผŒ้…ๅˆๅ…ถๅฎƒๅทฅๅ…ทๅ‘ๆŒฅๆ›ดๅผบๅคง็š„ๅŠŸ่ƒฝใ€‚

ๆŠ€ๆœฏๅฎž็Žฐ็š„ไบฎ็‚น๏ผŒ

  1. ๅคง้‡ไฝฟ็”จ React Hooks ไธบ็ป„ไปถๅค็”จๅผ‚ๆญฅไบคไบ’้€ป่พ‘๏ผŒๅˆฉ็”จ RxJS ๅค„็†ๅคๆ‚็š„็”จๆˆท่พ“ๅ…ฅ๏ผŒๅŒๆ—ถไธบๆญคๅผ€ๅ‘ๅ‡บๅฆไธ€้กน็›ฎ observable-hooksใ€‚
  2. ไฝฟ็”จ Storybook ๅผ€ๅ‘็ป„ไปถ๏ผŒๅœจๅฏ่ง†ๅŒ–็Žฏๅขƒไธญๅฟซ้€Ÿ่ฐƒ่ฏ•ใ€‚
  3. ๅœจ React ไธŠไฝฟ็”จ Shadow DOM ไปฅ่พƒไฝŽๆˆๆœฌ้š”็ฆป่ฏๅ…ธ้ขๆฟไปฅๅŠๅ„ไธช่ฏๅ…ธ็š„ๆ ทๅผใ€‚
  4. ๆ•ดๅˆ่ฏๅ…ธ็ป“ๆžœ้œ€่ฆ็†่งฃไธๅŒ่ฏๅ…ธ็ฝ‘้กต็š„่ฎพ่ฎก๏ผŒๅนถไปŽไธญๆ€ป็ป“ๅ‡บ่ง„ๅพ‹๏ผŒ็จณๅฎšๅœฐไธบ็”จๆˆทๆ็‚ผๅฑ•็Žฐๆœ‰็”จ็š„ไฟกๆฏใ€‚
  5. ่‡ชๅŠจๅŒ–ๆž„ๅปบ่„šๆœฌ๏ผŒไธบๆญคๅผ€ๅ‘ๅ‡บไธ“็”จ่„šๆ‰‹ๆžถๆ’ไปถ neutrino-webextensionใ€‚ไปฃ็ ็ป“ๆž„ๅคšๅฑ‚ๆŠฝ่ฑก๏ผŒๆทปๅŠ ่ฏๅ…ธ้‡‡็”จๆ’ไปถๅผๆœบๅˆถ่ฝฝๅ…ฅใ€‚

File: projects/side-effect-manager/en-US.md

A tiny library to encapsulate side effects in a compact, reusable and testable style.

File: projects/side-effect-manager/meta.json

{
"title": {
"zh-CN": "Side Effect Manager",
"en-US": "Side Effect Manager"
},
"url": "https://github.com/crimx/side-effect-manager",
"stack": ["typescript"],
"badges": {
"github": "crimx/side-effect-manager",
"npm": "side-effect-manager"
},
"hideExpand": true
}

File: projects/side-effect-manager/zh-CN.md

ไธ€ไธช่ถ…ๅฐ็š„ๅบ“็”จไบŽไปฅ็ดงๅ‡‘ใ€ๅฏๅค็”จใ€ๅฏๆต‹่ฏ•็š„ๆ–นๅผ็ผ–ๅ†™ๅ‰ฏไฝœ็”จไปฃ็ ใ€‚

File: projects/use-suspensible/en-US.md

React hooks that can make any data suspensible.

Why:

If you follow the Relay Suspense pattern you need to add wrappers to async logic then use read() to get data in Components.

This means:

  • It can only apply to Promise based async logic.
  • You have to write logic and use data in a specific way.
  • When you successfully read() a piece of data, it means the data is "fetched" but not necessary "usable"(unless you write business logic in a conventional way to make sure they are the same). You still need to add logic to check e.g. variation/validation of the data.

use-suspensible does not care how you implement the business logic. It only cares about if the data is usable or not. This makes it a universal solution for Suspense.

With use-suspensible you simply fetch and use data as usual/you like. It just works (with almost no cost).

File: projects/use-suspensible/meta.json

{
"title": {
"zh-CN": "Use Suspensible",
"en-US": "Use Suspensible"
},
"url": "https://github.com/crimx/use-suspensible",
"stack": ["typescript", "react"],
"badges": {
"github": "crimx/use-suspensible",
"npm": "use-suspensible"
},
"hideExpand": false
}

File: projects/use-suspensible/zh-CN.md

ๅฏไปฅ่ฎฉไปปไฝ•ๆ•ฐๆฎ่งฆๅ‘ Suspense ็š„ React hooksใ€‚

ไธบไป€ไนˆ๏ผš

ๅฆ‚ๆžœไฝฟ็”จ Relay Suspense ๆ–นๅผ่ฟ›่กŒๅผ€ๅ‘็š„่ฏ้œ€่ฆๅฏนๅผ‚ๆญฅ้€ป่พ‘่ฟ›่กŒๅŒ…่ฃ…็„ถๅŽๅœจ็ป„ไปถไธญไฝฟ็”จ read() ๆฅ่Žทๅ–ๆ•ฐๆฎใ€‚

่ฟ™ๆ„ๅ‘ณ็€๏ผš

  • ่ฟ™็งๆ–นๅผๅช่ƒฝๅบ”็”จๅˆฐๅŸบไบŽ Promise ็š„ๅผ‚ๆญฅ้€ป่พ‘ใ€‚
  • ้€ป่พ‘็ผ–ๅ†™ๅ’Œๆ•ฐๆฎไฝฟ็”จ้œ€่ฆๆŒ‰็…ง็‰นๅฎš็š„ๆ–นๅผใ€‚
  • ๅฝ“ไปŽread()ๆˆๅŠŸ่Žทๅพ—ๆ•ฐๆฎ๏ผŒ่ฟ™ไป…ไปฃ่กจๆ•ฐๆฎโ€œๆˆๅŠŸ่ฟ”ๅ›žโ€่€Œไธไธ€ๅฎš่ฟ™ไธชๆ•ฐๆฎๆ˜ฏโ€œๅฏ็”จ็š„โ€๏ผˆ้™ค้žๅœจ้€ป่พ‘็ผ–ๅ†™ไธŠๅš็›ธๅบ”็š„่ง„่Œƒ่ฆๆฑ‚ไธค่€…ไธ€่‡ด๏ผ‰ใ€‚ๆ‰€ไปฅ่Žทๅพ—ๆ•ฐๆฎๅŽไพ็„ถ่ฟ˜่ฆๅšๅ„็งๅˆคๆ–ญ้ชŒ่ฏๆ•ฐๆฎใ€‚

use-suspensible ไธๅœจไนŽๅผ‚ๆญฅ้€ป่พ‘ๆ˜ฏๆ€Žไนˆๅฎž็Žฐ็š„๏ผŒๅฎƒๅชๅ…ณๅฟƒ่ฟ™ไธชๆ•ฐๆฎๆ˜ฏๅฆๅฏ็”จ๏ผŒไธๅฏ็”จไพฟ่งฆๅ‘ Suspenseใ€‚่ฟ™ไฝฟๅˆฐๅฎƒๆ˜ฏไธ€็ง้€š็”จ็š„ Suspense ่งฃๅ†ณๆ–นๆกˆใ€‚

ไฝฟ็”จ use-suspensible ๅช้œ€่ฆๆŒ‰ไน ๆƒฏ็š„ๆ–นๅผ่Žทๅ–ๅ’Œไฝฟ็”จๆ•ฐๆฎๅณๅฏ๏ผŒ้€ป่พ‘็ผ–ๅ†™ไธ้œ€่ฆๅšไปปไฝ•ๆ”นๅ˜ใ€‚

File: projects/value-enhancer/en-US.md

A tiny library to enhance value with reactive wrapper.

File: projects/value-enhancer/meta.json

{
"title": {
"zh-CN": "Value Enhancer",
"en-US": "Value Enhancer"
},
"url": "https://github.com/crimx/value-enhancer",
"stack": ["typescript"],
"badges": {
"github": "crimx/value-enhancer",
"npm": "value-enhancer"
},
"hideExpand": true
}

File: projects/value-enhancer/zh-CN.md

ไธ€ไธช่ถ…ๅฐ็š„ๅบ“็”จไบŽๅ“ๅบ”ๅผ็ผ–็จ‹ใ€‚

File: projects/webextension-store-meta/en-US.md

Get browser extension(webextension) item meta from Chrome Web Store and Firefox add-ons. Used by Shields.io and Badgen.

File: projects/webextension-store-meta/meta.json

{
"title": {
"zh-CN": "Webextension Store Meta",
"en-US": "Webextension Store Meta"
},
"url": "https://github.com/crimx/webextension-store-meta",
"stack": ["vanilla-js"],
"badges": {
"github": "crimx/webextension-store-meta",
"npm": "webextension-store-meta"
},
"hideExpand": true
}

File: projects/webextension-store-meta/zh-CN.md

่Žทๅ–ๆต่งˆๅ™จๆ‰ฉๅฑ•ๅ…ƒๆ•ฐๆฎ๏ผŒไฝฟ็”จ่ฝป้‡ใ€็จณๅฎšใ€้ซ˜ๆ•ˆ็š„ๆ–นๅผใ€‚ๅทฒ่ขซ่‘—ๅ็š„ๅผ€ๆบๅพฝ็ซ ๅบ“ Shields.io ๅ’Œ Badgen ้‡‡็”จใ€‚

File: projects/webpack-target-webextension/en-US.md

WebExtension Target for Webpack 4. Supports code-splitting with native dynamic import.

Dynamically loading chunks is not possible in WebExtension content scripts with the default Webpack JSONP.

This library is also included in the neutrino-webextension preset.

File: projects/webpack-target-webextension/meta.json

{
"title": {
"zh-CN": "Webpack Target WebExtension",
"en-US": "Webpack Target WebExtension"
},
"url": "https://github.com/crimx/webpack-target-webextension",
"stack": ["webpack"],
"badges": {
"github": "crimx/webpack-target-webextension",
"npm": "webpack-target-webextension"
},
"hideExpand": false
}

File: projects/webpack-target-webextension/zh-CN.md

้€‚็”จไบŽ Webpack 4 ็š„ WebExtension Target ใ€‚ๅˆฉ็”จๅŽŸ็”Ÿ import ๅŠจๆ€ๅŠ ่ฝฝๅˆ†ๅ—ใ€‚

Webpack ้ป˜่ฎค็š„ JSONP ๆœบๅˆถๆ— ๆณ•ๅœจ WebExtension ็š„ content scripts ไธญๅŠจๆ€ๅŠ ่ฝฝๅˆ†ๅ—ใ€‚

็›ธๅ…ณๅŽŸ็†่งๆˆ‘็š„ๆ–‡็ซ ใ€Œ่‡ชๅฎšไน‰ Webpack Targetใ€ใ€‚

่ฟ™ไธชๅบ“ๅทฒ็ปๅ†…็ฝฎๅˆฐ neutrino-webextension preset ไธญใ€‚

File: projects/weitweet/en-US.md

Chrome / Firefox extension. Share Fanfou, Twitter and Weibo in one click.

  1. Abstract OAuth 1a & 2 flows using template design pattern to support different platforms๏ผˆOAuth 1a with Fanfou and Twitter, Oauth 2 with Weibo๏ผ‰.
  2. Serverless OAuth flow with chrome.identity and content script magic.
  3. UI with iview.
  4. Build system is vue-cli based and extended with webpack-chain, which enables building and packing in one click.

File: projects/weitweet/meta.json

{
"title": {
"zh-CN": "ๅฐๆŽจ WeiTweet",
"en-US": "WeiTweet"
},
"url": "https://github.com/crimx/crx-weitweet",
"stack": [
"typescript",
"vue",
"iview",
"sass"
],
"badges": {
"github": "crimx/crx-weitweet",
"chrome": "jcgjbjbbcjgkpdanbnafdbdlbjacdkln",
"firefox": "weitweet"
},
"hideExpand": false
}

File: projects/weitweet/zh-CN.md

ไธ€ๆฌพๅฏไปฅๅˆ†ไบซ็ฝ‘้กตๅˆฐ้ฅญๅฆใ€ๆŽจ็‰นๅ’Œๅพฎๅš็š„ Chrome / Firefox ๆ‰ฉๅฑ•ใ€‚ๅนถๅฏไปฅไปŽ็ฝ‘้กตไธญๆๅ–ๆ‰€ๆœ‰ๅ›พ็‰‡ใ€‚

  1. ๅฏน OAuth 1a ไธŽ 2 ็š„้ชŒ่ฏๆต็จ‹ๆถˆๅŒ–็†่งฃ๏ผŒๅนถๆŠฝ่ฑกๅ‡บ้€š็”จ็ฑปๅˆฉ็”จๆจกๆฟๆจกๅผๆ”ฏๆŒๅ„ไธชๅนณๅฐ๏ผˆ้ฅญๅฆไธŽๆŽจ็‰นไฝฟ็”จ OAuth 1a๏ผŒๅพฎๅšไฝฟ็”จ Oauth 2๏ผ‰ใ€‚
  2. ๅˆฉ็”จ chrome.identity ไปฅๅŠ content script ้ป‘็ง‘ๆŠ€ๅฎž็Žฐ OAuth ็š„ๆ— ๆœๅŠกๅ™จ่‡ชๅŠจๆŽˆๆƒใ€‚
  3. UI ๅฎŒๅ…จๅŸบไบŽ iview ใ€‚
  4. ไปฃ็ ๆž„ๅปบ็ณป็ปŸๅˆฉ็”จ webpack-chain ๅŸบไบŽ vue-cli ๅฑ•ๅผ€๏ผŒไธ€้”ฎๆž„ๅปบๆ‰“ๅŒ…ใ€‚

File: static/ads.txt

google.com, pub-6993077405597797, DIRECT, f08c47fec0942fa0

Explore Related Technologies & Topics

View All 9,111+ Repositories โ†’

Discover similar high-velocity repositories, agent skills, and OpenAPI specifications across the ecosystem.

โšก MCP Servers Model Context Protocol โ†’ ๐Ÿง  Agent Skills Prompt & rule files โ†’ ๐Ÿ”Œ OpenAPI Specs REST & Swagger schemas โ†’