Using Vimeo with Aframe - aframe

I am attempting to get the vimeo plugin working with a-frame, but no success. I followed the GitHub steps at https://github.com/vimeo/aframe-vimeo-component -> I have a vimeo pro account, generated key, updated .env file, edited basic.html to show my video ID. When I attempt to play it, I just get a black screen. I also downloaded the aframe-vimeo-component.min.js locally and created a .env file in my base html folder, and same result. Any ideas?

Are you running the Node.js server (i.e yarn run start)?
There is a Getting Started guide you can use that walks through all the options of using the component.
If you are not sure where to start, you can remix the Glitch example, add your token to the .env file, and swap the id parameter in the basic (examples/basic.html) example to your Vimeo video id 🚀
Feel free to open a Github issue if something isn't working properly so we can try and solve it

Related

React Native - Dynamic link not persisting through install process

I have a small React Native app for which I have a series of Firebase dynamic links. When the app is installed, the links work perfectly in directing users to the relevant screen defined in the dynamic link
However, if the user does not have the app installed when the dynamic link is followed, the route defined in the dynamic link does not persist.
Is it possible to persist the deep link during the installation process?
I've tried a basic deep link URL like https://fakedomain.org/upload as well as using the ?link=https://fakedomain.org/upload param and neither seem to work.
To answer your question, it is possible to persist the link after installs but it won't be %100 successful because of some limitations on the iOS side. You can check the flowcharts in here
There could be a couple of reasons for it not to work after the app installation. Since no code is provided I'll assume you are listening to the dynamic link with onLink for the app's active state and checking the initial link with getInitialLink when your app is in the quit state.
Persisting the link after app installation involves the clipboard in iOS so make sure the problem is not related to new iOS 16 copy/paste permissions.
Your navigation library might be trying to navigate to the route from the link before your navigation stack is initialized.
If the problem occurs only in one platform it might indicate a problem in your native setup like maybe related to LinkingManager etc.
If you are using a custom domain, you should double check your Associated Domains and AndroidManifest settings.

Gatsby v2 site does not load CSS properly

In my dev environment the site looks as expected, however when I run gatsby build my CSS does not display properly. If I manually navigate to another page then the CSS displays as expected.
There are no errors but I do get this warning:
The resource
http://localhost:9000/static/d/520/path---offline-plugin-app-shell-fallback-a-30-c5a-NZuapzHg3X9TaN1iIixfv1W23E.json
was preloaded using link preload but not used within a few seconds
from the window's load event. Please make sure it has an appropriate
as value and it is preloaded intentionally.
When I inspect that file it shows:
{"pageContext":{}}
The fact that that object is empty is my issue I assume. I have tried disabling the service worker but that only made the issue worse.
I've also tried
forcing a build and disabling the cache on netlify,
deleting npm and package.json files and then running npm build,
but no luck so far.
This could be related to the fact that main component e.g Layout unmounts and remounts on every page.
Try to refer your css files in gatsby-browser.js file which is provided by default and is located in the root of your project.
For example you could try do following:
// gatsby-browser.js
require('./my-global-styles.css')
It'll also work with gatsby-plugin-sass
// gatsby-browser.js
import './src/styles/my-global-styles.scss'
For more info visit: https://www.gatsbyjs.org/docs/browser-apis/
I have the same issue. In my case, gatsby-plugin-styled-components was missing in my gatsby-config.js.
https://www.gatsbyjs.org/packages/gatsby-plugin-styled-components/
https://github.com/gatsbyjs/gatsby/issues/8984

Blogdown site pages do not render properly

I'm using RSTudio Blogdown/Github/Netlify to maintain my blog site. I'm using the Acadmic theme. When I push the changed .RMD files to Github the changed pages do not seem to deploy but if I build the entire site and push it then the site deploys on Netlify without any problem. Unfortunately, it takes about three minutes to build the entire site, so I'm looking for a faster solution.
I think that I should be able to build a single directory, which would be super fast, but when I build a directory with this, blogdown::build_dir("content/project/cont_imp"), the HTML document does not build properly. It seems to render as a single long javascript and since all of the metadata in the YAML header is wrapped into the script the page on Netlify does not deploy properly, things like the date and subtitle are missing and it is not formatted like the rest of my site.
I have one bad page that I built with build_dir on GitHub so you can view both the .RMD source and .HTML rendered documents: https://github.com/grself/icochise/tree/master/content/project/cont_imp. You can see this project page on my live site at: https://icochise.com/ (scroll down to the "Projects" section and notice the difference between the "Continuous Improvement" link (no text there, just an image of a hand and a whiteboard) and the "Blogdown and Bookdown" link. I just now noticed that the HTML document seems to be some sort of self-extracting javascript so after a couple of seconds the source code looks normal. Maybe there is some kind of setting on Netlify I need to change so it will extract the javascript as it is deploying the page?
I checked the settings in my "Configure Build Tools" and unchecked "Preview site after building" and "Re-knit current preview..." but that didn't help. I also tried changing the Project build tools dropdown from "Website" to "Custom" and specified the Hugo executable. None of these things helped.
I also tried running "Serve Site" while I worked, thinking that would continuously render the HTML page, but that tool seemed to hang and would not display the site once I made changes to an .RMD file. In fact, it was hung up so badly that I had to kill RStudio with the Windows Task Manager.
Finally, I also tried to update Hugo, hoping that there was something fouled up in my Hugo install, but that did not help.
I suspect that I'm doing some simple thing wrong, but have tried everything I can think of to fix this and would appreciate any suggestions.

Javascript file is not loaded properly

I have a nice html, css template (source code here).
I am going to use this template in my angular2 app (source code here).
I got the html template out of this repository (index.html).
My problem is in the angular2 source code
You need to clone the angular source.
Run npm install
Run ng serve
Unfortunatly, it seems that the <script src="assets/js/main.js"></script> in index.html is not added properly. Although, there is no error in the console, the left menu is broken. I know that this problem occurs when main.js is not fit.
Here is the correct html page:
Here is the angular page (broken header and menu):
The codes are identical, but I have decomposed the html template into 3 components (header, menu, and app (main content)).
Instead of trying to figure out what happened with your CSS, I took the original template, converted it to Angular 2 with the angular-cli, and fixed the CSS issues. It all works now, and the complete source is at https://github.com/Boyan-Kostadinov/angular2-miminium
When you broke apart index.html it's likely that you also altered some file paths.
The relative path would go from src="assets/js/main.js" to something like src="../assets/js/main.js".
Prepending ../ to the path will back out of the current directory to the next level up. As you have it now, the browser is looking for the assets directory in what I assume you have compartmentalized as an htmlComponents directory.
Consider using the absolute path to main.js, at least to diagnose the issue.
I ran into a similar issue with the same file. In my case, I have a complicated application that is developed in stages. I installed my Angular seed in a subdirectory. Because of my file structure, when I run npm start, the live server that is started has bad relative link locations. For example, in the screen shot below, you will see that the application is trying to find style.css at http://localhost:3000/medface/RecordWriter/styles.css; however, it should be looking at http://localhost:3000/styles.css, because the root of the web server that was created by npm start is at /medface/RecordWriter/.
With respect to your project. The key to finding the problem with your link is to open the developer panel and inspect the actual network request. If you share a screen shot, we may be able to help you inspect your instance with more insight.
What Worked for Me
In my case, I reconfigured my local web server to handle any unserved pages in the Angular2 folder and return the index instead. When I run npm start, I close the browser page that opens and use my regular web server. Instead of viewing my application on localhost:3000, I view my application at localhost/medface/RecordWriter/ (which is equivalent to localhost:80/medface/RecordWriter).
The down side to my makeshift approach is that the page must be refreshed before changes appear, but it loads all resources predictably and reliably, and allows my Angular2 code to run in conjunction with some of the older code base in other areas of the website that have not been converted to Angular2. Regardless, this may work for you also.

Embed API Working with Custom Components fails to display

Google Analytics demo code at .
Logged in to Google Chrome as the owner of the Analytics Account and then navigating to that page displays my Google analytics data correctly.
I follow instructions on the page and embed the code into a simple page .
Authentication works as indicated by the displayed message: “You are logged in as: me(at)gmail.com” but there is nothing more, no graph no message.
I am reasonably certain that the page is coded correctly as I have:
Basic Dashboard (basic.html)
Multipleviews (multipleviews.html)and
Interactive Charts (ic.html)
all working and displaying correctly (they display but not styled like the demo).
Why will the page not display the graphics?
As Eike pointed out in the comments, you've simply copied and pasted the code from the demo without downloading the components to your own server. If you open up your JavaScript console, you'll notice that you have 404 errors saying the browser can't find those components. Here's a screenshot of what I see on your site:
To add those components to your site, you have a number of options. I've answered a similar question on one of the repo's Github issues, but I'll copy it here for convenience.
The built and minified versions of those components are located in the build/javascript/embed-api/components directory. You can simply download those files and add them as script tags on your page, or include them in your site's main, bundled script.
If you're using an AMD script loader like RequireJS, you can also just point to those built files as they're wrapped in a UMD wrapper.
If you're using a tool like browserify or webpack, you can npm install this repo and require the files in the src/javascript/embed-api/components directory.

Resources