diff --git a/web/components/Settings/OwnVideoSettings.js b/web/components/Settings/OwnVideoSettings.js index 0c3fc7b..622be60 100644 --- a/web/components/Settings/OwnVideoSettings.js +++ b/web/components/Settings/OwnVideoSettings.js @@ -1,132 +1,133 @@ import React, { Component, Fragment } from 'react' import { logout } from '../../services/auth' import _ from 'lodash' import { updateCodingSessionMetadata, deleteCodingSession } from '../../services/api' import { setCodingSessionMetadata } from '../../actions' import { connect } from 'react-redux' import redirect from '../../services/redirect' import withSettingsPortal from './withSettingsPortal' +import Link from 'next/link' const Visibility = ({visibility = 'public', isTeam, teamName, onChange}) => { const isCheckedPublic = visibility === 'public' const isCheckedTeam = visibility === 'team' const isCheckedPrivate = visibility === 'private' return

Who can watch?

{isTeam &&

onChange('team')}/> Team (only team can watch)

}

onChange('public')}/> Public (anyone)

onChange('private')}/> Private (only you)

} const Indexing = () =>

Indexing

Allow search engines

class OwnVideoSettings extends Component { state = { formFields: { title: _.get(this.props.codingSession, 'title', ''), description: _.get(this.props.codingSession, 'description', ''), visibility: _.get(this.props.codingSession, 'visibility', 'public'), } } onSubmitForm = async e => { e.preventDefault() const {formFields} = this.state const sessionId = _.get(this.props.codingSession, '_id') await updateCodingSessionMetadata(sessionId, formFields) this.props.setCodingSessionMetadata({ id: sessionId, ...formFields, }) } updateFormField = (key, value) => { this.setState({ formFields: { ...this.state.formFields, [key]: value } }) } deleteVideo = async () => { const confirmation = confirm('Are you sure you want to permanently delete this video?') if (!confirmation) { return } const sessionId = _.get(this.props.codingSession, '_id') await deleteCodingSession(sessionId) redirect(null, `/${this.props.currentUser.username}`) } render () { const {title, description, visibility} = this.state.formFields const {organizationId} = this.props.codingSession const onUpdateTitle = e => this.updateFormField('title', e.target.value) const onUpdateDescription = e => this.updateFormField('description', e.target.value) const onUpdateVisibility = visibility => this.updateFormField('visibility', visibility) return

Edit your coding session

Title

Description

Description Markdown Cheatsheet

<button type="submit">Save changes</button>
       <hr/>
       <button className="btn-delete" onClick={this.deleteVideo}>Delete video</button>
       <hr/>
       <button onClick={logout}>Logout from GitDuck</button>
     </form>
   }
 }
 
 const mapActions = {
   setCodingSessionMetadata,
 }
 
 const mapState = ({currentUser}) => ({
   currentUser: currentUser.user,
 })
 
 export default connect(mapState, mapActions)(withSettingsPortal(OwnVideoSettings))
diff --git a/web/pages/markdown-cheatsheet.js b/web/pages/markdown-cheatsheet.js
new file mode 100644
index 0000000..f7b488b
--- /dev/null
+++ b/web/pages/markdown-cheatsheet.js
@@ -0,0 +1,134 @@
+import React from 'react'
+import Page from '../components/Page'
+import Link from 'next/link'
+import Header from '../components/Header'
+import withFetchUsernameIfNeededPage from '../services/withFetchUsernameIfNeededPage'
+import { DefaultSeo } from 'next-seo';
+
+const FAQ = () => (
+  <Page>
+    <Header/>
+
+    <DefaultSeo
+        title = 'Markdown Cheatsheet'
+        canonical="https://gitduck.com/markdown"
+        description="Quick guide on how to use markdown in the GitDuck video descriptions."
+        openGraph={{
+          url: 'https://gitduck.com/markdown',
+          title: 'Markdown Cheatsheet',
+          description: 'Quick guide on how to use markdown in the GitDuck video descriptions.',
+        }}
+        />
+    <main className="main-content mt-5">
+      <div className="space-block"/>
+      <div className="container">
+        <div className="row align-items-center intructions-block">
+
+          <div className="col-md-10 col-lg-8 mx-auto">
+          <h1 className="pt-5">Markdown Cheatsheet</h1>
+          <p>Watch the <Link href="https://gitduck.com/watch/5ddfb0eb52c6cd87092595c9"><a>markdown cheatsheet</a></Link> in action.</p>
+          <br/>
+
+          <h3>Lists</h3>
+            <p>
+              1. First item<br/>
+              2. Second item<br/>
+              3. Third item<br/>
+            </p>
+            <p>
+              * Bullet list<br/>
+              * Bullet list<br/>
+              * Bullet list<br/>
+            </p>
+            
+          <hr/>
+
+          <h3>Emphasis</h3>
+            <p>
+              *italics* 👉 <italics>italics</italics><br/>
+              **bold** 👉 <strong>bold</strong><br/>
+              ~~strikethrough~~ 👉 <strike>strikethrough</strike><br/>
+              `code highlight` 👉 <code>code highlight</code><br/>
+              <br/>
+              > This is a quote 👇 <blockquote><p>This is quote</p></blockquote>
+              <br/>
+            </p>
+            <p>
+              
+              ```<br/>
+              block <br/>
+              of<br/>
+              text<br/>
+              ``` <br/>
+              👇
+              <pre><code>block<br/>
+              of<br/>
+              text</code></pre>
+              
+            </p>
+          <hr/>
+
+          <h3>Horizontal rule</h3>
+            <p>
+              ---
+              👇
+              <hr/>
+
+            </p>
+          <hr/>
+          
+          <h3>Link</h3>
+            <p>
+              [this is a link](https://gitduck.com) <br/>
+              <Link href="https://gitduck.com"><a>this is a link</a></Link>
+
+            </p>
+          <hr/>
+
+          
+
+          <h3>Images</h3>
+            <p>
+            ![alt text](https://media.giphy.com/media/ny7UCd6JETnmE/giphy.gif "Hover text")<br/><br/>
+
+            <img alt="alt text" src="https://media.giphy.com/media/ny7UCd6JETnmE/giphy.gif" title="Hover text"/>
+
+            </p>
+          <hr/>
+
+
+          <h3>Headers</h3>
+            <p>
+            # H1<br/>
+            ## H2<br/>
+            ### H3<br/>
+            #### H4<br/>
+            ##### H5<br/>
+            ###### H6<br/>
+            👇
+            <div className="h1">H1</div>
+            <div className="h2">H2</div>
+            <div className="h3">H3</div>
+            <div className="h4">H4</div>
+            <div className="h5">H5</div>
+            <div className="h6">H6</div>
+
+            </p>
+          <hr/>
+
+          
+
+          
+
+
+
+          </div>
+        </div>
+      </div>
+
+      
+    </main>
+  </Page>
+)
+
+export default withFetchUsernameIfNeededPage(FAQ)
</article></body></html>

Markdown examples

H1

H2

H3

H4

H5

H6

More coding videos

How to edit members of your GitDuck team

Coding session on August 15th

UI: new way to edit title and description

New privacy (video visibility) options

Improving chat UI and other details

Changing the UI for user menu and how to edit content in the profile