In Gridsome, I am basically looking for Vue's nested route functionality (or Nuxt's child-view) to achieve something like this /:userId/profile and /:userId/posts for example. And since Gridsome uses Vue Router there should be a way to achieve this I believe
Let me try to explain what I am trying to build with Gridsome:
At mywebsite.com/ I want to show a Grid of images showing thumbnails of my video portfolio. When you then click on a thumbnail I want a modal to pop-up showing the video. The modal is semi transparent showing the portfolio in the background. So far so good.
But for people to be able to share the URL of the respective video, I need the path changing to mywebsite.com/video-1 and so on. When I then close the modal the path should be mywebsite.com/ again. This is something I already achieved within Nuxt with <child-view>.
Is there some similar functionality in Gridsome? I appreciate your help.
From the feedback you got here:
Gridsome doesn't support child routes yet. But you can kind of achieve what you want if you create a new content type called User and add each user as a node. Then generate pages for them with the Pages API. The pages you create can share a layout component.
In the same way, you can also generate pages for each video for having direct URLs to them. And use the $fetch() method to load a video in a pop-up. Or just query the videos in the front-page query instead of using $fetch().
Related
I have been creating application in React Native. The goal of the application is to have content that can be changed without updating the app. I understand that the two best solutions are either Firebase or some other API call at every application start to get new content. Now I would just like to know if there are any recommended way to style content beside my three current solutions:
Styling content with markdown and then parsing it in application
Styling content with html and then parsing it in application
Or having a standard content object so that all the content is packed the same way and then showing right text/media on correct place with correct style
I am open to any other styling solutions for content and would like to know what is the best way. I also already have a server responding to API call that returns new content, the biggest problem is styling.
I would like to know if Docusaurus has the following feature. For example in https://themes.3rdwavemedia.com/demo/prettydocs/start.html, the content of the document is in one page. When we scroll down, we see the change in the sidebar. Whereas in Docusaurus, it seems that we need to click on "Next" to see the next part and the change in the sidebar.
Is it possible to make a sidebar in Docusaurus that allows to navigate in one page?
(I'm new to Docusaurus. I have posted the same question in Discord app, but nobody replied.)
Docusaurus maintainer here. There's no way to achieve this now without reimplementing such logic in your own docs plugin. Why not just write all your docs on a single page? The table of contents on the right will be the same as the left table of contents in the website you linked.
What i am trying to do is to use a photosphere on my website so that it shows up on full screen as a website cover page. The problem is the the code to embed a photosphere in a webpage given here by google
https://developers.google.com/photo-sphere/web/
lets only the photosphere size to be hardcoded as
displaysize="600,400"
what ever the values but its still hardcoded. What i want is that it gets adjusted to the screen of the user and gets displayed in the whole browser window. Any one got an idea how to pull it off? I didn't find any stuff about 'photosphere on web' other than the google link i gave above.
Indeed the API is currently designed to take static values. I think it's a good point that users might want to set the dimensions to 100% and let it resize dynamically.
I put it on the TODO list and will try to get to it shortly.
In the meantime, one work around is the following: After the viewer loads you will find an iframe on the page which contains it. You can change it's dimensions dynamically to your liking and the viewer should adapt.
The API provided by Google wraps the whole photosphere in layers of iFrames.
You can use the API to request a certain photosphere but only use the response to parse it for the values you need. Then you create your own request and the result can be shown fullscreen.
An example link is this
I created this link dynamically from the JSON response from the elements
media$group media$content 0 url
Hope it helps.
Can't you take the raw image and just use webgl to project it on the inside of a sphere?
I have a two column css layout. Left container holds the dynatree. It's pulling from a local json file. The right side will be the content, populated by clicking on a node on the dynatree.
What I saw on the dynatree examples was the usage of an iframe with urls in the tree.
Is using the iframe the "best" way to do things? Is this the only way to populate the content?
I'm probably being silly, but iFrames don't usually seem like a good way to go on things. Is there a better way? Should I be using ajax (can I?)?
http://wwwendt.de/tech/dynatree/doc/samples.html
"Example: URL navigation and iframes"
Thanks.
i use Div containers, with a 2 columns layout.
The tree uses ajax to load initially and the later expanded content.
When a node is activated, i reload page content and the right part is updated with data associated to the node. tree is still loaded from ajax.
You can do it this way, or load right content with ajax.
I was able to get this to work by placing my ajax in the onactivate event of dynatree:
$("#response").load("myname.php?name=Johnny&dummy=" + new Date().getTime());
the date gettime was to defeat the ie caching problem.
I am trying to recreate some effects similar to the div loading effects on this site i.e. there is no visible content when you load the page but upon clicking on a navigation link, it dynamically loads the divs.
http://worldofmerix.com
It is for a film studio website and I would like it to be interactive like this site. Does anyone know how I could achieve these effects with Javascript and/or jQuery?
Thanks for all the help in advance!
Have you used jQuery before or looked at the docs? This is really quite simple using jQuery's built-in animation effects such as fadeIn. The site you've linked to doesn't dynamically load the content - it's all part of the same page and simply displayed and hidden as appropriate.
Here's a rough fiddle showing how it works. Of course, you'd need to work out the styles and quirks in animations.