Documentation
¶
Index ¶
- Constants
- type Attributes
- type Component
- type HeadProps
- type ImageMimeType
- type ImageOptions
- type ImageProps
- type ImageProvider
- type ImageSize
- type LoadingAttribute
- type OpenGraph
- type OpenGraphArticle
- type OpengraphAudio
- type OpengraphImage
- type OpengraphVideo
- type PictureOptions
- func PictureWithAlt(alt string) PictureOptions
- func PictureWithAttribute(key, value string) PictureOptions
- func PictureWithClasses(classes ...string) PictureOptions
- func PictureWithEagerLoading() PictureOptions
- func PictureWithHiddenMediaSources() PictureOptions
- func PictureWithLazyLoading() PictureOptions
- func PictureWithSize(sizes ...string) PictureOptions
- type PictureProps
- type PictureProvider
- type TwitterCard
Constants ¶
const ( // AttributeClass is the class attribute for an HTML element. AttributeClass = "class" // AttributeID is the ID attribute for an HTML element. AttributeID = "id" )
Variables ¶
This section is empty.
Functions ¶
This section is empty.
Types ¶
type Attributes ¶
Attributes specifies additional attributes for an HTML element as key-value pairs. This could be ID, Classes, Data attributes or any other attribute that is relevant to the element.
type HeadProps ¶
type HeadProps struct {
// Required meta properties
Title string
Description string
Image string
DatePublished time.Time
DateModified time.Time
Locale string // ISO 639-1 defaults to "en_GB"
// Other
URL string // The full URL of the page.
IsPage bool // If true, the page is a page, not a post.
// Additional meta properties
Private bool // If true, the page should not be indexed by search engines.
Canonical string // The canonical URL of the page.
// Schema, Meta & Opengraph
OpenGraph *OpenGraph
Twitter *TwitterCard
Organisation *schemaorg.Organisation
// Other (Code Injection)
Other string
// To define additional meta tags and any other HTML, see webkitctx.WithHeadSnippet
Snippets []webkitctx.MarkupSnippet
}
HeadProps defines the properties that should be included in the head of the document.
type ImageMimeType ¶
type ImageMimeType string
ImageMimeType specifies a mimetype four a <source> element that is outputted on the type attribute.
const ( ImageMimeTypeAPNG ImageMimeType = "image/apng" ImageMimeTypeAVIF ImageMimeType = "image/avif" ImageMimeTypeGif ImageMimeType = "image/gif" ImageMimeTypeJPG ImageMimeType = "image/jpeg" ImageMimeTypePNG ImageMimeType = "image/png" ImageMimeTypeSVG ImageMimeType = "image/svg+xml" ImageMimeTypeWebP ImageMimeType = "image/webp" )
ImageMimeType constants that are defined at: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
type ImageOptions ¶
type ImageOptions func(p *ImageProps)
ImageOptions allows for optional settings to be applied to an <img> or <source>.
func ImageWithAlt ¶
func ImageWithAlt(alt string) ImageOptions
ImageWithAlt attaches alternative text to the image.
func ImageWithAttribute ¶
func ImageWithAttribute(key, value string) ImageOptions
ImageWithAttribute attaches a custom attribute to the image that will be rendered in the HTML, for example data-id="main-image".
func ImageWithEagerLoading ¶
func ImageWithEagerLoading() ImageOptions
ImageWithEagerLoading sets loading=eager to the image.
func ImageWithHeight ¶
func ImageWithHeight(height int) ImageOptions
ImageWithHeight sets the height of the image.
func ImageWithLazyLoading ¶
func ImageWithLazyLoading() ImageOptions
ImageWithLazyLoading sets loading=lazy to the image.
func ImageWithWidth ¶
func ImageWithWidth(width int) ImageOptions
ImageWithWidth sets the width of the image.
type ImageProps ¶
type ImageProps struct {
// The URL of the image, which will map to the srcset or src attribute.
// For example: "/images/dog.jpg"
URL string
// Defines text that can replace the image in the page.
// Note: Will not output if IsSource is true, as alt is not valid for source elements.
Alt string
// Determines if the image is a source element.
IsSource bool
// Media specifies the media condition (media query) for the source,
// For example: "(min-width: 600px)"
Media string
// Mimetype such as
// - image/jpeg
// - image/png
// - image/gif
// - image/avif
// - image/webp
// - image/svg+xml
MimeType ImageMimeType
// Optional name for an image (used for sizing).
Name string
// Determines if loading=lazy should be added to the image.
Loading LoadingAttribute
// The intrinsic width of the image in pixels , for example (300).
// Must be an integer without a unit (optional).
Width *int
// The intrinsic height of the image, in pixels, for example (300).
// Must be an integer without a unit (optional).
Height *int
// Attributes specifies additional attributes for the picture element as key-value pairs.
// For example: markup.Attributes{"id": "main-picture", "class": "responsive-picture"}
Attributes Attributes
}
ImageProps defines the fields for an individual image or source HTML element. The data type supports both <img> and <source> elements.
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
type ImageProvider ¶
type ImageProvider interface {
ImageMarkup() ImageProps
}
ImageProvider is a common - TODO
type ImageSize ¶
type ImageSize string
ImageSize specifies the size of the image, as defined in the static and dynamic renderers. With any luck, all sizes listed below will be rendered.
type LoadingAttribute ¶
type LoadingAttribute string
LoadingAttribute specifies the loading attribute for an image. Indicates how the browser should load the image:
const ( // LoadingEager loads the image immediately, regardless of whether or not the // image is currently within the visible viewport (this is the default value). LoadingEager LoadingAttribute = "eager" // LoadingLazy Defers loading the image until it reaches a calculated distance // from the viewport, as defined by the browser. The intent is to avoid the // network and storage bandwidth needed to handle the image until it's // reasonably certain that it will be needed. This generally improves // the performance of the content in most typical use cases. LoadingLazy LoadingAttribute = "lazy" )
type OpenGraph ¶
type OpenGraph struct {
// Basic Metadata - https://ogp.me/#metadata
Type string `json:"type"`
Title string `json:"title"`
URL string `json:"url"`
Image []OpengraphImage `json:"image"`
// Optional Metadata - https://ogp.me/#optional
Audio []OpengraphAudio `json:"audio,omitempty"`
Description string `json:"description,omitempty"`
Determiner string `json:"determiner,omitempty"`
Locale string `json:"locale,omitempty"`
LocaleAlt []string `json:"locale_alternate,omitempty"`
Video []OpengraphVideo `json:"video,omitempty"`
SiteName string `json:"site_name,omitempty"`
SeeAlso []string `json:"see_also,omitempty"`
FacebookAccount string `json:"fb:app_id,omitempty"`
}
OpenGraph represents web page information according to OGP.
See https://ogp.me/ for more details.
type OpenGraphArticle ¶
type OpenGraphArticle struct {
PublishedTime time.Time `json:"published_time,omitempty"`
ModifiedTime time.Time `json:"modified_time,omitempty"`
Author string `json:"author,omitempty"` // Full name author
Section string `json:"section,omitempty"` // Usually the URL, i.e. Blog or Insights
Tags []string `json:"tags,omitempty"` // Associated tags with the article.
}
OpenGraphArticle represents a structure of "article" type. See https://ogp.me/#type_article for more details.
- article:published_time
- article:modified_time
- article:author
- article:section
- article:tag
type OpengraphAudio ¶
type OpengraphAudio struct {
URL string `json:"url,omitempty"`
SecureURL string `json:"secure_url,omitempty"`
ContentType string `json:"type,omitempty"`
}
OpengraphAudio represents a structure of "og:audio". "og:audio" might have the following properties:
- og:audio:url
- og:audio:secure_url
- og:audio:type
type OpengraphImage ¶
type OpengraphImage struct {
URL string `json:"url,omitempty"`
SecureURL string `json:"secure_url,omitempty"`
ContentType string `json:"type,omitempty"`
Width int `json:"width,omitempty"`
Height int `json:"height,omitempty"`
Alt string `json:"alt,omitempty"`
}
OpengraphImage represents a structure of "og:image". "og:image" might have following properties:
- og:image:url
- og:image:secure_url
- og:image:type
- og:image:width
- og:image:height
- og:image:alt
type OpengraphVideo ¶
type OpengraphVideo struct {
URL string `json:"url,omitempty"`
SecureURL string `json:"secure_url,omitempty"`
ContentType string `json:"type,omitempty"`
Width int `json:"width,omitempty"`
Height int `json:"height,omitempty"`
Duration int `json:"duration,omitempty"` // Duration in seconds
}
OpengraphVideo represents a structure of "og:video". "og:video" might have following properties:
- og:video:url
- og:video:secure_url
- og:video:type
- og:video:width
- og:video:height
type PictureOptions ¶
type PictureOptions func(p *PictureProps)
PictureOptions allows for optional settings to be applied to a <picture>.
func PictureWithAlt ¶
func PictureWithAlt(alt string) PictureOptions
PictureWithAlt attaches alternative text to the picture.
func PictureWithAttribute ¶
func PictureWithAttribute(key, value string) PictureOptions
PictureWithAttribute attaches a custom attribute to the image that will be rendered in the HTML, for example data-id="main-image".
func PictureWithClasses ¶
func PictureWithClasses(classes ...string) PictureOptions
PictureWithClasses appends any CSS classes to the picture.
func PictureWithEagerLoading ¶
func PictureWithEagerLoading() PictureOptions
PictureWithEagerLoading sets loading=eager to the picture.
func PictureWithHiddenMediaSources ¶
func PictureWithHiddenMediaSources() PictureOptions
PictureWithHiddenMediaSources modifies the picture so sizes where sources with size attributes are hidden.
func PictureWithLazyLoading ¶
func PictureWithLazyLoading() PictureOptions
PictureWithLazyLoading sets loading=lazy to the picture.
func PictureWithSize ¶
func PictureWithSize(sizes ...string) PictureOptions
PictureWithSize filters the sources to only include those that contain any of the specified size strings in their name.
When multiple sizes are provided: - The last matching size will be used as the base source for URL, Width, and Height. - Only the last size applies filtering (excluding exact matches). - Earlier sizes include all matching sources.
type PictureProps ¶
type PictureProps struct {
// The URL of the image, which will map to the src attribute.
// For example: "/images/dog.jpg"
URL string
// Defines text that can replace the image in the page.
Alt string
// Maps to <source> elements within the <picture> element.
// The browser will consider each child <source> element and choose the best match among them.
Sources []ImageProps
// List of class names to apply to the <picture> element.
Classes []string
// A unique identifier for the <picture> element.
ID string
// Determines if loading=lazy should be added to the image.
Loading LoadingAttribute
// The intrinsic width of the image in pixels , for example (300).
// Must be an integer without a unit (optional).
Width *int
// The intrinsic height of the image, in pixels, for example (300).
// Must be an integer without a unit (optional).
Height *int
// HideMediaSourcesWithSizeAttrs indicates if only next-gen image formats (AVIF & WebP)
// should be used. When true, this will hide any <source> elements with size attributes,
// effectively excluding them from the rendering process.
HideMediaSizes bool
// Attributes specifies additional attributes for the picture element as key-value pairs.
// For example: markup.Attributes{"data-attribute-size": "large"}
Attributes Attributes
}
PictureProps defines the fields for to render a <picture> element onto the DOM.
The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.
See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
func Picture ¶
func Picture(provider PictureProvider, opts ...PictureOptions) PictureProps
Picture returns picture properties and transforms the options, so it can be rendered to the DOM.
func (PictureProps) Image ¶
func (p PictureProps) Image() ImageProps
Image transforms the PictureProps into an ImageProps type.
This is useful when you want to render a single image element, instead of the entire picture.
type PictureProvider ¶
type PictureProvider interface {
PictureMarkup() PictureProps
}
PictureProvider is a common interface that's used for implementing a standardised way of writing a <picture> element to the DOM.
Any type can implement this and pass it to the Picture() func.
type TwitterCard ¶
type TwitterCard struct {
// Required properties
Site string `json:"twitter:site,omitempty"` // The Twitter @username the card should be attributed to.
Creator string `json:"twitter:creator,omitempty"` // The Twitter @username of the content creator.
Title string `json:"twitter:title"` // A concise title for the related content.
Description string `json:"twitter:description,omitempty"` // A description that concisely summarizes the content.
Image string `json:"twitter:image,omitempty"` // A URL to a unique image representing the content of the page.
// Optional properties
ImageAlt string `json:"twitter:image:alt,omitempty"` // A text description of the image conveying the essential nature of an image to users who are visually impaired.
}
TwitterCard represents web page information according to Twitter Card specifications. See https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started for more details.