Livin' In Ameeeriiicaaa!
by Steve

previous entry: Next steps with DEV and other life stuff

DEV: More layout development

03/11/2017

So, I've got the frontpage and entry pages running on dynamic layouts now. This is pretty exciting.

You can see my frontpage and peak at the entries. http://dev.bloopdiary.com/steve

The way this will work:

  1. Anybody that wants to create a layout will be able to create one.
  2. You will have to provide the HTML for each page type (frontpage, entry, profile etc.)
  3. When Bloop loads a page using your layout, it will automatically load the page data in for your page to use.

And here's what I have so far. An example of the default frontpage layout code:

<html>
<head>
Right here is where Bloop would automatically add relevant page data...
<title><script>document.write(diary.title);</script></title>
<base target="_top" />
<style>
body { margin: 0px; }
#diaryHeaderContainer { background: #EEEEEE; border-bottom: 1px solid #999999; }
#diaryHeader { margin: 0px auto; max-width: 720pt; }
#diaryHeader h2 { margin: 0px; padding: 15px 0px; font: 24px Cambria; font-weight: 600; }
#diaryContentContainer { background: #FFFFFF; }
#diaryContent { margin: 0px auto; max-width: 720pt; font: 12pt Calibri; padding: 8px; }
a { color: #0000FF; text-decoration: none; }
a:hover { color: #FF0000; text-decoration: underline; }
</style>
</head>
<body>

<div id="diaryHeaderContainer"><div id="diaryHeader">
<h2><script>document.write(diary.title);</script></h2>
</div></div>

<div id="diaryContentContainer"><div id="diaryContent">
<script>
var text=diary.content;
if (diary.formatting.paragraphs)
    text=text.replace(/\n/g,'<br />')
document.write(text);
</script>

<h3>Entries</h3>
<script>
for (var i=entries.length-1; i>=0; i--) {
    entry=entries[i];
    document.write('<div>');
    document.write('<div style="display: inline-block; padding: 3px;">'+entry.stamp+'</div>');
    document.write('<div style="display: inline-block; padding: 3px;"><a href="/'+diary.permalink+'/'+entry.permalink+'">'+entry.title+'</a></div>');
    document.write('</div>');
}
</script>
</div></div>

</body>
</html>

And the entry layout code:

<html>
<head>
Automatic page data here again...
<title><script>document.write(diary.title);</script></title>
<base target="_top" />
<style>
body { margin: 0px; }
#diaryHeaderContainer { background: #EEEEEE; border-bottom: 1px solid #999999; }
#diaryHeader { margin: 0px auto; max-width: 720pt; }
#diaryHeader h2 { margin: 0px; padding: 15px 0px; font: 24px Cambria; font-weight: 600; }
#diaryContentContainer { background: #FFFFFF; }
#diaryContent { margin: 0px auto; max-width: 720pt; font: 12pt Calibri; padding: 8px; }
a { color: #0000FF; text-decoration: none; }
a:hover { color: #FF0000; text-decoration: underline; }
</style>
</head>
<body>

<div id="diaryHeaderContainer"><div id="diaryHeader">
<h2><script>document.write(diary.title);</script></h2>
</div></div>

<div id="diaryContentContainer"><div id="diaryContent">

<div style="padding: 5px 0px;">
<script>
if (previousEntry) document.write("<div style='float: left;'><a href='/"+diary.permalink+"/"+previousEntry.permalink+"'>&laquo; "+previousEntry.title+"</a></div>");
if (nextEntry) document.write("<div style='float: right;'><a href='/"+diary.permalink+"/"+nextEntry.permalink+"'>"+nextEntry.title+" &raquo;</a></div>");
document.write("<div style='clear: both; padding-bottom: 5px;'>");
</script>
</div>

<h2><script>document.write(entry.title);</script></h2>
<script>
var text=entry.content;
if (entry.formatting.paragraphs)
    text=text.replace(/\n/g,'<br />')
document.write(text);
</script>

</div></div>

</body>
</html>

This is awesome.

(This appears on every entry: If you like what you see, please consider upgrading your account to BloopXtra. I like to keep Bloop running, and the premium subscription helps pay for server expenses and helps justify the time I spend developing it. If you don't like what you see, you are welcome to leave feedback!)

previous entry: Next steps with DEV and other life stuff

2 comments

[ add comment ]

Add Comment

Add Comment

Please enter the following WHITE digits in the box below.

Confirmation Code


html coding is SO MUCH FUN! I'm aging myself here, but I remember having trouble telling DOS to open my games on the big floppy disks(damn, I'm old). I dabble in code sometimes, but it just gives me a headache.

Good luck with everything.


[Ethan JamesStar] [reply]

By duplicate, I mean if I myself write in JavaScript to run through the entry array and display what I want, what is going to stop Bloop from displaying that underneath? [Mark] [reply]