Blasma

theming

Classic

List

Threaded

33 messages Options

fschmidt

theming

Administrator

Please think about how theming should work.

Hugo <Nabble>

Re: theming

I guess a simple theme logic would look more or less like this:

local theme = {}
theme.template = [[
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<title>{title}</title>
		</head>
		<body>
			{content}
		</body>
	</html>
]]

theme.forum = function(data)
	return [[
		<h1>{forum.name/}</h1>

		<p>
			<a href="new_thread?forum={forum_id/}">New Thread</a>
		</p>

		{threads}
			<p>
				<a href="thread?id={thread.id/}">{thread.subject/}</a>
				by {thread.first_post.author.name/}
				last post on {thread.last_post.date/}
				by {thread.last_post.author.name/}
			</p>
		{/threads}
	]]
end

...

Some thoughts:
1) The "template" string would be used by all pages (see the "content" tag inside it)
2) Tags would use curly braces so people don't get confused with luan tags.
3) Each page should provide a lua table with all information the page needs to be displayed
3) Each tags refers to an entry in the lua table provided by the page.
4) Tags with inner content represent loops (e.g., "threads" tag above)

With this system people would be able to freely build any HTML page and place elements wherever they want. We can discuss this.

fschmidt

Re: theming

Administrator

How about:

{block:Set name="standard-head"}
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<title>{Title}</title>
{/block:Set}


{block:ForumPage}
	<!DOCTYPE html>
	<html lang="en">
		<head>
			{Get name="standard-head"}
		</head>
		<body>
			<h1>{ForumName}</h1>
	
			<p>
				<a href="new_thread?forum={ForumID}">New Thread</a>
			</p>
	
			{block:Threads}
				<p>
					<a href="thread?id={ThreadID}">{Subject}</a>
					by {Author}
					last post on {LastPostDate}
					by {LastPostAuthor}
				</p>
			{/block:Threads}
		</body>
	</html>
{/block:ForumPage}

Hugo <Nabble>

Re: theming

We discussed this. Your idea is good and you can start implementing it. A theme can have two versions: desktop and mobile.

fschmidt

Re: theming

Administrator

I figured out how to do this, but now I need one more tour of Tumblr theming.

Hugo <Nabble>

Re: theming

Okay, ping me whenever you want to talk.

fschmidt

Re: theming

Administrator

I pinged you.

Hugo <Nabble>

Re: theming

We discussed this. You can now play with tumblr and see how it works.

fschmidt

Re: theming

Administrator

{block:Set name="standard_head"}
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<title>{Title}</title>
{/block:Set}

{block:ForumPage}
	<!DOCTYPE html>
	<html lang="en">
		<head>
			{Get name="standard_head"}
		</head>
		<body>
			<h1>{ForumName}</h1>
	
			<p>
				<a href="new_thread?forum={ForumID}">New Thread</a>
			</p>
	
			{block:Threads}
				<p>
					<a href="thread?id={ThreadID}">{Subject}</a>
					by {Author}
					last post on {LastPostDate}
					by {LastPostAuthor}
				</p>
			{/block:Threads}
		</body>
	</html>
{/block:ForumPage}

translates to:

local M = {}

local function standard_head(env) %>
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1">
			<title><%env.Title()%></title>
<% end

function M.ForumPage(env) %>
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<%standard_head(env)%>
		</head>
		<body>
			<h1><%env.ForumName()%></h1>
	
			<p>
				<a href="new_thread?forum=<%env.ForumID()%>">New Thread</a>
			</p>
	
			<% env.Threads(nil,env,function(env) %>
				<p>
					<a href="thread?id=<%env.ThreadID()%>">{Subject}</a>
					by {Author}
					last post on <%env.LastPostDate()%>
					by <%env.LastPostAuthor()%>
				</p>
			<% end) %>
		</body>
	</html>
<% end

return M

I am thinking of having the parser literally generate Luan which can then be compiled.

The Get/Set stuff is handled specially by the parser. We may choose other syntax.

I suggest we start with pure Luan like the above and I do the parser later. Okay?

Hugo <Nabble>

Re: theming

fschmidt wrote

I am thinking of having the parser literally generate Luan which can then be compiled.

The Get/Set stuff is handled specially by the parser. We may choose other syntax.

Okay, good.

fschmidt wrote

I suggest we start with pure Luan like the above and I do the parser later. Okay?

Okay, we can play with this for a while while we build the remaining UIs, but I won't invest much time in new themes until we have the parser working.

fschmidt

Re: theming

Administrator

I did the forum page. Please give me feedback before I continue.

Hugo <Nabble>

Re: theming

It looks good, but two issues for now:

(1) site.css is part of the theme, so it should be defined in Theme.luan. We should be able to make it an independent page and continue to call it using "@import site.css".

(2) the designer should be able to define the date format on the page, so LastPostDate should be more flexible (either take a parameter or move Time.format() function to the theme code)

fschmidt

Re: theming

Administrator

This post was updated on .

Hugo <Nabble> wrote

(1) site.css is part of the theme, so it should be defined in Theme.luan. We should be able to make it an independent page and continue to call it using "@import site.css".

Some parts of site.css will likely be standard. So how about having both a site.css and a theme.css? theme.css would be defined in the theme and the theme can import whatever CSS files it wants for each page.

(2) the designer should be able to define the date format on the page, so LastPostDate should be more flexible (either take a parameter or move Time.format() function to the theme code)

How about this approach:

https://www.tumblr.com/docs/en/custom_themes#dates

Hugo <Nabble>

Re: theming

fschmidt wrote

Some parts of site.css will likely be standard. So how about having both a site.css and a theme.css? theme.css would be defined in the theme and the theme can import whatever CSS files it wants for each page.

I think site.css should only contain css for the administration pages. If there is standard code as you said, it may be better to simply duplicate it in the theme.css file, but it is too early to say anything.

fschmidt wrote

How about this approach:
https://www.tumblr.com/docs/en/custom_themes#dates

This works too.

fschmidt

Re: theming

Administrator

In reply to this post by Hugo <Nabble>

I did the parser. But now I am not sure translating into luan source is the right approach. The stack traces will be meaningless to users. Another approach is to have the theme directly compiled into a luan chunk (luan runnable). In this case, the stack trace would be meaningful. For example, instead of:

attempt to call 'env.xCurrentUserName' (a nil value)
	file:sites/a.me.luanhost.com:8080/local/Theme line 13 in call to 'env.xCurrentUserName'
	site:/private/lib/Shared line 47 in call to 'block'
	file:sites/a.me.luanhost.com:8080/local/Theme line 12 in call to 'env.LoggedIn'
	file:sites/a.me.luanhost.com:8080/local/Theme line 55 in call to 'header'
	site:/thread line 60 in call to 'Theme.ThreadPage'

you would get something like:

attempt to call 'xCurrentUserName' (a nil value)
	THEME line 12 in call to 'xCurrentUserName'
	site:/private/lib/Shared line 47 in call to 'block'
	THEME line 11 in call to 'LoggedIn'
	THEME line 54 in call to 'header'
	site:/thread line 60 in call to 'Theme.ThreadPage'

What do you think?

Hugo <Nabble>

Re: theming

The second stack trace is simpler, but I don't understand what you mean by luan chunk/runnable. You may post an example.

fschmidt

Re: theming

Administrator

I implemented this. You can take a look and then assign back to me.

Hugo <Nabble>

Re: theming

It looks good, back to you.

fschmidt

Re: theming

Administrator

In reply to this post by Hugo <Nabble>

Hugo <Nabble> wrote

(1) site.css is part of the theme, so it should be defined in Theme.luan. We should be able to make it an independent page and continue to call it using "@import site.css".

done

fschmidt

Re: theming

Administrator

In reply to this post by Hugo <Nabble>

Hugo <Nabble> wrote

fschmidt wrote

How about this approach:
https://www.tumblr.com/docs/en/custom_themes#dates

This works too.

done. I just implemented some of this, but we can easily add whatever we need.