@functionalcms/svelte-components 0.0.1

package/README.md

@@ -0,0 +1,58 @@
+# create-svelte
+
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm create svelte@latest
+
+# create a new project in my-app
+npm create svelte@latest my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
+
+## Building
+
+To build your library:
+
+```bash
+npm run package
+```
+
+To create a production version of your showcase app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+
+## Publishing
+
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
+
+To publish your library to [npm](https://www.npmjs.com):
+
+```bash
+npm publish
+```

package/dist/components/Box.svelte

@@ -0,0 +1,45 @@
+<script>
+	/**
+	 * @type {string}
+	 */
+	export let url;
+	/**
+	 * @type {url}
+	 */
+	 export let logoSrc;
+	 /**
+	 * @type {string}
+	 */
+	export let logoAlt;
+</script>
+
+<article class="box">
+	<a href={url}>
+		<img class="img" src={logoSrc} alt={logoAlt}  />
+	</a>
+	<h1 class="pbs32 pbe32 pis32 pie32">
+		<a href={url}>
+			<slot name="header" />
+		</a>
+	</h1>
+	<p class="card-demo-desc mbe24">
+		<slot />
+	</p>
+</article>
+
+<style>
+	.box {
+		width: 500px;
+		margin: var(--fluid-32);
+		padding: 0 var(--fluid-12);
+		border: 2px solid black;
+		box-shadow: 2px 2px 5px var(--accent-color);
+		-moz-border-radius: 10px;
+		-webkit-border-radius: 10px;
+		border-radius: 10px; /* future proofing */
+		-khtml-border-radius: 10px; /* for old Konqueror browsers */
+	}
+	.img {		
+		width: 450px;
+	}
+</style>

package/dist/components/Box.svelte.d.ts

@@ -0,0 +1,33 @@
+/** @typedef {typeof __propDef.props}  BoxProps */
+/** @typedef {typeof __propDef.events}  BoxEvents */
+/** @typedef {typeof __propDef.slots}  BoxSlots */
+export default class Box extends SvelteComponent<{
+    url: string;
+    logoSrc: string;
+    logoAlt: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+}> {
+}
+export type BoxProps = typeof __propDef.props;
+export type BoxEvents = typeof __propDef.events;
+export type BoxSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        url: string;
+        logoSrc: string;
+        logoAlt: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+    };
+};
+export {};

package/dist/components/Footer.svelte

@@ -0,0 +1,26 @@
+<script>
+	import logo from '../assets/emblem-reverse.png';
+	import { constants } from '../constants';
+</script>
+
+<footer class="flex-shrink-0">
+	<aside class="items-center grid-flow-col">
+		<img src={logo} alt="logo" />
+		<p>{constants.Motto}</p>
+		<p>Copyright © 2023 - All right reserved by {constants.Company}</p>
+		<p>Powerd by Functional CMS</p>
+	  </aside>
+</footer>
+
+<style>
+	footer {
+		background-color: var(--footer-background-color);
+		color: var(--footer-color);
+		text-align: center;
+		padding: var(--fluid-12);
+		font-size: var(--fluid-14);
+	}
+	a {
+		color: var(--footer-color);
+	}
+</style>

package/dist/components/Footer.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  FooterProps */
+/** @typedef {typeof __propDef.events}  FooterEvents */
+/** @typedef {typeof __propDef.slots}  FooterSlots */
+export default class Footer extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type FooterProps = typeof __propDef.props;
+export type FooterEvents = typeof __propDef.events;
+export type FooterSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/Header.svelte

@@ -0,0 +1,58 @@
+<script>
+// @ts-nocheck
+
+	import { Header, HeaderNav, HeaderNavItem } from "agnostic-svelte";
+	import logo from "../assets/logo.png";
+	import { constants } from "../constants";
+
+	const { url } = import.meta;
+	const modules = import.meta.glob("../../routes/*/*.svelte");
+	const navItems = constants.Navigation;
+	
+	function getPages(url, modules) {
+		const directory = url
+			.replace(/(.*?)\/src\/lib\/components\//, "/")
+			.replace(/(.*?)\/src\/routes\//, "/")
+			.replace(/(.*?)\/immutable\/pages\//, "/")
+			.replace(/(.*?)\/var\/task\//, "/") // Vercel
+			.replace(/\/([^/])*.svelte.*/, "/");
+		const pageRegex = /\/\+page\.svelte$/;
+		const paths = Object.keys(modules)
+			.map((path) => path.replace(/^(.\/)/, directory))
+			.filter((path) => !/\[.*\]/.test(path))
+			.filter((path) => pageRegex.test(path))
+			.map((path) => path.replace(pageRegex, ""))
+			.map((path) => path || "/")
+			.map((path) => path.replace("../../routes/", ""))
+			.map((path) => path.replace("../../routes", ""))
+			.filter((page) => navItems.hasOwnProperty(page))
+			.sort();
+		return paths;
+	};
+	
+	const pages = getPages(url, modules);
+</script>
+
+<div class="container">
+	<Header>
+		<div slot="logoleft">
+			<a href="/">
+				<img src={logo} alt="Functional IT Solutions" />
+			</a>
+		</div>
+		<HeaderNav css="nav-overrides">
+			{#each pages as page}
+				<HeaderNavItem
+					><a href={page}>{navItems[page]}</a></HeaderNavItem
+				>
+			{/each}
+		</HeaderNav>
+	</Header>
+</div>
+
+<style>
+	a {
+		font-size: var(--fluid-20) !important;
+		font-weight: bold;
+	}
+</style>

package/dist/components/Header.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  HeaderProps */
+/** @typedef {typeof __propDef.events}  HeaderEvents */
+/** @typedef {typeof __propDef.slots}  HeaderSlots */
+export default class Header extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type HeaderProps = typeof __propDef.props;
+export type HeaderEvents = typeof __propDef.events;
+export type HeaderSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/dist/components/Hero.svelte

@@ -0,0 +1,31 @@
+<script>
+	/**
+	 * @type {string}
+	 */
+	export let url;
+</script>
+
+<header>
+	<h1>
+		<slot name="header" />
+	</h1>
+	<p>
+		<slot />
+	</p>
+	<div>
+		<a class="item keychainify-checked" href={url}>
+			<slot name="link" />
+		</a>
+	</div>
+</header>
+
+<style>
+	header {
+		margin-top: var(--fluid-24);
+		margin-bottom: var(--fluid-48);
+		text-align: center;
+	}
+	h1 {
+		font-size: var(--fluid-48);
+	}
+</style>

package/dist/components/Hero.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  HeroProps */
+/** @typedef {typeof __propDef.events}  HeroEvents */
+/** @typedef {typeof __propDef.slots}  HeroSlots */
+export default class Hero extends SvelteComponent<{
+    url: string;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    header: {};
+    default: {};
+    link: {};
+}> {
+}
+export type HeroProps = typeof __propDef.props;
+export type HeroEvents = typeof __propDef.events;
+export type HeroSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        url: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        default: {};
+        link: {};
+    };
+};
+export {};

package/dist/constants.d.ts

@@ -0,0 +1,5 @@
+export namespace constants {
+    let Company: string;
+    let Motto: string;
+    let Navigation: {};
+}

package/dist/constants.js

@@ -0,0 +1,6 @@
+export const constants =   
+{
+    Company: "Your company name",
+    Motto: "Hey, work with us",
+    Navigation: {}
+};

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import Box from './components/Box.svelte';
+import Hero from './components/Hero.svelte';
+import Header from './components/Header.svelte';
+import Footer from './components/Footer.svelte';
+export { Box, Hero, Header, Footer };

package/dist/index.js

@@ -0,0 +1,13 @@
+// Reexport your entry components here
+
+import Box from './components/Box.svelte';
+import Hero from './components/Hero.svelte';
+import Header from './components/Header.svelte';
+import Footer from './components/Footer.svelte';
+
+export {
+    Box,
+    Hero,
+    Header,
+    Footer
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+	"name": "@functionalcms/svelte-components",
+	"version": "0.0.1",
+	"publishConfig": {
+		"access": "public"
+	},
+	"author": "Functional IT Solutions",
+	"license": "MIT",
+    "main": "dist/index.js",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/package": "^2.0.0",
+		"@typescript-eslint/eslint-plugin": "^5.45.0",
+		"@typescript-eslint/parser": "^5.45.0",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"prettier": "^2.8.0",
+		"prettier-plugin-svelte": "^2.10.1",
+		"publint": "^0.1.9",
+		"svelte": "^4.0.5",
+		"svelte-check": "^3.4.3",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2",
+		"agnostic-svelte": "^1.1.27"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module"
+}