Skip to content

Commit 91dfe50

Browse files
deccerdeccer
authored
Merge pull request #56 from teofum/main
added webring links to index page and howto
2 parents 43a9577 + 9889321 commit 91dfe50

File tree

3 files changed

+166
-26
lines changed

3 files changed

+166
-26
lines changed

‎src/pages/index.tsx

+47-26
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,45 @@
1-
import clsx from 'clsx';
2-
import Link from '@docusaurus/Link';
3-
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
4-
import Layout from '@theme/Layout';
5-
import HomepageFeatures from '@site/src/components/HomepageFeatures';
6-
import Heading from '@theme/Heading';
1+
import clsx from "clsx";
2+
import Link from "@docusaurus/Link";
3+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
4+
import Layout from "@theme/Layout";
5+
import HomepageFeatures from "@site/src/components/HomepageFeatures";
6+
import Heading from "@theme/Heading";
77

8-
import styles from './index.module.css';
8+
import styles from "./index.module.css";
99

1010
function HomepageHeader() {
1111
const { siteConfig } = useDocusaurusContext();
1212
return (
13-
<header className={clsx('--landing', styles.heroBanner)}>
13+
<header className={clsx("--landing", styles.heroBanner)}>
1414
<div className="container">
1515
<Heading as="h1" className="hero__title">
1616
{siteConfig.title}
1717
</Heading>
18-
<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>
19-
<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>
18+
<p className="hero__subtitle">
19+
Articles, guides, tips and tricks from and for frogs and forgis of the
20+
Graphics Programming discord.
21+
<br />
22+
This is what we do
23+
</p>
24+
<iframe
25+
className={styles.ytEmbed}
26+
width="960"
27+
height="520"
28+
src="https://www.youtube.com/embed/E07I1VRYlcg?si=PUsHfqq3YKLIp2kS"
29+
title="YouTube video player"
30+
frameborder="0"
31+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
32+
referrerpolicy="strict-origin-when-cross-origin"
33+
allowfullscreen
34+
></iframe>
2035
<div className={styles.buttons}>
21-
<Link
22-
className="button button--secondary button--lg test"
23-
to="/blog">
36+
<Link className="button button--secondary button--lg test" to="/blog">
2437
Discover our Blog
2538
</Link>
2639
<Link
2740
className="button button--secondary button--lg test"
28-
to="https://discord.gg/">
41+
to="https://discord.gg/"
42+
>
2943
Join our Discord Server
3044
</Link>
3145
</div>
@@ -39,23 +53,30 @@ export default function Home(): JSX.Element {
3953
return (
4054
<Layout
4155
title={`Hello from ${siteConfig.title}`}
42-
description="Description will go into a meta tag in <head />">
56+
description="Description will go into a meta tag in <head />"
57+
>
4358
<HomepageHeader />
4459
<main>
4560
<HomepageFeatures />
4661

47-
<div style={{
48-
display: 'flex',
49-
gap: '0.25rem',
50-
justifyContent: 'center',
51-
}}>
62+
<div
63+
style={{
64+
display: "flex",
65+
gap: "0.25rem",
66+
justifyContent: "center",
67+
}}
68+
>
5269
<a href="/webring/frogs/gp-blog/prev">⬅️</a>
53-
<a href="/webring/frogs/">
54-
<img src="/img/froge.webp" alt="a friendly froge" style={{
55-
objectFit: 'contain',
56-
width: '1.5em',
57-
height: '1.5em',
58-
}} />
70+
<a href="/webring/">
71+
<img
72+
src="/img/froge.webp"
73+
alt="a friendly froge"
74+
style={{
75+
objectFit: "contain",
76+
width: "1.5em",
77+
height: "1.5em",
78+
}}
79+
/>
5980
</a>
6081
<a href="/webring/frogs/gp-blog/next">➡️</a>
6182
</div>

‎src/pages/webring.tsx renamed to ‎src/pages/webring/index.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,34 @@ export default function Hello() {
3535
</li>
3636
))}
3737
</ul>
38+
39+
<hr />
40+
41+
<div
42+
style={{
43+
display: "flex",
44+
gap: "0.25rem",
45+
justifyContent: "center",
46+
}}
47+
>
48+
<a href="/webring/frogs/gp-blog/prev">⬅️</a>
49+
<a href="/webring/">
50+
<img
51+
src="/img/froge.webp"
52+
alt="a friendly froge"
53+
style={{
54+
objectFit: "contain",
55+
width: "1.5em",
56+
height: "1.5em",
57+
}}
58+
/>
59+
</a>
60+
<a href="/webring/frogs/gp-blog/next">➡️</a>
61+
</div>
62+
63+
<a style={{ textAlign: "center" }} href="join">
64+
Join the GP webring
65+
</a>
3866
</div>
3967
</Layout>
4068
);

‎src/pages/webring/join.md

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import Tabs from '@theme/Tabs';
2+
import TabItem from '@theme/TabItem';
3+
4+
# Join the GP webring
5+
6+
Do you have a cool website or blog that can be part of the GP webring? Join us!
7+
8+
## 1. Add yourself to the webring
9+
10+
To join the webring, add yourself to the [froglist](https://github.com/GraphicsProgramming/blog/blob/main/static/webring/froglist.json),
11+
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
12+
asking to be added.
13+
14+
Simply add a new entry at the end of the JSON file with your website's data:
15+
16+
```json
17+
{
18+
// A short name to identify your site.
19+
// This will be in the URL, so keep it short and url-friendly (no spaces or special characters)
20+
"name": "your-name-here",
21+
"url": "https://link-to-my-cool.website",
22+
"displayName": "Your Name Here",
23+
"description": "A short description of your cool website"
24+
}
25+
```
26+
27+
## 2. Add the webring links to your site
28+
29+
Once you've added yourself to the froglist, add the webring links to your website. Make sure they're visible from the homepage!
30+
31+
You can find templates for the links below, for plain HTML or react. Simply copy and paste the appropriate code somewhere in your
32+
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
33+
so people know you're part of the webring.
34+
35+
<Tabs>
36+
<TabItem value="html" label="HTML" default>
37+
```html
38+
<div style="display: flex, gap: 0.25rem, justify-content: center">
39+
<a href="https://graphics-programming.org/webring/frogs/[YOUR_WEBRING_NAME]/prev">⬅️</a>
40+
<a href="https://graphics-programming.org/webring/">
41+
<img
42+
src="https://graphics-programming.org/img/froge.webp"
43+
alt="a friendly froge"
44+
style="object-fit: contain, width: 1.5em, height: 1.5em"
45+
/>
46+
</a>
47+
<a href="https://graphics-programming.org/webring/frogs/[YOUR_WEBRING_NAME]/next">➡️</a>
48+
</div>
49+
```
50+
</TabItem>
51+
<TabItem value="react" label="JSX (React)" default>
52+
```tsx
53+
<div
54+
style={{
55+
display: "flex",
56+
gap: "0.25rem",
57+
justifyContent: "center",
58+
}}
59+
>
60+
<a href="https://graphics-programming.org/webring/frogs/[YOUR_WEBRING_NAME]/prev">⬅️</a>
61+
<a href="https://graphics-programming.org/webring/">
62+
<img
63+
src="https://graphics-programming.org/img/froge.webp"
64+
alt="a friendly froge"
65+
style={{
66+
objectFit: "contain",
67+
width: "1.5em",
68+
height: "1.5em",
69+
}}
70+
/>
71+
</a>
72+
<a href="https://graphics-programming.org/webring/frogs/[YOUR_WEBRING_NAME]/next">➡️</a>
73+
</div>
74+
```
75+
</TabItem>
76+
<TabItem value="react-tw" label="JSX + Tailwind CSS" default>
77+
```tsx
78+
<div className="flex flex-row gap-1 justify-center">
79+
<a href="https://graphics-programming.org/webring/frogs/[YOUR_WEBRING_NAME]/prev">⬅️</a>
80+
<a href="https://graphics-programming.org/webring/">
81+
<img
82+
className="object-contain w-6 h-6"
83+
src="https://graphics-programming.org/img/froge.webp"
84+
alt="a friendly froge"
85+
/>
86+
</a>
87+
<a href="https://graphics-programming.org/webring/frogs/[YOUR_WEBRING_NAME]/next">➡️</a>
88+
</div>
89+
```
90+
</TabItem>
91+
</Tabs>

0 commit comments

Comments
 (0)