Package root
import "gitlab.com/zoralab/bissetii/pkg/components/internal/root"
Package root is the central control of Bissetii HTML codes.
This package controls various output generations including but not limited to output formats like HTML and AMP. It is responsible for generating Bissetii’s mediaTypes.toml data type file.
It is used across all its sub-packages.
Constants
All Bissetii Compressed Compiled CSS
const (
CSSAMP = `@font-face{font-family:"Noto Sans";font-style:normal;font-weight:bold;src:local("Noto Sans"),url("/fonts/NotoSans-Bold.ttf")}@font-face{font-family:"Noto Sans";font-style:italic;font-weight:bold;src:local("Noto Sans"),url("/fonts/NotoSans-BoldItalic.ttf")}@font-face{font-family:"Noto Sans";font-style:italic;font-weight:400;src:local("Noto Sans"),url("/fonts/NotoSans-Italic.ttf")}@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;src:local("Noto Sans"),url("/fonts/NotoSans-Regular.ttf")}@font-face{font-family:"Noto Color Emoji";src:local("Noto Color Emoji"),url("/fonts/NotoColorEmoji.ttf")}html,body{margin:0;padding:0;width:100%}html{font-size:62.5%;height:100%;height:calc(100vh - calc(100vh - 100%));box-sizing:var(--box-sizing-html)}body{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);letter-spacing:var(--font-char-spacing);line-height:var(--font-line-height);text-align:var(--font-align);min-height:100%;display:grid;gap:0;grid:var(--body-grid)}main{z-index:var(--z-index-main);grid-area:content;max-width:var(--main-max-width);margin:var(--main-margin);padding:var(--main-padding)}h1{font-size:var(--h1-font-size);line-height:var(--h1-line-height);letter-spacing:var(--h1-char-spacing);margin:var(--h1-margin);text-decoration:var(--h1-text-deco);text-decoration-color:var(--h1-text-deco-color);border-bottom:var(--h1-border-bottom)}h2{font-size:var(--h2-font-size);line-height:var(--h2-line-height);letter-spacing:var(--h2-char-spacing);margin:var(--h2-margin);text-decoration:var(--h2-text-deco);text-decoration-color:var(--h2-text-deco-color);border-bottom:var(--h2-border-bottom)}h3{font-size:var(--h3-font-size);line-height:var(--h3-line-height);letter-spacing:var(--h3-char-spacing);margin:var(--h3-margin);text-decoration:var(--h3-text-deco);text-decoration-color:var(--h3-text-deco-color);border-bottom:var(--h3-border-bottom)}h4{font-size:var(--h4-font-size);line-height:var(--h4-line-height);letter-spacing:var(--h4-char-spacing);margin:var(--h4-margin);text-decoration:var(--h4-text-deco);text-decoration-color:var(--h4-text-deco-color);border-bottom:var(--h4-border-bottom)}h5{font-size:var(--h5-font-size);line-height:var(--h5-line-height);letter-spacing:var(--h5-char-spacing);margin:var(--h5-margin);text-decoration:var(--h5-text-deco);text-decoration-color:var(--h5-text-deco-color);border-bottom:var(--h5-border-bottom)}h6{font-size:var(--h6-font-size);line-height:var(--h6-line-height);letter-spacing:var(--h6-char-spacing);margin:var(--h6-margin);text-decoration:var(--h6-text-deco);text-decoration-color:var(--h6-text-deco-color);border-bottom:var(--h6-border-bottom)}`
CSSCritical = `@font-face{font-family:"Noto Sans";font-style:normal;font-weight:bold;src:local("Noto Sans"),url("/fonts/NotoSans-Bold.ttf")}@font-face{font-family:"Noto Sans";font-style:italic;font-weight:bold;src:local("Noto Sans"),url("/fonts/NotoSans-BoldItalic.ttf")}@font-face{font-family:"Noto Sans";font-style:italic;font-weight:400;src:local("Noto Sans"),url("/fonts/NotoSans-Italic.ttf")}@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;src:local("Noto Sans"),url("/fonts/NotoSans-Regular.ttf")}@font-face{font-family:"Noto Color Emoji";src:local("Noto Color Emoji"),url("/fonts/NotoColorEmoji.ttf")}html,body{margin:0;padding:0;width:100%}html{font-size:62.5%;height:100%;height:calc(100vh - calc(100vh - 100%));box-sizing:var(--box-sizing-html)}body{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight);letter-spacing:var(--font-char-spacing);line-height:var(--font-line-height);text-align:var(--font-align);min-height:100%;display:grid;gap:0;grid:var(--body-grid)}main{z-index:var(--z-index-main);grid-area:content;max-width:var(--main-max-width);margin:var(--main-margin);padding:var(--main-padding)}h1{font-size:var(--h1-font-size);line-height:var(--h1-line-height);letter-spacing:var(--h1-char-spacing);margin:var(--h1-margin);text-decoration:var(--h1-text-deco);text-decoration-color:var(--h1-text-deco-color);border-bottom:var(--h1-border-bottom)}h2{font-size:var(--h2-font-size);line-height:var(--h2-line-height);letter-spacing:var(--h2-char-spacing);margin:var(--h2-margin);text-decoration:var(--h2-text-deco);text-decoration-color:var(--h2-text-deco-color);border-bottom:var(--h2-border-bottom)}h3{font-size:var(--h3-font-size);line-height:var(--h3-line-height);letter-spacing:var(--h3-char-spacing);margin:var(--h3-margin);text-decoration:var(--h3-text-deco);text-decoration-color:var(--h3-text-deco-color);border-bottom:var(--h3-border-bottom)}h4{font-size:var(--h4-font-size);line-height:var(--h4-line-height);letter-spacing:var(--h4-char-spacing);margin:var(--h4-margin);text-decoration:var(--h4-text-deco);text-decoration-color:var(--h4-text-deco-color);border-bottom:var(--h4-border-bottom)}h5{font-size:var(--h5-font-size);line-height:var(--h5-line-height);letter-spacing:var(--h5-char-spacing);margin:var(--h5-margin);text-decoration:var(--h5-text-deco);text-decoration-color:var(--h5-text-deco-color);border-bottom:var(--h5-border-bottom)}h6{font-size:var(--h6-font-size);line-height:var(--h6-line-height);letter-spacing:var(--h6-char-spacing);margin:var(--h6-margin);text-decoration:var(--h6-text-deco);text-decoration-color:var(--h6-text-deco-color);border-bottom:var(--h6-border-bottom)}h1:before{content:var(--h1-before-content);margin:var(--h1-before-margin);color:var(--h1-before-color)}h2:before{content:var(--h2-before-content);margin:var(--h2-before-margin);color:var(--h2-before-color)}h3:before{content:var(--h3-before-content);margin:var(--h3-before-margin);color:var(--h3-before-color)}h4:before{content:var(--h4-before-content);margin:var(--h4-before-margin);color:var(--h4-before-color)}h5:before{content:var(--h5-before-content);margin:var(--h5-before-margin);color:var(--h5-before-color)}h6:before{content:var(--h6-before-content);margin:var(--h6-before-margin);color:var(--h6-before-color)}h1 .clean:before,h2 .clean:before,h3 .clean:before,h4 .clean:before,h5 .clean:before,h6 .clean:before{content:none;margin-right:initial}`
CSSTablet = `body{--body-grid:var(--body-grid-tablet)}`
CSSDesktop = `body{--body-grid:var(--body-grid-desktop)}`
CSSWidescreen = `body{--body-grid:var(--body-grid-widescreen)}`
CSSPrint = `:root{--font-size:12pt}h1,h2,h3,h4,h5,h6,p{display:block;break-inside:avoid}h1{break-before:page;break-after:avoid}h2,h3,h4,h5,h6{break-before:avoid;break-after:avoid}p{break-before:avoid;orphans:0;widows:0}`
CSSVariables = ``
CSSVariablesAMP = ``
)
Constants for managing the package as a whole.
const (
// MetaName is the block name (`{{- define "this-name"
// -}}`).
MetaName = "meta"
// AMPName is the AMP HTML block name.
MetaAMPName = internal.AMPPrefix + MetaName
)
Dependencies are the dependent codes for building independent template.
This is useful for rendering portable template usage like Hugo partials where they do not share a common definition source.
const (
// MetaDepHTML is the vanilla HTML output type.
MetaDepHTML = ``
// MetaDepAMPHTML is the Accelerated Mobile Pages HTML
// output type.
MetaDepAMPHTML = ``
)
Full MetaHTML codes for rendering templates without needing to parse file.
const (
// MetaHTML is the vanilla HTML output type.
MetaHTML = MetaHTMLHead +
MetaGeneral +
MetaAlternativeFormats +
MetaAlternativeLanguages +
MetaRobots +
MetaFavicon +
MetaTwitter +
MetaOpenGraph +
MetaSchemaOrg +
MetaHTMLGA
// MetaAMPHTML is the Accelerated Mobile Pages HTML output
// type.
MetaAMPHTML = MetaAMPHead +
MetaAMPExtensions +
MetaGeneral +
MetaAlternativeFormats +
MetaAlternativeLanguages +
MetaRobots +
MetaFavicon +
MetaTwitter +
MetaOpenGraph +
MetaAMPBoilerplate +
MetaSchemaOrg
)
const (
// MetaAMPHead is the leading `<meta>` tags for AMP HTML.
MetaAMPHead = `
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
`
// MetaAMPBoilerplate is the AMP required boilerplate codes
// in AMP HTML.
MetaAMPBoilerplate = `<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
`
// MetaAMPExtensions are to render the list of selected AMP
// JS modules.
MetaAMPExtensions = `
{{- range $name := .Page.Extensions }}
{{- if eq $name "sidebar" }}
<script async
custom-element="amp-sidebar"
src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js">
</script>
{{- end }}
{{- if eq $name "google-analytics" }}
<script async
custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
{{- end }}
{{- if eq $name "form" }}
<script async
custom-element="amp-form"
src="https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>
{{- end }}
{{- if eq $name "carousel" }}
<script async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js">
</script>
{{- end }}
{{- if eq $name "iframe" }}
<script async
custom-element="amp-iframe"
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>
{{- end }}
{{- end }}
`
)
Commons are the common <meta> tags used across all HTML output types.
const (
// MetaGeneral specifies critical page `<meta>` information.
MetaGeneral = `
<meta name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"/>
<meta name="description" content="{{- .Page.Description -}}" />
{{ if .Page.Keywords -}}
<meta name="keywords" content="{{- .Page.Keywords -}}" />
{{- end }}
{{ if .Page.Authors -}}
<meta name="author" content="{{- .Page.Creators -}}" />
{{- end }}
{{- if .Page.Format }}
<link rel="{{- .Page.Format.Rel -}}" href="{{- .Page.Format.URL -}}"
{{- if .Page.Format.Type }}
type="{{- .Page.Format.Type -}}"
{{- end }} />
{{- end }}
`
// MetaAlternativeFormats are the list of alternative
// viewing format.
MetaAlternativeFormats = `
{{- range .Page.Alternative.Formats }}
<link rel="{{- .Rel -}}" type="{{- .Type -}}" href="{{- .URL -}}" />
{{- end }}
`
// MetaAlternativeLanguages are the list of translated
// content.
MetaAlternativeLanguages = `
{{- range .Page.Alternative.Languages }}
<link rel="alternate" hreflang="{{- .Code -}}" href="{{- .URL -}}" />
{{- end }}
`
// MetaRobots are the list of specific SEO robots crawler
// rules.
MetaRobots = `
{{- range $robot, $rules := .Page.Robots -}}
<meta name="{{- $robot -}}" content="{{ $rules }}" />
{{ end -}}
`
// MetaFavicons are the list of associated favicon links
MetaFavicon = `
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
`
)
const (
// MetaHTMLGA renders Google Analytics meta tags for vanilla
// HTML5.
MetaHTMLGA = `
{{- if .Vendor.Google.Analytics.ID }}
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', '{{- .Vendor.Google.Analytics.ID -}}', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
{{- end }}
`
)
Head are the leading meta tags for HTML page <head> section.
const (
// MetaHTMLHead is the leading `<meta>` tags for vanilla
// HTML.
MetaHTMLHead = `
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
`
)
const (
// MetaOpenGraph renders meta tags specific to OpenGraph
MetaOpenGraph = `
<meta property="og:site_name" content="{{ .Page.Site.Title }}" />
<meta property="og:title" content="{{ .Page.Title }}" />
<meta property="og:locale" content="{{- .Page.Language.Code -}}" />
{{- range .Page.Alternative.Languages }}
<meta property="og:locale:alternate" content="{{- .Code -}}" />
{{- end }}
<meta property="og:description" content="{{ .Page.Description }}" />
<meta property="og:type" content="website" />
<meta property="og:url" content="{{ .Page.Link.URL }}" />
{{- range $x := .Page.Thumbnails -}}
{{- if $x.URL }}
<meta property="og:image" content="{{- $x.URL -}}"/>
{{- if $x.Type }}
<meta property="og:image:type" content="{{- $x.Type -}}" />
{{- end }}
{{- if $x.Width }}
<meta property="og:image:width" content="{{- $x.Width -}}" />
{{- end }}
{{- if $x.Height }}
<meta property="og:image:height" content="{{- $x.Height -}}" />
{{- end }}
{{- if $x.AltText }}
<meta property="og:image:alt" content="{{- $x.AltText -}}" />
{{- end }}
{{- end -}}
{{- end }}
`
)
const (
// MetaSchemaOrg renders json meta tag for simplifying page
// parsing
MetaSchemaOrg = `
<script type="application/ld+json">
{
{{- $notFirst := "" -}}
{{- range $label, $value := .Page.Schema -}}
{{- if $notFirst -}}, {{ end -}}
"{{- $label -}}": {{ $value -}}
{{- $notFirst = "true" -}}
{{- end -}}
}
</script>
`
)
const (
// MetaTwitter renders meta tags specific to Twitter
MetaTwitter = `
{{- if .Vendor.Twitter.Cards.Card }}
<meta name="twitter:card" content="{{- .Vendor.Twitter.Cards.Card -}}" />
{{- if .Vendor.Twitter.Cards.Username }}
<meta name="twitter:site" content="{{- .Vendor.Twitter.Cards.Username -}}" />
{{- end }}
{{- if .Page.Creators }}
<meta name="twitter:creator" content="{{- .Page.Creators -}}" />
{{- end }}
{{- end }}
`
)
Alternative
type Alternative struct {
Languages []*Language
Formats []*Format
}
Alternative is the list of alternatives for the Page structure.
Date
type Date struct {
Created string
Published string
Modified string
}
Date is the date dataset for the Page structure.
Format
type Format struct {
Name string
Type string
Rel string
URL string
}
Format is the alternative page format for the Page structure.
GA
type GA struct {
ID string
}
GA is the Google Analytics credentials data
More info is available at: https://analytics.google.com/
type Google struct {
Analytics *GA
}
Google is the 3rd-party Google Platform Credential Data
Language
type Language struct {
Code string
Prefix string
URL string
}
Language is the language dataset for the Page structure.
Meta
type Meta struct {
Page *Page
Section *Page
Vendor *Vendor
}
Meta is the full meta data structure for filling this component.
Page
type Page struct {
Title string
Level string // title heading level
Site *Site
Creators string
Authors string
Publishers string
Type string
Date *Date
Link *anchor.Anchor
Description string
Keywords string
Format *Format
Language *Language
Alternative *Alternative
Thumbnails []*image.Data
Robots map[string]string
Schema map[string]interface{}
Content string
Copyright string
Extensions []string
// Nav data elements (possible recursive iterations)
Pre string
UID string
Children []*Page
}
Page is the page data structure.
Site
type Site struct {
Title string // hugo: .Site.Title
}
Site is the site-level data structure for Page structure.
type Twitter struct {
Cards *TwitterCards
}
Twitter is the 3rd-party Twitter Platform Credential Data
TwitterCards
type TwitterCards struct {
Card string
Username string
}
TwitterCards is the credential data structure for Twitter Publish.
More info at: https://business.twitter.com/en/blog/twitter-cards-101.html
Vendor
type Vendor struct {
Twitter *Twitter
Google *Google
}
Vendor is the 3rd-party vendor data structure.