Skip to content

Commit cdf1562

Browse files
ndreznndrezn
committed
Better branding
1 parent f5a32b6 commit cdf1562

File tree

4 files changed

+278
-17
lines changed

4 files changed

+278
-17
lines changed

‎.github/scripts/generate-index.sh‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
#!/bin/bash
2+
3+
# Generate index.html with links to all charts
4+
5+
cd charts
6+
7+
cat > index.html << 'EOF'
8+
<!DOCTYPE html>
9+
<html lang="en">
10+
<head>
11+
<meta charset="UTF-8">
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
13+
<title>Chart Gallery</title>
14+
<style>
15+
* {
16+
margin: 0;
17+
padding: 0;
18+
box-sizing: border-box;
19+
}
20+
21+
body {
22+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
23+
line-height: 1.6;
24+
color: #333;
25+
background: #f5f5f5;
26+
}
27+
28+
.container {
29+
max-width: 1200px;
30+
margin: 0 auto;
31+
padding: 2rem;
32+
}
33+
34+
header {
35+
background: white;
36+
padding: 2rem;
37+
border-radius: 8px;
38+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
39+
margin-bottom: 2rem;
40+
}
41+
42+
h1 {
43+
color: #119dff;
44+
margin-bottom: 0.5rem;
45+
display: flex;
46+
align-items: center;
47+
gap: 0.5rem;
48+
}
49+
50+
.plotly-logo {
51+
font-weight: 700;
52+
color: #119dff;
53+
}
54+
55+
.subtitle {
56+
color: #7f8c8d;
57+
font-size: 1.1rem;
58+
}
59+
60+
.powered-by {
61+
margin-top: 1rem;
62+
font-size: 0.9rem;
63+
color: #95a5a6;
64+
}
65+
66+
.powered-by a {
67+
color: #119dff;
68+
text-decoration: none;
69+
}
70+
71+
.powered-by a:hover {
72+
text-decoration: underline;
73+
}
74+
75+
.chart-grid {
76+
display: grid;
77+
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
78+
gap: 1.5rem;
79+
}
80+
81+
.chart-card {
82+
background: white;
83+
border-radius: 8px;
84+
padding: 1.5rem;
85+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
86+
transition: transform 0.2s, box-shadow 0.2s;
87+
}
88+
89+
.chart-card:hover {
90+
transform: translateY(-4px);
91+
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
92+
}
93+
94+
.chart-card a {
95+
text-decoration: none;
96+
color: #119dff;
97+
font-size: 1.1rem;
98+
font-weight: 500;
99+
display: block;
100+
}
101+
102+
.chart-card a:hover {
103+
color: #0d7ec9;
104+
}
105+
106+
.chart-name {
107+
margin-top: 0.5rem;
108+
color: #7f8c8d;
109+
font-size: 0.9rem;
110+
}
111+
112+
.empty-state {
113+
background: white;
114+
border-radius: 8px;
115+
padding: 3rem;
116+
text-align: center;
117+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
118+
}
119+
120+
.empty-state h2 {
121+
color: #7f8c8d;
122+
margin-bottom: 1rem;
123+
}
124+
125+
.empty-state p {
126+
color: #95a5a6;
127+
}
128+
</style>
129+
</head>
130+
<body>
131+
<div class="container">
132+
<header>
133+
<h1><span class="plotly-logo">Plotly</span> Chart Gallery</h1>
134+
<p class="subtitle">Browse all interactive visualizations from Chart Studio</p>
135+
<p class="powered-by">Powered by <a href="https://plotly.com/chart-studio/" target="_blank">Plotly Chart Studio</a></p>
136+
</header>
137+
138+
<div class="chart-grid">
139+
EOF
140+
141+
# Find all HTML files except index.html and add them to the page
142+
html_files=$(find . -maxdepth 1 -name "*.html" ! -name "index.html" | sort)
143+
144+
if [ -z "$html_files" ]; then
145+
cat >> index.html << 'EOF'
146+
</div>
147+
<div class="empty-state">
148+
<h2>No Plotly charts yet</h2>
149+
<p>Export your charts from Chart Studio as HTML and add them to the charts/ folder.</p>
150+
</div>
151+
EOF
152+
else
153+
for file in $html_files; do
154+
filename=$(basename "$file")
155+
# Convert filename to readable title (remove .html, replace hyphens/underscores with spaces, capitalize)
156+
title=$(echo "$filename" | sed 's/.html$//' | sed 's/[-_]/ /g' | awk '{for(i=1;i<=NF;i++)sub(/./,toupper(substr($i,1,1)),$i)}1')
157+
158+
cat >> index.html << EOF
159+
<div class="chart-card">
160+
<a href="$filename">$title</a>
161+
<div class="chart-name">$filename</div>
162+
</div>
163+
EOF
164+
done
165+
166+
cat >> index.html << 'EOF'
167+
</div>
168+
EOF
169+
fi
170+
171+
cat >> index.html << 'EOF'
172+
</div>
173+
</body>
174+
</html>
175+
EOF
176+
177+
echo "Generated index.html with $(echo "$html_files" | wc -l | tr -d ' ') charts"

‎.github/workflows/deploy-pages.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@ jobs:
2525
- name: Checkout
2626
uses: actions/checkout@v4
2727

28+
- name: Generate index page
29+
run: |
30+
chmod +x .github/scripts/generate-index.sh
31+
.github/scripts/generate-index.sh
32+
2833
- name: Setup Pages
2934
uses: actions/configure-pages@v4
3035

‎.gitignore‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
# macOS
2+
.DS_Store
3+
.AppleDouble
4+
.LSOverride
5+
6+
# Thumbnails
7+
._*
8+
9+
# Files that might appear in the root of a volume
10+
.DocumentRevisions-V100
11+
.fseventsd
12+
.Spotlight-V100
13+
.TemporaryItems
14+
.Trashes
15+
.VolumeIcon.icns
16+
.com.apple.timemachine.donotpresent
17+
18+
# Directories potentially created on remote AFP share
19+
.AppleDB
20+
.AppleDesktop
21+
Network Trash Folder
22+
Temporary Items
23+
.apdisk
24+
25+
# Windows
26+
Thumbs.db
27+
Thumbs.db:encryptable
28+
ehthumbs.db
29+
ehthumbs_vista.db
30+
*.stackdump
31+
[Dd]esktop.ini
32+
$RECYCLE.BIN/
33+
*.cab
34+
*.msi
35+
*.msix
36+
*.msm
37+
*.msp
38+
*.lnk
39+
40+
# Linux
41+
*~
42+
.fuse_hidden*
43+
.directory
44+
.Trash-*
45+
.nfs*
46+
47+
# Editor files
48+
*.swp
49+
*.swo
50+
*~
51+
.vscode/
52+
.idea/
53+
*.sublime-project
54+
*.sublime-workspace
55+
56+
# Generated index file (will be auto-generated by GitHub Actions)
57+
charts/index.html

‎README.md‎

Lines changed: 39 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,32 @@
1-
# Chart Studio HTML Template
1+
# Plotly Chart Studio HTML Template
22

3-
Host your HTML charts online for free using GitHub Pages. This template makes it easy to publish your visualizations and share them with a simple web link.
3+
Host your Plotly Chart Studio visualizations online for free using GitHub Pages. Export your charts from Chart Studio as HTML files and publish them with a simple web link.
44

55
## What This Does
66

7-
Upload your HTML chart files, and each one gets its own web address that you can share with anyone. For example:
8-
- `my-chart.html` becomes `https://yourusername.github.io/your-project/my-chart.html`
7+
Upload your Chart Studio HTML exports, and they'll be automatically published online:
8+
- An **index page** listing all your Plotly charts is created at `https://yourusername.github.io/your-project/`
9+
- Each chart gets its own web address: `https://yourusername.github.io/your-project/my-chart.html`
10+
11+
Perfect for sharing interactive Plotly visualizations with your team or embedding in presentations!
912

1013
## Step-by-Step Guide
1114

1215
### Step 1: Create Your Own Copy
1316

1417
1. At the top of this page on GitHub, click the green **"Use this template"** button
15-
2. Give your project a name (like "my-charts")
18+
2. Give your project a name (like "my-plotly-charts")
1619
3. Click **"Create repository"**
1720

18-
### Step 2: Turn On GitHub Pages
21+
### Step 2: Export Your Charts from Chart Studio
22+
23+
1. Go to [Chart Studio](https://chart-studio.plotly.com/)
24+
2. Open the chart you want to publish
25+
3. Click **Export** and select **HTML**
26+
4. Save the `.html` file to your computer
27+
5. Repeat for any other charts you want to publish
28+
29+
### Step 3: Turn On GitHub Pages
1930

2031
This is the most important step - your charts won't be published without it!
2132

@@ -25,55 +36,66 @@ This is the most important step - your charts won't be published without it!
2536
4. Select **GitHub Actions** (not "Deploy from a branch")
2637
5. The page will refresh - you're all set!
2738

28-
### Step 3: Add Your Chart Files
39+
### Step 4: Upload Your Chart Studio HTML Files
2940

3041
You can add files directly on GitHub (easiest) or use GitHub Desktop:
3142

3243
**Option A: Upload on GitHub (Easiest)**
3344
1. Click on the `charts` folder
3445
2. Click **Add file** → **Upload files**
35-
3. Drag and drop your `.html` files
46+
3. Drag and drop your Chart Studio `.html` files
3647
4. Click **Commit changes** at the bottom
3748

3849
**Option B: Using GitHub Desktop**
3950
1. Download [GitHub Desktop](https://desktop.github.com/)
4051
2. Clone your repository to your computer
41-
3. Copy your `.html` files into the `charts` folder
52+
3. Copy your Chart Studio `.html` files into the `charts` folder
4253
4. In GitHub Desktop, write a description and click **Commit to main**
4354
5. Click **Push origin** to upload
4455

45-
### Step 4: Wait for Publishing
56+
### Step 5: Wait for Publishing
4657

4758
After uploading files:
4859
1. Click the **Actions** tab at the top of your repository
4960
2. You'll see a workflow running (yellow dot = in progress, green check = done)
5061
3. This usually takes 30-60 seconds
5162

52-
### Step 5: View Your Charts Online
63+
### Step 6: View Your Plotly Charts Online
5364

54-
Your charts are now live! The web address follows this pattern:
65+
Your interactive Plotly charts are now live!
66+
67+
**View All Charts:**
68+
Go to your main page to see a gallery of all your Plotly visualizations:
69+
```
70+
https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/
71+
```
5572

73+
**View Individual Charts:**
74+
Each Plotly chart has its own direct link:
5675
```
5776
https://YOUR-USERNAME.github.io/YOUR-REPO-NAME/FILENAME.html
5877
```
5978

6079
**Example:**
6180
- If your GitHub username is `jane-smith`
62-
- Your repository is named `my-charts`
63-
- You uploaded `sales-report.html`
64-
- Your chart is at: `https://jane-smith.github.io/my-charts/sales-report.html`
81+
- Your repository is named `my-plotly-charts`
82+
- Your main gallery page is at: `https://jane-smith.github.io/my-plotly-charts/`
83+
- A specific chart is at: `https://jane-smith.github.io/my-plotly-charts/sales-report.html`
6584

6685
## Finding Your Chart URLs
6786

6887
Don't remember the exact address?
6988

7089
1. Go to **Settings** → **Pages**
7190
2. At the top you'll see "Your site is live at [address]"
72-
3. Add your filename to the end: `[address]/your-file.html`
91+
3. Visit that address to see all your charts listed with clickable links
92+
4. Or add a filename to the end for a specific chart: `[address]/your-file.html`
7393

7494
## Adding More Charts
7595

76-
Just repeat Step 3! Every time you add a new `.html` file to the `charts` folder and commit it, GitHub will automatically publish it within about a minute.
96+
Just repeat Step 4! Every time you export a new chart from Chart Studio and add the `.html` file to the `charts` folder:
97+
- GitHub will automatically publish it within about a minute
98+
- The index page will automatically update to include your new Plotly chart
7799

78100
## Troubleshooting
79101

0 commit comments

Comments
 (0)