Compare commits

..

No commits in common. "main" and "v1.3.2" have entirely different histories.
main ... v1.3.2

29 changed files with 104 additions and 287 deletions

View File

@ -1,7 +1,7 @@
{
"id": "obsidian-book-tracker",
"name": "Book Tracker",
"version": "1.4.1",
"version": "1.3.2",
"minAppVersion": "0.15.0",
"description": "Simplifies tracking your reading progress and managing your book collection in Obsidian.",
"author": "FiFiTiDo",

View File

@ -1,6 +1,6 @@
{
"name": "obsidian-book-tracker",
"version": "1.4.1",
"version": "1.3.2",
"description": "Simplifies tracking your reading progress and managing your book collection in Obsidian.",
"main": "main.js",
"scripts": {

View File

@ -33,7 +33,6 @@ import { ReloadReadingLogCommand } from "@commands/ReloadReadingLogCommand";
import { registerReadingCalendarCodeBlockProcessor } from "@ui/code-blocks/ReadingCalendarCodeBlock";
import { registerAToZChallengeCodeBlockProcessor } from "@ui/code-blocks/AToZChallengeCodeBlock";
import moment from "@external/moment";
import { compressImage } from "@utils/image";
export default class BookTrackerPlugin extends Plugin {
public settings: BookTrackerPluginSettings;
@ -128,35 +127,23 @@ export default class BookTrackerPlugin extends Plugin {
}
filePath += fileName + "." + extension;
let file = this.app.vault.getFileByPath(filePath);
if (file) {
const existingFile = this.app.vault.getFileByPath(filePath);
if (existingFile) {
if (this.settings.overwriteExistingCovers || overwrite) {
await this.app.vault.modifyBinary(file, response.arrayBuffer);
await this.app.vault.modifyBinary(
existingFile,
response.arrayBuffer
);
} else {
new Notice("Cover image already exists: " + filePath);
return file;
}
} else {
file = await this.app.vault.createBinary(
filePath,
response.arrayBuffer
);
return existingFile;
}
await compressImage(this.app, file, {
height: 400,
quality: 0.8,
maintainAspectRatio: true,
});
if (file.extension !== "jpg") {
await this.app.fileManager.renameFile(
file,
file.path.replace(/\.[^.]+$/, ".jpg")
);
}
return file;
return await this.app.vault.createBinary(
filePath,
response.arrayBuffer
);
}
async createEntry(book: Book): Promise<void> {

View File

@ -12,10 +12,8 @@
import OpenFileLink from "@ui/components/OpenFileLink.svelte";
import DateFilter from "@ui/components/DateFilter.svelte";
import BookCover from "@ui/components/BookCover.svelte";
import { setAppContext } from "@ui/stores/app";
const { plugin }: SvelteCodeBlockProps = $props();
setAppContext(plugin.app);
const settingsStore = createSettings(plugin);
setSettingsContext(settingsStore);
@ -90,7 +88,7 @@
{#if metadata[letter]}
{@const meta = metadata[letter]}
<OpenFileLink file={meta.file}>
<BookCover book={meta.book} size="fill" />
<BookCover app={plugin.app} book={meta.book} />
</OpenFileLink>
{:else}
<div class="placeholder">{letter}</div>
@ -141,6 +139,13 @@
font-weight: bold;
font-style: italic;
}
:global(img) {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-l);
}
}
}
}

View File

@ -19,10 +19,8 @@
import OpenFileLink from "@ui/components/OpenFileLink.svelte";
import moment from "@external/moment";
import BookCover from "@ui/components/BookCover.svelte";
import { setAppContext } from "@ui/stores/app";
const { plugin }: SvelteCodeBlockProps = $props();
setAppContext(plugin.app);
const settingsStore = createSettings(plugin);
setSettingsContext(settingsStore);
@ -230,8 +228,8 @@
<div class="cover">
<OpenFileLink file={meta.file}>
<BookCover
app={plugin.app}
book={meta.book}
size="fill"
/>
</OpenFileLink>
</div>
@ -300,7 +298,6 @@
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: -12px;
.total-pages-read {
font-size: var(--font-smallest);
@ -325,6 +322,15 @@
width: 100%;
height: 100%;
}
:global(img) {
border-radius: var(--radius-l);
width: 100%;
height: 100%;
min-width: 100%;
min-height: 100%;
object-fit: cover;
}
}
&:has(.cover:first-child:nth-last-child(2)) {

View File

@ -17,10 +17,6 @@
import DetailsView from "@ui/components/DetailsView.svelte";
import { setAppContext } from "@ui/stores/app";
import type { SvelteCodeBlockProps } from "./SvelteCodeBlockRenderer";
import {
createReadingLog,
setReadingLogContext,
} from "@ui/stores/reading-log.svelte";
const { plugin, source }: SvelteCodeBlockProps = $props();
setAppContext(plugin.app);
@ -36,11 +32,6 @@
});
setMetadataContext(metadataStore);
const readingLog = createReadingLog(plugin.readingLog, {
disableAllFiltering: true,
});
setReadingLogContext(readingLog);
let view = $state(settings.defaultView);
onDestroy(() => metadataStore.destroy());
@ -63,11 +54,11 @@
{/if}
</div>
{#if view === "bookshelf"}
<BookshelfView />
<BookshelfView {plugin} />
{:else if view === "table"}
<TableView {settings} />
<TableView {plugin} {settings} />
{:else if view === "details"}
<DetailsView {settings} />
<DetailsView {plugin} {settings} />
{/if}
</div>

View File

@ -1,49 +1,14 @@
<script lang="ts">
import type { BookMetadata } from "@src/types";
import { getAppContext } from "@ui/stores/app";
type NumberUnit =
| "cap"
| "ch"
| "em"
| "ex"
| "ic"
| "lh"
| "rcap"
| "rch"
| "rem"
| "rex"
| "ric"
| "rlh"
| "vh"
| "vw"
| "vmax"
| "vmin"
| "vb"
| "vi"
| "cqw"
| "cqh"
| "cqi"
| "cqb"
| "cqmin"
| "cqmax"
| "px"
| "cm"
| "mm"
| "Q"
| "in"
| "pc"
| "pt"
| "%";
import type { App } from "obsidian";
interface Props {
app: App;
book: BookMetadata;
size?: "fill" | number | `${number}${NumberUnit}`;
size?: number;
}
const { book, size = 500 }: Props = $props();
const app = getAppContext();
const { app, book, size }: Props = $props();
const coverPath = $derived(book.localCoverPath);
const coverFile = $derived(app.vault.getFileByPath(coverPath));
@ -51,54 +16,12 @@
coverFile ? app.vault.getResourcePath(coverFile) : "",
);
const coverAlt = $derived(book.title);
const coverWidth = $derived.by(() => {
if (size === "fill") {
return "100%";
} else if (typeof size === "string") {
return size;
} else if (typeof size === "number") {
return `${size}px`;
} else {
return undefined;
}
});
const coverHeight = $derived.by(() => {
if (size === "fill") {
return "100%";
} else {
return undefined;
}
});
</script>
<div
class="book-cover"
style:--book-cover-width={coverWidth}
style:--book-cover-height={coverHeight}
>
<img src={coverSrc} alt={coverAlt} />
</div>
<img src={coverSrc} alt={coverAlt} width={size} />
<style lang="scss">
:global(:root) {
--book-cover-aspect-ratio: 2 / 3;
}
.book-cover {
width: var(--book-cover-width);
height: var(
--book-cover-height,
calc(var(--book-cover-width) / (var(--book-cover-aspect-ratio)))
);
img {
border-radius: var(--radius-l);
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
img {
border-radius: var(--radius-l);
}
</style>

View File

@ -12,7 +12,10 @@
import { v4 as uuidv4 } from "uuid";
import memoize from "just-memoize";
import type { TFile } from "obsidian";
import { getAppContext } from "@ui/stores/app";
interface Props {
plugin: BookTrackerPlugin;
}
interface BookData {
id: string;
@ -31,7 +34,7 @@
books: BookData[];
}
const app = getAppContext();
const { plugin }: Props = $props();
const metadataStore = getMetadataContext();
@ -125,7 +128,7 @@
design={bookData.design}
orientation="flat"
onClick={() =>
app.workspace
plugin.app.workspace
.getLeaf(false)
.openFile(bookData.file)}
/>
@ -140,7 +143,8 @@
color={book.color}
design={book.design}
orientation={book.orientation}
onClick={() => app.workspace.getLeaf(false).openFile(book.file)}
onClick={() =>
plugin.app.workspace.getLeaf(false).openFile(book.file)}
/>
{/if}
{/each}

View File

@ -1,27 +1,27 @@
<script lang="ts">
import { STATUS_IN_PROGRESS, STATUS_READ } from "@src/const";
import type BookTrackerPlugin from "@src/main";
import { getMetadataContext } from "@ui/stores/metadata.svelte";
import type { ShelfSettings } from "@ui/code-blocks/ShelfCodeBlock";
import { Dot, Flame, Star, StarHalf } from "lucide-svelte";
import RatingInput from "./RatingInput.svelte";
import OpenFileLink from "./OpenFileLink.svelte";
import BookCover from "./BookCover.svelte";
import { getReadingLogContext } from "@ui/stores/reading-log.svelte";
interface Props {
plugin: BookTrackerPlugin;
settings: ShelfSettings;
}
const { settings }: Props = $props();
const { plugin, settings }: Props = $props();
const metadataStore = getMetadataContext();
const readingLog = getReadingLogContext();
</script>
<div class="book-details-list">
{#each metadataStore.metadata as meta}
<div class="book-details">
<BookCover book={meta.book} />
<BookCover app={plugin.app} book={meta.book} />
<div class="book-info">
<OpenFileLink file={meta.file}>
<h2 class="book-title">
@ -59,18 +59,11 @@
</p>
{/if}
{#if settings.statusFilter === STATUS_IN_PROGRESS}
{@const logEntryIndex =
readingLog.entries.findLastIndex(
(e) => e.book === meta.file.basename,
)}
{@const logEntry =
logEntryIndex !== -1
? readingLog.entries[logEntryIndex]
: null}
<Dot color="var(--text-muted)" />
<p class="current-page">
Current Page: {logEntry?.pagesReadTotal ?? 0}
Current Page: {plugin.readingLog.getLastEntryForBook(
meta.file.basename,
)?.pagesReadTotal ?? 0}
</p>
{/if}
{#if settings.statusFilter === STATUS_READ}
@ -151,20 +144,16 @@
background-color: var(--background-secondary);
border-radius: var(--radius-l);
:global(.book-cover) {
width: 100%;
height: auto;
max-height: 100%;
:global(img) {
border-radius: var(--radius-l);
max-width: 30%;
}
@container (width < 700px) {
@container (width < 600px) {
flex-direction: column;
align-items: center;
:global(.book-cover) {
height: 100%;
width: auto;
:global(img) {
max-height: 30rem;
max-width: 100%;
}

View File

@ -1,5 +1,6 @@
<script lang="ts">
import { STATUS_IN_PROGRESS, STATUS_READ } from "@src/const";
import type BookTrackerPlugin from "@src/main";
import { getMetadataContext } from "@ui/stores/metadata.svelte";
import Rating from "@ui/components/Rating.svelte";
import type { ShelfSettings } from "@ui/code-blocks/ShelfCodeBlock";
@ -7,10 +8,11 @@
import BookCover from "./BookCover.svelte";
interface Props {
plugin: BookTrackerPlugin;
settings: ShelfSettings;
}
const { settings }: Props = $props();
const { plugin, settings }: Props = $props();
const metadataStore = getMetadataContext();
</script>
@ -36,7 +38,7 @@
{#each metadataStore.metadata as meta}
<tr>
<td class="cover">
<BookCover book={meta.book} size={50} />
<BookCover app={plugin.app} book={meta.book} size={50} />
</td>
<td>
<OpenFileLink file={meta.file}>
@ -94,10 +96,6 @@
&.cover {
padding: 0;
margin: 0;
:global(.book-cover) {
margin: 0 auto;
}
}
}
}

View File

@ -1,18 +1,20 @@
<script lang="ts">
import type { ComponentProps } from "svelte";
import Item from "./Item.svelte";
import type { App, TFile } from "obsidian";
import FileSuggest from "../suggesters/FileSuggest.svelte";
type Props = Omit<ComponentProps<typeof Item>, "control"> & {
app: App;
id: string;
value?: string;
};
let { name, description, id, value = $bindable() }: Props = $props();
let { name, description, app, id, value = $bindable() }: Props = $props();
</script>
<Item {name} {description}>
{#snippet control()}
<FileSuggest {id} asString bind:value />
<FileSuggest {id} {app} asString bind:value />
{/snippet}
</Item>

View File

@ -1,18 +1,20 @@
<script lang="ts">
import type { ComponentProps } from "svelte";
import Item from "./Item.svelte";
import type { App, TFolder } from "obsidian";
import FolderSuggest from "../suggesters/FolderSuggest.svelte";
type Props = Omit<ComponentProps<typeof Item>, "control"> & {
app: App;
id: string;
value?: string;
};
let { name, description, id, value = $bindable() }: Props = $props();
let { name, description, app, id, value = $bindable() }: Props = $props();
</script>
<Item {name} {description}>
{#snippet control()}
<FolderSuggest {id} asString bind:value />
<FolderSuggest {id} {app} asString bind:value />
{/snippet}
</Item>

View File

@ -1,15 +1,18 @@
<script lang="ts">
import type { ComponentProps } from "svelte";
import Item from "./Item.svelte";
import type { App } from "obsidian";
import PropertySuggest from "../suggesters/PropertySuggest.svelte";
type Props = Omit<ComponentProps<typeof Item>, "control"> & {
app: App;
id: string;
value?: string;
accepts?: string[];
};
let {
app,
name,
description,
id,
@ -20,6 +23,6 @@
<Item {name} {description}>
{#snippet control()}
<PropertySuggest {id} asString bind:value {accepts} />
<PropertySuggest {app} {id} asString bind:value {accepts} />
{/snippet}
</Item>

View File

@ -1,10 +1,10 @@
<script lang="ts">
import type { TFile } from "obsidian";
import type { App, TFile } from "obsidian";
import TextInputSuggest, { type Item } from "./TextInputSuggest.svelte";
import type { StringKeys } from "@utils/types";
import { getAppContext } from "@ui/stores/app";
type Props = {
app: App;
id: string;
asString?: boolean;
property?: StringKeys<TFile>;
@ -15,6 +15,7 @@
};
let {
app,
id,
asString,
property = "path",
@ -23,7 +24,6 @@
disabled,
onSelected,
}: Props = $props();
const app = getAppContext();
let items: Item<TFile | string>[] = $state([]);

View File

@ -1,10 +1,10 @@
<script lang="ts">
import { TFolder } from "obsidian";
import { TFolder, type App } from "obsidian";
import TextInputSuggest, { type Item } from "./TextInputSuggest.svelte";
import type { StringKeys } from "@utils/types";
import { getAppContext } from "@ui/stores/app";
type Props = {
app: App;
id: string;
asString?: boolean;
property?: StringKeys<TFolder>;
@ -15,6 +15,7 @@
};
let {
app,
id,
asString,
property = "path",
@ -23,7 +24,6 @@
disabled,
onSelected,
}: Props = $props();
const app = getAppContext();
let items: Item<TFolder | string>[] = $state([]);

View File

@ -6,11 +6,11 @@
</script>
<script lang="ts">
import { getAppContext } from "@ui/stores/app";
import type { App } from "obsidian";
import TextInputSuggest, { type Item } from "./TextInputSuggest.svelte";
type Props = {
app: App;
id: string;
asString?: boolean;
value?: Property | string;
@ -20,6 +20,7 @@
};
let {
app,
id,
asString,
value = $bindable(),
@ -27,7 +28,6 @@
disabled,
onSelected,
}: Props = $props();
const app = getAppContext();
let items: Item<Property | string>[] = $state([]);

View File

@ -11,7 +11,7 @@ export class GoodreadsSearchModal extends SvelteModal<
goodreads: Goodreads,
onSearch: (error: any, results: SearchResult[]) => void = () => {}
) {
super(app, GoodreadsSearchModalView, { app, goodreads, onSearch });
super(app, GoodreadsSearchModalView, { goodreads, onSearch });
}
static createAndOpen(

View File

@ -1,16 +1,12 @@
<script lang="ts">
import { Goodreads, type SearchResult } from "@data-sources/Goodreads";
import { setAppContext } from "@ui/stores/app";
import type { App } from "obsidian";
interface Props {
app: App;
goodreads: Goodreads;
onSearch: (error: any, results?: SearchResult[]) => void;
}
let { app, goodreads, onSearch }: Props = $props();
setAppContext(app);
let { goodreads, onSearch }: Props = $props();
let query = $state("");

View File

@ -19,7 +19,7 @@ export class GoodreadsSearchSuggestModal extends SuggestModal<SearchResult> {
renderSuggestion(searchResult: SearchResult, el: HTMLElement): void {
mount(GoodreadsSearchSuggestion, {
target: el,
props: { app: this.app, searchResult },
props: { searchResult },
});
}

View File

@ -1,15 +1,11 @@
<script lang="ts">
import type { SearchResult } from "@data-sources/Goodreads";
import { setAppContext } from "@ui/stores/app";
import type { App } from "obsidian";
interface Props {
app: App;
searchResult: SearchResult;
}
let { app, searchResult }: Props = $props();
setAppContext(app);
let { searchResult }: Props = $props();
</script>
<div class="obt-goodreads-search-suggestion">

View File

@ -8,7 +8,7 @@ export class RatingModal extends SvelteModal<typeof RatingModalView> {
spiceConfigured: boolean,
onSubmit: (rating: number, spice: number) => void = () => {}
) {
super(app, RatingModalView, { app, spiceConfigured, onSubmit });
super(app, RatingModalView, { spiceConfigured, onSubmit });
}
static createAndOpen(

View File

@ -1,16 +1,12 @@
<script lang="ts">
import RatingInput from "@ui/components/RatingInput.svelte";
import { setAppContext } from "@ui/stores/app";
import { Flame } from "lucide-svelte";
import type { App } from "obsidian";
interface Props {
app: App;
spiceConfigured?: boolean;
onSubmit: (rating: number, spice: number) => void;
}
let { app, spiceConfigured = false, onSubmit }: Props = $props();
setAppContext(app);
let { spiceConfigured = false, onSubmit }: Props = $props();
let rating = $state(0);
let spice = $state(0);

View File

@ -10,7 +10,6 @@
setSettingsContext,
} from "@ui/stores/settings.svelte";
import moment from "@external/moment";
import { setAppContext } from "@ui/stores/app";
const INPUT_DATETIME_FORMAT = "YYYY-MM-DDTHH:mm";
@ -21,7 +20,6 @@
}
let { plugin, entry, onSubmit }: Props = $props();
setAppContext(plugin.app);
const settingsStore = createSettings(plugin);
setSettingsContext(settingsStore);
@ -82,6 +80,7 @@
<label for="book">Book</label>
<FileSuggest
id="book"
app={plugin.app}
asString
property="basename"
inFolder={plugin.settings.bookFolder}

View File

@ -10,7 +10,7 @@ export class ReadingProgressModal extends SvelteModal<
pageCount: number,
onSubmit: (pageNumber: number) => void = () => {}
) {
super(app, ReadingProgressModalView, { app, pageCount, onSubmit });
super(app, ReadingProgressModalView, { pageCount, onSubmit });
}
static createAndOpen(app: App, pageCount: number): Promise<number> {

View File

@ -1,14 +1,11 @@
<script lang="ts">
import { setAppContext } from "@ui/stores/app";
import { App, Notice } from "obsidian";
import { Notice } from "obsidian";
interface Props {
app: App;
pageCount: number;
onSubmit: (pageNumber: number) => void;
}
let { app, pageCount, onSubmit }: Props = $props();
setAppContext(app);
let { pageCount, onSubmit }: Props = $props();
let value = $state(0);
let mode: "page-number" | "percentage" = $state("page-number");

View File

@ -9,14 +9,13 @@
import { createSettings } from "@ui/stores/settings.svelte";
import { onMount } from "svelte";
import type { BookTrackerSettings } from "./types";
import { setAppContext } from "@ui/stores/app";
type Props = {
plugin: BookTrackerPlugin;
};
const { plugin }: Props = $props();
setAppContext(plugin.app);
const { app } = plugin;
const settingsStore = createSettings(plugin);
@ -169,18 +168,21 @@
<div class="obt-settings">
<Header title="Folders" />
<FolderSuggestItem
{app}
id="book-folder"
name="Book Folder"
description="Select the folder where book entries are stored."
bind:value={settingsStore.settings.bookFolder}
/>
<FolderSuggestItem
{app}
id="tbr-folder"
name="To Be Read Folder"
description="Select the folder to use for To Be Read entries"
bind:value={settingsStore.settings.tbrFolder}
/>
<FolderSuggestItem
{app}
id="read-folder"
name="Read Books Folder"
description="Select the folder to use for Read entries."
@ -194,6 +196,7 @@
/>
<Header title="Book Creation" />
<FileSuggestItem
{app}
id="template-file"
name="Template File"
description="Select the template file to use for new book entries."
@ -215,6 +218,7 @@
bind:checked={settingsStore.settings.downloadCovers}
/>
<FolderSuggestItem
{app}
id="cover-folder"
name="Cover Folder"
description="Select the folder to download covers to."
@ -236,6 +240,7 @@
<Header title="Book Properties" />
{#each properties as property}
<PropertySuggestItem
{app}
id={property.key}
name={`${property.label} Property`}
description={property.description}

View File

@ -32,13 +32,6 @@ export interface DateFilterStoreOptions {
* @default false
*/
disableMonthFilter?: boolean;
/**
* If true, the year filter will be disabled
*
* @default false
*/
disableAllFiltering?: boolean;
}
export function createDateFilter<T>(
@ -48,7 +41,6 @@ export function createDateFilter<T>(
initialMonth = false,
initialYear = true,
disableMonthFilter = false,
disableAllFiltering = false,
}: DateFilterStoreOptions
): DateFilterStore & {
filteredData: T[];
@ -72,7 +64,7 @@ export function createDateFilter<T>(
return data()
.filter((item) => {
const date = selector(item);
if (filterYear !== ALL_TIME && !disableAllFiltering) {
if (filterYear !== ALL_TIME) {
if (date.year() !== filterYear) {
return false;
}

View File

@ -1,72 +0,0 @@
import { type App, type TFile } from "obsidian";
interface CompressOptions {
width?: number;
height?: number;
maintainAspectRatio?: boolean;
quality?: number;
}
export async function compressImage(
app: App,
file: TFile,
options: CompressOptions
) {
const img = await new Promise<HTMLImageElement>((resolve) => {
const img = new Image();
img.src = app.vault.getResourcePath(file);
img.onload = () => {
resolve(img);
};
});
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d")!;
const quality = options.quality ?? 1;
let height = options.height;
let width = options.width;
if (!width && !height) {
width = img.width;
height = img.height;
} else if (!width && height) {
width = height * (img.width / img.height);
} else if (!height && width) {
height = width * (img.height / img.width);
}
if (options.maintainAspectRatio) {
const aspectRatio = img.width / img.height;
if (options.height)
if (width! > height!) {
height = width! / aspectRatio;
} else {
width = height! * aspectRatio;
}
}
console.log(width, height);
canvas.width = width!;
canvas.height = height!;
ctx.drawImage(img, 0, 0, width!, height!);
const blob = await new Promise<Blob>((resolve, reject) => {
canvas.toBlob(
(blob) => {
if (blob) {
resolve(blob);
} else {
reject(new Error("Failed to compress image"));
}
},
"image/jpeg",
quality
);
});
return app.vault.modifyBinary(file, await blob.arrayBuffer());
}

View File

@ -4,7 +4,5 @@
"1.2.0": "0.15.0",
"1.3.0": "0.15.0",
"1.3.1": "0.15.0",
"1.3.2": "0.15.0",
"1.4.0": "0.15.0",
"1.4.1": "0.15.0"
"1.3.2": "0.15.0"
}