feat(components): 元件下載區改為與原始碼自動同步

.github/workflows/build.yml

@@ -31,6 +31,15 @@ jobs:
           TARGET_URL="https://storage.googleapis.com/guide-dev/${{ github.run_id }}"
           hugo build --minify --baseURL "$TARGET_URL"
 
+      - name: Package source for download
+        run: |
+          mkdir -p ./public/zip ./_scss-source-stage/svgs
+          cp -r assets/css ./_scss-source-stage/css
+          cp static/svgs/downarrow.svg static/svgs/uparrow.svg ./_scss-source-stage/svgs/
+          (cd ./_scss-source-stage && zip -r ../public/zip/scss-source.zip . -x '*.DS_Store' -x '*/.*')
+          rm -rf ./_scss-source-stage
+          (cd static/js && zip -r ../../public/zip/js-components.zip components -x '*.DS_Store' -x '*/.*')
+
       - name: Archive production artifacts
         uses: actions/upload-artifact@v4
         with:

.github/workflows/deploy-to-gh-pages.yml

@@ -41,6 +41,15 @@ jobs:
         run: |
           hugo --minify --config hugo.toml
 
+      - name: Package source for download
+        run: |
+          mkdir -p ./public/zip ./_scss-source-stage/svgs
+          cp -r assets/css ./_scss-source-stage/css
+          cp static/svgs/downarrow.svg static/svgs/uparrow.svg ./_scss-source-stage/svgs/
+          (cd ./_scss-source-stage && zip -r ../public/zip/scss-source.zip . -x '*.DS_Store' -x '*/.*')
+          rm -rf ./_scss-source-stage
+          (cd static/js && zip -r ../../public/zip/js-components.zip components -x '*.DS_Store' -x '*/.*')
+
       - name: Archive production artifacts
         uses: actions/upload-artifact@v4
         with:

content/components/_index.md

@@ -9,7 +9,9 @@ weight: 20
 
 ### CSS 元件使用方式
 
-可直接[下載]({{< relURL "zip/css.zip" >}})，並使用下方程式碼匯入：
+#### 一般使用
+
+直接以 `<link>` 引用或下載 [main.css]({{< relURL "main.css" >}}) 後置於專案靜態資源資料夾，並使用下方程式碼匯入：
 
 {{< code-example content=`<link rel="stylesheet" href="../main.css">` >}}
 
@@ -21,32 +23,36 @@ weight: 20
   </p>
 </div>
 
-#### 多國語系支援
-
-請依照[多國語系支援]({{< ref "visual/internationalization/_index.md" >}})另外包含所需要的字體 CSS 檔案。
+#### 進階使用（SCSS）
 
-### JavaScript 元件使用方式
+若專案具備 SCSS build pipeline，可下載 [scss-source.zip]({{< relURL "zip/scss-source.zip" >}})，解壓後內含：
 
-#### [文字輸入區塊]({{< ref "components/textarea/_index.md" >}})
+- `css/` — SCSS 元件原始碼
+- `svgs/` — 元件樣式所引用的 SVG 圖示（如 `accordion`）
 
-下載 [character-count.js]({{< relURL "js/components/character-count.js" >}}) 檔案並選擇性使用下方程式碼匯入：
+部分元件 CSS 透過相對 URL（例如 `url("svgs/downarrow.svg")`）引用圖示，部署時請將 `svgs/` 置於與編譯後 CSS 相同層級，確保路徑可正確解析。
 
-{{< code-example content=`<script src="../character-count.js" defer></script>` >}}
+將進入點 `.scss` 置於 `css/` 目錄內（或以 `sass --load-path=css` 編譯），即可依需求 import 所需元件：
 
-#### [公文元件]({{< ref "components/official-document/_index.md" >}})
+{{< code-example content=`@import "variables";
+@import "color";
+@import "typography";
+@import "components/accordion";
+@import "components/modal";` >}}
 
-下載 [official-document-element.js]({{< relURL "js/components/official-document-element.js" >}}) 檔案並選擇性使用下方程式碼匯入：
+#### 多國語系支援
 
-{{< code-example content=`<script src="../official-document-element.js" type="module"></script>` >}}
+請依照[多國語系支援]({{< ref "visual/internationalization/_index.md" >}})另外包含所需要的字體 CSS 檔案。
 
-#### [互動資料表格]({{< ref "components/table/_index.md" >}})
+### JavaScript 元件使用方式
 
-下載 [interactive-table-element.js]({{< relURL "js/components/interactive-table-element.js" >}}) 檔案並選擇性使用下方程式碼匯入：
+各 JS 元件獨立分檔，每個元件的下載連結與詳細用法請參考個別元件頁面。如需一次取得全部，可下載 [js-components.zip]({{< relURL "zip/js-components.zip" >}})。
 
-{{< code-example content=`<script src="../interactive-table-element.js" type="module"></script>` >}}
+所有 JS 元件統一以 ES module 載入：
 
-#### [跳至主要內容區]({{< ref "components/skip-to/_index.md" >}})
+{{< code-example content=`<script src="../{檔名}.js" type="module"></script>` >}}
 
-下載 [skip-to-element.js]({{< relURL "js/components/skip-to-element.js" >}}) 檔案並選擇性使用下方程式碼匯入：
+例如：
 
-{{< code-example content=`<script src="../skip-to-element.js" type="module"></script>` >}}
+{{< code-example content=`<script src="../character-count.js" type="module"></script>
+<script src="../accordion.js" type="module"></script>` >}}

readme.md

@@ -6,7 +6,9 @@
 
 ## CSS 元件使用方式
 
-可直接[下載](https://guide.nics.nat.gov.tw/assets/css.zip)，並使用下方程式碼匯入：
+### 一般使用
+
+直接以 `<link>` 引用或下載 [main.css](https://guide.nics.nat.gov.tw/main.css) 後置於專案靜態資源資料夾，並使用下方程式碼匯入：
 
 ```
 <link rel="stylesheet" href="../main.css">
@@ -17,42 +19,44 @@
 > [!WARNING]
 > 本檔案暫時包含 <a href="https://tachyons.io/">Tachyons</a>，作為 Atomic CSS 的第三方程式。
 
-### 多國語系支援
+### 進階使用（SCSS）
 
-請依照[多國語系支援](https://guide.nics.nat.gov.tw/visual/internationalization/index.html)另外包含所需要的字體 CSS 檔案。
+若專案具備 SCSS build pipeline，可下載 [scss-source.zip](https://guide.nics.nat.gov.tw/zip/scss-source.zip)，解壓後內含：
 
-## JavaScript 元件使用方式
+- `css/` — SCSS 元件原始碼
+- `svgs/` — 元件樣式所引用的 SVG 圖示（如 `accordion`）
 
-### [文字輸入區塊](https://guide.nics.nat.gov.tw/components/textarea/index.html)
+部分元件 CSS 透過相對 URL（例如 `url("svgs/downarrow.svg")`）引用圖示，部署時請將 `svgs/` 置於與編譯後 CSS 相同層級，確保路徑可正確解析。
 
-下載 [character-count.js](https://guide.nics.nat.gov.tw/js/components/character-count.js) 檔案並選擇性使用下方程式碼匯入：
+將進入點 `.scss` 置於 `css/` 目錄內（或以 `sass --load-path=css` 編譯），即可依需求 import 所需元件：
 
-```
-<script src="../character-count.js" defer>
+```scss
+@import "variables";
+@import "color";
+@import "typography";
+@import "components/accordion";
+@import "components/modal";
 ```
 
-### [公文元件](https://guide.nics.nat.gov.tw/components/official-document/index.html)
+### 多國語系支援
 
-下載 [official-document-element.js](https://guide.nics.nat.gov.tw/js/components/official-document-element.js) 檔案並選擇性使用下方程式碼匯入：
+請依照[多國語系支援](https://guide.nics.nat.gov.tw/visual/internationalization/index.html)另外包含所需要的字體 CSS 檔案。
 
-```
-<script src="../official-document-element.js" type="module">
-```
+## JavaScript 元件使用方式
 
-### [互動資料表格](https://guide.nics.nat.gov.tw/components/table/index.html)
+各 JS 元件獨立分檔，每個元件的下載連結與詳細用法請參考 [共用元件](https://guide.nics.nat.gov.tw/components/index.html) 各元件頁面。如需一次取得全部，可下載 [js-components.zip](https://guide.nics.nat.gov.tw/zip/js-components.zip)。
 
-下載 [interactive-table-element.js](https://guide.nics.nat.gov.tw/js/components/interactive-table-element.js) 檔案並選擇性使用下方程式碼匯入：
+所有 JS 元件統一以 ES module 載入：
 
 ```
-<script src="../interactive-table-element.js" type="module">
+<script src="../{檔名}.js" type="module"></script>
 ```
 
-### [互動資料表格](https://guide.nics.nat.gov.tw/components/skip-to/index.html)
-
-下載 [skip-to-element.js](https://guide.nics.nat.gov.tw/js/components/skip-to-element.js) 檔案並選擇性使用下方程式碼匯入：
+例如：
 
 ```
-<script src="../skip-to-element.js" type="module">
+<script src="../character-count.js" type="module"></script>
+<script src="../accordion.js" type="module"></script>
 ```
 
 ## 開發