mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update examples, update README documentation (#772)

Browse source 
* chore(examples): update example set-ups

* chore: update readme docs
This commit is contained in:
Eric 2021-07-29 15:51:34 -07:00 • committed by GitHub
commit 0315a17d4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
97 changed files with 6778 additions and 15821 deletions
Download patch file Download diff file Expand all files Collapse all files

1
examples/sapper/src/client.js
View file

@ -1,4 +1,3 @@
import "carbon-components-svelte/css/all.css";
import * as sapper from "@sapper/app";
sapper.start({ target: document.querySelector("#sapper") });

37
examples/sapper/src/components/Header.svelte
View file

@ -1,37 +0,0 @@
<script>
export let segment = undefined;
import {
SkipToContent,
Header,
HeaderUtilities,
HeaderGlobalAction,
} from "carbon-components-svelte";
import Notification20 from "carbon-icons-svelte/lib/Notification20";
import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
import { getContext } from "svelte";
const ctx = getContext("Theme");
$: if (ctx) {
ctx.dark.subscribe((value) => {
console.log("dark mode?", value);
});
ctx.light.subscribe((value) => {
console.log("light mode?", value);
});
ctx.updateVar("--cds-productive-heading-06-font-size", "4rem");
}
</script>
<Header company="IBM" platformName="Carbon Components Svelte" href="/">
<div slot="skip-to-content">
<SkipToContent />
</div>
<HeaderUtilities>
<HeaderGlobalAction aria-label="Notifications" icon="{Notification20}" />
<HeaderGlobalAction aria-label="User Avatar" icon="{UserAvatar20}" />
<HeaderGlobalAction aria-label="App Switcher" icon="{AppSwitcher20}" />
</HeaderUtilities>
</Header>

74
examples/sapper/src/components/Nav.svelte
View file

@ -1,74 +0,0 @@
<script>
export let segment;
</script>
<nav>
<ul>
<li>
<a aria-current="{segment === undefined ? 'page' : undefined}" href="."
>home</a
>
</li>
<li>
<a aria-current="{segment === 'about' ? 'page' : undefined}" href="about"
>about</a
>
</li>
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
the blog data when we hover over the link or tap it on a touchscreen -->
<li>
<a
rel="prefetch"
aria-current="{segment === 'blog' ? 'page' : undefined}"
href="blog">blog</a
>
</li>
</ul>
</nav>
<style>
nav {
border-bottom: 1px solid rgba(255, 62, 0, 0.1);
font-weight: 300;
padding: 0 1em;
}
ul {
margin: 0;
padding: 0;
}
/* clearfix */
ul::after {
content: "";
display: block;
clear: both;
}
li {
display: block;
float: left;
}
[aria-current] {
position: relative;
display: inline-block;
}
[aria-current]::after {
position: absolute;
content: "";
width: calc(100% - 1em);
height: 2px;
background-color: rgb(255, 62, 0);
display: block;
bottom: -1px;
}
a {
text-decoration: none;
padding: 1em 0.5em;
display: block;
}
</style>

74
examples/sapper/src/components/Theme.svelte
View file

@ -1,74 +0,0 @@
<script>
export let persist = false;
export let persistKey = "theme";
export let theme = "white";
export const themes = ["white", "g10", "g90", "g100"];
import { onMount, afterUpdate, setContext } from "svelte";
import { writable, derived } from "svelte/store";
const isValidTheme = (value) => themes.includes(value);
const isDark = (value) =>
isValidTheme(value) && (value === "g90" || value === "g100");
const carbon_theme = writable(theme);
const dark = writable(isDark(theme));
const light = derived(dark, (_) => !_);
const unsubscribe = carbon_theme.subscribe((value) => {
theme = value;
});
let _document = null;
setContext("Theme", {
updateVar: (name, value) => {
if (_document != null) {
_document.documentElement.style.setProperty(name, value);
}
},
carbon_theme,
dark,
light,
});
onMount(() => {
_document = window.document;
try {
const persisted_theme = localStorage.getItem(persistKey);
if (isValidTheme(persisted_theme)) {
carbon_theme.set(persisted_theme);
}
} catch (error) {
console.error(error);
}
return () => {
unsubscribe();
};
});
afterUpdate(() => {
if (isValidTheme(theme)) {
if (_document != null) {
_document.documentElement.setAttribute("theme", theme);
}
if (persist) {
localStorage.setItem(persistKey, theme);
}
} else {
console.warn(
`"${theme}" is not a valid Carbon theme. Choose from available themes: ${JSON.stringify(
themes
)}`
);
}
});
$: dark.set(isDark(theme));
</script>
<slot />

27
examples/sapper/src/routes/_error.svelte
View file

@ -2,22 +2,17 @@
export let status;
export let error;
import { Row, Column, Link } from "carbon-components-svelte";
const dev = process.env.NODE_ENV === "development";
</script>
<Row>
<Column lg="{16}">
<h1>{status}</h1>
<div>
{error.message}
<Link inline href="/">Return home</Link>
</div>
{#if dev && error.stack}
<div>
<pre>{error.stack}</pre>
</div>
{/if}
</Column>
</Row>
<svelte:head>
<title>{status}</title>
</svelte:head>
<h1>{status}</h1>
<p>{error.message}</p>
{#if dev && error.stack}
<pre>{error.stack}</pre>
{/if}

27
examples/sapper/src/routes/_layout.svelte
View file

@ -1,28 +1,5 @@
<script>
export let segment = undefined;
import {
Content,
Breadcrumb,
BreadcrumbItem,
Grid,
Row,
Column,
Tabs,
TabContent,
Tab,
Select,
SelectItem,
} from "carbon-components-svelte";
import Header from "../components/Header.svelte";
import Theme from "../components/Theme.svelte";
import "carbon-components-svelte/css/white.css";
</script>
<Theme persist theme="g10">
<Header segment="{segment}" />
<Content style="background: none; padding: 1rem">
<Grid>
<slot />
</Grid>
</Content>
</Theme>
<slot />

84
examples/sapper/src/routes/index.svelte
View file

@ -1,85 +1,5 @@
<script>
import {
Content,
Breadcrumb,
BreadcrumbItem,
Grid,
Row,
Column,
Tabs,
TabContent,
Tab,
Select,
SelectItem,
} from "carbon-components-svelte";
import { getContext } from "svelte";
const { carbon_theme } = getContext("Theme");
import { Button } from "carbon-components-svelte";
</script>
<Row>
<Column lg="{16}">
<Breadcrumb noTrailingSlash aria-label="Page navigation">
<BreadcrumbItem href="/">Getting started</BreadcrumbItem>
</Breadcrumb>
<h1 style="margin-bottom: 1.5rem">Design &amp; build with Carbon</h1>
</Column>
</Row>
<Row>
<Column noGutter>
<Tabs aria-label="Tab navigation">
<Tab label="About" />
<Tab label="Design" />
<Tab label="Develop" />
<div slot="content" class="tabbed-content">
<Grid as fullWidth let:props>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<Select
labelText="Carbon theme"
bind:selected="{$carbon_theme}"
style="margin-bottom: 1rem"
>
<SelectItem value="white" text="White" />
<SelectItem value="g10" text="Gray 10" />
<SelectItem value="g90" text="Gray 90" />
<SelectItem value="g100" text="Gray 100" />
</Select>
<p>
Carbon is IBM’s open-source design system for digital products
and experiences. With the IBM Design Language as its
foundation, the system consists of working code, design tools
and resources, human interface guidelines, and a vibrant
community of contributors.
</p>
</Column>
</Row>
</TabContent>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<p>
Rapidly build beautiful and accessible experiences. The Carbon
kit contains all resources you need to get started.
</p>
</Column>
</Row>
</TabContent>
<TabContent {...props}>
<Row>
<Column md="{4}" lg="{7}">
<p>
Carbon provides styles and components in Vanilla, React,
Angular, Vue and Svelte for anyone building on the web.
</p>
</Column>
</Row>
</TabContent>
</Grid>
</div>
</Tabs>
</Column>
</Row>
<Button>Primary button</Button>

9
examples/sapper/src/server.js
View file

@ -1,16 +1,11 @@
import sirv from "sirv";
import polka from "polka";
import compression from "compression";
import * as sapper from "@sapper/server";
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === "development";
polka()
.use(
compression({ threshold: 0 }),
sirv("static", { dev: NODE_ENV === "development" }),
sapper.middleware()
)
.use(sapper.middleware())
.listen(PORT, (err) => {
if (err) console.log("error", err);
});

85
examples/sapper/src/service-worker.js
View file

@ -1,85 +0,0 @@
import { timestamp, files, shell, routes } from "@sapper/service-worker";
const ASSETS = `cache${timestamp}`;
// `shell` is an array of all the files generated by the bundler,
// `files` is an array of everything in the `static` directory
const to_cache = shell.concat(files);
const cached = new Set(to_cache);
self.addEventListener("install", (event) => {
event.waitUntil(
caches
.open(ASSETS)
.then((cache) => cache.addAll(to_cache))
.then(() => {
self.skipWaiting();
})
);
});
self.addEventListener("activate", (event) => {
event.waitUntil(
caches.keys().then(async (keys) => {
// delete old caches
for (const key of keys) {
if (key !== ASSETS) await caches.delete(key);
}
self.clients.claim();
})
);
});
self.addEventListener("fetch", (event) => {
if (event.request.method !== "GET" || event.request.headers.has("range"))
return;
const url = new URL(event.request.url);
// don't try to handle e.g. data: URIs
if (!url.protocol.startsWith("http")) return;
// ignore dev server requests
if (
url.hostname === self.location.hostname &&
url.port !== self.location.port
)
return;
// always serve static files and bundler-generated assets from cache
if (url.host === self.location.host && cached.has(url.pathname)) {
event.respondWith(caches.match(event.request));
return;
}
// for pages, you might want to serve a shell `service-worker-index.html` file,
// which Sapper has generated for you. It's not right for every
// app, but if it's right for yours then uncomment this section
/*
if (url.origin === self.origin && routes.find(route => route.pattern.test(url.pathname))) {
event.respondWith(caches.match('/service-worker-index.html'));
return;
}
*/
if (event.request.cache === "only-if-cached") return;
// for everything else, try the network first, falling back to
// cache if the user is offline. (If the pages never change, you
// might prefer a cache-first approach to a network-first one.)
event.respondWith(
caches.open(`offline${timestamp}`).then(async (cache) => {
try {
const response = await fetch(event.request);
cache.put(event.request, response.clone());
return response;
} catch (err) {
const response = await cache.match(event.request);
if (response) return response;
throw err;
}
})
);
});

26
examples/sapper/src/template.html
View file

@ -2,32 +2,10 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>sapper</title>
%sapper.base%
<!-- Sapper creates a <script> tag containing `src/client.js`
and anything else it needs to hydrate the app and
initialise the router -->
%sapper.scripts%
<!-- Sapper generates a <style> tag containing critical CSS
for the current page. CSS for the rest of the app is
lazily loaded when it precaches secondary pages -->
%sapper.styles%
<!-- This contains the contents of the <svelte:head> component, if
the current page has one -->
%sapper.head%
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
%sapper.base% %sapper.scripts% %sapper.styles% %sapper.head%
</head>
<body>
<!-- The application will be rendered inside this element,
because `src/client.js` references it -->
<div id="sapper">%sapper.html%</div>
</body>
</html>