DocOps.io AsciiDoctorJ Panels

1. What are they?

AsciiDoctorJ Panels are a way of creating a panel that is clickable. Now you can create a set of panels that links to various contents, an alternative way of building links.

2. How to use?

AsciiDoctorJ Panels are built using a block processor. SO you will need to create blocks to visualize them. For the most part, the body of the panel is built using a Kotlin DSL.

2.1. First Example

The first type of panels is just panels with a list of panel objects. See example below

1
2
3
4
5
6
panels {
    panel{
        link = "http://wwww.google.com"
        label = "Google Search"
    }
}

Given the above, we will build panels for Google, Apple, Microsoft,Amazon, Netflix

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
[panels,"buttons"]
----
panels {
    panel {
        link = "https://www.google.com"
        label = "Google"
    }
    panel {
        link = "https://www.apple.com"
        label = "Apple"
    }
    panel {
        link = "https://www.microsoft.com"
        label = "Microsoft"
    }
    panel {
        link = "https://www.amazon.com"
        label = "Amazon"
    }
    panel {
        link = "https://www.netflix.com"
        label = "Netflix"
    }
}
----

The syntax is pretty small to make a panel of buttons.

3. Round Buttons

Similar to the buttons we have a round object we can use.

[panels,buttons2]
----
panels{
    theme {
        colorMap{
            color("#ff6385")
            color("#36a3eb")
            color("#9966ff")
            color("#ffcf56")
            color("#4bc0c0")
            color("#FDCBF1")
        }
    }
    round {
        link = "https://www.google.com"
        label = "Google"
    }
    round {
        link = "https://www.apple.com"
        label = "Apple"
    }
    round {
        link = "https://www.microsoft.com"
        label = "Microsoft"
    }
    round {
        link = "https://www.amazon.com"
        label = "Amazon"
    }
    round {
        link = "https://www.netflix.com"
        label = "Netflix"
    }
}
----

4. Theming

Tip	New Attributes added, dropShadow & font

Table 1. Theme Guide
Item	Attribute	Value
layout	columns	optional, default: 3, max recommended 6
	groupBy	default Grouping.TITLE, others → .Grouping.TYPE, Grouping.AUTHOR, Grouping.DATE
	groupOrder	optional default Grouping.ASCENDING, others → Grouping.DESCENDING
		`theme { layout { columns = 4 groupBy = Grouping.TITLE groupOrder = GroupingOrder.ASCENDING } }`
colorMap	color	optional
		`colorMap{ color("#ff6385") color("#36a3eb") color("#9966ff") color("#ffcf56") color("#4bc0c0") color("#FDCBF1") }`
legendOn	legend	boolean, default true
newWin		boolean, default true
dropShadow		number 0..9, default 1
font		set of font to use `font = font { color = "#000000" font = "Arial, Helvetica, sans-serif" size = "9pt" decoration = "underline" }`

4.1. Themed Example

Same Panel as above but with sorting ascending and different colors.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
[panels,"round2"]
----
panels {
    theme {
        layout {
            columns = 4
            groupBy = Grouping.TITLE
            groupOrder = GroupingOrder.ASCENDING
        }
        font = font {
            color = "#ffffff"
        }
        dropShadow = 2
        colorMap{
            color("#ff6385")
            color("#36a3eb")
            color("#9966ff")
            color("#ffcf56")
            color("#4bc0c0")
            color("#FDCBF1")
        }
        newWin = false
    }
    panel {
        link = "https://www.google.com"
        label = "Google"
    }
    panel {
        link = "https://www.apple.com"
        label = "Apple"
    }
    panel {
        link = "https://www.microsoft.com"
        label = "Microsoft"
    }
    panel {
        link = "https://www.amazon.com"
        label = "Amazon"
    }
    panel {
        link = "https://www.netflix.com"
        label = "Netflix"
    }
}
----

5. Small Panels

More informational panels can be created with small cards

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
panels {
    theme {
        layout {
            columns=4
            groupOrder = GroupingOrder.ASCENDING
        }
        font = font {
            color = "#000000"
        }
        colorMap{
            color("#ebb3d1")
        }
        legendOn = false
    }
    slim {
        link = "https://www.google.com"
        label = "Google"
        type = "Advertising"
        description = "Google is is an American multinational technology company that specializes in Internet-related services and products "
        author("Sergey Brin")
        author("Larry Page")
        date ="07/30/1998"
    }
    slim {
        link = "https://www.apple.com"
        label = "Apple"
        type = "Personal Devices"
        description = "Apple Inc. is an American multinational technology company that specializes in consumer electronics, computer software and online services. "
        author("Steve Jobs")
        author("Steve Wozniak")
        date ="01/30/1977"
    }
    slim {
        link = "https://www.microsoft.com"
        label = "Microsoft"
        type = "Software"
        description = "Microsoft Corporation is an American multinational technology corporation which produces computer software, consumer electronics, personal computers, and related services."
        author("Bill Gates")
    }
    slim {
        link = "https://www.amazon.com"
        label = "Amazon"
        type = "Super Store"
        description = "Amazon.com, Inc. is an American multinational technology company which focuses on e-commerce, cloud computing, digital streaming, and artificial intelligence"
        author("Jeff Bezos")
    }
    slim {
        link = "https://www.netflix.com"
        label = "Netflix"
        type = "Movie Theater"
        description = "Netflix, Inc. is an American subscription streaming service and production company."
        author("Reed")
        author("Marc")
    }
    slim {
        link = "https://www.facebook.com"
        label = "Facebook"
        type = "Social Butterfly"
        description = "Facebook is an American online social media and social networking service owned by Meta Platforms."
        author("Mark Zukerberg")
    }
    slim {
        link = "https://www.instagram.com"
        label = "Instagram"
        type = "Beach"
        description = "Instagram is an American photo and video sharing social networking service. "
        author("Kevin")
        author("Mike")
    }
}

Table 2. Slim Cards Guide
Item	Attribute	Notes
slim	type	A way to categorize the card by in case you would like to group or sort by, see the Theme table for sorting and grouping
	description	used as the hover over information describing the card
	author	list of "author" to the link provided
	date	date to display content attributed to link

6. Large Panels

Alternative to Slim Panel is Large Panels where the description is now displayed on the card

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
[panels,"large"]
----
panels {
theme {
        layout {
            columns = 3
        }
        font {
            color = "#000000"
            bold = true
        }
        colorMap{
            color("#ff6385")
            color("#36a3eb")
            color("#9966ff")
            color("#ffcf56")
            color("#4bc0c0")
            color("#FDCBF1")
            color("#A6C1EE")
        }
    }
    large {
        link = "https://www.google.com"
        label = "Google"
        type = "Search"
        description = "Google is is an American multinational technology company that specializes in Internet-related services and products "
        date ="07/30/1998"
    }
    large {
        link = "https://www.apple.com"
        label = "Apple"
        type = "Personal Devices"
        description = "Apple Inc. is an American multinational technology company that specializes in consumer electronics, computer software and online services. "
        date ="01/30/1977"
    }
    large {
        link = "https://www.microsoft.com"
        label = "Microsoft"
        type = "Software"
        description = "Microsoft Corporation is an American multinational technology corporation which produces computer software, consumer electronics, personal computers, and related services."
    }
    large {
        link = "https://www.amazon.com"
        label = "Amazon"
        type = "Super Store"
        description = "Amazon.com, Inc. is an American multinational technology company which focuses on e-commerce, cloud computing, digital streaming, and artificial intelligence"
    }
    large {
        link = "https://www.netflix.com"
        label = "Netflix"
        type = "Movie Theater"
        description = "Netflix, Inc. is an American subscription streaming service and production company."
    }
    large {
        link = "https://www.facebook.com"
        label = "Facebook"
        type = "Social Butterfly"
        description = "Facebook is an American online social media and social networking service owned by Meta Platforms."
    }
    large {
        link = "https://www.instagram.com"
        label = "Instagram"
        type = "Beach"
        description = "Instagram is an American photo and video sharing social networking service founded by Kevin Systrom and Mike Krieger. "
    }
}
----

Table 3. Large Cards Guide
Item	Attribute	Notes
large	type	A way to categorize the card by in case you would like to group or sort by, see the Theme table for sorting and grouping
	description	more information on the content behind the link
	date	date to display content attributed to link

7. Generate Color Map Utility

A simple Utility to generate a pastel themed the colormap for your convenience.