Skip to content

Commit

Permalink
Fix documentation links. Closes #65.
Browse files Browse the repository at this point in the history
  • Loading branch information
andreasbm committed Nov 2, 2019
1 parent b3e9690 commit 2bbdce4
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 34 deletions.
2 changes: 1 addition & 1 deletion src/demo/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ export const GITHUB_URL = `https://github.com/andreasbm/weightless`;
export const NPM_URL = `https://www.npmjs.com/package/weightless`;
export const TWITTER_URL = `https://twitter.com/andreasmehlsen`;
export const PACKAGE_JSON_URL = `https://unpkg.com/weightless/package.json`;
export const DOCS_URL = (element: string) => `https://github.com/andreasbm/weightless/tree/master/src/lib/${element}`;
export const UNPGK_URL = `https://unpkg.com/weightless/umd/weightless.min.js`;
export const GOOGLE_FONT_URL = `https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto+Slab:300,400,700`;
export const MATERIAL_ICONS_URL = `https://fonts.googleapis.com/icon?family=Material+Icons`;
export const ALL_ELEMENTS_DEMO_URL = `https://codepen.io/andreasbm/pen/YMyBQd`;
export const GA_MEASUREMENT_ID = `UA-96179028-3`;

export interface IBullet {
title: string;
text: string;
Expand Down
9 changes: 4 additions & 5 deletions src/demo/pages/elements/elements-page.ts
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import "@a11y/skip-navigation";
import { ChangeStateEvent, IRoute, path, RouterSlot, RouterSlotEventKind } from "@appnest/web-router";
import { IRoute, path, RouterSlot, RouterSlotEventKind } from "@appnest/web-router";
import { customElement, html, LitElement, property, PropertyValues, query } from "lit-element";
import { nothing } from "lit-html";
import { repeat } from "lit-html/directives/repeat";
import "../../../lib/button/button";
import "../../../lib/icon/icon";
import "../../../lib/label/label";
import "../../../lib/title/title";
import "../../../lib/list-item/list-item";
import "../../../lib/title/title";
import { cssResult } from "../../../lib/util/css";
import { addListener } from "../../../lib/util/event";
import { DOCS_URL } from "../../constants";
import "../../elements/footer/footer-element";
import { getMainScrollContainer } from "../../main-scroll-target";
import { sharedStyles } from "../../style/shared";
Expand Down Expand Up @@ -81,12 +80,12 @@ export default class ElementsPage extends LitElement {
<wl-title id="title" level="1" nowrap>${this.currentRoute.data.title}</wl-title>
<wl-label>${this.currentRoute.data.desc}</wl-label>
</aside>
<a tabindex="-1" href="${DOCS_URL(this.currentRoute.data.docs || this.currentRoute.path)}" target="_blank" rel="noopener">
${this.currentRoute.data.docs != null ? html`<a tabindex="-1" href="${this.currentRoute.data.docs}" target="_blank" rel="noopener">
<wl-button id="open-docs" inverted flat>
<span>Documentation</span>
<wl-icon>open_in_new</wl-icon>
</wl-button>
</a>
</a>` : nothing}
</header>
` : ""}
<router-slot id="router-slot"></router-slot>
Expand Down
87 changes: 59 additions & 28 deletions src/demo/pages/elements/elements-routes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ function iconPath (name: string): string {
return `assets/element/${name}.svg`;
}

function weightlessDocsURL (element: string): string {
return `https://github.com/andreasbm/weightless/tree/master/src/lib/${element}`;
}

export interface IRouteData {
title: string;
desc: string;
Expand All @@ -18,7 +22,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Banner",
desc: "Display a non-interruptive message and related optional actions.",
img: iconPath("banner")
img: iconPath("banner"),
docs: weightlessDocsURL("banner")
}
},
{
Expand All @@ -27,7 +32,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Button",
desc: "Allow users to take actions, and make choices, with a single tap.",
img: iconPath("button")
img: iconPath("button"),
docs: weightlessDocsURL("button")
}
},
{
Expand All @@ -36,7 +42,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Card",
desc: "Group related content and action.",
img: iconPath("card")
img: iconPath("card"),
docs: weightlessDocsURL("card")
}
},
{
Expand All @@ -45,7 +52,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Checkbox",
desc: "Turn an option on or off.",
img: iconPath("checkbox")
img: iconPath("checkbox"),
docs: weightlessDocsURL("checkbox")
}
},
{
Expand All @@ -54,7 +62,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Dialog",
desc: "Highly interruptive messages.",
img: iconPath("dialog")
img: iconPath("dialog"),
docs: weightlessDocsURL("dialog")
}
},
{
Expand All @@ -63,7 +72,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Divider",
desc: "Thin line that groups content in lists and layouts.",
img: iconPath("divider")
img: iconPath("divider"),
docs: weightlessDocsURL("divider")
}
},
{
Expand All @@ -72,7 +82,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Expansion",
desc: "Provide an expandable details-summary view.",
img: iconPath("expansion")
img: iconPath("expansion"),
docs: weightlessDocsURL("expansion")
}
},
{
Expand All @@ -81,7 +92,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Form",
desc: "Interact with the native <form> element to validate the inputs.",
img: iconPath("form")
img: iconPath("form"),
docs: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form"
}
},
{
Expand All @@ -90,7 +102,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Icon",
desc: "Symbols for common actions and items.",
img: iconPath("icon")
img: iconPath("icon"),
docs: weightlessDocsURL("icon")
}
},
{
Expand All @@ -99,7 +112,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Label",
desc: "Make form elements more accessible.",
img: iconPath("label")
img: iconPath("label"),
docs: weightlessDocsURL("label")
}
},
{
Expand All @@ -108,7 +122,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "List Item",
desc: "Display an item in a list.",
img: iconPath("list")
img: iconPath("list"),
docs: weightlessDocsURL("list-item")
}
},
{
Expand All @@ -117,7 +132,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Navigation Bar",
desc: "Provide access to destinations in your app.",
img: iconPath("toolbar")
img: iconPath("toolbar"),
docs: weightlessDocsURL("nav")
}
},
{
Expand All @@ -126,7 +142,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Popover",
desc: "Contextual anchored elements.",
img: iconPath("menu")
img: iconPath("menu"),
docs: weightlessDocsURL("popover")
}
},
{
Expand All @@ -135,7 +152,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Progress Bar",
desc: "Fills a bar from 0% to 100%.",
img: iconPath("progress_bar")
img: iconPath("progress_bar"),
docs: weightlessDocsURL("progress-bar")
}
},
{
Expand All @@ -144,7 +162,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Progress Spinner",
desc: "Fills a circle from 0% to 100%.",
img: iconPath("progress_spinner")
img: iconPath("progress_spinner"),
docs: weightlessDocsURL("progress-spinner")
}
},
{
Expand All @@ -153,7 +172,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Radio",
desc: "Select one option from a set.",
img: iconPath("radio_button")
img: iconPath("radio_button"),
docs: weightlessDocsURL("radio")
}
},
{
Expand All @@ -162,7 +182,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Ripple",
desc: "Indicate touch actions.",
img: iconPath("ripple")
img: iconPath("ripple"),
docs: weightlessDocsURL("ripple")
}
},
{
Expand All @@ -171,7 +192,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Select",
desc: "Select one or more values from a set of options.",
img: iconPath("select")
img: iconPath("select"),
docs: weightlessDocsURL("select")
}
},
{
Expand All @@ -180,7 +202,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Slider",
desc: "Make selections from a range of values.",
img: iconPath("slider")
img: iconPath("slider"),
docs: weightlessDocsURL("slider")
}
},
{
Expand All @@ -189,7 +212,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Snackbar",
desc: "Provide brief messages at the bottom of the screen.",
img: iconPath("snackbar")
img: iconPath("snackbar"),
docs: weightlessDocsURL("snackbar")
}
},
{
Expand All @@ -198,7 +222,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Switch",
desc: "Turn an option on or off.",
img: iconPath("switch")
img: iconPath("switch"),
docs: weightlessDocsURL("switch")
}
},
{
Expand All @@ -207,7 +232,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Tabs",
desc: "Organize navigation between groups of content.",
img: iconPath("tabs")
img: iconPath("tabs"),
docs: weightlessDocsURL("tab")
}
},
{
Expand All @@ -216,7 +242,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Text",
desc: "Group text into paragraphs.",
img: iconPath("text")
img: iconPath("text"),
docs: weightlessDocsURL("text")
}
},
{
Expand All @@ -225,7 +252,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Textarea",
desc: "Multiline text fields.",
img: iconPath("textarea")
img: iconPath("textarea"),
docs: weightlessDocsURL("textarea")
}
},
{
Expand All @@ -234,7 +262,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Textfield",
desc: "Singleline text fields.",
img: iconPath("textfield")
img: iconPath("textfield"),
docs: weightlessDocsURL("textfield")
}
},
{
Expand All @@ -244,7 +273,7 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
title: "Theme",
desc: "Customize every element to fit your brand",
img: iconPath("theme"),
docs: "style"
docs: weightlessDocsURL("style")
}
},
{
Expand All @@ -253,7 +282,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Title",
desc: "Indicate the start of a new section.",
img: iconPath("typography")
img: iconPath("typography"),
docs: weightlessDocsURL("title")
}
},
{
Expand All @@ -262,7 +292,8 @@ export const COMPONENTS_ROUTES: IRoute<IRouteData>[] = [
data: {
title: "Tooltip",
desc: "Informative context related text",
img: iconPath("tooltip")
img: iconPath("tooltip"),
docs: weightlessDocsURL("tooltip")
}
},
{
Expand Down

0 comments on commit 2bbdce4

Please sign in to comment.