Does this work on redditish theme by any chance?
Did anyone experience rate limit problems connected to this theme component?
1 Like
I don’t know if it’s possible to add category-topics to get posts that can display images I made my own code using custom-html can’t take effect so please beg!
html
<head>
<style>
.topic-list {
list-style: none;
padding: 0;
}
.topic-list-item {
display: flex;
align-items: center;
margin-bottom: 15px;
}
.topic-list-item img {
width: 50px;
height: 50px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
}
.topic-list-item a {
text-decoration: none;
font-size: 16px;
color: #333;
}
.topic-list-item a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="topic-list-container">
<h2>最新游戏帖子</h2>
<ul class="topic-list" id="topic-list">
<!-- 这里的帖子将通过 JavaScript 动态渲染 -->
</ul>
</div>
<script>
// 获取数据并渲染帖子（最多5个）
fetch('https://www.justnainai.com/c/5.json')
.then(response => response.json()) // 解析 JSON 数据
.then(data => {
const topicListContainer = document.getElementById("topic-list");
// 获取帖子的数组，并限制最多 5 个帖子
const topics = data.topic_list.topics.slice(0, 5); // 只取前 5 个帖子
topics.forEach(topic => {
// 创建列表项
const listItem = document.createElement("li");
listItem.className = "topic-list-item";
// 创建图片元素
const image = document.createElement("img");
image.src = topic.image_url || "https://via.placeholder.com/50"; // 如果没有图片，使用占位图
image.alt = topic.title;
image.onclick = () => {
window.location.href = `/t/${topic.slug}`; // 点击图片跳转到帖子
};
// 创建标题元素
const title = document.createElement("a");
title.href = `/t/${topic.slug}`; // 点击标题跳转到帖子
title.textContent = topic.title;
// 将图片和标题添加到列表项
listItem.appendChild(image);
listItem.appendChild(title);
// 将列表项添加到列表容器
topicListContainer.appendChild(listItem);
});
})
.catch(error => {
console.error('Error fetching data:', error);
});
</script>
</body>
</html>
Really love this component first and foremost so thank you for all your superb work on it!
I have noticed some chatter about top contributors and set timescales for them, I would love to have ours as a monthly top users, has anyone achieved this?
Thanks Joe
You should be able to add a period parameter with the value monthly. This was missing from the parameter list in the original post, but it has now been updated!
2 Likes
I can’t get the latest posts using this component.
The code I changed shows up but disappears when I click on the other categories.
I really hope that this component can support the use of js or refresh because the code component I wrote does not work he can not get the latest post content so I wrote one by hand I hope it can be updated because I was embedded into the tc-right-sidebar after switching it is no longer available I’m also a rookie coder I hope that this feature can be updated please please please please
HTML+JS
<script>
// Ensure the DOM is fully loaded before executing the code
document.addEventListener("DOMContentLoaded", () => {
// Get the sidebar container
const sidebar = document.querySelector(".tc-right-sidebar");
// Check if the sidebar container is found
if (!sidebar) {
console.error("Sidebar container .tc-right-sidebar not found!");
return;
}
// Add recommended content
sidebar.innerHTML = `
<div class="custom-sidebar">
<div class="recommendation-container">
<div class="recommendation-header">
<h2><i class="fa fa-hand-o-right"></i>Latest Game Posts</h2> <!-- Add icon and title -->
</div>
<ul class="recommendation-list">
<!-- Default placeholder content -->
<li class="recommendation-item">
<a href="#">
<img src="https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg" alt="Placeholder Image 1">
</a>
</li>
</ul>
</div>
</div>
`;
// Dynamically load data
fetchTopics();
// Listen for theme changes
observeThemeChanges();
});
/**
* Fetch topic data from the specified API
*/
async function fetchTopics() {
try {
// Request API data
const response = await fetch("https://www.justnainai.com/c/音乐分享/12.json");
if (!response.ok) {
throw new Error("Data retrieval failed");
}
const jsonData = await response.json();
// Extract the first 4 topic data
const topics = jsonData.topic_list.topics.slice(0, 4).map(topic => ({
id: topic.id,
title: topic.title,
slug: topic.slug,
image_url: topic.image_url || "https://www.justnainai.com/uploads/default/original/1X/47e2788af99a2cfec29a917364c578757f67d9ef.jpeg",
}));
// Render to the page
renderTopics(topics);
} catch (error) {
console.error("Error fetching data:", error);
}
}
/**
* Render the recommended content to the page
* @param {Array} topics - Topic data
*/
function renderTopics(topics) {
const recommendationList = document.querySelector(".recommendation-list");
recommendationList.innerHTML = ""; // Clear placeholder content
.custom-sidebar {
padding: 10px;
background-color: #fff; /* White background */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.recommendation-container .recommendation-header h2 {
font-size: 23px; /* Corrected typo from "23x" to "23px" */
margin-bottom: 10px;
color: #333; /* Title in black */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Fixed width */
height: 156px; /* Fixed height, keeping it consistent */
object-fit: cover; /* Maintain the aspect ratio of the image content */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.recommendation-item img:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
topics.forEach(topic => {
const link = `https://www.justnainai.com/t/${topic.slug}/${topic.id}`;
const image = topic.image_url;
const listItem = document.createElement("li");
listItem.className = "recommendation-item";
// Create recommended item HTML
listItem.innerHTML = `
<a href="${link}" title="${topic.title}" target="_blank">
<img src="${image}" alt="${topic.title}">
</a>
`;
recommendationList.appendChild(listItem);
});
}
</script>
CSS
.custom-sidebar {
padding: 10px;
background-color: #fff; /* White background */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}
.recommendation-container .recommendation-header h2 {
font-size: 23px; /* Corrected typo from "23x" to "23px" */
margin-bottom: 10px;
color: #333; /* Title in black */
}
.recommendation-list {
list-style-type: none;
padding: 0;
margin: 0;
}
.recommendation-item {
margin-bottom: 10px;
}
.recommendation-item img {
width: 300px; /* Fixed width */
height: 156px; /* Fixed height, keeping it consistent */
object-fit: cover; /* Maintain the aspect ratio of the image content */
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.2s ease;
}
.recommendation-item img:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
If you make it an Ember Component (look through Plugin and Theme component for examples), you can add it with a separate Theme Component then reference it by Ember Component name.
It would then also work with Bars which uses the same system.
(NB don’t confuse Theme Component witb Ember Component. A Theme Component can contain many Ember Components)
2 Likes
Did you ever figure this out? We would also like to show all events in all categories regardless of what category the event is in.
2 Likes
Unfortunately not.
In that case, any idea how to show the sidebar just on the home page?
I was just playing around with this in a sandboxed environment I’m using as a POC for someone, and not only would it be nice to be able to have the calendar block show on the categories page, but it would also be nice to be able to specify which calendar/calendars to use.
I’ve got an Events category that holds the calendar (restricted access by group is where it will ultimately end up), but I want members of the group that it’s restricted to to be able to see the list of upcoming events anywhere on the platform to drive attendance at the events.
I don’t know what will happen with the group-based restrictions for this - haven’t gotten that far yet in testing.
When I look in my General category, however, the right sidebar block says “No upcoming events” - but if I click “View All”, I am taken to the event calendar and see the test event that I put on it a week out.
Have you looked over Robert’s Developer Theme component ?
If you have a budget if needed maybe a TC could be made to put calender events in a sidebar or wherever you want it.
1 Like
I share a modified version at Manuel Kostka / Discourse / Blocks / Upcoming Events · GitLab. The layout is not built for the sidebar, but for my Homepage Blocks component. Still, the logic should work in any of the block layout frameworks.
2 Likes
For us, just showing the right blocks on the latest or hot pages works well. What I did was fork the repo and change the default behavior when no route is given. To do this, just modify the javascripts/connectors/before-list-area/tc-right-sidebar.js file and change the last line to:
// If no routes are specified, only show on the "Latest" or "Hot" pages
return ["discovery.latest", "discovery.hot"].includes(currentRouteName);
Since we are new to Discourse, I’m not sure how much maintenance doing this will require, but I guess we’ll see.
1 Like
Did you try using discovery.latest and discovery.hot in the show_in_routes setting? That should in theory avoid having to fork the component.
Looks like that does the trick as well 
Thank you!
1 Like
Hey, I don’t know what I’m doing wrong but I can’t seem to get the sidebar to show up on the page.
[
{
"setting": "blocks",
"value": "[{\"name\":\"recent-replies\",\"params\":[{\"name\":\"count\",\"value\":\"3\"}]}]"
},
{
"setting": "show_in_routes",
"value": "/categories|/latest"
}
]
Hi all,
Has anyone used this component and used custom content to create a hyperlinked marquee for images?
I wanted to have a small section with a constant marquee of images hyperlinked to an event page or an article page.
Thanks joe
When it comes to Topic’s within categories.. Can it be “any topic”?
I want to have 7-8 Topics within a category . and then I want to choose 2-3 of them to be within the right “Sidebar” is that possible?