-
-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'open-sauced:main' into creating-custom-css-with-SVG
- Loading branch information
Showing
55 changed files
with
5,129 additions
and
2,663 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| name: Adds all issues opened in the /landing-page repo to the Team Dashboard | ||
|
|
||
| on: | ||
| issues: | ||
| types: | ||
| - opened | ||
|
|
||
| jobs: | ||
| add-to-project: | ||
| name: Add issue to project | ||
| runs-on: ubuntu-latest | ||
| steps: | ||
| - name: Generate token | ||
| id: generate_token | ||
| uses: tibdex/github-app-token@v1 | ||
| with: | ||
| app_id: ${{ secrets.OS_GITHUB_APP_ID }} | ||
| private_key: ${{ secrets.OS_GITHUB_APP_PRIVATE_KEY }} | ||
|
|
||
| - name: add issue to team dashboard | ||
| uses: actions/add-to-project@v0.5.0 | ||
| with: | ||
| project-url: https://github.com/orgs/open-sauced/projects/25 | ||
| github-token: ${{ steps.generate_token.outputs.token }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { AiOutlineStar } from "react-icons/ai"; | ||
|
|
||
| export const StarTheRepo = (): JSX.Element | null => { | ||
| return ( | ||
| <div className={`hidden sm:flex items-center text-osGrey transition-opacity font-Inter`}> | ||
| <a | ||
| href="https://github.com/open-sauced/app" | ||
|
|
||
| target="_blank" | ||
| > | ||
| <AiOutlineStar className="inline-block mr-2.5" /> | ||
|
|
||
| FOOLALA | ||
| <span className="text-md font-light mr-2.5"> | ||
| Star us on GitHub | ||
| </span> | ||
| </a> | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React, { FC } from 'react' | ||
| import Image from 'next/image' | ||
|
|
||
| // Static Assets | ||
| import StrokeL5 from '../../../public/background-strokes/stroke_l_5.svg' | ||
| import StrokeR4 from '../../../public/background-strokes/stroke_r_4.svg' | ||
| import StrokeMobile1 from '../../../public/background-strokes/stroke_mobile_1.svg' | ||
|
|
||
| interface BackgroundProps { | ||
| children: React.ReactNode | ||
| } | ||
|
|
||
| const Background: FC<BackgroundProps> = ({ children }) => { | ||
| return ( | ||
| <div className="bg-darkBG text-white h-fit relative"> | ||
| <div className="absolute hidden largeTablet:block largeTablet:top-[0rem] largeTablet:right-0"> | ||
| <Image alt="Doodles" src={StrokeR4} /> | ||
| </div> | ||
|
|
||
| <div className="absolute hidden largeTablet:block largeTablet:top-[1rem] largeTablet:left-0"> | ||
| <Image alt="Doodles" src={StrokeL5} /> | ||
| </div> | ||
|
|
||
| {/* MOBILE */} | ||
|
|
||
| <div className="absolute top-0 right-0 largeTablet:hidden"> | ||
| <Image alt="Doodles" src={StrokeMobile1} /> | ||
| </div> | ||
|
|
||
| <div className="relative">{children}</div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export default Background |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import React, { FC, useRef, useState } from 'react' | ||
| import { Typography } from '../../common/text' | ||
| import GradientBorderWrapper from '../../common/GradientBorderWrapper' | ||
| import { IoMdGitCommit } from "react-icons/io"; | ||
| import ReactMarkdown from 'react-markdown'; | ||
| import { MdOutlineExpandMore } from "react-icons/md"; | ||
| import { SanityChangelog } from '../../../types/schema'; | ||
| import moment from 'moment'; | ||
|
|
||
| interface ChangelogProps { | ||
| changelog: SanityChangelog | ||
| index: number | ||
| count: number | ||
| } | ||
|
|
||
| const Changelog: FC<ChangelogProps> = ({ | ||
| changelog: { | ||
| title, | ||
| date, | ||
| changelogCategory, | ||
| changelogContent, | ||
| topics, | ||
| slug | ||
| }, | ||
| index, | ||
| count | ||
| }) => { | ||
| const [isExpanded, setIsExpanded] = useState(false) | ||
| const contentRef = useRef<HTMLDivElement>(null) | ||
|
|
||
| // function to expand the changelog | ||
| const expandChangelog = () => { | ||
| setIsExpanded(!isExpanded) | ||
| } | ||
|
|
||
| const containerHeightStyle = { | ||
| overflow: "hidden", | ||
| transition: "height 0.5s ease-in-out", | ||
| height: isExpanded ? `${contentRef.current?.clientHeight}px` : "360px", | ||
| } | ||
|
|
||
| // check if the changelog content has an image | ||
| const hasImageInContent = changelogContent.includes("![image](") | ||
|
|
||
| // check the line of the changelog content | ||
| const lineCount = changelogContent.split("\n").length | ||
|
|
||
| return ( | ||
| <article className={`flex pb-24 gap-x-10 h-full relative border-textPrimary border-opacity-50 ${index+1 === count ? "" : "border-l-2"}`}> | ||
| <div className="relative pb-28"> | ||
| <section className={`hidden self-start sticky top-8 tablet:flex flex-1 pl-10 max-w-md flex-col `}> | ||
| <span> | ||
| <IoMdGitCommit className="absolute -left-3 rounded-3xl text-2xl p-1 text-white bg-gradient-to-tr from-[#ED5432] to-[#EDA232] drop-shadow-[0_0_4px_#ED5432]" /> | ||
| </span> | ||
| <Typography alignLarge="left" variant="title3"> | ||
| <a href={`/changelog/${slug?.current}`} className="hover:text-brandOrange hover:decoration-brandOrange transition-all"> | ||
| {title} | ||
| </a> | ||
| </Typography> | ||
| <span className="py-4"> | ||
| <Typography alignLarge="left" variant="body4"> | ||
| {moment(date).format("DD MMM YYYY")} | ||
| </Typography> | ||
| </span> | ||
| <div className="flex gap-3"> | ||
| {topics && topics.map((category, index) => ( | ||
| <GradientBorderWrapper key={index} style={{borderRadius: "16px"}}> | ||
| <div className="bg-darkBG rounded-2xl text-sm px-2 py-1"> | ||
| {category} | ||
| </div> | ||
| </GradientBorderWrapper> | ||
| ))} | ||
| </div> | ||
| </section> | ||
| </div> | ||
|
|
||
| <section className={`flex-1 relative pb-10 tablet:border-0 tablet:pl-0 pl-6 ${index+1 === count ? "" : "border-l-2"}`}> | ||
| <div className="tablet:hidden relative flex-col flex gap-y-2 pb-4"> | ||
| <span className=" -left-6 -top-4 z-50 absolute"> | ||
| <IoMdGitCommit className="absolute -left-4 top-4 bg-darkBG text-3xl" /> | ||
| </span> | ||
| <Typography alignLarge="left" variant="title3"> | ||
| {title} | ||
| </Typography> | ||
| <Typography alignLarge="left" variant="body4"> | ||
| {moment(date).format("DD MMM YYYY")} | ||
| </Typography> | ||
| <div className="flex gap-2"> | ||
| {topics && topics.map((category, index) => ( | ||
| <GradientBorderWrapper key={index} style={{ borderRadius: "16px"}}> | ||
| <div className="bg-darkBG rounded-2xl text-sm px-2 py-1"> | ||
| { category } | ||
| </div> | ||
| </GradientBorderWrapper> | ||
| ))} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div style={containerHeightStyle}> | ||
| <div className="relative" ref={contentRef}> | ||
| <ReactMarkdown | ||
| className="prose prose-headings:text-textPrimary prose-li:text-textPrimary prose-p:text-textPrimary prose-ul:text-textPrimary prose-p:text-base prose-strong:text-textPrimary prose-img:rounded-md"> | ||
| {changelogContent} | ||
| </ReactMarkdown> | ||
| </div> | ||
| </div> | ||
| {(hasImageInContent || changelogContent.length > 260) && ( | ||
| <button onClick={expandChangelog} className="text-textPrimary font-bold flex items-center mt-8 gap-x-2 transition-all hover:text-brandOrange"> | ||
| {isExpanded ? "Collapse" : "See more"} | ||
| {isExpanded ? <MdOutlineExpandMore className="transform rotate-180" /> : <MdOutlineExpandMore />} | ||
| </button> | ||
| )} | ||
| </section> | ||
| </article> | ||
| ) | ||
| } | ||
|
|
||
| export default Changelog |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import React, { FC, useEffect, useState } from 'react' | ||
| import SectionWrapper from '../../common/layout/SectionWrapper' | ||
| import Changelog from './Changelog' | ||
| import { getChangelog } from '../../../lib/sanity' | ||
| import { SanityChangelog } from '../../../types/schema' | ||
| import GradientBorderWrapper from '../../common/GradientBorderWrapper' | ||
|
|
||
| interface ChangelogsProps { | ||
| totalChangelogCount: number | ||
| } | ||
|
|
||
| const Changelogs: FC<ChangelogsProps> = ({ | ||
| totalChangelogCount | ||
| }) => { | ||
| const [changelogs, setChangelogs] = useState<SanityChangelog[]>([]) | ||
| const [limit, setLimit] = useState(5) | ||
|
|
||
| const loadMore = () => setLimit(limit + 5) | ||
|
|
||
| useEffect(() => { | ||
| const getChangeLog = async () => { | ||
| const changelogData = await getChangelog(limit) | ||
| setChangelogs([...changelogData]) | ||
| } | ||
| getChangeLog() | ||
| }, [limit]) | ||
|
|
||
|
|
||
| return ( | ||
| <section> | ||
| <SectionWrapper> | ||
| <main className="flex flex-col"> | ||
| {changelogs.length > 0 && changelogs.map((changelog, index) => ( | ||
| <Changelog count={changelogs.length} index={index} key={changelog._id} changelog={changelog}/> | ||
| ))} | ||
| </main> | ||
| {changelogs.length < totalChangelogCount && ( | ||
| <div className="flex justify-center pt-20 pb-36"> | ||
| <GradientBorderWrapper> | ||
| <button className="bg-brandOrange px-3 py-1 rounded-md font-bold" onClick={loadMore}> | ||
| Load More | ||
| </button> | ||
| </GradientBorderWrapper> | ||
| </div> | ||
| )} | ||
| </SectionWrapper> | ||
| </section> | ||
| ) | ||
| } | ||
|
|
||
| export default Changelogs |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from 'react' | ||
| import { Heading, Typography } from '../../common/text' | ||
|
|
||
| const Hero = () => { | ||
| return ( | ||
| <section className="z-40 py-24 tablet:py-36 border-slate-800 relative flex flex-col gap-y-5 from-transparent via-red-800 to-transparent"> | ||
| <Heading alignSmall="center" > | ||
| $yellow-to-orangeChangelog$yellow-to-orange | ||
| </Heading> | ||
| <Typography alignSmall="center" variant="subheading"> | ||
| See what’s new in OpenSauced. | ||
| </Typography> | ||
| </section> | ||
| ) | ||
| } | ||
|
|
||
| export default Hero |
Oops, something went wrong.