Skip to content

Commit 813a701

Browse files
pr4j3shpr4j3sh
committed
added homepage
1 parent 6c43a10 commit 813a701

File tree

10 files changed

+83
-101
lines changed

10 files changed

+83
-101
lines changed

‎docs/guides/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head> </head>
4+
<body>
5+
<div class="container">
6+
<div id="navbar"></div>
7+
<main id="guides">guides</main>
8+
<div id="footer"></div>
9+
</div>
10+
<script type="module" src="/main.js"></script>
11+
</body>
12+
</html>

‎docs/index.html‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -5,42 +5,47 @@
55
<div id="app" class="container">
66
<div id="navbar"></div>
77
<main>
8+
<h3>Build faster. Focus on your product, not the setup.</h3>
89
<article>
9-
<p class="font-semibold">Hey there,</p>
1010
<p>
11-
This is Vanilla Javascript + Tailwind CSS template with dark/light
12-
theme mode, svg icons support with Icones, pre-styled components,
13-
fully responsive and SEO friendly.
11+
With <b>frames</b>, you can skip setup and focus on building. Choose
12+
from ready-to-use templates, with custom CSS and pre-integrated
13+
utilities. Build faster and smarter!
1414
</p>
1515
</article>
1616
<article>
17-
<p>Use this template via <code>@pr4j3sh/frames</code></p>
18-
<pre><code>npm create @pr4j3sh/frames@latest js-tw myapp</code></pre>
19-
<blockquote>
20-
You can replace <code>myapp</code> with the choice of your name.
21-
</blockquote>
17+
<b>Usage</b>
18+
<pre><code>npm create @pr4j3sh/frames@latest &lt;template_name&gt; myproject</code></pre>
2219
</article>
23-
<article>
24-
<p>Run the app using</p>
25-
<pre><code>npm run dev</code></pre>
20+
<article class="btns">
21+
<a href="/frames/templates/">
22+
<button>Get Started</button>
23+
</a>
24+
<a href="https://github.com/pr4j3sh/frames" target="_blank">
25+
<button class="secondary">Github</button>
26+
</a>
2627
</article>
27-
<a href="https://github.com/pr4j3sh/js-tw">
28-
<button>Get Started</button>
29-
</a>
3028
<article>
31-
<p class="font-semibold">Read more</p>
29+
<b>Read more</b>
3230
<ul>
33-
<li><a href="https://vite.dev/guide/">Vite Documentation</a></li>
3431
<li>
35-
<a href="https://tailwindcss.com/docs/utility-first"
36-
>Tailwind CSS Documentation</a
37-
>
32+
<a class="link" href="/frames/guides/">Guides</a>
3833
</li>
3934
<li>
40-
<a href="https://icones.js.org/">Icones</a>
35+
<a
36+
class="link"
37+
href="https://pr4j3sh.github.io/ui/"
38+
target="_blank"
39+
>frames/ui</a
40+
>
4141
</li>
4242
<li>
43-
<a href="https://github.com/pr4j3sh/frames">@pr4j3sh/frames</a>
43+
<a
44+
class="link"
45+
href="https://www.npmjs.com/package/@pr4j3sh/create-frames"
46+
target="_blank"
47+
>frames/cli</a
48+
>
4449
</li>
4550
</ul>
4651
</article>

‎docs/main.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@ import "./src/components/head";
33
import "./src/components/navbar";
44
import "./src/lib/theme";
55
import "./src/components/footer";
6+
import "./src/components/templates";

‎docs/src/components/footer.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,13 @@ import { AUTHOR } from "../lib/consts";
22

33
const component = `<footer>
44
<p>
5-
<a href="${AUTHOR.URL}" target="_blank">${AUTHOR.USERNAME}</a>
5+
&copy; <a href="${AUTHOR.URL}" target="_blank">${AUTHOR.USERNAME}</a>
66
</p>
7+
<article class="btns">
8+
<a href="${AUTHOR.TWITTER}" target="_blank">twitter</a>
9+
<span>/</span>
10+
<a href="${AUTHOR.GITHUB}" target="_blank">github</a>
11+
</article>
712
</footer>`;
813

914
const footer = document.getElementById("footer");

‎docs/src/components/navbar.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import { SITE } from "../lib/consts";
22

33
const component = `<nav>
4-
<a href="/" class="font-semibold">${SITE.REPO}</a>
5-
<ul>
6-
<li>
4+
<a href="/${SITE.REPO}/" class="font-semibold">${SITE.REPO}</a>
5+
<ul class="btns">
6+
<button class="secondary small">Request a template</button>
77
<button class="icon" id="theme-toggle" aria-label="Theme"></button>
8-
</li>
98
</ul>
109
</nav>`;
1110

‎docs/src/components/templates.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
const items = [];

‎docs/src/lib/consts.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
export const SITE = {
2-
TITLE: "Vanilla JS + Tailwind CSS",
3-
DESCRIPTION:
4-
"A Vanilla Javascript + Tailwind CSS template with pre-configured styles, dark theme, svg icon support and fully responsive.",
5-
URL: "https://pr4j3sh.github.io/js-tw/",
6-
REPO: "js-tw",
2+
TITLE: "frames",
3+
DESCRIPTION: "Build faster. Focus on your product, not the setup.",
4+
URL: "https://pr4j3sh.github.io/frames/",
5+
REPO: "frames",
76
};
87

98
export const AUTHOR = {
109
NAME: "Prajesh Pratap Singh",
1110
USERNAME: "pr4j3sh",
1211
EMAIL: "[email protected]",
1312
URL: "https://pr4j3sh.vercel.app/",
13+
TWITTER: "https://x.com/pr4j3sh",
14+
GITHUB: "https://github.com/pr4j3sh",
1415
};

‎docs/style.css‎

Lines changed: 1 addition & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1 @@
1-
@tailwind base;
2-
@tailwind components;
3-
@tailwind utilities;
4-
5-
body {
6-
@apply bg-gray-50 text-gray-950 dark:bg-gray-950 dark:text-gray-50 transition-all ease-in-out;
7-
}
8-
9-
svg {
10-
@apply h-4 w-4;
11-
}
12-
13-
.container {
14-
@apply m-auto max-w-lg flex flex-col gap-4 h-screen px-2 md:px-0;
15-
}
16-
17-
nav {
18-
@apply my-4 flex items-center justify-between;
19-
}
20-
21-
main {
22-
@apply flex-grow flex flex-col gap-4;
23-
}
24-
25-
pre {
26-
@apply border border-gray-200 p-2 rounded-md my-2 bg-gray-100 overflow-auto text-sm dark:bg-gray-900 dark:border-gray-800;
27-
}
28-
29-
code {
30-
@apply text-sm p-0.5 rounded bg-gray-100 dark:bg-gray-900;
31-
}
32-
33-
blockquote {
34-
@apply border-l-gray-300 dark:border-l-gray-800 border-l-4 pl-2;
35-
}
36-
37-
li a {
38-
@apply underline text-gray-800 dark:text-gray-200;
39-
}
40-
41-
hr {
42-
@apply border border-gray-200 dark:border-gray-800 my-2;
43-
}
44-
45-
button {
46-
@apply py-1.5 px-4 bg-gray-900 hover:bg-gray-800 text-gray-50 rounded-lg font-semibold border border-gray-200 dark:border-gray-800 dark:bg-gray-50 dark:text-gray-900 hover:dark:bg-gray-200;
47-
}
48-
49-
.secondary {
50-
@apply bg-gray-100 hover:bg-gray-200 text-gray-950 dark:bg-gray-900 dark:text-gray-50 hover:dark:bg-gray-800;
51-
}
52-
53-
.icon {
54-
@apply p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-950 dark:bg-gray-900 dark:text-gray-50 hover:dark:bg-gray-800;
55-
}
56-
57-
section {
58-
@apply flex flex-col gap-2;
59-
}
60-
61-
.card {
62-
@apply border border-gray-200 dark:border-gray-800 rounded-md p-4 flex flex-col gap-4 bg-gray-100 dark:bg-gray-900;
63-
}
64-
65-
footer {
66-
@apply py-4 flex items-center justify-between text-sm text-gray-700 dark:text-gray-400;
67-
}
1+
@import url("https://pr4j3sh.github.io/ui/style.css");

‎docs/templates/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head> </head>
4+
<body>
5+
<div class="container">
6+
<div id="navbar"></div>
7+
<main id="templates">templates</main>
8+
<div id="footer"></div>
9+
</div>
10+
<script type="module" src="/main.js"></script>
11+
</body>
12+
</html>

‎docs/vite.config.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,15 @@
1-
export default {
1+
import { resolve } from "path";
2+
import { defineConfig } from "vite";
3+
4+
export default defineConfig({
25
base: "/frames/",
3-
};
6+
build: {
7+
rollupOptions: {
8+
input: {
9+
main: resolve(__dirname, "index.html"),
10+
templates: resolve(__dirname, "templates/index.html"),
11+
guides: resolve(__dirname, "guides/index.html"),
12+
},
13+
},
14+
},
15+
});

0 commit comments

Comments
 (0)