Skip to content

Instantly share code, notes, and snippets.

@metaory
Last active August 29, 2024 16:25
Show Gist options
  • Save metaory/15deccb02091204514ce527d6900d8f1 to your computer and use it in GitHub Desktop.
Save metaory/15deccb02091204514ce527d6900d8f1 to your computer and use it in GitHub Desktop.
2024 Public Journal

Week 34-35 -- Aug 2024

TL;DR

1. markup.json

DOM tree representation in compact JSON -- Draft Spec, Library and CLI

Note

Publicly published under MIT License Available on GitHub and NPM

2. jsonresume-service (forked)

JSON resume as a Service - nextjs project to generate Resumes from the resume.json schema


1. markup.json

Consider this requirement;

In a HEADLESS environment (eg. CI)

I provide you a list of strings, a set of API endpoints and a desired layout.

The outcome is HTML formed from those API responses in the specified layout.

Your function get triggered when those inputs changes.

The function is expected to construct the HTML and write it disk (commit to git).

...

Tip

How would you construct the template?

...

I had this need for a personal project of mine,

Initially I started doing this in Bash + Curl + JQ

But very quickly it was getting out of hand and messy.

So I started the markup.json project, Library and a CLI.

The project is publicly published under MIT License.

The markup is encoded in a compact JSON form with a couple of unique niche features;

One notable feature is the "attribute strings as first-class citizens"

Useful for when encoding URLs with query-strings, on any element/attribute, like a link or image tag.

Here is an attribute with Array value

[
  "a",
  {
    "class": "secondary",
    "href": [
      "https://github.com/search?",
      { "q": "markup", "type": "repositories", "l": "Lua" }
    ]
  },
  "go",
  "find repos"
]
<a class="secondary"
   href="https://github.com/search?q=markup&type=repositories&l=Lua&">
  go
  find repos
</a>

Another notable feature is Object attributes; useful for attributes like style:

Here is an attribute with Object value

[
  "span",
  {
    "class": "secondary",
    "style": { "color": "indigo", "background": "fuchsia" },
    "anything": { "name": "etc", "planet": "8e81" }
  },
  "Object values",
  "xorg"
]
<span class="secondary"
      style="color:indigo; background:fuchsia;"
      anything="name:etc; planet:8e81;">
  Object values
  xorg
</span>

CLI Synopsis

markup [-]|FILE [FILE]

The CLI supports reading input from

  • Arguments
markup tpl.json index.html
  • Standard Input
cat tpl.json | markup > index.html
  • File Descriptor redirection
markup < tpl.json > index.html
preview-json

Refer to documentation for more #cli-usage or #library-usage


2. jsonresume-service (forked)

JSON resume as a Service - nextjs project to generate Resumes from the resume.json schema

JSON Resume (jsonresume.org/schema) is a community driven open source initiative to create JSON-based standard for resumes.

This is an open-source nextjs ssr project from github.com/DrakeAxelrod.

What sets this project apart from other JSONResume compatible themes is the way it loads the schema.

Instead of running the app locally to generate the pdf, this app loads the json data from Public GitHub Gist.

But it lacked the ability to load Private Gists,

My fork allows loading Private Gists, along with some major code refactors, and the move away from SSR.

icon
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment