diff --git a/foomo/.gitignore b/foomo/.gitignore new file mode 100644 index 0000000..b2d6de3 --- /dev/null +++ b/foomo/.gitignore @@ -0,0 +1,20 @@ +# Dependencies +/node_modules + +# Production +/build + +# Generated files +.docusaurus +.cache-loader + +# Misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/foomo/README.md b/foomo/README.md new file mode 100644 index 0000000..55d0c3e --- /dev/null +++ b/foomo/README.md @@ -0,0 +1,33 @@ +# Website + +This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator. + +### Installation + +``` +$ yarn +``` + +### Local Development + +``` +$ yarn start +``` + +This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server. + +### Build + +``` +$ yarn build +``` + +This command generates static content into the `build` directory and can be served using any static contents hosting service. + +### Deployment + +``` +$ GIT_USER= USE_SSH=true yarn deploy +``` + +If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch. diff --git a/foomo/babel.config.js b/foomo/babel.config.js new file mode 100644 index 0000000..e00595d --- /dev/null +++ b/foomo/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: [require.resolve('@docusaurus/core/lib/babel/preset')], +}; diff --git a/foomo/blog/2021-11-12-welcome/blast-from-the-past.png b/foomo/blog/2021-11-12-welcome/blast-from-the-past.png new file mode 100644 index 0000000..254e064 Binary files /dev/null and b/foomo/blog/2021-11-12-welcome/blast-from-the-past.png differ diff --git a/foomo/blog/2021-11-12-welcome/index.md b/foomo/blog/2021-11-12-welcome/index.md new file mode 100644 index 0000000..bd2f8e6 --- /dev/null +++ b/foomo/blog/2021-11-12-welcome/index.md @@ -0,0 +1,16 @@ +--- +slug: welcome-back-2021 +authors: [ jan ] +tags: [ foomo ] +--- + +# Relaunching foomo.org + +A few years ago we abandoned the previous version of https://www.foomo.org as we did not want to maintain the old wordpress installation and the project was only living in README.md in the repos living under https://www.github.com/foomo . + +As things have grown over time we have decided to re-launch a website / cross project documentation. + +So welcome back and enjoy the view to the past: + +![blast from the past](blast-from-the-past.png) + diff --git a/foomo/blog/authors.yml b/foomo/blog/authors.yml new file mode 100644 index 0000000..cb41ed0 --- /dev/null +++ b/foomo/blog/authors.yml @@ -0,0 +1,5 @@ +jan: + name: Jan Halfar + title: foomo maintainer + url: https://github.com/janhalfar + image_url: https://github.com/janhalfar.png diff --git a/foomo/docs/backend/gograpple.mdx b/foomo/docs/backend/gograpple.mdx new file mode 100644 index 0000000..ab2da9d --- /dev/null +++ b/foomo/docs/backend/gograpple.mdx @@ -0,0 +1,6 @@ + +import { Miro } from '../../src/components/Miro'; + +# Gograpple + + diff --git a/foomo/docs/backend/intro.mdx b/foomo/docs/backend/intro.mdx new file mode 100644 index 0000000..4df2efa --- /dev/null +++ b/foomo/docs/backend/intro.mdx @@ -0,0 +1,14 @@ +--- +sidebar_label: Intro +sidebar_position: 1 +--- +import { GoPlayground } from '../../src/components/GoPlayground'; + +# building backend services with Go and foomo + + + + \ No newline at end of file diff --git a/foomo/docs/backend/setup.md b/foomo/docs/backend/setup.md new file mode 100644 index 0000000..b27199c --- /dev/null +++ b/foomo/docs/backend/setup.md @@ -0,0 +1,6 @@ +--- +sidebar_label: Setup +sidebar_position: 2 +--- + +# setup your workspace \ No newline at end of file diff --git a/foomo/docs/devops/intro.md b/foomo/docs/devops/intro.md new file mode 100644 index 0000000..1115dd8 --- /dev/null +++ b/foomo/docs/devops/intro.md @@ -0,0 +1,2 @@ +# How we run applications in the cloud + diff --git a/foomo/docs/frontend/intro.md b/foomo/docs/frontend/intro.md new file mode 100644 index 0000000..e1621b0 --- /dev/null +++ b/foomo/docs/frontend/intro.md @@ -0,0 +1,62 @@ +--- +id: intro +sidebar_label: Intro +sidebar_position: 1 +--- +# Introduction + +Let me share a few thoughts on frontend development from our journey [@bestbytes](https://www.bestbytes.com) the company behind [foomo.org](https://www.foomo.org). + +Web development has been a wild ride since the beginning of the www in the mid 1990s. Today we take it as granted, that the default way to build applications is with web technologies. + +Not too long ago this seemed absurd, since browsers were meant to share scientific research papers and therefore were extremely limited in their capabilities. + +It was the era of experimentation, that turned the web into the application runtime, which it is today. Plugins like Macromedias flash inspired the rich APIs we can use today, when building web applications. + +## A little history + +The current [stack](stack) is the result of a more than 20 year journey. + +### Last millenium + +The open source eco system was in its infancy, there was no github (is that really open source as it should be 🤔), there was not even git, there were no real web frameworks and agile methodologies were an exotic nerd topic. + +Browsers would sometimes render things in a recognisable way and a table was the way to render your layout. **Reliable interactivity could only result from a server round trip and calling JavaScript had a good chance to crash your browser**. + +Security in browsers was a complete nightmare, it was a time, when one tab could access anothers tabs dom 🤯 + +### Early 2000s + +As Microsoft had won the browser wars, we were stuck with IE 6 and like others we were building web applications with the limited resources we had. JavaScript frameworks were still + +### The plugin era / FLASH + +As browsers were slow, buggy and inconsistent FLASH presented this amazing way to build highly interactive websites. It was the time of loaders, which people accepted, because amazing experiences awaited them: animated vector graphics (artists went wild ...), games, the first videos, client server communications, sockets and a canvas API. + +Also ActionScript especially AS3 felt so superior to JavaScript at the time. + +### Flex + +Flex used the capabilities of the flash player to provide a fantastic developer experience to build RIAs (rich internet applications). The resulting productivity, application performance and features were unparalled in the JavaScript eco system until long after the demise of the flash player. + +### After "thoughts on flash" + +After the release of the iPhone and the beginning of the walled garden era flash was one of the initial victims. Just for the record, I definitely prefer an independent eco system, which the web is at least to a certain extent, but it certainly was not noble motives, that were driving Apple when pushing for HTML5 in their [thoughts on flash](https://web.archive.org/web/20170615060422/https://www.apple.com/hotnews/thoughts-on-flash/). + +### HTML5 + +At its arrival HTML5 could not deliver on the many promises, that were made around it. Browser compatibilty was a nightmare, JavaScript performance was poor, the eco system was in its infancy. + +As we left the flash eco system we stopped by RequireJS and were using [BACKBONE.JS](https://backbonejs.org/) as we felt extremely burnt by Adobe, after they had dropped their whole eco system like a hot potatoe once Apple had declared the end of flash. + +### TypeScript and the wild framework years + +Despite the fact, that we were very sceptic about trusting large vendors, we adopted TypeScript right after it was initially released and we have remained happy users of it until the present day. + +The early years of the Node.js community were extremely wild, there was jokes about the number of frameworks released per day. The number of languages that compiled to JavaScript exploded and it just seemed impossible to keep up with the changing environment. + +### 2020s + +As we wake up today as frontend developers, we do not expect, that we will keep on doing things as we do them today until the end of our careers, but we at least see a chance, that the code base of a project will not be outdated with delivery of a MVP. + + diff --git a/foomo/docs/frontend/setup.md b/foomo/docs/frontend/setup.md new file mode 100644 index 0000000..2029360 --- /dev/null +++ b/foomo/docs/frontend/setup.md @@ -0,0 +1,31 @@ +--- +title: Setup +sidebar_position: 2 +--- +# Frontend setup + +How to setup your machine + +```jsx live +function Clock(props) { + + const [date, setDate] = useState(new Date()); + + useEffect(() => { + var timerID = setInterval(() => tick(), 1000); + return function cleanup() { + clearInterval(timerID); + }; + }); + + function tick() { + setDate(new Date()); + } + + return ( +
+

It is {date.toLocaleTimeString()}.

+
+ ); +} +``` diff --git a/foomo/docs/frontend/stack.md b/foomo/docs/frontend/stack.md new file mode 100644 index 0000000..4fe19c0 --- /dev/null +++ b/foomo/docs/frontend/stack.md @@ -0,0 +1,14 @@ +--- +title: Stack +sidebar_position: 3 +tags: + - frontend + - overview +--- +# Frontend Stack + +## TypeScript + +## React + +## gotsrpc \ No newline at end of file diff --git a/foomo/docusaurus.config.js b/foomo/docusaurus.config.js new file mode 100644 index 0000000..a9dfb4d --- /dev/null +++ b/foomo/docusaurus.config.js @@ -0,0 +1,142 @@ +// @ts-check +// Note: type annotations allow type checking and IDEs autocompletion + +// const lightCodeTheme = require('prism-react-renderer/themes/github'); +// const darkCodeTheme = require('prism-react-renderer/themes/dracula'); + +/** @type {import('@docusaurus/types').Config} */ +const config = { + title: 'foomo project docs', + tagline: 'stuff we wrote, because nobody else wanted to', + url: 'https://foomo.org', + baseUrl: '/', + onBrokenLinks: 'throw', + onBrokenMarkdownLinks: 'warn', + favicon: 'img/favicon.ico', + organizationName: 'bestbytes', // Usually your GitHub org/user name. + projectName: 'foomo', // Usually your repo name. + + + presets: [ + [ + '@docusaurus/preset-classic', + /** @type {import('@docusaurus/preset-classic').Options} */ + ({ + docs: { + sidebarPath: require.resolve('./sidebars.js'), + sidebarCollapsed: false, + // Please change this to your repo. + // editUrl: 'https://github.com/facebook/docusaurus/edit/main/website/', + }, + blog: { + showReadingTime: false, + // Please change this to your repo. + // editUrl: + // 'https://github.com/facebook/docusaurus/edit/main/website/blog/', + }, + pages: { + + }, + theme: { + customCss: require.resolve('./src/css/custom.css'), + }, + }), + ], + ], + themes: ['@docusaurus/theme-live-codeblock'], + themeConfig: + /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ + ({ + colorMode: { + defaultMode: 'light', + disableSwitch: true, + + }, + navbar: { + title: 'foomo', + // logo: { + // alt: 'My Site Logo', + // src: 'img/logo.svg', + // }, + items: [ + { + type: 'doc', + docId: 'frontend/intro', + position: 'left', + label: 'Frontend', + + }, + { + type: 'doc', + docId: 'backend/intro', + position: 'left', + label: 'Backend', + }, + { + type: 'doc', + docId: 'devops/intro', + position: 'left', + label: 'DevOps', + }, + {to: '/blog', label: 'Blog', position: 'right'}, + // { + // href: 'https://github.com/facebook/docusaurus', + // label: 'GitHub', + // position: 'right', + // }, + ], + }, + footer: { + style: 'light', + links: [ + { + title: 'legal', + items: [ + { + label: 'Imprint', + to: '/etc/imprint', + }, + ], + }, + // { + // title: 'Community', + // items: [ + // { + // label: 'Stack Overflow', + // href: 'https://stackoverflow.com/questions/tagged/docusaurus', + // }, + // { + // label: 'Discord', + // href: 'https://discordapp.com/invite/docusaurus', + // }, + // { + // label: 'Twitter', + // href: 'https://twitter.com/docusaurus', + // }, + // ], + // }, + // { + // title: 'More', + // items: [ + // { + // label: 'Blog', + // to: '/blog', + // }, + // { + // label: 'GitHub', + // href: 'https://github.com/facebook/docusaurus', + // }, + // ], + // }, + ], + copyright: `© ${new Date().getFullYear()} bestbytes`, + + }, + // prism: { + // theme: lightCodeTheme, + // darkTheme: darkCodeTheme, + // }, + }), +}; + +module.exports = config; diff --git a/foomo/package.json b/foomo/package.json new file mode 100644 index 0000000..b5172a7 --- /dev/null +++ b/foomo/package.json @@ -0,0 +1,47 @@ +{ + "name": "foomo", + "version": "0.0.0", + "private": true, + "scripts": { + "docusaurus": "docusaurus", + "start": "docusaurus start", + "build": "docusaurus build", + "swizzle": "docusaurus swizzle", + "deploy": "docusaurus deploy", + "clear": "docusaurus clear", + "serve": "docusaurus serve", + "write-translations": "docusaurus write-translations", + "write-heading-ids": "docusaurus write-heading-ids", + "typecheck": "tsc" + }, + "dependencies": { + "@docusaurus/core": "2.0.0-beta.9", + "@docusaurus/preset-classic": "2.0.0-beta.9", + "@docusaurus/theme-live-codeblock": "^2.0.0-beta.9", + "@mdx-js/react": "^1.6.21", + "@svgr/webpack": "^5.5.0", + "clsx": "^1.1.1", + "file-loader": "^6.2.0", + "prism-react-renderer": "^1.2.1", + "react": "^17.0.1", + "react-dom": "^17.0.1", + "url-loader": "^4.1.1" + }, + "devDependencies": { + "@docusaurus/module-type-aliases": "2.0.0-beta.9", + "@tsconfig/docusaurus": "^1.0.4", + "typescript": "^4.3.5" + }, + "browserslist": { + "production": [ + ">0.5%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/foomo/sidebars.js b/foomo/sidebars.js new file mode 100644 index 0000000..c95db3b --- /dev/null +++ b/foomo/sidebars.js @@ -0,0 +1,35 @@ +/** + * Creating a sidebar enables you to: + - create an ordered group of docs + - render a sidebar for each doc of that group + - provide next/previous navigation + + The sidebars can be generated from the filesystem, or explicitly defined here. + + Create as many sidebars as you want. + */ + +// @ts-check + +/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ +const sidebars = { + // By default, Docusaurus generates a sidebar from the docs folder structure + backendSidebar: [{type: 'autogenerated', dirName: 'backend'}], + frontendSidebar: [{type: 'autogenerated', dirName: 'frontend'}], + toolsSidebar: [{type: 'autogenerated', dirName: 'tools'}], + //tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], + //backendSidebar: [{type: 'autogenerated', dirName: './backend'}], + + // But you can create a sidebar manually + /* + tutorialSidebar: [ + { + type: 'category', + label: 'Tutorial', + items: ['hello'], + }, + ], + */ +}; + +module.exports = sidebars; diff --git a/foomo/src/components/GoPlayground.tsx b/foomo/src/components/GoPlayground.tsx new file mode 100644 index 0000000..7470889 --- /dev/null +++ b/foomo/src/components/GoPlayground.tsx @@ -0,0 +1,16 @@ +import React from "react"; +import { Iframe } from "./Iframe"; +import { IsItCool } from "./IsItCool"; + +//src={"https://play.golang.org/p/" + props.id} + +export const GoPlayground = (props: { id: string; proportion: number }) => { + return ( + + + +); diff --git a/foomo/src/components/IsItCool.tsx b/foomo/src/components/IsItCool.tsx new file mode 100644 index 0000000..09c7b01 --- /dev/null +++ b/foomo/src/components/IsItCool.tsx @@ -0,0 +1,29 @@ +import React, { useState } from "react"; + +export const IsItCool = (props: { + children: any; + topic: string; + id: string; +}) => { + let defaultIsCool = false; + if (localStorage.getItem(props.id) == "yes") { + defaultIsCool = true; + } + const [isCool, setIsCool] = useState(defaultIsCool); + if (!isCool) { + return ( +
+ +
+ ); + } + return props.children; +}; diff --git a/foomo/src/components/Miro.tsx b/foomo/src/components/Miro.tsx new file mode 100644 index 0000000..c56acd0 --- /dev/null +++ b/foomo/src/components/Miro.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import { Iframe } from "./Iframe"; +import { IsItCool } from "./IsItCool"; + +export const Miro = (props: { id: string; proportion: number }) => ( + +