Merge branch '84-publish-assets-to-npmgithub'

.vscode/nathanblaylock.code-snippets

@@ -1,7 +1,11 @@
-// This file should can be copeid from the package into the local .vscode folder.
+// This file should can be copied from the package into the local .vscode folder.
+
+// Add the following to your package.json file under the scripts section:
+// "postinstall": "cp -f ./node_modules/nathanblaylock.com/.vscode/nathanblaylock.code-snippets .vscode/"
+// This only works for Mac and Linux. For Windows, you will need to use a different command.
 
 {
-  // Not Included in the Svelte 5 Snippet Extension
+  // Not Included in the "Svelte 5 Snippets" Extension
 
   "TS Script": {
     "prefix": "s-ts",

documentation/auto-import-components.md

@@ -0,0 +1,85 @@
+# Auto Import Components
+
+## Locally
+
+This is already set up, but this is what is required:
+
+1. First run `npm install unplugin-svelte-components -D`
+2. Update your vite.config.js to look like the following:
+
+```js
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import Components from 'unplugin-svelte-components/vite';
+
+export default defineConfig({
+  plugins: [
+    Components({
+      dirs: ['src/lib/PACKAGE'],
+      dts: true,
+      eslintrc: {
+        enabled: false,
+      }
+    }),
+    sveltekit(),
+  ],
+});
+```
+
+3. In the `tsconfig.json` file add the `files` property:
+
+```json
+{
+  "files" : ["./components.d.ts"],
+}
+```
+
+## In Another Package
+
+For other repositories like Scoresheet, you can manually import components using `import { Btn } from 'nathanblaylock.com'`. Alternatively you can configure auto-importing with the following.
+
+1. First run `npm install unplugin-svelte-components @types/node -D`
+2. Then add the following to your `vite.config.js` file:
+
+```js
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import Components from 'unplugin-svelte-components/vite'; // https://github.com/Mohamed-Kaizen/unplugin-svelte-components
+import fs from 'fs';
+import path from 'path';
+
+// For auto-importing nathanblaylock.com components
+// Path to the third-party components
+const componentsDir = path.resolve('node_modules/nathanblaylock.com/dist/');
+
+// Get all Svelte file names dynamically
+const componentNames = fs.readdirSync(componentsDir)
+  .filter(file => file.endsWith('.svelte'))
+  .map(file => file.replace('.svelte', ''));
+
+export default defineConfig({
+  plugins: [
+    Components({
+      dirs: [], // This will throw a warning "no components found" but that is just for local files.
+      allowOverrides: true,
+      external: [
+        {
+          from: 'nathanblaylock.com',
+          names: componentNames, // Otherwise you have to manually pass in components you want auto-imported.
+          defaultImport: false
+        }
+      ],
+      eslintrc: { enabled: false }
+    }),
+    sveltekit()
+  ],
+});
+```
+
+3. In the `tsconfig.json` file add the `files` property:
+
+```json
+{
+  "files" : ["./components.d.ts"],
+}
+```

documentation/new-package-component.md

@@ -1,10 +1,10 @@
 # New Package Component
 
-Package components are shared components between multiple applications. They are bundled when running `npm run build` in the deploy steps. Only files and components within the `src/lib/PACKAGE` component will be bundled. All components should be prefixed with a `G` which stands for `Global`.
+Package components are shared components between multiple applications. They are bundled when running `npm run build` in the deploy steps. Only files and components within the `src/lib/PACKAGE` component will be bundled. All components should be prefixed with a `G` which stands for "Global".
 
 When adding a component:
 
-- Prefix the component with a `G`
-- Any other global component references should be manually imported with a relative file path
-- Add the import to the `PACKAGE/index.ts` file
-- Add a code snippet
+1. Prefix the component with a `G`
+2. Any other global component references should be manually imported with a relative file path
+3. Add the import to the `PACKAGE/index.ts` file
+4. Add a code snippet to `.vscode/nathanblaylock.code-snippets`

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nathanblaylock.com",
-	"version": "2.2.4",
+	"version": "2.2.5",
 	"private": true,
 	"type": "module",
 	"exports": {