We have a project to create frontend components built with SCSS and TS. Components can be changed per theme. For this we create a separate CSS & JS file for each theme.
We would like to present the components in a Bootstrap-like documentation. For this we want to use the Hugo. There should be a documentation page for each component and we want to add a theme switch with which you can view the components in the different themes.
So that the theme switch has no effect on the documentation page itself, but only on the components presented, we display the components in an iframe, in which the respective CSS & JS files are then loaded.
Unfortunately the loading of the pages in the iframes doesn't work correctly and we can't find the reason. The pages are also not loaded if you open them directly without an iframe.
Below is a simplified example:
codesandbox
Go to Components/Accordion in the browser view
Open the src/docu/components/accordion/index.md
Accordion
We load the following files via iframe
src/docu/components/accordion/accordion-basic.html
src/docu/components/accordion/accordion-initial-active.html
src/docu/components/accordion/accordion-toggler.html
You can find the iFrame under src/assets/hugo/layouts/shortcodes/example.html
Hugo simply does not recognize the files accordion-basic.html, etc., regardless of whether I make *.md files out of them, add them to the menu ( src/assets/hugo/config/_default/menus.toml ) or add other information in the upper --- XYZ --- area in the header of the file.
Anyone know what mistake I'm making?
If you want to serve HTML pages unaltered, use the static dir.
https://gohugo.io/content-management/static-files/
Related
so I have this website made with Next and on a page there are some graphs (the graphs content changes as it fetches an API) and info.
I want to add a button to the page and when pressed it download the page as a HTML file and includes all the JS and CSS in the HTML file instead of separately, does anyone have any idea as to how to approach this problem. (The graphs content should be the same content as it was on the time of downloading)
(The reason why I want to do this is because I want to distribute these files to others and I want to allow them to read it w/o an internet connection)
You can't really download a React 'page' because there are no pages in React to download.
Next further complicates this because it server-side renders everything and rehydrates client-side. If you inspect one of your pages, you'll see the JSON blocks Next uses for data. Look for the __NEXT_DATA__ script (usually in the footer of your page).
I think the two strategies you could use:
Screen-capture of the graphs during your build sequence and push them over to an AWS S3 bucket or similar (cumbersome)
When I ran into a requirement like this, I just made the data for the graph available as a JSON download just below the graph and it satisfied the use case sufficiently.
If you just want to download the assets and take a look, a workaround is probably leveraging the next/export package. This allows you to run yarn build and generate a static export of your entire site. This should include the file you're looking for.
Just some ideas to think through.
We are having one problem while generating a link preview for our react application URL's. Actually we have the requirement to display the dynamic link preview for different URLs.
We are able to add the link preview by using open graph tags in our index.html file placed under the public folder.
But once we tried to add dynamic metadata using the "react-meta" or "helmet" package. it is successfully changing the title of the application. but links preview are not working after making these changes.
so I kindly let me know if there is any way that we can different link preview for different urls for react application. Thanks in advance.
I have a content slot in which I need to add custom css file from Business Manager. I want to add the custom file in the head section. Is there any way by which I can do it?
I tried adding a custom css file in Content Asset and linked that asset to Content slot but it was not working.
This functionality exists for Content Assets as a customization to the Page-Show controller in older Site Genesis reference applications and sites. Unfortunately, if you want to do this via a Slot, you'll need to have some JavaScript execute to inject the CSS into the head of the page from either the slot configuration rendering template or from within the slot content itself. Slots are loaded and rendered by the Web Adapter layer which sits between the Internet and the Application Servers. This all happens after the rest of the page is rendered by the App Server.
Also, at this point, I'd consider using Page Designer components instead. Page Designer is expected to be globally available sometime this month. That said, if you need all the features of Slots, PD is not yet at feature parity with Slots. (In terms of scheduling, targeting groups of customers, etc)
We simply bake style tag into the body of the content asset or content slot (content type - HTML). You are not gaining much by having a style tag in the head of the page. Having style tag inside your div makes your markup less valid but none of the browsers even old IE will complain about it.
<style>
p{color: pink;}
</style>
The use of Custom CSS File in content asset and link asset to your slot should have worked may I know what was the error you were facing with this approach?
Currently all my react components have an icon that looks like all my other javascript files, namely :
Is it possible to have a different icon if the file is a react component (ie. 'extends Component')
No, the Jetbrains IDEs don't support file icons that way. They just look at the file extension and load the corresponding icon.
However you could name your component files .jsx instead of .js to have a visual difference between them.
OR
You can use the Jetbrains API to write your own extension (naming Icon Provider) which will allow you to select icons based on the content of a file. Here is an example.
I would like to have a static HTML page as a component in which I use WebBrowser component.
The main problem is.. I am having a hard time with my page assets like images and css/js files. when I put my page under src package, Do I need to put my assets folder inside my src package/folder?
What would be the best approach on this one?
Thanks
Generally the best approach is to embed everything into the page. Codename One has a method within WebBrowser that allows you to convert files (e.g. images) to data URI's: WebBrowser.createDataURI().
This isn't ideal but its by far the most portable solution. To statically create data URI's you can use a tool such as this: http://dopiaza.org/tools/datauri/index.php