Skip to content

Commit

Permalink
Reformat sample source files (#15)
Browse files Browse the repository at this point in the history 
- Add oXygen project w/ formatting conventions
- Add Prettier ignore file

Signed-off-by: Roger Sheen <roger@infotexture.net>
  • Loading branch information
@infotexture
infotexture committed Dec 28, 2021
1 parent ea02e9d commit c347f0c
Show file tree
Hide file tree
Showing 20 changed files with 10,217 additions and 826 deletions.
5 changes: 1 addition & 4 deletions .github/dita-ot/footer.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,7 @@
<p class="p-3">
<small>
© 2021
<a
class="text-dark"
href="https://infotexture.net/"
>infotexture</a>
<a class="text-dark" href="https://infotexture.net/">infotexture</a>
</small>
</p>
</div>
Expand Down
4 changes: 4 additions & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# This file specifies files that Prettier should not format

backups
out
9,653 changes: 9,642 additions & 11 deletions css/custom.css
View file

Large diffs are not rendered by default.

92 changes: 35 additions & 57 deletions sample/accordion.dita
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,14 @@
components correctly using outputclass. -->
<topic id="accordion">
<title>Accordion</title>
<shortdesc>
Build vertically collapsing accordions in combination with Bootstrap’s Collapse
JavaScript plugin.
</shortdesc>
<shortdesc>Build vertically collapsing accordions in combination with Bootstrap’s Collapse JavaScript
plugin.</shortdesc>
<prolog>
<metadata>
<keywords>
<indexterm>Accordion</indexterm>
<indexterm>CSS
<indexterm><xmlatt>outputclass</xmlatt></indexterm>
<indexterm><xmlatt>outputclass</xmlatt></indexterm>
</indexterm>
<indexterm><xmlelement>bodydiv</xmlelement></indexterm>
</keywords>
Expand All @@ -25,52 +23,40 @@
<body outputclass="language-markup">
<section>
<title>How it works</title>
<p>
The accordion uses <xref
scope="external"
href="https://getbootstrap.com/docs/5.0/components/collapse/"
>collapse</xref>
internally to make it collapsible. To render an accordion that’s expanded, add
the class <codeph>open</codeph> in addition to <codeph>accordion</codeph> to the <xmlatt>outputclass</xmlatt>.
</p>
<p>The accordion uses
<xref scope="external" href="https://getbootstrap.com/docs/5.0/components/collapse/">collapse</xref> internally
to make it collapsible. To render an accordion that’s expanded, add the class <codeph>open</codeph> in addition
to <codeph>accordion</codeph> to the <xmlatt>outputclass</xmlatt>.</p>
</section>
<section>
<title>Example</title>
<p>
Click the accordions below to expand/collapse the accordion content.
</p>
<p>Click the accordions below to expand/collapse the accordion content.</p>
</section>
<bodydiv outputclass="bd-example" deliveryTarget="html">
<bodydiv outputclass="accordion">
<section id="accordion1">
<title>Accordion Item #1</title>
<p>
<b>This is the first item’s accordion body.</b> It is hidden by default, until
the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with custom CSS or
overriding Bootstrap’s default variables.
</p>
<b>This is the first item’s accordion body.</b> It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes control the overall appearance, as well
as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding
Bootstrap’s default variables.</p>
</section>
<section id="accordion2">
<title>Accordion Item #2</title>
<p>
<b>This is the second item’s accordion body.</b> It is hidden by default, until
the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with custom CSS or
overriding Bootstrap’s default variables.
</p>
<b>This is the second item’s accordion body.</b> It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes control the overall appearance, as well
as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding
Bootstrap’s default variables.</p>
</section>
<section id="accordion3">
<title>Accordion Item #3</title>
<p>
<b>This is the third item’s accordion body.</b> It is hidden by default, until
the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with custom CSS or
overriding Bootstrap’s default variables.
</p>
<b>This is the third item’s accordion body.</b> It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes control the overall appearance, as well
as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding
Bootstrap’s default variables.</p>
</section>
</bodydiv>
</bodydiv>
Expand All @@ -96,43 +82,35 @@
&lt;/bodydiv&gt;</codeblock>
<section>
<title>Flush</title>
<p>
Add the class <codeph>accordion-flush</codeph> to <xmlatt>outputclass</xmlatt> to remove the default
background-color, some borders, and some rounded corners to render accordions
edge-to-edge with their parent container.
</p>
<p>Add the class <codeph>accordion-flush</codeph> to <xmlatt>outputclass</xmlatt> to remove the default
background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent
container.</p>
</section>
<bodydiv outputclass="bd-example" deliveryTarget="html">
<bodydiv outputclass="accordion-flush">
<section id="accordion4">
<title>Accordion Item #1</title>
<p>
<b>This is the first item’s accordion body.</b> It is hidden by default, until
the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with custom CSS or
overriding Bootstrap’s default variables.
</p>
<b>This is the first item’s accordion body.</b> It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes control the overall appearance, as well
as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding
Bootstrap’s default variables.</p>
</section>
<section id="accordion5">
<title>Accordion Item #2</title>
<p>
<b>This is the second item’s accordion body.</b> It is hidden by default, until
the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with custom CSS or
overriding Bootstrap’s default variables.
</p>
<b>This is the second item’s accordion body.</b> It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes control the overall appearance, as well
as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding
Bootstrap’s default variables.</p>
</section>
<section id="accordion6">
<title>Accordion Item #3</title>
<p>
<b>This is the third item’s accordion body.</b> It is hidden by default, until
the collapse plugin adds the appropriate classes that we use to style each
element. These classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with custom CSS or
overriding Bootstrap’s default variables.
</p>
<b>This is the third item’s accordion body.</b> It is hidden by default, until the collapse plugin adds the
appropriate classes that we use to style each element. These classes control the overall appearance, as well
as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding
Bootstrap’s default variables.</p>
</section>
</bodydiv>
</bodydiv>
Expand Down
135 changes: 37 additions & 98 deletions sample/alerts.dita
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,14 @@
components correctly using outputclass. -->
<topic id="alerts">
<title>Alerts</title>
<shortdesc>
Provide contextual feedback messages for typical user actions with the handful
of available and flexible alert messages.
</shortdesc>
<shortdesc>Provide contextual feedback messages for typical user actions with the handful of available and flexible
alert messages.</shortdesc>
<prolog>
<metadata>
<keywords>
<indexterm>Alerts</indexterm>
<indexterm>CSS
<indexterm><xmlatt>outputclass</xmlatt></indexterm>
<indexterm><xmlatt>outputclass</xmlatt></indexterm>
</indexterm>
<indexterm><xmlelement>note</xmlelement></indexterm>
<indexterm><xmlelement>section</xmlelement></indexterm>
Expand All @@ -26,37 +24,19 @@
<body outputclass="language-markup">
<section>
<title>Example</title>
<p>
Alerts are available for any length of text, as well as an optional close
button. For proper styling, use one of the eight required contextual classes
(e.g., set <xmlatt>outputclass</xmlatt> to <codeph>alert-success</codeph>).
</p>
<p>Alerts are available for any length of text, as well as an optional close button. For proper styling, use one
of the eight required contextual classes (e.g., set <xmlatt>outputclass</xmlatt> to
<codeph>alert-success</codeph>).</p>
</section>
<bodydiv outputclass="bd-example" deliveryTarget="html">
<section outputclass="alert-primary">
A simple primary alert—check it out!
</section>
<section outputclass="alert-secondary">
A simple secondary alert—check it out!
</section>
<section outputclass="alert-success">
A simple success alert—check it out!
</section>
<section outputclass="alert-danger">
A simple danger alert—check it out!
</section>
<section outputclass="alert-warning">
A simple warning alert—check it out!
</section>
<section outputclass="alert-info">
A simple info alert—check it out!
</section>
<section outputclass="alert-light">
A simple light alert—check it out!
</section>
<section outputclass="alert-dark">
A simple dark alert—check it out!
</section>
<section outputclass="alert-primary">A simple primary alert—check it out! </section>
<section outputclass="alert-secondary">A simple secondary alert—check it out! </section>
<section outputclass="alert-success">A simple success alert—check it out! </section>
<section outputclass="alert-danger">A simple danger alert—check it out! </section>
<section outputclass="alert-warning">A simple warning alert—check it out! </section>
<section outputclass="alert-info">A simple info alert—check it out! </section>
<section outputclass="alert-light">A simple light alert—check it out! </section>
<section outputclass="alert-dark">A simple dark alert—check it out! </section>
</bodydiv>
<codeblock>&lt;section outputclass="alert-primary"&gt;
A simple primary alert—check it out!
Expand Down Expand Up @@ -84,22 +64,15 @@
&lt;/section&gt;</codeblock>
<section>
<title>Additional content</title>
<p>
Alerts can also contain additional HTML elements like headings, paragraphs, icons and
links.
</p>
<p>Alerts can also contain additional HTML elements like headings, paragraphs, icons and links.</p>
</section>
<bodydiv outputclass="bd-example" deliveryTarget="html">
<section outputclass="alert-success">
<title><i outputclass="bi bi-emoji-smile pe-2"/>Well done!</title>
<p>
Aww yeah, you successfully read this important alert message. This example text
with a <xref href="#">link</xref> is going to run a bit longer so that you can
see how spacing within an alert works with this kind of content.
</p>
<p>
Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
</p>
<p>Aww yeah, you successfully read this important alert message. This example text with a
<xref href="#">link</xref> is going to run a bit longer so that you can see how spacing within an alert works
with this kind of content.</p>
<p>Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</section>
</bodydiv>
<codeblock>&lt;section outputclass="alert-success"&gt;
Expand All @@ -115,45 +88,21 @@
&lt;/section&gt;</codeblock>
<section>
<title>Notes</title>
<p>
DITA <xmlelement>note</xmlelement> elements are displayed as alerts according
to the <xmlatt>type</xmlatt> attribute
</p>
<p>DITA <xmlelement>note</xmlelement> elements are displayed as alerts according to the <xmlatt>type</xmlatt>
attribute</p>
</section>
<div outputclass="bd-example" deliveryTarget="html">
<note type="note">
This is just a note.
</note>
<note type="notice">
Notice this piece of information.
</note>
<note type="fastpath">
This note will speed you on your way.
</note>
<note type="remember">
Don't forget to do what this note says.
</note>
<note type="tip">
This is a fine little tip.
</note>
<note type="attention">
Please pay extra attention to this note.
</note>
<note type="caution">
Care is required when proceeding.
</note>
<note type="important">
This note is important.
</note>
<note type="restriction">
You can't do what this note says.
</note>
<note type="danger">
You may hurt yourself!
</note>
<note type="other">
This is something other than a normal note.
</note>
<note type="note">This is just a note.</note>
<note type="notice">Notice this piece of information.</note>
<note type="fastpath">This note will speed you on your way.</note>
<note type="remember">Don't forget to do what this note says.</note>
<note type="tip">This is a fine little tip.</note>
<note type="attention">Please pay extra attention to this note.</note>
<note type="caution">Care is required when proceeding.</note>
<note type="important">This note is important.</note>
<note type="restriction">You can't do what this note says.</note>
<note type="danger">You may hurt yourself! </note>
<note type="other">This is something other than a normal note.</note>
</div>
<codeblock>&lt;note type="note"&gt;This is just a note.&lt;/note&gt;
&lt;note type="notice"&gt;Notice this piece of information.&lt;/note&gt;
Expand All @@ -166,22 +115,12 @@
&lt;note type="restriction"&gt;You can't do what this note says.&lt;/note&gt;
&lt;note type="danger"&gt;You may hurt yourself!&lt;/note&gt;
&lt;note type="other"&gt;This is something other than a normal note.&lt;/note&gt;</codeblock>
<p>
The <xmlatt>type</xmlatt> can be overridden by using an <xmlatt>outputclass</xmlatt>
</p>
<p>The <xmlatt>type</xmlatt> can be overridden by using an <xmlatt>outputclass</xmlatt></p>
<div outputclass="bd-example" deliveryTarget="html">
<note outputclass="alert-primary">
This is a primary note.
</note>
<note outputclass="alert-secondary">
This is a secondary note.
</note>
<note outputclass="alert-light">
This is light note.
</note>
<note outputclass="alert-dark">
This is dark note.
</note>
<note outputclass="alert-primary">This is a primary note.</note>
<note outputclass="alert-secondary">This is a secondary note.</note>
<note outputclass="alert-light">This is light note.</note>
<note outputclass="alert-dark">This is dark note.</note>
</div>
<codeblock>&lt;note outputclass="alert-primary"&gt;This is a primary note.&lt;/note&gt;
&lt;note outputclass="alert-secondary"&gt;This is a secondary note.&lt;/note&gt;
Expand Down
Loading

0 comments on commit c347f0c

Please sign in to comment.