Gitbook CSS override doesn't work as expected - gitbook

I tried to update the default css file, following this suggestion.
To over-ride the Gitbook default styles, create a file called 'styles/website.css` in the root of your gitbook project.
But it never worked. Here is my book.json file.
{
"title": "Title",
"description": "description",
"plugins": ["insert-logo", "language-picker", "hints", "fontsettings","custom-js-css", "collapsible-chapters","back-to-top-button","intopic-toc","hide-published-with","-sharing","copy-code-button","lightbox"],
"pluginsConfig": {
"insert-logo": {
"url": "logo.svg",
"style": "background:none; height: 50%; width: 50%;"
},
"lightbox": {
"includeJQuery": false,
"sameUuid": true,
"options": {
"resizeDuration": 500,
"wrapAround": false
}
},
"styles": {
"website": "styles/website.css"
}
}
}
Is there anything wrong? Thanks!

Related

In Apple News Format, how do I replace an image all at once rather than have it revealed via scrolling?

First time poster, long-time reader!
I am writing the JSON for an Apple News story. I have three consecutive full-screen fill images. They are all set to "attachment":"fixed". The transition from one image to another, when scrolling, is to reveal the next image continuously. I would like the "incoming" image to replace the prior image wholesale -- it just appears after someone scrolls to the bottom of the prior image. Hoping that makes sense, since I can't show the actual Apple News preview. I don't want to use an animation, since that only appears once; I want the same behavior when people scroll backwards.
Here's what I have now ... and the scrolling reveal IS what I expected. I want the very different behavior detailed above!
"components": [
{
"role": "header",
"style": "leadVideoStyle",
"layout": {
"ignoreDocumentMargin": true,
"minimumHeight": "125vh"
},
"components": [
{
"role": "container",
"anchor": {
"targetAnchorPosition": "top"
},
"style": "scrimBackgroundStyle",
"layout": {
"ignoreDocumentMargin": true
},
"components": [
{
"role": "title",
"layout": "titleLayout",
"text": "some text",
"textStyle": "titleStyle",
"format": "html"
},
{
"role": "intro",
"layout": "introLayout",
"text": "some text,
"textStyle": "introStyle"
}
]
}
]
},
{
"role": "section",
"layout": {
"ignoreDocumentMargin": true,
"minimumHeight": "200vh"
},
"style": "leadPhotoStyle1"
},
{
"role": "section",
"layout": {
"ignoreDocumentMargin": true,
"minimumHeight": "200vh"
},
"style": "leadPhotoStyle2"
}
],
"leadVideoStyle": {
"fill": {
"type": "video",
"URL": "URL here",
"stillURL": "bundle URL",
"fillMode": "cover",
"verticalAlignment": "top",
"attachment": "fixed"
}
},
"leadPhotoStyle1": {
"fill": {
"type": "image",
"URL": "URL here",
"fillMode": "cover",
"verticalAlignment": "top",
"attachment": "fixed"
}
},
"leadPhotoStyle2": {
"fill": {
"type": "image",
"URL": "URL here",
"fillMode": "cover",
"verticalAlignment": "top",
"attachment": "fixed"
}

How to add base/baseHref to Nx/Vite manifest.json file

How can I prefix the file, css, and assets in a Vite manifest.json file with a CDN URL?
export default defineConfig({
base: 'https://my-cdn.com/',
build: {
manifest: true,
rollupOptions: {
input: '/path/to/main.js'
}
}
})
but the end result is:
{
"main.js": {
"file": "assets/main.4889e940.js",
"src": "main.js",
"isEntry": true,
"dynamicImports": [],
"css": ["assets/main.b82dbe22.css"],
"assets": ["assets/asset.0ab0f9cd.png"]
}
}
instead of:
{
"main.js": {
"file": "https://my-cdn.com/assets/main.4889e940.js",
"src": "main.js",
"isEntry": true,
"dynamicImports": [],
"css": ["https://my-cdn.com/assets/main.b82dbe22.css"],
"assets": ["https://my-cdn.com/assets/asset.0ab0f9cd.png"]
}
}
To achieve that, you need to add a base property with the URL or path in the project.json file under targets/build/options.
Here is an example project.json config file:
{
"name": "app",
"$schema": "node_modules/nx/schemas/project-schema.json",
"sourceRoot": "./src",
"projectType": "application",
"targets": {
"build": {
"executor": "#nrwl/vite:build",
"outputs": ["{options.outputPath}"],
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/app",
"base": "https://my-cdn.com"
}
}
}
}
And if you are using vite without NX, then you can provide a base argument to the vite build command.
An example:
vite build --base="https://my-cdn.com"

TypeScript: Parsing XML to JSON in node loses the order of same name-tags

I have tried using xml2js and fast-xml-parser and get pretty same result from both (although in different formats, but that is not the point here)
This example is from fast-xml-parser
I have this XML:
<test version="1">
<case tm-reference="reference-to-test-management-test id">
<description>Test description ..</description>
<steps>
<platform type="appium" navigate-to="x in list-of-values">
<expect fan="AUTO"/>
</platform>
<tstat id="">
<set mode="HEAT" fan="AUTO" RT="70F" SP="70F"/>
</tstat>
<!-- value in milliseconds -->
<wait for="500"/>
<platform type="appium">
<expect fan="AUTO"/>
</platform>
<!-- value in milliseconds -->
<wait for="500"/>
<tstat>
<set mode="HEAT" fan="AUTO" RT="70F" SP="70F"/>
<wait for="500"/>
<expect led-g="ON" led-y="ON"/>
<wait for="500"/>
<expect led-g="ON" led-y="ON"/>
</tstat>
</steps>
</case>
</test>
parsing it like this:
import parser from "fast-xml-parser"
const result = parser.parse(this.xml, { parseAttributeValue: true, ignoreAttributes: false, allowBooleanAttributes: true, attributeNamePrefix: "" })
console.log(JSON.stringify(result, null, 2));
doing this result in this:
{
"test": {
"version": 1,
"case": {
"tm-reference": "some reference ID",
"description": "Test description ..",
"steps": {
"platform": [
{
"type": "appium",
"navigate-to": "x in list-of-values",
"expect": {
"fan": "AUTO"
}
},
{
"type": "appium",
"expect": {
"fan": "AUTO"
}
}
],
"tstat": [
{
"id": "",
"set": {
"mode": "HEAT",
"fan": "AUTO",
"RT": "70F",
"SP": "70F"
}
},
{
"set": {
"mode": "HEAT",
"fan": "AUTO",
"RT": "70F",
"SP": "70F"
},
"wait": [
{
"for": 500
},
{
"for": 500
}
],
"expect": [
{
"led-g": "ON",
"led-y": "ON"
},
{
"led-g": "ON",
"led-y": "ON"
}
]
}
],
"wait": [
{
"for": 500
},
{
"for": 500
}
]
}
}
}
}
Notice how the repeated tags for example platform, tstat and wait have been combined together into an array and lost the order of actual their placements in xml file. I am looking for a way to actually preserve the order and repetition of tags.
somehow I get the array of steps(objects) with each tag's information in the same order as in xml file
EDIT: Adding expected output
I'm expecting if not exactly but something similar where order is preserved for each tag
{
"test": {
"version": 1,
"children": [
{
"case": {
"tm-reference": "some reference ID",
"description": "Test description ..",
"steps": {
"children": [
{
"platform": {
"type": "appium",
"navigate-to": "x in list-of-values",
"children": [
{
"expect": {
"fan": "AUTO"
}
}
]
}
},
{
"tstat": {
"id": "",
"children": [
{
"set": {
"mode": "HEAT",
"fan": "AUTO",
"RT": "70F",
"SP": "70F"
}
}
]
}
},
{
"wait": {
"for": 500,
"children": []
}
},
{
"platform": {
"type": "appium",
"children": [
{
"expect": {
"fan": "AUTO"
}
}
]
}
},
{
"wait": {
"for": 500,
"children": []
}
},
{
"tstat": {
"children": [
{
"set": {
"mode": "HEAT",
"fan": "AUTO",
"RT": "70F",
"SP": "70F"
}
},
{
"wait": {
"for": 500
}
},
{
"expect": {
"led-g": "ON",
"led-y": "ON"
}
},
{
"wait": {
"for": 500
}
},
{
"expect": {
"led-g": "ON",
"led-y": "ON"
}
}
]
}
}
]
}
}
}
]
}
}
EDIT 2:
Created an issue on GitHub repo, follow here
You want your steps element's content to be represented in JSON as an array, not an object, because JavaScript object properties are unordered and may not repeat names.
In fast-xml-parser, you may be able to achieve this via the arrayMode option:
arrayMode : When false, a tag with single occurrence is parsed as an object but as an array in case of multiple occurences. When
true, a tag will be parsed as an array always excluding leaf nodes.
When strict, all the tags will be parsed as array only. When
instance of RegEx, only tags will be parsed as array that match the
regex. When function a tag name is passed to the callback that can
be checked.

Shopware theme config; "Unable to find setter for config field "scss"

Via the shopware documentation I set up the following field via the theme.json
"fields": {
"sw-footer-contact-details": {
"label": {
"en-GB": "Footer contact"
},
"type": "text",
"scss": false,
"custom": {
"componentName": "sw-text-editor"
},
"block": "footerBlock",
"section": "Contact"
}
}
But when accessing the frontend i get the following error; Unable to find setter for config field "scss". It is because of the "scss": false line. The part of the documentation prescribing this is https://docs.shopware.com/en/shopware-platform-dev-en/theme-guide/configuration?category=shopware-platform-dev-en/theme-guide#config-fields

Visual Studio Test Explorer does not discover jasmine tests

I have jasmine tests that run through the Chutzpah context menu extension (Run JS tests). However they do not get discovered by the Test Explorer and when I right-click and select Run Tests, the output from "Tests" gives me this:
System.ArgumentException: The directory name is invalid.
at System.IO.FileSystemWatcher..ctor(String path, String filter)
at Chutzpah.VS11.EventWatchers.TestFilesUpdateWatcher.AddWatch(String path)
at Chutzpah.VS2012.TestAdapter.ChutzpahTestContainerDiscoverer.UpdateTestContainersAndFileWatchers(IEnumerable`1 files, Boolean isAdd)
at Chutzpah.VS2012.TestAdapter.ChutzpahTestContainerDiscoverer.GetTestContainers()
at Chutzpah.VS2012.TestAdapter.ChutzpahTestContainerDiscoverer.get_TestContainers()
at Microsoft.VisualStudio.TestWindow.Controller.TestContainerDiscovererExtension.GetSortedContainers(ITestContainerDiscoverer discoverer)
at Microsoft.VisualStudio.TestWindow.Controller.TestContainerProvider.GetContainersFromDiscoverer(ITestContainerDiscoverer discoverer)
No tests found to run.
Here's my chutzpah.json file also:
{
"Framework": "jasmine",
"FrameworkVersion": "2",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"References": [
{ "Path": "../../DIB.MemberCatalog/lib/dust/dust-full.js" },
{ "Path": "../../DIB.MemberCatalog/lib/dust-helpers/dust-helpers.js" },
{ "Path": "../../DIB.MemberCatalog/lib/harvey/harvey.js" },
{ "Path": "../../DIB.MemberCatalog/lib/hopscotch/js/hopscotch.js" },
{ "Path": "../../DIB.MemberCatalog/lib/jquery/jquery-1.11.1.js" },
{ "Path": "../../DIB.MemberCatalog/lib/jquery-ui/jquery-ui.js" },
{ "Path": "../../DIB.MemberCatalog/lib/jquery-validate/jquery.validate.js" },
{ "Path": "../../DIB.MemberCatalog/lib/knockout/knockout-3.1.0.js" },
{ "Path": "../../DIB.MemberCatalog/lib/knockout-mapping/knockout.mapping.js" },
{ "Path": "../../DIB.MemberCatalog/lib/knockout-validation/knockout.validation.js" },
{ "Path": "../../DIB.MemberCatalog/lib/lightbox/js/lightbox.js" },
{ "Path": "../../DIB.MemberCatalog/lib/respond/respond.js" },
{ "Path": "../../DIB.MemberCatalog/Scripts/jquery.qtip.min.js" },
{ "Path": "../../DIB.MemberCatalog/Scripts/json2.min.js" },
{ "Path": "../../DIB.MemberCatalog/Scripts/jquery.cookie.js" },
{ "Path": "../../DIB.MemberCatalog/Scripts/jquery.hoverIntent.min.js" },
{ "Path": "../../DIB.MemberCatalog/Scripts/jquery.lazyload.min.js" },
{ "Path": "../../DIB.MemberCatalog/Scripts/changecheck.js" },
{ "Path": "../../DIB.MemberCatalog/Scripts/stickytable.js" },
{ "Path": "../../DIB.MemberCatalog/Scripts/superalert.js" },
{ "Path": "../../DIB.MemberCatalog/Scripts/core.js" },
{ "Path": "prepare.js" },
{ "Path": "engine.js" }
],
"Tests": [
{ "Path": "tests" }
],
"CodeCoverageIncludes": [],
"CodeCoverageExcludes": []
}
Solution structure:
DIB.MemberCatalog
-Testing
- DIB.MemberCatalog.Tests.JS
- data
- lib
- jasmine-2.0.0
- (jasmine files, boot, console, jasmine)
- tests
- testfiles.js
- chutzpah.json
-DIB.MemberCatalog
- (more...)
I've scoured the internet and can't find a solution.
Solved by changing my test project name from DIB.MemberCatalog.Tests.JS to DIB.MemberCatalog.Tests.Client. Confusion happens when the project has the javascript file extension at the end of the project name.

Resources