My Website Framework - Part 3: Text File Macros

The Framework creates content from several text files for: items (poems, stories, articles etc); collections of items; promotions of other content; and photographs.

There are two (content) files for items, the base file and then any additional author's notes. (In fact, there are many more possibilities if you implement richer pages, see my next article)

Collections use a single file - begining with a list of the items in the collection (terminated with '@@@') followed by a text description of the collection.

Promos can have a text file that firstly lists title and links, but then provides a full text description.

Photographs can have an associated text file that gives background information about the image.

All of this descriptive text (in any of these files) can be: simple plain text; HTML; or one or more of the 'macros' described here.

Examples

Lists

The macros for these lists are:

###ul-outline
An unordered outline list
you can see has bullets
is displayed inside a white box
which has a black border
###
###ol-outline
An ordered outline list
Has alpha enumerators
instead of bullets
in the same boxed style display
###
###ol-outline-numeric
A numeric outline ordered list
Has numeric enumerators
instead of apha enumerators
but with the same boxed style
###
###ul-inline
Inline lists
work just like outline lists
but do not have the boxed styling
They can be ordered or unordered (using enumerators or bullets)
and the enumerators can be alpha or numeric
###

You'll notice from the top of this article that lists can be embedded inside lists, like so:

We can nest other things, like images inside a list:

You can always nest one macro inside of another so that things like lists of lists, lists of images, lists in tables, tables of images etc… are all possible

Here's the macro for that last 2-level list with image:

###ul-outline
Outline outer list###ul-inline
Inline inner list 1
line 1.1
line 1.2
line1.3###
###img
,images/my-website-framework-3
alt text here image in a list
100######ul-inline
Inline inner list 2
line 2.1
line 2.2
line2.3
###
###

Images

Here's an image that floats left, with the following paragraphs flowing (on the right) with it.

Look at this long paragraph flowing round the image

An image grouped with some text. An image grouped with some text. An image grouped with some text. An image grouped with some text. An image grouped with some text. An image grouped with some text. An image grouped with some text. An image grouped with some text.

And another paragraph.And another paragraph.And another paragraph.And another paragraph.And another paragraph.And another paragraph.And another paragraph.

Here's what the macro for a left floating image looks like:

###img-left
,images/my-website-framework-3
alt text here image in a list
200
###

Tables

We can display tables. Which can contain other things like images and lists. If the table is too wide for the screen (often the case on mobile) then tapping a row pops-up the detail of that row (which might otherwise have been off-screen). Tables also have 'zebra styling' so alternate rows have slightly different background shading - to make it easier to read the table:

(click or tap any table row to enlarge)

Here's the macro for that table:

###table
col 1@@@col 2
1@@@2
3@@@4
5@@@6
###

A more complex example creates a table that contains images and lists, such as:

That's quite a complicated table. Here's the macro that creates it, which is explained more fully later..:

###table
col 1@@@col 2@@@col 3
1@@@2@@@3
4@@@^^^###img
,images/my-website-framework-3
image in table
60###@@@6
7@@@^^^###ul-inline
8.1
8.2###@@@9###
###

We can even embed tables in lists:

To get an idea of how these special features make text files easier to write and more consistent, you can see here the standard HTML needed to make this 'table in a list' followed by the macro version:

Here's the HTML

<div class="user-ul-outline">
	<p class="user-text">table inlist</p>
	<ul class="user-ul-outline">
		<li class="user-ul-outline-item">
			<p class="user-text">list entry 1</p>
		</li>
		<li class="user-ul-outline-item">
			<div class="user-table-container">
				<table class="user-table" id="myTable2">
					<thead class="user-table-header">
						<tr id="tr-2-1" class="user-table-head-row tablehead">
							<th class="user-table-heading">col 1</th>
							<th class="user-table-heading">col 2</th>
						</tr>
					</thead>
					<tbody class="user-table-body">
						<tr id="tr-2-2" class="user-table-data-row even-row tablerow">
							<td class="user-table-data">1</td>
							<td class="user-table-data">2</td>
						</tr>
						<tr id="tr-2-3" class="user-table-data-row odd-row tablerow">
							<td class="user-table-data">3</td>
							<td class="user-table-data">4</td>
						</tr>
						<tr id="tr-2-4" class="user-table-data-row even-row tablerow">
							<td class="user-table-data">5</td>
							<td class="user-table-data">6</td>
						</tr>
					</tbody>
				</table>
				<div id="myModalTable2" class="modal table">
					<div id="tablediv2"></div>
				</div>
			</div>
		</li>
		<li class="user-ul-outline-item">
			<p class="user-text">List entry 3</p>
		</li>
	</ul>
</div>

And here's the macro version:

###ul-outline
table inlist
list entry 1
###table
col 1@@@col 2
1@@@2
3@@@4
5@@@6
###
List entry 3
###

I admit, macros can get a tad ugly, especially for tables

BUT they are a lot smaller, and I think more readable, than the raw HTML

as well as giving advanced functionality (like the table pop-up)

AND consistency of styling...

Callouts

'Aside' type information can be put into a 'call-out' that floats either on the left or on the right side of the page, with other content wrapping around it. Call-outs have a heading, an image and then more content (which can be a list or just text or whatever)

a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.a long paragraph.

And the call-out macro:

###callout-right
Callout
/me.jpg
demonstrating a callout
text of callout, 
###ul-inline
and the callout has a list
list a
list b
###
###

Quotations

We also have standard quotations

so said ant

###quote
so said ant
We also have standard quotations
###

Choruses

To see how Chorus works in action check out Anxiety - or see this little example below... The idea is by default you only see the chorus in full the first time, later choruses just say 'CHORUS' - BUT if you click on 'CHORUS' the display changes to show the full chorus everytime -

And look here's a repeat of the chorus above:

###chorus
a chorus is a repeated block of text with the heading 'chorus'
The first chorus is displayed with it's heading
Subsequent choruses display the heading only
UNLESS YOU CLICK the chorus or its heading!
###
And look here's a repeat of the chorus above:
###chorus###
###

Groups

###group
we can also group things togther
Which means they get indented (on large screens)
and blank lines insert a bit of space
whereas normally blank lines are just ignored
Good for displaying poetry”in a section that hasn't enabled 'Group_Lines'
See Part 2 for more on line grouping
###
###group-centre
and we can
centre group things
if we like
###

Playlist Players

We can also create an audio playlist:

###audio-player
poetry,shorty,states-of-matter-imony
poetry,shorty,mortician
poetry,shorty,i-cant-believe-its-not-punk-rock
poetry,shorty,youre-the-very-definition-of
poetry,shorty,plaything
poetry,shorty,strange-girl
poetry,shorty,i-will-do-things
###

Video playlists work the same, but use the macro 'video-player'.

Accordions

An accordion loads additional text files on to a page inside a 'roll-up/drop down' device. Here's an example, using a few of the 'author notes' I've written for some of the articles:

And the macro that created this:

###accordion
Example Accordion
articles,my-website-framework-3,bookcase
articles,my-website-framework-3,circus
articles,my-website-framework-3,marketing-tips
###

Galleries

Here's a set of images from my 2020 Calendar

Message: Undefined offset: 0 in:/home/hp3-linc7-nfs2-z/922/1863922/user/htdocs/framework/txtio.php at:1033