Scaffold

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,3 @@
+{
+  "extends": "./node_modules/@kaliber/build/.eslintrc"
+}

.gitignore

@@ -0,0 +1,8 @@
+*.DS_Store
+*.log
+*.sublime-workspace
+config/local.js
+node_modules
+sketch
+target
+.babelcache

.stylelintrc

@@ -0,0 +1,4 @@
+{
+  "ignoreFiles": ["node_modules/**/*", "**/*.js", "**/*.svg", "**/*.md"],
+  "extends": "./node_modules/@kaliber/build/.stylelintrc"
+}

config/default.js

@@ -0,0 +1,9 @@
+module.exports = {
+  /*
+    Warning: do not use this to set values that differ in each environment,
+    only use this for configuration that is the same across all config environments
+  */
+  rollbar: {
+    post_client_item: 'get an access token at rollbar.com',
+  }
+}

config/dev.js

@@ -0,0 +1,4 @@
+module.exports = {
+  client: {
+  }
+}

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "workshop-forces-and-vectors",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/peeke/workshop-forces-and-vectors.git",
+  "author": "Peeke Kuepers <[email protected]>",
+  "license": "MIT",
+  "dependencies": {
+    "@kaliber/build": "^0.0.126"
+  },
+  "scripts": {
+    "start": "npm-run-all --parallel watch serve.dev",
+    "watch": "CONFIG_ENV=dev kaliber-watch",
+    "build": "NODE_ENV=production kaliber-build",
+    "serve": "kaliber-serve",
+    "serve.dev": "PORT=8000 CONFIG_ENV=dev kaliber-serve",
+    "lint": "npm-run-all --serial lint.javascript lint.styles",
+    "lint.javascript": "eslint -c .eslintrc --ignore-path .gitignore './**/*.js'",
+    "lint.styles": "stylelint --config .stylelintrc --ignore-path .gitignore './**/*.css'"
+  }
+}

scripts/readme.md

@@ -0,0 +1 @@
+Scripts for the build or developer are placed here.

services/readme.md

@@ -0,0 +1 @@
+Place any service related code here

src/App.js

@@ -0,0 +1,6 @@
+import { Home } from '/pages/Home'
+
+export default function App({ config }) {
+  // contexts or a router might be set up here
+  return <Home />
+}

src/components/buildingBlocks/Link.css

@@ -0,0 +1,13 @@
+.componentBase {
+  color: currentColor;
+  text-decoration: none;
+}
+
+.componentText {
+  text-decoration: underline;
+
+  &:hover,
+  &:focus { text-decoration: none; }
+}
+
+.componentBlock { display: block; }

src/components/buildingBlocks/Link.js

@@ -0,0 +1,16 @@
+import styles from './Link.css'
+
+export { LinkBase as Link }
+
+export function LinkText({ to, children, target = undefined, rel = undefined }) {
+  return <LinkBase className={styles.componentText} {...{ to, children, target, rel }} />
+}
+
+export function LinkBlock({ to, children, target = undefined, rel = undefined }) {
+  return <LinkBase className={styles.componentBlock} {...{ to, children, target, rel }} />
+}
+
+function LinkBase({ to, children, className, target, rel }) {
+  const safeRel = target === '_blank' ? `${rel || ''} noopener noreferrer` : rel
+  return <a href={to} rel={safeRel} className={cx(styles.componentBase, className)} {...{ target }}>{children}</a>
+}

src/components/home/Intro.css

@@ -0,0 +1,12 @@
+.component {
+  padding: 20px;
+  border-radius: 4px;
+  border: 1px solid var(--color-gray-80);
+  background-color: var(--color-gray-10);
+  @media (--viewport-lg) { padding: 40px; }
+
+  & > *:not(:last-child) { margin-bottom: 40px; }
+}
+
+.logoWrapper { text-align: center; }
+.componentLink { color: hotpink; }

src/components/home/Intro.js

@@ -0,0 +1,16 @@
+import { LinkText } from '/components/buildingBlocks/Link'
+import styles from './Intro.css'
+import logo from './logo.svg'
+
+export function Intro({ children }) {
+  return (
+    <div className={styles.component}>
+      <div className={styles.logoWrapper}><img src={logo} alt='Kaliber logo' /></div>
+      <div className={styles.body}>{children}</div>
+    </div>
+  )
+}
+
+export function IntroLink({ to, children, target }) {
+  return <span className={styles.componentLink}><LinkText {...{ to, children, target }} /></span>
+}

src/components/home/pageOnly/ContentContainer.js

@@ -0,0 +1 @@
+export { CenteredContainer as ContentContainer } from '/components/pageOnly/CenteredContainer'

src/components/home/pageOnly/Section.css

@@ -0,0 +1,4 @@
+.component {
+  background-color: var(--color-gray-70);
+  padding: 40px 0;
+}

src/components/home/pageOnly/Section.js

@@ -0,0 +1,5 @@
+import styles from './Section.css'
+
+export function Section({ children }) {
+  return <section className={styles.component}>{children}</section>
+}

src/components/pageOnly/CenteredContainer.css

@@ -0,0 +1,12 @@
+.component {
+  display: flex;
+  justify-content: center;
+  padding-left: 20px;
+  padding-right: 20px;
+
+  & > * { width: 100%; }
+
+  & > .sm { max-width: var(--container-sm); }
+  & > .md { max-width: var(--container-md); }
+  & > .lg { max-width: var(--container-lg); }
+}

src/components/pageOnly/CenteredContainer.js

@@ -0,0 +1,15 @@
+import { oneOf, node } from 'prop-types'
+import styles from './CenteredContainer.css'
+
+CenteredContainer.propTypes = {
+  size: oneOf(['sm', 'md', 'lg']).isRequired,
+  children: node
+}
+
+export function CenteredContainer({ children, size }) {
+  return (
+    <div className={styles.component}>
+      <div className={styles[size]}>{children}</div>
+    </div>
+  )
+}

src/cssGlobal/color.css

@@ -0,0 +1,6 @@
+:root {
+  --color-gray-10: #f8f8f8;
+  --color-gray-70: #4d4d4d;
+  --color-gray-80: #1e1e1e;
+  --color-gray-90: #1c1c1c;
+}

src/cssGlobal/container.css

@@ -0,0 +1,5 @@
+:root {
+  --container-sm: 480px;
+  --container-md: 768px;
+  --container-lg: 1024px;
+}

src/cssGlobal/media.css

@@ -0,0 +1,9 @@
+:export {
+  breakpointSm: 480px;
+  breakpointMd: 768px;
+  breakpointLg: 1024px;
+}
+
+@custom-media --viewport-sm screen and (min-width: 480px);
+@custom-media --viewport-md screen and (min-width: 768px);
+@custom-media --viewport-lg screen and (min-width: 1024px);

src/cssGlobal/type.css

@@ -0,0 +1,6 @@
+:root {
+  --font-family-base: 'Barlow', sans-serif;
+  --font-weight-base-400: 400;
+
+  --font-size-md: 18px;
+}

src/index.css

@@ -0,0 +1,15 @@
+*,
+*::before,
+*::after { box-sizing: inherit; }
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  color: var(--color-gray-90);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-base-400);
+  line-height: 1.7;
+}

src/index.html.js

@@ -0,0 +1,39 @@
+import '/reset.css'
+import '/index.css'
+import stylesheet from '@kaliber/build/lib/stylesheet'
+import javascript from '@kaliber/build/lib/javascript'
+import polyfill from '@kaliber/build/lib/polyfill'
+import rollbar from '@kaliber/build/lib/rollbar'
+import config from '@kaliber/config'
+import App from '/App?universal'
+
+Index.routes = {
+  match(location) {
+    const path = location.pathname
+    if (path === '/') return { status: 200 }
+    else return { status: 404, data: { notFound: true } }
+  }
+}
+
+export default function Index({ location, data }) {
+  return (
+    <html lang='nl'>
+      <head>
+        <meta charSet='utf-8' />
+        <title>@kaliber/build</title>
+        <meta name='description' content='' />
+        <meta name='viewport' content='width=device-width, initial-scale=1' />
+        {stylesheet}
+        {rollbar({ accessToken: config.rollbar.post_client_item })}
+        {polyfill(['default', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019'])}
+        {javascript}
+      </head>
+      <body>
+        {data && data.notFound
+          ? 'Not found'
+          : <App config={config.client} />
+        }
+      </body>
+    </html>
+  )
+}

src/machinery/readme.md

@@ -0,0 +1 @@
+Files in this directory should not have any domain specific information. Everything here will be a potential library.

src/pages/Home.js

@@ -0,0 +1,16 @@
+import { Intro, IntroLink } from '/components/home/Intro'
+import { Section } from '/components/home/pageOnly/Section'
+import { ContentContainer } from '/components/home/pageOnly/ContentContainer'
+
+export function Home() {
+  return (
+    <Section>
+      <ContentContainer size='md'>
+        <Intro>
+          <p>@kaliber/build</p>
+          <IntroLink to='https://kaliberjs.github.io/build/' target='_blank'>Documentatie</IntroLink>
+        </Intro>
+      </ContentContainer>
+    </Section>
+  )
+}

src/reset.css

@@ -0,0 +1,26 @@
+*,
+*::before,
+*::after {
+  margin: 0;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  &:not(:last-child) { padding-bottom: 0.8333em; }
+}
+
+address { font-style: normal; }
+
+button {
+  background-color: transparent;
+  padding: 0;
+  border: none;
+  cursor: pointer;
+  color: currentColor;
+}

src/robots.txt

@@ -0,0 +1,3 @@
+# Allow crawling of all content
+User-agent: *
+Disallow:

tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "typeAcquisition": {
+    "enable": true
+  },
+  "include": ["./src/**/*", "./node_modules/**.*", "./types/**/*"],
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "lib": ["dom", "esnext"],
+    "jsx": "react",
+    "baseUrl": ".",
+    "allowJs": true,
+    "checkJs": true,
+    "noEmit": true,
+    "paths": {
+      "/*?universal": ["src/*"],
+      "/*": ["src/*"]
+    },
+    "downlevelIteration": true
+  }
+}

types/global.d.ts

@@ -0,0 +1,11 @@
+declare const React: typeof import('react')
+declare const cx: typeof import('classnames')
+
+declare module '*.css' {
+  const x: { [any: string]: string }
+  export default x
+}
+
+interface Window {
+  'Rollbar': import('rollbar')
+}