Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: make boxes clickable links #106

Merged
merged 10 commits into from
Oct 28, 2023
Merged

feat: make boxes clickable links #106

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
d055eae
feat: make boxes appear as clickable links
jaschdoc Oct 6, 2023
6f96015
Update color
jaschdoc Oct 6, 2023
5aeec91
Revert "Update color"
jaschdoc Oct 6, 2023
0e81f47
Fix colors
jaschdoc Oct 6, 2023
1e5aaf3
Experiment with classes
jaschdoc Oct 6, 2023
4872aee
Add class
jaschdoc Oct 6, 2023
c02deba
Remove class
jaschdoc Oct 6, 2023
0e4761c
Fix classes
jaschdoc Oct 6, 2023
acd2532
Fix classes
jaschdoc Oct 6, 2023
7c1f23a
Fix classes
jaschdoc Oct 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
196 changes: 97 additions & 99 deletions src/page/Documentation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import React, {Component} from 'react';
import {Card, CardSubtitle, CardText, CardTitle, Col, Container, Row} from "reactstrap";
import {Link} from "react-router-dom";
import React, { Component } from 'react';
import { Card, CardSubtitle, CardText, CardTitle, Col, Container, Row } from "reactstrap";
import { Link } from "react-router-dom";

import {FaBookReader} from 'react-icons/fa';
import {FaStream} from 'react-icons/fa';
import {FaMicroblog} from 'react-icons/fa';
import {FaGitter} from 'react-icons/fa';
import {FaGithub} from 'react-icons/fa';
import {FaRegLaughSquint} from 'react-icons/fa';
import {MdSchool} from 'react-icons/md';
import {GoGraph} from 'react-icons/go';
import { FaBookReader } from 'react-icons/fa';
import { FaStream } from 'react-icons/fa';
import { FaMicroblog } from 'react-icons/fa';
import { FaGitter } from 'react-icons/fa';
import { FaGithub } from 'react-icons/fa';
import { FaRegLaughSquint } from 'react-icons/fa';
import { MdSchool } from 'react-icons/md';
import { GoGraph } from 'react-icons/go';

class Documentation extends Component {

Expand All @@ -28,37 +28,35 @@ class Documentation extends Component {

<Row className="mb-4">
<Col md="6">
<Card body className="h-100">
<CardSubtitle className="text-center m-4">
<a href="https://doc.flix.dev/" className="text-primary">
<FaBookReader style={{fontSize: '6em'}}/>
</a>
</CardSubtitle>
<CardTitle className="text-center">
<a href="https://doc.flix.dev/">Programming Flix</a>
</CardTitle>
<CardText>
The book provides an introduction to Flix for functional programmers. The book
demonstrates the core concepts of Flix through several examples.
</CardText>
</Card>
<a href="https://doc.flix.dev/" className="text-primary">
<Card body className="h-100">
<CardSubtitle className="text-center m-4">
<FaBookReader style={{ fontSize: '6em' }} />
</CardSubtitle>
<CardTitle className="text-center">
Programming Flix
</CardTitle>
<CardText className="text-dark">
The book provides an introduction to Flix for functional programmers. The book
demonstrates the core concepts of Flix through several examples.
</CardText>
</Card>
</a>
</Col>
<Col md="6">
<Card body className="h-100">
<CardSubtitle className="text-center m-4">
<a href="https://api.flix.dev/" className="text-success">
<FaStream style={{fontSize: '6em'}}/>
</a>
</CardSubtitle>
<CardTitle className="text-center">
<a href="https://api.flix.dev/">
<a href="https://api.flix.dev/" className="text-success">
<Card body className="h-100">
<CardSubtitle className="text-center m-4">
<FaStream style={{ fontSize: '6em' }} />
</CardSubtitle>
<CardTitle className="text-center">
Standard Library
</a>
</CardTitle>
<CardText>
The documentation provides a Javadoc-style description of the Flix library.
</CardText>
</Card>
</CardTitle>
<CardText className="text-dark">
The documentation provides a Javadoc-style description of the Flix library.
</CardText>
</Card>
</a>
</Col>
</Row>

Expand All @@ -72,81 +70,81 @@ class Documentation extends Component {

<Row className="mb-3">
<Col lg="2">
<Card body className="h-100">
<CardSubtitle className="text-center m-4">
<Link to="/research" className="text-black-50">
<MdSchool style={{fontSize: '3em'}}/>
</Link>
</CardSubtitle>
<CardTitle className="text-center">
<Link to="/research"> Research Papers </Link>
</CardTitle>
</Card>
<Link to="/research">
<Card body className="h-100">
<CardSubtitle className="text-center m-4 text-black-50">
<MdSchool style={{ fontSize: '3em' }} />
</CardSubtitle>
<CardTitle className="text-center link-primary">
Research Papers
</CardTitle>
</Card>
</Link>
</Col>

<Col lg="2">
<Card body className="h-100">
<CardSubtitle className="text-center m-4">
<Link to="/blog/" className="text-black-50">
<FaMicroblog style={{fontSize: '3em'}}/>
</Link>
</CardSubtitle>
<CardTitle className="text-center">
<Link to="/blog/"> Blog </Link>
</CardTitle>
</Card>
<Link to="/blog/">
<Card body className="h-100">
<CardSubtitle className="text-center m-4 text-black-50">
<FaMicroblog style={{ fontSize: '3em' }} />
</CardSubtitle>
<CardTitle className="text-center link-primary">
Blog
</CardTitle>
</Card>
</Link>
</Col>

<Col lg="2">
<Card body className="h-100">
<CardSubtitle className="text-center m-4">
<a href="https://gitter.im/flix/Lobby" className="text-black-50">
<FaGitter style={{fontSize: '3em'}}/>
</a>
</CardSubtitle>
<CardTitle className="text-center">
<a href="https://gitter.im/flix/Lobby"> Gitter </a>
</CardTitle>
</Card>
<a href="https://gitter.im/flix/Lobby">
<Card body className="h-100">
<CardSubtitle className="text-center m-4 text-black-50">
<FaGitter style={{ fontSize: '3em' }} />
</CardSubtitle>
<CardTitle className="text-center link-primary">
Gitter
</CardTitle>
</Card>
</a>
</Col>

<Col lg="2">
<Card body className="h-100">
<CardSubtitle className="text-center m-4">
<a href="https://github.com/flix/flix" className="text-black-50">
<FaGithub style={{fontSize: '3em'}}/>
</a>
</CardSubtitle>
<CardTitle className="text-center">
<a href="https://github.com/flix/flix"> GitHub </a>
</CardTitle>
</Card>
<a href="https://github.com/flix/flix">
<Card body className="h-100">
<CardSubtitle className="text-center m-4 text-black-50">
<FaGithub style={{ fontSize: '3em' }} />
</CardSubtitle>
<CardTitle className="text-center link-primary">
GitHub
</CardTitle>
</Card>
</a>
</Col>

<Col lg="2">
<Card body className="h-100">
<CardSubtitle className="text-center m-4">
<a href="https://arewefast.flix.dev/" className="text-black-50">
<GoGraph style={{fontSize: '3em'}}/>
</a>
</CardSubtitle>
<CardTitle className="text-center">
<a href="https://arewefast.flix.dev/"> Compiler Perf </a>
</CardTitle>
</Card>
<a href="https://arewefast.flix.dev/">
<Card body className="h-100">
<CardSubtitle className="text-center m-4 text-black-50">
<GoGraph style={{ fontSize: '3em' }} />
</CardSubtitle>
<CardTitle className="text-center link-primary">
Compiler Perf
</CardTitle>
</Card>
</a>
</Col>

<Col lg="2">
<Card body className="h-100">
<CardSubtitle className="text-center m-4">
<Link to="/misc/checklist" className="text-black-50">
<FaRegLaughSquint style={{fontSize: '3em'}}/>
</Link>
</CardSubtitle>
<CardTitle className="text-center">
<Link to="/misc/checklist"> Language Checklist </Link>
</CardTitle>
</Card>
<Link to="/misc/checklist">
<Card body className="h-100">
<CardSubtitle className="text-center m-4 text-black-50">
<FaRegLaughSquint style={{ fontSize: '3em' }} />
</CardSubtitle>
<CardTitle className="text-center link-primary">
Language Checklist
</CardTitle>
</Card>
</Link>
</Col>
</Row>
</Container>
Expand Down
Loading