-
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add playground website layout (#7)
- Loading branch information
Showing
50 changed files
with
1,261 additions
and
87 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
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
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
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 |
|---|---|---|
| @@ -1,24 +1,22 @@ | ||
| <script setup lang="ts"> | ||
| import Hello from "./components/Hello.vue"; | ||
| import Header from "./components/Header/Header.vue"; | ||
| import Sidebar from "./components/Sidebar/Sidebar.vue"; | ||
| </script> | ||
|
|
||
| <template> | ||
| <Hello msg="Oxc Playground with Vue" /> | ||
| </template> | ||
|
|
||
| <style scoped> | ||
| .logo { | ||
| height: 6em; | ||
| padding: 1.5em; | ||
| will-change: filter; | ||
| transition: filter 300ms; | ||
| } | ||
| <Suspense> | ||
| <main class="flex w-screen h-screen bg-white dark:bg-[#1b1b1f]"> | ||
| <Sidebar /> | ||
| <div class="flex w-screen"> | ||
| <Header /> | ||
| <div> | ||
| <!-- Todo: Editor Component --> | ||
| </div> | ||
| </div> | ||
| </main> | ||
|
|
||
| .logo:hover { | ||
| filter: drop-shadow(0 0 2em #646cffaa); | ||
| } | ||
| .logo.vue:hover { | ||
| filter: drop-shadow(0 0 2em #42b883aa); | ||
| } | ||
| </style> | ||
| <template #fallback> | ||
| <!-- Todo: add fallback loading --> | ||
| </template> | ||
| </Suspense> | ||
| </template> |
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,5 @@ | ||
| body { | ||
| font-family: var(--font-family-base); | ||
| margin: 0; | ||
| padding: 0; | ||
| } |
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,22 @@ | ||
| <script setup lang="ts"> | ||
| import Logo from "../Logo/Logo.vue"; | ||
| import Media from "./Media.vue"; | ||
| import Nav from "./Nav.vue"; | ||
| import Switch from "./Switch.vue"; | ||
| </script> | ||
|
|
||
| <template> | ||
| <header class="relative w-full h-16"> | ||
| <div class="flex justify-between w-full h-full px-8"> | ||
| <Logo class="visible pc:invisible" /> | ||
| <div class="hidden md:flex"> | ||
| <Nav /> | ||
| <Switch /> | ||
| <Media /> | ||
| </div> | ||
| </div> | ||
| <div | ||
| class="absolute bottom-0 w-full h-px border-b border-[#e2e2e3] dark:border-[#2e2e32]" | ||
| /> | ||
| </header> | ||
| </template> |
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,55 @@ | ||
| <script setup lang="ts"> | ||
| import { | ||
| GithubLogoIcon, | ||
| DiscordLogoIcon, | ||
| TwitterLogoIcon, | ||
| } from "@radix-icons/vue"; | ||
| </script> | ||
|
|
||
| <template> | ||
| <div | ||
| class="hidden xl:flex items-center before:content-[''] before:w-px before:h-6 before:ml-4 before:mr-2 before:bg-[#e2e2e3] dark:before:bg-[#2e2e32]" | ||
| > | ||
| <ul class="flex items-center"> | ||
| <li> | ||
| <a | ||
| class="block mx-2" | ||
| href="https://twitter.com/boshen_c" | ||
| aria-label="twitter" | ||
| target="_blank" | ||
| rel="noopener" | ||
| > | ||
| <TwitterLogoIcon | ||
| class="block w-5 h-5 text-[#3c3c43]/[.78] dark:text-[#ebebf5]/[.6]" | ||
| /> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| class="block mx-2" | ||
| href="https://discord.gg/9uXCAwqQZW" | ||
| aria-label="discord" | ||
| target="_blank" | ||
| rel="noopener" | ||
| > | ||
| <DiscordLogoIcon | ||
| class="block w-5 h-5 text-[#3c3c43]/[.78] dark:text-[#ebebf5]/[.6]" | ||
| /> | ||
| </a> | ||
| </li> | ||
| <li> | ||
| <a | ||
| class="block mx-2" | ||
| href="https://github.com/oxc-project/oxc" | ||
| aria-label="github" | ||
| target="_blank" | ||
| rel="noopener" | ||
| > | ||
| <GithubLogoIcon | ||
| class="block w-5 h-5 text-[#3c3c43]/[.78] dark:text-[#ebebf5]/[.6]" | ||
| /> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </template> |
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,95 @@ | ||
| <script setup lang="ts"> | ||
| import { ArrowTopRightIcon } from "@radix-icons/vue"; | ||
| import { | ||
| NavigationMenu, | ||
| NavigationMenuItem, | ||
| NavigationMenuLink, | ||
| NavigationMenuList, | ||
| } from "src/ui/navigation-menu"; | ||
| </script> | ||
|
|
||
| <template> | ||
| <NavigationMenu> | ||
| <NavigationMenuList> | ||
| <NavigationMenuItem> | ||
| <NavigationMenuLink as-child> | ||
| <a | ||
| class="flex items-center px-3" | ||
| href="https://oxc-project.github.io/docs/guide/introduction.html" | ||
| target="_blank" | ||
| rel="noopener" | ||
| > | ||
| <span | ||
| class="text-sm font-medium text-[#3c3c43] dark:text-[#fffff5]/[.86] hover:text-[#3451b2] dark:hover:text-[#a8b1ff]" | ||
| > | ||
| Guide | ||
| </span> | ||
| <ArrowTopRightIcon | ||
| class="w-3 h-3 ml-1 text-[#3c3c43]/[.56] dark:text-[#fffff5]/[.6]" | ||
| /> | ||
| </a> | ||
| </NavigationMenuLink> | ||
| </NavigationMenuItem> | ||
|
|
||
| <NavigationMenuItem> | ||
| <NavigationMenuLink as-child> | ||
| <a | ||
| class="flex items-center px-3" | ||
| href="https://oxc-project.github.io/docs/learn/parser_in_rust/intro.html" | ||
| target="_blank" | ||
| rel="noopener" | ||
| > | ||
| <span | ||
| class="text-sm font-medium text-[#3c3c43] dark:text-[#fffff5]/[.86] hover:text-[#3451b2] dark:hover:text-[#a8b1ff]" | ||
| >Learn</span | ||
| > | ||
| <ArrowTopRightIcon | ||
| class="w-3 h-3 ml-1 text-[#3c3c43]/[.56] dark:text-[#fffff5]/[.6]" | ||
| /> | ||
| </a> | ||
| </NavigationMenuLink> | ||
| </NavigationMenuItem> | ||
|
|
||
| <NavigationMenuItem> | ||
| <NavigationMenuLink | ||
| class="flex items-center px-3" | ||
| href="https://oxc-project.github.io/docs/contribute/introduction.html" | ||
| > | ||
| <span | ||
| class="text-sm font-medium text-[#3c3c43] dark:text-[#fffff5]/[.86] hover:text-[#3451b2] dark:hover:text-[#a8b1ff]" | ||
| > | ||
| Contribute | ||
| </span> | ||
| <ArrowTopRightIcon | ||
| class="w-3 h-3 ml-1 text-[#3c3c43]/[.56] dark:text-[#fffff5]/[.6]" | ||
| /> | ||
| </NavigationMenuLink> | ||
| </NavigationMenuItem> | ||
|
|
||
| <NavigationMenuItem> | ||
| <NavigationMenuLink class="flex items-center px-3" href="#" active> | ||
| <span class="text-sm font-medium text-[#3451b2] dark:text-[#a8b1ff]" | ||
| >Playground</span | ||
| > | ||
| </NavigationMenuLink> | ||
| </NavigationMenuItem> | ||
|
|
||
| <NavigationMenuItem> | ||
| <NavigationMenuLink as-child> | ||
| <a | ||
| class="flex items-center px-3" | ||
| href="#" | ||
| target="_blank" | ||
| rel="noopener" | ||
| > | ||
| <span | ||
| class="text-sm font-medium text-[#3c3c43] dark:text-[#fffff5]/[.86] hover:text-[#3451b2] dark:hover:text-[#a8b1ff]" | ||
| > | ||
| Resources | ||
| </span> | ||
| </a> | ||
| </NavigationMenuLink> | ||
| </NavigationMenuItem> | ||
| </NavigationMenuList> | ||
| </NavigationMenu> | ||
| </template> |
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,54 @@ | ||
| <script setup lang="ts"> | ||
| import { type HTMLAttributes, computed } from "vue"; | ||
| import { | ||
| type SwitchRootProps, | ||
| type SwitchRootEmits, | ||
| SwitchRoot, | ||
| SwitchThumb, | ||
| useForwardPropsEmits, | ||
| } from "radix-vue"; | ||
| import { useDark, useToggle } from "@vueuse/core"; | ||
| import { cn } from "src/utils"; | ||
| const props = defineProps< | ||
| SwitchRootProps & { class?: HTMLAttributes["class"] } | ||
| >(); | ||
| const emits = defineEmits<SwitchRootEmits>(); | ||
| const delegatedProps = computed(() => { | ||
| const { class: _, ...delegated } = props; | ||
| return delegated; | ||
| }); | ||
| const forwarded = useForwardPropsEmits(delegatedProps, emits); | ||
| const isDark = useDark(); | ||
| const toggleDark = useToggle(isDark); | ||
| </script> | ||
|
|
||
| <template> | ||
| <div | ||
| class="hidden xl:flex items-center before:content-[''] before:w-px before:h-6 before:ml-2 before:mr-4 before:bg-[#e2e2e3] dark:before:bg-[#2e2e32]" | ||
| > | ||
| <SwitchRoot | ||
| @click="toggleDark()" | ||
| v-bind="forwarded" | ||
| v-model:checked="isDark" | ||
| role="switch" | ||
| :class=" | ||
| cn( | ||
| 'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full bg-[#8e96aa]/[.16] dark:bg-[#657585]/[.16] border border-[#c2c2c4] dark:border-[#3c3f44] hover:border-[#a8b1ff] dark:hover:border-[#a8b1ff] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50', | ||
| props.class, | ||
| ) | ||
| " | ||
| > | ||
| <SwitchThumb | ||
| :class=" | ||
| cn( | ||
| 'pointer-events-none block h-5 w-5 rounded-full bg-white dark:bg-black shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0', | ||
| ) | ||
| " | ||
| /> | ||
| </SwitchRoot> | ||
| </div> | ||
| </template> |
This file was deleted.
Oops, something went wrong.
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,18 @@ | ||
| <template> | ||
| <div class="flex items-center justify-between h-16"> | ||
| <a | ||
| class="flex items-center w-full h-full border-b border-[#e2e2e3] dark:border-[#2e2e32]" | ||
| href="https://oxc-project.github.io" | ||
| > | ||
| <img | ||
| class="w-6 h-6 mr-2" | ||
| src="https://cdn.jsdelivr.net/gh/oxc-project/oxc-assets/logo-round-min.png" | ||
| alt="logo" | ||
| /> | ||
| <span | ||
| class="text-base font-medium text-[#3c3c43] dark:text-[#fffff5]/[.86]" | ||
| >Oxc</span | ||
| > | ||
| </a> | ||
| </div> | ||
| </template> |
Oops, something went wrong.