ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(landing-page): shorter install script (#280)

Browse source
This commit is contained in:
Ayo Ayco 2023-03-28 11:21:10 +02:00 committed by GitHub
parent c2384944fb
commit 6e27739d7e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 168 additions and 165 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/chilly-rules-crash.md Normal file
View file

@ -0,0 +1,5 @@
---
"@astro-reactive/landing-page": major
---
Make the npm install script shorter

1
.github/pull_request_template.md vendored
View file

@ -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

35
apps/landing-page/src/components/copynpm.astro
View file

@ -1,5 +1,5 @@
--- ---
import { Icon } from "astro-icon"; import { Icon } from 'astro-icon';
--- ---
<div <div
@ -46,13 +46,11 @@ import { Icon } from "astro-icon";
</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">&gt; 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>
@ -68,6 +66,11 @@ import { Icon } from "astro-icon";
transition: background-color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out;
} }
span#command {
margin-right: 1rem;
padding: 0.5rem 0;
}
.copy-btn > span { .copy-btn > span {
white-space: nowrap; white-space: nowrap;
overflow-x: hidden; overflow-x: hidden;
@ -89,19 +92,19 @@ import { Icon } from "astro-icon";
</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>

20
apps/landing-page/src/pages/index.astro
View file

@ -1,15 +1,15 @@
--- ---
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">
@ -18,7 +18,6 @@ const description =
<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} />
@ -52,7 +51,7 @@ const description =
<!-- 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";
@ -83,10 +82,5 @@ const description =
<Header /> <Header />
<Splash /> <Splash />
<!--AstroSection /--> <!--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> </body>
</html> </html>

6
package-lock.json generated
View file

@ -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": "*"