DEV Community: Chase Fleming

Server-render an SVG map with no map library

Chase Fleming — Mon, 05 Oct 2026 23:47:20 +0000

Showing a dot on a map usually means a vendor, an API key, and a script to load. That is a lot of machinery for a drawing. You can skip all of it. The race pages on FieldRank, a rankings site for trail runners, do: the server draws each map as SVG from free public data, and the map needs nothing else to load. The drawing is the easy part. The labels are where it gets hard, and they are what this tutorial builds up to.

By the end you'll have one Node script that writes a labeled map of the Alps to an SVG file under 4 KB.

Why draw it on the server

A locator map has one job: show where something is. It does not need to pan, zoom, or update. Drawing it ahead of time as SVG fits that job, and it drops most of what a map usually brings with it:

Nothing extra to load. The map is markup inside the HTML. No script to run, no tiles to request, and no connection to another company's servers.
No layout shift. The markup carries the map's size and proportions, so the browser lays it out on the first pass and nothing moves when it appears.
No JavaScript in the browser. The script runs on your server, not the page. The map shows with scripts turned off, and a crawler reading the HTML sees it too.
Readable by a screen reader. Give the svg element role="img" and an aria-label that names the place.
Styles like the rest of the page. Inline in your HTML, it takes CSS like any other element, so its colors can follow your dark mode.
No account to manage. No API key, no usage tier, and no visitor request passing through a third party.

It has costs too:

No pan or zoom. It is a picture. If someone needs to move around in the map, reach for a map library.
Coarse detail. The coastline file is drawn for regions and countries. It has no roads, trails, or terrain, so it cannot show a course.
The work moves to your server. Projecting a coastline on every request is wasteful for a picture that never changes. Draw each map once and cache it.
The date line needs extra work. Land on the far side of 180° longitude falls off the map, which matters for a pin in Fiji or far eastern Russia.

I worked on FieldRank, and drawing these maps turned out to be more interesting than expected, so I'll use maps from its race pages as examples of how each step looks on a live site. Each linked page was picked because it shows the thing that step is about. Open the network tab on any of them: no tile requests and no map library.

What you need

Node 20 or newer. The script uses no framework.
world-atlas. Coastlines from Natural Earth, a public domain map dataset.
topojson-client. Unpacks that file into plain coordinates. It decodes the format and draws nothing.

The world-atlas repository is archived, which for a data package means finished: coastlines don't change, and there is no code in it to go stale.

Start in an empty folder and install the two packages:

npm init -y
npm install world-atlas topojson-client

Start with a dot

A map is a function that turns a latitude and a longitude into an x and a y. Start by writing that function with nothing else on the canvas. Create a file named map.mjs:

import { writeFileSync } from "node:fs";

const W = 720, H = 190;
const pin = { lat: 45.92, lon: 6.87 }; // Chamonix
const scale = 2300; // pixels per radian

const rad = (deg) => (deg * Math.PI) / 180;
const mercY = (lat) => Math.log(Math.tan(Math.PI / 4 + rad(lat) / 2));

function project({ lat, lon }) {
  const x = W / 2 + scale * (rad(lon) - rad(pin.lon));
  const y = H / 2 - scale * (mercY(lat) - mercY(pin.lat));
  return [x, y];
}

const [px, py] = project(pin);

const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}">
  <rect width="${W}" height="${H}" fill="#e6e6e6"/>
  <circle cx="${px}" cy="${py}" r="5" fill="#111111"/>
</svg>`;
writeFileSync("map.svg", svg);

project is a Mercator projection centered on the pin. Longitude maps straight to x. Latitude goes through mercY first, which stretches it toward the poles so that shapes keep their proportions. The scale of 2300 means the 720 pixel canvas covers about 18 degrees of longitude, which is enough to show a region and its nearest cities.

To draw the map, run the script:

node map.mjs

Open map.svg in a browser. You should see a light gray rectangle with a black dot in the exact center.

It is not a map yet, but every later step is this same function applied to more points.

Draw the land

A dot on a gray rectangle could be anywhere. Next, add the coastline so the dot has something to sit on. Replace the import line at the top of the file with these two:

import { readFileSync, writeFileSync } from "node:fs";
import { feature } from "topojson-client";

Then add this below the const [px, py] line:

const world = JSON.parse(
  readFileSync("node_modules/world-atlas/land-50m.json", "utf8"),
);
const land = feature(world, world.objects.land).features[0];

function ringPath(ring) {
  const points = ring.map(([lon, lat]) =>
    project({ lat: Math.max(-85, Math.min(85, lat)), lon }),
  );
  return points
    .map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`)
    .join("") + "Z";
}

const landPath = land.geometry.coordinates
  .flatMap((polygon) => polygon.map(ringPath))
  .join("");

Each coastline in the file is a ring of coordinates. ringPath runs every point through project and joins the results into an SVG path. The clamp to 85 degrees is there because mercY goes to infinity at the poles, and Antarctica reaches one.

Once that is in place, draw the path. Add this line to the SVG template, between the rect and the circle:

  <path d="${landPath}" fill="#ffffff" stroke="#999999" stroke-width="0.7"/>

Run the script again. The dot now sits in a wide stretch of land, with the Atlantic at the left edge, the Mediterranean at the bottom, and the Adriatic on the right.

The pin is Chamonix for a reason. FieldRank's UTMB Mont-Blanc page draws the same spot as server-side SVG, so you have a finished version to compare against as you go. That page uses d3-geo for the projection and clipping instead of the hand-written versions here, and adds a few layers this tutorial leaves out.

Draw only what is in view

The picture is right and the file is wrong. Check its size:

ls -l map.svg

It is about 880 KB. The script projected every coastline on Earth and wrote all of it into the path, and the browser then threw away everything outside the frame. For a picture that is 720 pixels wide, that is the whole budget of a page spent on Antarctica.

The fix is to cut each ring down to the frame before writing it. Add this above ringPath:

const BLEED = 6;

function clipEdge(points, axis, limit, keepBelow) {
  const inside = (p) => (keepBelow ? p[axis] <= limit : p[axis] >= limit);
  const out = [];
  points.forEach((cur, i) => {
    const prev = points[(i + points.length - 1) % points.length];
    if (inside(cur) !== inside(prev)) {
      const t = (limit - prev[axis]) / (cur[axis] - prev[axis]);
      out.push([
        prev[0] + t * (cur[0] - prev[0]),
        prev[1] + t * (cur[1] - prev[1]),
      ]);
    }
    if (inside(cur)) out.push(cur);
  });
  return out;
}

function clipRing(points) {
  let out = clipEdge(points, 0, -BLEED, false);
  out = clipEdge(out, 0, W + BLEED, true);
  out = clipEdge(out, 1, -BLEED, false);
  return clipEdge(out, 1, H + BLEED, true);
}

This is the Sutherland-Hodgman algorithm. clipEdge walks around a ring and keeps the points on the inside of one straight line. Where the ring crosses the line, it adds a new point exactly on the crossing. clipRing does that four times, once for each side of the frame.

The cut is made 6 pixels outside the frame, not at it. Clipping closes each shape along the cut, and that new edge takes the coastline stroke like any other. Cut at the frame and you get a gray line down the side of the map wherever land runs off it. Cut a little outside and the false edge is hidden.

Next, replace ringPath with a version that clips after projecting:

function ringPath(ring) {
  const points = clipRing(
    ring.map(([lon, lat]) =>
      project({ lat: Math.max(-85, Math.min(85, lat)), lon }),
    ),
  );
  if (points.length < 3) return "";
  return points
    .map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`)
    .join("") + "Z";
}

A ring that ends up with fewer than three points is entirely out of view, so it returns nothing.

Run the script and check the size again. The map looks identical, and the file is now about 2.5 KB.

Add the cities

With the land drawn, you can tell the pin is somewhere in western Europe. A few city names will make it specific. Start by adding a list of cities below landPath. The population is there for a later step:

const cities = [
  { name: "Milan", lat: 45.46, lon: 9.19, pop: 1370000 },
  { name: "Turin", lat: 45.07, lon: 7.69, pop: 850000 },
  { name: "Lyon", lat: 45.76, lon: 4.84, pop: 520000 },
  { name: "Geneva", lat: 46.2, lon: 6.14, pop: 200000 },
  { name: "Grenoble", lat: 45.19, lon: 5.72, pop: 158000 },
  { name: "Lausanne", lat: 46.52, lon: 6.63, pop: 140000 },
  { name: "Bern", lat: 46.95, lon: 7.45, pop: 134000 },
  { name: "Annecy", lat: 45.9, lon: 6.13, pop: 130000 },
  { name: "Monza", lat: 45.58, lon: 9.27, pop: 123000 },
  { name: "Novara", lat: 45.45, lon: 8.62, pop: 104000 },
];

Then turn each city into a small dot with its name beside it:

function cityMark(name, x, y) {
  return `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="2" fill="#555"/>
  <text x="${(x + 6).toFixed(1)}" y="${(y + 3.5).toFixed(1)}" font-family="monospace" font-size="10" fill="#555">${name.toUpperCase()}</text>`;
}

const cityMarks = cities
  .map((city) => {
    const [x, y] = project(city);
    return cityMark(city.name, x, y);
  })
  .join("\n  ");

Each city goes through the same project function as the pin, so it lands in the right place without any extra math. The label starts 6 pixels to the right of the dot. The 3.5 added to y lowers the text so that its middle lines up with the dot, not its baseline.

Next, add ${cityMarks} to the SVG template on its own line, after the path and before the pin's circle. Run the script again. You should see ten gray dots, each with its name in capitals.

Two things are wrong. Annecy's name is printed straight across the pin, which is the one thing the map exists to show. And near Milan, three names are stacked into something unreadable. Take the pin first.

Run labels away from the pin

Annecy sits 30 pixels left of the pin, so a label that runs to the right has nowhere to go but through it. The rule that fixes this is short: a label goes on the side of its dot that faces away from the pin.

Replace cityMark and cityMarks with:

function cityMark(name, x, y, left) {
  const tx = left ? x - 6 : x + 6;
  const anchor = left ? "end" : "start";
  return `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="2" fill="#555"/>
  <text x="${tx.toFixed(1)}" y="${(y + 3.5).toFixed(1)}" text-anchor="${anchor}" font-family="monospace" font-size="10" fill="#555">${name.toUpperCase()}</text>`;
}

const cityMarks = cities
  .map((city) => {
    const [x, y] = project(city);
    return cityMark(city.name, x, y, x < px);
  })
  .join("\n  ");

text-anchor="end" tells SVG that the x you gave is where the text stops, so the name grows leftward from its dot. The last argument, x < px, is the whole rule: a city left of the pin gets a label that runs left.

Run it. Annecy, Geneva, Lausanne, Lyon, and Grenoble now read leftward, and the pin has clear space on every side.

Milan is still a mess, and this rule cannot help. All three of those cities are on the same side of the pin.

Stop labels landing on each other

This is the hard part, and the answer is less clever than you might hope. Node has no font to measure text with, so you estimate the box each label will fill, and you leave out any label whose box hits one that is already there.

Start with the two helpers. Add them below cityMark:

const CHAR_W = 6, HALF_H = 6, MARGIN = 4;

function textBox(name, x, y, left) {
  const w = name.length * CHAR_W;
  const x0 = left ? x - 6 - w : x + 6;
  return { x0, x1: x0 + w, y0: y - HALF_H, y1: y + HALF_H };
}

function overlaps(a, b) {
  const apartX = a.x1 + MARGIN <= b.x0 || b.x1 + MARGIN <= a.x0;
  const apartY = a.y1 + MARGIN <= b.y0 || b.y1 + MARGIN <= a.y0;
  return !(apartX || apartY);
}

textBox guesses the rectangle a name will cover. A 10 pixel monospace font draws each character about 6 pixels wide, so the width is the letter count times six. That estimate is the reason the labels use a monospace font: every name's width is known without measuring anything.

overlaps treats two boxes as clear only when they are apart by the margin on at least one axis. The margin matters. Two labels that miss each other by a pixel are technically separate and still read as one smudge.

Once those are in, replace cityMarks with a version that checks before it draws:

const taken = [{ x0: px - 5, x1: px + 5, y0: py - 5, y1: py + 5 }];

const cityMarks = [...cities]
  .sort((a, b) => b.pop - a.pop)
  .map((city) => {
    const [x, y] = project(city);
    const left = x < px;
    const text = textBox(city.name, x, y, left);
    const dot = { x0: x - 2, x1: x + 2, y0: y - 2, y1: y + 2 };
    if (taken.some((box) => overlaps(box, text) || overlaps(box, dot))) {
      return "";
    }
    taken.push(text, dot);
    return cityMark(city.name, x, y, left);
  })
  .filter(Boolean)
  .join("\n  ");

taken starts with one box in it, the pin, so no label can land there either. The cities are sorted by population, largest first, which decides who wins: Milan claims its space before Monza and Novara get a turn. Each city that fits adds both its text box and its dot to the list. Each city that does not fit returns an empty string and is left off the map.

Run the script one more time. Milan stands alone, and eight of the ten cities are left.

Leaving labels out has a cost. Sometimes nothing survives, and sometimes there was nothing to begin with. The Hardrock 100 starts in Silverton, Colorado, and no large city falls inside its frame. Its map names two peaks in place of cities. Whatever rule you write for cities needs an answer for the empty case.

The whole script

Here is map.mjs in one piece:

import { readFileSync, writeFileSync } from "node:fs";
import { feature } from "topojson-client";

const W = 720, H = 190;
const pin = { lat: 45.92, lon: 6.87 }; // Chamonix
const scale = 2300; // pixels per radian

const rad = (deg) => (deg * Math.PI) / 180;
const mercY = (lat) => Math.log(Math.tan(Math.PI / 4 + rad(lat) / 2));

function project({ lat, lon }) {
  const x = W / 2 + scale * (rad(lon) - rad(pin.lon));
  const y = H / 2 - scale * (mercY(lat) - mercY(pin.lat));
  return [x, y];
}

const [px, py] = project(pin);

const world = JSON.parse(
  readFileSync("node_modules/world-atlas/land-50m.json", "utf8"),
);
const land = feature(world, world.objects.land).features[0];

const BLEED = 6;

function clipEdge(points, axis, limit, keepBelow) {
  const inside = (p) => (keepBelow ? p[axis] <= limit : p[axis] >= limit);
  const out = [];
  points.forEach((cur, i) => {
    const prev = points[(i + points.length - 1) % points.length];
    if (inside(cur) !== inside(prev)) {
      const t = (limit - prev[axis]) / (cur[axis] - prev[axis]);
      out.push([
        prev[0] + t * (cur[0] - prev[0]),
        prev[1] + t * (cur[1] - prev[1]),
      ]);
    }
    if (inside(cur)) out.push(cur);
  });
  return out;
}

function clipRing(points) {
  let out = clipEdge(points, 0, -BLEED, false);
  out = clipEdge(out, 0, W + BLEED, true);
  out = clipEdge(out, 1, -BLEED, false);
  return clipEdge(out, 1, H + BLEED, true);
}

function ringPath(ring) {
  const points = clipRing(
    ring.map(([lon, lat]) =>
      project({ lat: Math.max(-85, Math.min(85, lat)), lon }),
    ),
  );
  if (points.length < 3) return "";
  return points
    .map(([x, y], i) => `${i ? "L" : "M"}${x.toFixed(1)} ${y.toFixed(1)}`)
    .join("") + "Z";
}

const landPath = land.geometry.coordinates
  .flatMap((polygon) => polygon.map(ringPath))
  .join("");

const cities = [
  { name: "Milan", lat: 45.46, lon: 9.19, pop: 1370000 },
  { name: "Turin", lat: 45.07, lon: 7.69, pop: 850000 },
  { name: "Lyon", lat: 45.76, lon: 4.84, pop: 520000 },
  { name: "Geneva", lat: 46.2, lon: 6.14, pop: 200000 },
  { name: "Grenoble", lat: 45.19, lon: 5.72, pop: 158000 },
  { name: "Lausanne", lat: 46.52, lon: 6.63, pop: 140000 },
  { name: "Bern", lat: 46.95, lon: 7.45, pop: 134000 },
  { name: "Annecy", lat: 45.9, lon: 6.13, pop: 130000 },
  { name: "Monza", lat: 45.58, lon: 9.27, pop: 123000 },
  { name: "Novara", lat: 45.45, lon: 8.62, pop: 104000 },
];

function cityMark(name, x, y, left) {
  const tx = left ? x - 6 : x + 6;
  const anchor = left ? "end" : "start";
  return `<circle cx="${x.toFixed(1)}" cy="${y.toFixed(1)}" r="2" fill="#555"/>
  <text x="${tx.toFixed(1)}" y="${(y + 3.5).toFixed(1)}" text-anchor="${anchor}" font-family="monospace" font-size="10" fill="#555">${name.toUpperCase()}</text>`;
}

const CHAR_W = 6, HALF_H = 6, MARGIN = 4;

function textBox(name, x, y, left) {
  const w = name.length * CHAR_W;
  const x0 = left ? x - 6 - w : x + 6;
  return { x0, x1: x0 + w, y0: y - HALF_H, y1: y + HALF_H };
}

function overlaps(a, b) {
  const apartX = a.x1 + MARGIN <= b.x0 || b.x1 + MARGIN <= a.x0;
  const apartY = a.y1 + MARGIN <= b.y0 || b.y1 + MARGIN <= a.y0;
  return !(apartX || apartY);
}

const taken = [{ x0: px - 5, x1: px + 5, y0: py - 5, y1: py + 5 }];

const cityMarks = [...cities]
  .sort((a, b) => b.pop - a.pop)
  .map((city) => {
    const [x, y] = project(city);
    const left = x < px;
    const text = textBox(city.name, x, y, left);
    const dot = { x0: x - 2, x1: x + 2, y0: y - 2, y1: y + 2 };
    if (taken.some((box) => overlaps(box, text) || overlaps(box, dot))) {
      return "";
    }
    taken.push(text, dot);
    return cityMark(city.name, x, y, left);
  })
  .filter(Boolean)
  .join("\n  ");

const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${W} ${H}">
  <rect width="${W}" height="${H}" fill="#e6e6e6"/>
  <path d="${landPath}" fill="#ffffff" stroke="#999999" stroke-width="0.7"/>
  ${cityMarks}
  <circle cx="${px}" cy="${py}" r="5" fill="#111111"/>
</svg>`;
writeFileSync("map.svg", svg);

To see what the map adds to a page, compress it the way a web server would and count the bytes:

gzip -c map.svg | wc -c

Where this stops working

The text is part of the drawing, so it scales with it. On a phone 360 pixels wide, this map renders at half size and the 10 pixel labels become 5 pixel labels. Fixing that means taking the names out of the SVG and positioning them as HTML over it, which is its own tutorial.

The label boxes also lean on the font. They assume a monospace face about 6 pixels per character. A different font, or names in another language, throws the estimate off and labels can overlap again.

The placement is greedy. A label that does not fit is dropped, when trying the other side of its dot or the row above might have saved it.

And a map is more than a coastline and some cities. The Western States 100 map has Lake Tahoe beside the pin and the Sierra Nevada named above it, and neither is in this script.

Both are less work than they look, because every step here has been the same three moves: load some shapes or points, run them through project, and decide what fits. A lake is a path like the land, filled with the water color. Natural Earth publishes lakes as their own file, separate from world-atlas. A range name is a label like a city, with one more box in taken. That is the next thing to build.

Building a Go Static Site Generator Using elem-go and goldmark

Chase Fleming — Thu, 07 Dec 2023 21:43:40 +0000

In this tutorial, we'll build a static site generator using elem-go for HTML templating and goldmark for Markdown processing. This generator will convert Markdown files into HTML and create an index page listing all posts.

Note: You can clone this template to use or follow along with the tutorial.

Explaining the Dependencies

elem-go: A Go library for type-safe HTML element creation. It simplifies the process of building HTML templates in Go.
goldmark: A Markdown parser and renderer for Go. It converts Markdown files into HTML.

Creating Our Project

We'll structure our project with a main Go file, a posts directory for Markdown, a public directory for the generated HTML, and a Go module file. In the end, it will look like this:

my-static-site/
│
├── main.go             # Your main Go file
├── posts/              # Directory containing Markdown files
│   ├── post1.md
│   ├── post2.md
│   └── ...
├── public/             # Directory where generated HTML files will be stored
└── go.mod              # Go module file

To begin, let's create our project directory, navigate to it, and initialize a new Go project:

mkdir my-static-site
cd my-static-site
go mod init my-static-site

Next, we need to install our dependencies:

go get github.com/chasefleming/elem-go
go get github.com/yuin/goldmark

Adding Our Content

Next, create a posts directory and a hello-world.md Markdown file within it. This file will serve as your first post on the site.

mkdir posts
touch posts/hello-world.md

Let's also add some content:

# Hello, World!  

This is a sample post to get you started. You can edit or delete this post and begin adding your content.

Building Our Generator

Our generator code will take the Markdown files we have and convert them into HTML pages. The conversion of Markdown to HTML will happen with the goldmark library, but the templating of the pages will happen in elem-go. It enables writing type-safe Go code to generate HTML, eliminating the need to parse separate template files.

Let's first create our main.go file:

touch main.go

In main.go, let's import the dependencies we need:

package main  

import (  
    "github.com/chasefleming/elem-go"
    "github.com/chasefleming/elem-go/attrs"
    "github.com/chasefleming/elem-go/styles"
    "github.com/yuin/goldmark"
)

You'll notice the elem-go has two subpackages. These come with elem-go and provide type-safe ways of handling attributes and styles. They help avoid having to write common strings and come with other utility methods.

Next, let's make a layout function that takes a title and content and returns the html structure of our page using the arguments passed in:

func layout(title string, content elem.Node) string {  
    htmlPage := elem.Html(nil,  
       elem.Head(nil,  
          elem.Title(nil, elem.Text(title)),  
       ),       elem.Body(nil,  
          elem.Header(nil, elem.H1(nil, elem.Text(title))),  
          elem.Main(nil, content),  
          elem.Footer(nil, elem.Text("Footer content here")),  
       ),    )  
    return htmlPage.Render()  
}

You'll notice that instead of having to write HTML, you can use elem-go to generate HTML with methods like elem.Main which generates a <main> element.

After that, let's create another function to actually write the HTML generated with layout to a file based on the title. Since we generated a chunk of HTML using goldmark and it's not elem-go syntax, we'll pass it into elem.Raw which takes raw HTML and returns an elem.Node type which is compatible with the library:

func createHTMLPage(title, content string) string {  
    htmlOutput := layout(title, elem.Raw(content))  

    postFilename := title + ".html"  
    filepath := filepath.Join("public", postFilename)  
    os.WriteFile(filepath, []byte(htmlOutput), 0644)  
    return postFilename  
}

We also need a function that will take our Markdown and use goldmark to convert it to HTML. Let's add that:

func markdownToHTML(content string) string {  
    var buf bytes.Buffer  
    md := goldmark.New()  
    if err := md.Convert([]byte(content), &buf); err != nil {  
       log.Fatal(err)  
    }    return buf.String()  
}

Now that we have that, we'll additionally need a function that will walk through all of our posts, read the file, and pass the found markdown to the markdownToHTML function we just created. The return of the function should be an array of all the converted posts:

func readMarkdownPosts(dir string) []string {  
    var posts []string  
    err := filepath.Walk(dir, func(path string, info os.FileInfo, err error) error {  
       if !info.IsDir() {  
          content, err := os.ReadFile(path)  
          if err != nil {  
             return err  
          }  

          htmlContent := markdownToHTML(string(content))  
          title := strings.TrimSuffix(info.Name(), filepath.Ext(info.Name()))  
          postFilename := createHTMLPage(title, htmlContent)  

          posts = append(posts, postFilename)  
       }       return nil  
    })  
    if err != nil {  
       log.Fatal(err)  
    }    return posts  
}

All of our posts pages aren't great if we don't have an index page to find them all from. Again using elem-go, make a simple list of items with elem.A, elem.Ul, and elem.Ul and pass it to our layout. We also use the attrs subpackage to add the href using attrs.Href inside of attrs.Props{} to the <a> element. After that we'll save it to public/index.html:

func createIndexPage(postFilenames []string) {  
    listItems := make([]elem.Node, len(postFilenames))  
    for i, filename := range postFilenames {  
       link := elem.A(attrs.Props{attrs.Href: "./" + filename}, elem.Text(filename))  
       listItems[i] = elem.Li(nil, link)  
    }  
    indexContent := elem.Ul(nil, listItems...)  
    htmlOutput := layout("Home", indexContent)  

    filepath := filepath.Join("public", "index.html")  
    os.WriteFile(filepath, []byte(htmlOutput), 0644)  
}

When we run our project remember we'll not have created the posts or public directories yet, so let's make a function to create those directories if they don't exist:

func createDirIfNotExist(dir string) {  
    if _, err := os.Stat(dir); os.IsNotExist(err) {  
       err := os.Mkdir(dir, 0755) // or 0700 if you need it to be private  
       if err != nil {  
          log.Fatal(err)  
       }    }}

Now in our main function we can put it all together to first create the required directories, then read and create all the posts, then create our index page:

func main() {  
    createDirIfNotExist("posts")  
    createDirIfNotExist("public")  

    posts := readMarkdownPosts("posts")  
    createIndexPage(posts)  
}

Styling Our Site

elem-go's styles subpackage lets you create groups of style properties in a type-safe way. Let's create some styles to make our site look better:

headerStyle := styles.Props{  
    styles.BackgroundColor: "lightblue",  
    styles.Color:           "white",  
    styles.Padding:         "10px",  
    styles.TextAlign:       "center",  
}  

footerStyle := styles.Props{  
    styles.BackgroundColor: "lightgrey",  
    styles.Color:           "black",  
    styles.Padding:         "10px",  
    styles.TextAlign:       "center",  
}  

mainStyle := styles.Props{  
    styles.Padding: "20px",  
}

Then we'll use the attrs subpackage to add them as an inline-style and convert the style object to an inline style string using ToInline():

elem.Body(nil,  
    elem.Header(attrs.Props{attrs.Style: headerStyle.ToInline()},  
       elem.H1(nil, elem.Text(title)),  
    ),    elem.Main(attrs.Props{attrs.Style: mainStyle.ToInline()},  
       content,  
    ),    elem.Footer(attrs.Props{attrs.Style: footerStyle.ToInline()},  
       elem.Text("Footer content here"),  
    ),),

Opening Our Site

We did it! We now have a static site. Open public/index.html in your browser to see it working:

open public/index.html

Or if you're on Windows, run:

start public\index.html

Building a Counter App with htmx, Go Fiber, and elem-go

Chase Fleming — Fri, 06 Oct 2023 21:06:03 +0000

In this tutorial, we'll build a simple counter application using Go Fiber, htmx, and the elem-go library for type-safe HTML templating.

Explaining the Dependencies

We'll use three primary packages to build the app:

Go Fiber: An HTTP web server implementation inspired by Express.js's design in Node.js. Go Fiber facilitates the development of speedy and scalable web applications in Go.
htmx: Provides direct access to AJAX, WebSockets, and Server-Sent Events in HTML, simplifying dynamic updates of web pages without full reloads.
elem-go: A nimble Go library designed for programmatic and type-safe HTML element creation and management. It ensures you're working with valid HTML elements, attributes, and styles, helping to minimize potential runtime errors.

Setting Up the Project

Start by initializing a new Go project:

mkdir go-htmx-counter
cd go-htmx-counter
go mod init github.com/yourusername/go-htmx-counter

Next, install the required packages:

go get github.com/chasefleming/elem-go
go get github.com/gofiber/fiber/v2

Setting Up the Go Fiber Server

Create a new file named main.go. Here, set up a root route using Go Fiber, which listens on port 3000 and serves the "Hello, World!" message:

package main

import (
    "github.com/gofiber/fiber/v2"
)

func main() {
    app := fiber.New()

    app.Get("/", func(c *fiber.Ctx) error {
        c.Type("html")
        return c.SendString("Hello, world!")
    })

    app.Listen(":3000")
}

To start your server:

go run main.go

Navigate to http://localhost:3000, and you should be greeted by "Hello, world!".

Importing Subpackages from `elem-go`

Once you have installed the elem-go package, you also gain access to its subpackages, which are designed to enhance your development experience with type-safe utilities for attributes, styles, and htmx integration. Here’s how you can import them into your project:

import (
    //...[existing imports]...
    "github.com/chasefleming/elem-go/attrs"
    "github.com/chasefleming/elem-go/styles"
    "github.com/chasefleming/elem-go/htmx"
)

Make sure to include these imports in your main.go file or any other file where you are using the elem-go library. By importing these subpackages, you gain access to a suite of constants and helper functions that facilitate the creation of type-safe HTML elements. This structure helps prevent common mistakes such as typos in attribute names and ensures that style properties are correctly applied to your elements.

Each subpackage serves a specific purpose:

attrs: This subpackage contains constants for HTML attribute names, ensuring that you use valid attribute keys when creating elements.
styles: It provides constants for CSS property names, allowing you to apply styles with the correct property keys.
htmx: This subpackage includes constants for htmx-specific attributes, making it easier to work with htmx in your templates.

Create the Counter Page using `elem-go`

Begin by adding the script tag for the htmx source to our app's <head>. With elem-go, you can generate this HTML in a type-safe manner. Using elem. followed by the tag name lets you create the desired elements. The first argument in an elem-go element defines its attributes, while subsequent arguments denote child elements:

app.Get("/", func(c *fiber.Ctx) error {
    head := elem.Head(nil, elem.Script(attrs.Props{attrs.Src: "https://unpkg.com/htmx.org@1.9.6"}))
    //...[rest of the code]...
})

With elem-go, you can also utilize type-safe constants for both attribute and style keys. To define the styles, add the following after head:

bodyStyle := styles.Props{  
    styles.BackgroundColor: "#f4f4f4",
    styles.FontFamily:      "Arial, sans-serif",
    styles.Height:          "100vh",
    styles.Display:         "flex",
    styles.FlexDirection:   "column",
    styles.AlignItems:      "center",
    styles.JustifyContent:  "center",
}

buttonStyle := styles.Props{
    styles.Padding:       "10px 20px",
    styles.BackgroundColor: "#007BFF",
    styles.Color:         "#fff",
    styles.BorderColor:   "#007BFF",
    styles.BorderRadius:  "5px",
    styles.Margin:        "10px",
    styles.Cursor:        "pointer",
}

After defining the styles, we'll construct our body elements using the methods provided by the elem-go library. Additionally, the htmx subpackage we imported offers specific values, which are accessible with the htmx. prefix:

body := elem.Body(
    attrs.Props{
        attrs.Style: bodyStyle.ToInline(),
    },
    elem.H1(nil, elem.Text("Counter App")),
    elem.Div(attrs.Props{attrs.ID: "count"}, elem.Text("0")),
    elem.Button(
        attrs.Props{
            htmx.HXPost:   "/increment",
            htmx.HXTarget: "#count",
            attrs.Style:   buttonStyle.ToInline(),
        }, 
        elem.Text("+")
    ),
    elem.Button(
        attrs.Props{
            htmx.HXPost:   "/decrement",
            htmx.HXTarget: "#count",
            attrs.Style:   buttonStyle.ToInline(),
        }, 
        elem.Text("-")
    ),
)

Once the body content is defined, encapsulate it within the <html> tag using the elem.Html method followed by Render. Append this after defining the body:

pageContent := elem.Html(nil, head, body)  

html := pageContent.Render()

Adding Interactivity with htmx

Next, we'll establish handlers for the /increment and /decrement endpoints. These are invoked via htmx.HXPost, the programmatic equivalent of the hx-post attribute in HTML. To do this, integrate the following into your main function after initializing the app:

var count int

app.Post("/increment", func(c *fiber.Ctx) error {
    count++
    return c.SendString(fmt.Sprintf("%d", count))
})

app.Post("/decrement", func(c *fiber.Ctx) error {
    count--
    return c.SendString(fmt.Sprintf("%d", count))
})

The above routes will update and then send back the current value of the counter. Ensure you have imported the fmt package at the top of your file to use the Sprintf function.

Running the Counter App

Run the server, navigate to http://localhost:3000, and you'll be greeted with the Counter App. The "+" and "-" buttons will now seamlessly update the count value without a full page refresh.

Congratulations on successfully building a basic counter app using Go Fiber for the backend, htmx for frontend interactivity, and elem-go for type-safe HTML templating. Expand on this foundation for more advanced projects!

If you'd like to see the full code, check out this repo.

DEV Community: Chase Fleming

Server-render an SVG map with no map library

Why draw it on the server

What you need

Start with a dot

Draw the land

Draw only what is in view

Add the cities

Run labels away from the pin

Stop labels landing on each other

The whole script

Where this stops working

Building a Go Static Site Generator Using elem-go and goldmark

Explaining the Dependencies

Creating Our Project

Adding Our Content

Building Our Generator

Styling Our Site

Opening Our Site

Building a Counter App with htmx, Go Fiber, and elem-go

Explaining the Dependencies

Setting Up the Project

Setting Up the Go Fiber Server

Importing Subpackages from elem-go

Create the Counter Page using elem-go

Adding Interactivity with htmx

Running the Counter App

Importing Subpackages from `elem-go`

Create the Counter Page using `elem-go`