Skip to content

added webring links to index page and howto #56

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

Merged
merged 2 commits into from
Apr 20, 2025
Merged

added webring links to index page and howto #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a49945e
webring index arrows and join link
teofum Apr 20, 2025
9889321
webring howto
teofum Apr 20, 2025
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
73 changes: 47 additions & 26 deletions src/pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,45 @@
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';
import Heading from '@theme/Heading';
import clsx from "clsx";
import Link from "@docusaurus/Link";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Layout from "@theme/Layout";
import HomepageFeatures from "@site/src/components/HomepageFeatures";
import Heading from "@theme/Heading";

import styles from './index.module.css';
import styles from "./index.module.css";

function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx('--landing', styles.heroBanner)}>
<header className={clsx("--landing", styles.heroBanner)}>
<div className="container">
<Heading as="h1" className="hero__title">
{siteConfig.title}
</Heading>
<p className="hero__subtitle">Articles, guides, tips and tricks from and for frogs and forgis of the Graphics Programming discord.<br />This is what we do</p>
<iframe className={styles.ytEmbed} width="960" height="520" src="https://www.youtube.com/embed/E07I1VRYlcg?si=PUsHfqq3YKLIp2kS" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<p className="hero__subtitle">
Articles, guides, tips and tricks from and for frogs and forgis of the
Graphics Programming discord.
<br />
This is what we do
</p>
<iframe
className={styles.ytEmbed}
width="960"
height="520"
src="https://www.youtube.com/embed/E07I1VRYlcg?si=PUsHfqq3YKLIp2kS"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg test"
to="/blog">
<Link className="button button--secondary button--lg test" to="/blog">
Discover our Blog
</Link>
<Link
className="button button--secondary button--lg test"
to="https://discord.gg/">
to="https://discord.gg/"
>
Join our Discord Server
</Link>
</div>
Expand All @@ -39,23 +53,30 @@ export default function Home(): JSX.Element {
return (
<Layout
title={`Hello from ${siteConfig.title}`}
description="Description will go into a meta tag in <head />">
description="Description will go into a meta tag in <head />"
>
<HomepageHeader />
<main>
<HomepageFeatures />

<div style={{
display: 'flex',
gap: '0.25rem',
justifyContent: 'center',
}}>
<div
style={{
display: "flex",
gap: "0.25rem",
justifyContent: "center",
}}
>
<a href="/webring/frogs/gp-blog/prev">⬅️</a>
<a href="/webring/frogs/">
<img src="/img/froge.webp" alt="a friendly froge" style={{
objectFit: 'contain',
width: '1.5em',
height: '1.5em',
}} />
<a href="/webring/">
<img
src="/img/froge.webp"
alt="a friendly froge"
style={{
objectFit: "contain",
width: "1.5em",
height: "1.5em",
}}
/>
</a>
<a href="/webring/frogs/gp-blog/next">➡️</a>
</div>
Expand Down
28 changes: 28 additions & 0 deletions src/pages/webring.tsx → src/pages/webring/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,34 @@ export default function Hello() {
</li>
))}
</ul>

<hr />

<div
style={{
display: "flex",
gap: "0.25rem",
justifyContent: "center",
}}
>
<a href="/webring/frogs/gp-blog/prev">⬅️</a>
<a href="/webring/">
<img
src="/img/froge.webp"
alt="a friendly froge"
style={{
objectFit: "contain",
width: "1.5em",
height: "1.5em",
}}
/>
</a>
<a href="/webring/frogs/gp-blog/next">➡️</a>
</div>

<a style={{ textAlign: "center" }} href="join">
Join the GP webring
</a>
</div>
</Layout>
);
Expand Down
91 changes: 91 additions & 0 deletions src/pages/webring/join.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

# Join the GP webring

Do you have a cool website or blog that can be part of the GP webring? Join us!

## 1. Add yourself to the webring

To join the webring, add yourself to the [froglist](https://github.com/GraphicsProgramming/blog/blob/main/static/webring/froglist.json),
a file listing all the webring members. You can leave a PR with your edits to the file, or if you're not as comfortable with Git, an issue
asking to be added.

Simply add a new entry at the end of the JSON file with your website's data:

```json
{
// A short name to identify your site.
// This will be in the URL, so keep it short and url-friendly (no spaces or special characters)
"name": "your-name-here",
"url": "https://link-to-my-cool.website",
"displayName": "Your Name Here",
"description": "A short description of your cool website"
}
```

## 2. Add the webring links to your site

Once you've added yourself to the froglist, add the webring links to your website. Make sure they're visible from the homepage!

You can find templates for the links below, for plain HTML or react. Simply copy and paste the appropriate code somewhere in your
home page, or feel free to make your own links—you can style them to fit your site, just be sure to include our friendly little froge
so people know you're part of the webring.

<Tabs>
<TabItem value="html" label="HTML" default>
```html
<div style="display: flex, gap: 0.25rem, justify-content: center">
<a href="https://graphics-programming.org/webring/frogs/[YOUR_WEBRING_NAME]/prev">⬅️</a>
<a href="https://graphics-programming.org/webring/">
<img
src="https://graphics-programming.org/img/froge.webp"
alt="a friendly froge"
style="object-fit: contain, width: 1.5em, height: 1.5em"
/>
</a>
<a href="https://graphics-programming.org/webring/frogs/[YOUR_WEBRING_NAME]/next">➡️</a>
</div>
```
</TabItem>
<TabItem value="react" label="JSX (React)" default>
```tsx
<div
style={{
display: "flex",
gap: "0.25rem",
justifyContent: "center",
}}
>
<a href="https://graphics-programming.org/webring/frogs/[YOUR_WEBRING_NAME]/prev">⬅️</a>
<a href="https://graphics-programming.org/webring/">
<img
src="https://graphics-programming.org/img/froge.webp"
alt="a friendly froge"
style={{
objectFit: "contain",
width: "1.5em",
height: "1.5em",
}}
/>
</a>
<a href="https://graphics-programming.org/webring/frogs/[YOUR_WEBRING_NAME]/next">➡️</a>
</div>
```
</TabItem>
<TabItem value="react-tw" label="JSX + Tailwind CSS" default>
```tsx
<div className="flex flex-row gap-1 justify-center">
<a href="https://graphics-programming.org/webring/frogs/[YOUR_WEBRING_NAME]/prev">⬅️</a>
<a href="https://graphics-programming.org/webring/">
<img
className="object-contain w-6 h-6"
src="https://graphics-programming.org/img/froge.webp"
alt="a friendly froge"
/>
</a>
<a href="https://graphics-programming.org/webring/frogs/[YOUR_WEBRING_NAME]/next">➡️</a>
</div>
```
</TabItem>
</Tabs>