From nobody Wed Sep 20 07:39:49 2023 X-Original-To: dev-commits-doc-all@mlmmj.nyi.freebsd.org Received: from mx1.freebsd.org (mx1.freebsd.org [IPv6:2610:1c1:1:606c::19:1]) by mlmmj.nyi.freebsd.org (Postfix) with ESMTP id 4Rr9R96LLfz4tFpX for ; Wed, 20 Sep 2023 07:39:49 +0000 (UTC) (envelope-from git@FreeBSD.org) Received: from mxrelay.nyi.freebsd.org (mxrelay.nyi.freebsd.org [IPv6:2610:1c1:1:606c::19:3]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (4096 bits) server-digest SHA256 client-signature RSA-PSS (4096 bits) client-digest SHA256) (Client CN "mxrelay.nyi.freebsd.org", Issuer "R3" (verified OK)) by mx1.freebsd.org (Postfix) with ESMTPS id 4Rr9R95p23z3cTv; Wed, 20 Sep 2023 07:39:49 +0000 (UTC) (envelope-from git@FreeBSD.org) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=freebsd.org; s=dkim; t=1695195589; h=from:from:reply-to:subject:subject:date:date:message-id:message-id: to:to:cc:mime-version:mime-version:content-type:content-type: content-transfer-encoding:content-transfer-encoding; bh=BHWOH0GCfpPLEBMdnWmZjOMa3FjkSFavTGwSt9APQ2E=; b=mCzOoHjOBqpsj3AginlOTo2c7xrdYU5vOxnKI1z1KHNylcDG0iWhf2JRpgUxVdCiSC3FMY u/npot/VbpzDNylHpmRvKXRyim1S5VfYSdt0oUvlxKJi0NZ57KG8KBoT4CzTF+I4S+5KXM 873Cfjc0jNMjWtuFc2fEho0nhhjeiDGjXWm1jIb6NaY3mrNY0+HLa5GTQM9jLHEOs0eos9 hu+mL+E1AWUrus7Z0LC6DTvYWUiYIeAhRPtfEUVvd9OaNOzhQebN6ItYyMsFyxCz9fjCGL JW881DlEeBC22hsVIRZo2xmaIs8loEnz+NGIL3cu8m0dktOmChL7YUd3yAB2jg== ARC-Seal: i=1; s=dkim; d=freebsd.org; t=1695195589; a=rsa-sha256; cv=none; b=m+jqd/u9xwCnSKMbOOip77S1JqqSsuQdUBFFzuCUFs7TJpEWV3lLVlDgVMd1fOhS+dZEvM zOCxXRNODpU7xXAa9FgPtAxvkh8xr/zZDtBrvtYOOllWUd3pCOSe2U21zWiHx0h0vHLz9Z Alg571wIzMEl0x0VsL2tjqSLKVcwBAm0ke5HsAgO244b/27lTWt7Wjy5Wy7UytbO2jI1NY DtXUd52ElRI5lAHTP7eE51iT74WWaDYl6xS/0+hUoliM/Bmd67Eh2hYUSb4E79iZpRjifa dc0waZZ4/NEf76tHWyY3p2CIJl3JdfSrHQzTJnY3Hd3Evs/B3OXYZoNBJ51pXQ== ARC-Authentication-Results: i=1; mx1.freebsd.org; none ARC-Message-Signature: i=1; a=rsa-sha256; c=relaxed/relaxed; d=freebsd.org; s=dkim; t=1695195589; h=from:from:reply-to:subject:subject:date:date:message-id:message-id: to:to:cc:mime-version:mime-version:content-type:content-type: content-transfer-encoding:content-transfer-encoding; bh=BHWOH0GCfpPLEBMdnWmZjOMa3FjkSFavTGwSt9APQ2E=; b=ajbY4cjrOCC71KvQpy1sz5hqVpkTV7oaBwO6UkJTQuz8451HYxSQApNoKBi5wKLkkIczqP mu4gXM9ECEQpal0QiNoG/QPUXDS2fUp+JIdu9Lm2f+rV7g1684kwyZFYKz/TjkiP7UsWaP L60h4x4k86kLNligUPijSre+pLc1+smEXGkoKncB6rAKIXEZiGEM1P03GWXTybpEiex9SV cxvUte9RBjKHpCme1AQuevxY0UvZ6lXjUsUk+bxHwaU8KpTkFcitKoeoEuf0BBMfQdXEDH RSTnBhivBSr8V7sJgHwNQTbNogjeXjq0rpfHh4KUMH5Z6G+/tBHS3/aonjAetg== Received: from gitrepo.freebsd.org (gitrepo.freebsd.org [IPv6:2610:1c1:1:6068::e6a:5]) (using TLSv1.3 with cipher TLS_AES_256_GCM_SHA384 (256/256 bits) key-exchange X25519 server-signature RSA-PSS (4096 bits) server-digest SHA256) (Client did not present a certificate) by mxrelay.nyi.freebsd.org (Postfix) with ESMTPS id 4Rr9R94rfKzn3F; Wed, 20 Sep 2023 07:39:49 +0000 (UTC) (envelope-from git@FreeBSD.org) Received: from gitrepo.freebsd.org ([127.0.1.44]) by gitrepo.freebsd.org (8.17.1/8.17.1) with ESMTP id 38K7dnpR003758; Wed, 20 Sep 2023 07:39:49 GMT (envelope-from git@gitrepo.freebsd.org) Received: (from git@localhost) by gitrepo.freebsd.org (8.17.1/8.17.1/Submit) id 38K7dn1T003755; Wed, 20 Sep 2023 07:39:49 GMT (envelope-from git) Date: Wed, 20 Sep 2023 07:39:49 GMT Message-Id: <202309200739.38K7dn1T003755@gitrepo.freebsd.org> To: doc-committers@FreeBSD.org, dev-commits-doc-all@FreeBSD.org From: Sergio Carlavilla Delgado Subject: git: 2cfe75b557 - main - FDP: Add subsection about images and icons List-Id: Commit messages for all branches of the doc repository List-Archive: https://lists.freebsd.org/archives/dev-commits-doc-all List-Help: List-Post: List-Subscribe: List-Unsubscribe: Sender: owner-dev-commits-doc-all@freebsd.org X-BeenThere: dev-commits-doc-all@freebsd.org MIME-Version: 1.0 Content-Type: text/plain; charset=utf-8 Content-Transfer-Encoding: 8bit X-Git-Committer: carlavilla X-Git-Repository: doc X-Git-Refname: refs/heads/main X-Git-Reftype: branch X-Git-Commit: 2cfe75b557140446dfdfd081d87f9a4ac6f2880b Auto-Submitted: auto-generated The branch main has been updated by carlavilla: URL: https://cgit.FreeBSD.org/doc/commit/?id=2cfe75b557140446dfdfd081d87f9a4ac6f2880b commit 2cfe75b557140446dfdfd081d87f9a4ac6f2880b Author: Sergio Carlavilla Delgado AuthorDate: 2023-09-20 07:38:41 +0000 Commit: Sergio Carlavilla Delgado CommitDate: 2023-09-20 07:38:41 +0000 FDP: Add subsection about images and icons PR: 261847 Reviewed by: bcr@ Differential Revision: https://reviews.freebsd.org/D41775 --- .../fdp-primer/asciidoctor-primer/_index.adoc | 83 ++++++++++++++++++++++ 1 file changed, 83 insertions(+) diff --git a/documentation/content/en/books/fdp-primer/asciidoctor-primer/_index.adoc b/documentation/content/en/books/fdp-primer/asciidoctor-primer/_index.adoc index 9638651e68..67420c7746 100644 --- a/documentation/content/en/books/fdp-primer/asciidoctor-primer/_index.adoc +++ b/documentation/content/en/books/fdp-primer/asciidoctor-primer/_index.adoc @@ -240,6 +240,89 @@ And this would be rendered as. + extref:{ipsec-must}[IPSec-Must article] +[[asciidoctor-images-icons]] +== Images and Icons + +Images and icons play a crucial role in enhancing the overall user experience. +These visual elements are strategically integrated to convey information, clarify concepts, and provide a visually engaging interface. + +[[asciidoctor-images]] +=== Images + +Images help illustrate complex concepts, making them more accessible to users. + +The first step will be to add the image in the images directory in the path: + +* [.filename]#~/website/static/images/# for the website. +* [.filename]#~/documentation/static/images/# for the documentation. + +For example, to add a new image to the FreeBSD installation process, the image will be saved to the path [.filename]#~/documentation/static/images/books/handbook/bsdinstall/new-image3.png#. + +The next step will be to configure the Asciidoctor attributes `images-path` and `imagesdir`. + +We are going to use as an example the header of the extref:{freebsd-releng}[FreeBSD Release Engineering] article. + +[source,asciidoc] +.... += FreeBSD Release Engineering +:doctype: article + +[...] + +:images-path: articles/freebsd-releng/ <1> + +ifdef::env-beastie[] +ifdef::backend-html5[] + +[...] + +:imagesdir: ../../../images/{images-path} <2> +endif::[] + +[...] + +.... + +<.> Makes reference to the path inside [.filename]#/static/images# folder. +<.> Makes reference to the Asciidoctor attribute. + +Once the image is in the correct path and the Asciidoctor attributes have been configured in the document, the `image` macro can be used. + +This is an example: + +.... +image::new-image3.png[New step in the FreeBSD install process] +.... + +[TIP] +==== +To improve accessibility, it is mandatory to add descriptive text to each image. +==== + +[[asciidoctor-icons]] +=== Icons + +Icons serve as intuitive symbols for quick recognition and navigation. + +The first step to use icons is to add the `icons` property to the Asciidoctor properties section, at the top of each document. + +.... +:icons: font +.... + +Once the Asciidoctor icon property has been set an icon supported by link:https://fontawesome.com/v4/icons/[Font Awesome] can be added. + +This is an example about how to use the `envelope` icon: + +.... +icon:envelope[link=mailto:test@example.com, title="contact"] +.... + +[TIP] +==== +To improve the accessibility of the website, the `title` attribute is mandatory. +==== + [[asciidoctor-conclusion]] == Conclusion