chore: Add vis.gl contents to the openvisualization website

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

app/page.tsx

@@ -1,4 +1,8 @@
 import { createClient } from '@/lib/prismic';
+import { createMetadata } from '@/lib/metadata';
+import type { Metadata } from 'next';
+import type { ReactElement } from 'react';
+
 import Hero from '@/components/hero';
 import Logos from '@/components/logos';
 import About from '@/components/about';
@@ -8,9 +12,14 @@ import Footer from '@/components/footer';
 import Navigation from '@/components/navigation';
 import Callout from '@/components/callout';
 import Summits from '@/components/summits';
-import { createMetadata } from '@/lib/metadata';
-import type { Metadata } from 'next';
-import type { ReactElement } from 'react';
+
+// vis.gl additions
+import MyApp from '@/components/visgl/pages/_app';
+// import VisGLHero from '@/components/visgl/pages/index';
+import FrameworksPage from '@/components/visgl/pages/frameworks';
+import ShowcasePage from '@/components/visgl/pages/showcases'
+import BlogPage from '@/components/visgl/pages/blog';
+import NewsPage from '@/components/visgl/pages/news';
 
 export const generateMetadata = async (): Promise<Metadata> => {
  const { data } = await createClient().getSingle('home');
@@ -69,6 +78,11 @@ const Home = async (): Promise<ReactElement> => {
  description={data.community_description}
  items={data.community_outlinks}
  />
+ {/* <MyApp><VisGLHero /></MyApp> */}
+ <MyApp><FrameworksPage /></MyApp>
+ <MyApp><ShowcasePage /></MyApp>
+ <MyApp><BlogPage /></MyApp>
+ <MyApp><NewsPage /></MyApp>
  <Logos logos={data.collaborators} />
  <Footer
  navigation={settings.navigation}

components/visgl/components/about.js

@@ -0,0 +1,76 @@
+import React from 'react';
+
+import LinkWithArrow from './link-with-arrow';
+
+function About({imageResolver = {}}) {
+ return (
+ <div id="About">
+ <Intro imageResolver={imageResolver} />
+ </div>
+ );
+}
+
+export default About;
+
+function Intro({imageResolver}) {
+ return (
+ <div id="intro">
+ <div className="section-title">
+ <h2>About us</h2>
+ <p>
+ We are a global team of software engineers, information designers, and computer graphics
+ specialists.
+ </p>
+ </div>
+ <div className="about--intro--pictures">
+ <div className="about--intro--pictures--main">
+ <div
+ className="about--pic"
+ style={{
+ backgroundImage: `url(${imageResolver['team/dinner.png']}`
+ }}
+ />
+ <p>{"Dinner at Shan's"}</p>
+ </div>
+ </div>
+ <div className="section-title section-title--no-logo mission">
+ <h2>Our mission</h2>
+ <p>
+ Enhance people’s ability to understand and communicate data through interactive systems
+ for data visualization and analysis.
+ </p>
+ </div>
+ <div className="about--intro--pictures">
+ <div className="about--intro--pictures--small">
+ <div
+ className="about--pic"
+ style={{
+ backgroundImage: `url(${imageResolver['team/bowling.png']}`
+ }}
+ />
+ <p>{'Bowling night'}</p>
+ </div>
+ <div className="about--intro--pictures--small">
+ <div
+ className="about--pic"
+ style={{
+ backgroundImage: `url(${imageResolver['team/hiking.png']}`
+ }}
+ />
+ <p>{'Hiking Mt Tam'}</p>
+ </div>
+ <div className="m-top">
+ <div
+ className="about--pic"
+ style={{
+ backgroundImage: `url(${imageResolver['team/museum.png']}`,
+ height: 'calc((100vw - 71px) / 3.34)',
+ maxHeight: 350
+ }}
+ />
+ <p>{'Family photo at the California Academy of Science'}</p>
+ </div>
+ </div>
+ </div>
+ );
+}

components/visgl/components/blog.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import LinkWithArrow from './link-with-arrow';
+import blogYaml from '../content/blog.json';
+import ImageBox from './image-box';
+
+const Blog = () => {
+ return (
+ <div id="news">
+ <div className="section-title">
+ <h2>vis.gl Blog</h2>
+ <p>Deep dives into the vis.gl frameworks</p>
+ </div>
+ <div className="section-text">
+ <p>
+ The vis.gl blog introduces new releases, provides in-depth technical expositions and
+ showcases applications of the vis.gl frameworks. Guest posts are welcome!
+ </p>
+ <br />
+ <p>
+ Note that vis.gl blog posts can also be browser directly on{' '}
+ <a href="https://medium.com/@vis.gl">Medium</a>.
+ </p>
+ </div>
+
+ <div className="section-text">
+ <div className="blog-items">
+ {blogYaml.map((entry, i) => (
+ <BlogPost key={i} {...entry} image={entry.image} />
+ ))}
+ </div>
+ </div>
+ </div>
+ );
+};
+
+function BlogPost({publication, date, image, title, blurb, url}) {
+ return (
+ <div className="blog--item">
+ <span>
+ <div className="blog--item--image">
+ <ImageBox src={image} width={240} height={143} alt={title} />
+ </div>
+ <div className="blog--item--textbox">
+ <p className="blog--item--title">{title}</p>
+ <p className="blog--item--date">{date}</p>
+ <h3>{blurb}</h3>
+ <LinkWithArrow className="blog--item--read" label="Read Article" url={url} />
+ </div>
+ </span>
+ </div>
+ );
+}
+
+export default Blog;

components/visgl/components/footer.js

@@ -0,0 +1,101 @@
+"use client"
+
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import Netlify from '../public/images/netlify-dark.svg';
+import OpenJS from '../public/images/logos/openjsf-color-textw.svg';
+import styled from '@emotion/styled';
+import {breakPoints, breakpointsMediaQueries} from './styling/style';
+
+const SupportLogoLink = styled.a`
+ position: relative;
+ margin-top: 20px;
+ margin-right: 35px;
+ margin-bottom: 20px;
+ //top: 0.14em;
+ transition: opacity 0.2s;
+ opacity: 0.6;
+ //margin: 0 22px;
+ &:hover {
+ opacity: 1;
+ }
+`;
+
+const Content = styled.div`
+ display: flex;
+ line-height: 23px;
+ justify-content: space-between;
+ flex-direction: row;
+ gap: 20px;
+
+ ${breakpointsMediaQueries.lg} {
+ flex-direction: column;
+ }
+`
+
+const ContentItem = styled.div`
+ flex: 1;
+ max-width: ${breakPoints.sm}px;
+`
+
+const Logos = styled.div`
+ height: 100%;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+
+ ${breakpointsMediaQueries.lg} {
+ justify-content: flex-start;
+ }
+`
+
+const SupportLogo = ({name, src, href, width = 200, height = 25}) => (
+ <SupportLogoLink href={href} target="_blank" rel="noopener noreferrer">
+ <Image alt={name} src={src} height={height} width={width} objectFit="contain" />
+ </SupportLogoLink>
+);
+
+export default function Footer() {
+ return (
+ <footer id="Footer">
+ <Content>
+ <ContentItem>
+ <h1>
+ <Link href="/">
+ <a className="logo">VIS.GL</a>
+ </Link>
+ </h1>
+ <p>
+ Copyright <a href="https://openjsf.org">OpenJS Foundation</a> and vis.gl contributors. 
+ All rights reserved. The <a href="https://openjsf.org">OpenJS Foundation</a> has registered trademarks 
+ and uses trademarks. For a list of trademarks of the <a href="https://openjsf.org">OpenJS Foundation</a>, 
+ please see our <a href="https://trademark-policy.openjsf.org">Trademark Policy</a> and 
+ <a href="https://trademark-list.openjsf.org">Trademark List</a>. Trademarks and logos not indicated on 
+ the <a href="https://trademark-list.openjsf.org">list of OpenJS Foundation trademarks</a> are 
+ trademarks&trade; or registered&reg; trademarks of their respective holders. Use of them does not 
+ imply any affiliation with or endorsement by them.
+ </p>
+ </ContentItem> 
+ <ContentItem>
+ <Logos>
+ <SupportLogo
+ width={100}
+ height={55}
+ name="Supported by OpenJS"
+ href="https://www.openjsf.org"
+ src={OpenJS}
+ />
+ <SupportLogo
+ width={100}
+ height={55}
+ name="Deploys by Netlify"
+ href="https://www.netlify.com"
+ src={Netlify}
+ />
+ </Logos>
+ </ContentItem>
+ </Content> 
+ </footer>
+ );
+}

components/visgl/components/header.js

@@ -0,0 +1,48 @@
+import React, {Component} from 'react';
+import classNames from 'classnames';
+
+import Menu from './menu';
+import Links from './links';
+import links from '../content/links.json';
+
+export default class Header extends Component {
+ state = {
+ isMenuOpen: false
+ };
+ toggleMenu = menuState => {
+ this.setState({isMenuOpen: menuState});
+ };
+
+ render() {
+ const {isMenuOpen} = this.state;
+ return (
+ <header
+ className={classNames({
+ open: isMenuOpen,
+ [this.props.page]: true
+ })}
+ >
+ <div className="f container ph2">
+ {links.map(({navigation: {type, items}}, idx) => {
+ switch (type) {
+ case 'MENU':
+ return (
+ <Menu
+ key={idx}
+ isMenuOpen={isMenuOpen}
+ items={items}
+ page={this.props.page}
+ toggleMenu={this.toggleMenu}
+ />
+ );
+ case 'LINKS':
+ return <Links key={idx} items={items} page={this.props.page} />;
+ default:
+ return null;
+ }
+ })}
+ </div>
+ </header>
+ );
+ }
+}