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

style(landing-page): force dark theme (#181)

Browse source 
* style(landing-page): force dark theme

* fix(landing-page): wrong title and url
This commit is contained in:
Ayo Ayco 2022-11-07 19:48:04 +01:00 committed by GitHub
parent 47c0b5e90e
commit 205d1f27b2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/landing-page/astro.config.mjs
View file

@ -2,11 +2,11 @@ import tailwind from "@astrojs/tailwind";
import { defineConfig } from "astro/config"; import { defineConfig } from "astro/config";
export default defineConfig({ export default defineConfig({
site: "https://astro-moon-landing.netlify.app/", site: "https://astro-reactive.dev",
integrations: [tailwind()], integrations: [tailwind()],
vite: { vite: {
ssr: { ssr: {
external: ["@11ty/eleventy-img", "svgo"], external: ["svgo"],
}, },
}, },
}); });

2
apps/landing-page/src/components/header.astro
View file

@ -1,6 +1,6 @@
--- ---
import { Icon } from "astro-icon"; import { Icon } from "astro-icon";
import ThemeSwitcher from "~/components/theme-switcher.astro"; // import ThemeSwitcher from "~/components/theme-switcher.astro";
const socials = [ const socials = [
{ {

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

@ -18,7 +18,7 @@ const description =
<link rel="icon" href="/favicon.ico" sizes="any" /> <link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" /> <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<title>Astro Reactive Library</title> <title>Astro Reactive</title>
<meta name="description" content={description} /> <meta name="description" content={description} />
<!-- fonts --> <!-- fonts -->
@ -52,6 +52,7 @@ const description =
<!-- initialize theme --> <!-- initialize theme -->
<script is:inline> <script is:inline>
const themeSaved = localStorage.getItem("theme"); const themeSaved = localStorage.getItem("theme");
const forceTheme = "dark";
if (themeSaved) { if (themeSaved) {
document.documentElement.dataset.theme = themeSaved; document.documentElement.dataset.theme = themeSaved;
@ -66,9 +67,10 @@ const description =
.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 = forceTheme;
? "dark" // event.matches
: "light"; // ? "dark"
// : "light";
} }
}); });
</script> </script>
@ -76,7 +78,7 @@ const description =
<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"
> >
<Splash client:build /> <Splash client:load />
<!--AstroSection /--> <!--AstroSection /-->
<Header /> <Header />
</body> </body>

97
apps/landing-page/src/sections/splash.astro
View file

@ -4,9 +4,6 @@ import Copynpm from "~/components/copynpm.astro";
--- ---
<section class="h-screen flex flex-col astro relative"> <section class="h-screen flex flex-col astro relative">
<div id="starfield" class="absolute -z-10 inset-0">
<canvas id="starfield-canvas"></canvas>
</div>
<div <div
class="relative flex flex-col-reverse justify-end h-full content-center grid pt-0" class="relative flex flex-col-reverse justify-end h-full content-center grid pt-0"
> >
@ -36,100 +33,6 @@ import Copynpm from "~/components/copynpm.astro";
</div> </div>
</section> </section>
<script>
const COUNT = 800;
const SPEED = 0.3;
class Star {
x: number;
y: number;
z: number;
xPrev: number;
yPrev: number;
constructor(x = 0, y = 0, z = 0) {
this.x = x;
this.y = y;
this.z = z;
this.xPrev = x;
this.yPrev = y;
}
update(width: number, height: number, speed: number) {
this.xPrev = this.x;
this.yPrev = this.y;
this.z += speed * 0.0675;
this.x += this.x * (speed * 0.0225) * this.z;
this.y += this.y * (speed * 0.0225) * this.z;
if (
this.x > width / 2 ||
this.x < -width / 2 ||
this.y > height / 2 ||
this.y < -height / 2
) {
this.x = Math.random() * width - width / 2;
this.y = Math.random() * height - height / 2;
this.xPrev = this.x;
this.yPrev = this.y;
this.z = 0;
}
}
draw(ctx: CanvasRenderingContext2D) {
ctx.lineWidth = this.z;
ctx.beginPath();
ctx.moveTo(this.x, this.y);
ctx.lineTo(this.xPrev, this.yPrev);
ctx.stroke();
}
}
const stars = Array.from({ length: COUNT }, () => new Star(0, 0, 0));
let rafId = 0;
const canvas: HTMLCanvasElement = document.querySelector("#starfield-canvas");
const ctx = canvas.getContext("2d");
const container = document.querySelector("#starfield");
const resizeObserver = new ResizeObserver(setup);
resizeObserver.observe(container);
function setup() {
rafId > 0 && cancelAnimationFrame(rafId);
const { clientWidth: width, clientHeight: height } = container;
const dpr = window.devicePixelRatio || 1;
canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
ctx.scale(dpr, dpr);
for (const star of stars) {
star.x = Math.random() * width - width / 2;
star.y = Math.random() * height - height / 2;
star.z = 0;
}
ctx.translate(width / 2, height / 2);
ctx.fillStyle = "rgba(0, 0, 0, 0.4)";
ctx.strokeStyle = "white";
rafId = requestAnimationFrame(frame);
}
function frame() {
const { clientWidth: width, clientHeight: height } = container;
for (const star of stars) {
star.update(width, height, SPEED);
star.draw(ctx);
}
ctx.fillRect(-width / 2, -height / 2, width, height);
rafId = requestAnimationFrame(frame);
}
</script>
<style> <style>
@keyframes float { @keyframes float {
0% { 0% {