mirror of
https://github.com/liyunze-coding/coworking-website.git
synced 2026-11-06 13:13:34 +00:00
added code blocks
This commit is contained in:
liyunze
parent
c39ee1d98b
commit
04d28ef117
12 changed files with 1045 additions and 176 deletions
|
|
@ -1,12 +1,13 @@
|
|||
import { defineConfig } from "astro/config";
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import mdx from "@astrojs/mdx";
|
||||
|
||||
import react from "@astrojs/react";
|
||||
|
||||
import expressiveCode from "astro-expressive-code";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
integrations: [tailwind(), mdx(), react()],
|
||||
integrations: [tailwind(), expressiveCode(), mdx(), react()],
|
||||
server: {
|
||||
port: 3000,
|
||||
},
|
||||
|
|
|
|||
987
package-lock.json
generated
987
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -18,11 +18,11 @@
|
|||
"@types/react-dom": "^18.2.22",
|
||||
"@vercel/analytics": "^1.0.1",
|
||||
"astro": "^4.4.1",
|
||||
"astro-expressive-code": "^0.33.5",
|
||||
"clsx": "^2.1.0",
|
||||
"framer-motion": "^11.0.12",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.22.3",
|
||||
"tailwind-merge": "^2.2.1",
|
||||
"tailwindcss": "^3.4.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -35,13 +35,14 @@ const items = [
|
|||
},
|
||||
{
|
||||
title: "Credits",
|
||||
description: "Support the people behind this website! Drop them",
|
||||
description:
|
||||
"Support the people behind this website! Drop them a follow and show some support 🙌",
|
||||
link: "/credits",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<div class="relative w-fit mt-20 z-50 ">
|
||||
<div class="relative w-fit mt-20 z-50">
|
||||
<HeroTitle />
|
||||
|
||||
<div class="max-w-5xl mx-auto px-8 pt-10">
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import VerticalNav from "./verticalNav.astro";
|
|||
<div
|
||||
transition:persist
|
||||
transition:name="navbar"
|
||||
class="w-full backdrop-blur fixed top-0 text-white bg-secondary/75 z-[60] text-lg py-3 border-b border-solid border-gray-800 h-[var(--header-height)]"
|
||||
class="w-full backdrop-blur fixed top-0 text-white bg-secondary/75 z-[60] text-lg py-3 h-[var(--header-height)]"
|
||||
>
|
||||
<div
|
||||
class="mx-auto relative px-3 lg:px-8 max-w-7xl flex flex-row justify-between items-center gap-3"
|
||||
|
|
@ -69,9 +69,7 @@ import VerticalNav from "./verticalNav.astro";
|
|||
>
|
||||
</div>
|
||||
<!-- Theme Toggle (COMING SOON) -->
|
||||
<div class="flex lg:flex-1 justify-end">
|
||||
<!-- <button id="theme-toggle" type="button" class=""></button> -->
|
||||
</div>
|
||||
<div class="flex lg:flex-1 justify-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
<aside
|
||||
|
|
@ -83,49 +81,49 @@ import VerticalNav from "./verticalNav.astro";
|
|||
</aside>
|
||||
|
||||
<script>
|
||||
// function updateDarkModeIcon() {
|
||||
// const darkModeToggle = document.querySelector("#theme-toggle");
|
||||
// const isDarkMode = localStorage.getItem("theme") === "dark";
|
||||
// const moonSVG = `
|
||||
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
||||
// <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
|
||||
// </svg>
|
||||
// `;
|
||||
// const sunSVG = `
|
||||
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
||||
// <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
|
||||
// </svg>
|
||||
// `;
|
||||
function updateDarkModeIcon() {
|
||||
const darkModeToggle = document.querySelector("#theme-toggle");
|
||||
const isDarkMode = localStorage.getItem("theme") === "dark";
|
||||
const moonSVG = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
||||
<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
`;
|
||||
const sunSVG = `
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
||||
<path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
|
||||
</svg>
|
||||
`;
|
||||
|
||||
// if (darkModeToggle) {
|
||||
// if (isDarkMode) {
|
||||
// darkModeToggle.innerHTML = moonSVG;
|
||||
// } else {
|
||||
// darkModeToggle.innerHTML = sunSVG;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// const darkModeToggle = document.querySelector("#theme-toggle");
|
||||
if (darkModeToggle) {
|
||||
if (isDarkMode) {
|
||||
darkModeToggle.innerHTML = moonSVG;
|
||||
} else {
|
||||
darkModeToggle.innerHTML = sunSVG;
|
||||
}
|
||||
}
|
||||
}
|
||||
const darkModeToggle = document.querySelector("#theme-toggle");
|
||||
|
||||
// if (!localStorage.getItem("theme")) {
|
||||
// localStorage.setItem("theme", "dark");
|
||||
// }
|
||||
if (!localStorage.getItem("theme")) {
|
||||
localStorage.setItem("theme", "dark");
|
||||
}
|
||||
|
||||
// if (darkModeToggle) {
|
||||
// darkModeToggle.addEventListener("click", () => {
|
||||
// const isDarkMode = localStorage.getItem("theme") === "dark";
|
||||
if (darkModeToggle) {
|
||||
darkModeToggle.addEventListener("click", () => {
|
||||
const isDarkMode = localStorage.getItem("theme") === "dark";
|
||||
|
||||
// if (isDarkMode) {
|
||||
// localStorage.setItem("theme", "light");
|
||||
// document.documentElement.classList.remove("dark");
|
||||
// } else {
|
||||
// localStorage.setItem("theme", "dark");
|
||||
// document.documentElement.classList.add("dark");
|
||||
// }
|
||||
if (isDarkMode) {
|
||||
localStorage.setItem("theme", "light");
|
||||
document.documentElement.setAttribute("data-theme", "light");
|
||||
} else {
|
||||
localStorage.setItem("theme", "dark");
|
||||
document.documentElement.setAttribute("data-theme", "dark");
|
||||
}
|
||||
|
||||
// updateDarkModeIcon();
|
||||
// });
|
||||
// }
|
||||
updateDarkModeIcon();
|
||||
});
|
||||
}
|
||||
|
||||
// JavaScript for toggling the menu
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
|
|
@ -147,8 +145,4 @@ import VerticalNav from "./verticalNav.astro";
|
|||
});
|
||||
});
|
||||
});
|
||||
|
||||
// window.onload = function () {
|
||||
// updateDarkModeIcon();
|
||||
// };
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -29,18 +29,4 @@ import VerticalNav from "../components/blocks/verticalNav.astro";
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style is:global>
|
||||
span.code-highlight {
|
||||
@apply rounded-md bg-[#323232] px-1 py-1 font-["Lucida_Console",monospace,courier-new] text-sm;
|
||||
}
|
||||
|
||||
code {
|
||||
@apply rounded-md bg-[#323232] px-3 py-3;
|
||||
}
|
||||
|
||||
/* img {
|
||||
@apply h-[100px] max-w-full;
|
||||
} */
|
||||
</style>
|
||||
</Layout>
|
||||
|
|
|
|||
|
|
@ -32,65 +32,6 @@ const { frontmatter, headings } = Astro.props;
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style is:global>
|
||||
h1 {
|
||||
@apply mb-2 text-4xl font-bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply mb-2 mt-5 scroll-mt-[calc(20px+var(--header-height))] text-3xl font-bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply mb-2 mt-5 scroll-mt-[calc(17px+var(--header-height))] text-2xl font-bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply mb-2 mt-5 scroll-mt-[calc(14px+var(--header-height))] text-xl font-bold;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply mb-2 mt-2 font-[system-ui] leading-6;
|
||||
}
|
||||
|
||||
hr {
|
||||
@apply my-10 border-gray-500;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply list-outside list-disc leading-7;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@apply my-4 border-l-4 border-gray-500 pl-4;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply inline-block text-blue-400 hover:underline;
|
||||
}
|
||||
|
||||
ul ul {
|
||||
@apply mb-2 ml-5 list-[circle];
|
||||
}
|
||||
|
||||
ul li {
|
||||
@apply mb-1 ml-5;
|
||||
}
|
||||
|
||||
span.code-highlight {
|
||||
@apply rounded-md bg-[#323232] px-1 py-1 font-["Lucida_Console",monospace,courier-new] text-sm;
|
||||
}
|
||||
|
||||
code {
|
||||
@apply rounded-md bg-[#323232] px-3 py-3;
|
||||
}
|
||||
|
||||
/* img {
|
||||
@apply h-[100px] max-w-full;
|
||||
} */
|
||||
</style>
|
||||
|
||||
<script is:inline>
|
||||
// make all <a> attributes have target="_blank" except for Table of Contents
|
||||
document.querySelectorAll("a:not(.no-target-blank)").forEach((el) => {
|
||||
|
|
|
|||
|
|
@ -85,13 +85,6 @@ const { title, description } = Astro.props;
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
p code {
|
||||
word-break: break-all; /* This will allow the URL to break at any character */
|
||||
display: block; /* Ensures the entire URL is on its own line */
|
||||
width: 100%; /* Make sure the code element takes up the full width of its container */
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
@apply my-4 border-l-4 border-gray-500 pl-4;
|
||||
}
|
||||
|
|
@ -100,6 +93,38 @@ const { title, description } = Astro.props;
|
|||
@apply inline-block text-blue-400 hover:underline;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply mb-2 text-4xl font-bold;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply mb-2 mt-5 scroll-mt-[calc(20px+var(--header-height))] text-3xl font-bold;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply mb-2 mt-5 scroll-mt-[calc(17px+var(--header-height))] text-2xl font-bold;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply mb-2 mt-5 scroll-mt-[calc(14px+var(--header-height))] text-xl font-bold;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply mb-2 mt-2 font-[system-ui] leading-6;
|
||||
}
|
||||
|
||||
hr {
|
||||
@apply my-10 border-gray-500;
|
||||
}
|
||||
|
||||
ul {
|
||||
@apply list-outside list-disc leading-7;
|
||||
}
|
||||
|
||||
code {
|
||||
@apply rounded-md bg-[#323232] px-1 py-1 font-["Lucida_Console",monospace,courier-new] text-sm;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
@apply list-outside leading-7;
|
||||
|
|
|
|||
|
|
@ -31,9 +31,11 @@ Closed captions open your stream to a wider audience by including viewers who ar
|
|||
|
||||
- ### Have control of your ad timings
|
||||
|
||||
`https://dashboard.twitch.tv/popout/u/{{channel}}/stream-manager/streamer-ads-manager-panel`
|
||||
```
|
||||
https://dashboard.twitch.tv/popout/u/{{channel}}/stream-manager/streamer-ads-manager-panel
|
||||
```
|
||||
|
||||
If you're using OBS, you can add the link above as a dock to your OBS (remember to replace "{{channel}}" with your actual channel name). This way, you can easily run ads and view when your next ad break is without having to go to the Twitch dashboard.
|
||||
If you're using OBS, you can add the link above as a dock to your OBS (remember to replace "\{\{channel\}\}" with your actual channel name). This way, you can easily run ads and view when your next ad break is without having to go to the Twitch dashboard.
|
||||
|
||||
- ### Have a consistent stream schedule
|
||||
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@ As with any social media platform, you may encounter trolls and bots while you s
|
|||
|
||||
- ### Promotional bots
|
||||
|
||||
This is when several bot accounts post in your chat with the same message, usually advertising a "get famous quick" scam. To stop this, you can put your chat in follower only mode by typing <span class="code-highlight">/followers</span> in your chat. Usually they will go away quickly and you can type <span class="code-highlight">/followersoff</span> to change it back.
|
||||
This is when several bot accounts post in your chat with the same message, usually advertising a "get famous quick" scam. To stop this, you can put your chat in follower only mode by typing `/followers` in your chat. Usually they will go away quickly and you can type `/followersoff` to change it back.
|
||||
|
||||
You can also make use of the AutoMod feature by banning phrases like "bigfollow", so their messages get automatically removed. You can find this in your Dashboard Settings → Moderation. If you would like, you can also block hyperlinks in the same page or a stream bot (NightBot, StreamElements, etc.)
|
||||
|
||||
|
|
|
|||
|
|
@ -37,14 +37,15 @@ The Noun Project is a website that aggregates and catalogs symbols that are crea
|
|||
|
||||
## Fonts
|
||||
|
||||
### [DaFont](https://www.dafont.com/)
|
||||
### [DaFont 🔗](https://www.dafont.com/)
|
||||
|
||||
DaFont is a popular online platform where you can download fonts for various purposes. Whether you’re working on a design project, creating digital art, or just want to add a unique touch to your documents.
|
||||
|
||||
### [Google Fonts](https://fonts.google.com/)
|
||||
### [Google Fonts 🔗](https://fonts.google.com/)
|
||||
|
||||
Google Fonts is a service provided by Google that offers a wide selection of high-quality web fonts for use in web projects.
|
||||
|
||||
---
|
||||
|
||||
## Principles of Grouping
|
||||
|
||||
|
|
@ -64,3 +65,12 @@ There are five main principles of grouping:
|
|||
|
||||
These principles are used extensively in various fields like design, art, and advertising. By understanding how we group things visually, designers can create layouts that are clear, organized, and engaging.
|
||||
|
||||
---
|
||||
|
||||
## Videos
|
||||
|
||||
Some cool YouTube videos on this topic if you want some inspiration!
|
||||
|
||||
- [How-to: Easy "Graphic Design" on Google Slides (for VTubers and Streamers)](https://youtu.be/VoF-Qk_tWgU)
|
||||
- [How to Make an Overlay for Streaming! Tips for Artists and Gamers!](https://youtu.be/OBXK9qi4j8E)
|
||||
- [Create Minimal Stream Overlays From Scratch! (Without Photoshop!)](https://youtu.be/Rs75ovA7Fvo)
|
||||
|
|
@ -8,7 +8,7 @@ import BlurBackground from "../components/ui/BlurBackground.astro";
|
|||
title="Get started with Coworking streams"
|
||||
description="A guide for new and existing coworking streamers!"
|
||||
>
|
||||
<div class="relative overflow-hidden">
|
||||
<div class="relative overflow-hidden h-fit min-h-screen">
|
||||
<BlurBackground />
|
||||
<div class="flex justify-center items-start pb-10">
|
||||
<Hero />
|
||||
|
|
|
|||
Loading…
Reference in a new issue