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:licenses #197

Merged
merged 3 commits into from
Nov 2, 2024
Merged

feat:licenses #197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a7ccc93
feat: add licenses to about
tom-bywild Nov 2, 2024
99611e2
chore: self review
tom-bywild Nov 2, 2024
9e53c71
chore: simplify
tom-bywild Nov 2, 2024
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
23 changes: 4 additions & 19 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<br />
<br />

<p align="center"><img src="./web/public/images/og/cover-01.jpg" /></p>
<p align="center"><img src="./web/public/images/og/cover-1.jpg" /></p>
<h2 align="center">
<a href="https://cran-e.com">CRAN/E</a>
</h2>
Expand All @@ -18,20 +18,12 @@

## [PWA (Progressive Web App)](https://cran-e.com)

You can use CRAN/E directly in any modern browser. If supported, CRAN/E can provide its best performance by using local databases and effective caching. CRAN/E can also be installed locally in Chromium-based browsers. For more information regarding PWAs, please visit [this great guide](https://web.dev/progressive-web-apps/).
You can use CRAN/E directly in any modern browser. CRAN/E can also be installed as a PWA locally in Chromium-based browsers as well as the latest Safari. For more information regarding PWAs, please visit [this great guide](https://web.dev/progressive-web-apps/).

## [Raycast Extension](https://www.raycast.com/flaming-codes/cran-e-search)

You can directly use the typeahead search of CRAN/E in Raycast. We published an extension on the Raycast Store to search for packages and authors. All CRAN/E Raycast extensions are developed as FOSS as well at [flaming-codes/crane-raycast](https://github.com/flaming-codes/crane-raycast).

## [Google Play Store](https://play.google.com/store/apps/details?id=com.cran_e.twa)

CRAN/E is also available via the Play Store on Android and Chrome OS devices. Please note that this store app is equivalant to the PWA and only repackaged for the Play Store.

## [Microsoft Store](https://apps.microsoft.com/store/detail/crane/9PL1GMMSC8L3)

If you prefer, you can also install CRAN/E via the Microsoft Store. Please note that this store app is equivalant to the PWA and only repackaged for the Microsoft Store.

<br />
<br />

Expand All @@ -41,7 +33,7 @@ This repository contains all code required to build the Frontend of CRAN/E. We d

> CRAN/E is not a package hosting solution for R-code. It's sole purpose is to provide a simple and effective interface for finding packages hosted on CRAN.

You find the site code (frontend & main backend) in `/web`. You find different smaller backend-only services in `/services/...`. The main code in `/web` is deployed on **Vercel's Edge Platform** and uses SvelteKit to deliver the pages as well as serve endpoints to fetch their data. The `/services/...` contain different smaller backend-only services that are deployed on other platforms, like **fly.io**.
You find the site code (frontend & main backend) in `/web`. The main code in `/web` is deployed on [DigitalOcean](https://www.digitalocean.com/) and uses [Remix](https://remix.run/) to deliver the pages as well as serve endpoints to fetch their data.

## Motivation

Expand All @@ -58,7 +50,7 @@ Therefore we decided to develop a new user interface with search capabilities, t

# Structure

This repo uses the `web`-directory for the PWA codebase. Isolated backend services are located in the `services`-directory. The `web`-directory is a SvelteKit project. The `services`-directory contains different backend-only services that can be deployed on different platforms.
This repo uses the `web`-directory for the PWA codebase. The `web`-directory is a Remix-project and contains all necessary code to run the frontend of CRAN/E.

<br />
<br />
Expand All @@ -78,13 +70,6 @@ For new bug reports, please create an issue in this repository. The issue setup
<br />
<br />

# Application architecture

Please visit the [wiki-pages](https://github.com/flaming-codes/crane-app/wiki) of this repo for an overview of the architecture.

<br />
<br />

# Maintainer

This code is mainly created and maintained by [flaming.codes](https://flaming.codes).
40 changes: 0 additions & 40 deletions web/README.md
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions web/app/licenses.json
View file
Open in desktop

Large diffs are not rendered by default.

122 changes: 122 additions & 0 deletions web/app/modules/licenses.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
import clsx from "clsx";
import licenses from "../licenses.json";
import { RiExternalLinkLine } from "@remixicon/react";

const columns = [
"Name",
"License Period",
"License Type",
"Version Info",
] as const;

export function LicenseTable() {
const handleRowClick = (link: string) => {
if (link) {
const clean = link
.replace(/\/$/, "")
.replace("git+", "")
.replace("ssh://git@", "https://");
window.open(clean, "_blank", "noopener,noreferrer");
}
};

return (
<div className="overflow-x-auto">
<table
className="min-w-full border-collapse"
role="table"
aria-label="License Information Table"
>
<thead>
<tr className="text-gray-normal bg-sand-ui">
{columns.map((column, index) => (
<th
key={index}
scope="col"
className={clsx(
"whitespace-nowrap py-3 pr-6 text-left text-sm",
"overflow-hidden first:rounded-s-lg first:pl-2 last:rounded-e-lg last:pr-2",
)}
>
{column}
</th>
))}
</tr>
</thead>
<tbody>
{licenses.map((license, index) => {
const values = [
<span key="name" className="flex items-center gap-2">
{license.name}
{license.link && (
<a
href={license.link}
target="_blank"
rel="noopener noreferrer"
tabIndex={-1}
aria-label={`More information about ${license.name}`}
>
<RiExternalLinkLine
className="text-gray-dim inline-block opacity-0 transition-opacity group-hover/item:opacity-100"
size={16}
/>
</a>
)}
</span>,
license.licensePeriod,
license.licenseType,
<span
key="versions"
className="flex flex-col gap-1 font-mono leading-none"
>
{license.remoteVersion === license.installedVersion ? (
license.remoteVersion
) : (
<>
<span>Remote: {license.remoteVersion}</span>
<span>Installed: {license.installedVersion}</span>
</>
)}
</span>,
];

return (
<tr
key={index}
className={clsx(
"group/item transition-colors hover:bg-gray-2 dark:hover:bg-gray-12/40",
{
"cursor-pointer": Boolean(license.link),
},
)}
tabIndex={0} // Allows the row to be focusable
onClick={() => handleRowClick(license.link)}
onKeyDown={(e) => {
if (e.key === "Enter" && license.link) {
handleRowClick(license.link);
}
}}
role="row"
aria-label={`Row for ${license.name}`}
>
{values.map((value, index) => (
<td
key={index}
className={clsx(
"whitespace-nowrap py-2 pl-2 pr-4 text-xs",
"first:rounded-s-lg last:rounded-e-lg",
)}
// eslint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role
role="cell"
>
{value}
</td>
))}
</tr>
);
})}
</tbody>
</table>
</div>
);
}
15 changes: 9 additions & 6 deletions web/app/routes/_page.about._index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
import { Header } from "../modules/header";
import { PlausibleChoicePillButton } from "../modules/plausible";
import { mergeMeta } from "../modules/meta";
import { LicenseTable } from "../modules/licenses";

const anchors = ["Mission", "Team", "Analytics", "Source Code", "Licenses"];

Expand Down Expand Up @@ -167,13 +168,15 @@ export default function PrivacyPage() {
</div>
</PageContentSection>

{/*
<Separator />
<PageContentSection headline="Licenses" fragment="licenses">
The following list contains all package dependencies of external code
used by CRAN/E. Click each link to visit the respective source code
page.
</PageContentSection> */}
<PageContentSection headline="Licenses" fragment="licenses">
<p>
The following list contains all package dependencies of external
code used by CRAN/E. Click each link to visit the respective source
code page.
</p>
<LicenseTable />
</PageContentSection>
</PageContent>
</>
);
Expand Down
Loading