index.html

---
layout: default
keywords: home, about
---

<section class="pb-section homepage">
	<div class="container">
		<div class="row justify-content-md-center text-center">
			<div class="col-lg-7">
				<h1 class="title font-weight-normal mb-3">SSF Blog</h1>
				<p class="mb-5">The SSF blog is the place to go for all sorts of SEBS Scholarship Foundation news! Here
					you can find scholarship updates, volunteering news, announcements, and other fun information we'd
					like to share!</p>
			</div>
		</div>
		<div class="row justify-content-md-center text-left">
			<div class="col-lg-7">
				<h2 class="font-weight-normal mb-3">Blog Posts</h2>
				<div class="blog-feed-container">
					<div id="search-searchbar"></div>
					<div class="blog-feed" id="search-hits"></div>
				</div>
			</div>
		</div>
	</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@2.6.0/dist/instantsearch.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script>
	const search = instantsearch({
		appId: '{{ site.algolia.application_id }}',
		indexName: '{{ site.algolia.index_name }}',
		apiKey: '{{ site.algolia.search_only_api_key }}'
	});

	const hitTemplate = function(hit) {
		if (!hit.url || !hit._highlightResult) return ``;
		let title = "";
		if (hit._highlightResult.title) title = hit._highlightResult.title.value;

		let content = "";
		if (hit._highlightResult.content) content = hit._highlightResult.content.value;

		let date = "date unknown";
		if (hit.date) date = moment.unix(hit.date).utc().format('MMM DD, YYYY');

		let author = "author unknown";
		if (hit.author) author = hit.author;


		return `
	<a href="{{ site.baseurl }}${hit.url}">
		<div class="feed-item">
			<h3>${title}</h3>
			<p class="mb-3">${content}</p>
			<p class="date">Published on ${date} by ${author}</p>
		</div>
	</a>
  		`;
	}

	// Adding searchbar and results widgets
	search.addWidget(
			instantsearch.widgets.searchBox({
				container: '#search-searchbar',
				placeholder: 'Search posts...',
				poweredBy: true, // This is required
			})
	);

	search.addWidget(
			instantsearch.widgets.infiniteHits({
				container: '#search-hits',
				showMoreLabel: "Show More...",
				templates: {
					item: hitTemplate,
					empty: "No results..."
				},
			})
	);

	// Starting the search
	search.start();
</script>