LumeWeb
/
web3toybox.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: improve styles and local https setup

This commit is contained in:
Juan Di Toro 2023-10-30 17:53:53 +01:00
parent d4aaae0e61
commit 8e920e41e0
9 changed files with 1456 additions and 1474 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
astro.config.mjs
View File

@ -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};"
})
]
}
})

3
package.json
View File

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

BIN
src/assets/lume-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

1509
src/components/nft-gallery/App.tsx
View File

File diff suppressed because one or more lines are too long

2
src/components/ui/button.tsx
View File

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

1111
src/lib/erc721-abi.ts Normal file
View File

File diff suppressed because it is too large Load Diff

48
src/pages/index.astro
View File

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

137
src/styles/global.css
View File

@ -1,76 +1,77 @@
@tailwind base;
@tailwind components;
@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%;
--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%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--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%;
}
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--primary: 113 49% 55%;
--primary-foreground: black;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--muted: 0 0% 32%;
--muted-foreground: 0 0% 32%;
--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: 0 0% 32%;
--input: 0 0% 32%;
--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;
}
}
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}

76
src/styles/globals.css
View File

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