Skip to content

Created a Video component and updated the code with new component. #180

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 5 commits into from
Aug 9, 2022
Merged

Created a Video component and updated the code with new component. #180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a7b7613
Video component and update everywhere with it
alexandriaroberts Aug 5, 2022
2993dc8
fixed an error with video component
alexandriaroberts Aug 5, 2022
3b95bc5
Added Vieo and difficult to MDXLayout file and updated Video name
alexandriaroberts Aug 6, 2022
453b431
Add `youtube` prop to `VideoEmbed` component
benface Aug 9, 2022
bd670c0
Run Prettier
benface Aug 9, 2022
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
27 changes: 27 additions & 0 deletions components/VideoEmbed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { HTMLAttributes } from 'react'

export type VideoProps = (
| {
/** Video embed URL. */
src: string
youtube?: never
}
| {
/** YouTube video ID. */
youtube: string
src?: never
}
) &
HTMLAttributes<HTMLElement>

export const VideoEmbed = ({ src, youtube, ...props }: VideoProps) => {
return (
<figure sx={{ paddingBottom: `${100 / (16 / 9)}%` }} {...props}>
<iframe
src={src ?? `https://www.youtube.com/embed/${youtube}`}
allowFullScreen
sx={{ position: 'absolute', left: 0, top: 0, width: '100%', height: '100%' }}
/>
</figure>
)
}
1 change: 1 addition & 0 deletions components/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ export * from './List'
export * from './NavTree'
export * from './Paragraph'
export * from './Table'
export * from './VideoEmbed'
14 changes: 4 additions & 10 deletions layout/MDXLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ import {
ListUnordered,
Paragraph,
Table,
VideoEmbed,
Difficulty,
} from '@/components'
import { useI18n } from '@/i18n'
import { NavItemGroup } from '@/navigation'
Expand All @@ -47,6 +49,8 @@ const mdxComponents = {
ul: ListUnordered,
p: Paragraph,
table: Table,
VideoEmbed,
Difficulty,
}

const mdxStyles = {
Expand All @@ -56,16 +60,6 @@ const mdxStyles = {
display: 'block',
textAlign: 'center',
},
'.video-container': {
paddingBottom: `${100 / (16 / 9)}%`,
},
'.video-iframe': {
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
},
} as ThemeUIStyleObject

export type MDXLayoutProps = PropsWithChildren<
Expand Down
10 changes: 1 addition & 9 deletions pages/ar/cookbook/migrating-a-subgraph.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,15 +147,7 @@ _بينما تتم هذه الآلية حاليا على الشبكة ، ينا

إذا كنت لا تزال في حيرة من أمرك ، فلا تخف! راجع المصادر التالية أو شاهد الفيديو الخاص بنا حول ترحيل الـ subgraphs إلى الشبكة اللامركزية أدناه:

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/CzdQ3dFFrjo"
title="مشغل فيديو يوتيوب"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="CzdQ3dFFrjo" />

- [عقود شبكة The Graph](https://github.com/graphprotocol/contracts)
- [ عقد التنسيق](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - العقد الأساسي الذي تلتف حوله GNS
Expand Down
10 changes: 1 addition & 9 deletions pages/ar/deploying/subgraph-studio.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,7 @@ title: كيفية استخدام Subgraph Studio

لقد نجحت في الوصول إلى هذا الحد - تهانينا! نشر الـ subgraph يعني أنه تم إنشاء IPFS hash عند نشرك لـ subgraph ضمن CLI وتخزينه في عقود Ethereum الذكية للشبكة. ولنشر الـ subgraph الخاص بك بنجاح ، ستحتاج إلى اتباع الخطوات التالية الموجزة في هذه [ المدونة ](https://thegraph.com/blog/building-with-subgraph-studio). راجع الفيديو أدناه أيضًا:

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/HfDgC2oNnwo"
title="مشغل فيديو يوتيوب"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="HfDgC2oNnwo" />

تذكر ، أثناء تقدمك في تدفق النشر ، ستتمكن من الدفع(push) إما إلى mainnet أو Rinkeby ، وهي testnet التي ندعمها. إذا كنت مطور subgraph لأول مرة ، فنحن نقترح بشدة أن تبدأ بالنشر على Rinkeby ، وهو مجاني. سيسمح لك ذلك بمعرفة كيفية عمل الـ subgraph في The Graph Explorer وسيسمح لك باختبار عناصر التنسيق.

Expand Down
10 changes: 1 addition & 9 deletions pages/ar/network/curating.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,4 @@ title: (التنسيق) curating

لازلت مشوشا؟ راجع فيديو دليل التنسيق أدناه:

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/VytTEcf0dxQ"
title="مشغل فيديو يوتيوب"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="VytTEcf0dxQ" />
10 changes: 1 addition & 9 deletions pages/ar/network/delegating.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,12 +91,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p

This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/2G7S2gdURdc"
title="مشغل فيديو يوتيوب"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="2G7S2gdURdc" />
10 changes: 1 addition & 9 deletions pages/ar/network/explorer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,7 @@ title: مستكشف

مرحبا بك في مستكشف Graph ، أو كما نحب أن نسميها ، بوابتك اللامركزية في عالم subgraphs وبيانات الشبكة. 👩🏽‍🚀 مستكشف TheGraph يتكون من عدة اجزاء حيث يمكنك التفاعل مع مطوري Subgraphs الاخرين ، ومطوري dApp ،والمنسقين والمفهرسين، والمفوضين. للحصول على نظرة عامة حول the Graph Explorer، راجع الفيديو أدناه (أو تابع القراءة أدناه):

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/u224xf7rEBY"
title="مشغل فيديو يوتيوب"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="u224xf7rEBY" />

## Subgraphs

Expand Down
2 changes: 0 additions & 2 deletions pages/ar/network/indexing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
title: فهرسة (indexing)
---

import { Difficulty } from '@/components'

المفهرسون ( Indexers) هم مشغلي العقد (node) في شبكة TheGraph ويقومون ب staking لتوكن (GRT) من أجل توفير خدمات الفهرسة ( indexing) والاستعلام. المفهرسون(Indexers) يحصلون على رسوم الاستعلام ومكافآت الفهرسة وذلك مقابل خدماتهم. وأيضا يكسبون من مجموعة الخصومات (Rebate Pool) والتي تتم مشاركتها مع جميع المساهمين في الشبكة بما يتناسب مع عملهم ، وفقا ل Cobbs-Douglas Rebate Function.

يخضع GRT المخزن في البروتوكول لفترة إذابة thawing period وقد يتم شطبه إذا كان المفهرسون ضارون ويقدمون بيانات غير صحيحة للتطبيقات أو إذا قاموا بالفهرسة بشكل غير صحيح. المفهرسون يتم تفويضهم من قبل المفوضين وذلك للمساهمه في الشبكة.
Expand Down
10 changes: 1 addition & 9 deletions pages/ar/querying/billing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,7 @@ title: الفوترة على Subgraph Studio

للحصول على عرض توضيحي سريع لكيفية عمل الفوترة في Subgraph Studio ، راجع الفيديو أدناه:

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/UrfIpm-Vlgs"
title="مشغل فيديو يوتيوب"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="UrfIpm-Vlgs" />

### مستخدمو Multisig

Expand Down
10 changes: 1 addition & 9 deletions pages/en/cookbook/migrating-a-subgraph.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,15 +147,7 @@ Remember that it's a dynamic and growing market, but how you interact with it is

If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/CzdQ3dFFrjo"
title="YouTube video player"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="CzdQ3dFFrjo" />

- [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
- [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
Expand Down
10 changes: 1 addition & 9 deletions pages/en/deploying/subgraph-studio.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,7 @@ If you’d like to test your subgraph before publishing it to the network, you c

You’ve made it this far - congrats! Publishing your subgraph means that an IPFS hash was generated when you deployed the subgraph within the CLI and is stored in the network’s Ethereum smart contracts. In order to publish your subgraph successfully, you’ll need to go through the following steps outlined in this [blog](https://thegraph.com/blog/building-with-subgraph-studio). Check out the video overview below as well:

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/HfDgC2oNnwo"
title="YouTube video player"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="HfDgC2oNnwo" />

Remember, while you’re going through your publishing flow, you’ll be able to push to either mainnet or Rinkeby, the testnet we support. If you’re a first-time subgraph developer, we highly suggest you start with publishing to Rinkeby, which is free to do. This will allow you to see how the subgraph will work in The Graph Explorer and will allow you to test curation elements.

Expand Down
5 changes: 3 additions & 2 deletions pages/en/developing/creating-a-subgraph.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,9 @@ Options:
The `add` command will fetch the ABI from Etherscan (unless an ABI path is specified with the `--abi` option), and will create a new `dataSource` in the same way that `graph init` command creates a `dataSource` `--from-contract`, updating the schema and mappings accordingly.

The `--merge-entities` option identifies how the developer would like to handle `entity` and `event` name conflicts:
- If `true`: the new `dataSource` should use existing `eventHandlers` & `entities`.
- If `false`: a new entity & event handler should be created with `${dataSourceName}{EventName}`.

- If `true`: the new `dataSource` should use existing `eventHandlers` & `entities`.
- If `false`: a new entity & event handler should be created with `${dataSourceName}{EventName}`.

The contract `address` will be written to the `networks.json` for the relevant network.

Expand Down
10 changes: 1 addition & 9 deletions pages/en/network/curating.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,4 @@ Curation shares cannot be "bought" or "sold" like other ERC20 tokens that you ma

Still confused? Check out our Curation video guide below:

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/VytTEcf0dxQ"
title="YouTube video player"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="VytTEcf0dxQ" />
10 changes: 1 addition & 9 deletions pages/en/network/delegating.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,12 +95,4 @@ At times, attempts to delegate to indexers via MetaMask can fail and result in p

This guide provides a full review of this document, and how to consider everything in this document while interacting with the UI.

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/2G7S2gdURdc"
title="YouTube video player"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="2G7S2gdURdc" />
10 changes: 1 addition & 9 deletions pages/en/network/explorer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,7 @@ title: Graph Explorer

Welcome to the Graph Explorer, or as we like to call it, your decentralized portal into the world of subgraphs and network data. 👩🏽‍🚀 The Graph Explorer consists of multiple parts where you can interact with other subgraph developers, dapp developers, Curators, Indexers, and Delegators. For a general overview of the Graph Explorer, check out the video below (or keep reading below):

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/u224xf7rEBY"
title="YouTube video player"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="u224xf7rEBY" />

## Subgraphs

Expand Down
2 changes: 0 additions & 2 deletions pages/en/network/indexing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
title: Indexing
---

import { Difficulty } from '@/components'

Indexers are node operators in The Graph Network that stake Graph Tokens (GRT) in order to provide indexing and query processing services. Indexers earn query fees and indexing rewards for their services. They also earn from a Rebate Pool that is shared with all network contributors proportional to their work, following the Cobbs-Douglas Rebate Function.

GRT that is staked in the protocol is subject to a thawing period and can be slashed if Indexers are malicious and serve incorrect data to applications or if they index incorrectly. Indexers can also be delegated stake from Delegators, to contribute to the network.
Expand Down
10 changes: 1 addition & 9 deletions pages/en/querying/billing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,7 @@ There are 4 states your invoice can be in:

For a quick demo of how billing works on the Subgraph Studio, check out the video below:

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/UrfIpm-Vlgs"
title="YouTube video player"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="UrfIpm-Vlgs" />

### Multisig Users

Expand Down
10 changes: 1 addition & 9 deletions pages/es/cookbook/migrating-a-subgraph.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,15 +147,7 @@ Remember that it's a dynamic and growing market, but how you interact with it is

If you're still confused, fear not! Check out the following resources or watch our video guide on migrating subgraphs to the decentralized network below:

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/CzdQ3dFFrjo"
title="Reproductor de video de YouTube"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="CzdQ3dFFrjo" />

- [The Graph Network Contracts](https://github.com/graphprotocol/contracts)
- [Curation Contract](https://github.com/graphprotocol/contracts/blob/dev/contracts/curation/Curation.sol) - the underlying contract that the GNS wraps around
Expand Down
10 changes: 1 addition & 9 deletions pages/es/deploying/subgraph-studio.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,7 @@ If you’d like to test your subgraph before publishing it to the network, you c

You’ve made it this far - congrats! Publishing your subgraph means that an IPFS hash was generated when you deployed the subgraph within the CLI and is stored in the network’s Ethereum smart contracts. In order to publish your subgraph successfully, you’ll need to go through the following steps outlined in this [blog](https://thegraph.com/blog/building-with-subgraph-studio). Check out the video overview below as well:

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/HfDgC2oNnwo"
title="Reproductor de video de YouTube"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="HfDgC2oNnwo" />

Remember, while you’re going through your publishing flow, you’ll be able to push to either mainnet or Rinkeby, the testnet we support. If you’re a first time subgraph developer, we highly suggest you start with publishing to Rinkeby, which is free to do. This will allow you to see how the subgraph will work in The Graph Explorer and will allow you to test curation elements.

Expand Down
10 changes: 1 addition & 9 deletions pages/es/network/curating.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,4 @@ Las participaciones de un curador no se pueden "comprar" o "vender" como otros t

¿Sigues confundido? Te invitamos a echarle un vistazo a nuestra guía en un vídeo que aborda todo sobre la curación:

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/VytTEcf0dxQ"
title="Reproductor de video de YouTube"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="VytTEcf0dxQ" />
10 changes: 1 addition & 9 deletions pages/es/network/delegating.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,12 +96,4 @@ A veces, los intentos de delegar a los Indexadores a través de MetaMask pueden

Esta guía proporciona una revisión completa de este documento, y cómo tener en cuenta todo lo que contiene mientras se interactúa con la interfaz de usuario.

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/2G7S2gdURdc"
title="Reproductor de video de YouTube"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="2G7S2gdURdc" />
10 changes: 1 addition & 9 deletions pages/es/network/explorer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,7 @@ title: Graph Explorer

Bienvenido al explorador de The Graph, o como nos gusta llamarlo, tu portal descentralizado al mundo de los subgrafos y los datos de la red. 👩🏽‍🚀 Este explorador de The Graph consta de varias partes en las que puedes interactuar con otros desarrolladores de subgrafos, desarrolladores de dApp, Curadores, Indexadores y Delegadores. Para obtener una descripción general de The Graph Explorer, échale un vistazo al siguiente video (o sigue leyendo lo que hemos escrito para ti):

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/u224xf7rEBY"
title="Reproductor de video de YouTube"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="u224xf7rEBY" />

## Subgrafos

Expand Down
2 changes: 0 additions & 2 deletions pages/es/network/indexing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
title: Indexador
---

import { Difficulty } from '@/components'

Los Indexadores son operadores de nodos en The Graph Network que stakean Graph Tokens (GRT) para proporcionar servicios de indexación y procesamiento de consultas. Los Indexadores obtienen tarifas de consulta y recompensas de indexación por sus servicios. También obtienen ganacias de un pool de reembolso que se comparte con todos los contribuyentes de la red en proporción a su trabajo, siguiendo la idea de Function Rebate por parte de Cobbs-Douglas.

Los GRT que se bloquean (en stake) dentro del protocolo están sujetos a un período de descongelación y pueden ser reducidos si los Indexadores son maliciosos y entregan datos incorrectos a las aplicaciones o si indexan información incorrecta. A los Indexadores también se les puede asignar participaciones por parte de los Delegadores, quienes buscan contribuir a la red.
Expand Down
10 changes: 1 addition & 9 deletions pages/es/querying/billing.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,7 @@ Hay 4 estados en los que puede estar tu factura:

Si quieres ver una demostración rápida de cómo funciona la facturación en Subgraph Studio, mira el siguiente video:

<figure className="video-container">
<iframe
className="video-iframe"
src="https://www.youtube.com/embed/UrfIpm-Vlgs"
title="Reproductor de video de YouTube"
frameBorder="0"
allowFullScreen
></iframe>
</figure>
<VideoEmbed youtube="UrfIpm-Vlgs" />

### Usuarios Multisig

Expand Down
Loading