I need to add SEO meta tags (e.g <link rel="canonical" href="bla-bla" />) to the pages which are generated by Docusaurus. As I understand I can use "#docusaurus/Head" component (https://v2.docusaurus.io/docs/docusaurus-core), but I'm not sure where to use it: I have a project that was created for v1, the structure of the project looks like this:
|-docs
|---someFileForDoc1.md
|---someFileForDoc2.md
|-website
|---siteConfig.js
Where should I use this component?
import React from 'react';
import Head from '#docusaurus/Head';
const MySEO = () => (
<>
<Head>
<meta property="og:description" content="My custom description" />
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="bla-bla" />
</Head>
</>
);
Unfortunately that won't work because you are using V2 APIs in a V1 website. I don't think this is possible in V1.
Related
I am pretty new to Vue.js.
I am trying to build a project without cli.
I've tried to add the CDN into the index.html.
and create a app.js file , add it to index.html and it works well.
Then I watch some youtube and tutorial, the idea of component kicks in and I am trying to add the Single-File Components into the project.
But I do not know how to structure the files so that it could work with the components.
Here are what I've got so far , could someone please tell me what's wrong here？
Any suggestions would be appreciated.
Many Thanks.
Oren
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>new Vue project</title>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="main.js"></script>
main.js
import { createApp } from "vue";
import App from "./App.vue";
createApp(App).mount("#app");
App.vue
<template>
<div class="container">
<Header />
</div>
</template>
<script>
import Header from './src/components/Header'
export default {
name:'App',
components:{
Header,
},
data(){
return{
test:'oren testing'
}
}
}
</script>
SFCs require a build step and is recomended
When using standard Vue without a build step and mounting to in-DOM templates, it is much less optimal because:
We have to ship the Vue template compiler to the browser (13kb extra size)
The compiler will have to retrieve the template string from already instantiated DOM
The compiler then compiles the string into a JavaScript render function
Vue then replaces existing DOM templates with new DOM generated from the render function.
If you still don't want a build step, take a look at petite-vue
I am evaluating the new Microsoft fast.design https://www.fast.design/ with fluent-design-system-provider and trying to customize the accent color for Blazor project but no luck...
This is what I did so far as per the official documentation (https://www.fast.design/docs/design-systems/fast-frame):
In my asp.net core Blazor Server Project's _Host.cshtml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title </title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="Test.Main.styles.css" rel="stylesheet" />
</head>
<body>
<fluent-design-system-provider use-defaults>
<component type="typeof(App)" render-mode="ServerPrerendered" />
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
Reload
<a class="dismiss">🗙</a>
</div>
</fluent-design-system-provider>
<script src="_framework/blazor.server.js"></script>
<script type="module" src="https://unpkg.com/##microsoft/fast-components"></script>
<script type="module" src="https://unpkg.com/##fluentui/web-components"></script>
<script type="module" src="~/script/site.js"></script>
</body>
</html>
After this in my site.js I am trying to generate and replace the color pallete as mentioned in the documentation https://www.fast.design/docs/design-systems/fast-frame#generating-and-replacing-palettes
import { parseColorHexRGB } from "#microsoft/fast-colors";
import { createColorPalette } from "#microsoft/fast-components";
// Initialization
(function () {
const palette = createColorPalette(parseColorHexRGB("#28EBD7"));
const provider = document.querySelector("fluent-design-system-provider");
// change the neutral color pallete
provider.neutralPalette = palette;
})();
I get the following error,
Uncaught TypeError: Failed to resolve module specifier "#microsoft/fast-colors". Relative references must start with either "/", "./", or "../".
How do i resolve this ?
As far as I know, the import is used in the client application (such as Angular, Teactjs), instead of Asp.net Core Blazor. If you are create a Client application, you could check the Fast Integrations.
To integrate Fast with Asp.net Core Blazor, after installing the Fast using the following command:
npm install --save #microsoft/fast-components
You can locate the single file script build in the following location:
node_modules/#microsoft/fast-components/dist/fast-components.min.js
Copy this to your wwwroot/script folder and reference it with a script tag as described above. Code in the Razor page like this:
<script type="module" src="script/fast-components.min.js"></script>
More detail information, see Fast Integrations for Asp.net Core Blazor.
I missed to add the complete path to the fluent components js files, referencing the correct path works well!
import { neutralLayerL1Behavior, parseColorString } from "https://unpkg.com/#fluentui/web-components";
import { createColorPalette } from "https://unpkg.com/#microsoft/fast-components";
export function initDesignSystemProvider() {
const designSystemProvider = document.querySelector("fluent-design-system-provider");
var accentBaseColor = "#204320";
const accentPalette = createColorPalette(parseColorString(accentBaseColor));
designSystemProvider.accentBaseColor = accentBaseColor;
designSystemProvider.accentPalette = accentPalette;
}
As you all know, in all normal .net framework empty web site projects every asp page has a head section in which we specify the external style sheet of that asp page. But I am shifting to .core web application project where pages do not have a head section. There is a head section in shared _layout but I do not want to use it because, as far as I know, the link for style sheet is shared across all pages what I shall do.
#page
#model IndexModel
#{
ViewData["Title"] = "Home page";
}
To achieve your requirement of adding references to external stylesheets inside the <head> section of page from view page(s), you can try following approach.
In _Layout.cshtml, calling RenderSection to optionally reference Styles section in the section, like below.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - WebApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
#RenderSection("Styles", required: false)
</head>
Then you can add reference to the external style sheet file like below in view page.
#section Styles{
<link href="#Url.Content("~/Styles/mystyle.css")" rel="stylesheet" type="text/css" />
}
Test Result
till now the easiest solution i found
(1)- prevent your page from taking style from default shared (_layout.)
by writing the following code at your page
(2)- your razor page like any other html page can accept head section tag
and can accept tag even if it is not placed in head section
so refer to your external style sheet as u normally do
write following link tag at your razor page without head section
(1)
#{
Layout = "";}
<link rel="stylesheet" href="~/css/style.css" />
I'm coding using Vue JS technology and I'm trying to load the favicon but it won't show up. I tried to look for other documentation about it but can't find one. I'm a beginner in this technology hope someone help. Thanks!
Here is my code in HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="favicon.ico" />
<title>Hello World</title>
</head>
<body>
<noscript>
<strong>
We're sorry but codesandbox doesn't work properly without
JavaScript enabled. Please enable it to continue.
</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
Please check the attached image there is the code as well.
In Vuejs, your favicon.ico should be in either public or assets folder.
To access images from assets folder in vue one would do :src="require('#/assets/images/favicon.ico')"
To access images from public folder in vue one would do :src="./static/images/favicon.ico"
I hope this helps!!
Given this HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Sencha on Rails</title>
<!-- styles, scripts etc. -->
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="JzrbB8G0gpcKoWcnL8+AllPSXzUVwqDSp5yjgEGqYwk=" />
</head>
<body></body>
</html>
How would I use Ext.core to extract the csrf-token?
In jQuery, I could do this:
var csrfToken = jQuery("meta[name=csrf-token]").attr("content");
> "JzrbB8G0gpcKoWcnL8+AllPSXzUVwqDSp5yjgEGqYwk="
I'm building a Sencha Touch application backed by rails, so I can't use jQuery.
You can use Ext.query(selector,root); to get the token.
For example:
var csrfToken = Ext.query('meta[name=csrf-token]')[0].getAttribute('content');
Note that Ext.query returns an array of components that matched the query. http://docs.sencha.com/touch/1-1/#!/api/Ext.ComponentQuery.Query-method-query
Or you can use Ext.select
var csrfToken = Ext.select('meta[name=csrf-token]').elements[0].getAttribute('content');