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:
|
Tasks:
|
||||||
- [ ] I have ran the build command to make sure apps are working: `npm run build`
|
- [ ] 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 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 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
|
- [ ] 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
|
<div
|
||||||
id="toast-success"
|
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"
|
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"
|
role="alert"
|
||||||
>
|
>
|
||||||
<div
|
<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"
|
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
|
<svg
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="w-5 h-5"
|
class="w-5 h-5"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
><path
|
><path
|
||||||
fill-rule="evenodd"
|
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"
|
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>
|
clip-rule="evenodd"></path>
|
||||||
</svg>
|
</svg>
|
||||||
<span class="sr-only">Check icon</span>
|
<span class="sr-only">Check icon</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-3 text-sm font-normal">Copied to clipboard!</div>
|
<div class="ml-3 text-sm font-normal">Copied to clipboard!</div>
|
||||||
<button
|
<button
|
||||||
type="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"
|
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"
|
id="toast-close-btn"
|
||||||
aria-label="Close"
|
aria-label="Close"
|
||||||
>
|
>
|
||||||
<span class="sr-only">Close</span>
|
<span class="sr-only">Close</span>
|
||||||
<svg
|
<svg
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
class="w-5 h-5"
|
class="w-5 h-5"
|
||||||
fill="currentColor"
|
fill="currentColor"
|
||||||
viewBox="0 0 20 20"
|
viewBox="0 0 20 20"
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
><path
|
><path
|
||||||
fill-rule="evenodd"
|
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"
|
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>
|
clip-rule="evenodd"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<button
|
<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"
|
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"
|
id="copy-command-button"
|
||||||
>
|
>
|
||||||
<span id="command"
|
<span id="command">> npm install @astro-reactive/form</span>
|
||||||
>npm install @astro-reactive/form @astro-reactive/validator</span
|
<Icon name="mdi:content-copy" width="30px" height="30px" />
|
||||||
>
|
|
||||||
<Icon name="mdi:content-copy" width="40px" height="40px" />
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.copy-btn {
|
.copy-btn {
|
||||||
/* max-width: 50%; */
|
/* max-width: 50%; */
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background-color: #2f2f2f;
|
background-color: #2f2f2f;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 6px 16px;
|
padding: 6px 16px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background-color 0.2s ease-in-out;
|
transition: background-color 0.2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copy-btn > span {
|
span#command {
|
||||||
white-space: nowrap;
|
margin-right: 1rem;
|
||||||
overflow-x: hidden;
|
padding: 0.5rem 0;
|
||||||
text-overflow: ellipsis;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.copy-btn:hover {
|
.copy-btn > span {
|
||||||
background-color: #3f3f3f;
|
white-space: nowrap;
|
||||||
}
|
overflow-x: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
#toast-success {
|
.copy-btn:hover {
|
||||||
position: fixed;
|
background-color: #3f3f3f;
|
||||||
bottom: 0;
|
}
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%) translateY(100%);
|
#toast-success {
|
||||||
opacity: 0;
|
position: fixed;
|
||||||
z-index: 999;
|
bottom: 0;
|
||||||
}
|
left: 50%;
|
||||||
|
transform: translateX(-50%) translateY(100%);
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const copyCommandButton = document.getElementById("copy-command-button");
|
const copyCommandButton = document.getElementById('copy-command-button');
|
||||||
const commandText = document.getElementById("command").innerText;
|
const commandText = document.getElementById('command').innerText;
|
||||||
const toastSuccess = document.getElementById("toast-success");
|
const toastSuccess = document.getElementById('toast-success');
|
||||||
const toastClose = document.getElementById("toast-close-btn");
|
const toastClose = document.getElementById('toast-close-btn');
|
||||||
|
|
||||||
copyCommandButton?.addEventListener("click", () => {
|
copyCommandButton?.addEventListener('click', () => {
|
||||||
toastSuccess.style.transform = "translateX(-50%) translateY(0)";
|
toastSuccess.style.transform = 'translateX(-50%) translateY(0)';
|
||||||
toastSuccess.style.opacity = "1";
|
toastSuccess.style.opacity = '1';
|
||||||
navigator.clipboard.writeText(commandText);
|
navigator.clipboard.writeText(commandText);
|
||||||
});
|
});
|
||||||
|
|
||||||
toastClose?.addEventListener("click", () => {
|
toastClose?.addEventListener('click', () => {
|
||||||
toastSuccess.style.transform = "translateX(-50%) translateY(100%)";
|
toastSuccess.style.transform = 'translateX(-50%) translateY(100%)';
|
||||||
toastSuccess.style.opacity = "0";
|
toastSuccess.style.opacity = '0';
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,92 +1,86 @@
|
||||||
---
|
---
|
||||||
import "~/styles/index.css";
|
import '~/styles/index.css';
|
||||||
import Header from "~/components/header.astro";
|
import Header from '~/components/header.astro';
|
||||||
// import Icon from "astro-icon";
|
// 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 AstroSection from "~/sections/astro-section.astro";
|
||||||
import Starfield from "~/components/starfield.astro";
|
import Starfield from '~/components/starfield.astro';
|
||||||
|
|
||||||
const { site } = Astro;
|
const { site } = Astro;
|
||||||
const image = new URL("social.jpg", site);
|
const image = new URL('social.jpg', site);
|
||||||
const description =
|
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">
|
<html lang="en" class="h-full motion-safe:scroll-smooth" data-theme="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="icon" href="/favicon.ico" sizes="any" />
|
<link rel="icon" href="/favicon.ico" sizes="any" />
|
||||||
|
|
||||||
|
|
||||||
<title>Astro Reactive | {description} 🚀</title>
|
<title>Astro Reactive | {description} 🚀</title>
|
||||||
<meta name="description" content={description} />
|
<meta name="description" content={description} />
|
||||||
|
|
||||||
<!-- fonts -->
|
<!-- fonts -->
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link
|
<link
|
||||||
rel="preload"
|
rel="preload"
|
||||||
as="style"
|
as="style"
|
||||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
|
||||||
/>
|
/>
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
|
||||||
media="print"
|
media="print"
|
||||||
onload="this.media='all'"
|
onload="this.media='all'"
|
||||||
/>
|
/>
|
||||||
<noscript>
|
<noscript>
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"
|
||||||
/>
|
/>
|
||||||
</noscript>
|
</noscript>
|
||||||
|
|
||||||
<!-- social media -->
|
<!-- social media -->
|
||||||
<meta property="og:title" content="Astro" />
|
<meta property="og:title" content="Astro" />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
<meta property="og:description" content={description} />
|
<meta property="og:description" content={description} />
|
||||||
<meta property="og:image" content={image} />
|
<meta property="og:image" content={image} />
|
||||||
<meta property="og:url" content={site} />
|
<meta property="og:url" content={site} />
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
|
||||||
<!-- initialize theme -->
|
<!-- initialize theme -->
|
||||||
<script is:inline>
|
<script is:inline>
|
||||||
document.documentElement.dataset.theme = "dark";
|
document.documentElement.dataset.theme = 'dark';
|
||||||
// const themeSaved = localStorage.getItem("theme");
|
// const themeSaved = localStorage.getItem("theme");
|
||||||
// const forceTheme = "dark";
|
// const forceTheme = "dark";
|
||||||
|
|
||||||
// if (themeSaved) {
|
// if (themeSaved) {
|
||||||
// document.documentElement.dataset.theme = themeSaved;
|
// document.documentElement.dataset.theme = themeSaved;
|
||||||
// } else {
|
// } else {
|
||||||
// // const prefersDark = window.matchMedia(
|
// // const prefersDark = window.matchMedia(
|
||||||
// // "(prefers-color-scheme: dark)"
|
// // "(prefers-color-scheme: dark)"
|
||||||
// // ).matches;
|
// // ).matches;
|
||||||
// document.documentElement.dataset.theme = forceTheme; // prefersDark ? "dark" : "light";
|
// document.documentElement.dataset.theme = forceTheme; // prefersDark ? "dark" : "light";
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// window
|
// window
|
||||||
// .matchMedia("(prefers-color-scheme: dark)")
|
// .matchMedia("(prefers-color-scheme: dark)")
|
||||||
// ?.addEventListener("change", (event) => {
|
// ?.addEventListener("change", (event) => {
|
||||||
// if (!localStorage.getItem("theme")) {
|
// if (!localStorage.getItem("theme")) {
|
||||||
// document.documentElement.dataset.theme = event.matches
|
// document.documentElement.dataset.theme = event.matches
|
||||||
// ? "dark"
|
// ? "dark"
|
||||||
// : "light";
|
// : "light";
|
||||||
// }
|
// }
|
||||||
// });
|
// });
|
||||||
</script>
|
</script>
|
||||||
</head>
|
</head>
|
||||||
<body
|
<body
|
||||||
class="h-full overflow-x-hidden text-base bg-default text-default selection:bg-secondary selection:text-white"
|
class="h-full overflow-x-hidden text-base bg-default text-default selection:bg-secondary selection:text-white"
|
||||||
>
|
>
|
||||||
<Starfield />
|
<Starfield />
|
||||||
<Header />
|
<Header />
|
||||||
<Splash />
|
<Splash />
|
||||||
<!--AstroSection /-->
|
<!--AstroSection /-->
|
||||||
|
</body>
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
6
package-lock.json
generated
6
package-lock.json
generated
|
|
@ -12670,7 +12670,7 @@
|
||||||
},
|
},
|
||||||
"packages/common": {
|
"packages/common": {
|
||||||
"name": "@astro-reactive/common",
|
"name": "@astro-reactive/common",
|
||||||
"version": "0.1.7",
|
"version": "0.1.8",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@astro-reactive/tsconfig": "*",
|
"@astro-reactive/tsconfig": "*",
|
||||||
|
|
@ -12679,7 +12679,7 @@
|
||||||
},
|
},
|
||||||
"packages/form": {
|
"packages/form": {
|
||||||
"name": "@astro-reactive/form",
|
"name": "@astro-reactive/form",
|
||||||
"version": "0.7.1",
|
"version": "0.7.2",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astro-reactive/common": "*",
|
"@astro-reactive/common": "*",
|
||||||
|
|
@ -13027,7 +13027,7 @@
|
||||||
},
|
},
|
||||||
"packages/validator": {
|
"packages/validator": {
|
||||||
"name": "@astro-reactive/validator",
|
"name": "@astro-reactive/validator",
|
||||||
"version": "0.3.1",
|
"version": "0.3.2",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astro-reactive/common": "*"
|
"@astro-reactive/common": "*"
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue