Skip to content

Commit ad81d98

Browse files
cberescberes
committed
Skate Buffalo 2026 update
1 parent 7b66d54 commit ad81d98

2 files changed

Lines changed: 120 additions & 0 deletions

File tree

‎articles/skate-buffalo-2026/index.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
---
2+
tags:
3+
- articles
4+
- hugo
5+
- skateboarding
6+
- software
7+
title: "Skate Buffalo: 2026 update"
8+
date: 2026-06-24
9+
---
10+
<p>
11+
I followed up my Skatelog project with updates to my
12+
<a href="https://gohugo.io/">Hugo</a>-powered website:
13+
<a href="https://skatebuffalo.com/">Skate Buffalo</a>.
14+
I had barely touched it for almost two years.
15+
I used to be well-versed in Hugo&mdash;I made an entire theme in the
16+
past&mdash;but that was eight years ago.
17+
</p>
18+
<p>
19+
My first task was updating the Hugo version and the theme.
20+
Somewhere in the process I learned about Hugo modules.
21+
So, I removed the submodule I had for the theme, and replaced it with a submodule.
22+
I was prepared for many errors between this and the version update, but it was painless.
23+
</p>
24+
<p>
25+
Next I worked on the map.
26+
Originally I made a custom Google Map for the website.
27+
Since I used Leaflet with <a href="https://skateindex.com">Skate Index</a>,
28+
I wanted to replace the map with Leaflet.
29+
</p>
30+
<p>
31+
The advantage to Leaflet was that I could have skateparks added to the map automatically
32+
(and removed from it). Also I could do additional styling.
33+
The downside is it's more to manage in the project.
34+
I had example code to use, so this part was straightforward.
35+
</p>
36+
<p>
37+
Now I had two external libraries that Skate Buffalo uses:
38+
<a href="https://leafletjs.com/">Leaflet</a> and <a href="https://flickity.metafizzy.co/">Flickity</a>.
39+
To keep things simple I added the Javascript and CSS files to my repo.
40+
But it bugged me that it made the Github languages visualization incorrect.
41+
Thus, I removed the vendor files and wrote a script to download them.
42+
It's just <code>curl</code>, <code>unzip</code>, and <code>mv</code>.
43+
Also I gitignored the directory I downloaded them to, so I don't need to download the files all the time.
44+
</p>
45+
<p>
46+
One thing that always <em>annoyed</em> me about Skate Buffalo was that the photo carousel showed up in the skatepark
47+
summary.
48+
The result is the skateparks list has 10 photo carousels.
49+
I think it's reasonable to expect visitors to click a link to get to the carousel.
50+
I put this off in the past, but it was easy to fix.
51+
I already have a shortcode for the carousel.
52+
I added the featured image to the shortcode.
53+
Then I used CSS to hide the carousel everywhere except the individual skatepark page.
54+
And the featured image is visible only on the skatepark list page.
55+
</p>
56+
<p>
57+
One thing that <em>worried</em> me about Skate Buffalo was that all the photos were 4K.
58+
I was worried that users would accidentally use a gigabyte of data browsing skateparks.
59+
The obvious solution is to re-size the photos in the repo.
60+
<em>But</em> I like having the full-size photos available.
61+
In a way I kind of punted this problem.
62+
I added a script to the deployment pipeline that uses
63+
<a href="https://imagemagick.org/">ImageMagick</a> to resize the images to 1080p.
64+
Yes the repo is still bloated and it added more time to the deployment job,
65+
but that worries me less than unnecessarily huge photos on the live website.
66+
</p>
67+
<p>
68+
I added photos of skateparks in Ontario, the southern tier, and Rochester.
69+
I really wasn't sure about this.
70+
After all, the website is Skate <em>Buffalo</em>.
71+
On the other hand, I'm a Buffalo skateboarder, and I was curious about these skateparks.
72+
Plus, people using the website may be in Batavia, or Lewiston, or Gowanda.
73+
They may be closer to Jamestown or Brockport than to Amherst.
74+
If that's not justification enough, I also added new tags,
75+
so that visitors could see only the original list of skateparks if that's what they want.
76+
</p>
77+
<p>
78+
In addition to the new skateparks, I updated the existing skateparks.
79+
For example, the old Hamburg skatepark has been dismantled.
80+
I removed it.
81+
And I removed tags from defunct skateparks, so the tags list is more reliable.
82+
</p>
83+
<p>
84+
The list of skateshops on the Map page felt sloppy to me.
85+
First, it was on the Map page. It didn't feel like a good spot for it.
86+
I made two changes related to this.
87+
I added a data file with local skateshops.
88+
I use this data to populate the map.
89+
Also I use it to populate the new Shops page.
90+
Instead of a table, I made a list of cards.
91+
This task required the most learning.
92+
I had to learn how to combine pages from the skatepark list and elements of data
93+
into a single list, so I could sort them all by title.
94+
And I knew nothing about Hugo data before this.
95+
Also I added two new shortcodes: a website shortcode and a shops-list shortcode.
96+
I think it looks a lot better than the table.
97+
</p>
98+
<p>
99+
Sadly the <a href="https://github.com/gohugo-ananke/ananke">Ananke</a> theme has no dark mode.
100+
I tried the <a href="https://github.com/CaiJimmy/hugo-theme-stack">Stack</a> theme.
101+
I hoped it would be just a matter of changing the theme.
102+
However, I had to make a bunch of changes:
103+
replacing featured_image with image,
104+
setting skateparks to be the main section,
105+
changing the partial used for custom CSS and Javascript,
106+
and undoing the photo carousel changes I made.
107+
I think it looks nice, but I'm not ready to commit to it.
108+
</p>
109+
<p>
110+
I ended up making my own dark "theme" for Ananke.
111+
I'm not sure it looks very good.
112+
But hopefully it's an improvement over a white background.
113+
</p>
114+
<p>
115+
That's everything so far!
116+
I have no more changes planned,
117+
but I might think of something.
118+
I'm still not sure what my next project will be after this.
119+
</p>

‎tags.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export default [
22
'AI',
33
'digital detox',
44
'eleventy',
5+
'hugo',
56
'javascript',
67
'perl',
78
'python',

0 commit comments

Comments
 (0)