8000 Implement MVP frontend for Algolia search by benhalpern · Pull Request #20909 · forem/forem · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Implement MVP frontend for Algolia search #20909

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
May 6, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions app/assets/javascripts/utilities/buildArticleHTML.js
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,45 @@ function buildArticleHTML(article, currentUserId = null) {
return parsedDocument.body.innerHTML;
}

if (article && article.class_name === 'User' && article.user === undefined) { // Represents different return values for how users are fetched.
const html = `
<article class="crayons-story">
<div class="crayons-story__body flex items-start gap-2">
<a href="${article.username}" class="crayons-podcast-episode__cover">
<img src="${article.profile_image.url}" alt="" loading="lazy" />
</a>
<div>
<h3 class="crayons-subtitle-2 lh-tight py-1">
<a href="${article.username}" class="c-link"> ${article.name} </a>
</h3>
<p class="crayons-story__slug-segment">@${article.username}</p>
${
article.summary
? `<div class="truncate-at-3 top-margin-4">${article.summary}</div>`
: ''
}
</div>
<div class="print-hidden" style="margin-left: auto">
<button class="crayons-btn follow-action-button whitespace-nowrap follow-user w-100" data-info=''>Follow</button>
</div>
</div>
</article>
`;

const parser = new DOMParser();
const parsedDocument = parser.parseFromString(html, 'text/html');
parsedDocument.querySelector('img').alt = article.name;
parsedDocument.querySelector('button').dataset.info = JSON.stringify({
id: article.id,
name: article.name,
className: 'User',
style: 'full',
});

return parsedDocument.body.innerHTML;
}


if (article) {
var container = document.getElementById('index-container');

Expand Down
5 changes: 1 addition & 4 deletions app/javascript/packs/searchParams.js
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ function search(query, filters, sortBy, sortDirection) {
});

// Run Algolia code only if the ID is live.
if (document.body.dataset.algoliaId?.length > 0) {
if (document.body.dataset.algoliaId?.length > 0 && !searchParams.toString().includes('MY_POSTS')) {
algoliaSearch(searchParams.toString());
return;
}
Expand Down Expand Up @@ -243,9 +243,6 @@ function algoliaSearch(searchParams) {
story.class_name = paramsObj.class_name;
story.id = story.objectID;
// Add profile_image_90 to story object from profile image if profile_image_90 is not present
story.profile_image_90 = story.profile_image;
story.profile_image = { url: story.profile_image }
console.log(story) /* eslint-disable-line */
resultDivs.push(buildArticleHTML(story, currentUserId));
});
document.getElementById('substories').innerHTML = resultDivs.join('');
Expand Down
11 changes: 7 additions & 4 deletions app/models/concerns/algolia_searchable/searchable_article.rb
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,21 @@ module SearchableArticle

algoliasearch(**DEFAULT_ALGOLIA_SETTINGS, if: :indexable) do
attribute :user do
{ name: user.name, username: user.username, profile_image: user.profile_image_90 }
{ name: user.name,
username: user.username,
profile_image: user.profile_image_90,
id: user.id,
profile_image_90: user.profile_image_90 }
end

attribute :title, :tag_list, :reading_time, :score, :featured, :comments_count,
:positive_reactions_count, :path, :main_image
:positive_reactions_count, :path, :main_image, :user_id

add_attribute(:published_at) { published_at.to_i }
add_attribute(:readable_publish_date) { readable_publish_date }
add_attribute(:timestamp) { published_at.to_i }

add_replica("Article_timestamp_desc", per_environment: true) { customRanking ["desc(timestamp)"] }
add_replica("Article_timestamp_asc", per_environment: true) { customRanking ["asc(timestamp)"] }

end
end

Expand Down
11 changes: 9 additions & 2 deletions app/models/concerns/algolia_searchable/searchable_comment.rb
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ module SearchableComment
include AlgoliaSearch

algoliasearch(**DEFAULT_ALGOLIA_SETTINGS, unless: :bad_comment?) do
attribute :commentable_id, :commentable_type, :path, :parent_id
attribute :commentable_id, :commentable_type, :path, :parent_id, :title
attribute :body do
title
end
Expand All @@ -16,8 +16,15 @@ module SearchableComment
end

attribute :user do
{ name: user.name, username: user.username, profile_image: user.profile_image_90 }
{ name: user.name,
username: user.username,
profile_image: user.profile_image_90,
profile_image_90: user.profile_image_90 }
end

add_attribute(:timestamp) { created_at.to_i }
add_replica("Comment_timestamp_desc", per_environment: true) { customRanking ["desc(timestamp)"] }
add_replica("Comment_timestamp_asc", per_environment: true) { customRanking ["asc(timestamp)"] }
end
end

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,12 @@ module SearchableOrganization
algoliasearch(**DEFAULT_ALGOLIA_SETTINGS) do
attribute :name, :tag_line, :summary, :slug
attribute :profile_image do
profile_image_90
{ url: profile_image_90 }
end

add_attribute(:timestamp) { created_at.to_i }
add_replica("Organization_timestamp_desc", per_environment: true) { customRanking ["desc(timestamp)"] }
add_replica("Organization_timestamp_asc", per_environment: true) { customRanking ["asc(timestamp)"] }
end
end

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,10 @@ module SearchablePodcastEpisode
attribute :podcast_image do
profile_image_url
end

add_attribute(:timestamp) { published_at.to_i }
add_replica("PodcastEpisode_timestamp_desc", per_environment: true) { customRanking ["desc(timestamp)"] }
add_replica("PodcastEpisode_timestamp_asc", per_environment: true) { customRanking ["asc(timestamp)"] }
end
end

Expand Down
9 changes: 6 additions & 3 deletions app/models/concerns/algolia_searchable/searchable_user.rb
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,12 @@ module SearchableUser
included do
algoliasearch(**DEFAULT_ALGOLIA_SETTINGS, unless: :bad_actor?) do
attribute :name, :username
attribute :profile_image do
profile_image_90
end

add_attribute(:profile_image) { { url: profile_image_90 } }
# add_attribute(:profile_image_90) { profile_image_90 }
Copy link
Contributor
@maestromac maestromac May 6, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: seeing that other searchable also had this enabled, should this be uncommented?

add_attribute(:timestamp) { registered_at.to_i }
a A5F5 dd_replica("User_timestamp_desc", per_environment: true) { customRanking ["desc(timestamp)"] }
add_replica("User_timestamp_asc", per_environment: true) { customRanking ["asc(timestamp)"] }
end
end

Expand Down
3 changes: 3 additions & 0 deletions app/views/stories/articles_search/_nav_menu.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,7 @@
<%= t("views.search.nav.my_posts") %>
</a></li>
<% end %>
<% if Settings::General.display_algolia_branding %>
<li class="ml-2 mt-3 fw-bold"><a href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank">Powered by Algolia</a></li>
<% end %>
</ul>
Loading
0