🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

astley.js

Package Overview
Dependencies
Maintainers
2
Versions
57
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

astley.js

Construct a website from a JSON-LD AST

0.0.58
latest
npm
Version published
Weekly downloads
0
-100%
Maintainers
2
Weekly downloads
 
Created
Source

astley.js

Library for rendering a website AST into semantic aware template. Separate the content structure from the template structure to easily transform your website.

Of course building a semantic template is hard but it is much easier to give your site a new look once there is a library of templates. Astley.js comes with a default semantic template, fork to create your own.

AST Definition

The AST is implemented in JSON-LD format. The semantic pug template annotates the compiled template using microdata so any microdata parser can retrieve the AST.

@context for the topmost element is

'@context': 'hanzo.ai/schema'

Website

{
  '@type': 'Website'
  # head - website head, title, description, opengraph
  head: WebsiteHead
  # header - website header, navigation, top menus
  header: WebsiteHeader
  # main - website body, content, etc
  main: [ WebsiteSection ]
  # footer - website footer, navigation
  footer: WebsiteFooter
}

Website root node

WebsiteHeader

{
  '@type': 'WebsiteHeader'
  # type - rendering mode, default template supports 'complex' and 'simple' header menus
  type: string
  # logos - logos to display in the headers
  logos: [ WebsiteLogo ]
  # menuCollections - grouped menus to render in the header, default templates
  # supports 2, the first for the centered menu group, and second for the right
  # menu group
  menuCollections: [ WebsiteMenuCollection ]
}

WebsiteHeader is the top header menu of a webpage

{
  '@type': 'WebsiteLogo'
  # image - logo image url
  image: string
  # alt - logo image alt
  alt: string
  # name - logo text if any
  name: string
  # url - logo url
  url: string
}

WebsiteLogo is an image + text logo

WebSiteMenuCollection

{
  '@type': 'WebsiteMenuCollection'
  // menus - list of WebsiteMenus in group/collection
  menus: [ WebsiteMenu ]
}

WebsiteMenuCollection is a grouped collection of WebsiteMenus for the purposes of organizing related menus

WebSiteMenu

{
  '@type': 'WebsiteMenu'
  # name - menu display name
  name: string
  # description - link description
  type: basic | button
  # url - menu may be a link itself (usually if no child links)
  url: string
  links: [ WebsiteMenuLink ]
}

WebsiteMenu is a menu which may be a link itself or a menu containing links

{
  '@type': 'WebsiteMenuLink'
  # name - link display name
  name: string
  # description - link description
  description: string
  # type - type of link supports specific types
  type: basic | button
  # image - link image
  image: string
  # image - link url
  url: string
}

WebsiteMenuLink is a url link with associated image and description

WebsiteSection

{
  '@type': 'WebsiteSection'
  # name - section name
  name: string
  # type - type of section, supports specific types
  type: hero | block | cta
  # class - class names like html tag class
  class: string
  # id - id
  id: string
  # content - list of content
  content: [ WebsiteText | WebsiteImage | WebsiteButton | WebsiteContent ]
}

WebsiteSection containes website primatives

WebsiteContent

{
  '@type': 'WebsiteContent'
  # class - class names like html tag class
  class: string
  # id - id
  id: string
  # content - list of content
  content: [ WebsiteText | WebsiteImage | WebsiteButton | WebsiteContent ]
}

WebsiteContent allows tree-like structuring of data, not necessarily rendered, just organizational. Usually inferred by the content-annotator

WebsiteText

{
  '@type': 'WebsiteText'
  # class - class names like html tag class
  class: string
  # id - id
  id: string
  # text - text
  text: string
  # level - level (h1, h2, h3, h4, p, small)
  level: string
}

WebsiteText primative

WebsiteImage

{
  '@type': 'WebsiteImage'
  # class - class names like html tag class
  class: string
  # id - id
  id: string
  # src - source
  src: string
  # alt - alt text
  alt: string
}

WebsiteImage primative

{
  '@type': 'WebsiteLink'
  # class - class names like html tag class
  class: string
  # id - id
  id: string
  # text - link text
  text: string
  # url - link url
  url: string
}

WebsiteLink primative

WebsiteHeader

{
  '@type': 'WebsiteFooter'
  # logos - logos to display in the footers
  logos: [ WebsiteLogo ]
  # menuCollections - grouped menus to render in the footer
  menuCollections: [ WebsiteMenuCollection ]
}

WebsiteFooter is the bottom footer menu of a webpage

Keywords

AST

FAQs

Package last updated on 22 Oct 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts