General updates

Author: ndrezn

.github/scripts/generate-index.sh

@@ -109,23 +109,43 @@ cat > index.html << 'EOF'
             font-size: 0.9rem;
         }
 
-        .copy-button {
+        .button-group {
             margin-top: 1rem;
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .btn {
             padding: 0.5rem 1rem;
-            background: #119dff;
-            color: white;
             border: none;
             border-radius: 4px;
             cursor: pointer;
             font-size: 0.9rem;
             transition: background 0.2s;
+            text-decoration: none;
+            display: inline-block;
+            text-align: center;
         }
 
-        .copy-button:hover {
+        .btn-primary {
+            background: #119dff;
+            color: white;
+        }
+
+        .btn-primary:hover {
             background: #0d7ec9;
         }
 
-        .copy-button.copied {
+        .btn-secondary {
+            background: #95a5a6;
+            color: white;
+        }
+
+        .btn-secondary:hover {
+            background: #7f8c8d;
+        }
+
+        .btn.copied {
             background: #27ae60;
         }
 
@@ -200,7 +220,10 @@ else
             <div class="chart-card">
                 <a href="$filename">$title</a>
                 <div class="chart-name">$filename</div>
-                <button class="copy-button" onclick="copyEmbedCode('$filename')">Copy Embed Code</button>
+                <div class="button-group">
+                    <a href="$filename" class="btn btn-primary">View Chart</a>
+                    <button class="btn btn-secondary" onclick="copyEmbedCode('$filename')">Copy Embed Code</button>
+                </div>
             </div>
 EOF
     done

.github/scripts/inject-css.sh

@@ -0,0 +1,41 @@
+#!/bin/bash
+
+# Inject CSS to hide Plotly Chart Studio links in all chart HTML files
+
+cd charts
+
+for file in *.html; do
+    # Skip index.html
+    if [ "$file" = "index.html" ]; then
+        continue
+    fi
+
+    # Check if file exists and is not empty
+    if [ ! -f "$file" ] || [ ! -s "$file" ]; then
+        continue
+    fi
+
+    # Check if CSS hasn't already been injected
+    if grep -q "hide-plotly-link-injection" "$file"; then
+        continue
+    fi
+
+    # Inject CSS before the closing </head> tag to hide the Chart Studio link
+    sed -i.bak '/<\/head>/i\
+    <style class="hide-plotly-link-injection">\
+        /* Hide Chart Studio export link */\
+        a[href*="chart-studio.plotly.com"],\
+        a[data-title*="chart-studio"],\
+        .modebar-btn[data-title*="Produced with Plotly"],\
+        .modebar-btn[data-title*="Edit chart"],\
+        .js-plotly-plot .plotly a.modebar-btn[data-title="Produced with Plotly"] {\
+            display: none !important;\
+        }\
+    </style>
+' "$file"
+
+    # Remove backup file
+    rm -f "${file}.bak"
+
+    echo "Injected CSS into $file"
+done

.github/workflows/deploy-pages.yml

@@ -25,6 +25,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Inject CSS to hide Chart Studio links
+        run: |
+          chmod +x .github/scripts/inject-css.sh
+          .github/scripts/inject-css.sh
+
       - name: Generate index page
         run: |
           chmod +x .github/scripts/generate-index.sh

README.md

@@ -15,8 +15,9 @@ Perfect for sharing interactive Plotly visualizations with your team or embeddin
 ### Step 1: Create Your Own Copy
 
 1. At the top of this page on GitHub, click the green **"Use this template"** button
-2. Give your project a name (like "my-plotly-charts")
-3. Click **"Create repository"**
+2. Select **"Create a new repository"**
+3. Give your project a name (like "my-plotly-charts")
+4. Click **"Create repository"**
 
 ### Step 2: Export Your Charts from Chart Studio