Skip to content

Commit

Permalink
style(website): improve the styling
Browse files Browse the repository at this point in the history
  • Loading branch information
orhun committed Aug 17, 2024
1 parent 069a3d1 commit 854339d
Show file tree
Hide file tree
Showing 13 changed files with 205 additions and 27 deletions.
6 changes: 5 additions & 1 deletion website/astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@ export default defineConfig({
Header: "./src/components/Header.astro",
Footer: "./src/components/Footer.astro",
},
customCss: ["./src/tailwind.css"],
customCss: [
"@fontsource/dejavu-sans/400.css",
"./src/tailwind.css",
"./src/styles/custom.css",
],
sidebar: [
{
label: "Guides",
Expand Down
6 changes: 6 additions & 0 deletions website/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@astrojs/starlight": "^0.25.4",
"@astrojs/starlight-tailwind": "^2.0.3",
"@astrojs/tailwind": "^5.1.0",
"@fontsource/dejavu-sans": "^5.0.11",
"astro": "^4.10.2",
"sharp": "^0.32.5",
"tailwindcss": "^3.4.9",
Expand Down
14 changes: 13 additions & 1 deletion website/public/favicon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added website/src/assets/binsider-general-tab.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 7 additions & 1 deletion website/src/components/Footer.astro
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
---
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/Footer.astro';
import Stat from "./Footer/Stat.astro";
const isHomepage = Astro.props.slug === '';
---
Expand All @@ -9,9 +10,14 @@ const isHomepage = Astro.props.slug === '';
isHomepage ? (
<footer class="footer">
<div class="container">
<p>
Built with <a href="https://rustlang.org" target="_blank" rel="noopener noreferrer">Rust</a> & <a href="https://ratatui.rs" target="_blank" rel="noopener noreferrer">Ratatui</a> 🦀🐁 <span class="small-text">with 🖤 from @orhun</p>
</p>
<Stat />
<br>
<br>
<p class="small-text">&copy; {new Date().getFullYear()} Binsider. All rights reserved.</p>
<p class="small-text">
Built with <a href="https://ratatui.rs" target="_blank" rel="noopener noreferrer">Rust & Ratatui</a> on <a href="https://github.com/orhun/binsider" target="_blank" rel="noopener noreferrer">GitHub</a> 🦀
</p>
<p class="small-text">In memory of Jia Tan 🏴</p>
</div>
Expand Down
20 changes: 20 additions & 0 deletions website/src/components/Footer/Icon.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
const {name} = Astro.props
const paths = {
github: "M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z",
tag: "M1 7.775V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 0 1 0 2.474l-5.026 5.026a1.75 1.75 0 0 1-2.474 0l-6.25-6.25A1.752 1.752 0 0 1 1 7.775Zm1.5 0c0 .066.026.13.073.177l6.25 6.25a.25.25 0 0 0 .354 0l5.025-5.025a.25.25 0 0 0 0-.354l-6.25-6.25a.25.25 0 0 0-.177-.073H2.75a.25.25 0 0 0-.25.25ZM6 5a1 1 0 1 1 0 2 1 1 0 0 1 0-2Z",
star: "M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"
}
const path = paths[name];
---

<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
width="16"
height="16">
<path
d={path}
fill="currentColor"/>
</svg>
42 changes: 42 additions & 0 deletions website/src/components/Footer/Stars.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
const { owner, repo } = Astro.props;
---

<project-stars data-owner={owner} data-repo={repo}>
<span id="star-count">0+</span>
</project-stars>

<script>
class ProjectStars extends HTMLElement {
constructor() {
super();

const approximate = (count) => {
if (count >= 1000) {
// Show numbers over 1000 as x.yk. So 1234 becomes 1.2k.
const mag = Math.trunc(count / 100) / 10;
return `${mag}k+`;
} else {
// Show numbers below 1000 as xy0+. So 789 becomes 780.
const mag = Math.trunc(count / 10) * 10;
return `${mag}+`;
}
}

const {owner, repo} = this.dataset;
fetch(`https://api.github.com/repos/${owner}/${repo}`)
.then(res => {
if (res.ok) {
return res.json();
} else {
throw new Error('Network response was not OK.');
}
})
.then(data => {
this.querySelector('#star-count').textContent = approximate(data.stargazers_count);
}).catch(() => {});
}
}

customElements.define('project-stars', ProjectStars)
</script>
20 changes: 20 additions & 0 deletions website/src/components/Footer/Stat.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
import Icon from "./Icon.astro";
import Stars from "./Stars.astro";
import Version from "./Version.astro";
---

<div class="stat not-content">
<Icon name="github" /><div class="not-content">orhun/binsider</div>
<Icon name="star" /><Stars owner="orhun" repo="binsider" />
<Icon name="tag" /><Version owner="orhun" repo="binsider" />
</div>

<style>
div.stat {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
</style>
33 changes: 33 additions & 0 deletions website/src/components/Footer/Version.astro
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
---
const { owner, repo } = Astro.props;
---

<project-version data-owner={owner} data-repo={repo}>
<span id="version">0.0.0</span>
</project-version>

<script>
class ProjectVersion extends HTMLElement {
constructor() {
super();
const { owner, repo } = this.dataset;
fetch(`https://api.github.com/repos/${owner}/${repo}/releases`)
.then(res => {
if (res.ok) {
return res.json();
} else {
throw new Error("Failed to fetch the latest version.");
}
})
.then(data => {
this.querySelector("#version").textContent = data[0].name.replace(/^v/, "");
})
.catch(() => {
// Handle the error case (optional)
});
}
}

customElements.define('project-version', ProjectVersion);
</script>

1 change: 1 addition & 0 deletions website/src/components/Header.astro
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,4 @@ import Logo from '../components/Logo.astro';
<LanguageSelect {...Astro.props} />
</div>
</div>

31 changes: 7 additions & 24 deletions website/src/content/docs/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ template: splash
editUrl: true
hero:
tagline: Analyze ELF binaries <i>like a boss</i>.
image:
alt: Logo
dark: ../../assets/binsider-logo-dark.png
light: ../../assets/binsider-logo-light.png
actions:
- text: Start hacking
link: /guides/get_started/
Expand All @@ -21,25 +17,12 @@ hero:
link: /about/intro/
icon: open-book
- text: Get source
link: "https://github.com/orhun/binsider"
link: 'https://github.com/orhun/binsider'
icon: github
---

import { Card, CardGrid } from "@astrojs/starlight/components";

## Next steps

<CardGrid stagger>
<Card title="Update content" icon="pencil">
Edit `src/content/docs/index.mdx` to see this page change.
</Card>
<Card title="Add new content" icon="add-document">
Add Markdown or MDX files to `src/content/docs` to create new pages.
</Card>
<Card title="Configure your site" icon="setting">
Edit your `sidebar` and other config in `astro.config.mjs`.
</Card>
<Card title="Read the docs" icon="open-book">
Learn more in [the Starlight Docs](https://starlight.astro.build/).
</Card>
</CardGrid>
<img
src="src/assets/binsider-general-tab.png"
alt="Binsider logo"
style="margin: 0 auto; display:block;"
/>
;
50 changes: 50 additions & 0 deletions website/src/styles/custom.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
:root {
--sl-font: "DejaVu Sans";
--sl-color-accent-low: #3c3836;
--sl-color-accent: #90a85a;
--sl-color-accent-high: #edc371;
--sl-color-white: #ebdbb2;
--sl-color-gray-1: #fbf1c7;
--sl-color-gray-2: #d5c4a1;
--sl-color-gray-3: #bdae93;
--sl-color-gray-4: #a89984;
--sl-color-gray-5: #504945;
--sl-color-gray-6: #3c3836;
--sl-color-black: #282828;
}

:root[data-theme="light"] {
--sl-font: "DejaVu Sans";
--sl-color-accent-low: #f2e5bc;
--sl-color-accent: #d65d0e;
--sl-color-accent-high: #d65d0e;
--sl-color-white: #282828;
--sl-color-gray-1: #3c3836;
--sl-color-gray-2: #504945;
--sl-color-gray-3: #665c54;
--sl-color-gray-4: #bdae93;
--sl-color-gray-5: #d5c4a1;
--sl-color-gray-6: #fbf1c7;
--sl-color-gray-7: #f2e5bc;
--sl-color-black: #ebdbb2;
}

.hero {
grid-template-columns: 1fr;
padding: 1rem;
}

.hero .copy {
align-items: center;
}

.hero .actions {
justify-content: center;
}

h1[data-page-title],
a.site-title {
font-family: var(--__sl-font-mono);
font-weight: bold;
color: var(--color-brand);
}

0 comments on commit 854339d

Please sign in to comment.