Skip to content

Commit

Permalink
feature: store hero background name and config
Browse files Browse the repository at this point in the history
  • Loading branch information
@vid277 @skeptrunedev
vid277 authored and skeptrunedev committed Nov 26, 2024
1 parent 2ebfb92 commit bdaf162
Show file tree
Hide file tree
Showing 10 changed files with 332 additions and 188 deletions.
34 changes: 34 additions & 0 deletions clients/ts-sdk/openapi.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10939,6 +10939,32 @@
}
}
},
"HeroPattern": {
"type": "object",
"properties": {
"backgroundColor": {
"type": "string",
"nullable": true
},
"foregroundColor": {
"type": "string",
"nullable": true
},
"foregroundOpacity": {
"type": "number",
"format": "float",
"nullable": true
},
"heroPatternName": {
"type": "string",
"nullable": true
},
"heroPatternSvg": {
"type": "string",
"nullable": true
}
}
},
"HighlightOptions": {
"type": "object",
"description": "Highlight Options lets you specify different methods to highlight the chunks in the result set. If not specified, this defaults to the score of the chunks.",
Expand Down Expand Up @@ -11658,6 +11684,14 @@
},
"nullable": true
},
"heroPattern": {
"allOf": [
{
"$ref": "#/components/schemas/HeroPattern"
}
],
"nullable": true
},
"placeholder": {
"type": "string",
"nullable": true
Expand Down
2 changes: 1 addition & 1 deletion clients/ts-sdk/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"files": [
"dist"
],
"version": "0.0.34",
"version": "0.0.35",
"license": "MIT",
"scripts": {
"lint": "eslint 'src/**/*.ts'",
Expand Down
10 changes: 9 additions & 1 deletion clients/ts-sdk/src/types.gen.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1614,6 +1614,14 @@ export type HeadQueryResponse = {
queries: Array<HeadQueries>;
};

export type HeroPattern = {
backgroundColor?: (string) | null;
foregroundColor?: (string) | null;
foregroundOpacity?: (number) | null;
heroPatternName?: (string) | null;
heroPatternSvg?: (string) | null;
};

/**
* Highlight Options lets you specify different methods to highlight the chunks in the result set. If not specified, this defaults to the score of the chunks.
*/
Expand Down Expand Up @@ -1848,6 +1856,7 @@ export type PublicPageParameters = {
defaultCurrency?: (string) | null;
defaultSearchMode?: (string) | null;
defaultSearchQueries?: Array<(string)> | null;
heroPattern?: ((HeroPattern) | null);
placeholder?: (string) | null;
problemLink?: (string) | null;
responsive?: (boolean) | null;
Expand All @@ -1856,7 +1865,6 @@ export type PublicPageParameters = {
theme?: ((PublicPageTheme) | null);
type?: (string) | null;
useGroupSearch?: (boolean) | null;
heroPattern?: (string) | null;
};

export type PublicPageSearchOptions = {
Expand Down
29 changes: 27 additions & 2 deletions frontends/dashboard/src/pages/dataset/HeroPatterns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,32 @@ export const HeroPatterns: Record<
Blank: () => {
return "";
},
Overcast: (foregroundColor: string, foregroundOpacity: number) => {
return `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cg fill='%23${foregroundColor}' fill-opacity='${foregroundOpacity}'%3E%3Cpath d='M0 0h80v80H0V0zm20 20v40h40V20H20zm20 35a15 15 0 1 1 0-30 15 15 0 0 1 0 30z' opacity='.5'%3E%3C/path%3E%3Cpath d='M15 15h50l-5 5H20v40l-5 5V15zm0 50h50V15L80 0v80H0l15-15zm32.07-32.07l3.54-3.54A15 15 0 0 1 29.4 50.6l3.53-3.53a10 10 0 1 0 14.14-14.14zM32.93 47.07a10 10 0 1 1 14.14-14.14L32.93 47.07z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E`;
Solid: (foregroundColor: string, foregroundOpacity: number) => {
const encoded = btoa(
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" width="1" height="1">
<rect width="1" height="1" fill="${foregroundColor}" fill-opacity="${foregroundOpacity}"/>
</svg>`,
);
return `data:image/svg+xml;base64,${encoded}`;
},
Texture: (foregroundColor: string, foregroundOpacity: number) => {
const encoded = btoa(
`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' width='4' height='4'>
<path fill='${foregroundColor}' fill-opacity='${foregroundOpacity}' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'></path>
</svg>`,
);
return `data:image/svg+xml;base64,${encoded}`;
},
Circles: (foregroundColor: string, foregroundOpacity: number) => {
const encoded = btoa(
`<svg width="80" height="80" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g fill="${foregroundColor}" fill-opacity="${foregroundOpacity}" fill-rule="evenodd"><g fill="${foregroundColor}"><path d="M50 50c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10zM10 10c0-5.523 4.477-10 10-10s10 4.477 10 10-4.477 10-10 10c0 5.523-4.477 10-10 10S0 25.523 0 20s4.477-10 10-10zm10 8c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm40 40c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8z" /></g></g></svg>`,
);
return `data:image/svg+xml;base64,${encoded}`;
},
Wiggle: (foregroundColor: string, foregroundOpacity: number) => {
const encoded = btoa(
`<svg width="52" height="26" viewBox="0 0 52 26" xmlns="http://www.w3.org/2000/svg"><g fill="${foregroundColor}" fill-opacity="${foregroundOpacity}" fill-rule="evenodd"><g fill="${foregroundColor}"><path d="M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z" /></g></g></svg>`,
);
return `data:image/svg+xml;base64,${encoded}`;
},
};
126 changes: 87 additions & 39 deletions frontends/dashboard/src/pages/dataset/PublicPageSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,22 +37,21 @@ export const PublicPageSettings = () => {
});

const [heroPattern, setHeroPattern] = createSignal("Blank");
const [foregroundColor, setForegroundColor] = createSignal("#000000");
const [foregroundColor, setForegroundColor] = createSignal("#ffffff");
const [foregroundOpacity, setForegroundOpacity] = createSignal(50);
const [backgroundColor, setBackgroundColor] = createSignal("#ffffff");

const trieve = useTrieve();

createEffect(() => {
fetchDataset();
});

const fetchDataset = () => {
const curExtraParams = {
...extraParams,
};
void trieve
.fetch("/api/dataset/{dataset_id}", "get", {
datasetId: datasetId(),
})
.then((dataset) => {
console.log(dataset);
// @ts-expect-error Property 'PUBLIC_DATASET' does not exist on type '{}'. [2339]
// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
setisPublic(dataset.server_configuration?.PUBLIC_DATASET.enabled);
Expand All @@ -62,9 +61,23 @@ export const PublicPageSettings = () => {
dataset.server_configuration?.PUBLIC_DATASET.extra_params,
);

setHeroPattern(curExtraParams.heroPattern?.heroPatternName || "Blank");

setForegroundColor(
curExtraParams.heroPattern?.foregroundColor || "#000000",
);

setForegroundOpacity(
(curExtraParams.heroPattern?.foregroundOpacity || 0.5) * 100,
);

setBackgroundColor(
curExtraParams.heroPattern?.backgroundColor || "#000000",
);

setHasLoaded(true);
});
};
});

const crawlSettingsQuery = createQuery(() => ({
queryKey: ["crawl-settings", datasetId()],
Expand All @@ -88,7 +101,6 @@ export const PublicPageSettings = () => {
crawlSettingsQuery.data &&
crawlSettingsQuery.data.scrape_options?.type === "shopify"
) {
//
if (
extraParams.useGroupSearch === null ||
extraParams.useGroupSearch === undefined
Expand Down Expand Up @@ -121,13 +133,29 @@ export const PublicPageSettings = () => {

createEffect(() => {
const pattern = heroPattern();
if (pattern === "Blank") {
setExtraParams("heroPattern", "");
} else {
const color = foregroundColor().replace("#", "");
const opacity = foregroundOpacity() / 100;
console.log(HeroPatterns[pattern](color, opacity));
setExtraParams("heroPattern", HeroPatterns[pattern](color, opacity));
const color = foregroundColor();
const opacity = foregroundOpacity() / 100;

if (hasLoaded()) {
if (pattern === "Blank") {
setExtraParams("heroPattern", {
heroPatternSvg: "",
heroPatternName: "",
foregroundColor: "#ffffff",
foregroundOpacity: 0.5,
backgroundColor: "#ffffff",
});
} else {
const heroPattern = {
heroPatternSvg: HeroPatterns[pattern](color, opacity),
heroPatternName: pattern,
foregroundColor: color,
foregroundOpacity: opacity,
backgroundColor: backgroundColor(),
};

setExtraParams("heroPattern", heroPattern);
}
}
});

Expand Down Expand Up @@ -570,29 +598,49 @@ export const PublicPageSettings = () => {
/>
</div>
<Show when={heroPattern() !== "Blank"}>
<div class="grow">
<label class="block" for="">
Foreground Color
</label>
<input
type="color"
onInput={(e) => {
setForegroundColor(e.currentTarget.value.replace("#", ""));
}}
/>
</div>
<div class="grow">
<label class="block" for="">
Foreground Opacity
</label>
<input
type="range"
min="0"
max="100"
onInput={(e) => {
setForegroundOpacity(parseInt(e.currentTarget.value));
}}
/>
<div class="flex grow flex-row items-center justify-start">
<div class="grow">
<label class="block" for="">
Foreground Color
</label>
<input
type="color"
onChange={(e) => {
setForegroundColor(e.currentTarget.value);
}}
value={foregroundColor()}
/>
</div>
<div class="grow">
<label class="block" for="">
Foreground Opacity
</label>
<input
type="range"
min="0"
max="100"
onChange={(e) => {
setForegroundOpacity(parseInt(e.currentTarget.value));
}}
value={foregroundOpacity()}
/>
</div>
<div class="grow">
<Show
when={heroPattern() !== "Blank" && heroPattern() !== "Solid"}
>
<label class="block" for="">
Background Color
</label>
<input
type="color"
onChange={(e) => {
setBackgroundColor(e.currentTarget.value);
}}
value={backgroundColor()}
/>
</Show>
</div>
</div>
</Show>
</div>
Expand Down Expand Up @@ -763,7 +811,7 @@ export const PublicPageSettings = () => {
Save
</button>
<button
class="inline-flex justify-center rounded-md border-2 border-magenta-500 px-3 py-2 text-sm font-semibold text-magenta-500 shadow-sm hover:bg-magenta-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-magenta-900"
class="inline-flex justify-center rounded-md border-2 border-magenta-500 px-3 py-2 text-sm font-semibold text-magenta-500 shadow-sm hover:bg-magenta-600 hover:text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-magenta-900"
onClick={() => {
void unpublishDataset();
}}
Expand Down
Loading

0 comments on commit bdaf162

Please sign in to comment.