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 react from "@astrojs/react"
import tailwind from '@astrojs/tailwind' import tailwind from "@astrojs/tailwind"
import optimizer from 'vite-plugin-optimizer' import optimizer from "vite-plugin-optimizer"
// https://astro.build/config
export default defineConfig({ export default defineConfig({
integrations: [react(), tailwind({ applyBaseStyles: false, })], integrations: [react(), tailwind({ applyBaseStyles: false })],
vite: { vite: {
build: { server: {
minify: false https: {
}, cert: fs.readFileSync("./.local-ssl/localhost.pem"),
resolve: { 'dedupe': ['@lumeweb/libportal', '@lumeweb/libweb', '@lumeweb/libkernel'] }, key: fs.readFileSync("./.local-ssl/localhost-key.pem")
plugins: [ },
optimizer({ },
'node-fetch': build: {
'const e = undefined; export default e;export {e as Response, e as FormData, e as Blob};', 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", "start": "astro dev",
"build": "astro build", "build": "astro build",
"preview": "astro preview", "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": { "dependencies": {
"@astrojs/react": "^3.0.3", "@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" import { cn } from "@/lib/utils"
const buttonVariants = cva( 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: { variants: {
variant: { 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 {CardFooter} from '@/components/ui/card';
import {CardHeader} from '@/components/ui/card'; import {CardHeader} from '@/components/ui/card';
import {CardTitle} 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"> <html lang="en">
@ -18,18 +19,47 @@ import '@/styles/globals.css'
<title>Astro</title> <title>Astro</title>
</head> </head>
<body> <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"> <div class="h-screen w-full bg-zinc-900 flex flex-col items-center justify-center p-8 space-y-6">
<Card class="w-[80%] mb-8"> <Card className="w-[650px] bg-zinc-950 border-zinc-800 shadow-xl">
<CardHeader> <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> </CardHeader>
<CardContent> <CardContent className='flex flex-row justify-between gap-x-5'>
<CardDescription>This is a short description of the demo.</CardDescription> <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> </CardContent>
<CardFooter> <CardFooter>
<Button variant="outline" class="mt-4"> <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>
<a href="/nft-gallery">Explore Demo</a>
</Button>
</CardFooter> </CardFooter>
</Card> </Card>
</div> </div>

137
src/styles/global.css
View File

@ -1,76 +1,77 @@
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@layer base { @layer base {
:root { :root {
--background: 0 0% 100%; --background: 0 0% 100%;
--foreground: 222.2 84% 4.9%; --foreground: 222.2 84% 4.9%;
--card: 0 0% 100%; --card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%; --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%; --popover: 0 0% 100%;
--input: 214.3 31.8% 91.4%; --popover-foreground: 222.2 84% 4.9%;
--ring: 222.2 84% 4.9%;
--primary: 113 49% 55%;
--radius: 0.5rem; --primary-foreground: black;
}
--secondary: 210 40% 96.1%;
.dark { --secondary-foreground: 222.2 47.4% 11.2%;
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%; --muted: 0 0% 32%;
--muted-foreground: 0 0% 32%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%; --accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%; --destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%; --border: 0 0% 32%;
--input: 0 0% 32%;
--secondary: 217.2 32.6% 17.5%; --ring: 222.2 84% 4.9%;
--secondary-foreground: 210 40% 98%;
--radius: 0.5rem;
--muted: 217.2 32.6% 17.5%; }
--muted-foreground: 215 20.2% 65.1%;
.dark {
--accent: 217.2 32.6% 17.5%; --background: 222.2 84% 4.9%;
--accent-foreground: 210 40% 98%; --foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%; --card: 222.2 84% 4.9%;
--destructive-foreground: 210 40% 98%; --card-foreground: 210 40% 98%;
--border: 217.2 32.6% 17.5%; --popover: 222.2 84% 4.9%;
--input: 217.2 32.6% 17.5%; --popover-foreground: 210 40% 98%;
--ring: 212.7 26.8% 83.9%;
} --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 { @layer base {
* { * {
@apply border-border; @apply border-border;
} }
body {
@apply bg-background text-foreground; 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;
}
}