Comments (8)
@danstepanov @hqasmei Is the objective here to have dynamic OG generation based on the docs page content metadata? Also, do we already have a defined design/layout for how they should look like?
If so, we can probably achieve this with @vercel/og
(https://www.kozhuhds.com/blog/generating-static-open-graph-og-images-in-astro-using-vercel-og) and an on-demand server rendering. For a while now, Astro allows to be partial about what parts of the Astro application we want to run on the server, while keeping the rest of the application static.
from create-expo-stack.
The goal would be to have custom previews for different pages of the website (docs, landing, etc). We used to have code generated images prior to the migration to astro.
from create-expo-stack.
this is temporarily fixed with static assets but is not using the automatically generated image based on jsx code
from create-expo-stack.
Hey @ernestoresende thanks for sharing those resources. Will check them out.
For the www repo, I think when we were working on it we set the output as static. Forgot why. It wasn't working otherwise.
For the docs repo, I don't believe we have the output set to anything so I'll try to see if we can get the @vercel/og image working there.
![Screenshot 2024-01-10 at 12 22 27 PM](https://private-user-images.githubusercontent.com/39573679/295702126-3b0074b2-0782-4456-ae04-90616746e9ae.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4NzIwNTksIm5iZiI6MTcyMzg3MTc1OSwicGF0aCI6Ii8zOTU3MzY3OS8yOTU3MDIxMjYtM2IwMDc0YjItMDc4Mi00NDU2LWFlMDQtOTA2MTY3NDZlOWFlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDA1MTU1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTgzNzY3OWRiMjlmMmVlOWVjYWZmZmNkZDc1NWE3MmQ1ZTkyMjI1MjI3YTdkYzQ0ZDBlYWFjYjE3YTE1ODg5YTMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.gxIm09dKZAsub_0hblCkJR-bJ16RS8gKgWEhgbBXDBM)
from create-expo-stack.
Hey @danstepanov what would you want the custom previews look like?
The previous code you doesn't seem like it's dynamic. Would you want something similar to Next.js, have the log in the center with the title underneath?
Example made with OG Image Playground:
from create-expo-stack.
Created a branch docs/og, I updated the code, the og image is in the head but the og image isn't loading it gives me this.
Im using the preview generated by vercel, not sure if it's a server setup thing.
![Screenshot 2024-01-10 at 2 31 57 PM](https://private-user-images.githubusercontent.com/39573679/295732078-4a46532d-6875-460b-a0e5-985c09154c4e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4NzIwNTksIm5iZiI6MTcyMzg3MTc1OSwicGF0aCI6Ii8zOTU3MzY3OS8yOTU3MzIwNzgtNGE0NjUzMmQtNjg3NS00NjBiLWEwZTUtOTg1YzA5MTU0YzRlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDA1MTU1OVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTM2MTk2YzdmMTYxNzM2YWZmYmM5NDFlMjAzMTJmZWZiMGUyZTUxNTY2MjVhMWYwYmYwMTljNDkwNTkyZjE1ZjEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.y252WBNpz1-MmypOuHPYRnerKWaNaeesMonTLnDHu0E)
from create-expo-stack.
https://github.com/danstepanov/create-expo-stack/blob/docs/og/docs/astro.config.mjs
![Screenshot 2024-01-10 at 2 35 46 PM](https://private-user-images.githubusercontent.com/39573679/295732760-75d9ad9b-ef9b-401a-8d73-17c96ce7b803.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM4NzIwNjAsIm5iZiI6MTcyMzg3MTc2MCwicGF0aCI6Ii8zOTU3MzY3OS8yOTU3MzI3NjAtNzVkOWFkOWItZWY5Yi00MDFhLThkNzMtMTdjOTZjZTdiODAzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTclMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE3VDA1MTYwMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTlmMzk4NzkxZDhhODEzMjkyNjc5MzE4NWMxMGFjMTIzNzk0MWE2NjNmM2FmNzY0NWU0ODZiMmE3ODhiYjI0YmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.MUwhilpzKZ6u12zVgkYyJEnMzhWDGk8AaXmRCHMuHmE)
from create-expo-stack.
Was figured out can find more about in PR #184
from create-expo-stack.
Related Issues (20)
- Typescript only HOT 2
- Typescript error on tabNavigator HOT 6
- AJV issue with NativeWindUI + Bun HOT 6
- Button.tsx does not compile in tamagui HOT 2
- NativeWindUI wrong behavior!? HOT 2
- Tsx files still for no typescript projects HOT 1
- New app creation has issues with Unable to resolve "react-native-css-interop/jsx-runtime" from "app/+not-found.tsx" HOT 6
- Not working with Bun v1.0.22 HOT 10
- [www] White bar present on
- Cannot find module 'nativewind/metro' HOT 3
- Erroe while using npx create-expo-stack@latest HOT 2
- Wrong Expo Router path for the +not-found.tsx page HOT 6
- The website is inaccessible for keyboard only users and borks on screenreaders HOT 2
- npx create-expo-stack not working. HOT 2
- `eas build:configure -p all` fails when creating a new project HOT 5
- Container component padding is not applied
- tailwindcss(android) rebuilding... tailwindcss(android) is taking a long time to build,
- User not prompted to delete folder in non-interactive mode HOT 1
- Customise the folder of entry point HOT 2
- Unable to run base project HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from create-expo-stack.