Fakebook, a theme for social media lovers

Hello Jordan,

Has got errors when a new user register. The right sidebar not shown any information except welcome text and subhead but without name. So i know it shows the likes if there are some and badges too. Is that possible to make this sidebar to show likes and badges fix? I mean 0 :heart: recieved , 0 :heart: given and no badges. You don’t have any badges yet… Check out how you get some… or something like this. So text or link if no badges yet.

Thank you! :slight_smile:

The error code is for badges:

I would like to modify it as below.
However, it does not work on the mobile screen.
Can someone please help me on what to do.

I would like to make the link work for the topic excerpt and image.

{{~raw-plugin-outlet name="topic-list-after-title"}}
{{#unless topic.image_url}}
  {{#if topic.hasExcerpt}}
    <a href="{{topic.lastUnreadUrl}}" class="topic-excerpt-link">
      <div class="topic-excerpt-box">
        {{raw "list/topic-excerpt" topic=topic}}
      </div>
    </a>
  {{/if}}
{{/unless}}
{{#if topic.image_url}}
<a href="{{topic.lastUnreadUrl}}" class="topic-excerpt-link">
<div class="topic-image">
  <img src="{{topic.image_url}}" />
</div>
</a>
{{/if}}

This is the site I am testing.

Use this in mobile header :point_down:
<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.raw'> . . . </script>

iPhone 6S

I am testing this on Xcode simulator with iphone 6S and am not encountering this issue.

I have a couple questions:

Is this screenshot of you using meta.discourse.org ?
Which version of iOS are you using?
Which web browser?

Thanks

1 Like

Does anyone try to play short video upload direct to discourse with Facebook theme on iOS phone?

Should I have missed something on config, but I can not play any uploaded video on phone. It’s working well on computer.

Any embedded video from Youtube working.

That why I do not know what happened, no errors, no warning.
So please advice

Yes, it is work perfect for me on any device. I think a theme is hard to cause this issue.
Did you try to play in safe mode?
Can you post the topic where the video so can check it.

Hi @Don
Yes, you should try at below link:
[Sưu tầm] Chuyên mục cười À ra Thế ! của Dr. VL - À ra Thế

Just tested and make sure that can not run on my iOS 11,

1 Like

iOS 11 is pretty outdated that cause the problem. I can play the video without any problem on iOS 14 and it works great.

3 Likes

@Don Noted,

Thank you

1 Like

This is fantastic!

Also… is it possible to add a link to the sidebar intro area?

where’s the link to add the theme?

https://github.com/discourse/fakebook-modern.git

4 Likes

Hey I am learning discourse theme / plugin development. I really like Fakebook theme and I am using it to develop my understanding but I have a few questions.

The “javascripts/discourse/templates/mobile/list/topic-list-item.hbr” has 100% subset duplicate code from the “common/header.html”

My questions:

  1. Isn’t there a way to include a bhr file into html file so that we can just include topic-list-item.hbr into the common/header.html file instead of duplicating the code in two places?
  2. Why do we need topic-list-item.hbr in the first place? Shouldn’t the files in common folder apply to both: desktop and mobile?
1 Like

I don’t believe so… normally I could make a component that uses one template, and then I could include for the component in both overrides… but our topic list items are a special type of template built for performance (hbr = handlebars raw template), and raw templates can’t use components. (Some previous discussion in Mounting widget in raw template?)

That’s how Discourse’s CSS is structured (and some special HTML files for themes like header/footer/etc), but within the javascripts/discourse/templates directory those templates are direct overrides of Discourse defaults (when there’s not an override, the default templates are used).

In Discourse there are two templates: /templates/list/topic-list-item.hbr and /templates/mobile/list/topic-list-item.hbr. So since there are two templates, we need two overrides.

Maybe there’s an easy way to point mobile to the non-mobile template in the JS… but if there is I’m not aware of it!

1 Like

Spoke too soon! I took a look and actually figured this out soon after I posted the above response. Sometimes writing things out can do that.

I’ve made an update so it’s just one template… by default in topic-list-item.js we have some code that looks like:

  renderTopicListItem() {
    const template = findRawTemplate("list/topic-list-item");
    if (template) {
      this.set("topicListItemContents", template(this).htmlSafe());
    }
  },

so if I override const template in the theme…

  renderTopicListItem() {
    const template = findRawTemplate("list/custom-topic-list-item");
    if (template) {
      this.set("topicListItemContents", template(this).htmlSafe());
    }
  },

This now points to a separate template, and since there’s no mobile counterpart by the same name… it also gets used for mobile. Thanks for inspiring the change with your question @hyd504!

4 Likes

That’s really nice! :blush: I just changed on my site with Fakebook Modern theme :slightly_smiling_face: Thank you so much! :heart:

@awesomerobot @Don

can you guys share links to some sample forums where I can see this theme in action?

Hello,

Sure, you can see the Fakebook theme in theme creator:

Mine contains relatively much modification but you can see it here:

1 Like

Thanks @Don .

Just to double check the Preview points to https://github.com/discourse/fakebook-modern theme?