Init nextjs
mrshmllow
2 years ago
committed by
marshmallow
parent
42fbae9e13
commit
066e29b2b5
@ -1,2 +1,38 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
.vscode/settings.json
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
jspm_packages
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
.next
|
||||
|
||||
@ -0,0 +1,34 @@
|
||||
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
|
||||
|
||||
The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 916 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="71" height="55" fill="none" viewBox="0 0 71 55"><g clip-path="url(#clip0)"><path fill="#fff" d="M60.1045 4.8978C55.5792 2.8214 50.7265 1.2916 45.6527 0.41542C45.5603 0.39851 45.468 0.440769 45.4204 0.525289C44.7963 1.6353 44.105 3.0834 43.6209 4.2216C38.1637 3.4046 32.7345 3.4046 27.3892 4.2216C26.905 3.0581 26.1886 1.6353 25.5617 0.525289C25.5141 0.443589 25.4218 0.40133 25.3294 0.41542C20.2584 1.2888 15.4057 2.8186 10.8776 4.8978C10.8384 4.9147 10.8048 4.9429 10.7825 4.9795C1.57795 18.7309 -0.943561 32.1443 0.293408 45.3914C0.299005 45.4562 0.335386 45.5182 0.385761 45.5576C6.45866 50.0174 12.3413 52.7249 18.1147 54.5195C18.2071 54.5477 18.305 54.5139 18.3638 54.4378C19.7295 52.5728 20.9469 50.6063 21.9907 48.5383C22.0523 48.4172 21.9935 48.2735 21.8676 48.2256C19.9366 47.4931 18.0979 46.6 16.3292 45.5858C16.1893 45.5041 16.1781 45.304 16.3068 45.2082C16.679 44.9293 17.0513 44.6391 17.4067 44.3461C17.471 44.2926 17.5606 44.2813 17.6362 44.3151C29.2558 49.6202 41.8354 49.6202 53.3179 44.3151C53.3935 44.2785 53.4831 44.2898 53.5502 44.3433C53.9057 44.6363 54.2779 44.9293 54.6529 45.2082C54.7816 45.304 54.7732 45.5041 54.6333 45.5858C52.8646 46.6197 51.0259 47.4931 49.0921 48.2228C48.9662 48.2707 48.9102 48.4172 48.9718 48.5383C50.038 50.6034 51.2554 52.5699 52.5959 54.435C52.6519 54.5139 52.7526 54.5477 52.845 54.5195C58.6464 52.7249 64.529 50.0174 70.6019 45.5576C70.6551 45.5182 70.6887 45.459 70.6943 45.3942C72.1747 30.0791 68.2147 16.7757 60.1968 4.9823C60.1772 4.9429 60.1437 4.9147 60.1045 4.8978ZM23.7259 37.3253C20.2276 37.3253 17.3451 34.1136 17.3451 30.1693C17.3451 26.225 20.1717 23.0133 23.7259 23.0133C27.308 23.0133 30.1626 26.2532 30.1066 30.1693C30.1066 34.1136 27.28 37.3253 23.7259 37.3253ZM47.3178 37.3253C43.8196 37.3253 40.9371 34.1136 40.9371 30.1693C40.9371 26.225 43.7636 23.0133 47.3178 23.0133C50.9 23.0133 53.7545 26.2532 53.6986 30.1693C53.6986 34.1136 50.9 37.3253 47.3178 37.3253Z"/></g><defs><clipPath id="clip0"><rect width="71" height="55" fill="#fff"/></clipPath></defs></svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(238, 238, 238, 0.55)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>
|
||||
|
Before Width: | Height: | Size: 199 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" fill="#FFF" viewBox="0 0 30 30"><path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"/></svg>
|
||||
|
Before Width: | Height: | Size: 944 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path d="M480,173.59c0-104.13-68.26-134.65-68.26-134.65C377.3,23.15,318.2,16.5,256.8,16h-1.51c-61.4.5-120.46,7.15-154.88,22.94,0,0-68.27,30.52-68.27,134.65,0,23.85-.46,52.35.29,82.59C34.91,358,51.11,458.37,145.32,483.29c43.43,11.49,80.73,13.89,110.76,12.24,54.47-3,85-19.42,85-19.42l-1.79-39.5s-38.93,12.27-82.64,10.77c-43.31-1.48-89-4.67-96-57.81a108.44,108.44,0,0,1-1-14.9,558.91,558.91,0,0,0,96.39,12.85c32.95,1.51,63.84-1.93,95.22-5.67,60.18-7.18,112.58-44.24,119.16-78.09C480.84,250.42,480,173.59,480,173.59ZM399.46,307.75h-50V185.38c0-25.8-10.86-38.89-32.58-38.89-24,0-36.06,15.53-36.06,46.24v67H231.16v-67c0-30.71-12-46.24-36.06-46.24-21.72,0-32.58,13.09-32.58,38.89V307.75h-50V181.67q0-38.65,19.75-61.39c13.6-15.15,31.4-22.92,53.51-22.92,25.58,0,44.95,9.82,57.75,29.48L256,147.69l12.45-20.85c12.81-19.66,32.17-29.48,57.75-29.48,22.11,0,39.91,7.77,53.51,22.92Q399.5,143,399.46,181.67Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 987 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Logo" x="0" y="0" version="1.1" viewBox="0 0 248 204" xml:space="preserve" style="enable-background:new 0 0 248 204"><style type="text/css">.st0{fill:#fff}</style><g id="Logo_1_"><path id="white_background" d="M221.95,51.29c0.15,2.17,0.15,4.34,0.15,6.53c0,66.73-50.8,143.69-143.69,143.69v-0.04 C50.97,201.51,24.1,193.65,1,178.83c3.99,0.48,8,0.72,12.02,0.73c22.74,0.02,44.83-7.61,62.72-21.66 c-21.61-0.41-40.56-14.5-47.18-35.07c7.57,1.46,15.37,1.16,22.8-0.87C27.8,117.2,10.85,96.5,10.85,72.46c0-0.22,0-0.43,0-0.64 c7.02,3.91,14.88,6.08,22.92,6.32C11.58,63.31,4.74,33.79,18.14,10.71c25.64,31.55,63.47,50.73,104.08,52.76 c-4.07-17.54,1.49-35.92,14.61-48.25c20.34-19.12,52.33-18.14,71.45,2.19c11.31-2.23,22.15-6.38,32.07-12.26 c-3.77,11.69-11.66,21.62-22.2,27.93c10.01-1.18,19.79-3.86,29-7.95C240.37,35.29,231.83,44.14,221.95,51.29z" class="st0"/></g></svg>
|
||||
|
Before Width: | Height: | Size: 940 B |
@ -0,0 +1,10 @@
|
||||
import Navbar from "./navbar";
|
||||
|
||||
const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
</>
|
||||
);
|
||||
|
||||
export default Layout;
|
||||
@ -0,0 +1,15 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
const Navbar = () => (
|
||||
<header className="flex justify-between px-6 py-4">
|
||||
<Link href="/">
|
||||
<a className="flex gap-2 items-center font-semibold text-xl">
|
||||
<Image src="/crystal.svg" width={30} height={30} />
|
||||
Crystal Linux
|
||||
</a>
|
||||
</Link>
|
||||
</header>
|
||||
);
|
||||
|
||||
export default Navbar;
|
||||
@ -1,110 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
class Contributors extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
//Variable to store repo name
|
||||
this.repo = this.props.repo;
|
||||
//Tracks whether json data has been fetched from url
|
||||
this.state = { fetched: false };
|
||||
this.getContributorData();
|
||||
}
|
||||
|
||||
//Fetches and parses repository data from Github
|
||||
getContributorData() {
|
||||
return fetch("https://api.github.com/repos/crystal-linux/" + this.repo + "/contributors", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((responseData) => {
|
||||
//indicates that data was fetched, then stores only the required data in a list in the object state
|
||||
this.setState({
|
||||
fetched: true,
|
||||
users: responseData.map(user => {
|
||||
return {
|
||||
login: user.login,
|
||||
link: user.html_url,
|
||||
avatar: user.avatar_url
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
.catch(error => console.warn(error));
|
||||
}
|
||||
|
||||
render() {
|
||||
//Stores the contributor avatar elements
|
||||
var avatars;
|
||||
//Only executes the process if the json data has been fetched (will throw a hissy fit and break otherwise)
|
||||
if (this.state.fetched) {
|
||||
avatars = this.state.users.map((user) => (
|
||||
//Creates new a link tag with a nested img tag with the user's data
|
||||
React.createElement(
|
||||
'a', {
|
||||
className: "contributor-link",
|
||||
title: user.login,
|
||||
href: user.link
|
||||
}, //Good lord I cannot wait to figure out how to get JSX working
|
||||
React.createElement(
|
||||
'img', {
|
||||
className: "contributor-avatar",
|
||||
alt: user.login,
|
||||
src: user.avatar
|
||||
}
|
||||
)
|
||||
)
|
||||
));
|
||||
//Removes contributors below top 5 from list
|
||||
while (avatars.length > 5) {
|
||||
avatars.pop();
|
||||
}
|
||||
}
|
||||
|
||||
//Creates a container for the contributor list
|
||||
var icons = React.createElement('div', { className: "contributor-icons", children: avatars });
|
||||
|
||||
//Creates a listing for the specific repository
|
||||
return ([
|
||||
React.createElement("p", { style: { fontSize: "14px", marginBottom: "0.5rem" } }, "crystal-linux/", this.repo),
|
||||
icons,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
//Creates and renders an individual instance of the Contributors object for each repository listed
|
||||
//Gets the containers by their id and nests the objects within them
|
||||
const ameContainer = document.querySelector('#ame');
|
||||
const ameRoot = ReactDOM.createRoot(ameContainer);
|
||||
ameRoot.render(React.createElement(Contributors, { repo: "amethyst" }));
|
||||
|
||||
const jadeContainer = document.querySelector('#jade');
|
||||
const jadeRoot = ReactDOM.createRoot(jadeContainer);
|
||||
jadeRoot.render(React.createElement(Contributors, { repo: "jade" }));
|
||||
|
||||
const jadeguiContainer = document.querySelector('#jade-gui');
|
||||
const jadeguiRoot = ReactDOM.createRoot(jadeguiContainer);
|
||||
jadeguiRoot.render(React.createElement(Contributors, { repo: "jade-gui" }));
|
||||
|
||||
const malContainer = document.querySelector('#mal');
|
||||
const malRoot = ReactDOM.createRoot(malContainer);
|
||||
malRoot.render(React.createElement(Contributors, { repo: "malachite" }));
|
||||
|
||||
const moonstoneContainer = document.querySelector('#moonstone');
|
||||
const moonstoneRoot = ReactDOM.createRoot(moonstoneContainer);
|
||||
moonstoneRoot.render(React.createElement(Contributors, { repo: "moonstone" }));
|
||||
|
||||
const designContainer = document.querySelector('#design');
|
||||
const designRoot = ReactDOM.createRoot(designContainer);
|
||||
designRoot.render(React.createElement(Contributors, { repo: "demos-mockups" }));
|
||||
|
||||
const brandingContainer = document.querySelector('#branding');
|
||||
const brandingRoot = ReactDOM.createRoot(brandingContainer);
|
||||
brandingRoot.render(React.createElement(Contributors, { repo: "branding" }));
|
||||
|
||||
const siteContainer = document.querySelector('#site');
|
||||
const siteRoot = ReactDOM.createRoot(siteContainer);
|
||||
siteRoot.render(React.createElement(Contributors, { repo: "getcryst.al" }));
|
||||
@ -1,19 +0,0 @@
|
||||
<head>
|
||||
<meta name="og:title" content="Crystal Linux Discord">
|
||||
<meta name="og:description" content="Join the Crystal Linux Discord server here!">
|
||||
<meta name="og:url" content="https://getcryst.al">
|
||||
<meta name="og:site_name" content="Crystal Linux Discord Server">
|
||||
<meta name="og:type" content="website">
|
||||
<meta content="#a900ff" data-react-helmet="true" name="theme-color" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta id="image-src" name="twitter:image:src" content="https://getcryst.al/site/assets/other/crystal-discord.png">
|
||||
<meta id="discord" name="twitter:image" content="https://getcryst.al/site/assets/other/crystal-discord.png">
|
||||
<meta id="embed-image" property="og:image" content="https://getcryst.al/site/assets/other/crystal-discord.png">
|
||||
<meta property="og:url" content="https://getcryst.al/site/assets/other/crystal-discord.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="og:title" content="media">
|
||||
<meta name="og:description" content="media">
|
||||
<!-- discord embed end-->
|
||||
<meta http-equiv="refresh" content="0; url=https://discord.gg/hYJgu8K5aA">
|
||||
</head>
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700&display=swap">
|
||||
<title>Crystal Linux</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script type="text/javascript">
|
||||
function downloadLink() {
|
||||
//Temporary, as a system to get the latest version link will be implemented
|
||||
window.open("https://github.com/crystal-linux/iso/releases");
|
||||
}
|
||||
</script>
|
||||
<link rel="icon" type="image/x-icon" href="/assets/svg/crystal-logo.svg">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="container">
|
||||
<a class="brand" href="index.html"><img src="assets/img/crystal-logo-minimal.png" width="36" height="36" style="vertical-align:middle;"> Crystal Linux</a>
|
||||
<div class="dropdown">
|
||||
<img src="assets/svg/dropdown.svg" class="navbar-toggler">
|
||||
<div class="dropdown-content">
|
||||
<a href="#">Features</a>
|
||||
<a href="team.html">Team</a>
|
||||
<a href="#" onclick="downloadLink()">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="highlight">
|
||||
<div id="intro">
|
||||
<h2 class="highlight-header" style="animation-delay: 0s;">
|
||||
<img src="assets/svg/crystal-logo.svg">
|
||||
<br> Roadmap
|
||||
<br>
|
||||
</h2>
|
||||
<div id="Roadmap"></div>
|
||||
</div>
|
||||
</section>
|
||||
<br>
|
||||
<div id="copyright">
|
||||
Copyright (c) 2022. All Rights Reserved.
|
||||
<a class="license-link" href="https://github.com/crystal-linux/.github/blob/main/LICENSE">
|
||||
Project licensed under GPLv3.0.
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Load React. -->
|
||||
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
|
||||
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
|
||||
|
||||
<!-- Load our React component. -->
|
||||
<script src="features.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,77 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
class Roadmap extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
//Tracks whether json data has been fetched from url
|
||||
this.state = { fetched: false };
|
||||
this.getRoadmapData();
|
||||
}
|
||||
|
||||
getRoadmapData(){
|
||||
return fetch("https://raw.githubusercontent.com/crystal-linux/.github/main/roadmap.json", {
|
||||
method: "GET",
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((responseData) => {
|
||||
//indicates that data was fetched, then stores only the required data in a list in the object state
|
||||
this.setState({
|
||||
fetched: true,
|
||||
points: responseData.map(step =>{
|
||||
return{
|
||||
version: step.Version,
|
||||
date: step.Date,
|
||||
features: step.Features
|
||||
}
|
||||
})
|
||||
});
|
||||
})
|
||||
.catch(error => console.warn(error));
|
||||
}
|
||||
|
||||
render(){
|
||||
var steps;
|
||||
if(this.state.fetched){
|
||||
|
||||
steps = this.state.points.map((step) => (
|
||||
//Creates new a link tag with a nested img tag with the user's data
|
||||
React.createElement(
|
||||
'div',
|
||||
{
|
||||
className: "roadmap-step",
|
||||
title: step.version
|
||||
},
|
||||
React.createElement(
|
||||
'h2',
|
||||
{
|
||||
className: "roadmap-version"
|
||||
},
|
||||
step.version + " - " + step.date
|
||||
),
|
||||
React.createElement(
|
||||
'ul',
|
||||
{
|
||||
className: "roadmap-list"
|
||||
},
|
||||
step.features.map((f) => (
|
||||
React.createElement(
|
||||
'p',
|
||||
{
|
||||
className: "roadmap-feature"
|
||||
},
|
||||
f
|
||||
)
|
||||
))
|
||||
)
|
||||
)
|
||||
));
|
||||
}
|
||||
|
||||
return React.createElement('div', {className:"roadmap"}, steps);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const roadmap = document.querySelector('#Roadmap');
|
||||
const roadmapRoot = ReactDOM.createRoot(roadmap);
|
||||
roadmapRoot.render(React.createElement(Roadmap));
|
||||
@ -1,142 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700&display=swap">
|
||||
<title>Crystal Linux</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script type="text/javascript">
|
||||
function downloadLink() {
|
||||
//Temporary, as a system to get the latest version link will be implemented
|
||||
window.open("https://github.com/crystal-linux/iso/releases");
|
||||
}
|
||||
</script>
|
||||
<meta name="description" content="Crystal Linux is a brand new Arch Linux based distribution. Completely beginner friendly, easy to use, and powerful.">
|
||||
<meta itemprop="name" content="Crystal - Official Site">
|
||||
<meta itemprop="description" content="Crystal Linux is a brand new Arch Linux based distribution. Completely beginner friendly, easy to use, and powerful.">
|
||||
<meta name="og:title" content="Crystal - Official Site">
|
||||
<meta name="og:description" content="Crystal Linux is a brand new Arch Linux based distribution. Completely beginner friendly, easy to use, and powerful.">
|
||||
<meta name="og:url" content="https://getcryst.al">
|
||||
<meta name="og:site_name" content="Crystal Linux Site">
|
||||
<meta name="og:type" content="website">
|
||||
<meta content="#a900ff" data-react-helmet="true" name="theme-color" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta id="image-src" name="twitter:image:src" content="https://raw.githubusercontent.com/crystal-linux/branding/main/banners/sitebanner.png">
|
||||
<meta id="discord" name="twitter:image" content="https://raw.githubusercontent.com/crystal-linux/branding/main/banners/sitebanner.png">
|
||||
<meta id="embed-image" property="og:image" content="https://raw.githubusercontent.com/crystal-linux/branding/main/banners/sitebanner.png">
|
||||
<meta property="og:url" content="https://raw.githubusercontent.com/crystal-linux/branding/main/banners/sitebanner.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="og:title" content="media">
|
||||
<meta name="og:description" content="media">
|
||||
<meta name="keywords" content="easy arch linux, arch linux, crystal linux, crystal arch, arch easy, arch installer" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicons/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicons/favicon-16x16.png">
|
||||
<link rel="manifest" href="/assets/favicons/site.webmanifest">
|
||||
<link rel="mask-icon" href="/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<link rel="shortcut icon" href="/assets/favicons/favicon.ico">
|
||||
<meta name="msapplication-TileColor" content="#ffc40d">
|
||||
<meta name="msapplication-config" content="/assets/favicons/browserconfig.xml">
|
||||
<meta name="theme-color" content="#ffffff">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="container">
|
||||
<a class="brand" href="index.html"><img src="assets/img/crystal-logo-minimal.png" width="36" height="36" style="vertical-align:middle;"> Crystal Linux</a>
|
||||
<div class="dropdown">
|
||||
<img src="assets/svg/dropdown.svg" class="navbar-toggler">
|
||||
<div class="dropdown-content">
|
||||
<!--<a href="features.html">Features</a>-->
|
||||
<a href="team.html">Team</a>
|
||||
<a href="https://github.com/crystal-linux/iso/releases" target="_blank" rel="noreferrer noopener">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="highlight">
|
||||
<div id="intro">
|
||||
<h2 class="highlight-header">
|
||||
An Arch Based Distribution
|
||||
<br>
|
||||
</h2>
|
||||
<p class="highlight-text">
|
||||
Crystal Linux is a brand new Arch Linux based distribution.
|
||||
<br> Powerful and easy to use.
|
||||
</p>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a href="https://twitter.com/crystal_linux" class="socials-link">
|
||||
<img src="assets/svg/twitter-logo.svg" width="64px" height="64px">
|
||||
</a>
|
||||
<a href="https://github.com/crystal-linux" class="socials-link">
|
||||
<img src="assets/svg/github-logo.svg" width="64px" height="64px">
|
||||
</a>
|
||||
<a href="https://discord.gg/2b47CAKNAx" class="socials-link">
|
||||
<img src="assets/svg/discord-logo.svg" width="64px" height="64px">
|
||||
</a>
|
||||
<a href="https://fosstodon.org/@crystal_linux" class="socials-link">
|
||||
<img src="assets/svg/mastodon-logo.svg" width="64px" height="64px">
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-group">
|
||||
<div class="card" style="animation-delay: 0.2s;">
|
||||
<h2 class="card-header">
|
||||
Why Crystal?
|
||||
</h2>
|
||||
<p class="card-text">
|
||||
What's so different about Crystal compared to other distributions?
|
||||
<div>
|
||||
<ul class="checklist">
|
||||
<li class="checklist-item"> Easy to use package manager</span>
|
||||
</li>
|
||||
<li class="checklist-item"> Beginner Friendly</span>
|
||||
</li>
|
||||
<li class="checklist-item"> Easy Btrfs snapshots</span>
|
||||
</li>
|
||||
<li class="checklist-item"> Easy to install</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<br>
|
||||
<!--<a class="download-button" href="features.html">Features</a>-->
|
||||
<a class="download-button" href="https://github.com/crystal-linux/iso/releases" target="_blank" rel="noreferrer noopener">Download</a>
|
||||
|
||||
</p>
|
||||
</div>
|
||||
<div class="card" style="animation-delay: 0.4s;">
|
||||
<h2 class="card-header">
|
||||
We 💖 open source software
|
||||
</h2>
|
||||
<p class="card-text">
|
||||
Basically everything that Crystal Linux has coded/made is completely open source for everyone.
|
||||
<br><br> The project is licensed under <a class="license-link" href="https://github.com/crystal-linux/.github/blob/main/LICENSE">GPLv3.0</a>.
|
||||
<br><br> We also are fully transparent, and have adopted the <a class="license-link" href="https://www.contributor-covenant.org/">Contributor Covenant</a>.
|
||||
<br><br> If you would like to contribute to the project, please adhere to the <a class="license-link" href="https://github.com/crystal-linux/.github/blob/main/CONTRIBUTING.md">Contributing Guidelines</a> and the <a class="license-link"
|
||||
href="https://developercertificate.org/">The DCO</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<br>
|
||||
<div id="copyright">
|
||||
Copyright (c) 2022. All Rights Reserved.
|
||||
<a class="license-link" href="https://github.com/crystal-linux/.github/blob/main/LICENSE">
|
||||
Project licensed under GPLv3.0.
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Load React. -->
|
||||
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
|
||||
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
|
||||
|
||||
<!-- Load our React component. -->
|
||||
<script src="contributors.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
@ -0,0 +1,7 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
swcMinify: true,
|
||||
};
|
||||
|
||||
module.exports = nextConfig;
|
||||
@ -0,0 +1,31 @@
|
||||
{
|
||||
"name": "getcryst.al",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.2.0",
|
||||
"@fortawesome/free-brands-svg-icons": "^6.2.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"next": "12.2.5",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "18.7.14",
|
||||
"@types/react": "18.0.18",
|
||||
"@types/react-dom": "18.0.6",
|
||||
"autoprefixer": "^10.4.8",
|
||||
"eslint": "8.23.0",
|
||||
"eslint-config-next": "12.2.5",
|
||||
"postcss": "^8.4.16",
|
||||
"tailwindcss": "^3.1.8",
|
||||
"typescript": "4.8.2"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,31 @@
|
||||
import "../styles/globals.css";
|
||||
import type { AppProps } from "next/app";
|
||||
import Layout from "../components/layout";
|
||||
import Head from "next/head";
|
||||
import { config } from "@fortawesome/fontawesome-svg-core";
|
||||
import "@fortawesome/fontawesome-svg-core/styles.css";
|
||||
|
||||
config.autoAddCss = false;
|
||||
|
||||
function GetCrystal({ Component, pageProps }: AppProps) {
|
||||
return (
|
||||
<Layout>
|
||||
<Head>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link
|
||||
rel="preconnect"
|
||||
href="https://fonts.gstatic.com"
|
||||
crossOrigin="true"
|
||||
/>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Head>
|
||||
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default GetCrystal;
|
||||
@ -0,0 +1,13 @@
|
||||
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
|
||||
import type { NextApiRequest, NextApiResponse } from "next";
|
||||
|
||||
type Data = {
|
||||
name: string;
|
||||
};
|
||||
|
||||
export default function handler(
|
||||
req: NextApiRequest,
|
||||
res: NextApiResponse<Data>
|
||||
) {
|
||||
res.status(200).json({ name: "John Doe" });
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
import {
|
||||
faDiscord,
|
||||
faGithub,
|
||||
faMastodon,
|
||||
faTwitter,
|
||||
} from "@fortawesome/free-brands-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import type { NextPage } from "next";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const icons = [
|
||||
{
|
||||
link: "https://twitter.com/crystal_linux",
|
||||
icon: faTwitter,
|
||||
},
|
||||
{
|
||||
link: "https://github.com/crystal-linux",
|
||||
icon: faGithub,
|
||||
},
|
||||
{
|
||||
link: "https://discord.gg/2b47CAKNAx",
|
||||
icon: faDiscord,
|
||||
},
|
||||
{
|
||||
link: "https://fosstodon.org/@crystal_linux",
|
||||
icon: faMastodon,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="flex flex-col items-center">
|
||||
<Head>
|
||||
<title>Crystal Linux</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="A brand new Arch Linux based distribution."
|
||||
/>
|
||||
<link rel="icon" href="/crystal.svg" />
|
||||
</Head>
|
||||
|
||||
<h2 className="text-4xl font-bold">An Arch Based Distribution</h2>
|
||||
<p>Crystal Linux is a brand new Arch Linux based distribution.</p>
|
||||
<p>Powerful and easy to use.</p>
|
||||
|
||||
<div className="flex gap-4">
|
||||
{icons.map((link) => (
|
||||
<>
|
||||
<Link href={link.link} target="_blank">
|
||||
<a className="hover:text-purple-700">
|
||||
<FontAwesomeIcon icon={link.icon} size="3x" />
|
||||
</a>
|
||||
</Link>
|
||||
</>
|
||||
))}
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
Before Width: | Height: | Size: 331 B After Width: | Height: | Size: 331 B |
@ -0,0 +1,4 @@
|
||||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 153 B |
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="90" height="127" fill="none" viewBox="0 0 90 127"><path fill="#A900FF" d="M26.4779 127L90 63.5L62.5898 36.1528L53.826 44.8965L72.4102 63.5L8.82597 127H26.4779Z"/><path fill="#A900FF" d="M63.5221 0L0 63.5L27.2859 90.7231H27.4102L36.1119 82.0415L17.5898 63.5L80.9876 0H63.5221Z"/></svg>
|
||||
|
Before Width: | Height: | Size: 331 B |
@ -1,399 +0,0 @@
|
||||
body {
|
||||
font-family: Inter, sans-serif;
|
||||
background: #2b2b2b;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar {
|
||||
background-color: #2b2b2b;
|
||||
}
|
||||
|
||||
.navbar .container {
|
||||
display: flex;
|
||||
flex-wrap: inherit;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
|
||||
.navbar .brand {
|
||||
margin-right: 0.75rem;
|
||||
}
|
||||
|
||||
.brand {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
color: #fff;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #1e1e1e;
|
||||
min-width: 160px;
|
||||
z-index: 1;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.dropdown-content a {
|
||||
color: #fff;
|
||||
font-size: 1.25rem;
|
||||
background-color: #1e1e1e;
|
||||
padding: 12px 16px;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-content a:hover {
|
||||
background-color: #161616;
|
||||
}
|
||||
|
||||
.text-link{
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.text-link:hover{
|
||||
color: #A900FF;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
text-align: center;
|
||||
margin-top: 5rem;
|
||||
margin-bottom: 3rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.highlight-header {
|
||||
font-size: 36px;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
|
||||
.highlight-text {
|
||||
font-size: 16px;
|
||||
margin: 0.75rem;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
#intro {
|
||||
animation: fadeIn 1s ease-in-out both;
|
||||
}
|
||||
|
||||
.buttons a {
|
||||
text-decoration: none;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.socials-link img {
|
||||
filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7476%) hue-rotate(172deg) brightness(113%) contrast(100%);
|
||||
}
|
||||
|
||||
.socials-link:hover img {
|
||||
filter: brightness(0) saturate(100%) invert(300%) sepia(97%) saturate(4728%) hue-rotate(544.5deg) brightness(55%) contrast(1000%);
|
||||
}
|
||||
|
||||
.card-group {
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
margin-top: 2rem;
|
||||
padding-top: 2rem;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
animation: fadeIn 1s ease-in-out both;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
flex-direction: column;
|
||||
background-color: #1e1e1e;
|
||||
max-width: 24rem;
|
||||
padding: 1.75rem;
|
||||
}
|
||||
|
||||
.wide-card{
|
||||
animation: fadeIn 1s ease-in-out both;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-basis: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: #1e1e1e;
|
||||
max-width: 48rem;
|
||||
padding: 1.75rem;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin: 0.25rem;
|
||||
}
|
||||
|
||||
.repo-grid{
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
max-width: 48rem;
|
||||
}
|
||||
|
||||
.download-button {
|
||||
animation: downloadButton 0.1s ease-in-out both;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
background-color: #A900FF;
|
||||
text-decoration: none;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
user-select: none;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.download-button:hover {
|
||||
animation: downloadButtonHover 0.1s ease-in-out both;
|
||||
display: inline-block;
|
||||
background-color: #161616;
|
||||
text-decoration: underline;
|
||||
padding: 1rem 2rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
@keyframes downloadButton {
|
||||
0% {
|
||||
background-color: #161616;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #A900FF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes downloadButtonHover {
|
||||
0% {
|
||||
background-color: #A900FF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: #161616;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.checklist {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.checklist-item {
|
||||
font-size: 1.25rem;
|
||||
background: transparent;
|
||||
border-width: 0px;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.contributor-category {
|
||||
padding: 1rem;
|
||||
min-width: 2rem;
|
||||
}
|
||||
|
||||
.contributor-link {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.contributor-avatar {
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0.25rem;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
.contributor-avatar:hover {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
padding: 0.16rem;
|
||||
}
|
||||
|
||||
#team-members {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.team-link {
|
||||
animation: fadeIn 1s ease-in-out both;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.team-avatar {
|
||||
animation: teamImage 0.1s ease-in-out both;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border-radius: 2rem;
|
||||
}
|
||||
|
||||
@keyframes teamImageHover {
|
||||
0% {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
padding: 0.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes teamImage {
|
||||
0% {
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
padding: 0.1rem;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
padding: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.team-avatar:hover {
|
||||
animation: teamImageHover 0.1s ease-in-out both;
|
||||
}
|
||||
|
||||
#languages {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.lang-tag {
|
||||
animation: fadeIn 0.1s ease-in-out both;
|
||||
display: inline-block;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 200;
|
||||
padding: 0.35rem;
|
||||
margin: 0.35rem;
|
||||
border: 0.1rem solid #fff;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
#Rust-tag {
|
||||
color: #dea584;
|
||||
border-color: #dea584;
|
||||
}
|
||||
|
||||
#CPP-tag {
|
||||
color: #f34b7d;
|
||||
border-color: #f34b7d;
|
||||
}
|
||||
|
||||
|
||||
#Python-tag {
|
||||
color: #3572A5;
|
||||
border-color: #3572A5;
|
||||
}
|
||||
#Nix-tag {
|
||||
color: #7e7eff;
|
||||
border-color: #7e7eff;
|
||||
}
|
||||
|
||||
#HTML-tag {
|
||||
color: #e34c26;
|
||||
border-color: #e34c26;
|
||||
}
|
||||
|
||||
#React-tag {
|
||||
color: #00FF80;
|
||||
border-color: #00FF80;
|
||||
}
|
||||
|
||||
.roadmap-step{
|
||||
margin: 2rem;
|
||||
}
|
||||
|
||||
.roadmap-list{
|
||||
padding-left: 0;
|
||||
text-align: left;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
#copyright {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background-color: #1e1e1e;
|
||||
text-align: center;
|
||||
padding: 0.5rem 0;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.license-link {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.license-link:hover {
|
||||
text-decoration: underline;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html {
|
||||
font-family: "Inter", sans-serif;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@ -1,95 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700&display=swap">
|
||||
<title>Crystal Linux</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script type="text/javascript">
|
||||
function downloadLink() {
|
||||
//Temporary, as a system to get the latest version link will be implemented
|
||||
window.open("https://github.com/crystal-linux/iso/releases");
|
||||
}
|
||||
</script>
|
||||
<link rel="icon" type="image/x-icon" href="/assets/svg/crystal-logo.svg">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<div class="container">
|
||||
<a class="brand" href="index.html"><img src="assets/img/crystal-logo-minimal.png" width="36" height="36" style="vertical-align:middle;"> Crystal Linux</a>
|
||||
<div class="dropdown">
|
||||
<img src="assets/svg/dropdown.svg" class="navbar-toggler">
|
||||
<div class="dropdown-content">
|
||||
<!--<a href="features.html">Features</a>-->
|
||||
<a href="team.html">Team</a>
|
||||
<a href="https://github.com/crystal-linux/iso/releases" target="_blank" rel="noreferrer noopener">Download</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="highlight">
|
||||
<div class="container">
|
||||
<div id="intro">
|
||||
<h2 class="highlight-header" style="animation-delay: 0s;">
|
||||
<img src="assets/svg/crystal-logo.svg">
|
||||
<br> Team Members
|
||||
<br>
|
||||
</h2>
|
||||
<div id="team-members"></div>
|
||||
<p>Contributors from across the globe with various skills working together.</p>
|
||||
<div id="languages">
|
||||
<div id="Rust-tag" class="lang-tag" style="animation-delay: 0.1s">Rust</div>
|
||||
<div id="Python-tag" class="lang-tag" style="animation-delay: 0.2s">Python</div>
|
||||
<div id="Nix-tag" class="lang-tag" style="animation-delay: 0.3s">Nix</div>
|
||||
<div id="CPP-tag" class="lang-tag" style="animation-delay: 0.4s">C/C++</div>
|
||||
<div id="React-tag" class="lang-tag" style="animation-delay: 0.5s">React.js</div>
|
||||
<div id="HTML-tag" class="lang-tag" style="animation-delay: 0.6s">HTML/CSS</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-group">
|
||||
<div class="wide-card" style="animation-delay: 0.6s;">
|
||||
<h2 class="card-header">
|
||||
Top five contributors on the major repositories.
|
||||
</h2>
|
||||
<br>
|
||||
<div class="repo-grid">
|
||||
<div id="ame" class="contributor-category"></div>
|
||||
<div id="jade" class="contributor-category"></div>
|
||||
<div id="jade-gui" class="contributor-category"></div>
|
||||
<div id="mal" class="contributor-category"></div>
|
||||
<div id="design" class="contributor-category"></div>
|
||||
<div id="moonstone" class="contributor-category"></div>
|
||||
<div id="branding" class="contributor-category"></div>
|
||||
<div id="site" class="contributor-category"></div>
|
||||
</div>
|
||||
<p class="card-text">If you want to show up here, head to our <a class="text-link" href="https://github.com/crystal-linux">GitHub page</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<br>
|
||||
<div id="copyright">
|
||||
Copyright (c) 2022. All Rights Reserved.
|
||||
<a class="license-link" href="https://github.com/crystal-linux/.github/blob/main/LICENSE">
|
||||
Project licensed under GPLv3.0.
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Load React. -->
|
||||
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
|
||||
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
|
||||
|
||||
<!-- Load our React component. -->
|
||||
<script src="team.js"></script>
|
||||
<script src="contributors.js"></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -1,75 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
class Team extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
//Variable to store repo name
|
||||
this.repo = this.props.repo;
|
||||
//Tracks whether json data has been fetched from url
|
||||
this.state = { fetched: false };
|
||||
this.getContributorData();
|
||||
}
|
||||
|
||||
//Fetches and parses repository data from Github
|
||||
getContributorData() {
|
||||
return fetch("https://api.github.com/orgs/crystal-linux/members", {
|
||||
method: "GET",
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
})
|
||||
.then((response) => response.json())
|
||||
.then((responseData) => {
|
||||
//indicates that data was fetched, then stores only the required data in a list in the object state
|
||||
this.setState({
|
||||
users: responseData.map(user => {
|
||||
return {
|
||||
login: user.login,
|
||||
link: user.html_url,
|
||||
avatar: user.avatar_url
|
||||
}
|
||||
|
||||
})
|
||||
});
|
||||
this.setState({
|
||||
fetched: true
|
||||
});
|
||||
})
|
||||
.catch(error => console.warn(error));
|
||||
}
|
||||
|
||||
render() {
|
||||
//Stores the contributor avatar elements
|
||||
var avatars;
|
||||
if (this.state.fetched) {
|
||||
avatars = this.state.users.map((user) => (
|
||||
//Creates new a link tag with a nested img tag with the user's data
|
||||
React.createElement(
|
||||
'a', {
|
||||
className: "team-link",
|
||||
title: user.login,
|
||||
href: user.link
|
||||
}, //Good lord I cannot wait to figure out how to get JSX working
|
||||
React.createElement(
|
||||
'img', {
|
||||
className: "team-avatar",
|
||||
alt: user.login,
|
||||
src: user.avatar
|
||||
}
|
||||
),
|
||||
React.createElement('br'),
|
||||
user.login
|
||||
)
|
||||
));
|
||||
}
|
||||
|
||||
//Creates a listing for the specific repository
|
||||
return avatars;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const teamContainer = document.querySelector('#team-members');
|
||||
const teamRoot = ReactDOM.createRoot(teamContainer);
|
||||
teamRoot.render(React.createElement(Team));
|
||||
@ -0,0 +1,20 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
@ -1,19 +0,0 @@
|
||||
<head>
|
||||
<meta name="og:title" content="Crystal - Twitter">
|
||||
<meta name="og:description" content="Follow Crystal Linux on Twitter!">
|
||||
<meta name="og:url" content="https://getcryst.al">
|
||||
<meta name="og:site_name" content="Crystal Linux Twitter account">
|
||||
<meta name="og:type" content="website">
|
||||
<meta content="#a900ff" data-react-helmet="true" name="theme-color" />
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta id="image-src" name="twitter:image:src" content="https://getcryst.al/site/assets/other/crystal-twitter.png">
|
||||
<meta id="discord" name="twitter:image" content="https://getcryst.al/site/assets/other/crystal-twitter.png">
|
||||
<meta id="embed-image" property="og:image" content="https://getcryst.al/site/assets/other/crystal-twitter.png">
|
||||
<meta property="og:url" content="https://getcryst.al/site/assets/other/crystal-twitter.png">
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="og:title" content="media">
|
||||
<meta name="og:description" content="media">
|
||||
<!-- discord embed end-->
|
||||
<meta http-equiv="refresh" content="0; url=https://twitter.com/intent/user?screen_name=crystal_linux">
|
||||
</head>
|
||||
|
||||
Loading…
Reference in New Issue