diff --git a/.prettierignore b/.prettierignore index c7fc980..555f181 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,4 +4,5 @@ nextjs/.next parcel/.cache parcel/dist server-side-rendering/dist +snowpack/dist package-lock.json \ No newline at end of file diff --git a/gatsbyjs/src/styles/styles.css b/gatsbyjs/src/styles/styles.css index 70bd200..b2bd8c4 100644 --- a/gatsbyjs/src/styles/styles.css +++ b/gatsbyjs/src/styles/styles.css @@ -1,4 +1,7 @@ body { - font-family: sans-serif; margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', + 'Droid Sans', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } diff --git a/snowpack/.gitignore b/snowpack/.gitignore new file mode 100644 index 0000000..91a3983 --- /dev/null +++ b/snowpack/.gitignore @@ -0,0 +1,3 @@ +dist +node_modules +package-lock.json diff --git a/snowpack/README.md b/snowpack/README.md new file mode 100644 index 0000000..8ba2655 --- /dev/null +++ b/snowpack/README.md @@ -0,0 +1,67 @@ +This folder demonstrates how to bundle [React PDF viewer](https://react-pdf-viewer.dev) with [Snowpack](https://www.snowpack.dev) + +## Install + +* Install the dependencies + +```console +$ npm install +``` + +* Build + +```console +$ npm run build +``` + +* Run locally + +```console +$ npm run start +``` + +Visit http://localhost:8080/ + +## Spotlights + +[App.jsx](src/App.jsx): + +```js +import * as React from 'react'; +import { Viewer, Worker } from '@react-pdf-viewer/core'; +import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; + +// Import the styles +import '@react-pdf-viewer/core/lib/styles/index.css'; +import '@react-pdf-viewer/default-layout/lib/styles/index.css'; + +// Import the file +import samplePdfFile from '../public/pdf-open-parameters.pdf'; + +const App = () => { + // Create a new instance of plugin + const defaultLayoutPluginInstance = defaultLayoutPlugin(); + + return ( + // Set the worker path + +
+ +
+ + ); +}; + +export default App; +``` diff --git a/snowpack/package.json b/snowpack/package.json new file mode 100644 index 0000000..5c83bca --- /dev/null +++ b/snowpack/package.json @@ -0,0 +1,22 @@ +{ + "name": "react-pdf-viewer-snowpack", + "private": true, + "version": "0.0.0", + "scripts": { + "copy": "cp ../assets/pdf-open-parameters.pdf dist", + "build": "snowpack build", + "start": "snowpack dev" + }, + "dependencies": { + "@react-pdf-viewer/core": "2.8.0", + "@react-pdf-viewer/default-layout": "2.8.0", + "pdfjs-dist": "^2.9.359", + "react": "^17.0.2", + "react-dom": "^17.0.2" + }, + "devDependencies": { + "@snowpack/plugin-dotenv": "^2.2.0", + "@snowpack/plugin-react-refresh": "^2.5.0", + "snowpack": "^3.8.8" + } +} diff --git a/snowpack/public/index.html b/snowpack/public/index.html new file mode 100644 index 0000000..12eddb6 --- /dev/null +++ b/snowpack/public/index.html @@ -0,0 +1,13 @@ + + + + + + Snowpack App + + +
+ + + + \ No newline at end of file diff --git a/snowpack/public/pdf-open-parameters.pdf b/snowpack/public/pdf-open-parameters.pdf new file mode 100644 index 0000000..4a547d9 Binary files /dev/null and b/snowpack/public/pdf-open-parameters.pdf differ diff --git a/snowpack/snowpack.config.mjs b/snowpack/snowpack.config.mjs new file mode 100644 index 0000000..21e0d4d --- /dev/null +++ b/snowpack/snowpack.config.mjs @@ -0,0 +1,25 @@ +/** @type {import("snowpack").SnowpackUserConfig } */ +export default { + mount: { + public: { url: '/', static: true }, + src: { url: '/dist' }, + }, + plugins: ['@snowpack/plugin-react-refresh', '@snowpack/plugin-dotenv'], + routes: [ + /* Enable an SPA Fallback in development: */ + // {"match": "routes", "src": ".*", "dest": "/index.html"}, + ], + optimize: { + /* Example: Bundle your final build: */ + // "bundle": true, + }, + packageOptions: { + /* ... */ + }, + devOptions: { + /* ... */ + }, + buildOptions: { + /* ... */ + }, + }; \ No newline at end of file diff --git a/snowpack/src/App.jsx b/snowpack/src/App.jsx new file mode 100644 index 0000000..3452b85 --- /dev/null +++ b/snowpack/src/App.jsx @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { Viewer, Worker } from '@react-pdf-viewer/core'; +import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout'; + +import '@react-pdf-viewer/core/lib/styles/index.css'; +import '@react-pdf-viewer/default-layout/lib/styles/index.css'; + +import samplePdfFile from '../public/pdf-open-parameters.pdf'; + +const App = () => { + const defaultLayoutPluginInstance = defaultLayoutPlugin(); + + return ( + +
+ +
+ + ); +}; + +export default App; diff --git a/snowpack/src/index.css b/snowpack/src/index.css new file mode 100644 index 0000000..b2bd8c4 --- /dev/null +++ b/snowpack/src/index.css @@ -0,0 +1,7 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', + 'Droid Sans', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} diff --git a/snowpack/src/index.jsx b/snowpack/src/index.jsx new file mode 100644 index 0000000..0874a35 --- /dev/null +++ b/snowpack/src/index.jsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import App from './App.jsx'; +import './index.css'; + +ReactDOM.render( + + + , + document.getElementById('root') +); + +// Hot Module Replacement (HMR) - Remove this snippet to remove HMR. +// Learn more: https://www.snowpack.dev/concepts/hot-module-replacement +if (import.meta.hot) { + import.meta.hot.accept(); +}