Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Recipe Block #2323

Open
wants to merge 39 commits into
base: main
Choose a base branch
from
Open

✨ Recipe Block #2323

wants to merge 39 commits into from

Conversation

joshbermanssw
Copy link
Contributor

@joshbermanssw joshbermanssw commented Oct 14, 2024

#2320
created PoC. This PR is to just be able to show the preview environment.

If we go ahead with the PoC i will fill out the PR and polish the code (its not done anyways in terms of UI :) )


Update: we went ahead with it! This awesome component is taking life and will revamp users' docs experience.

Test passed by @bettybondoc

Screenshot 2024-11-04 at 12 48 52 pm
Figure: Tablet View

Screenshot 2024-11-04 at 12 49 10 pm
Figure: Laptop View

@joshbermanssw joshbermanssw requested a review from a team as a code owner October 14, 2024 04:10
Copy link

vercel bot commented Oct 14, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
tina-io ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 6, 2024 6:12am

@isaaclombardssw
Copy link
Contributor

With a coat of paint this looks legit

@joshbermanssw joshbermanssw changed the title create recipe block PoC ✨ Recipe Block Nov 4, 2024
Co-authored-by: Brady Stroud <[email protected]>
Copy link
Member

@bradystroud bradystroud left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@bettybondoc

  1. Remove fadeout - the layout shift is annoying
    2024-11-06 8 50 47 AM

Comment on lines +157 to +172
<TinaMarkdown
key={highlightLines}
content={codeblock}
components={{
code_block: (props) => (
<CodeBlockWithHighlightLines
{...props}
highlightLines={highlightLines}
/>
),
}}
/>
</div>
) : (
<p>No code block available.</p>
)}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cc @JackDevAU
I dont like that we need to have a TinaMarkdown rich text field here to get the code block.

My suggested solution

  1. New custom Tina field - just a string but with a ui override with a nice code editor
  2. use that here instead of TinaMarkdown
image

components/blocks/Recipe.tsx Outdated Show resolved Hide resolved
components/blocks/Recipe.tsx Outdated Show resolved Hide resolved
components/blocks/Recipe.tsx Outdated Show resolved Hide resolved
@bettybondoc
Copy link

@joshbermanssw @bradystroud

+1 Accordion timing for opening/closing should be same with no delays

@bettybondoc

  1. Remove fadeout - the layout shift is annoying
    2024-11-06 8 50 47 AM

        [
          
        
            ![2024-11-06 8 50 47 AM](https://private-user-images.githubusercontent.com/38869720/383340823-c2b9fdda-326d-47d0-952c-1eda79346af1.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzA4NTcyMDMsIm5iZiI6MTczMDg1NjkwMywicGF0aCI6Ii8zODg2OTcyMC8zODMzNDA4MjMtYzJiOWZkZGEtMzI2ZC00N2QwLTk1MmMtMWVkYTc5MzQ2YWYxLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDExMDYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMTA2VDAxMzUwM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI4OWFlNzQ4ZTliOWQzYzZlZDI0YmNkZGM4ZjFkNWUxMjczNzMxMWZjMzc2NTFiMjRjMGNiMWZhZTIwMWQ3ZTImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.WejVzNSIWVZ520lmVxvwrXDJPrE7jpfTqeiLQrbzTIQ)
          ](https://private-user-images.githubusercontent.com/38869720/383340823-c2b9fdda-326d-47d0-952c-1eda79346af1.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzA4NTcyMDMsIm5iZiI6MTczMDg1NjkwMywicGF0aCI6Ii8zODg2OTcyMC8zODMzNDA4MjMtYzJiOWZkZGEtMzI2ZC00N2QwLTk1MmMtMWVkYTc5MzQ2YWYxLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDExMDYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMTA2VDAxMzUwM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI4OWFlNzQ4ZTliOWQzYzZlZDI0YmNkZGM4ZjFkNWUxMjczNzMxMWZjMzc2NTFiMjRjMGNiMWZhZTIwMWQ3ZTImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.WejVzNSIWVZ520lmVxvwrXDJPrE7jpfTqeiLQrbzTIQ)
        
        
          
            
              
            
            
              
              
            
          
          [
            
              
            
          ](https://private-user-images.githubusercontent.com/38869720/383340823-c2b9fdda-326d-47d0-952c-1eda79346af1.gif?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzA4NTcyMDMsIm5iZiI6MTczMDg1NjkwMywicGF0aCI6Ii8zODg2OTcyMC8zODMzNDA4MjMtYzJiOWZkZGEtMzI2ZC00N2QwLTk1MmMtMWVkYTc5MzQ2YWYxLmdpZj9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDExMDYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMTA2VDAxMzUwM1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTI4OWFlNzQ4ZTliOWQzYzZlZDI0YmNkZGM4ZjFkNWUxMjczNzMxMWZjMzc2NTFiMjRjMGNiMWZhZTIwMWQ3ZTImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.WejVzNSIWVZ520lmVxvwrXDJPrE7jpfTqeiLQrbzTIQ)
    

@bettybondoc
Copy link

bettybondoc commented Nov 6, 2024

@joshbermanssw
cc @bradystroud

  • Fix mobile bug (weird jump whenever you select a different item is still there)
  • Fix the weird text on top of the code block (see image)
  • Fix double scrollbar issue

image
Figure: UI Issues

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants