Merge pull request #316 from nndda/dev

nndda · web-flow · commit 7c546214c027 · 2025-12-06T11:06:00.000+07:00
v3.0.0 Alpha 7
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nnda/pitch",
-  "version": "3.0.0-alpha.6",
+  "version": "3.0.0-alpha.7",
   "homepage": "https://nnda.itch.io/pitch",
   "repository": {
     "type": "git",
diff --git a/src/app/index.ts b/src/app/index.ts
@@ -255,7 +255,7 @@ function initializeComponents(): void {
           ${compData.sub != undefined ? `data-sub="${compData.sub}"` : ""}
           class="
           ${compData.sub != undefined ? "sub" : ""}
-          ${compData.groupOnly ? "non-interractable" : ""}
+          ${compData.groupOnly ? "non-interractable group-only" : ""}
           ${isFaved ? "is-faved" : ""}
           ${compData["notes"].includes("Experimental") ? "is-exp" : ""}
           ">
diff --git a/src/app/styles/_preview.scss b/src/app/styles/_preview.scss
@@ -140,3 +140,7 @@ button.copy-raw-css {
     --b2: #{$background};
   }
 }
+
+.component-sample-img {
+  max-width: 100%;
+}
diff --git a/src/app/styles/main.scss b/src/app/styles/main.scss
@@ -619,3 +619,7 @@ $active-col: #eee;
   -webkit-user-select: none;
   user-select: none;
 }
+
+.group-only .icon.exp {
+  display: none;
+}
diff --git a/src/components/_assets/follower-exclusive-blurred.png b/src/components/_assets/follower-exclusive-blurred.png
diff --git a/src/components/_assets/follower-exclusive-text.png b/src/components/_assets/follower-exclusive-text.png
diff --git a/src/components/tweaks/comment-0.yaml b/src/components/tweaks/comment-0.yaml
@@ -4,3 +4,6 @@ name:
 description:
 
 groupOnly: true
+
+notes:
+  - Experimental
diff --git a/src/components/tweaks/comment-author-badge.scss b/src/components/tweaks/comment-author-badge.scss
diff --git a/src/components/tweaks/comment-author-badge.yaml b/src/components/tweaks/comment-author-badge.yaml
@@ -8,6 +8,9 @@ scopes:
     - profile
     - jam
 
+sub:
+  comment-0
+
 inputs:
   - name: itch.io username
     id: AUTHOR_BADGE_URL
diff --git a/src/components/tweaks/follower-exclusive-0.scss b/src/components/tweaks/follower-exclusive-0.scss
diff --git a/src/components/tweaks/follower-exclusive-0.yaml b/src/components/tweaks/follower-exclusive-0.yaml
@@ -0,0 +1,9 @@
+name:
+  Follower Exclusive
+
+description:
+
+groupOnly: true
+
+notes:
+  - Experimental
diff --git a/src/components/tweaks/follower-exclusive-blurred.scss b/src/components/tweaks/follower-exclusive-blurred.scss
@@ -0,0 +1,12 @@
+body:not(:has(.game_page_apperance_columns))
+  #user_tools:not(:has(.is_following))
+    ~ #wrapper .custom-follower-exclusive-blurred
+{
+  filter: blur(10px);
+
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+}
diff --git a/src/components/tweaks/follower-exclusive-blurred.yaml b/src/components/tweaks/follower-exclusive-blurred.yaml
@@ -0,0 +1,44 @@
+name:
+  Blurred
+
+nameDisplay:
+  Follower Exclusive — Blurred
+
+scopes:
+  compatible:
+    - project
+  none:
+    - profile
+    - jam
+
+sub:
+  follower-exclusive-0
+
+notes:
+  - Experimental
+
+sampleHTML:
+  - | # ================================================================================================
+    <!-- NOTE -->
+    <p>
+      Custom class <code>custom-follower-exclusive-blurred</code> that blurs content for viewer that is not a follower of the creator.
+      <br>
+      It also disables texts selections and user interaction within the content.
+    <p>
+
+  - | # ================================================================================================
+    <!-- NOTE -->
+    <blockquote class="custom-callout">
+      <h4 style="margin: .5em 0;">Important Notes</h4>
+      This tweak just hides/blurs the content <b><i>visually</i></b>.<br>
+      Anyone that's able to view/modify the HTML directly (like via the browser's developer tool) can toggle back the content without following the creator.
+    </blockquote>
+
+  - | # ================================================================================================
+    <!-- NOTE -->
+    <h2>Examples</h2>
+    <p>
+      Blurred content on the right for non-followers, and the actual content on the left for followers.
+    </p>
+
+  - <!-- IMG --> follower-exclusive-blurred.png
diff --git a/src/components/tweaks/follower-exclusive-hidden.scss b/src/components/tweaks/follower-exclusive-hidden.scss
@@ -0,0 +1,6 @@
+body:not(:has(.game_page_apperance_columns))
+  #user_tools:not(:has(.is_following))
+    ~ #wrapper .custom-follower-exclusive-hidden
+{
+  display: none !important;
+}
diff --git a/src/components/tweaks/follower-exclusive-hidden.yaml b/src/components/tweaks/follower-exclusive-hidden.yaml
@@ -0,0 +1,33 @@
+name:
+  Hidden
+
+nameDisplay:
+  Follower Exclusive — Hidden
+
+scopes:
+  compatible:
+    - project
+  none:
+    - profile
+    - jam
+
+sub:
+  follower-exclusive-0
+
+notes:
+  - Experimental
+
+sampleHTML:
+  - | # ================================================================================================
+    <!-- NOTE -->
+    <p>
+      Custom class <code>custom-follower-exclusive-hidden</code> that hides content for viewer that is not a follower of the creator.
+    </p>
+
+  - | # ================================================================================================
+    <!-- NOTE -->
+    <blockquote class="custom-callout">
+      <h4 style="margin: .5em 0;">Important Notes</h4>
+      This tweak just hides/blurs the content <b><i>visually</i></b>.<br>
+      Anyone that's able to view/modify the HTML directly (like via the browser's developer tool) can toggle back the content without following the creator.
+    </blockquote>
diff --git a/src/components/tweaks/follower-exclusive-text.scss b/src/components/tweaks/follower-exclusive-text.scss
@@ -0,0 +1,21 @@
+@font-face {
+  font-family: 'Flow Rounded';
+  font-style: normal;
+  font-display: block;
+  font-weight: 400;
+  src: url(https://cdn.jsdelivr.net/fontsource/fonts/flow-rounded@latest/latin-400-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+body:not(:has(.game_page_apperance_columns))
+  #user_tools:not(:has(.is_following))
+    ~ #wrapper .custom-follower-exclusive-text
+{
+  font-family: 'Flow Rounded' !important;
+
+  pointer-events: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+}
diff --git a/src/components/tweaks/follower-exclusive-text.yaml b/src/components/tweaks/follower-exclusive-text.yaml
@@ -0,0 +1,44 @@
+name:
+  Text
+
+nameDisplay:
+  Follower Exclusive — Text
+
+scopes:
+  compatible:
+    - project
+  none:
+    - profile
+    - jam
+
+sub:
+  follower-exclusive-0
+
+notes:
+  - Experimental
+
+sampleHTML:
+  - | # ================================================================================================
+    <!-- NOTE -->
+    <p>
+      Custom class <code>custom-follower-exclusive-text</code> that replaces texts with placeholder font for viewer that is not a follower of the creator.
+      <br>
+      It also disables texts selections and user interaction within the content.
+    </p>
+
+  - | # ================================================================================================
+    <!-- NOTE -->
+    <blockquote class="custom-callout">
+      <h4 style="margin: .5em 0;">Important Notes</h4>
+      This tweak just hides/blurs the content <b><i>visually</i></b>.<br>
+      Anyone that's able to view/modify the HTML directly (like via the browser's developer tool) can toggle back the content without following the creator.
+    </blockquote>
+
+  - | # ================================================================================================
+    <!-- NOTE -->
+    <h2>Examples</h2>
+    <p>
+      Placeholder font texts on the right for non-followers, and the actual content on the left for followers.
+    </p>
+
+  - <!-- IMG --> follower-exclusive-text.png

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@nnda/pitch",`
`3`		`- "version": "3.0.0-alpha.6",`
	`3`	`+ "version": "3.0.0-alpha.7",`
`4`	`4`	`"homepage": "https://nnda.itch.io/pitch",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -140,3 +140,7 @@ button.copy-raw-css {`
`140`	`140`	`--b2: #{$background};`
`141`	`141`	`}`
`142`	`142`	`}`
	`143`	`+`
	`144`	`+.component-sample-img {`
	`145`	`+ max-width: 100%;`
	`146`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -619,3 +619,7 @@ $active-col: #eee;`
`619`	`619`	`-webkit-user-select: none;`
`620`	`620`	`user-select: none;`
`621`	`621`	`}`
	`622`	`+`
	`623`	`+.group-only .icon.exp {`
	`624`	`+ display: none;`
	`625`	`+}`