{"id":21031557,"url":"https://github.com/slaveofcode/grpc-presentation","last_synced_at":"2025-10-28T02:07:01.745Z","repository":{"id":92795090,"uuid":"234674560","full_name":"slaveofcode/grpc-presentation","owner":"slaveofcode","description":"gRPC presentation using fusuma ","archived":false,"fork":false,"pushed_at":"2020-01-19T18:28:18.000Z","size":16143,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-20T15:25:52.828Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/slaveofcode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-18T03:14:19.000Z","updated_at":"2020-01-19T18:28:21.000Z","dependencies_parsed_at":null,"dependency_job_id":"a37c3048-b468-4ad8-bd52-0e732ed85887","html_url":"https://github.com/slaveofcode/grpc-presentation","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slaveofcode%2Fgrpc-presentation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slaveofcode%2Fgrpc-presentation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slaveofcode%2Fgrpc-presentation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/slaveofcode%2Fgrpc-presentation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/slaveofcode","download_url":"https://codeload.github.com/slaveofcode/grpc-presentation/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243472214,"owners_count":20296290,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T12:29:14.088Z","updated_at":"2025-10-28T02:06:56.699Z","avatar_url":"https://github.com/slaveofcode.png","language":"CSS","readme":"[![GitPitch](https://gitpitch.com/assets/badge.svg)](https://gitpitch.com/gitpitch/in-60-seconds/master?grs=github)\n\n# GitPitch In 60 Seconds\n\nTo experience the simplicity and power of the GitPitch markdown\npresentation service, follow along with this short tutorial.\n\n\u003e Tutorial also available for [GitLab](https://gitlab.com/gitpitch/in-60-seconds) and [Bitbucket](https://bitbucket.org/gitpitch/in-60-seconds) users.\n\n### Introduction\n\nThe recommended and best way to create, preview, and\npresent a GitPitch markdown presentation is to use\n[GitPitch Desktop](https://gitpitch.com/docs/pro-features/desktop). But for an\nalmost instant introduction to GitPitch without needing to download anything\nwe can work directly within a respository on Git. And that's what we'll do \nright here.\n\nAs a *GitHub* user you are probably familiar with the **README.md** convention.\nA convention that automatically turns any **README.md** file found within a\n*GitHub* repository into nicely rendered project documentation on *github.com*.\n\nGitPitch introduces a brand new convention for all *GitHub* users, the\n**PITCHME.md** convention.\n\nThis new convention automatically turns any **PITCHME.md** file found within a *GitHub* repository into a modern, responsive slide deck that is automatically available for sharing and presenting directly on\n[gitpitch.com](https://gitpitch.com).\n\nWith awareness of this new **PITCHME.md** convention in mind, let's jump\nstraight into the *GitPitch In 60 Seconds* tutorial.\n\n\u003cbr\u003e\n\n### Step 1. Fork this Repository\n\nCreate a fork of this repository.\n\nForking this repository will create a new `in-60-seconds` repository under\nyour own *GitHub* account. Within your new repository you will find the basic\nfile structure for a GitPitch slideshow presentation:\n\n```\n.\n├── PITCHME.md\n├── PITCHME.yaml\n└── assets\n    ├── css\n    │   └── PITCHME.css\n    └── img\n        └── *.png, jpg, gif\n```\n\nOnly one file is *required* to create a GitPitch slideshow presentation, a\n**PITCHME.md** markdown file. This is the file where you add the markdown\ncontent for your slides. Optional files, such as **PITCHME.yaml** and\n**PITCHME.css** can be added to activate custom settings and styles for your\nslide deck.\n\nHaving *forked* this repository you are now ready to move on to step 2. in this\n*GitPitch In 60 Seconds* tutorial.\n\n\u003cbr\u003e\n\n### Step 2. Congrats on creating your first GitPitch Markdown Presentation!\n\nFollowing a *fork* of the repository a **PITCHME.md** markdown file will be\nfound in your new repository. This means that your first GitPitch slide deck\nis immediately available at the following URL:\n\n```\nhttps://gitpitch.com/$USER/in-60-seconds\n```\n\n\u003e You must substitute **your** *GitHub* account name for `$USER` in the above slideshow URL.\n\nUsing **your** slideshow URL, go ahead and open your new slide deck in the\nbrowser now. When you open your slide deck you should see the first sample\nslide that should look a lot like this screenshot:\n\n![TUTORIAL](/doc/assets/gitpitch-in-60-seconds-1.png)\n\n\u003e For comparison purposes, the slideshow URL for the GitPitch In-60-Seconds sample presentation associated with the *gitpitch* GitHub account can be launched [here](https://gitpitch.com/gitpitch/in-60-seconds).\n\n\u003cbr\u003e\n\nThat's it for the first part of the *GitPitch In 60 Seconds* tutorial. If you\nare eager to jump straight back into the *GitPitch Docs* so you can download\n**GitPitch Desktop**, click\n[here](https://gitpitch.com/docs/getting-started/tutorial). But if you want to\nlearn a little more about how the sample presentation for this tutorial was\ncreated - *and that's strongly recommended* - then read on for additional\ndetails and tips.\n\n\u003cbr\u003e\n\n### The PITCHME.md Markdown File\n\nHere are some top tips about **PITCHME.md** markdown files that are used to\ncreate GitPitch slide decks:\n\n1. The **PITCHME.md** file name is a new convention introduced by GitPitch\n1. The **PITCHME.md** file name is case sensitive\n1. The **PITCHME.md** file content is standard GitHub Flavored Markdown\n1. The **PITCHME.md** file content also supports [GitPitch Markdown Widgets](https://gitpitch.com/docs/markdown-features/widgets)\n1. The `---` markdown fragment acts as a [slide delimiter](https://gitpitch.com/docs/getting-started/delimiters/) that partitions your slideshow content\n\n\n\u003cbr\u003e\n\n### Inside the PITCHME.md Markdown File\n\nThe sample **PITCHME.md** within this repository is automatically rendered\nas a slide deck with just 6 slides. Each slide introduces important new\nconcepts while demonstrating the simplicity and power of\n*GitHub Flavored Markdown* combined with\n[GitPitch Markdown Widgets](https://gitpitch.com/docs/markdown-features/widgets).\n\nThe following sections discuss the *markdown* snippets used on each slide\nwithin the sample **PITCHME.md** file in this repository to help you quickly\nfamiliarize yourself with some of the most fundamental and *fun* GitPitch\ncapabilities.\n\n### Sample Slide #1\n\nLet's jump straight in. The *markdown* snippet for the first slide in the\nsample slide deck is shown here:\n\n```\n\n# Let's Get **Started**\n\n```\n\nThis *markdown* snippet renders as follows:\n\n![TUTORIAL](/doc/assets/gitpitch-in-60-seconds-1.png)\n\nAs you can see, this slide couldn't be much simpler. The slide uses standard\nmarkdown heading syntax to render text on the slide. The text is automatically\ncentered on the slide thanks to the default [automatic layout policies](https://gitpitch.com/docs/layout-features/automatic-layout/)\nfor GitPitch slide decks. It's also worth nothing that emphasized text, such\nas bold and italics, can be automatically rendered by your \n[custom theme](https://gitpitch.com/docs/themes/default) to use a distinct\ncolor for additional emphasis on any word or phrase. Nice!\n\n### Sample Slide #2\n\nThe *markdown* snippet for the second slide in the sample slide deck is shown\nhere:\n\n```\n\n---\n\n### Add Some Slide Candy\n\n![IMAGE](assets/img/presentation.png)\n\n\n```\n\nThis *markdown* snippet renders as follows:\n\n![TUTORIAL](/doc/assets/gitpitch-in-60-seconds-2.png)\n\nThis sample slide introduces the first use of a [slide delimiter](https://gitpitch.com/docs/getting-started/delimiters/). Slide\ndelimiters are used to denote the starting point of each new slide in the\ndeck. This sample slide also demonstrates a mixture of text and image content\nbeing rendered on the slide. Again, only standard markdown syntax is being\nused here.\n\nWe also see the first use of a relative path to a repository file -\n`assets/img/presentation.png` - to *render* the content of that file on the\nslide. **PITCHME.md** files can reference source-code, text, image, and\neven video files [(pro only)](https://gitpitch.com/docs/pro-features/power)\nwithin the repository and see the contents of those files rendered on any\nslide. Cool ;)\n\n\n### Sample Slide #3\n\nThe *markdown* snippet for the third slide in the sample slide deck is shown\nhere:\n\n```\n\n---?color=linear-gradient(180deg, white 75%, black 25%)\n\n@snap[west span-55]\n## Customize the Layout\n@snapend\n\n@snap[north-east span-45]\n![IMAGE](assets/img/presentation.png)\n@snapend\n\n@snap[south span-100]\nSnap Layouts let you create custom slide designs directly within your markdown.\n@snapend\n\n```\n\nThis *markdown* snippet renders as follows:\n\n![TUTORIAL](/doc/assets/gitpitch-in-60-seconds-3.png)\n\nWhat just happened? This sample slide introduces one of the most exciting\nand unique GitPitch features -\n[Snap Layouts](https://gitpitch.com/docs/layout-features/snap-layouts).\n\nMost markdown presentation tools and services offer little control\nover the layout of content on slides. But GitPitch gives you complete control\nover slide-content layout. The same kind of flexibility you may have enjoyed\nwhen working with old fashioned *drag-and-drop* tools like Powerpoint and\nKeynote. But now powered by Markdown. The *snap-layouts* feature allows you to\ncreate unique slide designs that fit your specific needs.\n\nIf you look carefully at the sample *markdown* snippet for this slide you can\nsee that the `@snap` tag syntax introduced by *snap-layouts* simply wraps\nblocks of standard markdown slide content. It couldn't be easier!\n\n### Sample Slide #4\n\nThe *markdown* snippet for the fourth slide in the sample slide deck is shown\nhere:\n\n```\n\n---\n\n@snap[north-west span-50 text-center]\n#### Engage your Audience\n@snapend\n\n@snap[west span-55]\n@ul[list-spaced-bullets text-09]\n- You will be amazed\n- What you can achieve\n- With a **little imagination**\n- And GitPitch Markdown\n@ulend\n@snapend\n\n@snap[east span-45]\n![IMAGE](assets/img/conference.png)\n@snapend\n\n@snap[south span-100 bg-black fragment]\n@img[shadow](assets/img/conference.png)\n@snapend\n\n```\n\nThis *markdown* snippet renders as follows:\n\n![TUTORIAL](/doc/assets/gitpitch-in-60-seconds.gif)\n\nI thought it was time we added a little *interaction* to our\nslide deck ;-) This sample slide demonstrates a number of great features. We\nhave already been introduced above to\n[snap layouts](https://gitpitch.com/docs/layout-features/snap-layouts)\nso we will focus on what's new on this slide.\n\nThis sample slide also demonstrates the use of a hugely popular GitPitch feature\nknown as [Markdown Fragments](https://gitpitch.com/docs/markdown-features/fragments/).\nFragments can be used to reveal individual elements on a slide one-by-one. As distinct\nto revealing all elements on the slide at once. In this case, we are\nrevealing list items. But fragments can be applied to just about any content\non your slides. As we can see with the reveal of the final large image on the slide.\n\n### Sample Slide #5\n\nThe *markdown* snippet for the fifth slide in the sample slide deck is shown\nhere:\n\n```\n\n---\n\n@snap[north-east span-100 text-pink text-06]\nLet your code do the talking!\n@snapend\n\n    ```sql zoom-18\n    CREATE TABLE \"topic\" (\n        \"id\" serial NOT NULL PRIMARY KEY,\n        \"forum_id\" integer NOT NULL,\n        \"subject\" varchar(255) NOT NULL\n    );\n    ALTER TABLE \"topic\"\n    ADD CONSTRAINT forum_id\n    FOREIGN KEY (\"forum_id\")\n    REFERENCES \"forum\" (\"id\");\n    ```\n\n@snap[south span-100 text-gray text-08]\n@[1-5](You can step-and-ZOOM into fenced-code blocks, source files, and Github GIST.)\n@[6,7, zoom-13](Using GitPitch live code presenting with optional annotations.)\n@[8-9, zoom-12](This means no more switching between your slide deck and IDE on stage.)\n@snapend\n\n```\n\nThis *markdown* snippet renders as follows:\n\n![LIVE-CODE-PRESENTING](/doc/assets/gitpitch-in-60-seconds-code.gif)\n\nThis sample slide demonstrates the basic features of\n[GitPitch Live Code Presenting](https://gitpitch.com/docs/code-features/presenting).\nSee the docs to learn more about the wide range of unique code presenting\nfeatures available to GitPitch presentation authors.\n\n\n### Sample Slide #6\n\nThe *markdown* snippet for this final slide in the sample slide deck is shown\nhere:\n\n```\n\n---?image=assets/img/code.jpg\u0026opacity=60\u0026position=left\u0026size=45% 100%\n\n@snap[east span-50 text-center]\n## Now It's **Your** Turn\n@snapend\n\n@snap[south-east span-50 text-center text-06]\n[Download GitPitch Desktop @fa[external-link]](https://gitpitch.com/docs/getting-started/tutorial/)\n@snapend\n\n```\n\nThis *markdown* snippet renders as follows:\n\n![TUTORIAL](/doc/assets/gitpitch-in-60-seconds-6.png)\n\n\nThis slide demonstrates the use of\n[background image delimiter syntax](https://gitpitch.com/docs/image-features/background/)\nthat can be used to inject an image as a background for any slide. Additional\nparameters on this *image* delimiter can be used to position, size, scale, and\neven control opacity [(pro only)](https://gitpitch.com/docs/pro-features/power)\nso you can create the background effects you need.\n\nAgain, if you look carefully at the sample *markdown* snippet for this slide\nyou can see that the `@snap` tag syntax introduced by *snap-layouts* is taking\nadvantage of a number of\n[built-in CSS styles](https://gitpitch.com/docs/themes/css-utility-styles/) -\nsuch as `span-50` and `text-06` - to control the appearance of content\ndisplayed on the slide. As a presentation author this features gives you\nalmost unlimited flexibility to create slide decks that truly reflect your\nproduct or brand.\n\n\u003cbr\u003e\n\n### The Fastest Way from Idea to Presentation.\n\nAnd that brings us to the end of our whirlwind tour - the\n*GitPitch In 60 Seconds* tutorial. If you made it all the way to the end,\ncongratulations!\n\nWhile this short tutorial only introduces you to a small number of available\n[GitPitch features](https://gitpitch.com/features) we hope what\nyou have seen so far has made you eager to learn more. And here's one final\nenticement...a quick intro to **GitPitch Desktop**, the dedicated presentation\ntool for MacOS, Linux, and Windows 10 [Pro + Enterprise].\n\n![DESKTOP](assets/img/gitpitch-desktop.gif)\n\n\u003cbr\u003e\n\nExcited? We hope so. Time now to jump straight back into the GitPitch docs\nand download [GitPitch Desktop](https://gitpitch.com/docs/getting-started/tutorial).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslaveofcode%2Fgrpc-presentation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fslaveofcode%2Fgrpc-presentation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fslaveofcode%2Fgrpc-presentation/lists"}