mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

docs: add new component docs

Browse source
This commit is contained in:
Eric Liu 2020-10-02 20:13:02 -07:00
commit 2008d0035f
130 changed files with 6662 additions and 3801 deletions
Download patch file Download diff file Expand all files Collapse all files

55
docs/scripts/carbon-theme.js
View file

@ -1,55 +0,0 @@
const fs = require("fs");
const sass = require("node-sass");
const autoprefixer = require("autoprefixer");
const postcss = require("postcss");
const { promisify } = require("util");
const writeFile = promisify(fs.writeFile);
const outFile = "./static/style.css";
async function generateCss() {
sass.render(
{
outFile,
omitSourceMapUrl: true,
data: `
$feature-flags: (
enable-css-custom-properties: true,
grid-columns-16: true,
);
@import "node_modules/carbon-components/scss/globals/scss/_css--helpers.scss";
@import "node_modules/carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/_mixins.scss";
:root[carbon-theme="white"] { @include carbon--theme($carbon--theme--white, true); }
:root { @include carbon--theme($carbon--theme--g10, true); }
:root[carbon-theme="g90"] { @include carbon--theme($carbon--theme--g90, true); }
:root[carbon-theme="g100"] { @include carbon--theme($carbon--theme--g100, true); }
$css--font-face: true;
$css--helpers: true;
$css--body: true;
$css--use-layer: true;
$css--reset: true;
$css--default-type: true;
$css--plex: true;
@import "node_modules/carbon-components/scss/globals/scss/_css--reset.scss";
@import "node_modules/carbon-components/scss/globals/scss/_css--font-face.scss";
@import "node_modules/carbon-components/scss/globals/scss/_css--helpers.scss";
@import "node_modules/carbon-components/scss/globals/scss/_css--body.scss";
@import "node_modules/carbon-components/scss/globals/grid/_grid.scss";
@import "node_modules/carbon-components/scss/globals/scss/styles.scss";`,
},
async (error, result) => {
if (!error) {
const prefixed = await postcss([autoprefixer]).process(result.css, {
from: undefined,
});
await writeFile(outFile, prefixed.css);
}
}
);
}
generateCss();

145
docs/scripts/postbuild.js Normal file
View file

@ -0,0 +1,145 @@
const sirv = require("sirv");
const polka = require("polka");
const { chromium } = require("playwright");
const fs = require("fs-extra");
const posthtml = require("posthtml");
const path = require("path");
const PORT = process.env.PORT || 3000;
const OUT_DIR = "dist";
async function scrape(page, url = "") {
await page.goto(`http://localhost:${PORT}/${url}`);
await page.waitForLoadState("networkidle");
const $html = await page.$("html");
const html = await page.evaluate(([html]) => html.innerHTML, [$html]);
await $html.dispose();
return html;
}
function relativePaths(depth = 0) {
const asset_extension = new RegExp(/.(js|css|ico)$/);
let relative_path =
depth > 0
? Array.from({ length: depth }, (_, i) => "../")
.join("")
.slice(0, -1)
: ".";
return (tree) => {
tree.match(
[
{ attrs: { href: asset_extension } },
{ attrs: { src: asset_extension } },
],
(node) => {
if ("href" in node.attrs) {
node.attrs.href = relative_path + node.attrs.href;
}
if ("src" in node.attrs) {
node.attrs.src = relative_path + node.attrs.src;
}
return node;
}
);
tree.match({ attrs: { id: "__routify_iframes" } }, (node) => {});
};
}
async function processHtml(html, { dir, outfilePath, depth }) {
const processed = await posthtml().use(relativePaths(depth)).process(html);
if (dir) {
await fs.ensureDir(outfilePath);
await fs.writeFile(
path.join(outfilePath, "index.html"),
await `<!DOCTYPE html><html lang="en">${processed.html}</html>`
);
} else {
await fs.writeFile(
path.join(outfilePath),
await `<!DOCTYPE html><html lang="en">${processed.html}</html>`
);
}
console.log("Prerendered:", outfilePath);
}
const app = polka()
.use(sirv("dist", { single: true }))
.listen(PORT, async (error) => {
if (error) {
console.log(error);
process.exit(1);
}
const browser = await chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();
const components = await fs.readdir("src/pages/components");
for await (const component of components) {
const [file] = component.split(".svx");
const filePath = `components/${file}`;
const result = await scrape(page, filePath);
await processHtml(result, {
dir: true,
outfilePath: `${OUT_DIR}/${filePath}`,
depth: 2,
});
}
await fs.ensureDir(`${OUT_DIR}/framed/`);
await fs.ensureDir(`${OUT_DIR}/framed/Grid`);
const framed = [
{
folder: "Grid",
paths: fs.readdirSync("src/pages/framed/Grid"),
},
{
folder: "Loading",
paths: fs.readdirSync("src/pages/framed/Loading"),
},
{
folder: "Modal",
paths: fs.readdirSync("src/pages/framed/Modal"),
},
{
folder: "UIShell",
paths: fs.readdirSync("src/pages/framed/UIShell"),
},
];
for await (const frame of framed) {
const { folder, paths } = frame;
for await (framePath of paths) {
const { name } = path.parse(framePath);
await fs.ensureDir(`${OUT_DIR}/framed/${folder}/${name}`);
const filePath = `framed/${folder}/${name}`;
const result = await scrape(page, filePath);
await processHtml(result, {
dir: true,
outfilePath: `${OUT_DIR}/${filePath}`,
depth: 3,
});
}
}
const __404 = await scrape(page, "404");
await processHtml(__404, { outfilePath: `${OUT_DIR}/404.html` });
const __index = await scrape(page);
await processHtml(__index, { outfilePath: `${OUT_DIR}/index.html` });
await browser.close();
await app.server.close();
process.exit(0);
});