feat(landing-page): shorter install script (#280)
This commit is contained in:
Ayo Ayco
GitHub
parent
c2384944fb
commit
6e27739d7e
5 changed files with 168 additions and 165 deletions
5
.changeset/chilly-rules-crash.md
Normal file
5
.changeset/chilly-rules-crash.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
"@astro-reactive/landing-page": major
|
||||
---
|
||||
|
||||
Make the npm install script shorter
|
||||
1
.github/pull_request_template.md
vendored
1
.github/pull_request_template.md
vendored
|
|
@ -23,6 +23,7 @@ Tag a reviewer: @
|
|||
Tasks:
|
||||
- [ ] I have ran the build command to make sure apps are working: `npm run build`
|
||||
- [ ] I have ran the tests to make sure nothing is broken: `npm run test`
|
||||
- [ ] I have ran the Astro checker: `npm run check`
|
||||
- [ ] I have ran the linter to make sure code is clean: `npm run lint`
|
||||
- [ ] I have reviewed my own code to remove changes that are not needed
|
||||
|
||||
|
|
|
|||
|
|
@ -1,107 +1,110 @@
|
|||
---
|
||||
import { Icon } from "astro-icon";
|
||||
import { Icon } from 'astro-icon';
|
||||
---
|
||||
|
||||
<div
|
||||
id="toast-success"
|
||||
class="items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 flex transition"
|
||||
role="alert"
|
||||
id="toast-success"
|
||||
class="items-center p-4 mb-4 w-full max-w-xs text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 flex transition"
|
||||
role="alert"
|
||||
>
|
||||
<div
|
||||
class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div class="ml-3 text-sm font-normal">Copied to clipboard!</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
|
||||
id="toast-close-btn"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
class="inline-flex flex-shrink-0 justify-center items-center w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
<span class="sr-only">Check icon</span>
|
||||
</div>
|
||||
<div class="ml-3 text-sm font-normal">Copied to clipboard!</div>
|
||||
<button
|
||||
type="button"
|
||||
class="ml-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700"
|
||||
id="toast-close-btn"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span class="sr-only">Close</span>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="w-5 h-5"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
><path
|
||||
fill-rule="evenodd"
|
||||
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="copy-btn flex items-center w-4/5 mt-3 justify-center astro-md:w-1/2 astro-lg:w-[28%] astro-lg:mt-0 astro-lg:ml-3 max-w-md"
|
||||
id="copy-command-button"
|
||||
class="copy-btn flex items-center w-4/5 mt-3 justify-center max-w-xs astro-md:w-1/2 astro-lg:w-sm astro-lg:mt-0 astro-lg:ml-3"
|
||||
id="copy-command-button"
|
||||
>
|
||||
<span id="command"
|
||||
>npm install @astro-reactive/form @astro-reactive/validator</span
|
||||
>
|
||||
<Icon name="mdi:content-copy" width="40px" height="40px" />
|
||||
<span id="command">> npm install @astro-reactive/form</span>
|
||||
<Icon name="mdi:content-copy" width="30px" height="30px" />
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.copy-btn {
|
||||
/* max-width: 50%; */
|
||||
color: #fff;
|
||||
background-color: #2f2f2f;
|
||||
border-radius: 4px;
|
||||
padding: 6px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
.copy-btn {
|
||||
/* max-width: 50%; */
|
||||
color: #fff;
|
||||
background-color: #2f2f2f;
|
||||
border-radius: 4px;
|
||||
padding: 6px 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.copy-btn > span {
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
span#command {
|
||||
margin-right: 1rem;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
|
||||
.copy-btn:hover {
|
||||
background-color: #3f3f3f;
|
||||
}
|
||||
.copy-btn > span {
|
||||
white-space: nowrap;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
#toast-success {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(100%);
|
||||
opacity: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
.copy-btn:hover {
|
||||
background-color: #3f3f3f;
|
||||
}
|
||||
|
||||
#toast-success {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(100%);
|
||||
opacity: 0;
|
||||
z-index: 999;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
const copyCommandButton = document.getElementById("copy-command-button");
|
||||
const commandText = document.getElementById("command").innerText;
|
||||
const toastSuccess = document.getElementById("toast-success");
|
||||
const toastClose = document.getElementById("toast-close-btn");
|
||||
const copyCommandButton = document.getElementById('copy-command-button');
|
||||
const commandText = document.getElementById('command').innerText;
|
||||
const toastSuccess = document.getElementById('toast-success');
|
||||
const toastClose = document.getElementById('toast-close-btn');
|
||||
|
||||
copyCommandButton?.addEventListener("click", () => {
|
||||
toastSuccess.style.transform = "translateX(-50%) translateY(0)";
|
||||
toastSuccess.style.opacity = "1";
|
||||
navigator.clipboard.writeText(commandText);
|
||||
});
|
||||
copyCommandButton?.addEventListener('click', () => {
|
||||
toastSuccess.style.transform = 'translateX(-50%) translateY(0)';
|
||||
toastSuccess.style.opacity = '1';
|
||||
navigator.clipboard.writeText(commandText);
|
||||
});
|
||||
|
||||
toastClose?.addEventListener("click", () => {
|
||||
toastSuccess.style.transform = "translateX(-50%) translateY(100%)";
|
||||
toastSuccess.style.opacity = "0";
|
||||
});
|
||||
toastClose?.addEventListener('click', () => {
|
||||
toastSuccess.style.transform = 'translateX(-50%) translateY(100%)';
|
||||
toastSuccess.style.opacity = '0';
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,92 +1,86 @@
|
|||
---
|
||||
import "~/styles/index.css";
|
||||
import Header from "~/components/header.astro";
|
||||
import '~/styles/index.css';
|
||||
import Header from '~/components/header.astro';
|
||||
// import Icon from "astro-icon";
|
||||
import Splash from "~/components/splash.astro";
|
||||
import Splash from '~/components/splash.astro';
|
||||
// import AstroSection from "~/sections/astro-section.astro";
|
||||
import Starfield from "~/components/starfield.astro";
|
||||
import Starfield from '~/components/starfield.astro';
|
||||
|
||||
const { site } = Astro;
|
||||
const image = new URL("social.jpg", site);
|
||||
const image = new URL('social.jpg', site);
|
||||
const description =
|
||||
"Library of components and utilities for building reactive user interfaces with Astro";
|
||||
'Library of components and utilities for building reactive user interfaces with Astro';
|
||||
---
|
||||
|
||||
<html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="dark">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||
|
||||
<title>Astro Reactive | {description} 🚀</title>
|
||||
<meta name="description" content={description} />
|
||||
|
||||
<title>Astro Reactive | {description} 🚀</title>
|
||||
<meta name="description" content={description} />
|
||||
<!-- fonts -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
rel="preload"
|
||||
as="style"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
|
||||
media="print"
|
||||
onload="this.media='all'"
|
||||
/>
|
||||
<noscript>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
|
||||
/>
|
||||
</noscript>
|
||||
|
||||
<!-- fonts -->
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
rel="preload"
|
||||
as="style"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
|
||||
media="print"
|
||||
onload="this.media='all'"
|
||||
/>
|
||||
<noscript>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
|
||||
/>
|
||||
</noscript>
|
||||
<!-- social media -->
|
||||
<meta property="og:title" content="Astro" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={image} />
|
||||
<meta property="og:url" content={site} />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
|
||||
<!-- social media -->
|
||||
<meta property="og:title" content="Astro" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={image} />
|
||||
<meta property="og:url" content={site} />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<!-- initialize theme -->
|
||||
<script is:inline>
|
||||
document.documentElement.dataset.theme = 'dark';
|
||||
// const themeSaved = localStorage.getItem("theme");
|
||||
// const forceTheme = "dark";
|
||||
|
||||
<!-- initialize theme -->
|
||||
<script is:inline>
|
||||
document.documentElement.dataset.theme = "dark";
|
||||
// const themeSaved = localStorage.getItem("theme");
|
||||
// const forceTheme = "dark";
|
||||
// if (themeSaved) {
|
||||
// document.documentElement.dataset.theme = themeSaved;
|
||||
// } else {
|
||||
// // const prefersDark = window.matchMedia(
|
||||
// // "(prefers-color-scheme: dark)"
|
||||
// // ).matches;
|
||||
// document.documentElement.dataset.theme = forceTheme; // prefersDark ? "dark" : "light";
|
||||
// }
|
||||
|
||||
// if (themeSaved) {
|
||||
// document.documentElement.dataset.theme = themeSaved;
|
||||
// } else {
|
||||
// // const prefersDark = window.matchMedia(
|
||||
// // "(prefers-color-scheme: dark)"
|
||||
// // ).matches;
|
||||
// document.documentElement.dataset.theme = forceTheme; // prefersDark ? "dark" : "light";
|
||||
// }
|
||||
|
||||
// window
|
||||
// .matchMedia("(prefers-color-scheme: dark)")
|
||||
// ?.addEventListener("change", (event) => {
|
||||
// if (!localStorage.getItem("theme")) {
|
||||
// document.documentElement.dataset.theme = event.matches
|
||||
// ? "dark"
|
||||
// : "light";
|
||||
// }
|
||||
// });
|
||||
</script>
|
||||
</head>
|
||||
<body
|
||||
class="h-full overflow-x-hidden text-base bg-default text-default selection:bg-secondary selection:text-white"
|
||||
>
|
||||
<Starfield />
|
||||
<Header />
|
||||
<Splash />
|
||||
<!--AstroSection /-->
|
||||
|
||||
|
||||
<!-- for Mastodon verification -->
|
||||
<a rel="me" href="https://fosstodon.org/@ayo" style="display:none">Mastodon</a>
|
||||
<a rel="me" href="https://social.ayco.io/@ayo" style="display:none">Mastodon</a>
|
||||
</body>
|
||||
// window
|
||||
// .matchMedia("(prefers-color-scheme: dark)")
|
||||
// ?.addEventListener("change", (event) => {
|
||||
// if (!localStorage.getItem("theme")) {
|
||||
// document.documentElement.dataset.theme = event.matches
|
||||
// ? "dark"
|
||||
// : "light";
|
||||
// }
|
||||
// });
|
||||
</script>
|
||||
</head>
|
||||
<body
|
||||
class="h-full overflow-x-hidden text-base bg-default text-default selection:bg-secondary selection:text-white"
|
||||
>
|
||||
<Starfield />
|
||||
<Header />
|
||||
<Splash />
|
||||
<!--AstroSection /-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -12670,7 +12670,7 @@
|
|||
},
|
||||
"packages/common": {
|
||||
"name": "@astro-reactive/common",
|
||||
"version": "0.1.7",
|
||||
"version": "0.1.8",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@astro-reactive/tsconfig": "*",
|
||||
|
|
@ -12679,7 +12679,7 @@
|
|||
},
|
||||
"packages/form": {
|
||||
"name": "@astro-reactive/form",
|
||||
"version": "0.7.1",
|
||||
"version": "0.7.2",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@astro-reactive/common": "*",
|
||||
|
|
@ -13027,7 +13027,7 @@
|
|||
},
|
||||
"packages/validator": {
|
||||
"name": "@astro-reactive/validator",
|
||||
"version": "0.3.1",
|
||||
"version": "0.3.2",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@astro-reactive/common": "*"
|
||||
|
|
|
|||
Loading…
Reference in a new issue