cms init
This commit is contained in:
parent
ae91149a67
commit
4c4447a41e
File diff suppressed because it is too large
Load Diff
|
@ -12,6 +12,7 @@
|
|||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^1.1.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"flowbite-svelte": "^0.28.4",
|
||||
"postcss": "^8.4.19",
|
||||
"sass": "^1.56.1",
|
||||
"svelte": "^3.52.0",
|
||||
|
@ -21,8 +22,10 @@
|
|||
"vite": "^3.2.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@bytemd/plugin-gfm": "^1.17.4",
|
||||
"@icons-pack/svelte-simple-icons": "^3.0.0",
|
||||
"appwrite": "^10.1.0",
|
||||
"bytemd": "^1.17.4",
|
||||
"svelte-i18n": "^3.6.0",
|
||||
"svelte-routing": "^1.6.0"
|
||||
}
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
<script>
|
||||
import { Blockquote, P } from 'flowbite-svelte'
|
||||
</script>
|
||||
|
||||
<Blockquote border bg class="p-4 my-4">
|
||||
<P height="relaxed">
|
||||
<slot />
|
||||
</P>
|
||||
</Blockquote>
|
|
@ -0,0 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { Dropzone } from 'flowbite-svelte'
|
||||
|
||||
export let rules = []
|
||||
</script>
|
||||
|
||||
<Dropzone on:blur on:change on:click on:focus on:mouseenter on:mouseleave on:mouseover>
|
||||
<svg aria-hidden="true" class="mb-3 w-10 h-10 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">{rules.join(', ')}</p>
|
||||
</Dropzone>
|
|
@ -0,0 +1,45 @@
|
|||
<script lang="ts">
|
||||
import { Input, Label, Helper } from 'flowbite-svelte'
|
||||
import id from './idGenerator'
|
||||
|
||||
const elementId = id('input-')
|
||||
|
||||
export let label = ''
|
||||
export let value = ''
|
||||
export let error: string = null
|
||||
|
||||
export let type:
|
||||
| 'color'
|
||||
| 'date'
|
||||
| 'datetime-local'
|
||||
| 'email'
|
||||
| 'file'
|
||||
| 'hidden'
|
||||
| 'image'
|
||||
| 'month'
|
||||
| 'number'
|
||||
| 'password'
|
||||
| 'reset'
|
||||
| 'submit'
|
||||
| 'tel'
|
||||
| 'text'
|
||||
| 'time'
|
||||
| 'url'
|
||||
| 'week'
|
||||
| 'search' = 'text'
|
||||
</script>
|
||||
|
||||
<div class="mb-6">
|
||||
<Label for={elementId} color={error ? 'red' : null} class="mb-2">{label}</Label>
|
||||
|
||||
<Input bind:value {type} color={error ? 'red' : null} id={elementId} {...$$props}>
|
||||
<slot />
|
||||
</Input>
|
||||
|
||||
{#if error}
|
||||
<Helper class="mt-2" color="red">
|
||||
<span class="font-medium">Error!</span>
|
||||
{error}
|
||||
</Helper>
|
||||
{/if}
|
||||
</div>
|
|
@ -0,0 +1,5 @@
|
|||
<div class="h-full w-full top-0 left-0 flex justify-center items-center">
|
||||
<div class="animate-spin inline-block w-6 h-6 border-[3px] border-current border-t-transparent text-current rounded-full" role="status" aria-label="loading">
|
||||
<span class="sr-only">Loading...</span>
|
||||
</div>
|
||||
</div>
|
|
@ -0,0 +1,15 @@
|
|||
<script>
|
||||
import 'bytemd/dist/index.css'
|
||||
import { Editor } from 'bytemd'
|
||||
import gfm from '@bytemd/plugin-gfm'
|
||||
|
||||
const plugins = [gfm()]
|
||||
|
||||
export let value = ''
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<template>
|
||||
<Editor {value} {plugins} on:change={(e) => (value = e.detail.value)} />
|
||||
</template>
|
||||
</div>
|
|
@ -0,0 +1,15 @@
|
|||
<script>
|
||||
import 'bytemd/dist/index.css'
|
||||
import { Viewer } from 'bytemd'
|
||||
import gfm from '@bytemd/plugin-gfm'
|
||||
|
||||
const plugins = [gfm()]
|
||||
|
||||
export let value = ''
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<template>
|
||||
<Viewer {value} {plugins} />
|
||||
</template>
|
||||
</div>
|
|
@ -0,0 +1,60 @@
|
|||
<script>
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
import { flip } from 'svelte/animate'
|
||||
|
||||
export let list
|
||||
export let key = 'id'
|
||||
export let element = 'div'
|
||||
export let active = true
|
||||
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
let source = null
|
||||
let isOver = false
|
||||
|
||||
const start = (e, id) => {
|
||||
e.dataTransfer.clearData()
|
||||
e.dataTransfer.setData('text/plain', id)
|
||||
}
|
||||
|
||||
const over = (target) => isOver !== target.id && (isOver = target.id)
|
||||
const leave = () => isOver === source?.id && (isOver = false)
|
||||
|
||||
const reorder = (source, target) => {
|
||||
if (!active || !source || !target) return
|
||||
if (source.id === target.id) return
|
||||
|
||||
const { order: sourceIndex } = source
|
||||
const { order: targetIndex } = target
|
||||
|
||||
isOver = false
|
||||
|
||||
list[sourceIndex] = [list[targetIndex], (list[targetIndex] = list[sourceIndex])][0]
|
||||
list = list
|
||||
|
||||
dispatch('reorder', { source, target })
|
||||
source = null
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each list as item, order (item[key])}
|
||||
<svelte:element
|
||||
this={element}
|
||||
draggable={active}
|
||||
on:dragstart={(e) => (source = { order, id: item[key] }) && start(e, source.id)}
|
||||
on:dragover|preventDefault={() => over({ order, id: item[key] })}
|
||||
on:dragleave={leave}
|
||||
on:dragenter|preventDefault={() => null}
|
||||
on:drop|preventDefault={() => reorder(source, { order, id: item[key] })}
|
||||
animate:flip={{ duration: source !== null ? 300 : 0 }}
|
||||
class:over={item[key] === isOver}
|
||||
>
|
||||
<slot {item} {order} index={order} />
|
||||
</svelte:element>
|
||||
{/each}
|
||||
|
||||
<style>
|
||||
.over {
|
||||
border-color: rgba(48, 12, 200, 0.2);
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,10 @@
|
|||
import FileDrop from './FileDrop.svelte'
|
||||
import Input from './Input.svelte'
|
||||
import Sortable from './Sortable.svelte'
|
||||
import BlockQuote from './BlockQuote.svelte'
|
||||
import MarkdownEditor from './MarkdownEditor.svelte'
|
||||
import MarkdownRenderer from './MarkdownRenderer.svelte'
|
||||
|
||||
import { Radio, Checkbox, Fileupload as FileUpload, Range, Select, Textarea, Toggle, Hr as HorizontalRule, Button, ButtonGroup } from 'flowbite-svelte'
|
||||
|
||||
export { FileDrop, Input, Radio, Checkbox, FileUpload, Range, Select, Textarea, Toggle, Sortable, BlockQuote, HorizontalRule, MarkdownEditor, MarkdownRenderer, Button, ButtonGroup }
|
|
@ -0,0 +1,6 @@
|
|||
const gen = (function* () {
|
||||
let index = -1
|
||||
while (true) yield index++
|
||||
})()
|
||||
|
||||
export default (pre: string = '') => `${pre}${gen.next().value}`
|
|
@ -1,9 +1,14 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
content: [
|
||||
'./src/**/*.{html,js,svelte,ts}',
|
||||
'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}',
|
||||
],
|
||||
theme: {
|
||||
extend: {}
|
||||
},
|
||||
plugins: [],
|
||||
plugins: [
|
||||
require('flowbite/plugin')
|
||||
],
|
||||
darkMode: 'class'
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue