Skip to content

Commit

Permalink
Revert highlight impl in the Default UI in prep of moving to JS API
Browse files Browse the repository at this point in the history
  • Loading branch information
@bglw
bglw committed Nov 15, 2023
1 parent 3cdf967 commit 9765f05
Show file tree
Hide file tree
Showing 2 changed files with 156 additions and 159 deletions.
291 changes: 149 additions & 142 deletions pagefind_ui/default/svelte/result.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,155 +1,162 @@
<script>
export let show_images = true;
export let process_result = null;
export let result = { data: async () => {} };
export let highlight_query_param = null;
export let show_images = true;
export let process_result = null;
export let result = { data: async () => {} };
const skipMeta = ["title", "image", "image_alt", "url"];
const skipMeta = ["title", "image", "image_alt", "url"];
let data;
let meta = [];
const load = async (r) => {
data = await r.data();
data = process_result?.(data) ?? data;
meta = Object.entries(data.meta).filter(([key]) => !skipMeta.includes(key));
};
$: load(result);
let data;
let meta = [];
const placeholder = (max = 30) => {
return ". ".repeat(Math.floor(10 + Math.random() * max));
};
const load = async (r) => {
data = await r.data();
data = process_result?.(data) ?? data;
meta = Object.entries(data.meta).filter(
([key]) => !skipMeta.includes(key)
);
};
$: load(result);
const placeholder = (max = 30) => {
return ". ".repeat(Math.floor(10 + Math.random() * max));
};
</script>
<li class="pagefind-ui__result">
{#if data}
{#if show_images}
<div class="pagefind-ui__result-thumb">
{#if data.meta.image}
<img
class="pagefind-ui__result-image"
src={data.meta?.image}
alt={data.meta?.image_alt || data.meta?.title}
/>
{#if data}
{#if show_images}
<div class="pagefind-ui__result-thumb">
{#if data.meta.image}
<img
class="pagefind-ui__result-image"
src={data.meta?.image}
alt={data.meta?.image_alt || data.meta?.title}
/>
{/if}
</div>
{/if}
</div>
{/if}
<div class="pagefind-ui__result-inner">
<p class="pagefind-ui__result-title">
<a
class="pagefind-ui__result-link"
href={(data?.meta?.url || data.url) +
(highlight_query_param ? `?${highlight_query_param.toString()}` : "")}
>{@html data.meta?.title}</a
>
</p>
<p class="pagefind-ui__result-excerpt">{@html data.excerpt}</p>
{#if meta.length}
<ul class="pagefind-ui__result-tags">
{#each meta as [metaTitle, metaValue]}
<li class="pagefind-ui__result-tag">
{@html metaTitle.replace(/^(\w)/, (c) => c.toLocaleUpperCase())}: {@html metaValue}
</li>
{/each}
</ul>
{/if}
</div>
{:else}
{#if show_images}
<div class="pagefind-ui__result-thumb pagefind-ui__loading" />
<div class="pagefind-ui__result-inner">
<p class="pagefind-ui__result-title">
<a
class="pagefind-ui__result-link"
href={data.meta?.url || data.url}
>{data.meta?.title}</a
>
</p>
<p class="pagefind-ui__result-excerpt">{@html data.excerpt}</p>
{#if meta.length}
<ul class="pagefind-ui__result-tags">
{#each meta as [metaTitle, metaValue]}
<li class="pagefind-ui__result-tag">
{metaTitle.replace(/^(\w)/, (c) =>
c.toLocaleUpperCase()
)}: {metaValue}
</li>
{/each}
</ul>
{/if}
</div>
{:else}
{#if show_images}
<div class="pagefind-ui__result-thumb pagefind-ui__loading" />
{/if}
<div class="pagefind-ui__result-inner">
<p class="pagefind-ui__result-title pagefind-ui__loading">
{placeholder(30)}
</p>
<p class="pagefind-ui__result-excerpt pagefind-ui__loading">
{placeholder(40)}
</p>
</div>
{/if}
<div class="pagefind-ui__result-inner">
<p class="pagefind-ui__result-title pagefind-ui__loading">
{placeholder(30)}
</p>
<p class="pagefind-ui__result-excerpt pagefind-ui__loading">
{placeholder(40)}
</p>
</div>
{/if}
</li>
<style>
.pagefind-ui__result {
list-style-type: none;
display: flex;
align-items: flex-start;
gap: min(calc(40px * var(--pagefind-ui-scale)), 3%);
padding: calc(30px * var(--pagefind-ui-scale)) 0
calc(40px * var(--pagefind-ui-scale));
border-top: solid var(--pagefind-ui-border-width) var(--pagefind-ui-border);
}
.pagefind-ui__result:last-of-type {
border-bottom: solid var(--pagefind-ui-border-width)
var(--pagefind-ui-border);
}
.pagefind-ui__result-thumb {
width: min(30%, calc((30% - (100px * var(--pagefind-ui-scale))) * 100000));
max-width: calc(120px * var(--pagefind-ui-scale));
margin-top: calc(10px * var(--pagefind-ui-scale));
aspect-ratio: var(--pagefind-ui-image-box-ratio);
position: relative;
}
.pagefind-ui__result-image {
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 0;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
border-radius: var(--pagefind-ui-image-border-radius);
}
.pagefind-ui__result-inner {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: calc(10px * var(--pagefind-ui-scale));
}
.pagefind-ui__result-title {
display: inline-block;
font-weight: 700;
font-size: calc(21px * var(--pagefind-ui-scale));
margin-top: 0;
margin-bottom: 0;
}
.pagefind-ui__result-title .pagefind-ui__result-link {
color: var(--pagefind-ui-text);
text-decoration: none;
}
.pagefind-ui__result-title .pagefind-ui__result-link:hover {
text-decoration: underline;
}
.pagefind-ui__result-excerpt {
display: inline-block;
font-weight: 400;
font-size: calc(16px * var(--pagefind-ui-scale));
margin-top: calc(4px * var(--pagefind-ui-scale));
margin-bottom: 0;
min-width: calc(250px * var(--pagefind-ui-scale));
}
.pagefind-ui__loading {
color: var(--pagefind-ui-text);
background-color: var(--pagefind-ui-text);
border-radius: var(--pagefind-ui-border-radius);
opacity: 0.1;
pointer-events: none;
}
.pagefind-ui__result-tags {
list-style-type: none;
padding: 0;
display: flex;
gap: calc(20px * var(--pagefind-ui-scale));
flex-wrap: wrap;
margin-top: calc(20px * var(--pagefind-ui-scale));
}
.pagefind-ui__result-tag {
padding: calc(4px * var(--pagefind-ui-scale))
calc(8px * var(--pagefind-ui-scale));
font-size: calc(14px * var(--pagefind-ui-scale));
border-radius: var(--pagefind-ui-border-radius);
background-color: var(--pagefind-ui-tag);
}
.pagefind-ui__result {
list-style-type: none;
display: flex;
align-items: flex-start;
gap: min(calc(40px * var(--pagefind-ui-scale)), 3%);
padding: calc(30px * var(--pagefind-ui-scale)) 0
calc(40px * var(--pagefind-ui-scale));
border-top: solid var(--pagefind-ui-border-width)
var(--pagefind-ui-border);
}
.pagefind-ui__result:last-of-type {
border-bottom: solid var(--pagefind-ui-border-width)
var(--pagefind-ui-border);
}
.pagefind-ui__result-thumb {
width: min(
30%,
calc((30% - (100px * var(--pagefind-ui-scale))) * 100000)
);
max-width: calc(120px * var(--pagefind-ui-scale));
margin-top: calc(10px * var(--pagefind-ui-scale));
aspect-ratio: var(--pagefind-ui-image-box-ratio);
position: relative;
}
.pagefind-ui__result-image {
display: block;
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 0;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
border-radius: var(--pagefind-ui-image-border-radius);
}
.pagefind-ui__result-inner {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
margin-top: calc(10px * var(--pagefind-ui-scale));
}
.pagefind-ui__result-title {
display: inline-block;
font-weight: 700;
font-size: calc(21px * var(--pagefind-ui-scale));
margin-top: 0;
margin-bottom: 0;
}
.pagefind-ui__result-title .pagefind-ui__result-link {
color: var(--pagefind-ui-text);
text-decoration: none;
}
.pagefind-ui__result-title .pagefind-ui__result-link:hover {
text-decoration: underline;
}
.pagefind-ui__result-excerpt {
display: inline-block;
font-weight: 400;
font-size: calc(16px * var(--pagefind-ui-scale));
margin-top: calc(4px * var(--pagefind-ui-scale));
margin-bottom: 0;
min-width: calc(250px * var(--pagefind-ui-scale));
}
.pagefind-ui__loading {
color: var(--pagefind-ui-text);
background-color: var(--pagefind-ui-text);
border-radius: var(--pagefind-ui-border-radius);
opacity: 0.1;
pointer-events: none;
}
.pagefind-ui__result-tags {
list-style-type: none;
padding: 0;
display: flex;
gap: calc(20px * var(--pagefind-ui-scale));
flex-wrap: wrap;
margin-top: calc(20px * var(--pagefind-ui-scale));
}
.pagefind-ui__result-tag {
padding: calc(4px * var(--pagefind-ui-scale))
calc(8px * var(--pagefind-ui-scale));
font-size: calc(14px * var(--pagefind-ui-scale));
border-radius: var(--pagefind-ui-border-radius);
background-color: var(--pagefind-ui-tag);
}
</style>
24 changes: 7 additions & 17 deletions pagefind_ui/default/svelte/result_with_subs.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
export let show_images = true;
export let process_result = null;
export let result = { data: async () => {} };
// string or null
export let highlight_query_param = null;
const skipMeta = ["title", "image", "image_alt", "url"];
Expand All @@ -28,12 +26,10 @@
const load = async (r) => {
data = await r.data();
data = process_result?.(data) ?? data;
meta = Object.entries(data?.meta).filter(
([key]) => !skipMeta.includes(key)
);
meta = Object.entries(data.meta).filter(([key]) => !skipMeta.includes(key));
if (Array.isArray(data.sub_results)) {
has_root_sub_result =
data.sub_results?.[0]?.url === (data?.meta?.url || data?.url);
data.sub_results?.[0]?.url === (data.meta?.url || data.url);
if (has_root_sub_result) {
non_root_sub_results = thin_sub_results(data.sub_results.slice(1), 3);
} else {
Expand Down Expand Up @@ -63,11 +59,8 @@
{/if}
<div class="pagefind-ui__result-inner">
<p class="pagefind-ui__result-title">
<a
class="pagefind-ui__result-link"
href={(data?.meta?.url || data.url) +
(highlight_query_param ? `?${highlight_query_param.toString()}` : "")}
>{@html data.meta?.title}</a
<a class="pagefind-ui__result-link" href={data.meta?.url || data.url}
>{data.meta?.title}</a
>
</p>
{#if has_root_sub_result}
Expand All @@ -77,11 +70,8 @@
{#each non_root_sub_results as subres}
<div class="pagefind-ui__result-nested">
<p class="pagefind-ui__result-title">
<a
class="pagefind-ui__result-link"
href={subres.url +
(highlight_query_param ? `?${highlight_query_param}` : "")}
>{@html subres.title}</a
<a class="pagefind-ui__result-link" href={subres.url}
>{subres.title}</a
>
</p>
<p class="pagefind-ui__result-excerpt">{@html subres.excerpt}</p>
Expand All @@ -92,7 +82,7 @@
<ul class="pagefind-ui__result-tags">
{#each meta as [metaTitle, metaValue]}
<li class="pagefind-ui__result-tag">
{@html metaTitle.replace(/^(\w)/, (c) => c.toLocaleUpperCase())}: {@html metaValue}
{metaTitle.replace(/^(\w)/, (c) => c.toLocaleUpperCase())}: {metaValue}
</li>
{/each}
</ul>
Expand Down

0 comments on commit 9765f05

Please sign in to comment.