// open data endpoint
My website.
Your UI.
All the content from this site is available as a single JSON endpoint.
Fetch it, shape it, style it however you want.
Don't bother me with frontends. I'm a backend fundamentalist.
// endpoint
https://jonathangf.com/data.json
// schema
site
Title, URL and site description
nav
Navigation links array with label + url
pages.home
Headline, bio, skills array, hero image
pages.about
Sections, hobbies, location, ham radio callsign
blog.posts
Array of posts (title, date, excerpt, url)
meta
Generated date and source attribution
// usage
import requests res = requests.get('https://jonathangf.com/data.json') data = res.json() # Access any field print(data['pages']['home']['bio']) print(data['pages']['home']['skills']) print(data['blog']['posts'])
// Cargo.toml deps: reqwest = { version = "0.12", features = ["blocking", "json"] } // serde_json = "1" use serde_json::Value; fn main() -> Result<(), Box<dyn std::error::Error>> { let data: Value = reqwest::blocking::get("https://jonathangf.com/data.json")?.json()?; // Access any field println!("{}", data["pages"]["home"]["bio"]); println!("{}", data["pages"]["home"]["skills"]); println!("{}", data["blog"]["posts"]); Ok(()) }
// Fetch and use the data in any web project const res = await fetch('https://jonathangf.com/data.json'); const data = await res.json(); // Access any field console.log(data.pages.home.bio); console.log(data.pages.home.skills); // Array of skills console.log(data.pages.about.hobbies); // Array of hobbies console.log(data.blog.posts); // Blog posts array
# Get the raw JSON curl https://jonathangf.com/data.json # Pretty print with jq curl https://jonathangf.com/data.json | jq . # Filter a specific field curl https://jonathangf.com/data.json | jq '.pages.home.skills'
// live preview
data.json
loading data…