landing page improvement

Author: ivictbor

Changelog.md

@@ -5,8 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [v1.5.11] - next
 
-## [v1.5.9] - next
+
+## [v1.5.10] 
 
 ### Changed
 
@@ -16,13 +18,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - show hook is now called as it was when user edits the page
 - fixed showRow in ShowTable.vue
 - if not ab le to connect postgres, don't crash the app
+- fix LastPass and other passowrd managers who try make autocomplete on user creation form
 
 ### Improved
 - reduce stdout output from AdminForth itself
 
 ### Added
 - AFCL Chart components
 - add requestUrl param to hooks extra
+- `npx adminforth create-app --app-name myadmin --db sqlite://.db.sqlite`
 
 ## [v1.5.8]
 

adminforth/commands/createApp/utils.js

@@ -165,14 +165,14 @@ async function installDependencies(ctx, cwd) {
 }
 
 function generateFinalInstructions(skipPrismaSetup) {
-  let instruction = '⏭️  Run the following commands to get started:';
+  let instruction = '⏭️  Run the following commands to get started:\n';
   if (!skipPrismaSetup)
     instruction += `
-  ${chalk.cyan('$ npm run makemigration -- --name init')}
-  ${chalk.dim('// runs "npx prisma migrate dev --name init" to generate and apply initial migration')}`;
+  ${chalk.dim('// runs "npx prisma migrate dev --name init" to generate and apply initial migration')};
+  ${chalk.cyan('$ npm run makemigration -- --name init')}`;
   instruction += `
+  ${chalk.dim('\n// starts dev server with tsx watch for hot-reloading')}\n
   ${chalk.cyan('$ npm start')}
-  ${chalk.dim('// starts dev server with tsx watch for hot-reloading')}\n
 `;
 
   instruction += '😉 Happy coding!';

adminforth/documentation/package-lock.json

@@ -25,7 +25,8 @@
     "prism-react-renderer-monorepo": "github:formidablelabs/prism-react-renderer",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "react-image-gallery": "^1.3.0"
+    "react-image-gallery": "^1.3.0",
+    "react-terminal-ui": "^1.3.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "3.4.0",

adminforth/documentation/package.json

@@ -242,4 +242,132 @@ pre code:has(.code-block-diff-remove-line) {
 
 .laptop .theme_switcher:hover {
   opacity: 0.3;
+}
+
+
+.fakeButtons {
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  background-color: #ff3b47;
+  display: inline-block;
+}
+.fakeButtons:hover{
+  filter:brightness(1.1)
+}
+
+.fakeMinimize {
+  background-color: #ffc100;
+  border-color: #9d802c;
+}
+
+.fakeZoom {
+  background-color: #00d742;
+  border-color: #049931;
+}
+
+.fakeMenu {
+  gap: 5px;
+  padding-left: 10px;
+  width: 100%;
+  box-sizing: border-box;
+  height: 25px;
+  background-color: #bbb;
+  margin: 0 auto;
+  border-top-right-radius: 5px;
+  border-top-left-radius: 5px;
+  display: flex;
+  align-items: center;
+}
+
+
+html[data-theme="dark"] .fakeScreen {
+  background-color: #474747d1;
+}
+
+.fakeScreen {
+  background-color: #151515d1;
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0 auto;
+  padding: 20px;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.5)
+}
+
+.line1 {
+  color: white;
+  font-family: 'Consolas', monospace;
+  text-align: left;
+  margin: 0;
+
+}
+
+.terminalWrapper {
+  width: 400px;
+  max-width: 100vw
+}
+
+.button--secondary[class] {
+  background-color: #4db5ed;
+  color: white !important;
+  border: 0;
+}
+
+
+.button--primary[class] {
+  color: white !important;
+  
+}
+
+.hero__title {
+  font-size: 2.5rem;
+}
+
+.hero__subtitle {
+  font-size: 1.3rem;
+}
+
+.heroRow {
+  display:  flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 80px;
+  max-width: 80vw;
+  width: 70vw;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 28px;
+  margin-bottom: 10px;
+
+}
+
+@media screen and (max-width: 600px) {
+  .heroRow {
+    flex-direction: column;
+    gap: 30px;
+    width: 80vw;
+  }
+
+  .heroRow .button {
+    width: 100%;
+  }
+  .terminalWrapper {
+    max-width: 100%;
+    margin-bottom: 20px;
+  }
+
+  .laptop {
+    width: 80vw;
+  }
+
+  .theme_switcher {
+    display: none !important;
+  }
+}
+
+.buttons_src-pages-index-module {
+  display: flex;
+  gap: 10px;
 }

adminforth/documentation/src/css/custom.css

@@ -31,3 +31,4 @@
   flex-wrap: wrap;
 }
 
+

adminforth/documentation/src/pages/index.module.css

@@ -92,19 +92,36 @@ function HomepageHeader() {
             Create Admin Panels faster on Node and Vue with AdminForth Framework
           </Heading>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
-          <div className={styles.buttons}>
-            <Link
-              className="button button--secondary button--outline button--lg"
-              to="/docs/tutorial/gettingStarted">
-              Get started - 5min ⏱️
-            </Link>
-
-            <Link
-              className="button button--primary button--lg"
-              to="https://demo.adminforth.dev/">
-              Live Demo
-            </Link>
+
+          <div class="heroRow">
+            <div className={styles.buttons}>
+              <Link
+                className="button button--secondary button--outline button--lg"
+                to="/docs/tutorial/gettingStarted">
+                Get started
+              </Link>
+
+              <Link
+                className="button button--primary button--lg"
+                to="https://demo.adminforth.dev/">
+                Live Demo
+              </Link>
+            </div>
+
+            <div className='terminalWrapper'>
+              <div className="fakeMenu">
+                <div className="fakeButtons fakeClose"></div>
+                <div className="fakeButtons fakeMinimize"></div>
+                <div className="fakeButtons fakeZoom"></div>
+              </div>
+              <div className="fakeScreen">
+                <p className="line1"><span
+                  style={{userSelect: 'none'}}
+                >$&nbsp;</span><span style={{ opacity:0.6 }}>npx adminforth create-app</span></p>
+              </div>
+            </div>
           </div>
+
         </div>
       </header>
 
@@ -135,13 +152,15 @@ function HomepageHeader() {
 
 export default function Home(): JSX.Element {
   const {siteConfig} = useDocusaurusContext();
+
   return (
     <Layout
       title={`${siteConfig.title}`}
       description="OpenSource Tailwind Admin Panel extendable with Vue3 and typescript!">
       <HomepageHeader />
       <main>
 
+
       <Heading as="h2" className="hero__title text--center">
         What it can do for you
       </Heading>
@@ -154,7 +173,7 @@ export default function Home(): JSX.Element {
           padding: '1rem',
         }}>
           {images.map((item, index) => (
-            <div className="card-demo">
+            <div className="card-demo" key={`feature${index}`}>
               <div className="card shadow--md" style={{
                       maxWidth: '500px',
                     }}> 
@@ -184,10 +203,8 @@ export default function Home(): JSX.Element {
               </div>
             </div>
           ))}
-
-
         </div>
-
+        
         <HomepageFeatures />
 
       </main>

adminforth/documentation/src/pages/index.tsx

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.5.9-next.12",
+  "version": "1.5.10",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "module": "dist/index.js",

adminforth/package-lock.json

@@ -9,6 +9,7 @@
         @click="inputClick"
         @input="inputInput"
         class="block w-full pl-3 pr-10 py-2.5 border border-gray-300 rounded-md leading-5 bg-gray-50 placeholder-gray-500 sm:text-sm transition duration-150 ease-in-out dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-lightPrimary focus:border-lightPrimary dark:focus:ring-darkPrimary dark:focus:border-darkPrimary"
+        autocomplete="off" data-custom="no-autofill"
         :placeholder="
           selectedItems.length && !multiple ? '' :  (showDropdown ? $t('Search') : placeholder || $t('Select...')) 
         "