This entry in the Dottiq CMS Dev Log is all about the LINKS page — not a generic “recommended sites” section, but a curated collection of links to my own social media profiles and content platforms.

I originally used lit.link, which offers clean design and decent customization options. But as I continued shaping Dottiq’s unique structure and visual identity, I began to feel a strong urge to build my own link page from scratch.

Why? Well, there were a few key reasons:

  • More freedom to control and customize the design
  • It seemed simple enough to implement
  • Easy centralized management via the CMS

🧰 Keeping the Implementation Simple

The initial version was intentionally minimal. In the CMS backend, I simply input the “site name” and “URL” for each link, saving everything as a JSON file. On the frontend, it just reads the JSON and displays the links as tile-style buttons.

🎨 Focused on Clean UI

The visual design is intentionally clean and modern. Each link is styled as a rounded gradient button, featuring just text and an emoji to convey the platform at a glance.

Of course, it’s fully responsive for mobile devices as well. Spacing and font sizes are tuned to look good across all screen widths.

✨ First Release: Simple But Effective

When the first version launched, I felt like, “Okay, this is enough for now.” You could add, edit, or delete links in the CMS — and the changes reflected instantly. Because it had only essential features, the interface felt light and fast.

🌪️ But Then Came the Sorting Problem

Then it hit me: “What if I want to change the order of the links?”

Since I don’t update every platform equally, I wanted an easy way to adjust the order as needed. Assigning sort IDs was one option, but it felt outdated and rigid. So I decided to implement a drag-and-drop sorting feature directly in the CMS admin panel.

🛠️ Implementing Drag-and-Drop Sorting

This turned out to be the biggest technical challenge of the update. I built a JavaScript-based interface that allows users to drag and reorder items, which are then submitted via AJAX to the server. The server rewrites the JSON file based on the new order.

For the frontend functionality, I used Sortable.js, a lightweight JavaScript library. Just by including https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.0/Sortable.min.js via CDN, you get full drag-and-drop capabilities with minimal code.

It tracks DOM changes and reorders the data automatically — perfect for CMS tools that need to stay lean and dependency-free.

At first, everything seemed to work fine, but then…

  • The order didn’t save correctly after editing
  • Saving only worked when no sorting had been done

I eventually tracked it down to mismatches between the sent array and the original IDs. After modifying the logic to use original_id as a reference key, everything stabilized.

The new order is now submitted as a POST array of IDs and instantly saved into the backend JSON file. This ensures the display order is always consistent across both the admin panel and the public page.

It’s the kind of small, annoying challenge that’s incredibly satisfying to solve — a real perk of building your own CMS.

🌐 Multilingual Display — But Simplified for Links

Unlike other sections like /blog or /tools, which have both Japanese and English versions, the LINKS page displays the same content regardless of language — since most platforms (e.g., YouTube, GitHub) use recognizable English names anyway.

So I just created:

  • A shared set of link data in English
  • Two URLs — /links and /en/links — with proper OGP and hreflang setup

This hybrid approach keeps things simple but still works well for SEO and user clarity. It’s one of those smart compromises that only custom-built CMSs can pull off elegantly.

🎉 A Link Page That Works Just the Way I Want

With this setup, the Dottiq CMS LINKS page gives me:

  • Complete freedom to customize the look and feel
  • Seamless multilingual support built into the design
  • Drag-and-drop sorting that puts me fully in control

It’s a link collection that truly fits my needs—and fixes all the small annoyances I had with external tools.

🧭 Ideas for Future Enhancements

Looking ahead, I’m considering a few more features, like hover tooltips that describe each platform, or click counters that track how often each link is used.

Little by little, it’s becoming one of those personal tools that makes me smile every time I use it. And that’s the beauty of building something for yourself.

Next time in the Dev Log, I’ll be covering the Tools section—where you’ll be able to download my original apps and Chrome extensions. Stay tuned!