Comments (11)
Apologies for the delay here, we were off for the holidays.
I hadn't considered the link piece. I think creating a format with specific fields is reasonable. To handle internationalization there should be no English text included. Perhaps something like:
<startCaptionText> <linkName><link> <endCaptionText>.
It only allows for a single link, but it's very configurable.
from themes.
Would certainly be open to a community contribution adding this!
from themes.
Hello @laurieontech i would be up for giving this a go, if it's still available.
From my understanding I think there are at least 3 ways to do this, explained below. Would you be able to let me know if I'm on the right track and which solution is preferable? This is one of my first contributions to open source so any advice you have would be appreciated.
For the options below I prefer either option 2 or 3, and just need to know which of these is preferable or if there is a better option before doing too much work on it.
- Add a frontmatter field to enter the caption as HTML directly which is then rendered directly using React __dangerouslySetInnerHTML (my least preferred option)
Advantages: caption can be customised by user
Disadvantages: malicious is code could be used for the caption; external tool might be required to sanitise HTML
- Add a frontmatter field to enter the caption as markdown which is then rendered as HTML
-
Advantages: caption can be customised by user; seems as if rendering markdown in frontmatter might be supported in Gatsby via the MDX renderer however I would need to look into it (https://www.google.com/url?sa=t&source=web&rct=j&url=https://github.com/ChristopherBiscardi/gatsby-mdx/issues/352&ved=2ahUKEwj9taXLmdbtAhUF1hoKHQ4PDOoQFjAAegQIARAB&usg=AOvVaw04Y8i0U5Toeo9ZVAZMPPns&cshid=1608252354678)
-
disadvantages: Markdown is still susceptible to malicious code (https://medium.com/taptuit/exploiting-xss-via-markdown-72a61e774bf8) so an external sanitisation library might still be required if not already included with the MDX renderer method
- Adding a caption field in frontmatter that is actually an object with various properties such as authorName, sourceName, and relevant links, then using the values of these fields to conditionally construct the caption text
-
Advantages: requires no external tools, safer?, a bit more straightforward to use for non technical users
-
disadvantages: caption format is fixed which means it might not be suitable in some cases e.g. i18n where the caption template is fixed to one language
I look forward to hearing from you.
from themes.
@eliasm307 thanks so much for picking this up. Iβd opt for option 2. This theme is already designed for use with MDX so you should be able to add it to the frontmatter. However, you donβt need to support anything other than plaintext.
What I would recommend is making a separate caption component so that people can shadow it and make changes as they see fit. Then conditionally displaying that should a caption be available for the given hero.
from themes.
I suppose the caption wouldn't need to support arbitrary HTML or markdown, but it seems like it should at least offer a way to link back to the unsplash/pixaby page or whatever the platform requires you to link to.
from themes.
Hello @laurieontech thank you for your feedback. Making a caption component sounds good.
However I didn't quite understand what you meant by people will be able to "shadow" the component, would you be able to clarify please? My understanding of what you said is that there would be a caption component that would take the caption text as props then the component could be modified as required to style the caption. Is the user modification what you meant by "shadowing"?
Also, regarding your statement about only needing to support plain text, I just want to clarify how this would meet the requirements where there is only one caption field in the markdown. From the link @finjo-the-great included in the issue, the requirement from unsplash is for a caption explicitly with a link to the author's Unsplash profile, an example format is given below:
Photo by Annie Spratt on Unsplash
Apologies but I don't see how something like the above could be generated from a plain text string. I'm taking plain text to mean without any html or markdown so no capability to add hyperlinks. I would assume atleast the caption text and the link to the author would be required, unless if I'm misunderstanding something?
from themes.
How about using 2 fields for the caption, one which would be the caption text, then an optional one for a link which would make the whole caption a hyperlink?
from themes.
@laurieontech thanks for your reply, hope you had a good break.
I'll look into implementing the solution you described when I get a moment however, I had looked around and found the following in the gatsby contribution guides here
Its a solution for a similar problem however I couldnt find the code for the components with the implementation.
from themes.
Ah, this is the old site code for authoring blog posts. We've since moved to a CMS so I'd have to go digging in git history. But as a pattern it's a perfectly reasonable one to duplicate.
from themes.
@laurieontech I've created a pull request using two frontmatter properties for the caption text and caption link. This was easier and also I think it is more straightforward and flexible to use as the text can be however the user wants using just one markdown field, however, the whole thing becomes a hyperlink if a caption link has been defined, but I don't know if this is actually an issue?
If you strongly prefer the format you had suggested ie , I can work on that but I feel this would be a bit confusing on the markdown side as you need to understand the context of the fields to know the order to fill in fields so the resulting caption comes out in the required order.
Either way, I look forward to your feedback
from themes.
Implemented with #95
from themes.
Related Issues (20)
- gatsby-theme-i18n not redirecting to defaultLang when opening subpath without language prefix HOT 5
- gatsby-theme-i18n does not honor prefixDefault param in generated alternate links
- [gatsby-theme-i18n] limit generation of localised pages to a subset of pages only HOT 1
- [gatsby-theme-i18n] locale node field is created only for Mdx files
- [gatsby-theme-i18n] isDefault node field is false when locale is explicit in file path
- [gatsby-theme-i18n] broken link to this repository
- Components in wrapPageElement cannot access the current locale HOT 3
- [gatsby-theme-i18n] Documentation for GraphQL parameters
- [gatsby-theme-i18n] no seo support with URLs
- Gatsby dev server crashes on root URL
- gatsby-theme-i18n-lingui and typescript
- where is the actual code for https://gatsby-theme-i18n.netlify.app/ ? HOT 1
- Roadmap to Gatsby 4 ???
- How to configure Storybook to work with gatsby-theme-i18n ? HOT 2
- [gatsby-theme-i18n] a wrong `md` locale node field is created when file extension is `.md` HOT 2
- Can't run gatsby build HOT 2
- gatsby-theme-i18n adds trailing slash even if trailingSlash is set to never
- [gatsby-theme-i18n] `LocalizedLink` incorrect type definition
- gatsby-theme-i18n is incompatible with the new gatsby-plugin-mdx v4 HOT 4
- Update to react 18 HOT 2
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 themes.