2 | 
3 |
${this.content.substring(0, 200)}...
42 | 43 | `; 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /examples/application-demo/src/components/SideNav.ts: -------------------------------------------------------------------------------- 1 | import { css, html, LitElement } from "lit"; 2 | import { customElement } from "lit/decorators/custom-element.js"; 3 | import "./SideNavItem"; 4 | 5 | @customElement("side-nav") 6 | export class SideNav extends LitElement { 7 | 8 | 9 | static get styles() { 10 | return css` 11 | :host { 12 | display: flex; 13 | flex-direction: column; 14 | height: 100vh; 15 | width: 250px; 16 | background: grey; 17 | padding: 1rem 0; 18 | background: #2f2f2f; 19 | box-sizing: border-box; 20 | } 21 | 22 | .logo { 23 | display: flex; 24 | width: 100%; 25 | height: 100px; 26 | align-items: center; 27 | color: #FFF; 28 | font-size: 22px; 29 | font-weight: bold; 30 | margin-bottom: 6rem; 31 | padding: 0 1rem; 32 | } 33 | 34 | .logo img { 35 | height: 100px; 36 | filter: invert(1); 37 | } 38 | `; 39 | } 40 | 41 | render() { 42 | return html` 43 |
45 |
46 | About
`; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /examples/application-demo/src/views/DataPage.ts: -------------------------------------------------------------------------------- 1 | import { css, html, LitElement } from "lit"; 2 | import { customElement } from "lit/decorators/custom-element.js"; 3 | import "../components/ItemList"; 4 | import "../components/ItemListEntry"; 5 | 6 | @customElement("data-page") 7 | export class DataPage extends LitElement { 8 | 9 | firstUpdated() { 10 | this._getRepositoryData(); 11 | } 12 | 13 | async _getRepositoryData() { 14 | // Create a 3x1 grid with fields: 15 | // - Issues 16 | // - Pull Requests 17 | // - Commits 18 | // 19 | // ISSUES | PULL REQUESTS | COMMITS 20 | // 21 | // Under them, create a 2x1 grid, left side populates with a list of chosen category. 22 | // When clicked on a list item in the category, the right side populates with the data of the chosen item 23 | } 24 | 25 | render() { 26 | return html` 27 |${this.commit.commit.message}
30 | 31 |Created: ${new Date(this.commit.commit.committer.date).toUTCString()}
32 | 33 |No commits found
` : ''} 27 |This is the data page. On this page you can browse data about the Simplr Router project, provided by the GitHub API
10 |The routing handles different child views inside this view, and displays the needed parts dynamically
11 |This content is loaded as a slotted element of the above view, and will dynamically change when you navigate with the buttons above
12 | ` 13 | } 14 | 15 | static get styles() { 16 | return css` 17 | :host { 18 | padding-top: 4rem; 19 | } 20 | ` 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /examples/application-demo/src/views/data-views/DataPageIssuePanel.ts: -------------------------------------------------------------------------------- 1 | import { css, html, LitElement } from "lit"; 2 | import { customElement } from "lit/decorators/custom-element.js"; 3 | import { property } from "lit/decorators/property.js"; 4 | import { getIssue } from "../../service/GitHub"; 5 | 6 | @customElement("data-page-issue-panel") 7 | export class DataPageIssuePanel extends LitElement { 8 | @property({ type: Number }) 9 | issueNumber: number = 0; 10 | 11 | @property({ type: Object }) 12 | issue: any | undefined; 13 | 14 | firstUpdated() { 15 | this._getIssueData(); 16 | } 17 | 18 | private async _getIssueData() { 19 | if (!this.issueNumber) return; 20 | 21 | this.issue = await getIssue(this.issueNumber); 22 | } 23 | 24 | render() { 25 | if (!this.issue) return html``; 26 | 27 | return html` 28 |${this.issue.body}
30 | 31 |Created: ${this.issue.created_at}
32 |Last updated: ${this.issue.updated_at}
33 | 34 | Link to issue 35 | `; 36 | } 37 | 38 | static get styles() { 39 | return css` 40 | :host { 41 | display: flex; 42 | flex-direction: column; 43 | } 44 | ` 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /examples/application-demo/src/views/data-views/DataPageIssues.ts: -------------------------------------------------------------------------------- 1 | import { css, html, LitElement } from "lit"; 2 | import { customElement } from "lit/decorators/custom-element.js"; 3 | import { property } from "lit/decorators/property.js"; 4 | import { getIssues } from "../../service/GitHub"; 5 | 6 | @customElement("data-page-issues") 7 | export class DataPageIssues extends LitElement { 8 | @property({ type: Object }) 9 | issues: ArrayNo issues found
` : ''} 27 |${this.pullRequest.body}
30 | 31 |Created: ${this.pullRequest.created_at}
32 |Last updated: ${this.pullRequest.updated_at}
33 | 34 | Link to pull request 35 | `; 36 | } 37 | 38 | static get styles() { 39 | return css` 40 | :host { 41 | display: flex; 42 | flex-direction: column; 43 | } 44 | ` 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /examples/application-demo/src/views/data-views/DataPagePullRequests.ts: -------------------------------------------------------------------------------- 1 | import { css, html, LitElement } from "lit"; 2 | import { customElement } from "lit/decorators/custom-element.js"; 3 | import { property } from "lit/decorators/property.js"; 4 | import { getPullRequests } from "../../service/GitHub"; 5 | 6 | @customElement("data-page-pull-requests") 7 | export class DataPagePullRequests extends LitElement { 8 | @property({ type: Object }) 9 | pullRequests: ArrayNo pull-requests found
` : ''} 27 |
2 |
3 |
The parameter from the URL is bound to the "id" property of this view
28 |The current value is: ${this.id}
29 | 30 |
2 |
3 |
You do not have the authority to access this page
` 7 | } 8 | } 9 | 10 | customElements.define("forbidden-view", ForbiddenView); 11 | -------------------------------------------------------------------------------- /examples/router-demo/src/not-found-view.js: -------------------------------------------------------------------------------- 1 | import { html, LitElement } from "lit"; 2 | 3 | export class NotFoundView extends LitElement { 4 | 5 | render() { 6 | return html`The view you tried to access was not found
` 7 | } 8 | } 9 | 10 | customElements.define("not-found-view", NotFoundView); 11 | -------------------------------------------------------------------------------- /examples/router-demo/src/param-example.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html, css } from "lit"; 2 | import { getBreadcrumbs } from "@simplr-wc/router"; 3 | 4 | const logo = new URL("../assets/open-wc-logo.svg", import.meta.url).href; 5 | 6 | export class ParamExample extends LitElement { 7 | static get properties() { 8 | return { 9 | title: { type: String }, 10 | }; 11 | } 12 | 13 | static get styles() { 14 | return css` 15 | :host { 16 | min-height: 100vh; 17 | display: flex; 18 | flex-direction: column; 19 | align-items: center; 20 | justify-content: flex-start; 21 | font-size: calc(10px + 2vmin); 22 | color: #1a2b42; 23 | max-width: 960px; 24 | margin: 0 auto; 25 | text-align: center; 26 | background-color: var(--router-demo-background-color); 27 | } 28 | 29 | main { 30 | flex-grow: 1; 31 | } 32 | 33 | .logo { 34 | margin-top: 36px; 35 | animation: app-logo-spin infinite 20s linear; 36 | } 37 | 38 | @keyframes app-logo-spin { 39 | from { 40 | transform: rotate(0deg); 41 | } 42 | to { 43 | transform: rotate(360deg); 44 | } 45 | } 46 | 47 | .app-footer { 48 | font-size: calc(12px + 0.5vmin); 49 | align-items: center; 50 | } 51 | 52 | .app-footer a { 53 | margin-left: 5px; 54 | } 55 | `; 56 | } 57 | 58 | constructor() { 59 | super(); 60 | this.title = "Welcome to the param example"; 61 | } 62 | 63 | renderBreadcrumbs() { 64 | const breadcrumbs = getBreadcrumbs(); 65 | return html`${breadcrumbs.map( 66 | (bc) => 67 | html`${bc.name}${bc.params 69 | ? html`(Params: ${JSON.stringify(bc.params)})` 70 | : ""} 72 | / ` 73 | )}`; 74 | } 75 | 76 | render() { 77 | return html` 78 |83 | This parameter was acquired from the URL: ${this.id}. Try changing it 84 | and see it change here too. 85 |
86 | 87 |You can find the application breadcrumbs below:
88 | ${this.renderBreadcrumbs()} 89 |Params from url:
83 |ID: ${this.id}
84 |word: ${this.word}
85 | 86 |You can find the application breadcrumbs below:
87 | ${this.renderBreadcrumbs()} 88 |Params from url:
83 |ID: ${this.id}
84 |name: ${this.name}
85 | 86 |You can find the application breadcrumbs below:
87 | ${this.renderBreadcrumbs()} 88 |You can find the application breadcrumbs below:
77 | ${this.renderBreadcrumbs()} 78 | `; 79 | } 80 | } 81 | 82 | customElements.define("prevent-example", PreventExample); 83 | -------------------------------------------------------------------------------- /examples/router-demo/src/regular-top-bar.js: -------------------------------------------------------------------------------- 1 | import { html, LitElement } from "lit"; 2 | 3 | export class RegularTopBar extends LitElement { 4 | render() { 5 | return html``; 6 | } 7 | } 8 | 9 | customElements.define("regular-top-bar", RegularTopBar); 10 | -------------------------------------------------------------------------------- /examples/router-demo/src/special-top-bar.js: -------------------------------------------------------------------------------- 1 | import { html, LitElement } from "lit"; 2 | 3 | export class SpecialTopBar extends LitElement { 4 | render() { 5 | return html``; 6 | } 7 | } 8 | 9 | customElements.define("special-top-bar", SpecialTopBar); 10 | -------------------------------------------------------------------------------- /examples/router-demo/src/user-add-view.js: -------------------------------------------------------------------------------- 1 | import { LitElement, html } from "lit"; 2 | 3 | export class UserAddView extends LitElement { 4 | static get properties() { 5 | return { 6 | userId: { type: Number }, 7 | }; 8 | } 9 | 10 | render() { 11 | return html` 12 |You can't add any more users at the moment
14 | Go back 15 |Editing users is not permitted at the moment
14 |
2 |
3 |
80 | This parameter was acquired from the URL: ${this.id}. Try changing it 81 | and see it change here too. 82 |
83 | 84 |You can find the application breadcrumbs below:
85 | ${this.renderBreadcrumbs()} 86 |You can find the application breadcrumbs below:
76 | ${this.renderBreadcrumbs()} 77 |You can find the application breadcrumbs below:
59 |
2 |
3 | {% if rocketLaunch.homeLayout === 'background' %}
4 | 
5 | {% endif %}
6 |
7 | {{slogan}}
10 | 11 |
4 | {{ site.name }}
5 |
6 | {% else %}
7 | {% include 'partials/_shared/logoLink.njk' %}
8 | {% endif %}
9 |
--------------------------------------------------------------------------------
/rocket-docs/docs/_includes/partials/_shared/logoLink.njk:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ site.name }}
4 |
5 |
--------------------------------------------------------------------------------
/rocket-docs/docs/_includes/partials/header.njk:
--------------------------------------------------------------------------------
1 |