{"id":21802590,"url":"https://github.com/rayc2045/astro-color-picker","last_synced_at":"2026-04-16T12:31:24.346Z","repository":{"id":140269764,"uuid":"474995789","full_name":"rayc2045/astro-color-picker","owner":"rayc2045","description":"Build A Color Picker App with Astro","archived":false,"fork":false,"pushed_at":"2022-04-05T19:48:35.000Z","size":386,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-31T05:38:44.507Z","etag":null,"topics":["astro","astrojs","color-palette","color-picker","colorpicker","colors-names","colorscheme","colorschemes","vite","vite-template","vitejs"],"latest_commit_sha":null,"homepage":"https://astro-colors.netlify.app","language":"Astro","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rayc2045.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-03-28T12:38:44.000Z","updated_at":"2022-04-01T14:19:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"5b7fa5be-c659-412f-ba11-0e3e0b0450e2","html_url":"https://github.com/rayc2045/astro-color-picker","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rayc2045/astro-color-picker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fastro-color-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fastro-color-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fastro-color-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fastro-color-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rayc2045","download_url":"https://codeload.github.com/rayc2045/astro-color-picker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fastro-color-picker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31885626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T11:36:10.202Z","status":"ssl_error","status_checked_at":"2026-04-16T11:36:09.652Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["astro","astrojs","color-palette","color-picker","colorpicker","colors-names","colorscheme","colorschemes","vite","vite-template","vitejs"],"created_at":"2024-11-27T11:29:35.804Z","updated_at":"2026-04-16T12:31:24.326Z","avatar_url":"https://github.com/rayc2045.png","language":"Astro","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Astro Color Picker｜使用框架 Astro 打造的色票複製工具\n\n![astro-colors.netlify.app](https://cdn.dribbble.com/users/3800131/screenshots/17078912/media/2e27671e28657e221e755806a709f630.png)\n\n[\u003e Astro Color Picker](https://astro-colors.netlify.app/)\n\n### 簡介\n去年看到 Astro 剛發布時所宣稱的「用較少的 JavaScript 打造極速網站」就對這樣的框架產生興趣，那時雖然也試玩了一下，不過因為遇到一些開發初期的 bug 放棄研究。直到近期拿過去使用 petite-vue 開發的專案 — [HTML Reserved Colors](https://github.com/rayc2045/html-reserved-colors) 來透過 Astro 重新打造外觀和功能完全一樣的姐妹網站，體驗到提升網站載入速度和 SEO 效果的靜態網頁生成，也在實作上發現一些值得注意的地方：(1) `\u003cscript\u003e` 中 fetch 資料時不可使用本地路徑，必須使用網址；(2) Astro 預設在打包時會清除 JavaScript 程式碼，如果想要元件裡的 JS 一同被打包，就要在引入時加入 Astro 的標籤，如 `\u003cMyComponent client:visible /\u003e`，詳細說明見 [Partial Hydration in Astro](https://docs.astro.build/en/core-concepts/component-hydration/)；(3) 如果想要讓頁面中的  JavaScript 程式碼被打包，就要加上 `hoist` tag，也就是 `\u003cscript hoist\u003e\u003c/script\u003e`，但是在開發時加入 `hoist` tag 會導致熱重載 (hot-reload) 中斷，所以我的作法是開發時先移除標籤，待程式碼打包時再利用 git record 的變更提示來提醒自己加上，目前算是比較麻煩的地方。總體而言，使用 Astro 框架開發的過程還算滿意，將 JavaScript 產生的元件打包成 HTML String、以及對 Astro 意圖[整合所有主流前端框架](https://docs.astro.build/en/core-concepts/framework-components/)的作法感到新奇，是一個會想繼續使用的工具。\n\n### 外觀與互動設計\n- 見原專案：[HTML Reserved Colors](https://github.com/rayc2045/html-reserved-colors)\n\n### 開發紀錄\n- 將 `\u003chead\u003e` 與色票卡片做成元件載入\n- 使用 Sass 做出在頁面引入的 [全域樣式](https://github.com/rayc2045/astro-color-picker/blob/main/src/styles/global.sass) 和元件中配合使用的 [設定樣式](https://github.com/rayc2045/astro-color-picker/blob/main/src/styles/_settings.sass)\n- 將通用型程式碼 ([utils.js](https://github.com/rayc2045/astro-color-picker/blob/main/src/scripts/utils.js)) 與專案用程式碼進行拆分，需要時再模組化引入做使用 (module import)\n- 以原生 DOM 操作實現透過網址查詢參數 (Query String) [過濾色票卡片的功能](https://astro-colors.netlify.app/?colors=darkorange+indianred+sandybrown+seagreen+darkseagreen+lightslategray)\n- 專案打包後使用 VS Code 套件 [MinifyAll](https://marketplace.visualstudio.com/items?itemName=josee9988.minifyall) 進一步壓縮 HTML 檔案\n- 其他見原專案：[HTML Reserved Colors](https://github.com/rayc2045/html-reserved-colors)\n\n### Commands\n\n| Command          | Action                                       |\n|:---------------- |:-------------------------------------------- |\n| `pnpm i`         | Installs dependencies                        |\n| `pnpm dev`       | Starts local dev server at `localhost:3000`  |\n| `pnpm build`     | Build the production site to `./dist/`       |\n| `pnpm preview`   | Preview the build locally, before deploying  |\n| `pnpm product`   | Build the production site, and preview it    |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayc2045%2Fastro-color-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frayc2045%2Fastro-color-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayc2045%2Fastro-color-picker/lists"}