Skip to content

Commit bf4b07e

Browse files
bobsingorbobsingor
committed
Add snippet package to EmbedPDF examples
1 parent 34a2847 commit bf4b07e

8 files changed

Lines changed: 228 additions & 2 deletions

File tree

‎examples/svelte-tailwind/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"@embedpdf/plugin-viewport": "workspace:*",
5858
"@embedpdf/plugin-zoom": "workspace:*",
5959
"@embedpdf/utils": "workspace:*",
60+
"@embedpdf/svelte-pdf-viewer": "workspace:*",
6061
"@sveltejs/adapter-auto": "^6.1.0",
6162
"@sveltejs/adapter-vercel": "^6.0.0",
6263
"@sveltejs/kit": "^2.43.2",

‎examples/svelte-tailwind/src/routes/+page.svelte‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,13 @@
2727
</div>
2828

2929
<div class="space-y-4">
30+
<a
31+
href="/viewer-snippet"
32+
class="block rounded-lg bg-gradient-to-r from-rose-500 to-orange-500 px-6 py-3 text-center font-semibold text-white shadow-lg transition-all hover:from-rose-600 hover:to-orange-600 hover:shadow-xl"
33+
>
34+
✨ Snippet Viewer (Easiest!)
35+
</a>
36+
3037
<a
3138
href="/viewer"
3239
class="block rounded-lg bg-indigo-600 px-6 py-3 text-center font-semibold text-white transition-colors hover:bg-indigo-700"
@@ -58,7 +65,8 @@
5865

5966
<div class="mt-8 rounded-lg bg-indigo-50 p-4">
6067
<p class="text-sm text-indigo-900">
61-
<strong>Getting Started:</strong> Choose a viewer to open and load your PDF documents. The ViewManager
68+
<strong>Getting Started:</strong> Choose a viewer to open and load your PDF documents. The
69+
<strong>Snippet Viewer</strong> is the easiest way to get started - just one component! The ViewManager
6270
version supports split views, the simple version uses tabs, and the schema-driven viewer demonstrates
6371
the powerful declarative UI system.
6472
</p>

‎examples/svelte-tailwind/src/routes/viewer-snippet/+page.svelte‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<script lang="ts">
2+
import {
3+
PDFViewer,
4+
type PDFViewerConfig,
5+
type PluginRegistry,
6+
type EmbedPdfContainer,
7+
} from '@embedpdf/svelte-pdf-viewer';
8+
9+
/**
10+
* Snippet Viewer Page
11+
*
12+
* This is the simplest way to embed a PDF viewer in your Svelte application.
13+
* The PDFViewer component from @embedpdf/svelte-pdf-viewer handles all the
14+
* complexity of setting up the engine, plugins, and UI.
15+
*
16+
* Just provide a config object and you're done!
17+
*/
18+
19+
let isReady = $state(false);
20+
21+
const viewerConfig: PDFViewerConfig = {
22+
src: 'https://snippet.embedpdf.com/ebook.pdf',
23+
theme: {
24+
preference: 'dark',
25+
},
26+
};
27+
28+
function handleInit(event: CustomEvent<EmbedPdfContainer>) {
29+
console.log('PDF Viewer initialized', event.detail);
30+
}
31+
32+
function handleReady(event: CustomEvent<PluginRegistry>) {
33+
console.log('PDF Viewer ready with registry', event.detail);
34+
isReady = true;
35+
}
36+
</script>
37+
38+
<div class="flex h-screen flex-col bg-slate-900">
39+
<!-- Header -->
40+
<header
41+
class="flex items-center justify-between border-b border-slate-700 bg-slate-800 px-4 py-3"
42+
>
43+
<div class="flex items-center gap-4">
44+
<a href="/" class="flex items-center gap-2 text-slate-300 transition-colors hover:text-white">
45+
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
46+
<path
47+
stroke-linecap="round"
48+
stroke-linejoin="round"
49+
stroke-width="2"
50+
d="M10 19l-7-7m0 0l7-7m-7 7h18"
51+
/>
52+
</svg>
53+
<span class="text-sm font-medium">Back</span>
54+
</a>
55+
<div class="h-6 w-px bg-slate-600"></div>
56+
<h1 class="text-lg font-semibold text-white">Snippet PDF Viewer</h1>
57+
</div>
58+
<div class="flex items-center gap-2">
59+
<span class="rounded-full bg-emerald-500/20 px-3 py-1 text-xs font-medium text-emerald-400">
60+
@embedpdf/svelte-pdf-viewer
61+
</span>
62+
</div>
63+
</header>
64+
65+
<!-- Viewer Container -->
66+
<div class="flex-1 overflow-hidden">
67+
<PDFViewer
68+
config={viewerConfig}
69+
class="h-full w-full"
70+
on:init={handleInit}
71+
on:ready={handleReady}
72+
/>
73+
</div>
74+
75+
<!-- Footer Info -->
76+
<footer class="border-t border-slate-700 bg-slate-800 px-4 py-2">
77+
<div class="flex items-center justify-between text-xs text-slate-400">
78+
<span>
79+
This viewer uses the <code
80+
class="rounded bg-slate-700 px-1.5 py-0.5 font-mono text-emerald-400">PDFViewer</code
81+
>
82+
snippet component - the simplest way to embed a PDF viewer.
83+
</span>
84+
{#if isReady}
85+
<span class="flex items-center gap-1.5">
86+
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
87+
Ready
88+
</span>
89+
{:else}
90+
<span class="flex items-center gap-1.5">
91+
<span class="h-2 w-2 animate-pulse rounded-full bg-amber-500"></span>
92+
Loading...
93+
</span>
94+
{/if}
95+
</div>
96+
</footer>
97+
</div>

‎examples/vue-tailwind/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
"@embedpdf/plugin-view-manager": "workspace:*",
5555
"@embedpdf/plugin-viewport": "workspace:*",
5656
"@embedpdf/plugin-zoom": "workspace:*",
57+
"@embedpdf/vue-pdf-viewer": "workspace:*",
5758
"@embedpdf/utils": "workspace:*",
5859
"lucide-vue-next": "^0.555.0",
5960
"tailwind-merge": "^3.4.0",

‎examples/vue-tailwind/src/application.vue‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<ViewerPage v-else-if="route === '/viewer'" />
55
<ViewerSimplePage v-else-if="route === '/viewer-simple'" />
66
<ViewerSchemaPage v-else-if="route === '/viewer-schema'" />
7+
<ViewerSnippetPage v-else-if="route === '/viewer-snippet'" />
78
<HomePage v-else />
89
</template>
910

@@ -14,6 +15,7 @@ import AboutPage from './pages/about.vue';
1415
import ViewerPage from './pages/viewer.vue';
1516
import ViewerSimplePage from './pages/viewer-simple.vue';
1617
import ViewerSchemaPage from './pages/viewer-schema.vue';
18+
import ViewerSnippetPage from './pages/viewer-snippet.vue';
1719
1820
const { route } = useHashRoute();
1921
</script>

‎examples/vue-tailwind/src/pages/home.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@
2424
</div>
2525

2626
<div class="space-y-4">
27+
<a
28+
href="#/viewer-snippet"
29+
class="block rounded-lg bg-gradient-to-r from-rose-500 to-orange-500 px-6 py-3 text-center font-semibold text-white shadow-lg transition-all hover:from-rose-600 hover:to-orange-600 hover:shadow-xl"
30+
>
31+
✨ Snippet Viewer (Easiest!)
32+
</a>
33+
2734
<a
2835
href="#/viewer"
2936
class="block rounded-lg bg-indigo-600 px-6 py-3 text-center font-semibold text-white transition-colors hover:bg-indigo-700"
@@ -56,7 +63,8 @@
5663
<div class="mt-8 rounded-lg bg-indigo-50 p-4">
5764
<p class="text-sm text-indigo-900">
5865
<strong>Getting Started:</strong> Choose a viewer to open and load your PDF documents. The
59-
ViewManager version supports split views, the simple version uses tabs, and the
66+
<strong>Snippet Viewer</strong> is the easiest way to get started - just one component!
67+
The ViewManager version supports split views, the simple version uses tabs, and the
6068
schema-driven viewer demonstrates our powerful declarative UI system!
6169
</p>
6270
</div>

‎examples/vue-tailwind/src/pages/viewer-snippet.vue‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<template>
2+
<div class="flex h-screen flex-col bg-slate-900">
3+
<!-- Header -->
4+
<header
5+
class="flex items-center justify-between border-b border-slate-700 bg-slate-800 px-4 py-3"
6+
>
7+
<div class="flex items-center gap-4">
8+
<a
9+
href="#/"
10+
class="flex items-center gap-2 text-slate-300 transition-colors hover:text-white"
11+
>
12+
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
13+
<path
14+
stroke-linecap="round"
15+
stroke-linejoin="round"
16+
stroke-width="2"
17+
d="M10 19l-7-7m0 0l7-7m-7 7h18"
18+
/>
19+
</svg>
20+
<span class="text-sm font-medium">Back</span>
21+
</a>
22+
<div class="h-6 w-px bg-slate-600"></div>
23+
<h1 class="text-lg font-semibold text-white">Snippet PDF Viewer</h1>
24+
</div>
25+
<div class="flex items-center gap-2">
26+
<span class="rounded-full bg-emerald-500/20 px-3 py-1 text-xs font-medium text-emerald-400">
27+
@embedpdf/vue-pdf-viewer
28+
</span>
29+
</div>
30+
</header>
31+
32+
<!-- Viewer Container -->
33+
<div class="flex-1 overflow-hidden">
34+
<PDFViewer
35+
ref="viewerRef"
36+
:config="viewerConfig"
37+
class="h-full w-full"
38+
@init="handleInit"
39+
@ready="handleReady"
40+
/>
41+
</div>
42+
43+
<!-- Footer Info -->
44+
<footer class="border-t border-slate-700 bg-slate-800 px-4 py-2">
45+
<div class="flex items-center justify-between text-xs text-slate-400">
46+
<span>
47+
This viewer uses the
48+
<code class="rounded bg-slate-700 px-1.5 py-0.5 font-mono text-emerald-400"
49+
>PDFViewer</code
50+
>
51+
snippet component - the simplest way to embed a PDF viewer.
52+
</span>
53+
<span v-if="isReady" class="flex items-center gap-1.5">
54+
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
55+
Ready
56+
</span>
57+
<span v-else class="flex items-center gap-1.5">
58+
<span class="h-2 w-2 animate-pulse rounded-full bg-amber-500"></span>
59+
Loading...
60+
</span>
61+
</div>
62+
</footer>
63+
</div>
64+
</template>
65+
66+
<script setup lang="ts">
67+
import { ref } from 'vue';
68+
import {
69+
PDFViewer,
70+
type PDFViewerConfig,
71+
type PluginRegistry,
72+
type EmbedPdfContainer,
73+
} from '@embedpdf/vue-pdf-viewer';
74+
75+
/**
76+
* Snippet Viewer Page
77+
*
78+
* This is the simplest way to embed a PDF viewer in your Vue application.
79+
* The PDFViewer component from @embedpdf/vue-pdf-viewer handles all the
80+
* complexity of setting up the engine, plugins, and UI.
81+
*
82+
* Just provide a config object and you're done!
83+
*/
84+
85+
const viewerRef = ref<InstanceType<typeof PDFViewer> | null>(null);
86+
const isReady = ref(false);
87+
88+
const viewerConfig: PDFViewerConfig = {
89+
src: 'https://snippet.embedpdf.com/ebook.pdf',
90+
theme: {
91+
preference: 'dark',
92+
},
93+
};
94+
95+
const handleInit = (container: EmbedPdfContainer) => {
96+
console.log('PDF Viewer initialized', container);
97+
};
98+
99+
const handleReady = (registry: PluginRegistry) => {
100+
console.log('PDF Viewer ready with registry', registry);
101+
isReady.value = true;
102+
};
103+
</script>

‎pnpm-lock.yaml‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)