--- author: Mark Dumay title: Components date: 2023-09-23 description: Use shortcodes to add predefined components powered by external libraries. tags: ["bootstrap", "shortcode"] thumbnail: url: img/puzzle.jpg author: Ryoji Iwata authorURL: https://unsplash.com/@ryoji__iwata origin: Unsplash originURL: https://unsplash.com/photos/5siQcvSxCP8 modules: ["leaflet", "lottie", "mermaid", "simple-datatables"] --- Hinode provides several shortcodes on top of the common [Bootstrap elements]({{% relref "bootstrap-elements" %}}). Refer to the [official documentation]({{% param "links.hinode_docs" %}}) for more details. ## Animation As an example, the following shortcode shows an animation that plays on hover. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Data tables As an example, the following shortcode displays a responsive table that uses advanced controls. {{< example lang="markdown" >}} {{}} | # | Heading | |-----|---------| | 1. | Item 1 | | 2. | Item 2 | | 3. | Item 3 | | 4. | Item 4 | | 5. | Item 5 | | 6. | Item 6 | | 7. | Item 7 | | 8. | Item 8 | | 9. | Item 9 | | 10. | Item 10 | | 11. | Item 11 | | 12. | Item 12 | | 13. | Item 13 | | 14. | Item 14 | | 15. | Item 15 | | 16. | Item 16 | | 17. | Item 17 | | 18. | Item 18 | | 19. | Item 19 | | 20. | Item 20 | | 21. | Item 21 | | 22. | Item 22 | | 23. | Item 23 | | 24. | Item 24 | | 25. | Item 25 | | 26. | Item 26 | | 27. | Item 27 | | 28. | Item 28 | | 29. | Item 29 | | 30. | Item 30 | {{}} {{< /example >}} ## Formula (KaTeX) As an example, the following markdown renders two formulas using server-side math rendering using KaTeX. {{< example lang="markdown" >}} This is an inline $-b \pm \sqrt{b^2 - 4ac} \over 2a$ formula This is not an inline formula: $$x = a_0 + \frac{1}{a_1 + \frac{1}{a_2 + \frac{1}{a_3 + a_4}}}$$ $$\forall x \in X, \quad \exists y \leq \epsilon$$ {{< /example >}} ## Map As an example, the following shortcode displays an interactive map of the city of Amsterdam. {{< example lang="hugo" >}} {{}} {{< /example >}} ## Mermaid Diagrams ### Flowchart ```mermaid flowchart TD A[Start] --> B{Is it?} B -->|Yes| C[OK] C --> D[Rethink] D --> B B ---->|No| E[End] ``` ### Sequence Diagram ```mermaid sequenceDiagram participant web as Web Browser participant blog as Blog Service participant account as Account Service participant mail as Mail Service participant db as Storage Note over web,db: The user must be logged in to submit blog posts web->>+account: Logs in using credentials account->>db: Query stored accounts db->>account: Respond with query result alt Credentials not found account->>web: Invalid credentials else Credentials found account->>-web: Successfully logged in Note over web,db: When the user is authenticated, they can now submit new posts web->>+blog: Submit new post blog->>db: Store post data par Notifications blog--)mail: Send mail to blog subscribers blog--)db: Store in-site notifications and Response blog-->>-web: Successfully posted end end ``` ### Class Diagram ```mermaid classDiagram direction RL class Student { -idCard : IdCard } class IdCard{ -id : int -name : string } class Bike{ -id : int -name : string } Student "1" --o "1" IdCard : carries Student "1" --o "1" Bike : rides ``` ### State Diagram ```mermaid stateDiagram-v2 State1: The state with a note note right of State1 Important information! You can write notes. end note State1 --> State2 note left of State2 : This is the note to the left. ``` ### Entity Relationship Diagram ```mermaid erDiagram CUSTOMER ||--o{ ORDER : places CUSTOMER { string name string custNumber string sector } ORDER ||--|{ LINE-ITEM : contains ORDER { int orderNumber string deliveryAddress } LINE-ITEM { string productCode int quantity float pricePerUnit } ``` ### Gantt Diagram ```mermaid gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid excludes weekends %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week ("sunday") or "weekends", but not the word "weekdays".) section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :until isadded Functionality added :milestone, isadded, 2014-01-25, 0d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page :20h Add another diagram to demo page :48h ``` ### User Journey ```mermaid journey title My working day section Go to work Make tea: 5: Me Go upstairs: 3: Me Do work: 1: Me, Cat section Go home Go downstairs: 5: Me Sit down: 5: Me ``` ### Pie Chart ```mermaid %%{init: {"pie": {"textPosition": 0.5}, "themeVariables": {"pieOuterStrokeWidth": "5px"}} }%% pie showData title Key elements in Product X "Calcium" : 42.96 "Potassium" : 50.05 "Magnesium" : 10.01 "Iron" : 5 ``` ### Quadrant Chart ```mermaid quadrantChart title Reach and engagement of campaigns x-axis Low Reach --> High Reach y-axis Low Engagement --> High Engagement quadrant-1 We should expand quadrant-2 Need to promote quadrant-3 Re-evaluate quadrant-4 May be improved Campaign A: [0.3, 0.6] Campaign B: [0.45, 0.23] Campaign C: [0.57, 0.69] Campaign D: [0.78, 0.34] Campaign E: [0.40, 0.34] Campaign F: [0.35, 0.78] ``` ### Requirement Chart ```mermaid requirementDiagram requirement test_req { id: 1 text: the test text. risk: high verifymethod: test } functionalRequirement test_req2 { id: 1.1 text: the second test text. risk: low verifymethod: inspection } performanceRequirement test_req3 { id: 1.2 text: the third test text. risk: medium verifymethod: demonstration } interfaceRequirement test_req4 { id: 1.2.1 text: the fourth test text. risk: medium verifymethod: analysis } physicalRequirement test_req5 { id: 1.2.2 text: the fifth test text. risk: medium verifymethod: analysis } designConstraint test_req6 { id: 1.2.3 text: the sixth test text. risk: medium verifymethod: analysis } element test_entity { type: simulation } element test_entity2 { type: word doc docRef: reqs/test_entity } element test_entity3 { type: "test suite" docRef: github.com/all_the_tests } test_entity - satisfies -> test_req2 test_req - traces -> test_req2 test_req - contains -> test_req3 test_req3 - contains -> test_req4 test_req4 - derives -> test_req5 test_req5 - refines -> test_req6 test_entity3 - verifies -> test_req5 test_req <- copies - test_entity2 ``` ### Git Graph ```mermaid gitGraph commit commit id: "Normal" tag: "v1.0.0" commit commit id: "Reverse" type: REVERSE tag: "RC_1" commit commit id: "Highlight" type: HIGHLIGHT tag: "8.8.4" commit ``` ### C4 Diagram ```mermaid C4Context title System Context diagram for Internet Banking System Enterprise_Boundary(b0, "BankBoundary0") { Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.") Person(customerB, "Banking Customer B") Person_Ext(customerC, "Banking Customer C", "desc") Person(customerD, "Banking Customer D", "A customer of the bank,
with personal bank accounts.") System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.") Enterprise_Boundary(b1, "BankBoundary") { SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.") System_Boundary(b2, "BankBoundary2") { System(SystemA, "Banking System A") System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.") } System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.") SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.") Boundary(b3, "BankBoundary3", "boundary") { SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.") SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.") } } } BiRel(customerA, SystemAA, "Uses") BiRel(SystemAA, SystemE, "Uses") Rel(SystemAA, SystemC, "Sends e-mails", "SMTP") Rel(SystemC, customerA, "Sends e-mails to") UpdateElementStyle(customerA, $fontColor="red", $bgColor="grey", $borderColor="red") UpdateRelStyle(customerA, SystemAA, $textColor="blue", $lineColor="blue", $offsetX="5") UpdateRelStyle(SystemAA, SystemE, $textColor="blue", $lineColor="blue", $offsetY="-10") UpdateRelStyle(SystemAA, SystemC, $textColor="blue", $lineColor="blue", $offsetY="-40", $offsetX="-50") UpdateRelStyle(SystemC, customerA, $textColor="red", $lineColor="red", $offsetX="-50", $offsetY="20") UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="1") ``` ### Mindmap ```mermaid mindmap Root A[A] :::urgent large B(B) C ``` ### Timeline ```mermaid timeline title England's History Timeline section Stone Age 7600 BC : Britain's oldest known house was built in Orkney, Scotland 6000 BC : Sea levels rise and Britain becomes an island.
The people who live here are hunter-gatherers. section Bronze Age 2300 BC : People arrive from Europe and settle in Britain.
They bring farming and metalworking. : New styles of pottery and ways of burying the dead appear. 2200 BC : The last major building works are completed at Stonehenge.
People now bury their dead in stone circles. : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive. ``` ### XY Chart ```mermaid xychart-beta title "Sales Revenue" x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec] y-axis "Revenue (in $)" 4000 --> 11000 bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000] ``` ### Block Diagram ```mermaid block-beta columns 3 a:3 block:group1:2 columns 2 h i j k end g block:group2:3 %% columns auto (default) l m n o p q r end ```