Skip to content

Commit

Permalink
refactor: move templates folder
Browse files Browse the repository at this point in the history
  • Loading branch information
HuakunShen committed Nov 15, 2024
1 parent 5ead38b commit e812d42
Show file tree
Hide file tree
Showing 151 changed files with 706 additions and 3 deletions.
2 changes: 1 addition & 1 deletion apps/create-kunkun/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ fs.emptyDirSync(tmpDistTemplatesPath)
/* -------------------------------------------------------------------------- */
console.log(getRootDir())

const templatesPath = path.join(getRootDir(), "../..", "templates")
const templatesPath = path.join(getRootDir(), "../..", "packages/templates")
fs.copySync(templatesPath, tmpDistTemplatesPath, { dereference: os.platform() === "win32" })

/* -------------------------------------------------------------------------- */
Expand Down
4 changes: 2 additions & 2 deletions apps/create-kunkun/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import chalk from "chalk"
import { Command, Option } from "commander"
import fs from "fs-extra"
import pkgJson from "./package.json"
import { createKunkunVersion, getTemplateRoot, isProduction } from "./src/constants"
import { createKunkunVersion, getTemplateRoot, isProduction, NODE_ENV } from "./src/constants"
import { cleanExtension, patchHBS, patchManifestJsonSchema, patchPkgJsonDep } from "./src/patch"
import { getLatestNpmPkgVersion, tarExtract } from "./src/utils"

Expand Down Expand Up @@ -64,7 +64,7 @@ if (!fs.existsSync(outdir)) {

async function copyTemplate(templateTgz: string, targetFolderName: string): Promise<string> {
const destDir = path.join(outdir, targetFolderName)

if (!fs.existsSync(templateTgz)) {
console.error(`Worker Extension Template not found at ${templateTgz}`)
process.exit(1)
Expand Down
File renamed without changes.
File renamed without changes.
File renamed without changes.
Empty file removed packages/templates/.gitkeep
Empty file.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
23 changes: 23 additions & 0 deletions packages/templates/template-ext-sveltekit/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
node_modules

# Output
.output
.vercel
/.svelte-kit
/build

# OS
.DS_Store
Thumbs.db

# Env
.env
.env.*
!.env.example
!.env.test

# Vite
vite.config.js.timestamp-*
vite.config.ts.timestamp-*
extensions_support/

1 change: 1 addition & 0 deletions packages/templates/template-ext-sveltekit/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
engine-strict=true
4 changes: 4 additions & 0 deletions packages/templates/template-ext-sveltekit/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
# Package Managers
package-lock.json
pnpm-lock.yaml
yarn.lock
15 changes: 15 additions & 0 deletions packages/templates/template-ext-sveltekit/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
"printWidth": 100,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
}
15 changes: 15 additions & 0 deletions packages/templates/template-ext-sveltekit/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# template-ext-sveltekit

## 0.0.3

### Patch Changes

- Updated dependencies
- @kksh/api@0.0.4

## 0.0.2

### Patch Changes

- Updated dependencies [fba6a49]
- @kksh/svelte@0.0.2
69 changes: 69 additions & 0 deletions packages/templates/template-ext-sveltekit/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
# Kunkun Custom UI Extension Template (SvelteKit)

[Custom UI Extension Documentation](https://docs.kunkun.sh/extensions/custom-ui-ext/)

This is a template for a custom UI extension.

This type of extension is basically a static website. You can use any frontend framework you like, this template uses [SvelteKit](https://svelte.dev/).

It is assumed that you have some knowledge of frontend development with SvelteKit.

## Development

Development is the same as developing a normal website.

```bash
pnpm install
pnpm dev
pnpm build
```

- To develop and preview the extension in Kunkun, you need to run the `Add Dev Extension` command in Kunkun, and register this extension's path.

In `package.json`, `"devMain"` is the url for development server, and `"main"` is the path to static `.html` file for production.

To load the extension in development mode, you have to enable it with `Toggle Dev Extension Live Load Mode` command in Kunkun. A `Live` badge will be shown on the commands. This indicates that dev extensions will be loaded from `devMain` instead of `main`.

## Advanced

### Rendering Mode

This is a Meta-Framework template, and already configured with SSG rendering mode.
Please do not enable SSR unless you know what you are doing.
There will not be a JS runtime in production, and Kunkun always load the extension as static files.

The main benefit of using a meta-framework is that it comes with routing, and will output multiple `.html` files, which makes multi-command support much easier.

## Verify Build and Publish

```bash
pnpm build # make sure the build npm script works
npx kksh@latest verify # Verify some basic settings before publishing
```

It is recommended to build the extension with the same environment our CI uses.

The docker image used by our CI is `huakunshen/kunkun-ext-builder:latest`.

You can use the following command to build the extension with the same environment our CI uses.
This requires you to have docker installed, and the shell you are using has access to it via `docker` command.

```bash
npx kksh@latest build # Build the extension with
```

`pnpm` is used to install dependencies and build the extension.

The docker image environment also has `node`, `pnpm`, `npm`, `bun`, `deno` installed.
If your build failed, try debug with `huakunshen/kunkun-ext-builder:latest` image in interative mode and bind your extension volume to `/workspace`.

After build successfully, you should find a tarball file ends with `.tgz` in the root of your extension.
The tarball is packaged with `npm pack` command. You can uncompress it to see if it contains all the necessary files.

This tarball is the final product that will be published and installed in Kunkun. You can further verify your extension by installing this tarball directly in Kunkun.

After verifying the tarball, it's ready to be published.

Fork [KunkunExtensions](https://github.com/kunkunsh/KunkunExtensions) repo, add your extension to the `extensions` directory, and create a PR.

Once CI passed and PR merged, you can use your extension in Kunkun.
14 changes: 14 additions & 0 deletions packages/templates/template-ext-sveltekit/components.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"$schema": "https://shadcn-svelte.com/schema.json",
"style": "new-york",
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/app.css",
"baseColor": "neutral"
},
"aliases": {
"components": "$lib/components",
"utils": "$lib/utils"
},
"typescript": true
}
33 changes: 33 additions & 0 deletions packages/templates/template-ext-sveltekit/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import js from '@eslint/js';
import ts from 'typescript-eslint';
import svelte from 'eslint-plugin-svelte';
import prettier from 'eslint-config-prettier';
import globals from 'globals';

/** @type {import('eslint').Linter.Config[]} */
export default [
js.configs.recommended,
...ts.configs.recommended,
...svelte.configs['flat/recommended'],
prettier,
...svelte.configs['flat/prettier'],
{
languageOptions: {
globals: {
...globals.browser,
...globals.node
}
}
},
{
files: ['**/*.svelte'],
languageOptions: {
parserOptions: {
parser: ts.parser
}
}
},
{
ignores: ['build/', '.svelte-kit/', 'dist/']
}
];
84 changes: 84 additions & 0 deletions packages/templates/template-ext-sveltekit/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
{
"$schema": "./node_modules/@kksh/api/dist/schema.json",
"name": "template-ext-sveltekit",
"version": "0.0.3",
"private": true,
"kunkun": {
"name": "TODO: Change Display Name",
"shortDescription": "A Custom UI template for sveltekit",
"longDescription": "A Custom UI template for sveltekit",
"identifier": "template-ext-sveltekit",
"icon": {
"type": "iconify",
"value": "logos:svelte-icon"
},
"demoImages": [],
"permissions": [
"clipboard:read-text",
"notification:all"
],
"customUiCmds": [
{
"main": "/",
"dist": "build",
"devMain": "http://localhost:5173",
"name": "Sveltekit Template Home Page",
"cmds": []
},
{
"main": "about",
"dist": "build",
"devMain": "http://localhost:5173/about",
"name": "Sveltekit Template About Page",
"cmds": []
}
],
"templateUiCmds": []
},
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --check . && eslint .",
"format": "prettier --write ."
},
"dependencies": {
"@kksh/api": "workspace:*",
"@kksh/svelte": "0.1.4",
"clsx": "^2.1.1",
"lucide-svelte": "^0.416.0",
"mode-watcher": "^0.4.0",
"tailwind-merge": "^2.4.0",
"tailwind-variants": "^0.2.1"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.0.0",
"@sveltejs/kit": "^2.0.0",
"@sveltejs/vite-plugin-svelte": "^4.0.0",
"svelte": "^5.0.0",
"svelte-check": "^4.0.0",
"typescript": "^5.0.0",
"vite": "^5.0.3",
"@sveltejs/adapter-static": "^3.0.6",
"@tailwindcss/typography": "^0.5.13",
"@types/eslint": "^9.6.0",
"autoprefixer": "^10.4.19",
"eslint": "^9.0.0",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-svelte": "^2.36.0",
"globals": "^15.0.0",
"postcss": "^8.4.38",
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"prettier-plugin-tailwindcss": "^0.6.4",
"tailwindcss": "^3.4.4",
"typescript-eslint": "^8.0.0-alpha.20"
},
"type": "module",
"files": [
"build",
".gitignore"
]
}
6 changes: 6 additions & 0 deletions packages/templates/template-ext-sveltekit/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {}
}
};
80 changes: 80 additions & 0 deletions packages/templates/template-ext-sveltekit/src/app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
@import url("@kksh/svelte/themes");
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 3.9%;

--muted: 0 0% 96.1%;
--muted-foreground: 0 0% 45.1%;

--popover: 0 0% 100%;
--popover-foreground: 0 0% 3.9%;

--card: 0 0% 100%;
--card-foreground: 0 0% 3.9%;

--border: 0 0% 89.8%;
--input: 0 0% 89.8%;

--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;

--secondary: 0 0% 96.1%;
--secondary-foreground: 0 0% 9%;

--accent: 0 0% 96.1%;
--accent-foreground: 0 0% 9%;

--destructive: 0 72.2% 50.6%;
--destructive-foreground: 0 0% 98%;

--ring: 0 0% 3.9%;

--radius: 0.5rem;
}

.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;

--muted: 0 0% 14.9%;
--muted-foreground: 0 0% 63.9%;

--popover: 0 0% 3.9%;
--popover-foreground: 0 0% 98%;

--card: 0 0% 3.9%;
--card-foreground: 0 0% 98%;

--border: 0 0% 14.9%;
--input: 0 0% 14.9%;

--primary: 0 0% 98%;
--primary-foreground: 0 0% 9%;

--secondary: 0 0% 14.9%;
--secondary-foreground: 0 0% 98%;

--accent: 0 0% 14.9%;
--accent-foreground: 0 0% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;

--ring: 0 0% 83.1%;
}
}

@layer base {
* {
@apply border-border;
}

body {
@apply bg-background text-foreground;
}
}
13 changes: 13 additions & 0 deletions packages/templates/template-ext-sveltekit/src/app.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// See https://kit.svelte.dev/docs/types#app
// for information about these interfaces
declare global {
namespace App {
// interface Error {}
// interface Locals {}
// interface PageData {}
// interface PageState {}
// interface Platform {}
}
}

export {};
Loading

0 comments on commit e812d42

Please sign in to comment.