@naiheyoung/use 0.0.2 → 0.0.4

package/dist/templates/npm-publish.yml

@@ -0,0 +1,54 @@
+name: Publish to npm
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  id-token: write
+  contents: read
+
+jobs:
+  check-version:
+    runs-on: ubuntu-latest
+    outputs:
+      is_version: ${{ steps.check.outputs.is_version }}
+    steps:
+      - name: Check commit message
+        id: check
+        run: |
+          COMMIT_MSG="${{ github.event.head_commit.message }}"
+          echo "Commit message: $COMMIT_MSG"
+
+          if echo "$COMMIT_MSG" | grep -Eq '^[0-9]+\.[0-9]+\.[0-9]+$'; then
+            echo "is_version=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "is_version=false" >> "$GITHUB_OUTPUT"
+          fi
+
+  publish:
+    needs: check-version
+    if: needs.check-version.outputs.is_version == 'true'
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: pnpm/action-setup@v4
+
+      - uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+          cache: pnpm
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Install
+        run: pnpm i --frozen-lockfile
+
+      - name: Build
+        run: pnpm build
+
+      - name: Publish
+        run: pnpm publish --provenance --access public

package/dist/templates/prose.css

@@ -68,16 +68,21 @@
 
 :root {
   --shiki-dark-bg-0: #151515;
-  --prose-padding-block: 12px;
-  --prose-padding-inline: 1.5rem;
-  --prose-radius: 0.5rem;
+  --prose-pre-padding-block: 12px;
+  --prose-pre-code-padding-inline: 1.5rem;
+  --prose-pre-radius: 0.5rem;
   --prose-diff-add-color: #3dd68c;
+  --prose-diff-add-bg-color: rgb(61 214 140 / 0.18);
   --prose-diff-remove-color: #cb7676;
-  --prose-highlighted-bg-color: rgba(101, 117, 133, 0.16);
+  --prose-diff-remove-bg-color: rgb(203 118 118 / 0.18);
+  --prose-highlighted-bg-color: rgb(136 136 136 / 0.13);
+  --prose-l-highlighted-word-color: #ff8282;
   --prose-highlighted-word-color: #e6a817;
   --prose-focused-opacity: 0.7;
   --prose-focused-blur: 0.095rem;
   --prose-li-fg: var(--colors-pink-rgb);
+  --prose-hr-block: 1.5rem;
+  --prose-hr-fg: rgb(var(--colors-d-rgb) / 0.65);
 }
 
 .prose h1 {
@@ -114,19 +119,66 @@
   line-height: 1.5;
 }
 
-html.dark .prose .has-diff span.diff::before {
-  position: absolute;
-  left: calc(var(--prose-padding-inline) / 3);
-  transition: color 0.35s;
+html.dark .prose .shiki {
+  color: var(--shiki-dark);
+  background-color: var(--shiki-dark-bg-0);
+
+  & span {
+    color: var(--shiki-dark);
+  }
 }
 
-html.dark .prose .has-diff span.diff.add::before {
-  content: '+';
-  color: var(--prose-diff-add-color);
+html .prose .shiki {
+  color: var(--shiki-light);
+  background-color: var(--shiki-light-bg);
+  border-radius: var(--prose-pre-radius);
+
+  & span {
+    color: var(--shiki-light);
+  }
 }
 
-html.dark .prose .has-diff span.diff.remove {
-  opacity: 0.85;
+.prose .shiki {
+  position: relative;
+  padding-block: var(--prose-pre-padding-block);
+  margin-block: 0.5rem;
+
+  > code {
+    display: block;
+    line-height: 1.7;
+    padding-inline: var(--prose-pre-code-padding-inline);
+  }
+}
+
+.prose .has-diff span.diff {
+  width: calc(100% + (var(--prose-pre-code-padding-inline) * 2));
+  display: inline-block;
+  margin-inline: calc(-1 * var(--prose-pre-code-padding-inline));
+  padding-inline: var(--prose-pre-code-padding-inline);
+
+  &::before {
+    position: absolute;
+    left: calc(var(--prose-pre-code-padding-inline) / 3);
+    transition: color 0.35s;
+  }
+}
+
+html.dark .prose .has-diff span.diff {
+  background: unset;
+}
+
+.prose .has-diff span.diff.add {
+  background-color: var(--prose-diff-add-bg-color);
+
+  &::before {
+    content: '+';
+    color: var(--prose-diff-add-color);
+  }
+}
+
+.prose .has-diff span.diff.remove {
+  opacity: 0.75;
+  background-color: var(--prose-diff-remove-bg-color);
 
   &::before {
     content: '-';
@@ -134,23 +186,32 @@ html.dark .prose .has-diff span.diff.remove {
   }
 }
 
-html.dark .prose .has-highlighted span.highlighted {
+html.dark .prose .has-diff span.diff.remove {
+  opacity: 0.85;
+}
+
+.prose .has-highlighted span.highlighted,
+.prose span.highlighted {
   background-color: var(--prose-highlighted-bg-color);
   transition: background-color 0.35s;
-  width: calc(100% + (var(--prose-padding-inline) * 2));
+  width: calc(100% + (var(--prose-pre-code-padding-inline) * 2));
   display: inline-block;
-  margin-inline: -1.5rem;
-  padding-inline: var(--prose-padding-inline);
+  margin-inline: calc(-1 * var(--prose-pre-code-padding-inline));
+  padding-inline: var(--prose-pre-code-padding-inline);
 }
 
-html.dark .prose .shiki span.highlighted-word {
+.prose .shiki span.highlighted-word {
   padding: 1px 3px;
   margin: -1px -3px;
   border-radius: 3px;
+  text-decoration: var(--prose-l-highlighted-word-color) underline;
+}
+
+html.dark .prose .shiki span.highlighted-word {
   text-decoration: var(--prose-highlighted-word-color) underline;
 }
 
-html.dark .prose .has-focused .line:not(.focused) {
+.prose .has-focused .line:not(.focused) {
   opacity: var(--prose-focused-opacity);
   filter: blur(var(--prose-focused-blur));
   transition:
@@ -158,13 +219,14 @@ html.dark .prose .has-focused .line:not(.focused) {
     filter 0.35s;
 }
 
-html.dark .prose .has-focused:hover .line:not(.focused) {
+.prose .has-focused:hover .line:not(.focused) {
   opacity: 1;
   filter: blur(0);
 }
 
 .prose hr {
-  height: 1rem;
+  margin-block: var(--prose-hr-block);
+  color: var(--prose-hr-fg);
 }
 
 .prose mark,
@@ -190,7 +252,7 @@ html.dark .prose .has-focused:hover .line:not(.focused) {
     position: absolute;
     content: '';
     width: 0.25rem;
-    background-color: rgba(125, 125, 125, 0.3);
+    background-color: rgb(125 125 125 / 0.3);
     top: 0.6rem;
     bottom: 0.4rem;
     border-radius: 3px;
@@ -207,18 +269,18 @@ html.dark .prose .has-focused:hover .line:not(.focused) {
   display: flex;
   gap: 3px;
   font-size: 0.875rem;
-  color: rgba(0, 0, 0, 0.55);
+  color: rgb(0 0 0 / 0.55);
   align-items: center;
 
   &.markdown-magic-link-github-at {
-    background-color: rgba(0, 0, 0, 0.1);
+    background-color: rgb(0 0 0 / 0.1);
     border-radius: 1.5em;
     width: fit-content;
     padding-right: 0.6em;
     transition: background-color 0.35s;
 
     &:hover {
-      background-color: rgba(0, 0, 0, 0.15);
+      background-color: rgb(0 0 0 / 0.15);
     }
   }
 
@@ -234,13 +296,13 @@ html.dark .prose .has-focused:hover .line:not(.focused) {
 }
 
 html.dark .prose .markdown-magic-link {
-  color: rgba(255, 255, 255, 0.55);
+  color: rgb(255 255 255 / 0.55);
 
   &.markdown-magic-link-github-at {
-    background-color: rgba(255, 255, 255, 0.1);
+    background-color: rgb(255 255 255 / 0.1);
 
     &:hover {
-      background-color: rgba(255, 255, 255, 0.15);
+      background-color: rgb(255 255 255 / 0.15);
     }
   }
 }
@@ -284,6 +346,30 @@ html.dark .prose .markdown-magic-link {
   }
 }
 
+.prose ol {
+  padding: 1rem;
+  counter-reset: orderedCounter;
+
+  > li {
+    position: relative;
+    counter-increment: orderedCounter;
+    position: relative;
+    padding-inline: 2.5rem;
+    padding-bottom: 1.5rem;
+    font-size: 1.25rem;
+
+    &::before {
+      position: absolute;
+      content: counter(orderedCounter, decimal-leading-zero) '.';
+      left: -3px;
+    }
+
+    & li:last-child {
+      padding-bottom: unset;
+    }
+  }
+}
+
 @keyframes living {
   0% {
     box-shadow: 0 0 0 0.25rem rgb(var(--prose-li-fg) / 0.3);
@@ -384,3 +470,18 @@ html.dark .prose .markdown-magic-link {
   width: 1em;
   height: 1em;
 }
+
+.prose p > a:not(.prose-link, .markdown-magic-link) {
+  animation: breathing 2.5s infinite;
+}
+
+@keyframes breathing {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  40%,
+  60% {
+    opacity: 0.3;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@naiheyoung/use",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Files used for personal development.",
   "homepage": "https://github.com/naiheyoung/use#readme",
   "author": "Naihe",
@@ -49,7 +49,8 @@
     "vitest": "^4.0.16"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
     "@naiheyoung/color": "^1.1.0"