### Render Main Page Welcome Widget

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

A welcome message widget displayed on top-level navigation pages. It includes a greeting, a description with a link to categories, a create topic button, and the recent topics list.

```javascript
// Rendered on main navigation routes (latest, top, new, etc.)
import SidebarWelcome from "discourse/components/sidebar-welcome";

<template>
  <SidebarWelcome />
</template>

// Determines if current route is a top-level menu route:
get isTopRoute() {
  const { currentRoute } = this.router;
  const topMenuRoutes = this.siteSettings.top_menu.split("|").filter(Boolean);
  return topMenuRoutes.includes(currentRoute.localName);
}

// Renders welcome message from locale:
// "Welcome!"
// "You're viewing a feed containing topics from all categories..."

```

--------------------------------

### Theme Metadata Configuration (about.json)

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Defines metadata for the Redditish theme, including its name, modifiers for excerpt serialization and thumbnail sizes, and external component dependencies.

```json
{
  "name": "redditish",
  "modifiers": {
    "serialize_topic_excerpts": true,
    "topic_thumbnail_sizes": [[620, 500]]
  },
  "components": [
    "https://github.com/discourse/discourse-full-width-component.git",
    "https://github.com/discourse/discourse-header-search.git"
  ],
  "screenshots": ["screenshots/light.png", "screenshots/dark.png"]
}
```

--------------------------------

### Localization Strings (locales/en.yml)

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Provides English localization strings for the Redditish theme, including descriptions, welcome messages, and labels for various UI elements.

```yaml
en:
  theme_metadata:
    description: "A Discourse theme that looks a little like reddit"
  top_route_welcome: "Welcome!"
  top_route_description: "You're viewing a feed containing topics from all categories. If you're looking for something more specific, browse <a href='%{basePath}/categories'>the category list</a>."
  about_category: "About this category"
  about_admin_tip_headline: "Psst, hey admins!"
  about_category_admin_tip_description: "You can add a category description here by editing <a href=%{topicUrl}>this post</a>."
  post_input_placeholder: "Create topic"
  about_tag: "About this tag"
  recent_topics: "Recent topics"
  top_tags: "Top tags"
  subcategories: "Subcategories"
  posted_by: "Posted by"
```

--------------------------------

### Theme Settings Configuration (settings.yml)

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Configures theme-specific settings, such as hiding topic footer controls. This file allows administrators to toggle certain theme behaviors.

```yaml
hide_topic_footer_controls:
  default: true
  description: "Hides the reply/bookmark/share buttons at the bottom of each topic"
```

--------------------------------

### Custom Post Bar Connector

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Adds a Reddit-style post creation bar above the navigation tabs. This connector file uses a FakeInputCreate component and applies specific CSS classes.

```javascript
// Connector file: connectors/discovery-navigation-bar-above/custom-post-bar.gjs
import FakeInputCreate from "../../components/fake-input-create";

@classNames("discovery-navigation-bar-above-outlet", "custom-post-bar")
export default class CustomPostBar extends Component {
  <template><FakeInputCreate /></template>
}
```

--------------------------------

### Render Recent Topics Widget

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Displays the 3 most recent open topics in the sidebar. For logged-in users, it shows recently read topics; for anonymous users, it displays the latest created topics.

```javascript
// Used within SidebarWelcome component
import SidebarLatestTopics from "discourse/components/sidebar-latest-topics";

<template>
  <SidebarLatestTopics />
</template>

// Fetches topics differently based on authentication:
@action
async getLatestTopics() {
  let topicList;

  if (this.currentUser) {
    // Show recently read topics for logged-in users
    topicList = await this.store.findFiltered("topicList", {
      filter: "read",
      params: { order: "latest" },
    });
  } else {
    // Show latest created for anonymous users
    topicList = await this.store.findFiltered("topicList", {
      filter: "latest",
      params: { order: "created" },
    });
  }

  // Filter out closed topics, limit to 3
  this.latestTopics = topicList.topics
    .filter((topic) => !topic.closed)
    .slice(0, 3);
}
```

--------------------------------

### Reddit-Style Topic Creation Bar

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

This component provides a Reddit-style input field for creating new topics. It displays the user's avatar, a placeholder input that opens the composer, and a draft indicator if applicable. It automatically pre-fills category and tag information when on relevant pages.

```javascript
// Rendered automatically via the discovery-navigation-bar-above connector
import FakeInputCreate from "discourse/components/fake-input-create";

<template>
  <FakeInputCreate />
</template>

// Renders for authenticated users with topic creation permission:
// <div class="custom-post-bar-contents">
//   <a href="/u/username"><img class="avatar" ... /></a>
//   <input type="text" placeholder="Create topic" onclick="openComposer()" />
//   <TopicDraftsDropdown /> {{! if user has drafts }}
// </div>

// The component pre-fills category and tag when on category/tag pages:
// this.composer.open({
//   action: Composer.CREATE_TOPIC,
//   draftKey: Composer.NEW_TOPIC_KEY,
//   categoryId: this.category?.id,  // Auto-filled from current route
//   tags: this.tag?.name,           // Auto-filled from current route
// });
```

--------------------------------

### Custom Right Sidebar Connector

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Injects a custom right sidebar containing category and welcome widgets. This connector file defines the structure and components for the sidebar.

```javascript
// Connector file: connectors/after-main-outlet/custom-right-sidebar.gjs
import SidebarAboutCategory from "../../components/sidebar-about-category";
import SidebarAboutTag from "../../components/sidebar-about-tag";
import SidebarWelcome from "../../components/sidebar-welcome";

<template>
  <div class="custom-right-sidebar">
    <SidebarAboutCategory />
    <SidebarAboutTag />
    <SidebarWelcome />
  </div>
</template>
```

--------------------------------

### Custom Card Mixin for Styling

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

A SCSS mixin for creating custom cards with consistent padding, border-radius, and border styling. It includes hover effects for non-touch devices and accepts content blocks.

```scss
@mixin custom-card {
  box-sizing: border-box;
  padding: 0.75em;
  border-radius: 0.25em;
  border: 1px solid var(--redditish-border-color);
  background: var(--secondary);

  @content;

  .discourse-no-touch & {
    &:hover {
      border: 1px solid var(--redditish-border-highlight-color);
    }
  }
}

// Usage:
.custom-right-sidebar_welcome {
  @include custom-card;
}
```

--------------------------------

### Render Tag Information Panel

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Provides a sidebar widget for tag pages, displaying tag descriptions and notification settings. It asynchronously fetches extended tag information and handles notification updates.

```javascript
// Rendered in the right sidebar on tag pages (when not filtered by category)
import SidebarAboutTag from "discourse/components/sidebar-about-tag";

<template>
  <SidebarAboutTag />
</template>

// Fetches tag info asynchronously:
@action
async getTagInfo() {
  if (this.routeTag) {
    const result = await this.store.find("tag-info", this.routeTag.id);
    this.tag = result;
  }
}

// Handles tag notification level updates:
@action
changeTagNotificationLevel(notificationLevel) {
  this.tagNotification
    .update({ notification_level: notificationLevel })
    .then((response) => {
      const payload = response.responseJson;
      this.currentUser.setProperties({
        watched_tags: payload.watched_tags,
        watching_first_post_tags: payload.watching_first_post_tags,
        tracked_tags: payload.tracked_tags,
        muted_tags: payload.muted_tags,
        regular_tags: payload.regular_tags,
      });
    });
}
```

--------------------------------

### Responsive Grid Layout with Sidebar

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Applies a responsive grid layout to the main content area, ensuring the right sidebar is visible on larger screens and hidden on smaller ones. This SCSS targets specific body classes for conditional styling.

```scss
// Main layout with right sidebar visible
body[class*="navigation-"]:not([class*="archetype-"]) {
  #main-outlet-wrapper {
    grid-template-areas:
      "category-banner category-banner category-banner"
      "sidebar lspace content sidebar2 rspace sidebar-spacer";
    grid-template-columns:
      var(--d-sidebar-width) 1fr minmax(0, 640px) 312px 1fr var(--d-sidebar-width);

    // Hide right sidebar on smaller screens
    @media screen and (width <= 1160px) {
      .custom-right-sidebar {
        display: none;
      }
    }
  }
}
```

--------------------------------

### Custom Category and Tag Banners Connector

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Injects custom category and tag banners before the main content area. This connector file specifies the components to be rendered for these banners.

```javascript
// Connector file: connectors/before-main-outlet/custom-category-banner.gjs
import CustomCategoryBanner from "../../components/custom-category-banner";
import CustomTagBanner from "../../components/custom-tag-banner";

<template>
  <CustomCategoryBanner />
  <CustomTagBanner />
</template>
```

--------------------------------

### Render Category Information Panel

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Displays category details, controls, and related information in the right sidebar of category pages. Includes functionality for changing notification levels.

```javascript
// Rendered in the right sidebar on category pages
import SidebarAboutCategory from "discourse/components/sidebar-about-category";

<template>
  <SidebarAboutCategory />
</template>

// Features:
// - Displays category description (HTML safe)
// - Admin tip if no description exists
// - Create topic button (for users with permission)
// - Category notification level dropdown
// - Add to sidebar toggle
// - List of subcategories with category links
// - Top tags for the category with links

// Notification level change handler:
@action
async changeCategoryNotificationLevel(notificationLevel) {
  await this.category.setNotification(notificationLevel);
  this.updateCategoryNotificationLevel();
}
```

--------------------------------

### Custom Topic List Item Component

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

This component replaces the default topic list item display with a Reddit-style layout. It receives topic data and navigation functions via outletArgs. Use this to customize how topics appear in lists.

```javascript
// Injected via the topic-list-item connector outlet
import Item from "discourse/connectors/topic-list-item/item";

// Receives outletArgs from the parent topic list:
<template>
  <Item @outletArgs={{hash
    topic=topic
    hideCategory=hideCategory
    navigateToTopic=navigateToTopic
    showTopicPostBadges=showTopicPostBadges
    tagsForUser=tagsForUser
  }} />
</template>

// Handles topic navigation with keyboard modifiers:
@action
openTopic(event) {
  const { navigateToTopic, topic } = this.args.outletArgs;

  if (wantsNewWindow(event)) {
    window.open(topic.lastUnreadUrl, "_blank");
  } else {
    navigateToTopic(topic, topic.lastUnreadUrl);
  }
}

// Opens share modal:
@action
share(event) {
  event.stopPropagation();
  this.modal.show(ShareTopicModal, {
    model: { topic: this.args.outletArgs.topic },
  });
}
```

--------------------------------

### CSS Custom Properties for Theming

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Defines CSS custom properties for styling elements like border-radius and content width. It also lists Discourse color variables used by the theme.

```scss
:root {
  --d-button-border-radius: 100px;
  --d-nav-pill-border-radius: 100px;
  --d-input-border-radius: 4px;
  --topic-body-width: 900px;
}

// Theme uses these Discourse color variables:
// --redditish-bg-color: Background color
// --redditish-border-color: Card borders
// --redditish-border-highlight-color: Hover borders
// --secondary: Card backgrounds
// --primary, --primary-high, --primary-medium: Text colors
// --tertiary: Accent/link colors
// --category-X-color: Dynamic category colors
```

--------------------------------

### Display Custom Tag Banner

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Renders a simple banner for tag pages, showing the tag icon and name. This component only displays when viewing a tag page without an associated category filter.

```javascript
// Automatically renders on tag pages via the connector
import CustomTagBanner from "discourse/components/custom-tag-banner";

<template>
  <CustomTagBanner />
</template>

// Renders when on a tag page:
// <div class="custom-tag-banner">
//   <div class="custom-tag-banner_meta">
//     <h1><a href="/tag/tagname">🏷️ tagname</a></h1>
//   </div>
// </div>
```

--------------------------------

### Display Custom Category Banner

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

This component renders a rich banner for category pages, displaying the category's logo, name, and custom colors. It automatically generates URL-friendly slugs and reads category data from the router.

```javascript
// Automatically renders on category pages via the connector
// The component reads category data from the router:
import CustomCategoryBanner from "discourse/components/custom-category-banner";

<template>
  <CustomCategoryBanner />
</template>

// Renders structure:
// <div class="custom-category-banner">
//   <div class="custom-category-banner_background" style="background: url(...)">
//     <CategoryLogo @category={{category}} />
//   </div>
//   <div class="custom-category-banner_meta" style="background-color: var(--category-X-color)">
//     <h1><a href="/c/category-slug">Category Name</a></h1>
//   </div>
// </div>
```

--------------------------------

### Add Category/Tag to Sidebar Favorites

Source: https://context7.com/discourse/discourse-redditish-theme/llms.txt

Use this component to allow users to add or remove categories and tags from their sidebar favorites. It automatically handles the star icon state and persists changes to user preferences.

```javascript
// Usage in a template - pass either a category or tag (not both)
import AddToSidebar from "discourse/components/add-to-sidebar";

<template>
  {{! Add current category to sidebar }}
  <AddToSidebar @category={{this.category}} />

  {{! Or add current tag to sidebar }}
  <AddToSidebar @tag={{this.tag}} />
</template>

// The component automatically:
// - Shows a filled star if item is already in sidebar
// - Shows an outline star if item is not in sidebar
// - Toggles the sidebar state on click
// - Saves changes to user preferences via currentUser.save()
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.