sveltekit-ui 1.0.0 → 1.0.1

package/README.md

@@ -1,23 +1,45 @@
-## create a svelte project
+## Setup
 
-If you havent created one use `npx create-upppllc-site my-app`
+Refer to https://www.sveltekit-ui.com. for documentation
 
-## install sveltekit-ui
+You can use an existing sveltekit project and install this package in your project with
+`npm install sveltekit-ui`
 
-If you're seeing this, you've probably already done this step. Congrats!
+or to start a new project with a starter template (recommended). In your terminal cd into a folder you want to put your project files in such as /projects/my-project-all to use as the parent folder for stuff related to your project (but replace "my-project" with your own project name)
 
-```bash
-# create a new project in the current directory
-npm install @upppllc/sveltekit-ui
-```
+wait until july 1st for this part create-sveltekit-ui-site
+
+`npx create-sveltekit-ui-site my-project`
+
+## Open Code Editor
+
+`code .` should open the project in your code editor such as vscode
+
+## Update Package
+
+It's possible the starter template is a few updates behind. Check for updates by running `ncu -u`. You should run that periodically to keep the latest version of our components
 
 ## Developing
 
 Once you've created a project and installed dependencies start a development server:
 
 ```bash
+npm i
 npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
 ```
+
+## Browser
+
+That should spit out a url like http://localhost:5173/ where you should see your starting website.
+
+## Branding
+
+You'll want to create a Logo at some point and use that in the nav bar, browser tab, google search results, etc. If you can make an svg that is best but an image will work as well. If you are advanced I like https://affinity.serif.com/en-us/designer/ for macbook to make my logos and other graphics. It has a generous free trial period too.
+
+I like https://jakearchibald.github.io/svgomg/ to minify svg code and set to viewbox etc. Then you can generate favicons with https://realfavicongenerator.net
+
+download the favicons and drop them in the folder called static and overwrite the existing example ones. You dont need favicon.ico. Also add favicon.svg and favicon-inactive.svg if you want to show different icon when the browser tab is inactive (not at all a priority though)
+
+## Other
+
+Ask an ai for help if you have issues in your setup process.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sveltekit-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A SvelteKit UI component library for building modern web applications",
   "license": "MIT",
   "type": "module",

package/src/routes/+layout.svelte

@@ -1,6 +1,5 @@
 <script>
   import "$lib/style.css"
-  import Logo from "../notlib/assets/static/Logo/index.svelte"
   import Layout from "$lib/Components/Layout/index.svelte"
   import { create_layout_manager } from "$lib/Components/Layout/index.svelte.js"
   import Button from "$lib/Components/Button/index.svelte"
@@ -104,10 +103,14 @@
 
 <Layout manager={layout_manager}>
   {#snippet nav_bar_logo()}
-    <Logo />
+    <div class="container" style="--color1: var(--primary-t);">
+      <h1 class="logotext">Sveltekit-UI</h1>
+    </div>
   {/snippet}
   {#snippet app_nav_bar_logo()}
-    <Logo />
+    <div class="container" style="--color1: var(--primary-t);">
+      <h1 class="logotext">Sveltekit-UI</h1>
+    </div>
   {/snippet}
   {#snippet nav_bar_extra()}
     <div style="display: flex; align-iems: center; gap: .5rem;">
@@ -173,4 +176,21 @@
     font-weight: 100 1000;
     font-display: swap;
   }
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    cursor: pointer;
+  }
+  .logotext {
+    font-family: "Quicksand", sans-serif;
+    width: max-content;
+    z-index: 1;
+    font-size: clamp(2rem, 5.2vw, 2.6rem) !important;
+    font-weight: 700 !important;
+    color: var(--color1);
+    font-size: var(--font_size);
+    letter-spacing: 0.02rem;
+    line-height: clamp(2.2rem, 5.2vw, 2.9rem);
+  }
 </style>

package/src/notlib/assets/static/Logo/index.svelte

@@ -1,27 +0,0 @@
-<script>
-  let { color1 = "var(--primary-t)" } = $props()
-</script>
-
-<div class="container" style="--color1: {color1};">
-  <h1 class="logotext">Sveltekit-UI</h1>
-</div>
-
-<style>
-  .container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    cursor: pointer;
-  }
-  .logotext {
-    font-family: "Quicksand", sans-serif;
-    width: max-content;
-    z-index: 1;
-    font-size: clamp(2rem, 5.2vw, 2.6rem) !important;
-    font-weight: 700 !important;
-    color: var(--color1);
-    font-size: var(--font_size);
-    letter-spacing: 0.02rem;
-    line-height: clamp(2.2rem, 5.2vw, 2.9rem);
-  }
-</style>