mirror of https://github.com/o2sh/onefetch.git
Ossama Hjaji
3 years ago
committed by
GitHub
9 changed files with 68 additions and 144 deletions
@ -1,15 +0,0 @@
@@ -1,15 +0,0 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<link rel="icon" href="/onefetch.ico" /> |
||||
<link rel="stylesheet" href="/sakura.css" type="text/css" /> |
||||
<title>Onefetch - ASCII Preview</title> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="app"></div> |
||||
<script type="module" src="/src/routes/ascii-preview/main.ts"></script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,67 @@
@@ -0,0 +1,67 @@
|
||||
<script lang="ts"> |
||||
import AsciiPreview from './lib/AsciiPreview.svelte'; |
||||
import data from '../../../languages.yaml'; |
||||
import type { Languages } from '../../../languages.yaml'; |
||||
|
||||
const languages = Object.entries(data as Languages).map( |
||||
([name, { ascii, colors }]) => ({ |
||||
name, |
||||
ascii, |
||||
...colors, |
||||
}) |
||||
); |
||||
</script> |
||||
|
||||
<header> |
||||
<div class="banner"> |
||||
<small |
||||
>v2.12.0 is available 🎉 go check the <a |
||||
href="https://github.com/o2sh/onefetch/releases/tag/v2.12.0" |
||||
>release notes</a |
||||
>!!</small> |
||||
</div> |
||||
<h1>Onefetch</h1> |
||||
<p> |
||||
<small> |
||||
<a href="https://github.com/o2sh/onefetch/wiki">wiki</a> | |
||||
<a href="https://github.com/o2sh/onefetch/tree/main/docs/vercel" |
||||
>github</a> |
||||
| Built with ❤ by |
||||
<a href="https://github.com/spenserblack">@spenserblack</a> and |
||||
<a href="https://github.com/o2sh">@o2sh</a></small> |
||||
</p> |
||||
</header> |
||||
<main> |
||||
<p> |
||||
This page shows you an ASCII preview of all the languages supported by |
||||
onefetch. Like the binary, the data is taken from the <a |
||||
href="https://raw.githubusercontent.com/o2sh/onefetch/main/languages.yaml" |
||||
><code>Languages.yaml</code></a> file and the layout is meant to mimic the |
||||
way the logo would be displayed inside a terminal. |
||||
</p> |
||||
<p> |
||||
Suggestions and PRs are welcome at <a |
||||
href="https://github.com/o2sh/onefetch">github.com/o2sh/onefetch</a> |
||||
</p> |
||||
<h3>Languages <small>({languages.length})</small></h3> |
||||
{#each languages as language} |
||||
<AsciiPreview |
||||
name={language.name} |
||||
ansi={language.ansi} |
||||
hex={language.hex} |
||||
ascii={language.ascii} |
||||
chip={language.chip} /> |
||||
{/each} |
||||
</main> |
||||
|
||||
<style> |
||||
.banner { |
||||
background-color: #e1f6e5; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
text-align: center; |
||||
padding: 0.5rem 0; |
||||
} |
||||
</style> |
||||
@ -1,48 +0,0 @@
@@ -1,48 +0,0 @@
|
||||
<script lang="ts"> |
||||
interface NavItem { |
||||
name: string; |
||||
href: string; |
||||
} |
||||
|
||||
export let active: null | NavItem['name'] | NavItem['href'] = null; |
||||
const nav: NavItem[] = [ |
||||
{ |
||||
name: 'Home', |
||||
href: '/', |
||||
}, |
||||
{ |
||||
name: '✨ ASCII Preview ✨', |
||||
href: 'ascii-preview/', |
||||
}, |
||||
{ |
||||
name: 'GitHub', |
||||
href: 'https://github.com/o2sh/onefetch', |
||||
}, |
||||
]; |
||||
|
||||
function isActive(item: NavItem): boolean { |
||||
return active === item.name || active === item.href; |
||||
} |
||||
</script> |
||||
|
||||
<nav> |
||||
{#each nav as item} |
||||
<a href={item.href} class={isActive(item) ? 'active' : ''}>{item.name}</a> |
||||
{/each} |
||||
</nav> |
||||
|
||||
<style> |
||||
nav { |
||||
display: flex; |
||||
flex-direction: row; |
||||
justify-content: space-around; |
||||
align-items: center; |
||||
padding: 0.5rem; |
||||
border-bottom: 1px solid #ccc; |
||||
} |
||||
|
||||
.active { |
||||
color: #006994; |
||||
border-bottom: 2px solid #4a4a4a; |
||||
} |
||||
</style> |
||||
@ -1,36 +0,0 @@
@@ -1,36 +0,0 @@
|
||||
<script lang="ts"> |
||||
import Nav from '../lib/Nav.svelte'; |
||||
</script> |
||||
|
||||
<main> |
||||
<h1>Onefetch</h1> |
||||
<Nav active="/" /> |
||||
<div class="spacer" /> |
||||
<p>Get onefetch from</p> |
||||
<ul> |
||||
<li> |
||||
<a href="https://github.com/o2sh/onefetch/releases/latest" |
||||
>the releases page</a> |
||||
</li> |
||||
<li> |
||||
<a href="https://crates.io/crates/onefetch">crates.io</a> |
||||
(<code>cargo install onefetch</code>) |
||||
</li> |
||||
<li> |
||||
<a href="https://snapcraft.io/onefetch">snapcraft</a> |
||||
(<code>sudo snap install onefetch</code>) |
||||
</li> |
||||
</ul> |
||||
<p> |
||||
or view our |
||||
<a href="https://github.com/o2sh/onefetch/wiki/installation" |
||||
>installation guide</a> |
||||
for other installation methods or more details. |
||||
</p> |
||||
</main> |
||||
|
||||
<style> |
||||
.spacer { |
||||
margin-top: 5rem; |
||||
} |
||||
</style> |
||||
@ -1,29 +0,0 @@
@@ -1,29 +0,0 @@
|
||||
<script lang="ts"> |
||||
import Nav from '../../lib/Nav.svelte'; |
||||
import AsciiPreview from '../../lib/AsciiPreview.svelte'; |
||||
import data from '../../../../../languages.yaml'; |
||||
import type { Languages } from '../../../../../languages.yaml'; |
||||
|
||||
const languages = Object.entries(data as Languages).map( |
||||
([name, { ascii, colors }]) => ({ |
||||
name, |
||||
ascii, |
||||
...colors, |
||||
}) |
||||
); |
||||
</script> |
||||
|
||||
<main> |
||||
<h1>ASCII Preview</h1> |
||||
<Nav active="ascii-preview/" /> |
||||
<h2>Languages ({languages.length})</h2> |
||||
|
||||
{#each languages as language} |
||||
<AsciiPreview |
||||
name={language.name} |
||||
ansi={language.ansi} |
||||
hex={language.hex} |
||||
ascii={language.ascii} |
||||
chip={language.chip} /> |
||||
{/each} |
||||
</main> |
||||
@ -1,7 +0,0 @@
@@ -1,7 +0,0 @@
|
||||
import Index from './Index.svelte'; |
||||
|
||||
const app = new Index({ |
||||
target: document.getElementById('app'), |
||||
}); |
||||
|
||||
export default app; |
||||
Loading…
Reference in new issue