fix: improve styles and local https setup
This commit is contained in:
Juan Di Toro
parent
d4aaae0e61
commit
8e920e41e0
|
|
@ -1,22 +1,30 @@
|
|||
import { defineConfig } from 'astro/config'
|
||||
import { defineConfig } from "astro/config"
|
||||
import * as fs from "node:fs"
|
||||
|
||||
import react from '@astrojs/react'
|
||||
import tailwind from '@astrojs/tailwind'
|
||||
import optimizer from 'vite-plugin-optimizer'
|
||||
import react from "@astrojs/react"
|
||||
import tailwind from "@astrojs/tailwind"
|
||||
import optimizer from "vite-plugin-optimizer"
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [react(), tailwind({ applyBaseStyles: false, })],
|
||||
vite: {
|
||||
build: {
|
||||
minify: false
|
||||
},
|
||||
resolve: { 'dedupe': ['@lumeweb/libportal', '@lumeweb/libweb', '@lumeweb/libkernel'] },
|
||||
plugins: [
|
||||
optimizer({
|
||||
'node-fetch':
|
||||
'const e = undefined; export default e;export {e as Response, e as FormData, e as Blob};',
|
||||
}),
|
||||
]
|
||||
}
|
||||
integrations: [react(), tailwind({ applyBaseStyles: false })],
|
||||
vite: {
|
||||
server: {
|
||||
https: {
|
||||
cert: fs.readFileSync("./.local-ssl/localhost.pem"),
|
||||
key: fs.readFileSync("./.local-ssl/localhost-key.pem")
|
||||
},
|
||||
},
|
||||
build: {
|
||||
minify: false
|
||||
},
|
||||
resolve: {
|
||||
dedupe: ["@lumeweb/libportal", "@lumeweb/libweb", "@lumeweb/libkernel"]
|
||||
},
|
||||
plugins: [
|
||||
optimizer({
|
||||
"node-fetch":
|
||||
"const e = undefined; export default e;export {e as Response, e as FormData, e as Blob};"
|
||||
})
|
||||
]
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -7,7 +7,8 @@
|
|||
"start": "astro dev",
|
||||
"build": "astro build",
|
||||
"preview": "astro preview",
|
||||
"astro": "astro"
|
||||
"astro": "astro",
|
||||
"local-setup-https": "mkdir -p ./.local-ssl && mkcert -key-file ./.local-ssl/localhost-key.pem -cert-file ./.local-ssl/localhost.pem localhost"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/react": "^3.0.3",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
File diff suppressed because one or more lines are too long
|
|
@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
|
|||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
"inline-flex rounded-md items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -6,7 +6,8 @@ import {CardDescription} from '@/components/ui/card';
|
|||
import {CardFooter} from '@/components/ui/card';
|
||||
import {CardHeader} from '@/components/ui/card';
|
||||
import {CardTitle} from '@/components/ui/card';
|
||||
import '@/styles/globals.css'
|
||||
import LogoImg from "../assets/lume-logo.png";
|
||||
import '@/styles/global.css'
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
@ -18,18 +19,47 @@ import '@/styles/globals.css'
|
|||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="h-full w-full bg-gray-100 dark:bg-black dark:text-white flex flex-col items-center justify-center p-8 space-y-6">
|
||||
<Card class="w-[80%] mb-8">
|
||||
<div class="h-screen w-full bg-zinc-900 flex flex-col items-center justify-center p-8 space-y-6">
|
||||
<Card className="w-[650px] bg-zinc-950 border-zinc-800 shadow-xl">
|
||||
<CardHeader>
|
||||
<CardTitle>NFT Gallery</CardTitle>
|
||||
<img src={LogoImg.src} class="w-20 mb-8" />
|
||||
<CardTitle className='text-white'>Welcome to Web3Toybox</CardTitle>
|
||||
<CardDescription className='text-zinc-500 text-lg'>This is a place where you can play with different famous web3 apps in a truly decentralized way - no infura, no gateways, no censorship.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription>This is a short description of the demo.</CardDescription>
|
||||
<CardContent className='flex flex-row justify-between gap-x-5'>
|
||||
<Card className="w-[300px] bg-zinc-900 border-zinc-800 hover:shadow-lg hover:ring-1 hover:ring-green-400/20 hover:shadow-green-400/20 hover:transform-gpu hover:-translate-y-[3px] transition-all duration-150">
|
||||
<CardHeader>
|
||||
<CardTitle className='text-white'>NFT Gallery</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className='text-zinc-500'>
|
||||
Here, you can explore all your favorite ENS and Ethereum addresses and discover the unique NFTs they hold. Whether you're a seasoned collector or a newcomer to the space, our gallery offers a comprehensive and engaging way to interact with these digital assets.
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<a href="/nft-gallery" class="w-full">
|
||||
<Button variant="default" className="mt-4 w-full">
|
||||
Start Exploring
|
||||
</Button>
|
||||
</a>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className="w-[300px] bg-zinc-950 border-zinc-700 border-dashed">
|
||||
<CardHeader>
|
||||
<CardTitle className='text-zinc-400 mb-3'>More Coming Soon...</CardTitle>
|
||||
<CardDescription className='text-zinc-400'>
|
||||
We're diligently developing more intriguing examples. If you have any suggestions, don't hesitate to join our Discord channel and propose or submit any examples you'd like to see here!
|
||||
<a href="https://discord.com/invite/qpC8ADp3rS">
|
||||
<Button variant="link" className='h-auto p-0 inline pl-1'>
|
||||
Join Discord
|
||||
</Button>
|
||||
</a>
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button variant="outline" class="mt-4">
|
||||
<a href="/nft-gallery">Explore Demo</a>
|
||||
</Button>
|
||||
<p class="text-zinc-700 text-sm">Brought to you with 💚 by the <a href="https://lumeweb.com" class="text-zinc-500 underline">lumeweb.com</a> team alongside the <a href="https://sia.tech/about-sia-foundation" class="text-zinc-500 underline">Sia Foundation</a></p>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,74 +3,75 @@
|
|||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--primary: 113 49% 55%;
|
||||
--primary-foreground: black;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--muted: 0 0% 32%;
|
||||
--muted-foreground: 0 0% 32%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--border: 0 0% 32%;
|
||||
--input: 0 0% 32%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue