Question:
What is the proper way to define an alias for external links in vuepress2 or vuejs?
Problem:
I have a documentation site hosted in github pages, I want to link some source files to documentation.
[task-runner.json](https://github.com/alirezanet/Husky.Net/blob/master/.husky/task-runner.json)
this works but I rather create an alias for the base path. something like this:
#repo :
https://github.com/alirezanet/Husky.Net/blob/master/.husky/task-runner.json
and use it like this
[task-runner.json](#repo/.husky/task-runner.json)
Notes:
because vuepress2 is using vuejs3, probably vuejs solution works too
vuepress default-theme also has repo configuration, is there any way to use it in router-links or md-files?
import type { DefaultThemeOptions } from 'vuepress'
export const themeConfig: DefaultThemeOptions = {
docsRepo: 'alirezanet/husky.net',
repo: 'alirezanet/husky.net',
}
Related
So I'm new to NextJS and am trying to learn the api. In the default hello.js file inside of the api folder there is an export default function which returns a json response. So now if I want to add another route would I have to create a seperate file for that or just add a function below to do so? I would like to just be able to add more functions to create more routes.
Yes you can have dynamic api routes just like you can have dynamic pages!
From the docs
For example, the API route pages/api/post/[pid].js has the following code:
export default function handler(req, res) {
const { pid } = req.query
res.end(`Post: ${pid}`)
}
Now, a request to /api/post/abc will respond with the text: Post: abc.
So you could definitely have different functions based on the api route you are trying to get to. You could use a switch or whatever works for you.
The Next JS docs = https://nextjs.org/docs/api-routes/dynamic-api-routes
I have a router in Vue looking like this:
{
path: '/temporaryList/:tempUrl',
name: 'temporaryList',
component: () => import('../views/TemporaryListView.vue')
}
I want to send a value for the "tempUrl"-param that could for example look like this:
https%3A%2F%2Fwww.amazon.se%2F%5Bn%5Btest%5B~%5B
(this value is coming from encodeURIComponent() function, so it should be able to be used in the URL)
This does not seem to work for some reason, When I try to access this page I get:
"There was no web page at the URL: http://localhost:3000/temporaryList/https%3A%2F%2Fwww.amazon.se%2F%5Bn%5Btest%5B~%5B "
I have built this exact same solution with node and express where this didn't seem to be an issue. I don't know if the value of the param I send is to long for Vue? It also seems like Vue does not like when a params includes a "%" for example.
Is there any way you can make Vue routers allow this type of param-value?
Vite uses the decodeURIComponent function on the request URL. The value of the param i sent had "%" included in it which made Vite read every "%" as a "/". That made Vite searchfor a location that did not exist.
This npm-package solved my issue: https://github.com/ivesia/vite-plugin-rewrite-all
I'm using this library #uifabric/merge-styles from office-ui-fabric. My question is how to use vendor prefixes inside mergeStyleSets?
Example -webkit-filter:
import { mergeStyleSets } from '#uifabric/merge-styles'
mergeStyleSets({
webkitFilter: 'blur(5px)', // Error! No Typescript definition.
})
Is there any other way to achieve this?
Merge Styles Library
It looks like there is no Typescript definitions for it
IRawStyleBase.ts
Addition to #Vitalie Braga answer:
This is temporary solution if you are using Typescript project:
const foo = mergeStyleSets({
root: [
{
backgroundColor: '#f00',
...({ '-webkit-filter': 'blur(5px)' } as any)
},
]
})
Issues Page - Git OFFICE UI FABRIC
#uifabric/merge-styles library has smarts about automatic vendor prefixing for you but the only issue with that is that the rules that are auto-prefixed today are limited to just one: user-select. I would advise you go and submit an issue in their github repo here and either ask if new rules can be added or ask how to handle this situation.
From a deeper investigation looks like they have some vendor specific support but is very limited in IRawStyleBase.ts. Those rules will automatically be transformed into vendor rules.
So to answer your questions if you are using a TS project there is no way you can specify something that is not compatible with the IRawStyleBase interface but if you are using a js script you can probably try your luck as I did in this code-sandbox and it looks like the filter get's through but nothing else.
What would be the best implementation of i18n. It's for a webapp so I don't want to update the url based on locale.
I am using nuxt frameworks so I researched nuxt-i18n but that's not possible without updating the url.
in nuxt.config.js/ts
i18n: {
...
strategy: 'no_prefix',
...
}
to change the locale, use something like:
changeLocale() {
this.$i18n.setLocale(this.$i18n.locale === 'en' ? 'tr' : 'en')
}
I tried to create a simple example, but we can still improve.
In this approach, I tried to use cookies instead of the path, and to do so I need to make a refresh page when we switch languages or else our components wouldn't load the new translations.
Check here: https://codesandbox.io/embed/example-i18n-mo8t7?fontsize=14
I am using Nuxt to create my application and I have a group of pages that are related in a way.
So I will simplify things a bit but my current structure looks like this
/pages
/login
/registration
/forgot-password
/resend-confirmation-email
.
.
.
This folder structure is creating /login, /registration, /forgot-password, /resend-confirmation-email routes, which is cool.
So, in a way I can group first four pages to a group and name it authorization.
Ideally new folder structure should look like
/pages
/authorization
/login
/registration
/forgot-password
/resend-confirmation-email
.
.
.
However what I would like is for the router to not get messed up, I would very much like for those routes to remain the way they were.
Is that possible?
So with no plugins and stuff, what I did was replacing the folder name from route object in extend routes function.
File nuxt.config.js
router: {
extendRoutes(nuxtRoutes) {
nuxtRoutes.map(route => {
route.path = route.path.replace('/authorization', '');
route.name = route.name.replace('authorization-', '');
return route;
});
},
....
}
This looks like a hack to me, but it actually does exactly what I want. For some larger projects I might consider fully overriding the router but this is kinda okay for now.
You can use nuxt router extras module
https://github.com/alibaba-aero/nuxt-router-extras/blob/dev/README.md
<router>
path: /posts
</router>