From f1e707bff4c26cb0e2759b60365f953f8a6e8e1f Mon Sep 17 00:00:00 2001
From: Mario Pietsch <pmariojo@gmail.com>
Date: Thu, 28 Mar 2024 20:27:58 +0100
Subject: [PATCH] Refactor GitHub-fork-ribbon plugin for better compatibility
 (#8075)

---
 .../tiddlywiki/github-fork-ribbon/readme.tid  |  6 +-
 .../tiddlywiki/github-fork-ribbon/styles.tid  | 21 ++---
 .../github-fork-ribbon/template.tid           | 26 ++++++
 .../tiddlywiki/github-fork-ribbon/usage.tid   | 93 +++++++++++++++----
 4 files changed, 112 insertions(+), 34 deletions(-)
 create mode 100644 plugins/tiddlywiki/github-fork-ribbon/template.tid

diff --git a/plugins/tiddlywiki/github-fork-ribbon/readme.tid b/plugins/tiddlywiki/github-fork-ribbon/readme.tid
index 95d0f7095..4707aaa6b 100644
--- a/plugins/tiddlywiki/github-fork-ribbon/readme.tid
+++ b/plugins/tiddlywiki/github-fork-ribbon/readme.tid
@@ -4,8 +4,6 @@ This plugin provides a diagonal ribbon across the corner of the window. It resem
 
 The ribbon can be positioned over any corner, and can incorporate user defined text, colours and a link.
 
-The CSS stylesheet is adapted from work by Simon Whitaker:
+The CSS stylesheet is adapted from work by [[Simon Whitaker|https://github.com/simonwhitaker/github-fork-ribbon-css/]]
 
-https://github.com/simonwhitaker/github-fork-ribbon-css/
-
-[[Source code|https://github.com/Jermolene/TiddlyWiki5/blob/master/plugins/tiddlywiki/github-fork-ribbon]]
+[[Plugin source code|https://github.com/Jermolene/TiddlyWiki5/blob/master/plugins/tiddlywiki/github-fork-ribbon]]
diff --git a/plugins/tiddlywiki/github-fork-ribbon/styles.tid b/plugins/tiddlywiki/github-fork-ribbon/styles.tid
index 66bddbc7e..d22e28ac2 100644
--- a/plugins/tiddlywiki/github-fork-ribbon/styles.tid
+++ b/plugins/tiddlywiki/github-fork-ribbon/styles.tid
@@ -1,5 +1,4 @@
 title: $:/plugins/tiddlywiki/github-fork-ribbon/styles
-tags: [[$:/tags/Stylesheet]]
 
 /* Left will inherit from right (so we don't need to duplicate code */
 .github-fork-ribbon {
@@ -10,7 +9,7 @@ tags: [[$:/tags/Stylesheet]]
   padding: 2px 0;
 
   /* Set the base colour */
-  background-color: #a00;
+  background-color: <<color>>;
 
   /* Set a gradient: transparent black at the top to almost-transparent black at the bottom */
   background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.00)), to(rgba(0, 0, 0, 0.15)));
@@ -25,7 +24,7 @@ tags: [[$:/tags/Stylesheet]]
   -webkit-box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
   box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.5);
 
-  z-index: 999;
+  z-index: 700;
   pointer-events: auto;
 }
 
@@ -61,8 +60,8 @@ tags: [[$:/tags/Stylesheet]]
   height: 150px;
   position: absolute;
   overflow: hidden;
-  top: 0;
-  z-index: 999;
+  top: <<top>>;
+  z-index: 700;
   pointer-events: none;
 }
 
@@ -71,25 +70,25 @@ tags: [[$:/tags/Stylesheet]]
 }
 
 .github-fork-ribbon-wrapper.left {
-  left: 0;
+  left: <<left>>;
 }
 
 .github-fork-ribbon-wrapper.right {
-  right: 0;
+  right: <<right>>;
 }
 
 .github-fork-ribbon-wrapper.left-bottom {
   position: fixed;
   top: inherit;
-  bottom: 0;
-  left: 0;
+  bottom: <<bottom>>;
+  left: <<left>>;
 }
 
 .github-fork-ribbon-wrapper.right-bottom {
   position: fixed;
   top: inherit;
-  bottom: 0;
-  right: 0;
+  bottom: <<bottom>>;
+  right: <<right>>;
 }
 
 .github-fork-ribbon-wrapper.right .github-fork-ribbon {
diff --git a/plugins/tiddlywiki/github-fork-ribbon/template.tid b/plugins/tiddlywiki/github-fork-ribbon/template.tid
new file mode 100644
index 000000000..22cee156d
--- /dev/null
+++ b/plugins/tiddlywiki/github-fork-ribbon/template.tid
@@ -0,0 +1,26 @@
+title: $:/plugins/tiddlywiki/github-fork-ribbon/template
+
+<!-- Parameters:
+position: "right", "left", "right-bottom" and "left-bottom" 
+url: link target
+text: ribbon text
+color: defaults to "#aa0000" - dark red
+top: offset from the top in px - eg: "30px"
+bottom: offset from the bottom in px - No ;
+left: offset from left in px - No ;
+right: offset from right in px - No ;
+fixed: "fixed" .. If ribbon is at the top, it can be "fixed". Bottom is always fixed
+-->
+\parameters (position:"right", url:"https://github.com/Jermolene/TiddlyWiki5", text:"Fork me on ~GitHub" color:"#aa0000" top:"0" bottom:"0" left:"0" right:"0" fixed:"")
+
+<style>
+{{$:/plugins/tiddlywiki/github-fork-ribbon/styles}}
+</style>
+
+<div class={{{ github-fork-ribbon-wrapper [<position>] [<fixed>] +[join[ ]] }}}>
+	<div class="github-fork-ribbon">
+		<a href=<<url>>>
+			<<text>>
+		</a>
+	</div>
+</div>
diff --git a/plugins/tiddlywiki/github-fork-ribbon/usage.tid b/plugins/tiddlywiki/github-fork-ribbon/usage.tid
index c6d5311e0..aea2e3dba 100644
--- a/plugins/tiddlywiki/github-fork-ribbon/usage.tid
+++ b/plugins/tiddlywiki/github-fork-ribbon/usage.tid
@@ -1,26 +1,81 @@
 title: $:/plugins/tiddlywiki/github-fork-ribbon/usage
 
-Copy appropriate chunks on a new tiddler and tag it `$:/tags/PageControls`. Name of the new tiddler does not matter. Only the tag matters.
+\procedure ribbonCode()
+\whitespace trim
+<$transclude $tiddler="$:/plugins/tiddlywiki/github-fork-ribbon/template" top="30px" fixed=fixed color="green"/>
+\end
 
-```
-<!-- TOP RIGHT RIBBON: START COPYING HERE -->
-<div class="github-fork-ribbon-wrapper right"><div class="github-fork-ribbon"><a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on ~GitHub</a></div>
-</div>
-<!-- TOP RIGHT RIBBON: END COPYING HERE -->
+\procedure ribbonCreateActions()
+<% if [[$:/github-ribbon]!is[tiddler]] %>
+	<$action-setfield $tiddler="$:/github-ribbon" $field="text" $value=<<ribbonCode>>
+		tags="$:/tags/PageTemplate" 
+		code-body="yes" />
+<% endif %>
+<$action-navigate $to="$:/github-ribbon" />
+\end
 
-<!-- TOP LEFT RIBBON: START COPYING HERE -->
-<div class="github-fork-ribbon-wrapper left"><div class="github-fork-ribbon"><a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on ~GitHub</a></div>
-</div>
-<!-- TOP LEFT RIBBON: END COPYING HERE -->
+\procedure createRibbon()
+<$button actions=<<ribbonCreateActions>> >
+<%if [[$:/github-ribbon]!is[tiddler]] %>
+Create
+<% else %>
+Show
+<% endif %> ~$:/github-ribbon
+</$button>
+\end
+
+\procedure ribbonToggleTagActions()
+<$action-listops $tiddler="$:/github-ribbon" $field="tags" $subfilter="+[toggle[$:/tags/PageTemplate]]" />
+\end
+
+\procedure ribbonToggleTag() <$button actions=<<ribbonToggleTagActions>> >Toggle Tag</$button>
 
 
-<!-- BOTTOM RIGHT RIBBON: START COPYING HERE -->
-<div class="github-fork-ribbon-wrapper right-bottom"><div class="github-fork-ribbon"><a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on ~GitHub</a></div>
-</div>
-<!-- BOTTOM RIGHT RIBBON: END COPYING HERE -->
+`$:/plugins/tiddlywiki/github-fork-ribbon/template` is a template tiddler, that can be used with a transclusion and parameters.
 
-<!-- BOTTOM LEFT RIBBON: START COPYING HERE -->
-<div class="github-fork-ribbon-wrapper left-bottom"><div class="github-fork-ribbon"><a href="https://github.com/simonwhitaker/github-fork-ribbon-css">Fork me on ~GitHub</a></div>
-</div>
-<!-- BOTTOM LEFT RIBBON: END COPYING HERE -->
-```
+!! Usage
+
+* Create a new tiddler eg: $:/github-ribbon
+* Tag it `$:/tags/PageTemplate`
+* Copy the code below
+
+<pre><$text text=<<ribbonCode>>/></pre>
+
+<<createRibbon>> <<ribbonToggleTag>>
+
+!! Parameters
+
+; position
+: "right" (default), "left", "right-bottom" and "left-bottom"
+
+; url
+: Target URL, default: https://github.com/Jermolene/TiddlyWiki5
+
+; text
+: Ribbon text. default: `Fork me on ~GitHub`
+
+; color
+: Ribbon background color: default: `#aa0000`
+
+; top
+: Offset from the top if postion is top. default: `0` eg: `30px`, if the menu-toolbar plugin is installed
+
+; bottom
+: Offset from the bottom in px
+
+; left
+: Offset from the left in px
+
+; right
+: Offset from the right in px
+
+; fixed
+: If position is ''top'', the ribbon will scroll out of the viewport by default
+: If the parameter `fixed="fixed"` it will be fixed
+
+!! Remove the Ribbon
+
+* Disable the plugin
+* ''Remove the tag'' from $:/github-ribbon tiddler
+* Delete the $:/github-ribbon tiddler
+* <<ribbonToggleTag>>
\ No newline at end of file