Skip to content

Commit c2aa097

Browse files
ananduremananananduremanan
committed
Initial Commit
0 parents  commit c2aa097

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+3211
-0
lines changed

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Dependency directories
2+
node_modules/
3+
npm-debug.log
4+
yarn-error.log
5+
6+
# Optional: Lock files
7+
package-lock.json
8+
yarn.lock
9+
10+
# Environment variables
11+
.env
12+
13+
# Editor/IDE files
14+
.vscode/
15+
.idea/
16+
*.sublime-project
17+
*.sublime-workspace
18+
19+
# Log files
20+
*.log
21+
22+
# Operating System files
23+
.DS_Store
24+
Thumbs.db

‎README.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
# Create-Svelte-Docs-Theme
2+
3+
Create-Svelte-Docs-Theme is a powerful documentation theme generator tailored specifically for Svelte projects. With this tool, you can effortlessly generate professional-grade documentation for your Svelte components, APIs, or project tutorials with ease.
4+
5+
## Features
6+
7+
- **Easy Customization:** Customize themes, layouts, and styles to match your project's branding and requirements.
8+
- **Dark Mode Support:** Seamlessly switch between light and dark modes for improved readability in any environment.
9+
- **SVX Integration:** Integrate Markdown content alongside your Svelte components for comprehensive documentation.
10+
- **Tailwind CSS Support:** Built-in support for Tailwind CSS ensures consistent styling and customization options.
11+
12+
## Installation
13+
14+
To install Create-Svelte-Docs-Theme, simply use npm:
15+
16+
```bash
17+
npx create create-svelte-docs-theme@latest mydocs
18+
```
19+
20+
## Getting Started
21+
22+
For detailed instructions on getting started with Create-Svelte-Docs-Theme, please refer to the documentation.
23+
24+
## Contributing
25+
26+
We welcome contributions from the community! If you'd like to contribute to Create-Svelte-Docs-Theme, please read our [contribution guidelines](CONTRIBUTING.md) and submit a pull request.
27+
28+
## License
29+
30+
Create-Svelte-Docs-Theme is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
31+
32+
---
33+
34+
**Note:** This project is not affiliated with or endorsed by the Svelte framework. Svelte is a trademark of its respective owners.

‎docTheme/.gitignore

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
vite.config.js.timestamp-*
10+
vite.config.ts.timestamp-*

‎docTheme/package.json

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
{
2+
"name": "sveltebblockdocs",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite dev",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
10+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
11+
},
12+
"devDependencies": {
13+
"@sveltejs/adapter-auto": "^3.0.0",
14+
"@sveltejs/kit": "^2.0.0",
15+
"@sveltejs/vite-plugin-svelte": "^3.0.0",
16+
"@tailwindcss/typography": "^0.5.13",
17+
"autoprefixer": "^10.4.19",
18+
"flowbite": "^2.3.0",
19+
"flowbite-svelte": "^0.46.1",
20+
"mdsvex": "^0.11.0",
21+
"postcss": "^8.4.38",
22+
"svelte": "^4.2.7",
23+
"svelte-check": "^3.6.0",
24+
"tailwindcss": "^3.4.3",
25+
"tslib": "^2.4.1",
26+
"typescript": "^5.0.0",
27+
"vite": "^5.0.3"
28+
},
29+
"type": "module",
30+
"dependencies": {
31+
"@grampro/svelte-block": "^0.0.18",
32+
"jspdf-autotable": "^3.8.2",
33+
"lucide-svelte": "^0.378.0",
34+
"url": "^0.11.3"
35+
}
36+
}

‎docTheme/postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export default {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎docTheme/src/app.css

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
article {
6+
width: 100%;
7+
}
8+
9+
h3 {
10+
margin-top: 1rem !important;
11+
}
12+
13+
table th {
14+
@apply border p-1;
15+
}
16+
17+
td {
18+
@apply border;
19+
}
20+
21+
tr {
22+
@apply even:bg-gray-50 dark:even:bg-gray-700;
23+
}
24+
25+
.language-svelte {
26+
@apply text-yellow-300;
27+
}
28+
29+
.language-svelte .keyword {
30+
@apply text-blue-400;
31+
}
32+
33+
.language-svelte .string {
34+
@apply text-white;
35+
}
36+
37+
.language-svelte .punctuation {
38+
@apply text-blue-500;
39+
}
40+
41+
.language-svelte .script {
42+
@apply text-green-500;
43+
}
44+
45+
.language-svelte .language-javascript {
46+
@apply text-green-300;
47+
}
48+
49+
.prose {
50+
max-width: 85ch !important;
51+
}

‎docTheme/src/app.d.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// See https://kit.svelte.dev/docs/types#app
2+
// for information about these interfaces
3+
declare global {
4+
namespace App {
5+
// interface Error {}
6+
// interface Locals {}
7+
// interface PageData {}
8+
// interface PageState {}
9+
// interface Platform {}
10+
}
11+
}
12+
13+
export {};

‎docTheme/src/app.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
%sveltekit.head%
8+
</head>
9+
<body data-sveltekit-preload-data="hover" class="bg-white dark:bg-gray-800">
10+
<div style="display: contents">%sveltekit.body%</div>
11+
</body>
12+
</html>

‎docTheme/src/lib/components/Navbar.svelte

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<script lang="ts">
2+
import { DarkMode } from "flowbite-svelte";
3+
import { EllipsisVertical } from "lucide-svelte";
4+
import { page } from "$app/stores";
5+
6+
export let menuItemsArray: any[];
7+
8+
let current_url = "";
9+
$: {
10+
current_url = $page.url.pathname.split("/").filter(Boolean).pop() || "/";
11+
}
12+
13+
let showMenuMobile = false;
14+
</script>
15+
16+
<nav
17+
class="p-4 flex justify-between items-center glass fixed top-0 dark:text-white z-50 md:px-16 border-b w-full dark:border-b-0"
18+
>
19+
<a href="/">GBS Svelte Building Block</a>
20+
<div class="flex justify-center items-center gap-2">
21+
<DarkMode />
22+
<input
23+
placeholder="Search Documentation"
24+
class="bg-gray-100 px-2 py-1 rounded-lg outline-none hidden md:block"
25+
/>
26+
<a
27+
href="https://github.com/ananduremanan/svelte-docs-template"
28+
target="_blank"><img src="/icons/github.svg" alt="" class="w-6 h-6" /></a
29+
>
30+
<button
31+
on:click={() => {
32+
showMenuMobile = !showMenuMobile;
33+
}}
34+
>
35+
<EllipsisVertical size="18" class="md:hidden" />
36+
</button>
37+
</div>
38+
</nav>
39+
40+
{#if showMenuMobile}
41+
<div class="z-10 sticky top-16 bg-white p-4 border-b glass">
42+
{#if menuItemsArray}
43+
<ul class="dark:text-white">
44+
<li
45+
class={`mt-2 w-full py-1 ${current_url === "/" ? "bg-blue-200 rounded-lg text-blue-500 dark:bg-blue-300" : ""}`}
46+
>
47+
<a
48+
href="/"
49+
class="p-1 w-full block"
50+
on:click={() => {
51+
showMenuMobile = !showMenuMobile;
52+
}}>Introduction</a
53+
>
54+
</li>
55+
{#each menuItemsArray as menu}
56+
<li
57+
class={`mt-2 w-full py-1 ${current_url === menu ? "bg-blue-200 text-blue-500 rounded-lg dark:bg-blue-300" : ""}`}
58+
>
59+
<a
60+
href={`/components/${menu}`}
61+
class="w-full block p-1"
62+
on:click={() => {
63+
showMenuMobile = !showMenuMobile;
64+
}}>{menu}</a
65+
>
66+
</li>
67+
{/each}
68+
</ul>
69+
{/if}
70+
</div>
71+
{/if}
72+
73+
<style>
74+
.glass {
75+
background: rgba(255, 255, 255, 0.25);
76+
backdrop-filter: blur(4px);
77+
-webkit-backdrop-filter: blur(4px);
78+
}
79+
</style>

‎docTheme/src/lib/components/Sidebar.svelte

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<script lang="ts">
2+
import { page } from "$app/stores";
3+
import { twMerge } from "tailwind-merge";
4+
5+
export let menuItemsArray: any[];
6+
7+
let current_url = "";
8+
$: {
9+
current_url = $page.url.pathname.split("/").filter(Boolean).pop() || "/";
10+
}
11+
</script>
12+
13+
<div class="md:w-1/4 hidden md:block border-r sx-sidebar">
14+
{#if menuItemsArray}
15+
<ul class="dark:text-white px-12">
16+
<li
17+
class={`mt-2 w-full py-1 ${current_url === "/" ? "bg-blue-200 rounded-lg text-blue-500 dark:bg-blue-300" : ""}`}
18+
>
19+
<a href="/" class="p-1 w-full block">Introduction</a>
20+
</li>
21+
{#each menuItemsArray as menu}
22+
<li
23+
class={`mt-2 w-full py-1 ${current_url === menu ? "bg-blue-200 text-blue-500 rounded-lg dark:bg-blue-300" : ""}`}
24+
>
25+
<a href={`/components/${menu}`} class="w-full block p-1">{menu}</a>
26+
</li>
27+
{/each}
28+
</ul>
29+
{/if}
30+
</div>

‎docTheme/src/lib/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// place files you want to import through the `$lib` alias in this folder.

‎docTheme/src/routes/+layout.svelte

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script lang="ts">
2+
import "../app.css";
3+
import Navbar from "$lib/components/Navbar.svelte";
4+
import { onMount } from "svelte";
5+
import Sidebar from "$lib/components/Sidebar.svelte";
6+
7+
let menuItemsArray: any[] = [];
8+
9+
async function fetchData() {
10+
const modules = import.meta.glob("./components/**/*.svx");
11+
const menuItems = Object.keys(modules).map(
12+
(item) => item.replace("./components/", "").split("/")[0]
13+
);
14+
menuItemsArray = menuItems;
15+
}
16+
17+
onMount(fetchData);
18+
</script>
19+
20+
<Navbar {menuItemsArray} />
21+
<div class="flex flex-col md:flex-row h-full mt-24">
22+
<Sidebar {menuItemsArray} />
23+
<div class="overflow-auto w-full max-h-[87vh]">
24+
<article
25+
class="prose lg:prose-xl dark:prose-invert px-4 md:text-base sx-content dark:prose-pre:bg-gray-700"
26+
>
27+
<slot />
28+
</article>
29+
<div class="flex flex-col px-4 mb-8">
30+
<div class="text-sm mt-10 text-gray-500 justify-end prose">
31+
last updated on
32+
</div>
33+
</div>
34+
</div>
35+
</div>

‎docTheme/src/routes/+page.svx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
### Introduction
2+
3+
This Documentation describes how to install and use `gbs-svelte-block` component library.
4+
5+
#### Installation
6+
7+
```bash
8+
npm i @grampro/svelte-block
9+
```

‎docTheme/src/routes/components/Dropdown/+page.svx

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
### DropDown
2+
3+
4+
Hey This is a Dropdown

0 commit comments

Comments
 (0)