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

9 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]

The entries I attempted to write never published I'll try again, but it appeared to be stuck on the loading page on both attempts. I used Microsoft Edge as well as Google Chrome. [head.above.water.Star] [reply]

You're the best!!!! Thank you, I'm so happy to be an Xtra member again!!! 💜 [love[SICK] surveys.Star] [reply]

Hey Steve, I Have a friend who can't log into her bloop and she said she's tried to reach out to you to get it resolved but hasn't heard back from you and she asked me to message you. Her name is Susie and her diary is slowly.loosing.it [head.above.water.Star] [reply]

ryc: will do [head.above.water.Star] [reply]

I gues she still hasn't gotten your response. :/ I told her to check her spam and she said she did. Sorry for being the middle man [head.above.water.Star] [reply]

Yeah! I'm super happy these days! How are you Steve? [Tiffany] [reply]

previous entry: Next steps with DEV and other life stuff