ty next

setsun · Jun 27, 2023 · 6dd21e2 · 6dd21e2 · vercel · Jun 27, 2023
1 parent 145df54
commit 6dd21e2
Show file tree

Hide file tree

Showing 27 changed files with 3,924 additions and 2,467 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+ "extends": "next/core-web-vitals"
+}
diff --git a/.github/workflows/playwright.yml b/.github/workflows/playwright.yml
@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+ push:
+ branches: [ main, master ]
+ pull_request:
+ branches: [ main, master ]
+jobs:
+ test:
+ timeout-minutes: 60
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
+ with:
+ node-version: 16
+ - name: Install dependencies
+ run: npm ci
+ - name: Install Playwright Browsers
+ run: npx playwright install --with-deps
+ - name: Run Playwright tests
+ run: npx playwright test
+ - uses: actions/upload-artifact@v3
+ if: always()
+ with:
+ name: playwright-report
+ path: playwright-report/
+ retention-days: 30
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,7 @@
 node_modules/
 .next/
 .DS_STORE
-.env
+.env
+/test-results/
+/playwright-report/
+/playwright/.cache/
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-# setsun.ai
+# setsun.xyz
 
 〰 consciousness stream 〰
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -0,0 +1,39 @@
+import {} from '@radix-ui/react-icons';
+
+const SOCIAL_LINKS = [
+ {
+ name: "GitHub",
+ link: "https://github.com/setsun",
+ },
+ {
+ name: "Instagram",
+ link: "https://instagram.com/i.am.setsun"
+ },
+ {
+ name: "Twitter",
+ link: "https://twitter.com/setsun_"
+ },
+
+ {
+ name: "Spotify",
+ link: "https://open.spotify.com/user/3cl7vscgpyz5agjjh7fxg0l1z?si=66806580a1d24d68"
+ },
+ {
+ name: "SoundCloud",
+ link: "https://soundcloud.com/setsun_ai"
+ }
+];
+
+const Footer: React.FC = () => {
+ return (
+ <footer className="flex justify-center gap-4 my-8">
+ {SOCIAL_LINKS.map(({ name, link }) => (
+ <a href={link} key={name} target="_blank" rel="noopener noreferrer">
+ {name}
+ </a>
+ ))}
+ </footer>
+ );
+}
+
+export default Footer;
diff --git a/components/GlobalStyle.tsx b/components/GlobalStyle.tsx
@@ -0,0 +1,40 @@
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyle = createGlobalStyle`
+ html {
+ box-sizing: border-box;
+ }
+
+ *,
+ *:before,
+ *:after {
+ box-sizing: inherit;
+ }
+
+ html,
+ body {
+ background: ${({ theme }) => theme.colors.primary};
+ color: white;
+ margin: 0;
+ padding: 0;
+ font-size: 16px;
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+ Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+ }
+
+ input,
+ textarea {
+ font-size: 16px;
+ }
+
+ button {
+ cursor: pointer;
+ }
+
+ a {
+ color: inherit;
+ text-decoration: none;
+ }
+`
+
+export default GlobalStyle;
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -9,10 +9,8 @@ const Header: React.FC = () => {
 
  let left = (
  <div className="left">
- <Link href="/">
- <a className="bold" data-active={isActive("/")}>
- Feed
- </a>
+ <Link href="/" className="bold" data-active={isActive("/")}>
+ setsun.xyz
  </Link>
  <style jsx>{`
  .bold {
@@ -21,14 +19,10 @@ const Header: React.FC = () => {
 
  a {
  text-decoration: none;
- color: #000;
+ color: white;
  display: inline-block;
  }
 
- .left a[data-active="true"] {
- color: gray;
- }
-
  a + a {
  margin-left: 1rem;
  }

diff --git a/components/Layout.tsx b/components/Layout.tsx
@@ -1,50 +1,30 @@
+import Head from "next/head";
 import React, { ReactNode } from "react";
+import styled from 'styled-components';
+import Footer from "./Footer";
 import Header from "./Header";
 
 type Props = {
  children: ReactNode;
 };
 
-const Layout: React.FC<Props> = (props) => (
- <div>
- <Header />
- <div className="layout">{props.children}</div>
- <style jsx global>{`
- html {
- box-sizing: border-box;
- }
+const LayoutContainer = styled.div`
+ padding: 0 2rem;
+`;
 
- *,
- *:before,
- *:after {
- box-sizing: inherit;
- }
+const Layout: React.FC<Props> = (props) => (
+ <>
+ <Head>
+ <title>setsun.xyz</title>
+ <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌅</text></svg>" />
+ </Head>
 
- body {
- margin: 0;
- padding: 0;
- font-size: 16px;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
- Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
- "Segoe UI Symbol";
- background: rgba(0, 0, 0, 0.05);
- }
+ <Header />
 
- input,
- textarea {
- font-size: 16px;
- }
+ <LayoutContainer>{props.children}</LayoutContainer>
 
- button {
- cursor: pointer;
- }
- `}</style>
- <style jsx>{`
- .layout {
- padding: 0 2rem;
- }
- `}</style>
- </div>
+ <Footer />
+ </>
 );
 
 export default Layout;
diff --git a/components/Post.tsx b/components/Post.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Router from "next/router";
+import styled from "styled-components";
 import ReactMarkdown from "react-markdown";
 
 export type PostProps = {
@@ -13,20 +14,31 @@ export type PostProps = {
  published: boolean;
 };
 
+const Container = styled.div`
+ border: 1px solid white;
+ color: white;
+ padding: 2rem;
+
+ p:last-child {
+ margin-bottom: 0;
+ }
+`;
+
+const PostTitle = styled.h3`
+ margin: 0;
+ margin-bottom: 0.5rem;
+`;
+
 const Post: React.FC<{ post: PostProps }> = ({ post }) => {
  const authorName = post.author ? post.author.name : "Unknown author";
  return (
- <div onClick={() => Router.push("/p/[id]", `/p/${post.id}`)}>
- <h2>{post.title}</h2>
+ <Container onClick={() => Router.push("/p/[id]", `/p/${post.id}`)}>
+ <PostTitle>{post.title}</PostTitle>
  <small>By {authorName}</small>
- <ReactMarkdown children={post.content} />
- <style jsx>{`
- div {
- color: inherit;
- padding: 2rem;
- }
- `}</style>
- </div>
+ <ReactMarkdown>
+ {post.content}
+ </ReactMarkdown>
+ </Container>
  );
 };
 

diff --git a/components/SpotifyIframePlaylist.tsx b/components/SpotifyIframePlaylist.tsx
@@ -0,0 +1,19 @@
+
+type Props = Pick<React.IframeHTMLAttributes<HTMLIFrameElement>, "src" | "className">
+
+const SpotifyIframePlaylist = (props: Props) => {
+ return (
+ <iframe
+ {...props}
+ style={{ borderRadius: '12px' }}
+ width="100%"
+ height="352"
+ frameBorder="0"
+ allowFullScreen
+ allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+ loading="lazy"
+ />
+ );
+}
+
+export default SpotifyIframePlaylist;
diff --git a/e2e/example.spec.ts b/e2e/example.spec.ts
@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test('has title', async ({ page }) => {
+ await page.goto('https://playwright.dev/');
+
+ // Expect a title "to contain" a substring.
+ await expect(page).toHaveTitle(/Playwright/);
+});
+
+test('get started link', async ({ page }) => {
+ await page.goto('https://playwright.dev/');
+
+ // Click the get started link.
+ await page.getByRole('link', { name: 'Get started' }).click();
+
+ // Expects the URL to contain intro.
+ await expect(page).toHaveURL(/.*intro/);
+});
diff --git a/next.config.js b/next.config.js
@@ -0,0 +1,9 @@
+module.exports = {
+ compiler: {
+ removeConsole: {
+ exclude: ['error'],
+ },
+ styledComponents: true,
+ },
+ swcMinify: true,
+}