chore: project structure updated to reflect sveltin 0.7.2 with SK next-302

Author: indaco

config/defaults.js.ts

@@ -1,4 +1,4 @@
-const sveltinVersion = '0.5.4';
-const svelteKitVersion = '1.0.0-next.294';
-
-export { sveltinVersion, svelteKitVersion };
+const sveltinVersion = '0.7.2';
+const sveltekitVersion = process.env.VITE_SVELTEKIT_VERSION;
+const buildTime = process.env.VITE_BUILD_TIME;
+export { sveltinVersion, sveltekitVersion, buildTime };

package.json

@@ -16,9 +16,9 @@
 	"devDependencies": {
 		"@commitlint/cli": "^16.2.1",
 		"@commitlint/config-conventional": "^16.2.1",
-		"@indaco/svelte-iconoir": "2.2.1",
-		"@sveltejs/adapter-static": "^1.0.0-next.29",
-		"@sveltejs/kit": "^1.0.0-next.294",
+		"@indaco/svelte-iconoir": "^2.3.0",
+		"@sveltejs/adapter-static": "1.0.0-next.29",
+		"@sveltejs/kit": "1.0.0-next.302",
 		"@sveltinio/essentials": "^0.1.2",
 		"@sveltinio/seo": "^0.1.5",
 		"@sveltinio/services": "^0.1.2",
@@ -45,7 +45,9 @@
 		"mdsvex": "^0.10.5",
 		"mdsvex-relative-images": "^1.0.1",
 		"postcss": "^8.4.8",
-		"postcss-load-config": "^3.1.3",
+		"postcss-import": "^14.0.2",
+		"postcss-load-config": "^3.1.1",
+		"postcss-nested": "^5.0.6",
 		"prettier": "^2.5.1",
 		"prettier-plugin-svelte": "^2.6.0",
 		"prettier-plugin-tailwindcss": "^0.1.8",

pnpm-lock.yaml

@@ -1,19 +1,14 @@
-const tailwindcss = require('tailwindcss');
-const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
+const autoprefixer = require('autoprefixer');
+const postcssImport = require('postcss-import');
+const nesting = require('tailwindcss/nesting');
+const tailwindcss = require('tailwindcss');
 
 const mode = process.env.NODE_ENV;
 const dev = mode === 'development';
 
 const config = {
-	plugins: [
-		tailwindcss(),
-		autoprefixer(),
-		!dev &&
-			cssnano({
-				preset: 'default'
-			})
-	]
+	plugins: [postcssImport, nesting, tailwindcss, autoprefixer, !dev && cssnano]
 };
 
 module.exports = config;

postcss.config.cjs

@@ -127,3 +127,11 @@
 		--color-border-accent-dark: #1e2028 /* pearl */;
 	}
 }
+
+.md-content {
+	@apply prose prose-sveltin;
+}
+
+.md-content-dark {
+	@apply prose-invert;
+}

src/app.css

@@ -0,0 +1,68 @@
+import type { DynamicObject } from '$lib/interfaces';
+import { ContentMetadata, ResourceContent, ResourceContentMaker } from '@sveltinio/widgets/types';
+
+export const list = async (withMarkup = false) => {
+	const contentFiles = import.meta.glob('/content/cli/**/*.{svelte.md,md,svx}');
+	const contentFilesArray = Object.entries(contentFiles);
+	const contents = await Promise.all(
+		contentFilesArray.map(async ([path, resolver]) => {
+			const data = await resolver();
+			const result: DynamicObject = {
+				meta: data.metadata,
+				path: path
+			};
+			if (withMarkup) {
+				result.markup = data.default.render();
+			}
+			return result;
+		})
+	);
+	const publishedByDate = contents
+		.filter((elem) => !elem.meta.draft)
+		.sort((a, b) => (a.meta.created_at < b.meta.created_at ? 1 : -1));
+
+	return publishedByDate;
+};
+
+export const getSingle = async (slug: string) => {
+	const resourceName = 'cli';
+	const publishedByDate = await list(true);
+
+	const selected = publishedByDate.filter((item) => {
+		return item.meta.slug == slug;
+	});
+
+	if (selected.length != 0) {
+		const selectedItemIndex = publishedByDate.findIndex((elem) => slug === elem.meta.slug);
+		const selectedItem = publishedByDate[selectedItemIndex];
+		const current = ResourceContentMaker.createWithValues(
+			resourceName,
+			selectedItem.meta,
+			selectedItem.markup.html
+		);
+		const previous: ResourceContent = {
+			resource: resourceName,
+			metadata: <ContentMetadata>{
+				title: publishedByDate[selectedItemIndex + 1]?.meta.title,
+				slug: publishedByDate[selectedItemIndex + 1]?.meta.slug
+			}
+		};
+		const next: ResourceContent = {
+			resource: resourceName,
+			metadata: <ContentMetadata>{
+				title: publishedByDate[selectedItemIndex - 1]?.meta.title,
+				slug: publishedByDate[selectedItemIndex - 1]?.meta.slug
+			}
+		};
+
+		return {
+			status: 200,
+			current,
+			previous,
+			next
+		};
+	}
+	return {
+		status: 404
+	};
+};

src/lib/cli/apiCli.ts

@@ -6,3 +6,7 @@ export interface ExternalLinkItem {
 	url: string;
 	weight: number;
 }
+
+export interface DynamicObject {
+	[key: string]: any;
+}

src/lib/cli/getCli.js

@@ -3,15 +3,17 @@ import reduce from 'lodash-es/reduce.js';
 
 /**
  * @param {string} on
- * @param {any[]} collection
- * @param {string[]} giveBack
+ * @param {Array.<Object>} collection
+ * @param {Array.<string>} giveBack
+ *
+ * @returns {Array.<Object>}
  */
 export const groupedByOne = (on, collection, giveBack) => {
 	const res = [];
 	const obj = {};
 
 	forEach(collection, (curr) => {
-		const property = curr[on];
+		const property = curr.meta[on];
 		if (property != undefined) {
 			if (!(property in obj)) {
 				obj[property] = { name: property, items: [] };
@@ -20,7 +22,7 @@ export const groupedByOne = (on, collection, giveBack) => {
 
 			let result = {};
 			forEach(giveBack, (value) => {
-				result[value] = curr[value];
+				result[value] = curr.meta[value];
 			});
 			obj[property].items.push(result);
 		}
@@ -31,30 +33,30 @@ export const groupedByOne = (on, collection, giveBack) => {
 
 /**
  * @param {string} on
- * @param {any[]} collection
- * @param {string[]} giveBack
+ * @param {Array.<Object>} collection
+ * @param {Array.<string>} giveBack
+ *
+ * @returns {Array.<Object>}
  */
 export const groupedByMany = (on, collection, giveBack) => {
-	return [
-		Object.entries(
-			reduce(
-				collection,
-				(acc, curr) => {
-					forEach(curr[on], function (item) {
-						let result = {};
-						forEach(giveBack, (element) => {
-							result[element] = curr[element];
-						});
-						if (acc[item]) {
-							acc[item].push(result);
-						} else {
-							acc[item] = [result];
-						}
+	return Object.entries(
+		reduce(
+			collection,
+			(acc, curr) => {
+				forEach(curr.meta[on], function (item) {
+					let result = {};
+					forEach(giveBack, (element) => {
+						result[element] = curr.meta[element];
 					});
-					return acc;
-				},
-				{}
-			)
-		).map(([name, items]) => ({ name, items }))
-	];
+					if (acc[item]) {
+						acc[item].push(result);
+					} else {
+						acc[item] = [result];
+					}
+				});
+				return acc;
+			},
+			{}
+		)
+	).map(([name, items]) => ({ name, items }));
 };

src/lib/interfaces.ts

@@ -1,12 +1,24 @@
-import { published } from '$lib/cli/getCli.js';
+import { list } from '$lib/cli/apiCli';
+import { ContentMetadata, ResourceContent, ResourceContentMaker } from '@sveltinio/widgets/types';
 
 export async function get() {
-	const body = Object.keys(published).map((slug) => ({
-		slug,
-		...published[slug]
-	}));
+	const resourceName = 'cli';
+	const data = await list();
+
+	const items: Array<ResourceContent> = [];
+	data.forEach((elem) => {
+		const item = ResourceContentMaker.createWithValues(
+			resourceName,
+			<ContentMetadata>elem.meta,
+			''
+		);
+		items.push(item);
+	});
 	return {
 		status: 200,
-		body: JSON.stringify(body)
+		body: {
+			resourceName: resourceName,
+			items: items
+		}
 	};
 }

src/lib/utils/collections.js

@@ -0,0 +1,10 @@
+import { sveltinVersion, sveltekitVersion, buildTime } from '$config/defaults.js';
+export function get(): Record<string, unknown> {
+	return {
+		body: {
+			sveltinVersion,
+			sveltekitVersion,
+			buildTime
+		}
+	};
+}