From 77a38f3ae905fdaa79aef16e7d9c991079012fab Mon Sep 17 00:00:00 2001 From: Shu Uesugi Date: Sun, 27 Oct 2019 18:42:51 -0700 Subject: [PATCH 1/3] Start intro --- src/components/CardContent.tsx | 2 +- src/components/H.tsx | 29 ++++++- src/contents/0.en.tsx | 151 ++++++++++++++++++++++++++++++++- src/lib/date.tsx | 2 +- 4 files changed, 179 insertions(+), 5 deletions(-) diff --git a/src/components/CardContent.tsx b/src/components/CardContent.tsx index 68bebf4e4..95e6e4e44 100644 --- a/src/components/CardContent.tsx +++ b/src/components/CardContent.tsx @@ -5,7 +5,7 @@ import ExpressionRunnerScrollAdjuster from 'src/components/ExpressionRunnerScrol export interface CardContentProps { children: React.ReactNode preview?: { - content: React.ReactNode + content?: React.ReactNode text: React.ReactNode afterText?: React.ReactNode } diff --git a/src/components/H.tsx b/src/components/H.tsx index 2d2200302..d106d3f3e 100644 --- a/src/components/H.tsx +++ b/src/components/H.tsx @@ -122,6 +122,7 @@ interface HProps { | { name: 'categoryNameColored' category: keyof typeof episodePrefixes + text?: React.ReactNode } | { name: 'stoppedForExplanation' } | { name: 'pageNotFound' } @@ -203,7 +204,7 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => { color: ${prefixColors[args.category]}; `} > - {episodePrefixes[args.category]} + {args.text || episodePrefixes[args.category]} ) } @@ -1088,7 +1089,31 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => { } if (args.name === 'dateAndSource') { if (locale === 'en') { - return <>? + return ( + <> +

+ {args.includeAboutMe && ( + <> + Author: Shu Uesugi ( + + Website + {' '} + ·{' '} + + Twitter + + ) +
+ + )} + Published on:{' '} + +
+ Source code:{' '} + Available on GitHub +

+ + ) } else { return ( <> diff --git a/src/contents/0.en.tsx b/src/contents/0.en.tsx index 3688041e4..d93a01868 100644 --- a/src/contents/0.en.tsx +++ b/src/contents/0.en.tsx @@ -1,4 +1,153 @@ import React from 'react' import EpisodeCardList from 'src/components/EpisodeCardList' +// import { +// numEpisodesExceptFirstAndLast, +// numTotalPages +// } from 'src/lib/episodeCategories' +import { + Highlight, + // Img, + // ExternalLink, + P, + HighlightBold, + Bold + // Ol, + // OlLi, + // Hr +} from 'src/components/ContentTags' +import Emoji from 'src/components/Emoji' +import CustomEmoji from 'src/components/CustomEmoji' +import EmojiSeparator from 'src/components/EmojiSeparator' +// import BubbleQuotes from 'src/components/BubbleQuotes' +// import NextLessonButton from 'src/components/NextLessonButton' +import CardContent from 'src/components/CardContent' +import Toc from 'src/components/Toc' +import H from 'src/components/H' +// import { lessonTitle } from 'src/lib/titles' +// import YoutubeEmbed from 'src/components/YoutubeEmbed' +// import { githubRepo } from 'src/lib/meta' +// import * as R from 'src/components/Runners' -export default () => +export default () => ( + Welcome!, + content: ( + <> +

+ 🤗 Welcome! This is an interactive + online course where{' '} + + non-programmers can learn learn about{' '} + Y Combinator. + {' '} + It’s 100% free, and you can do it + from your smartphone, tablet, or computer. +

+ + It’s 100% free, and you can do + it from +
+ your smartphone, tablet, or computer. + + } + /> +

+ Overview: This course + consists of{' '} + + 5 beginner levels + }} + /> + + ,{' '} + + 5 intermediate levels + }} + /> + + , and{' '} + + 5 advanced levels + }} + /> + + . It should take about 2 to 3 hours{' '} + to read for most people. +

+ + + 5 beginner levels + }} + /> + + ,{' '} + + 5 intermediate levels + }} + /> + + ,
+ and{' '} + + 5 advanced levels + }} + /> + + + } + /> + Press here to view the table of contents. + }} + > + Table of Contents: Press each title below to jump to + that page. + + + + ), + footer: { + content: ( + <> + + + ) + } + } + ]} + /> +) diff --git a/src/lib/date.tsx b/src/lib/date.tsx index 15669ec1d..4b3fa8317 100644 --- a/src/lib/date.tsx +++ b/src/lib/date.tsx @@ -3,7 +3,7 @@ import { DateTime } from 'luxon' export const date = { jp: DateTime.fromISO('2019-09-09T00:00:00Z'), - en: DateTime.fromISO('2019-10-07T00:00:00Z') + en: DateTime.fromISO('2019-10-31T12:00:00Z') }[locale] export const dateString = { From ad60a73ca5866bd43ce417376b49fe74faa67c75 Mon Sep 17 00:00:00 2001 From: Shu Uesugi Date: Sun, 27 Oct 2019 19:30:11 -0700 Subject: [PATCH 2/3] Continue with 0 --- src/components/EpisodePageFooter.tsx | 2 +- src/contents/0.en.tsx | 64 ++++++++++++++++++++++++++-- 2 files changed, 61 insertions(+), 5 deletions(-) diff --git a/src/components/EpisodePageFooter.tsx b/src/components/EpisodePageFooter.tsx index 97689253e..0d2f49332 100644 --- a/src/components/EpisodePageFooter.tsx +++ b/src/components/EpisodePageFooter.tsx @@ -48,7 +48,7 @@ const EpisodePageFooter = () => { css={linkClasses} > - + {' '} ·{' '} Twemoji diff --git a/src/contents/0.en.tsx b/src/contents/0.en.tsx index d93a01868..82281e8f3 100644 --- a/src/contents/0.en.tsx +++ b/src/contents/0.en.tsx @@ -7,10 +7,11 @@ import EpisodeCardList from 'src/components/EpisodeCardList' import { Highlight, // Img, - // ExternalLink, + ExternalLink, P, HighlightBold, - Bold + Bold, + Italic // Ol, // OlLi, // Hr @@ -43,8 +44,9 @@ export default () => ( non-programmers can learn learn about{' '} Y Combinator. {' '} - It’s 100% free, and you can do it - from your smartphone, tablet, or computer. + It’s 100% free (no signup + required), and you can do it from your smartphone, tablet, or + computer.

( ) } + }, + { + title: <>Have you heard of “Y Combinator”?, + content: ( + <> +

+ 🤔 Have you heard of “Y Combinator”?{' '} + If you’re into technology, you might have heard that{' '} + + Y Combinator is the name of a startup investing firm. + {' '} +

+

+ + Y Combinator + + , the startup investing firm, has invested in more than 2000 + startups since 2005.{' '} + + The combined valuation of top companies + {' '} + (such as AirBnB) is more than $150 billion dollars as of October + 2019. +

+ + Y Combinator is the name of +
a startup investing firm + + } + /> +

+ ⚠️ However: In this course, we will + NOT talk about this startup investing firm.{' '} + + Y Combinator is actually the name of{' '} + an important concept in computer science, and + that’s what we’re going to talk about in this course. + +

+ + Y Combinator is actually the name of +
+ an important concept in computer science + + } + /> + + ) } ]} /> From 7933e388e63b52667a23760a2e192979450acd94 Mon Sep 17 00:00:00 2001 From: Shu Uesugi Date: Sun, 27 Oct 2019 20:22:56 -0700 Subject: [PATCH 3/3] Intro --- src/components/EmojiSeparator.tsx | 17 +++++ src/components/H.tsx | 8 ++- src/contents/0.en.tsx | 114 ++++++++++++++++++++++++++++-- src/contents/0.jp.tsx | 14 ++++ src/lib/meta.ts | 5 +- 5 files changed, 148 insertions(+), 10 deletions(-) diff --git a/src/components/EmojiSeparator.tsx b/src/components/EmojiSeparator.tsx index 77e4be458..116f888d0 100644 --- a/src/components/EmojiSeparator.tsx +++ b/src/components/EmojiSeparator.tsx @@ -23,6 +23,7 @@ interface EmojiSeparatorProps { description?: React.ReactNode noBottomMargin: boolean noTopMargin: boolean + topDescription?: React.ReactNode } const fontSize = (size: EmojiSeparatorProps['size']) => @@ -63,6 +64,7 @@ const EmojiSeparator = ({ alignCenter, cssOverrides, description, + topDescription, noBottomMargin, noTopMargin }: EmojiSeparatorProps) => ( @@ -81,6 +83,21 @@ const EmojiSeparator = ({ ]} > <> + {topDescription && ( +
+ {topDescription} +
+ )} {
Source code:{' '} Available on GitHub +
+ Japanese translation:{' '} + 日本語版はこちら

) @@ -1133,6 +1136,9 @@ const H = ({ args, highlightType, episodeNumberOverrides }: HProps) => {
ソースコード:{' '} GitHubで公開中 +
+ 英語版:{' '} + 英語版はこちら {args.includeTwitter && ( <>
diff --git a/src/contents/0.en.tsx b/src/contents/0.en.tsx index 82281e8f3..3584dfe11 100644 --- a/src/contents/0.en.tsx +++ b/src/contents/0.en.tsx @@ -19,8 +19,8 @@ import { import Emoji from 'src/components/Emoji' import CustomEmoji from 'src/components/CustomEmoji' import EmojiSeparator from 'src/components/EmojiSeparator' -// import BubbleQuotes from 'src/components/BubbleQuotes' -// import NextLessonButton from 'src/components/NextLessonButton' +import BubbleQuotes from 'src/components/BubbleQuotes' +import NextLessonButton from 'src/components/NextLessonButton' import CardContent from 'src/components/CardContent' import Toc from 'src/components/Toc' import H from 'src/components/H' @@ -151,7 +151,35 @@ export default () => ( } }, { - title: <>Have you heard of “Y Combinator”?, + title: <>Start now, or read the introduction, + content: ( + <> +

+ 😁{' '} + If you want to get started as soon as possible:{' '} + + Press the button below to go to the next page! + +

+ +

+ 🤔{' '} + If you want to read the introduction before you get + started, scroll down and keep reading! +

+ , + , + + ]} + topDescription={<>Scroll down to read the introduction!} + /> + + ) + }, + { + title: <>Introduction: Have you heard of “Y Combinator”?, content: ( <>

@@ -168,10 +196,10 @@ export default () => ( , the startup investing firm, has invested in more than 2000 startups since 2005.{' '} - The combined valuation of top companies + The combined valuation {' '} - (such as AirBnB) is more than $150 billion dollars as of October - 2019. + of top companies they invested (such as AirBnB) is more than $150 + billion dollars as of October 2019.

( Y Combinator is actually the name of{' '} an important concept in computer science, and - that’s what we’re going to talk about in this course. + that’s what we’re going to talk about.

( } /> +

+ In fact: The startup investing firm Y Combinator was{' '} + named after this computer science concept. Paul + Graham, a co-founder of the firm, said this in{' '} + + his 2010 interview + + , when asked why he named his firm “Y Combinator”: +

+ +

+ [Y Combinator is] a programming trick. … I wanted to + call it Y Combinator just because I thought the Y + Combinator was a really cool thing. So it would be the + perfect name for picking out the kind of people that we + wanted. +

+

+ Hackers would look at this and think,{' '} + + “That’s so cool. They’re named after the Y Combinator. + There must be something going on here.” + {' '} + And suits would look at it and think,{' '} + “Y Combinator, what’s that?” +

+

+ That was what we wanted. We wanted hackers to notice us, + and suits, we didn’t care. +

+ + ) + } + ]} + /> +

+ Explanation of the above quote: Paul Graham, a + computer scientist,{' '} + + wanted to invest in entrepreneurs who are also programmers + (“hackers” 😎) + + . So he named his investing firm “Y Combinator”, which is a + computer science (programming) term, in order to attract hackers. +

+

+ And because Y Combinator is a very technical computer science + concept,{' '} + + he assumed businesspeople (“suits” 👔), who he + didn’t care about, won’t understand what it means. + +

+ + Hackers vs Suits: +
+ To attract programmers, Paul Graham +
+ named his investing firm “Y Combinator”, +
+ an important computer science concept. + + } + /> ) } diff --git a/src/contents/0.jp.tsx b/src/contents/0.jp.tsx index 75a06e146..ff40e8c4c 100644 --- a/src/contents/0.jp.tsx +++ b/src/contents/0.jp.tsx @@ -165,6 +165,20 @@ export default () => ( 」という方は、そのまま下に読み進めてみてください。

+ , + , + + ]} + topDescription={ + <> + 説明を読んでから始めるには +
+ 下にスクロールしてください！ + + } + /> ) }, diff --git a/src/lib/meta.ts b/src/lib/meta.ts index 2cc2a453c..2cfdf9a08 100644 --- a/src/lib/meta.ts +++ b/src/lib/meta.ts @@ -1,7 +1,8 @@ import locale from 'src/lib/locale' -export const baseUrl = - locale === 'en' ? 'https://yc.chibicode.com' : 'https://yj.chibicode.com' +export const jpBaseUrl = 'https://yj.chibicode.com' +export const enBaseUrl = 'https://ycombinator.chibicode.com' +export const baseUrl = locale === 'en' ? enBaseUrl : jpBaseUrl export const githubRepo = 'https://github.com/chibicode/yc'