Access file asset url - sanity

I have a schema with a file type, and I'm successfully pulling the right data with groq. My question is how do I access the absolute path for the file that's uploaded to sanity?
Example data:
{ _createdAt: '2019-08-23T01:53:38Z',
_id: '1948e168-32e2-4493-9513-6edb623fb568',
_rev: 'As3uvzzIWDP1omVvc5btIF',
_type: 'download',
_updatedAt: '2019-08-23T02:00:17Z',
file:
{ _type: 'file',
asset:
{ _ref: 'file-fd0256015f201705310fc1c84704f02ac83bc147-zip',
_type: 'reference' } },
title: 'File Download' }

The URL is on the asset document, so you will have to follow that reference in your GROQ. In your case it could be *[_type=='download']{"fileURL":file.asset->url} (the arrow follows the reference to the asset document)

Related

Docusaurus - Hide always folder's name in url

this is my question about docusuarus (docusaurus.io):
In my site I have several folders inside "docs" folder:
docs
doc1.md
folder1
doc2.md
folder2
doc3.md
so when I call a document, for example, "doc2.md", in the url i see:
domain.com/folder1/doc2
I would like to hide the folder name in all cases:
domain.com/doc1
domain.com/doc2
domain.com/doc3
Is it possible to do this? Thanks.
I'm not sure about this but give a try please.
You can declare that you want this behavior in docusaurus.config.js file like this:
module.exports = {
// ...
docs: {
path: 'docs',
pages: [
{
path: 'file2',
route: '/file2',
title: 'File 2',
sidebar_label: 'File 2',
source: 'folder1/file2.md',
},
],
},
// ...
}
now try navigating to it like this: exampleSite.com/file2, with remaining your folders structure.
Thanks for response Gwhyyy.
I found an easy solution:
We can add a slug option at the top of each file, example:
---
id: File2
title: File 2
slug: /file2
---
Regards.

Sanity CMS, using type "object" as reference

Is it not possible to use an object type as a reference in sanity? For example this is not working. When I go to the field nothing shows up. If I can't do this how can I access the indexPage objects that have been created under other documents?
export const indexPage = {
title: "Index Page",
name: "indexPage",
type: "object",
fields: [
{
title: "Subheading",
name: "subheading",
type: "array",
of: [{ type: 'block' }]
},
{
title: "Content",
name: "content",
type: "array",
of: [{ type: "block" }]
},
]
}
// in another file
export const coolPage = {
title: "Cool Page",
name: "coolPage",
type: "object",
fields: [
{
title: "Reference Index Page",
name: "refIndexPage",
type: "reference",
to: [{ type: 'indexPage' }]
}
]
}
References can only point to other documents; not to a specific part of a document. So to achieve this, indexPage would need to be a document.
I think modelling indexPage as a document would be a viable option in your case. You mentioned "indexPage objects that have been created under other documents". Instead of creating indexPage data inside a specific document, indexPage should be its own document type. Any other document can then connect to it via a reference. This approach should be really flexible for you.
Sanity Studio recently added support for "references in place", which makes this workflow even better. The studio now allows you to create a document to reference while you are editing the document that references it—without leaving the editor. You can see a demo here (no extra work on your part is needed here, it's handled automatically by Sanity Studio).
In summary: if you have a piece of data you'd like to share between multiple documents, model it as its own document type that is referenced by every document that is related.

Nuxt.js preview on Facebook/Twitter doesn't work: 404 error

I have a site implemented with Nuxt.js and want to share the pages on Facebook, Twitter and WhatsApp. I have to use the metatags opengraph, so I've included them. When I try to share a page into a social network, I can't see the content of the metatags. I can't see the image either, the title and description.
In my case the metatags opengraph are well suited and filled in the page. I've read how to do it in several resources, so that's not the problem. They are located in the <head> tag.
But the problem is when you use the Facebook debugger tool to see your page preview, or the https://metatags.io/ tool. When I wrote the url of my page, a 404 is returned for these tools. For the same url in a browser, you can see properly the page how it is. If you inspect the page, you can see the meta tags.
I think the problem is Twitter or Facebook are doing a GET call to my url, but the result of this call, in my understanding, is a Nuxt.js pre-render page for being executed in the browser. In the browser the JS sources are executed at the moment of the page loading, so it can inject all the metatags and many other things. I think this is how Nuxt.js SSR is working. hydratation process?
So my point is how to send the complete HTML when a GET is done, or a workaround to show my preview page in Facebook or Twitter.
Btw, I have deployed my site in Netlify, I don't know if it matters.
My nuxtjs app is working on universal mode.
Any idea to resolve the problem with the crawlers and robots?
any prerender option?
I was researching and finally I've realized what was my real problem.
The main problem is I'm deploying the Nuxt app into netlify. This platform only allows you to deploy the Nuxt app as static resources (Static Generated Deployment, Pre-rendered). I mean, there are three ways to deploy a Nuxt app: universal, spa and universal as static mode (Static Generated Deployment, Pre-rendered). The third case is a special case, in which you have to create all the static resources as html pages in deploy time. For doing that you have to use the "npm run generate" command. In my case, I have some dynamic routes and I have to do some rest queries in order to achieve the data in every case. I don't have all the db rows to generate all the html pages at the build time. It's really expensive for me. So Nuxt at the end, for the case of dynamic routes, it's generating only a html page, but including the js part which is the client to the data. So when Facebook or google is calling to the url, they are getting the html with the js, but nothing of the data, because the js is only executed in the browser, and it's there, when the page gets the data via rest. So Facebook, Twitter of WhatsApp can't get the metadata of something that is missing. Additionally these services are getting a 404 http error code when they are calling to my urls, instead of a 200 http code. So it's impossible to share the url into these social services. The solution: or generate all the html pages for every resource in the build time (case 3) or moving to another provider as firebase in order to deploy as universal app (case 1) with an express server. I think I´ll move it to firebase to achieve a good SEO and social media features.
for the other hand I've changed my head method to accomplish with the open graph metadata:
head() {
return {
title: `${MyStringHandler.truncate(defaultTitle, 65)}`,
description: defaultDescription,
link: [
{
rel: 'canonical',
href: `${routePath}`
}
],
htmlAttrs: {
lang: `${language}`
},
meta: [
{
charset: 'utf-8'
},
{
hid: 'title',
name: 'title',
content: `${MyStringHandler.truncate(defaultTitle, 65)}`
},
{
hid: 'description',
name: 'description',
content: `${MyStringHandler.truncate(overviewDefault, 155)}`
},
{
hid: 'og:type',
property: 'og:type',
content: 'website'
},
{
hid: 'og:title',
property: 'og:title',
content: `${MyStringHandler.truncate(defaultTitle, 35)}`
},
{
hid: 'og:description',
property: 'og:description',
content: `${MyStringHandler.truncate(overviewDefault, 65)}`
},
{
hid: 'og:image',
property: 'og:image',
content: URLHelper.get2XURL(path) // the size has to be more 200px at least
},
{
hid: 'og:url',
property: 'og:url',
content: `www.mydomain.com${routePath}`
},
{
hid: 'og:site_name',
property: 'og:site_name',
content: `mydomain.com`
},
{
hid: 'og:locale',
property: 'og:locale',
content: `es`
},
{
hid: 'og:image:type',
property: 'og:image:type',
content: 'image/jpeg'
},
{
hid: 'twitter:card',
property: 'twitter:card',
content: `${MyStringHandler.truncate(overviewDefault, 65)}`
},
{
hid: 'twitter:site',
property: 'twitter:site',
content: 'mydomain'
},
{
hid: 'twitter:title',
name: 'twitter:title',
content: `${MyStringHandler.truncate(defaultTitle, 35)}`
},
{
hid: 'twitter:description',
name: 'twitter:description',
content: `${MyStringHandler.truncate(overviewDefault, 65)}`
},
{
hid: 'twitter:creator',
property: 'twitter:creator',
content: 'mydomain'
},
{
hid: 'twitter:image:src',
property: 'twitter:image:src',
content: URLHelper.getImageURL(path)
},
{
hid: 'twitter:domain',
property: 'twitter:domain',
content: 'mydomain.com'
},
{
hid: 'twitter:image',
name: 'twitter:image',
content: URLHelper.getImageURL(path)
},
{
hid: 'twitter:url',
name: 'twitter:url',
content: `www.mydomain.com${routePath}`
}
]
}
}
You can test the metadata into the next pages:
https://metatags.io
https://cards-dev.twitter.com/validator
https://developers.facebook.com/tools/debug/
update:
nuxt can generate your static resources in deploy time using npm run generate, and these resources are SEO-ables. The metatags are working well.

lesshint custom rule get the filename being walked

I'm creating a custom linting rule in lesshint.
I want to access the filename of the file being walked.
Current code:
module.exports = {
name: 'customrule',
nodeTypes: ['decl'],
lint: function(config, node) {
console.log(node.root().source.input.from);
}
};
The closest I've got is node.root().source.input.from which seems to output the index of the file, but not its name.
config object seems to be a boolean
Lead maintainer of lesshint here.
I've just pushed an update where the full file path will be included on all nodes. You can access it via the source property, like this:
module.exports = {
name: 'customrule',
nodeTypes: ['decl'],
lint: function(config, node) {
console.log(node.source.input.file)
}
};
The value of config will be the value you specified for it in your .lesshintrc file. For example:
{
"customrule": {
"enabled": true,
"option": false
}
}
Will pass that object in config.
Link to the newly released version: https://github.com/lesshint/lesshint/releases/tag/v4.6.2

Sencha Touch 2.0 Manifest Query String

I'm setting my app up to run offline and I have hit a brick wall. All of my files are being cached but I noticed in the Safari console that the app is adding a query sting to the filename so the correct file is not loaded. In Safari the link looks like this
http://serverpath/resources/data/data.json?_dc=1337372230084&node=root&page=1&start=0&limit=25
Is there any way to prevent the query string from being added? My data store code is below.
Ext.define('App.store.Sections', {
extend: 'Ext.data.TreeStore',
requires: [
'App.model.Sections'
],
config: {
autoLoad: true,
model: 'App.model.Sections',
proxy: {
type: 'ajax',
url: 'resources/data/data.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
});
See Ext.Ajax.setDisableCaching.
Be careful of the double negation: it has to be set to false in your case : you don't want to use the disable caching system.