Trying to create a CC0/Open Source Texture Library for 3D but I'm really bad :c

[tranquil copper]

hiiii, thanks for anyone whos reading and maybe trying to help.
im trying to set up a website like textures.com/megascans but for free without any login because textures.com and megascans both went into subscription models recently and google/pinterest are filled with ai images, so i wanna give back a little to my community and host my own images for everyone :3!

i know how to code via python but never ever did anything with websites so i am mainly googling/youtube/chatgpt+/gemini+ my way through it and its not really working at all :c im trying to use astro and sanity aswell as cloudflare r2 so i dont have egress fees. i have some mockup of how i want it to look and behave done via gemini canvas and im trying to recreate it with functionality now.

i basically need some folders like
textures -> metal -> rough -> then my library of images will show from this category and can be downloaded and resized (cloudflare workers) for free. when i click on a texture the window

should show some basic infos like resolution, tags, author (with some links and description).

i have all my accounts setup (cloudflare, sanity) and astro+sanity is working but whenever i try to get it to look like my mockup everything breaks and im not quite sure what to do. if anyone has any help or tutorials or tips i'd be really glad. thanks in advance <3

[vast musk]

@tranquil copper Could you share what you're expecting, and what you're seeing?

[tranquil copper]

it looks like this currently and thanks for reading! but contrary to the gemini canvas mockup thats actually running on my localhost and using astro and cloudflare and sanity so the texture is from cloudflare and tagged via sanity so atleast thats working but it looks really horrible and im not quite sure on how i could (or even if i can because the first one was done with ai so i guess its quite badly written) transfer that somehow to my actual website now

[vast musk]

Are there any errors in your terminal? And are there any are there any errors in your browser console when you inspect the page?

[tranquil copper]

currently none at all but ive been sitting on this for like 100hours the past 2 weeks and started again from a fresh install today. im not even sure what im trying to ask and i dont wanna waste anybodys time. im not very familiar with any terminology or sth to describe it better :/ if i wouldnt have vibecoded the mockup with ai, are there any resources or tutorials or something u could recommend for me to make a website look like the mockup? should i still try to implement the stuff that gemini gave me and that i liked? im just not sure if it leads to something

[vast musk]

Well don't worry about wasting anyones time we will all try to help as much as possible. Which terminology are you not familiar with? I can provide further guidance.

I'm assuming that mockup is based on starlight, starlight (https://starlight.astro.build/getting-started/) so that could be. astarting point, and astro/starlights docs are written to be beginner friendly

[tranquil copper]

am i allowed to send code here? i could paste the stuff that gemini gave me but apparently its too long for the normal discord code preview thingy. in astro i have tailwind installed and i've put the stuff into the global.css and tailwind.config.mjs and astro.config.mjs but it still looks like the white screenshot sent above

i mean like a .txt file with code im not sure if its forbidden

[vast musk]

You can send code, it's fine. Also your tailwind config shouldn't be in a <script> tag like that - which is likely why CSS is not loading, try setting up tailwind again following this guide: https://tailwindcss.com/docs/installation/using-vite (and copy over the config you have there into the proper place which the guide will show)

[tranquil copper]

thanksss i will have a look

this is the code from gemini

also thanks so much again for helping ive put in so so many hours and getting so scared i wasted everything and wont ever get it online Q_Q

[vast musk]

You should put the code on github, it will make it easier for people to view the code and follow as you make updates

[tranquil copper]

ok maybe thats a stupid question but when i post the github stuff here will my cloudflare and sanity login etc not shared aswell with it? can i exclude this?

ok wait i just found out sorry

wait i try to upload

[vast musk]

What you want to do is you want to mark certain files with gitignore (ask AI), those will not be uploaded to git and thats where you put your secrets

if your sanity and cloudflare logins re present in this, you should delete it

@tranquil copper I didn't download that file but someone else might've so you should reset the secrets which were in there

[tranquil copper]

nooo it wasnt i was just uploading the astro layout and index and stuff thats why i didnt put it to github because i was afraid i mess something up and leak all my data. im trying to put it correctly on git and will put it here if i found out how to do it correctly. its a bit confusing first time but atleast a lot of tutorials

[vast musk]

take your time

[tranquil copper]

heyooo ive been working a bit more on it and trying to get it as good as i can before showing u but cant figure out how to go on from here. i made a little video on explaining the project and showing where it fails but its 6mins long so im not sure if its maybe a bit much to ask for or something.
i also figured out the github but i think my project is on private. should i unprivate it or can i add your name so u can see it? thanks in advance already
heres the video

[vast musk]

Hey! Feel free to make it public or add me, https://github.com/sph-e. Also - that's a cool video but is that the one you meant to share?

[tranquil copper]

oh nooo wtf i copied wrong link

i mean if ure into watching me badly play guitar this might be the cooler video

https://www.youtube.com/watch?v=0ceg-uORAAw&feature=youtu.be

i think i sent u a friend request

or github collab request or idk what its called

and thanks for helping again!

im quite sure that i have my important stuff in the .gitignore but also not 100% so i didnt wanna put it on public

[vast musk]

I got it yeah, will check it out when I have some time tomorrow

[tranquil copper]

yeah no stress at all im so super thankful to have u watching over it whenever u have some time

ive put so much time into it already even if its just like some copy pasted stackoverflow vibecode project bc i dont know any better rn. but im scared it will all be for nothing :c so thanks! and have a great evening

[vast musk]

Yeah no problem! Hopefully we'll resolve your issues and get you up and running

Have a great evening as well

[tranquil copper]

thankssss! :)

[vast musk]

@tranquil copper Hey I just looked at the github, I think you forgot to upload your astro project - the one in the repository seems empty

[tranquil copper]

Oh what I was just about to go to bed but let me go onto pc. Just saw it now

mhmm do u know if i still have to activate something for u maybe so u can see it?

[vast musk]

Feel free to look into it tomorrow, you can call me if you want

[vast musk]

Likely uploaded wrong project files

[tranquil copper]

ok yeah i will try to figure it out tomorrow

have a good nightyyyyyy

ah wait or is it

i have this setup-astro branch

i wasnt sure when i need to branch or when to version up

so i had sanity setup as v001 and then started astro stuff on my astro branch

[vast musk]

Oh okay I see it now, though I think its missing guides etc. I saw in the video - but yeah good night, feel free to look into it tomorrow

[tranquil copper]

oh yeah i just realize i just have my "actual" project in there but not the original 3 files from gemini with the main website and the 2 tools. sorryyyy i'll fix it tomororw

but now i really wish u good night :D!

[vast musk]

No problem! Good night

[tranquil copper]

heyy hope u had a good nighttt! ive been updating the github to now include the gemini_mockup folder

and i wrote a little readme

for the bottom half of the readme idk if i need this or parts of it or all of it. trying to figure it out. also dont know if u can just add all of this later?

websites are such a rabbithole :')

[vast musk]

Hey @tranquil copper Thanks I did! Hope you had a good night as well.

You can add/remove things from your website at any time,

I only recommend to not change the page url paths (website.com/shop => website.com/shop/ is bad, website.com/shop/apples => website.com/shop/de/apples is also bad (you can make different pages per language, just dont get rid of the original url all together), you are able to do redirects and what not to fix those issues over time later down the road but the easiest thing you can do is to avoid the issue all together) this is mostly related to SEO and how google indexes/ranks pages.

I watched your video and the first issue you have is with postcss, which is the tool used to setup tailwindcss but the recommended way to setup tailwind in astro is actually different, see: https://tailwindcss.com/docs/installation/framework-guides/astro, so you can get rid of postcss completely and follow this setup instead which will also get rid of the postcss related issue.

See where that takes you first, the styling issue towards the end seems to me like its due to the components just not being styled, the relevant snippet:

(/src/pages/textures/index.astro)

    <!-- Grid -->
    <div id="gallery-grid" class="masonry-grid">
      {
        textures.map((t) => (
          <div class="masonry-item bg-brand-surface cursor-pointer group relative rounded-md js-open-modal" data-id={t._id} title={"open “"+(t.title||'untitled')+"”"}>
            <img src={t.image} alt={t.title} class="w-full h-auto block" loading="lazy" />
            <div class="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-4">
              <h3 class="text-white font-bold text-lg lowercase">{t.title}</h3>
            </div>
          </div>
        ))
      }
    </div>

2 other things,

1. Get AI to write your interactive components in React instead of script tags in astro components (script tags in astro components should be used extremely sparingly)
2. For SEO purposes you would want to also have an individual page for each texture etc. you might like the idea of popups but you should also include the option, maybe a small button to open the texture in a new page

There are also other things you need to consider when making a project like this, such as - what are the limits of cloudflares storage, at what point and based on what metric will they start charging you etc.

Websites are absolutely a rabbithole 😄

[tranquil copper]

wow thanks for the super indepth answer! i will have to watch some more videos because i dont really know what react is or how it differs from the script tag astro components and stuff.
and for 2) that makes a lot of sense. i just checked with textures.com (https://www.textures.com/browse/worn-paint/369) and when u click on a texture here the link on top changes but i have absolutely no idea how i do this on my website.

and yeahh with the cloudflare storage im actually quite anxious about getting billed when either a lot of people use it or someone does abuse it with botting etc :/ thats why i thought maybe to have like 3 packs as a little donation thing so if i have to pay stuff i can pay it from that. before i started this i actually didnt even knew about egress fees etc. i wanted to do something positive for my community after the 2 sites we had went paid and google/pinterest is full of ai images so u have to search 348223 hours to find something usable, and i thought going out taking textures and sharing it for free would be a great plan - how hard can it be to have a little directory where u can download some textures..... right? :D

but the more i look into it the harder it gets ;_;

i just saw amazon s3 is super giga expensive and cloudflare has their r2 service without egress fees so u just pay for more gb i think? but it says something with class a, class b like whatever all of that means. but they had some calculator here https://r2-calculator.cloudflare.com/

i feel like the more i try to understand some things the less i understand anything at all

so theres like react now and svelte and vue and its ui stuff? but then theres tailwind and css thats also for ui style stuff? and then theres like sveltekit thats different from svelte and then u have a million other things like cms and storage and security and analytics and hosting and cloudflare workers thing

oh man i always wish i had a hobby like crochet or something instead of 3d and guitar/music theory and now we gotta deep dive into websites aswell i guess

also the more i use any of this the less i am convinced it will help me write somewhat functional code and thats the paid subscription already. same as in gemini.

[tranquil copper]

ok so your comment helped a lot already! also looked at some react videos

[dull mantle]

so theres like react now and svelte and vue and its ui stuff? but then theres tailwind and css thats also for ui style stuff?

React, Svelte and Vue are great for UI components which need to be "reactive", meaning they immediately react to user input. A simple counter, a shopping cart, etc. Stuff that needs to reflect changes instantly.

Tailwind is just a way to write CSS in a different way, they provide pre-written CSS and classes for your HTML to go along with it.

and then theres like sveltekit thats different from svelte

Sveltekit is a thing made by Svelte to make entire apps using just Svelte components!

and then u have a million other things like cms and storage and security and analytics and hosting and cloudflare workers thing
Quick-fire round:

• CMS means content management system. Basically a thing you can interface with to write content in a text editor, then have it show up on a website.
• Storage is what it says, a way for you to (programmatically) save files that you can retreive with code.
• Security is self-explanatory as well, but I think considering where you are it's something you can attempt to get right later on when being closer to being done with the site.
• Analytics are for tracking how users interact with your site. Basically, what site they visited, how long they were on that site, all that stuff. Probably not necessary for you to have in this case.
• Hosting is where it gets a little more interesting. Once you're done with your site, you likely want other people to visit it. Something like cloudflare workers allows you to do this without renting an entire server and setting it up manually - it's a way to get your app up and running without having to become a server administrator. Again, something you'll need later on. But something I think you might find more hassle-free is https://netlify.com or https://vercel.com.

[vast musk]

@tranquil copper

wow thanks for the super indepth answer! i will have to watch some more videos because i dont really know what react is or how it differs from the script tag astro components and stuff.

No problem! React is a UI framework like Vue, Solidjs and Svelte - among them its the slowest but has the biggest ecosystem, which means a lot of functionality you are interested in has likely been coded by someone else and has been published on NPM allowing you to move quickly. Anything that has user interactions should use a UI framework as thats the cleanest and simplest way you can move forward, otherwise you will introduce complexity that makes the project unmaintable later down the road.

and for 2) that makes a lot of sense. i just checked with textures.com (https://www.textures.com/browse/worn-paint/369) and when u click on a texture here the link on top changes but i have absolutely no idea how i do this on my website.

That's something done with javascript, with something like https://developer.mozilla.org/en-US/docs/Web/API/Location/replace

and yeahh with the cloudflare storage im actually quite anxious about getting billed when either a lot of people use it or someone does abuse it with botting etc :/ thats why i thought maybe to have like 3 packs as a little donation thing so if i have to pay stuff i can pay it from that. before i started this i actually didnt even knew about egress fees etc.

The storage area of things is something I'm not super familiar with, but practically speaking its unlikely that something bad will happen at the start, I wonder if you can set spend limits in cloudflare?

i wanted to do something positive for my community after the 2 sites we had went paid and google/pinterest is full of ai images so u have to search 348223 hours to find something usable, and i thought going out taking textures and sharing it for free would be a great plan - how hard can it be to have a little directory where u can download some textures..... right? 😄

but the more i look into it the harder it gets ;_;

i feel like the more i try to understand some things the less i understand anything at all
so theres like react now and svelte and vue and its ui stuff? but then theres tailwind and css thats also for ui style stuff? and then theres like sveltekit thats different from svelte and then u have a million other things like cms and storage and security and analytics and hosting and cloudflare workers thing
oh man i always wish i had a hobby like crochet or something instead of 3d and guitar/music theory and now we gotta deep dive into websites aswell i guess

Yeah it's a great idea! Sounds like you're getting to the low point of the dunning kruger effect 😆

[vast musk]

What was the rest of that response if you still have it?

[vast musk]

Nice, AI should also have an easier time writing React code in general I believe

[tranquil copper]

ohhh so many long answers, thanks to u 2 im going to read everything now 3x so i can hopefully understand it at the end

wait also while im reading i wanted to ask maybe for some ui feedback because first i thought i just have textures but now i have tools and a wiki aswell so i guess i have to change the layout a bit

would u put it here at the top or leave it at the side?

[dull mantle]

If you don't happen to understand something at first glance feel free to ask again!

[tranquil copper]

omg thank you so much im sitting on this for way way longer than it looks like and i felt so super lost so thanks a lot for like listening and helping out and stuff

gives confidence in the whole thing

[dull mantle]

I think for a more workspace-y thing like this a sidenav works fine. You want to maximize the content the textures and images take up for a better workflow (you want to see as many images as possible after all), and a sidebar could even be collapsible if you ever need it to be. Your goal in general should be to maximise the content your users will be looking at most - so I think a sidebar is perfectly fine here.

[tranquil copper]

oh yeah that makes a lot of sense i will do so!

[dull mantle]

A tip, something that helps me a lot when figuring out UI is just drawing the general layout on a sheet of paper or on my iPad. It's easier to move stuff around that way and experiment!

If you wanna try and figure out how something looks on a site, never start by making the thing, make a concept first

If you're into 3D, a blockout in Blender (just a couple cubes) to represent the layered HTML Elements might also work. Could be easier for you to work with

[tranquil copper]

yeahhhh i do that on my job everyday like i do 3d :') shouldve known better! i actually started with a wordpress website and bluehost but it was a giga horrible experience and one day i realized there was gemini canvas and then i just typed in stuff and everything came together somehow so i skipped the design step which is always not a good idea :D

[tranquil copper]

yeahhh i thought of this aswell :D i was drawing for many years but since i started 3d i barely do

on my job i use houdini but also know blender quite well so should be fast

[dull mantle]

Whichever is most comfortable for you is best! People will tell you that theres all kinds of tools that will improve your workflow n stuff, but as you've probably learned in the case of 3D as well, it's about familiarity and comfort and not the "most optimal workflow"

[tranquil copper]

wordpress felt like an early 2000s internet simulator with 99€/year plugins for every minor thing

[dull mantle]

Yeah that's pretty accurate

[tranquil copper]

wait i record a little video

i had my mic muted

https://www.youtube.com/watch?v=SgfgoLEkaAY

ok i talked a lot i think but basically my wiki is at some point probably quite big so im not sure how to do the layout for that now

[dull mantle]

That's huge my god, what a knowledge base! Very impressive.
In terms of where to put it - migrating all that data from Notion could get interesting. I think for now i'd keep it separate and maybe make the Notion public/into a site people can browse (iirc that's possible?)
In the future it'll definitely be possible to have all that show up on the website, but considering the scale, I'd put it on the back-burner for now.

[tranquil copper]

yesss it started small but really accumulated day by day :') i thought maybe its good for SEO since it answers a lot of questions but maybe i should rather do an FAQ? really gotta look more into how websites and everything really work :/

also i wouldnt migrate it directly from notion but write it down freshly but yeah im not sure if a) its a great plan because it adds a lot of value so more people visit my website or b) its very different from textures and maybe should be on its own later mhmhm

[dull mantle]

i thought maybe its good for SEO
I'll be honest, SEO is a completely different rabbit hole. There's a reason people make their living off just SEO! For now, I'd keep that in the back of my head. Your site is meant to be for a dedicated community anyway, and once it goes live you can work on getting Google n co. to like it.

also i wouldnt migrate it directly from notion but write it down freshly but yeah im not sure if a) its a great plan because it adds a lot of value so more people visit my website or b) its very different from textures and maybe should be on its own later mhmhm

So fun fact, if I remember correctly there's a way to directly grab that content from Notion and display it on your site using Astro's content collections and a custom loader. I'll go and check for that link, but again, that's something I'd put on the TODO list for once the initial project is completed.

[tranquil copper]

ohhhh wow thats good to know

[dull mantle]

https://astro.build/blog/community-loaders/#notion
Sure enough!

[tranquil copper]

yeah sounds smart, i was worrying a lot about SEO since making all of this for free takes a lot of time so i atleast want as many people as possible to find and get use from it

oh cooool im saving it

thanks!

[tranquil copper]

yesss i do! i wonder if its correct?

and no apparently u cant put any € limits into cloudflare and its by their design. you can only say when x amount per month is reached or close to reaching u get an email. chatgpt said i can code in some functionality that will check if that amount is reached soon and then turn off the download button functionality

im not sure if i have to install like captcha or something like this maybe to prevent abuse (im so scared of a high bill from them while i sleep and someone ddos my website or sth)

or idk how mass download attacks are called but u get the point

[tranquil copper]

dont u think analytics would be good to see what people like? or is it hard to install or expensive? theres probably different tools out there i just know google analytics from gumroad. maybe 90% of my downloads will be concrete rough textures so i will know what i should produce more of?

also i mean i can google whats best but why would i wanna use netlify or vercel over the cloudflare? isnt it better to have as much as possible from one provider so it fits together? like r2, pages and workers from cloudflare? i mean my main concern is probably just to keep it at low cost as possible

already put 3k into camera equipment

[vast musk]

It's weird, gemini was always weird for me as well.

I asked chatgpt and it might be possible to run checks automatically using something like: (have not confirmed this will work right, requires testing)

.

[vast musk]

depends on the final setup, if you keep your buckets private, and have a server act as a middleman you could totally add captchas and what not

[vast musk]

yeah it's still DDOS

[tranquil copper]

im sorry but im not sure what that means

is my stuff private and has a server as middleman?

[tranquil copper]

ohh i mean the response from the screenshot is from chatgpt. i have both as premium subscription still but i think both are weird in their own way sadly. like come on u programmed this yourself, why do u not use react to begin with if u know it better ;_;

thats kinda the worst. a) that it forgets everything it said 3 answers above and b) that you dont know what u dont know (like the react) so it gives u something that doesnt include react but once u mention it its super wise on the topic apparently

like just tell me to begin with :(

im even running deepthink etc before to try to get everything i have to know about the topic but yeah doesnt really help a lot

[vast musk]

You can set it up in multiple ways, 2 of which is

1. Provide user with R2 bucket URL and they pull data from there directly
2. Provide user a URL of your website, eg. heartsurface.com/downloads/xxx, so when a user requests a download the flow is

User => heartsurface.com/downloads/xxx (Your server)
Your server => R2

Then the file is given back to your server, then to the user

R2 => Your server (acting as a middleman) => User

When you do the second thing you have more control as you can now add a captcha check, or other checks - eg. is the user logged in, how many downloads does this user have

And additionally with either method you could also just programatically check your usage on cloudflare, and disable the R2 buckets if the usage has exceeded your limit, does this make sense?

[tranquil copper]

i think so. isnt my setup with sanity already the #2 option?

[vast musk]

Yeah, AI is interesting

[tranquil copper]

and yeah the cloudflare usage block is probably important

[vast musk]

Well just because you put the R2 link in the sanity input box doesnt automatically make it option #2, it depends on how that R2 link is being used by you later down the road - are you giving it directly to the user? or is your server (which could be sanity) using it to fetch resources and then give it to the user?

[tranquil copper]

oh eh then i dont know ._. but i wanna do #2!

ok maybe to like go forward what should i focus on now?

• get ui/layout drawings and then?

would setting up the r2 and cloudflare block be the next? or getting the ui to work with all the categories and subcategories?

or something else?

[dull mantle]

You can definitely look into it! I recommend Umami or Rybbit, but there's lots of free platforms and free offerings. Most of them will start charging something once you start using it more actively though. Again, something to look into later.

[tranquil copper]

i will put it on the list thanks! maybe some people donate a bit so it can run itself kinda with hosting + some services. lets see :) but getting the core website to work is probably the bigger issue rn

[vast musk]

So I think you need to start thinking about your infrastructure primarily first here, the design can be changed at any time

1. What services will you have?
2. How will you host your services?

[vast musk]

texturelabs does #2 for example (maybe they dont even use R2 - I dont know), https://www.textures.com/api/v1/download?photoId=125818&size=S is the download link they provide to users for example

[vast musk]

In order to fully answer these questions you need to decide on how this project will even work to start with

A few questions to get you started,

1. Can anyone upload their files through an online UI, or do they have to be pre-vetted by you?
   1.1. What does that flow look like? If it has to be vetted, do people send their files via email, an online form, or through what means? If its automatic then how should the upload flow work, can they anonymously contribute, or do they need an account, and does the account need to be email verified?

And in order to answer do they need an account, and does the account need to be email verified? you need a risk model, and a plan on how you want to deal with risks

[tranquil copper]

oh wait no i do everything myself. i have the different "artists" just in case some of my friends wanna contribute some packs so atleast i can put their artist tag besides the texture and link their portfolio for people to see

but no accounts for anyone. the only account type thing would be if i had my 3 products for donations+benefit like 5€ 10€ 15€ but i would do that with some gumroad integration so i dont handle any logins or finance or something

but other than that i will drag myself out on the weekends to do this all alone :')

but since its just image textures and not pbr(photoscanned or procedurally generated) it doesnt take toooo long. i mean still long but i should be able to get a library big enough in a decent amount of time

already did some rounds and got stuff

getting ~ 300-500 images per day that are good

[vast musk]

What's the average file size?

[tranquil copper]

good question let me see

2.5ish mb

but my camera can also do 96mp mode (i dont have a tripod yet) so idk how big these are but probably 4-5x larger

not sure if its overkill tho

in a normal png format without any further compression

textures are nice but like taking pictures at night is also so cool :D

sadly theyre a lot less useful

but yeah back to website sorry

was just browsing the pics

[vast musk]

Those are some pretty nice pictures

[tranquil copper]

aw thanks!

i love the moody ones but textures gotta be sterile and color corrected ;_; but its okay

[vast musk]

How many gbs of data do you have?

[tranquil copper]

currently just 5-6

i just bought the camera for the purpose of doing the website and did some test runs

i think its like ~2000 images

[tranquil copper]

that seems very reasonable. i had no idea what to put into the 2 right options and how much is realistic

[vast musk]

Oh I just put overkill

[tranquil copper]

if somehow possible keeping my own fees under 40ish€ a month would be really good since my job pays really bad 🥲

[vast musk]

50 000 000 downloads is a great number, at that point youll have sponsors I think

[tranquil copper]

ohh i didnt even think of that yet

i mean as long as i dont wake up with like a 1000€ bill from download abuse

[vast musk]

I feel like Im screwing something up with those calculations, but yeah I think youll be fine

anyways, going back to the website

So the services you want in your infrastructure are:

1. Sanity CMS to manage your downloads
2. Your website which will provide an interface for users to view the available downloads, and also act as a middleman between R2 and the user while delivering downloads
3. R2 to store your files

Is that correct, is anything missing here?

[tranquil copper]

yeah thats what i had in mind aswell. and then like cloudflare for security aswell as cloudflare workers because i saw they can make image resizing on the go

so if my native texture is 4k but the user just needs 1k to keep texture size low in project or its a midground asset or whatever he can just download it smaller

without manually resizing which takes time and nobody really does it because 90% of artists dont understand how important optimization is :') so built-in would be nice

insane bonus points if u could even somehow compress the files like say 4k but compress it so its visually lossless but even smaller but idk if thats possible to do for someone like me

or if theres some eh idk plugin or whatever

[vast musk]

Okay, so we're adding one more thing then, maybe this could be merged into one of the other services after some research.

So the services you want in your infrastructure are:

1. Sanity CMS to manage your downloads
2. Your website which will provide an interface for users to view the available downloads, and also act as a middleman between R2 and the user while delivering downloads
3. R2 to store your files
4. Image optimization service

[tranquil copper]

yes i think so if theres nothing that i forgot/not know about yet? and i mean the astro react thing for my website not sure if i need to consider anything else

maybe the gumroad integration? is that its own thing?

[vast musk]

You could think about that later, that should be easy

[tranquil copper]

also thank u so so much for helping so much and reading everything ;_;

[vast musk]

Not sure what "public only" means here

[tranquil copper]

is that sanity? cloudflare?

[vast musk]

Sanity

[vast musk]

No problem

[tranquil copper]

mhmmm i mean me neither :D

also not 100% sure what to put everything into there but probably a problem for future shannon

wait i start so i can show

looks like this currently

idk if hidden seo tags is a thing or if chatgpt lied to me

or if i miss anything else

[vast musk]

Okay

Is this something you're okay with? This means if someone got the project ID they would be able to find the R2 urls

[tranquil copper]

im not sure what exactly that means for me

is this some security risk?

[vast musk]

Depends on your security model, do you want the R2 links to be private?

[tranquil copper]

i mean the second highest tier is like 15$ a month

[vast musk]

You need to set boundries, what should be private, what can be public

[vast musk]

Yeah, and that lets you make your stuff private

[tranquil copper]

im so sorry for being dumb but isnt it all public anyways

because its behind no paywall?

can they backtrack my account or anything through the links or get some private information of me?

[vast musk]

See this is a really good point, and this is the thing - how important is it that these links stay private

What are the security measure you have to not go over budget?

[tranquil copper]

ehh im still not sure if i understand it correct im sorry but does it work like this
a) public - everyone sees the correct cloudflare link and can maybe abuse it somehow for ddos?
b) private - when they click download they get some mystery link so they dont get the direct cloudflare link so i can put anti ddos on my website and am protected?

am i like completely off ;_;

[vast musk]

Give me about an hour please

[tranquil copper]

take all the time in the world im really glad u help me at all! :D

[vast musk]

Going to be another hour

[vast musk]

Of course!

[vast musk]

Yeah exactly, you pretty much got it.

So continuing with this:

Somehow someone got your sanity project ID and because the data in sanity is public on the free plan they're able to query your data, and your data gives them the R2 links

Is this okay or not okay? Do you have security features that are setup to limit your R2 spending so even in the off chance this happens are you safe from abuse? Or do you absolutely need this your R2 links to be private?

(I know the answers to some of the questions I'm asking, I'm just walking you through the thought process)

Or, maybe you can configure your R2 buckets to require authentication - so even if someone does get the link to the R2 resource they wouldnt be able to access it without the correct credentials

[tranquil copper]

thank you so so much for looking into all of this. i mean my security feature would be the handwritten one where i stop the downloads for everyone after a certain € amount right? but if i get maliciously attacked and thats on day1 of the month that would be bad right?

im really anxious about the cyber attacks because i already had that happening and just today i was playing a few rounds online and got so extremely hatecrimed for being a woman (in 2025??) so i dont really trust that everyone has good intentions and some people probably will find it funny to bring this down or try to cause monetary damage. so i guess the private thing is the way to go? but im not sure maybe u can tell me more

mmh but the cloudflare documentation says its private anyways?

all of this is so confusing

[vast musk]

If you're unsure about anything please feel free to ask again. So yes, it is private by default, and as long as you keep your buckets private and get the R2 files through your server then you can set protections in your server.

So then your setup looks like:

1. Sanity holds data relating to pages (title, descriptions, metadata - oh and yes <meta> tags are real "invisible" things), and R2 urls
2. R2 holds the files, privately
3. Your server provides the interface for your app, and serves the resources. Your server gets the page/resource data from sanity, and uses the R2 url it gets from sanity to access the resource (your server will have the credentials required to access the R2 private bucket)

And in this case you dont care if someone somehow gets your Sanity project ID, because them getting the R2 urls is useless without the credentials to access the resources

Is this correct? Does it make sense?

[tranquil copper]

ohhh yess makes a lot of sense! so i just gotta protect my account credentials of course but the link itself is useless for malicious attacks

i mean i have my main accounts all on yubikeys maybe i can connect it to cloudflare aswell

also i had in mind still that i have to do the searchbar and im not sure if this is some native feature? because i saw that theres some dedicated searchbar tools aswell

just regarding to the stack and project overview

i mean i just gotta have people type in like "weathered" or "concrete" or "bricks" or something and then all textures with these tags show up

i think

i mean maybe searchbars are more advanced because they have their own tools and everything about websites is so much more complicated than i thought

[vast musk]

Before getting into that, do you know about SSR and SSG?

[tranquil copper]

server site rendering and ehh

but i was trying to learn more today im sure i heard about it

wait

is it this one?

ok maybe im super off now but we have static and dynamic components in astro and the cool thing is that we have these islands so if i need dynamic stuff its just in this island and not on the whole side(?) and therefore its faster?

but i dont really have the backend dynamic thingy because no logins or payment but i have this eh button hover dynamic thing?

i should look more into it oh god i can barely explain anything

but i think something along the line

[vast musk]

Give me about an hour or so please

[vast musk]

@tranquil copper So here's how it works:

SSG (Static Site Generation) takes all the data from your data sources at build time, and generates static pages for them, this means if you go to Sanity and add extra content your website wont get updated until the next time you rebuild the site. SSG sites also dont have code running on the server, the SSG process outputs html css js which is given to the user and thats it.

In your case you dont have user accounts and whatnot but you want to have security measures on the server for downloading your resources, which requires a server to run, so in your case you will need to use SSR (server side rendering) mode which will allow you to have API routes that run custom code such as code that authenticates to your R2 bucket, gets a resource, then sends that resource back to the user.

Also in SSR your server has the capability to generate the pages on the fly, so when a user requests a page such as /textures/special-texture-name you can go and ask sanity if there is a texture with the slug (url friendly lowercase name) of "special-texture-name" then generate the page based on the data Sanity gives your server.

So with SSR when you update/add/remove content in Sanity its instantly reflected on the website without needing to wait for a rebuild

Does this make sense so far?

[tranquil copper]

does that mean my whole site is slower now because its not static site generation but ssr due to the security? does this function like an on-off switch like ssg = fast and ssr = slower but cool realtime features or does it have some inbetween values like ssr = slower but since its just some security stuff and not 300 interactive things with login its still fast?

and i dont really understand the on the fly pages tbh. i mean if i have textures/concrete-wall11 but the user types in textures/concrete-wall12 then what exactly happens? nothing because i have no concrete-wall12? but why exactly do i need on the fly generation then?

also i was reading about eh CSR and apparently thats like my tools?

also what is this then? when it remembers my last searches even after refreshing browser etc (not deleting cookies) is this CSR? is this SSR? is this something else entirely

[vast musk]

There will be negligible speed difference in your case, we're talking 10-20ms maybe, you can have part of it static, part of it dynamic - but that optimization is something you shouldnt worry about for now.

and i dont really understand the on the fly pages tbh. i mean if i have textures/concrete-wall11 but the user types in textures/concrete-wall12 then what exactly happens? nothing because i have no concrete-wall12? but why exactly do i need on the fly generation then?

If wall12 doesn't exist, your app should return a 404 page, the point of having it dynamic is - when you add something new to Sanity it will be instantly visible & available on your website, and if you update something the update will be reflected automatically as well, the data being dynamic also means when someone is browsing textures, depending on what sanity provides the list is compiled completely dynamically too

[tranquil copper]

ohh that makes sense

maybe really stupid question now but for ssg how does this go live then? i mean u say its not dynamic but isnt it also just like pushing some code and then its live? like how does it differ from pushing my dynamic code and making it live

[vast musk]

CSR (client side rendering) will happen with your interactive react components, theres lote of detail here but you dont need to get super depe into it for now

[vast musk]

That's a client side component putting data into / retrieving data from the localStorage api of the browser https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

[vast musk]

there are platforms that make it easier to publish SSG websites, SSR usually requires extra work - however for example with a cloudflare, vercel, netlify adapters also make publishing SSR websites super easy

The way websites work is that when someone goes to x.com, your browser sneds a GET request to x.com, and x.com returns the relevant HTML file, and the HTML file references CSS and JS files needed for the page to function, and the browser fetches those too

SSG generates these HTML CSS and JS files at build time and thats it, the underlying platform just sends the files

SSR runs javascript code on the server, and that code processes the incoming requests, then responds with HTML CSS JS files, or custom (API) responses

Astro handles the generation of HTML CSS and JS files for you, you just write .astro files, and react components and astro handles the rest

Astro also allows you to add API endpoints when you're running in SSR mode - which is what you would use to respond to requests to download files

[tranquil copper]

and we dont use ssr for everything because its slower? or does it have other negative effects?

also the astro thing i dont really understand yet. i mean i (or chatgpt) is writing the html css and js files no? i thought astro is making some js -> html conversions so that the site runs faster and it has these island things

and that u can use other things with it together? i just forgot what. i mean we got the ui frameworks with the react and svelte and vue and we can use that with astro right? but we cant use the other frameworks together like next.js or sveltekit?

[vast musk]

SSR vs SSG in most cases has a negliglbe time difference, it depends on how big the page is, and right now, in your case dynamically rendering pages wont cause you issues, you dont want to get stuck on optimization at this stage

also the astro thing i dont really understand yet. i mean i (or chatgpt) is writing the html css and js files no? i thought astro is making some js -> html conversions so that the site runs faster and it has these island things

Astro is an abstraction layer on top of HTML/CSS/JS, and also provides other useful features that people usually need, and handles the work required to have these features behind the scenes, the "island things" etc. are usually solutions to problems that are caused by having everything dynamic, but again for you at this stage i wouldnt even think about it

and that u can use other things with it together? i just forgot what. i mean we got the ui frameworks with the react and svelte and vue and we can use that with astro right? but we cant use the other frameworks together like next.js or sveltekit?

Nextjs works with react
Nuxt works with vue
Sveltekit works with svelte

They're super optimized to work specifically with those technologies and can do certain things that Astro cant do because of that, eg. <Image> components directly inside react

Astro uses vite which has integrations with all the major UI frameworks, so you can use most of them with Astro, though you shouldnt do this, you should try to stick to one

Does this make sense?

[tranquil copper]

yes very much and thanks so so so much. just the last thing maybe not yet. u say we use vite (i have no idea what that is and will look it up soon) but we also have the react in there right? so thats 2 and not 1?

[vast musk]

Vite is the underlying bundler, React, Vue, Svelte all have vite integrations, but actually this is too much information for you, you dont need to think about vite at all for now

[tranquil copper]

okokok no vite video

but what should i do next now? learn more stuff? about what? do something now that we identified which tools we wanna use?

[vast musk]

There are a lot of underlying tools, we dont know all of them because the point of astro is that it handles all that for us 🙂

[tranquil copper]

yayy

[vast musk]

So now you know a few things:

You know

1. Your security model,
2. You need to use SSR

So the first thing you could do is make sure your website is SSR

Then you can fix the UI issues you have

And then you can work on making the API endpoint people will use for downloading files

I said people, but actually a button on your website will "use" the api endpoint, but the existence of it will be public to any developer that can open the browser dev tools

[tranquil copper]

ok the last sentence confused me again but its also super late so i am trying to get some sleep and read it again tomorrow and see what i can do. thank you for everything a lot and have a really great night!!

[vast musk]

Yeah no problem feel free to ask for me to explain it again. Thanks! Good night!

[tranquil copper]

Good morning:) didn’t get anything done yesterday but I’m going to watch how I can make the ssr now :) hope u are having a good day today

I still couldn’t really understand what u mean with the existence of it will be public to any developer that can open the browser dev tools?

My api endpoint is the cloudflare link right? And my download button used that. And do u mean that the people who go into the f12 menu on browser can then see the cloudflare links that we talked about if it’s ok or not ok to have them publicly visible?

Also when the are private anyways which we found in the cloudflare documentation I wonder what the benefit of the sanity subscription is then? That’s what I didn’t understand yet aswell

But I also didn’t listen and looked a tiny bit at vite vs react and „understood“ that react is the ui definer thing and vite is some bundler that gets everything running. And next.js doesn’t use vite but turbopack or webpack while turbopack is the cooler new rust fast one and vite is JavaScript and in theory slower but it’s been very good developed and therefore it’s cool and fast right? So the vite sits below the react

Ok wait I try to do this from my head but the hierarchy then would be
1 - html JavaScript css (I always think it’s crosssite scripting but it’s some style sheet) -> my pure code
2 - tailwind -> some predefined css helper?? (I’m not sure I have to look it up again I forgot)
3 - react, vue, svelte -> some predefined ui code libraries to make complex stuff with less code?
4 - vite, turbopack/webpack -> some bundler that combines scripts to one larger so it’s more optimized and the local server thing with the hot reload so I can see my changes on localhost website instantly
5 - Astro, svelte kit, next.js -> frameworks that bring everything to the browser?? (Man I have to look it up again I thought they kinda did what the vite does but now I don’t know again)

[tranquil copper]

oh my god new confusing words coming in everytime i look something up XD i mean i never really thought about how websites work but i definitely did underestimate it by a lot

i somehow thought wordpress had some gallery plugin and then i upload my images like on deviantart and thats it but now i sit here and wonder what a jamstack or kv cache is or what even is cloudflare workers or pages and does my whole site need to be ssr now or just parts and how do i even make that

i mean im trying to find out the part how i make that

[vast musk]

@tranquil copper Do you want to call me in about an hour or so? It would probably be faster to answer all this on a call

[tranquil copper]

yes whenever it fits for you thanks a lot

hope u have a good and not so stressful day! like i dont wanna take time away or something ;_;

[vast musk]

I'll be around in an hour just shoot me a message

[vast musk]

No no don't worry about it

[tranquil copper]

yeah no stress im here the whole time

havent really done anything today. was watching youtube videos but i couldnt understand them really so i was talking to chatgpt and hoping that most of the stuff it tells me is somewhat correct

[tranquil copper]

im not sure how we wanted to meet like who calls who but im here if u have time

[vast musk]

Hey I sent you a message but give me like 10 mins please