`Anchor` Component

Anchor component is the HTML hyperlinks for directing user to from the current webpage to another. This component is the currency for seach engine optimization to have inference control. Bissetii styles this component seemlessly.

This component is available starting from v1.11.0.

Hugo

Bissetii supports Hugo interfaces to make content creation easier depending on Bissetii version.

Shortcodes

Bissetii prepared a list of shortcodes to make website creation a lot easier. Here are some of the available shortcodes related to Anchor component.

`link` Shortcode

By default, Hugo is not able to process irregular BaseURL such as https://zoralab.gitlab.io/bissetii. In fact, it only recognizes https://zoralab.gitlab.io its base URL. This is not feasible for websites hosted on Git version control platforms such as Github Pages and GitLab Pages as project-level pages. Therefore, the need for an independent link shortcode is required.

Also, when using link shortcode in multiple outputs with non-base relative URL (e.g. some/path), it will process and point the link towards its designated output (e.g. AMP will have index.amp.html in the end if no file is specified).

Version `v1.13.0` and Above

NON-BACKWARD COMPATIBILITY NOTICE

Starting from version v1.13.0, this shortcode uses many Hugo’s urls.Parse function, which in turns using Go’s net/url Package to process all the URLs. The reason is to ensure this shortcode is RFC3986 compliant.

While the parameters are not affected, the data for them are. Please ensure your full documentations migrations before commiting!

Another notable security changes is that one will no longer be able to supply user info embedded URL such as: https://username:password@www.example.com. Doing so will raise as fatal error instead.

The reason is to ban embedded URL in this shortcode mainly because Hugo is a static site generator and is not a web application. Hence, there is no reason for anyone to hard-code sensitive information like password into your web artifact.

The same link shortcode has 2 formats shown as follow:

Full Hyperlink With Wrapper:

{{< link "[URL]" "[LANG]"
	"[REL]"
	"[TARGET]"
	"[CLASS]"
	"[ID]"
	"[DONWLOAD]"
	"[HREFLANG]" >}}
[CONTENT]
{{< /link >}}

For Processing URL Only:

{{< link "[URL]" "[LANG]" "url-only" />}}

URL - COMPULSORY. You must supply a URL to the shortcode. The URL can be absolute or relative URL. The shortcode will always construct the URL to absolute URL.
LANG - COMPULSORY. The language code used when the shortcode re-construct relative URL into absolute URL. You can also point the same content URL from a foreign language into current page. A special value called this will set it to the current language page.
REL - Optional. The hyperlink relationship used for SEO purpose. The value can be nofollow. Special value url-only is available for obtaining only the re-constructed absolute URL from the shortcode instead. When url-only is used, all the following arguments shall be ignored.
TARGET - Optional. The link target action. The value can be _blank to open the hyperlink in a new window.
CLASS - Optional. The CSS class tag for the hyperlink.
ID - Optional. The HTML ID attribute for the hyperlink.
DOWNLOAD - Optional. Add download HTML attribute to the hyperlink. Provider download as value will enable it.
HERFLANG - Optional. Overwrites the herflang= HTML attribute for the hyperlink.
CONTENT - Optional. The visible link content. Can be both Markdown and HTML.

Example usage:

Full Hyperlink With Wrapper (shortcode within shortcode is allowed):


{{% link "/license/bissetii-license.pdf" "zh-hans" "canonical" "nofollow" "css-class" "my-id" "download" %}}
{{% image "Demo Image"
	"/img/thumbnails/default-1200x1200.png"
	"2500"
	"1250"
	"false"
	"lazy"
	""
	"responsive"
	"dark-color" %}}
{{% /link %}}

		⥥

<a href="https://bissetii.zoralab.com/zh-hans/license/bissetii-license.pdf" id="my-id" class="css-class" rel="canonical" hreflang="zh-hans" target="nofollow" download>
	


<img alt="Demo Image"
	src="https://bissetii.zoralab.com/img/thumbnails/default-1200x1200.png"
	class="dark-color"
	loading="lazy"/>

</a>

Unused Arguments (provide empty string to optional argument for positioning):

{{% link "/license/bissetii-license.pdf" "" "" "" "" "" "download" %}}
	<pre><code>Text Here</code></p>
{{% /link %}}

		⥥

<a href="https://bissetii.zoralab.com/license/bissetii-license.pdf" download>
	<pre><code>Text Here
</code></pre>
</a>

For Processing URL:

# relative URL to BaseURL against `zh-hans` langauge
{{< link "/img/" "zh-hans" "url-only" />}}
		⥥
https://bissetii.zoralab.com/zh-hans/img/index.amp.html

# relative URL to current URL against `zh-hans` language
{{< link "img/" "zh-hans" "url-only" />}}
		⥥
https://bissetii.zoralab.com/zh-hans/components/anchor/img/index.amp.html

# relative URL to BaseURL against current langauge
{{< link "/img/" "this" "url-only" />}}
		⥥
https://bissetii.zoralab.com/en/img/index.amp.html

# relative URL to BaseURL
{{< link "/img/" "" "url-only" />}}
		⥥
https://bissetii.zoralab.com/img/index.amp.html

Version `v1.12.5` and Below

The older version is primitive compared to v1.13.0. Also, it is not RFC3986 compliant. The link shortcode has multiple formats as follow:

Full Hyperlink With Wrapper:

{{< link "[URL]" "[LANG]" "[REL]" >}}
[CONTENT]
{{< link "close" >}}

For Processing URL Only:

{{< link "[URL]" "[LANG]" "url-only" >}}

URL - COMPULSORY. You must supply a URL to the shortcode. The URL can be absolute or relative URL. The shortcode will always construct the URL to absolute URL. If special value close is provided, it will generate the closing hyperlink HTML tag (</a>).
LANG - COMPULSORY. The language code used when the shortcode re-construct relative URL into absolute URL. You can also point the same content URL from a foreign language into current page. A special value called this will set it to the current language page.
REL - Optional. The hyperlink relationship used for SEO purpose. The value can be nofollow. Special value url-only is available for obtaining only the re-constructed absolute URL from the shortcode instead. When url-only is used, all the following arguments shall be ignored.

Go

Coming Soon.

HTML

Bissetii first deisgned its HTML part using HTML5 and then later support AMPHTML. For this component, it offers both link (<link>) and anchor hyperlink (<a>).

Link (`<link>`)

Bissetii supports all link HTML tag seamlessly. Some basic example can be:

<link rel="canonical" href="https://www.example.com/">

<link rel="apple-touch-icon" sizes="60x60" href="https:// ... /apple-60x60.png">

<link rel="manifest" href="https:// ... /manifest.json">

<link href="https:// ... /bissetii-desktop.min.css"
	rel="stylesheet"
	media="screen and (min-width: 80rem)"
	onload="this.media=&quot;screen and (min-width: 80rem)&quot;"
	integrity="sha512-aQrWSv77nTWlWqKj/pOotQA7/TBIO+pT0xzN0x5ZvwT2d+JYJn1ZcfmKkdMWOKOg9CGwkSW4565Ad+v4WzkLMw=="
	crossorigin="anonymous">

Anchor Hyperlink (`<a>`)

Bissetii supports all native anchor hyperlink seamlessly. All the following shall be rendered accordingly as such:

HTML	Render As
`<a href="#">Basic Link</a>`	Basic Link
`<b><a href="#">Bolded Link</a></b>`	Bolded Link
`<i><a href="#">Italic Link</a></i>`	Italic Link
`<u><a href="#">Underline Link</a></u>`	Underline Link
`<u><a style="--anchor-border-bottom: none;" href="#">Underline Link</a></u>`	Underline Link
`<a class="wrap" href="#">Clean Link</a>`	Clean Link
`<a style="--anchor-border-bottom: none;" href="#">Clean Link</a>`	Clean Link

CSS

This section covers all the CSS part for Anchor component. Please go through each sub-section carefully as they affects Bissetii styling directly.

`--anchor-color`

Affects the anchor link’s color. The value msut be compliant to color: CSS field. Default is var(--color-primary-700).

`--anchor-focus-color`

Affects the anchor link’s color when it is being focused. The value must be compliant to color: CSS field. Default is var(--color-primary-500).

`--anchor-hover-color`

Affects the anchor link’s color when it is being hovered by cursor. The value must be compliant to color: CSS field. Default is var(--color-primary-500).

`--anchor-border-bottom`

Affects the anchor link’s border bottom. The value must be compliant to border-bottom: CSS field. Default is 2px solid var(--color-primary-500).

`--anchor-text-decoration`

Affects the anchor link’s font styling decoration. The value must be compliant to text-decoration: CSS field. Default is none.

`--anchor-overflow-wrap`

Affects the anchor link’s overflow wrapping behavior. The value must be compliant to overflow-wrap: CSS field. DEfault is: break-word.

`--anchor-word-break`

Affects the anchor link’s word breaking behavior. The value must be compliant to word-break CSS field. Default is: break-word.

`--anchor-print-content`

Affects the anchor link’s print formatting behavior. The value must be complaint to content: CSS field. Default is: " (" attr(href) ")".

Javascript

This component does not depend on any Javascript.

Sass

Depending on release version, the Sass files work differently. Bissetii does not package Sass codes explictly so please view them via the git repository.

`v1.13.0` and above

Bissetii uses Dart Sass to compile the styling Sass codes into CSS file. This component’s Sass codes is available at the following location:

pkg/components/internal/anchor

`v1.12.5` and before

The Sass scripts responsible for styling link are located at:

assets/css/bissetii/modules/core/_Link.scss
assets/css/bissetii/modules/core/_Button.scss

_Link.scss is reponsible for basic link styling like the primary colored underline.

_Button.scss is responsible for styling link into a button-like object instead of the conventional link. See Button Component .

Epilogue

That is all about Anchor “link” component in Bissetii. If you need more feature or encountered a bug. Please feel free to contact us by filling an issue ticket at our Issue Section. We will be glad to help you.

Anchor Component

Hugo

Shortcodes

link Shortcode

Version v1.13.0 and Above

Version v1.12.5 and Below

Go

HTML

Link (<link>)

Anchor Hyperlink (<a>)

CSS

--anchor-color

--anchor-focus-color

--anchor-hover-color

--anchor-border-bottom

--anchor-text-decoration

--anchor-overflow-wrap

--anchor-word-break

--anchor-print-content