Add Entry Tags

.replit

@@ -1,4 +1,4 @@
-run = "npm run dev:host"
+run = "npm run format && npm run dev:host"
 onBoot = "npm install"
 
 [packager]

DOCUMENTATION.md

@@ -0,0 +1,27 @@
+# API Documentation
+
+## GET /api/entries.json
+
+Search for entries
+
+### Params
+
+All parameters should of course be encoded in the request url as URL query string parameters.
+
+Note: If there are no parameters, it will fetch all entries.
+
+- **`tags`**: CSV (comma seperated values) of tags to search for. Eg: "web,programming language,discord user"
+- **`query`**: String to search for in article titles and content.
+- **`visible`**: Boolean (true/false) of whether to show regular (non unlisted or hidden), 'visible' entries. Defaults to true.
+- **`unlisted`**: Boolean (true/false) of whether to show unlisted entries. Some users may not have the proper permissions to view these entries. Defaults to false.
+- **`hidden`**: Boolean (true/false) of whether to show hidden entries. Some users may not have the proper permissions to view these entries. Defaults to false.
+- **`limit`**: Integer of how many entries it should return. Defaults to all.
+- **`skip`**: Integer of how many entries should be skipped (useful for pagination). Defaults to 0 (skip none).
+
+## POST /api/entries.json
+
+Creates entry. Probably should not try and do this programatically.
+
+## GET /api/random.json
+
+Get random entry.

README.md

@@ -10,3 +10,7 @@ Repldex is the unofficial community-editable encyclopedia of user created entrie
 # Contributing
 
 See [CONTRIBUTING.md](CONTRIBUTING.md)
+
+# API Docs
+
+Looking for the Repldex api documentation? Go to [DOCUMENTATION.md](DOCUMENTATION.md)

src/lib/EntryPreview.svelte

@@ -1,21 +1,52 @@
 <script lang="ts">
 	import type { Entry } from './database/entries'
-
+	import { browser } from '$app/env'
 	export let entry: Entry
 
 	import * as markdown from './markdown'
 	import { getEntryViewUrl } from './utils'
+
+	const setTagSearch = (tag: string) => {
+		if (browser) {
+			let search_bar = document.getElementById('search') as HTMLInputElement
+			search_bar.value = 'tags:' + tag.tag.replaceAll(' ', '_')
+			//search_bar.oninput()
+			search_bar.dispatchEvent(new InputEvent('input'))
+		}
+	}
 </script>
 
-<a class="entry-preview-container" href={getEntryViewUrl(entry)}>
+<div
+	class="entry-preview-container"
+	on:click={() => {
+		window.location.href = getEntryViewUrl(entry)
+	}}
+>
 	{#if entry.visibility === 'unlisted'}
 		<p class="visibility-warning">Unlisted</p>
 	{:else if entry.visibility === 'hidden'}
 		<p class="visibility-warning">Hidden</p>
 	{/if}
-	<h2 class="entry-preview-title">{entry.title}</h2>
+
+	<a href={getEntryViewUrl(entry)} class="entry-preview-title-link"
+		><h2 class="entry-preview-title">{entry.title}</h2></a
+	>
 	<p class="entry-preview-content">{@html markdown.render(entry.content)}</p>
-</a>
+
+	{#if entry.tags}
+		{#each entry.tags as tag}
+			<span
+				class="tag"
+				on:click={event => {
+					setTagSearch({ tag })
+					event.cancelBubble = true
+				}}
+			>
+				{tag}
+			</span>
+		{/each}
+	{/if}
+</div>
 
 <style>
 	.entry-preview-container {
@@ -25,7 +56,9 @@
 		display: block;
 		color: inherit;
 		text-decoration: none;
+		cursor: pointer;
 	}
+
 	.entry-preview-content {
 		display: -webkit-box;
 		-webkit-box-orient: vertical;
@@ -34,9 +67,14 @@
 		margin: 0;
 	}
 
+	.entry-preview-title-link {
+		text-decoration: inherit;
+		color: inherit;
+	}
+
 	.entry-preview-title {
 		margin-top: 0;
-		margin-bottom: 0.25em;
+		margin-bottom: 0.15em;
 	}
 
 	.visibility-warning {
@@ -48,6 +86,21 @@
 		position: relative;
 		top: -0.5em;
 		right: -0.5em;
+		margin-left: 5px;
+		box-shadow: 0 0 0.5em #0004;
+		letter-spacing: 0.05ch;
+	}
+
+	.tag {
+		float: right;
+		border: 2px solid var(--alternate-background-color);
+		padding: 0.2rem;
+		border-radius: 0.2rem;
+		margin: 0;
+		position: relative;
+		bottom: -0.5em;
+		margin-left: 5px;
+		right: -0.5em;
 		box-shadow: 0 0 0.5em #0004;
 		letter-spacing: 0.05ch;
 	}

src/lib/database/entries.ts

@@ -11,6 +11,7 @@ export interface Entry {
 	visibility: Visibility
 	createdAt: Date
 	editedAt: Date
+	tags: string[]
 }
 
 let triedCreatingSearchIndex = false
@@ -34,6 +35,7 @@ interface FilterEntriesOptions {
 interface FetchEntriesOptions extends FilterEntriesOptions {
 	limit: number
 	skip: number
+	tags?: string[]
 }
 
 /**
@@ -44,6 +46,7 @@ export async function fetchEntries(options: FetchEntriesOptions): Promise<Entry[
 	const searchQuery = options.query
 	const skip = options.skip
 	const limit = options.limit
+	const tags = options.tags
 
 	const searchFilter: Filter<ReplaceIdWithUuid<Entry>> = {
 		visibility: {
@@ -54,7 +57,13 @@ export async function fetchEntries(options: FetchEntriesOptions): Promise<Entry[
 			].filter(Boolean) as Visibility[],
 		},
 	}
+
 	if (searchQuery) searchFilter.$text = { $search: searchQuery }
+	if (tags) {
+		searchFilter.tags = {
+			$all: tags,
+		}
+	}
 
 	const foundEntries = await collection
 		.find(searchFilter)

src/lib/discord/scripts/registerCommands.ts

@@ -14,22 +14,19 @@ import fetch from 'node-fetch'
 async function registerCommands() {
 	const bulkUpdate: RESTPutAPIApplicationCommandsJSONBody = commands.map(c => c.json)
 
-	console.log(JSON.stringify(bulkUpdate, null, 2))
-
-	const json = await fetch(GLOBAL_COMMAND_API_URL, {
+	await fetch(GLOBAL_COMMAND_API_URL, {
 		method: 'PUT',
 		headers: {
 			'Content-Type': 'application/json',
 			'Authorization': `Bot ${process.env.DISCORD_TOKEN}`,
 		},
 		body: JSON.stringify(bulkUpdate),
-	}).then(res => res.json())
+	})
 
-	console.log(JSON.stringify(json, null, 2))
-	console.log('Registered commands :)')
 	console.log(
-		'Please note that you only have to run this whenever the syntax of a command is changed, i.e. not on every code change.'
+		'Registered commands, Please note that you only have to run this whenever the syntax of a command is changed, i.e. not on every code change. :)'
 	)
+	process.exit(0)
 }
 
 registerCommands()

src/routes/api/entries.json.ts

@@ -10,6 +10,12 @@ export const get: RequestHandler = async req => {
 	const showVisible = req.url.searchParams.get('visible') !== 'false'
 	const showUnlisted = req.url.searchParams.get('unlisted') === 'true'
 	const showHidden = req.url.searchParams.get('hidden') === 'true'
+	const tags = req.url.searchParams
+		.get('tags')
+		?.split(',')
+		?.map(tag => tag.trim())
+		?.filter(tag => tag.length > 0)
+	const query = req.url.searchParams.get('query')
 
 	const user = req.locals.user ? await fetchUser({ id: req.locals.user.id }) : null
 
@@ -29,6 +35,8 @@ export const get: RequestHandler = async req => {
 		visible: showVisible,
 		unlisted: showUnlisted,
 		hidden: showHidden,
+		tags: tags,
+		query: query ? query : undefined,
 	})
 
 	return {
@@ -66,6 +74,7 @@ export const post: RequestHandler = async req => {
 	// the typings for req.body are wrong, so we have to do `as any`
 	const entryContent = body.content
 	const entryTitle = body.title
+	const tags = body.tags
 
 	const slug = createSlug(entryTitle)
 
@@ -105,6 +114,7 @@ export const post: RequestHandler = async req => {
 		title: entryTitle,
 		slug,
 		visibility,
+		tags,
 	})
 
 	if (entry) {

src/routes/api/entry/[slug].json.ts

@@ -32,6 +32,7 @@ export const put: RequestHandler = async req => {
 	const title = (body.title as string) ?? null
 	const entryId = (body.id as string) ?? null
 	const visibility = (body.visibility as Visibility) ?? null
+	const tags = (body.tags as string[]) ?? null
 
 	const basicUser = req.locals.user
 
@@ -111,6 +112,7 @@ export const put: RequestHandler = async req => {
 		slug,
 		title,
 		visibility,
+		tags,
 	})
 	await createHistoryItem({
 		entryId: createUuid(entry.id),

src/routes/edit/[slug].svelte

@@ -38,6 +38,7 @@
 
 	let entryTitle: string = entry.title
 	let entryContent: string = entry.content
+	let entryTags: string = (entry.tags ?? []).join(',')
 	let visibility: Visibility = entry.visibility
 
 	// automatically update the page title
@@ -46,7 +47,10 @@
 	async function submitEntry() {
 		// make a put request to /api/entry/<id>.json
 		// if successful, redirect to /entry/<slug>
-
+		entryTags = entryTags
+			.split(',')
+			.map(tag => tag.trim())
+			.filter(tag => tag.length > 0)
 		const response: Entry | { error: string } = await fetch(`/api/entry/${entry.id}.json`, {
 			method: 'PUT',
 			headers: {
@@ -56,6 +60,7 @@
 				id: entry.id,
 				title: entryTitle,
 				content: entryContent,
+				tags: entryTags,
 				visibility: visibility,
 			}),
 		}).then(response => response.json())
@@ -97,6 +102,12 @@
 			<MarkdownEditor bind:value={entryContent} />
 		</Labelled>
 
+		<div class="tags">
+			<Labelled text="Tags (seperated with commas)">
+				<TextInput bind:value={entryTags} />
+			</Labelled>
+		</div>
+
 		<button on:click={submitEntry}>Save</button>
 	</div>
 </div>
@@ -112,6 +123,11 @@
 		margin-bottom: 1rem;
 	}
 
+	.tags {
+		margin-top: 1rem;
+		margin-bottom: 1rem;
+	}
+
 	/* vertically align */
 	#editor-container {
 		display: grid;

src/routes/edit/index.svelte

@@ -34,16 +34,19 @@
 
 	let entryTitle = ''
 	let entryContent = ''
+	let entryTags = ''
 
 	// automatically update the page title
 	let pageTitle = 'Create entry'
 	$: {
 		pageTitle = entryTitle.length ? `New entry "${entryTitle}"` : 'New entry'
 	}
 
-	async function submitEntry() {
+	const submitEntry = async () => {
 		// make a post/put request to /api/entries.json
 		// if successful, redirect to /entry/<slug>
+		entryTags = entryTags.split(',')
+		if (entryTags.length == 1 && entryTags[0] == '') entryTags = []
 
 		const response: Entry | { error: string } = await fetch('/api/entries.json', {
 			method: 'POST',
@@ -53,6 +56,7 @@
 			body: JSON.stringify({
 				title: entryTitle,
 				content: entryContent,
+				tags: entryTags,
 				visibility,
 			}),
 		}).then(response => response.json())
@@ -89,11 +93,18 @@
 				<TextInput bind:value={entryTitle} />
 			</Labelled>
 		</div>
+
 		<Labelled text="Content">
 			<MarkdownEditor bind:value={entryContent} />
 		</Labelled>
 
-		<button on:click={submitEntry}>Submit</button>
+		<div class="tags">
+			<Labelled text="Tags (seperated with commas)">
+				<TextInput bind:value={entryTags} />
+			</Labelled>
+		</div>
+
+		<button on:click={submitEntry}>Save</button>
 	</div>
 </div>
 
@@ -108,11 +119,17 @@
 		margin-bottom: 1rem;
 	}
 
+	.tags {
+		margin-top: 1rem;
+		margin-bottom: 1rem;
+	}
+
 	/* vertically align */
 	#editor-container {
 		display: grid;
 		align-items: center;
 		height: 100vh;
+		margin-top: 1.5rem;
 	}
 
 	button {