Add: Home, What, About and Self Hosting info pages with routing (DRAFT)

package.json

@@ -19,6 +19,7 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@picocss/pico": "^2.0.0-alpha1"
+		"@picocss/pico": "^2.0.0-alpha1",
+		"svelte-routing": "^2.0.0"
 	}
 }

src/routes/+page.svelte

@@ -1,22 +1,37 @@
 <script>
   import "@picocss/pico";
+  import { Router, Link, Route } from 'svelte-routing';
+
+  import Home from './Home.svelte';
+  import About from './About.svelte';
+  import What from './What.svelte';
+  import SelfHosting from './SelfHosting.svelte';
 </script>
 
-<main class="container">
-  <header>
-    <nav>
-      <ul>
-        <li><strong>Brand Here</strong></li>
-      </ul>
-      <ul>
-        <li><a href="#">Link</a></li>
-        <li><a href="#">Link</a></li>
-      </ul>
-    </nav>
-  </header>
-  <hr />
-  <h1>Welcome to SvelteKit</h1>
-  <p>
-    Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
-  </p>
-</main>
+<style>
+
+</style>
+
+<Router>
+  <main class="container">
+    <header>
+      <nav>
+        <ul>
+          <li><Link to="/"><strong>NOSTRKIT</strong></Link></li>
+          <li>by <a href="https://plebnet.dev/">PlebNet.dev</a></li>
+        </ul>
+        <ul>
+          <li><Link to="/what">What is NOSTRKIT?</Link></li>
+          <li><Link to="/about">About NOSTRKIT</Link></li>
+          <li><Link to="/selfhosting">Self Hosting</Link></li>
+        </ul>
+      </nav>
+    </header>
+    <hr />
+
+    <Route path="/"><Home /></Route>
+    <Route path="/about" component={About} />
+    <Route path="/what" component={What} />
+    <Route path="/selfhosting" component={SelfHosting} />
+  </main>
+</Router>

src/routes/About.svelte

@@ -0,0 +1,71 @@
+<script>
+
+</script>
+
+<style>
+
+</style>
+
+<div>
+    <h1>About NOSTRKIT</h1>
+    <h5>
+        Nostr Kit is an innovative initiative that streamlines the creation of 
+        personalized Nostr services for any domain. Our project revolves around 
+        a convenient template repository that is readily accessible for cloning. 
+        With Nostr Kit, you can effortlessly generate your own Nostr NIP-5 and 
+        Lightning addresses, eliminating the need for manual entries in the 
+        .well-known section of your website or the creation of LNURLs.
+    </h5>
+    <ul>
+        <br>
+        <li>
+            Our 1-page web application caters to your specific domain needs. You can 
+            easily customize various options to suit your preferences, and we ensure 
+            that your choices don't interfere with each other. If you lack a Nostr 
+            public key (npub) or Nostr secret key (nsec), don't worry – we'll help you 
+            generate one seamlessly.
+        </li>
+        <br>
+        <li>
+            Embracing user-friendliness, Nostr Kit empowers you to create a NIP-5 identifier 
+            (e.g., [email protected]) and a lightning address via LNURLp on LNBits. Additionally, 
+            you have the flexibility to redirect to your personalized LNURL hosted on your 
+            personal node. To provide a holistic experience, our app includes an email field 
+            in compliance with Lightning address specifications.
+        </li>
+        <br>
+        <li>
+            Beyond mere identifiers, Nostr Kit unlocks the potential to access a Nostr relay 
+            and participate in public Nostr chat rooms within your domain. Payments are made 
+            easier with our integrated LN (Lightning Network) payment options, tailored to your 
+            organization's needs. You can even choose renewal payments based on your preferred 
+            subscription intervals, be it monthly or yearly.
+        </li>
+        <br>
+        <li>
+            Our backend services utilize LNBits and Nostr Relay (specifically the one in LNBits 
+            extension for small groups). For seamless communication, we introduce Nostrchat, 
+            your go-to platform for staying connected with other users. Furthermore, we're actively 
+            working on integrating Nostrchat with popular platforms like Discord and Telegram, 
+            bridging the communication divide.
+        </li>
+        <br>
+        <li>
+            Our reference section contains vital links to Nostr protocol NIPs, Nostr key-to-DNS 
+            mapping, encrypted DM specifications, and public chat guidelines. To delve deeper 
+            into the technical aspects, you can explore the LNURL specification, LightningAddress.com, 
+            and Bolt 11 specification.
+        </li>
+        <br>
+        <li>
+            We value your experience and are continuously improving Nostr Kit. In the future, we envision 
+            introducing backend Primal caching services as a paid user option, empowering you with efficient 
+            membership management.
+        </li>
+        <br>
+        <li>
+            Join us on this exciting journey, and let Nostr Kit revolutionize the way you create and manage 
+            Nostr services for your domain.
+        </li>
+    </ul>
+</div>

src/routes/Home.svelte

@@ -0,0 +1,71 @@
+<script>
+
+</script>
+
+<style>
+
+</style>
+
+<main>
+    <div>
+        <h1>Welcome to NOSTRKIT</h1>
+        <h5>
+            Are you looking to effortlessly create your own Nostr services for 
+            any domain? Look no further! Nostr Kit is here to revolutionize 
+            your Nostr experience, offering a powerful and user-friendly 
+            template repository that puts the control back in your hands.
+        </h5>
+        <ul>
+            <li>
+                <strong>Unleash the Potential:</strong> Whether you need a personalized Nostr NIP-5, 
+                a lightning-fast Lightning address, or access to a Nostr relay and 
+                public chat rooms, Nostr Kit has you covered. Our 1-page web app 
+                allows you to tailor your preferences, no dependencies or manual 
+                entries required.
+            </li>
+            <br>
+            <li>
+                <strong>Seamless Integration:</strong> With Nostr Kit, generating a NIP-5 identifier 
+                (e.g., [email protected]) is a breeze. Take advantage of LNURLp on LNBits to effortlessly 
+                create your Lightning address. Want more? Redirect to your custom LNURL hosted on your 
+                personal node.
+            </li>
+            <br>
+            <li>
+                <strong>Stay Connected:</strong> Nostr Kit goes beyond identifiers. 
+                ngage with other users in public Nostr chat rooms and invite them 
+                to join your domain's community. And guess what? You can even make 
+                payments effortlessly, with LN payments integrated for a seamless 
+                user experience.
+            </li>
+            <br>
+            <li>
+                <strong>Secure and Reliable:</strong> Rest easy knowing that Nostr 
+                Kit utilizes LNBits and Nostr Relay for secure and reliable backend 
+                services. Plus, we ensure that generating a Nostr key is a smooth 
+                process, guiding you every step of the way.
+            </li>
+            <br>
+            <li>
+                <strong>Explore the Possibilities:</strong> Our reference section 
+                is a treasure trove of essential links to Nostr protocol NIPs, 
+                LNURL specifications, and more. Delve into the technical aspects 
+                and harness the full potential of Nostr Kit.
+            </li>
+            <br>
+            <li>
+                <strong>Join the Future:</strong> Nostr Kit is constantly evolving, 
+                and we have an exciting future in store. Stay tuned for the addition 
+                of backend Primal caching services, taking your membership management 
+                to new heights.
+            </li>
+            <br>
+            <li>
+                Welcome to the Nostr Kit community! Get ready to redefine your 
+                Nostr experience and unlock a world of possibilities. Embrace 
+                simplicity, flexibility, and innovation – all at your fingertips. 
+                Let's make your Nostr journey extraordinary together.
+            </li>
+        </ul>
+    </div>
+</main>

src/routes/SelfHosting.svelte

@@ -0,0 +1,76 @@
+<script>
+
+</script>
+
+<style>
+
+</style>
+
+<div>
+    <h1>Guide to Self Hosting</h1>
+    <p>In this guide, we will walk you through the process of hosting a SvelteKit project.
+        We'll explain step by step, making it easy to follow along no matter your technical abilities.
+        The process include cloning the repository, building the project and deploying on a platform of your choice.
+    </p>
+    <ul>
+        <h3><li>Clone the Repository</li></h3>
+        <ol>
+            <p>1. Go the the GitHub repository containing the NOSTRKIT project</p>
+            <p>2. Click on the "Code" button and copy the reository's URL</p>
+            <p>3. Access your terminal and navigate tot the directory where you want to store your project</p>
+            <p>4. Run the following command to the clone the reository: <strong>git clone `repository-url`</strong></p>
+        </ol>
+        <h3><li>Build the Project</li></h3>
+        <ol>
+            <p>1. In the terminal, navigate to the cloned project directory using the <strong>cd</strong> command.</p>
+            <p>2. Run the folling command to install the projects dependencies: <strong>npm install</strong></p>
+            <p>3. After the installation is complete, build the project using the following command: <strong>npm run build</strong></p>
+        </ol>
+        <h3><li>Deploy to a Hosting Service</li></h3>
+        <ol>
+            <h5><li>GitHub Pages</li></h5>
+            <ol>
+                <p>1. Make sure you have commited all changed tot eh repository using Git</p>
+                <p>2. On GitHub, navigate to the "Settings" tab</p>
+                <p>3. Scroll down to the "GitHub Pages" section</p>
+                <p>4. Selete the "gh-pages" branch as the source for GitHub Pages deployment</p>
+                <p>5. Click the "Save" button</p>
+                <p>6. After a few moments, your project will be deployed and you can access it using the provided URL</p>
+            </ol>
+            <h5><li>Vercel</li></h5>
+            <ol>
+                <p>1. Go to the Vercel website (vercel.com) and log in or create a new account</p>
+                <p>2. Click on the "Import Project" button</p>
+                <p>3. Choose the repository where you cloned your project</p>
+                <p>4. Configure deployment setting as needed</p>
+                <p>5. Click on the "Deploy" button</p>
+                <p>6. After deployment is complete, your project witll be live on Vercel and you can access it using the URL provided</p>
+            </ol>
+            <h5><li>Netlify</li></h5>
+            <ol>
+                <p>1. Go to the Netlify website (netlify.com) and log in or create a new account </p>
+                <p>2. Click on the "New Site from Git" button</p>
+                <p>3. Choose your Git provider (GitHub) and select the repository</p>
+                <p>4. Configure the build setting and set the build command to <strong>`npm run build`</strong>
+                and the publish directory to <strong>`build`</strong></p>
+                <p>5. Click on the "Deploy" button</p>
+                <p>6. Once deployment is done, your project will be hsoted on Netlify and you'll be able to access using the URL provided</p>
+            </ol>
+            <h5><li>Heroku</li></h5>
+            <ol>
+                <p>1. Go to the Heroku website (heroku.com) and log in or create a new account</p>
+                <p>2. Crea a new app by clicking the "New" button and selecting "Create new app"</p>
+                <p>3. Choose a unique app name and select your region</p>
+                <p>4. Connect your Heroku app to your GitHub project repository</p>
+                <p>5. Enable automatic deploy or manyakky deploy the branch of your choice</p>
+                <p>6. Once deployment is complete, your project will be live on Heroku and you will be able to access it using the URL provided</p>
+            </ol>
+        </ol>
+        <h3>Congratualtions</h3>
+        <p>
+            You have successfully hosted your SvelteKit project! Each platfor offer various advantages
+             and features, so choose the one that best fits your projects needs. If you encouter and issues during the process, don't hesitate
+             to refer to their documentation or seek help from their respective support communities. Happy deploying!
+        </p>
+    </ul>
+</div>

src/routes/What.svelte

@@ -0,0 +1,56 @@
+<script>
+
+</script>
+
+<style>
+
+</style>
+
+<div>
+    <h1>What is NOSTRKIT?</h1>
+    <h5>
+        Nostr Kit is a versatile template project designed to simplify the
+         creation of Nostr services for any domain. Nostr Kit provides a
+         ready-to-use repository that can be easily cloned, allowing users
+         to auto-generate their Nostr NIP-5 (Nostr Identifier Protocol)
+         or Lightning addresses without the need for manual interventions
+         like adding entries to the .well-known section of their websites
+         or creating LNURLs.
+    </h5>
+    <ul>
+        <li>
+            The features of Nostr Kit encompass creating a NIP-5 identifier
+             (e.g., [email protected]) and a Lightning address via LNURLp on
+             LNBits. Users also have the choice to redirect to their own 
+             custom LNURL hosted on their personal node. Additionally, 
+             the app allows users to include their email field following 
+             the Lightning address specifications.
+        </li>
+        <li>
+            Nostr Kit goes beyond just creating identifiers; it enables users
+             to access a Nostr relay and facilitates inviting users to public
+             Nostr chat rooms specific to their domains. To enhance the user
+             experience, Nostr Kit seamlessly integrates LN (Lightning Network) 
+             payments for any or all of the above functionalities, making the 
+             payment process organization-specific. Users may also opt for renewal 
+             payments, offering flexibility in subscription durations (e.g., monthly or yearly).
+        </li>
+        <li>
+            For the backend services, Nostr Kit leverages LNBits and Nostr Relay 
+            (utilizing the one in LNBits extension for small groups). It also 
+            integrates Nostrchat, providing a communication platform for users. 
+            The project aims to extend the integration of Nostrchat with platforms 
+            like Discord or Telegram by creating bridges.
+        </li>
+        <li>
+            The reference section provides essential links, including Nostr protocol NIPs, 
+            Nostr key-to-DNS mapping, encrypted DM specifications, and public chat guidelines. 
+            Users can leverage the LNURL specification, LightningAddress.com, and Bolt 11 
+            specification for further insights.
+        </li>
+        <li>
+            In the future, Nostr Kit envisions additional features, such as backend Primal 
+            caching services as a paid user option, allowing users to manage memberships efficiently.
+        </li>
+    </ul>
+</div>