feat: workflows

.github/workflows/docker.yaml

@@ -0,0 +1,19 @@
+name: build docker images
+on:
+  push:
+    branches:
+      - "main"
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    steps:
+      - uses: actions/checkout@v3
+      - name: build
+        run: |
+          VERSION="latest"
+          TAG="${{secrets.DOCKER_REGISTRY}}/${{secrets.DOCKER_SPACE}}"
+          IMAGE="${{secrets.IMAGE_NAME}}"
+          docker login -u ${{ secrets.DOCKER_USER }} -p ${{ secrets.DOCKER_PASSWD }} ${{secrets.DOCKER_REGISTRY}}
+          docker build --target runner -t "${TAG}/${IMAGE}:${VERSION}" .
+          docker push "${TAG}/${IMAGE}:${VERSION}"

Dockerfile

@@ -0,0 +1,17 @@
+FROM node:22.1.0-alpine3.19 AS builder
+
+WORKDIR /usr/src/app
+
+COPY . .
+RUN npm install
+RUN npm run build
+
+FROM node:22.1.0-alpine3.19 AS runner
+WORKDIR /usr/src/app
+COPY --from=builder /usr/src/app/.output ./.output
+COPY --from=builder /usr/src/app/package.json ./package.json
+COPY --from=builder /usr/src/app/package-lock.json ./package-lock.json
+RUN npm install --only=production
+EXPOSE 3000
+
+CMD [ "node", "./.output/server/index.mjs" ]

content/0.browser/2.css-basic.md

@@ -384,6 +384,46 @@ a::first-line { /* 选择a标签的第一行 */
 | starting-style | 用于定义元素上设置的属性的起始值 |
 | supports | 指定依赖于浏览器中的一个或多个特定的CSS功能的支持声明 |
 
+### CSS函数
+
+| 名称 | 介绍 | 示例 |
+| :-- | :-- | :--  |
+| abs | 返回参数的绝对值, 与输入类型相同 | width: abs(20% - 100px); |
+| acos | 反余弦,输入-1到1的参数,返回0-180度的弧度数  | transform: rotate(acos(-0.2)); |
+| asin | 反正弦,输入-1到1的参数, 返回-90到90之间的弧度数 | transform: rotate(asin(-0.2)); |
+| atan | 反正切, 输入任意数字, 返回-90到90之间的弧度数 | transform: rotate(atan(1)); |
+| atan2 | 反正切, 输入任意两个数字, 返回两个输入的反正切值-180到180之间的弧度数 | transform: rotate(atan2(1, 2)) |
+| attr | 获取CSS属性, 若属性不合法, 则使用后面的默认值 | content: attr(data-foo) " "; |
+| calc | 在声明CSS属性时执行一些计算 | width: calc(100% - 80px) |
+| clamp | 把一个值限制在一个范围 | clamp(MIN, VAL, MAX) |
+| cos | 余弦函数 | width: calc( 100px * cos(45deg)) |
+| counter | 返回一个代表计数器的当前值的字符串 | counter(countername, upper-roman) |
+| counters | 返回表示指定计数器当前值的连接字符串 | counters(countername, '-'); |
+| cross-fade | 定义透明度混合两个或多个图像 | cross-fade(url(white.png) 0%, url(black.png) 100%); |
+| element | 从任意的 HTML 元素中生成的图像 | background: element(id); |
+| env | 类似var引用CSS变量 | env(safe-area-inset-top, 20px); |
+| exp | 以e为底数的指数函数 | width: calc(100px * exp(-1)); |
+| fit-content | 将给定大小, 缩放成可用大小 | fit-content(300px) |
+| hypot | 返回参数平方和的平方根 | hypot(3em, 4em) |
+| log | 对数函数, 默认以e为底 | log(2); |
+| max | 求参数的最大值 | max(10vw, 4em, 80px) |
+| min | 求参数的最小值 | min(10vw, 4em, 80px) |
+| minmax | 定义一个长范围的闭区间, 通常与网格布局一起使用 | minmax(200px, 1fr) |
+| mod | 取模 | mod(10, 3) |
+| path | 接收SVG的路径字符串 | path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"); |
+| pow | 指数函数 | pow(5, 2) |
+| ray | 定义动画元素遵循的offset-path线段 | ray(50deg closest-corner contain at 100px 20px); |
+| rem | 取余函数 | rem(14, 5) |
+| repeat | 表示轨迹列表的重复片段 | repeat(4, 1fr) |
+| round | 根据选定的舍入策略选择数字 | round(117px, 25px); |
+| sign | 返回参数的正负 | sign(20vh-100px) |
+| sin | 正弦函数 | sin(45deg) |
+| sqrt | 平方根 | sqrt(9) |
+| symbols | 用于计算list-style的值 | symbols(cyclic "*" "†" "‡"); |
+| tan | 正切函数 | tan(20deg); |
+| url | 指向资源 | url("http://mysite.example.com/mycursor.png") |
+| var | 引用CSS变量 | color: var(--color-a); |
+
 ### 层叠
 
 层叠(覆盖)如果两条规则的优先级一样, 那么后面的规则将覆盖前面的规则
@@ -405,4 +445,10 @@ a::first-line { /* 选择a标签的第一行 */
 </html>
 ```
 
-最终`This is my heading.`是蓝色的
+最终`This is my heading.`是蓝色的
+
+### 优先级
+
+CSS的计算中, 最后每一个元素的每一个CSS属性都会有值
+
+1. 

content/7.note/5.shell.md

@@ -0,0 +1,21 @@
+# shell编程
+
+以`bash`为例
+
+## shell开始
+
+shell脚本执行有多种方式
++ ./cmd.sh
+执行cmd.sh
++ source cmd.sh 或 . ./source.sh
++ bash cmd.sh
+
+```shell
+#!/usr/bin/env bash
+echo "Hello world!"
+```
+/usr/bin/env bash 用于直接执行shell脚本时`./cmd.sh`, 指定shell的解释器, /usr/bin/env bash是在环境变量中查找bash, 如果写成`/bin/bash`, 则bash只能在/bin目录下.
+
+
+
+