diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index b3d0e3fa..74b801d1 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -8,10 +8,22 @@ on: jobs: build: runs-on: ubuntu-latest + steps: - - uses: actions/checkout@v1 - - uses: enriikke/gatsby-gh-pages-action@v2 + - uses: actions/checkout@v3 + + - uses: oven-sh/setup-bun@v2 + with: + bun-version: latest + + - run: bun install + working-directory: ./blog + + - run: bun run build.server + working-directory: ./blog + - name: Deploy + uses: peaceiris/actions-gh-pages@v4 with: - access-token: ${{ secrets.ACCESS_TOKEN }} - deploy-branch: dist - working-dir: blog + github_token: ${{ secrets.GITHUB_TOKEN }} + publish_dir: ./blog/dist + diff --git a/.gitmodules b/.gitmodules index e95474d1..83a27611 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,3 +1,11 @@ -[submodule "code/libs/dcs-bios/dcs-bios-arduino-library"] +[submodule "dcs-bios-arduino-library"] path = code/libs/dcs-bios/dcs-bios-arduino-library url = git@github.com:dcs-bios/dcs-bios-arduino-library.git + +# Since I don't have an active subscription for FontAwesome Pro anymore +# I need to bundle them using my own private repository. This means you +# likely can't run this blog by yourself after cloning it, but that is +# not the point of this repostitory anyway. +[submodule "fontawesome-pro"] + path = blog/public/fontawesome-pro + url = git@github.com:padarom/fontawesome-pro.git diff --git a/.vscode/extensions.json b/.vscode/extensions.json deleted file mode 100644 index 0f0d7401..00000000 --- a/.vscode/extensions.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - // See http://go.microsoft.com/fwlink/?LinkId=827846 - // for the documentation about the extensions.json format - "recommendations": [ - "platformio.platformio-ide" - ] -} diff --git a/blog/.eslintignore b/blog/.eslintignore new file mode 100644 index 00000000..1acecc10 --- /dev/null +++ b/blog/.eslintignore @@ -0,0 +1,38 @@ +**/*.log +**/.DS_Store +*. +.vscode/settings.json +.history +.yarn +bazel-* +bazel-bin +bazel-out +bazel-qwik +bazel-testlogs +dist +dist-dev +lib +lib-types +etc +external +node_modules +temp +tsc-out +tsdoc-metadata.json +target +output +rollup.config.js +build +.cache +.vscode +.rollup.cache +dist +tsconfig.tsbuildinfo +vite.config.ts +*.spec.tsx +*.spec.ts +.netlify +pnpm-lock.yaml +package-lock.json +yarn.lock +server diff --git a/blog/.eslintrc.cjs b/blog/.eslintrc.cjs new file mode 100644 index 00000000..70dc5d03 --- /dev/null +++ b/blog/.eslintrc.cjs @@ -0,0 +1,42 @@ +module.exports = { + root: true, + env: { + browser: true, + es2021: true, + node: true, + }, + extends: [ + "eslint:recommended", + "plugin:@typescript-eslint/recommended", + "plugin:qwik/recommended", + ], + parser: "@typescript-eslint/parser", + parserOptions: { + tsconfigRootDir: __dirname, + project: ["./tsconfig.json"], + ecmaVersion: 2021, + sourceType: "module", + ecmaFeatures: { + jsx: true, + }, + }, + plugins: ["@typescript-eslint"], + rules: { + "@typescript-eslint/no-explicit-any": "off", + "@typescript-eslint/explicit-module-boundary-types": "off", + "@typescript-eslint/no-inferrable-types": "off", + "@typescript-eslint/no-non-null-assertion": "off", + "@typescript-eslint/no-empty-interface": "off", + "@typescript-eslint/no-namespace": "off", + "@typescript-eslint/no-empty-function": "off", + "@typescript-eslint/no-this-alias": "off", + "@typescript-eslint/ban-types": "off", + "@typescript-eslint/ban-ts-comment": "off", + "prefer-spread": "off", + "no-case-declarations": "off", + "no-console": "off", + "@typescript-eslint/no-unused-vars": ["error"], + "@typescript-eslint/consistent-type-imports": "warn", + "@typescript-eslint/no-unnecessary-condition": "warn", + }, +}; diff --git a/blog/.gitignore b/blog/.gitignore index 557f97c6..48dce735 100644 --- a/blog/.gitignore +++ b/blog/.gitignore @@ -1,3 +1,41 @@ -node_modules/ -.cache/ -public +# Build +/dist +/lib +/lib-types +/server + +# Development +node_modules +*.local + +# Cache +.cache +.mf +.rollup.cache +tsconfig.tsbuildinfo + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +# Editor +.vscode/* +!.vscode/launch.json +!.vscode/*.code-snippets + +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +# Yarn +.yarn/* +!.yarn/releases diff --git a/blog/.prettierignore b/blog/.prettierignore new file mode 100644 index 00000000..b62a9681 --- /dev/null +++ b/blog/.prettierignore @@ -0,0 +1,37 @@ +**/*.log +**/.DS_Store +*. +.vscode/settings.json +.history +.yarn +bazel-* +bazel-bin +bazel-out +bazel-qwik +bazel-testlogs +dist +dist-dev +lib +lib-types +etc +external +node_modules +temp +tsc-out +tsdoc-metadata.json +target +output +rollup.config.js +build +.cache +.vscode +.rollup.cache +tsconfig.tsbuildinfo +vite.config.ts +*.spec.tsx +*.spec.ts +.netlify +pnpm-lock.yaml +package-lock.json +yarn.lock +server diff --git a/blog/.prettierrc.js b/blog/.prettierrc.js new file mode 100644 index 00000000..fb4220c2 --- /dev/null +++ b/blog/.prettierrc.js @@ -0,0 +1,3 @@ +export default { + plugins: ['prettier-plugin-tailwindcss'], +} \ No newline at end of file diff --git a/blog/.vscode/launch.json b/blog/.vscode/launch.json new file mode 100644 index 00000000..c3d1ba85 --- /dev/null +++ b/blog/.vscode/launch.json @@ -0,0 +1,17 @@ +{ + // Use IntelliSense to learn about possible attributes. + // Hover to view descriptions of existing attributes. + // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 + "version": "0.2.0", + "configurations": [ + { + "type": "node", + "name": "dev.debug", + "request": "launch", + "skipFiles": ["/**"], + "cwd": "${workspaceFolder}", + "program": "${workspaceFolder}/node_modules/vite/bin/vite.js", + "args": ["--mode", "ssr", "--force"] + } + ] +} diff --git a/blog/.vscode/qwik-city.code-snippets b/blog/.vscode/qwik-city.code-snippets new file mode 100644 index 00000000..878fcf68 --- /dev/null +++ b/blog/.vscode/qwik-city.code-snippets @@ -0,0 +1,36 @@ +{ + "onRequest": { + "scope": "javascriptreact,typescriptreact", + "prefix": "qonRequest", + "description": "onRequest function for a route index", + "body": [ + "export const onRequest: RequestHandler = (request) => {", + " $0", + "};", + ], + }, + "loader$": { + "scope": "javascriptreact,typescriptreact", + "prefix": "qloader$", + "description": "loader$()", + "body": ["export const $1 = routeLoader$(() => {", " $0", "});"], + }, + "action$": { + "scope": "javascriptreact,typescriptreact", + "prefix": "qaction$", + "description": "action$()", + "body": ["export const $1 = routeAction$((data) => {", " $0", "});"], + }, + "Full Page": { + "scope": "javascriptreact,typescriptreact", + "prefix": "qpage", + "description": "Simple page component", + "body": [ + "import { component$ } from '@builder.io/qwik';", + "", + "export default component$(() => {", + " $0", + "});", + ], + }, +} diff --git a/blog/.vscode/qwik.code-snippets b/blog/.vscode/qwik.code-snippets new file mode 100644 index 00000000..62edc825 --- /dev/null +++ b/blog/.vscode/qwik.code-snippets @@ -0,0 +1,78 @@ +{ + "Qwik component (simple)": { + "scope": "javascriptreact,typescriptreact", + "prefix": "qcomponent$", + "description": "Simple Qwik component", + "body": [ + "export const ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}} = component$(() => {", + " return <${2:div}>$4", + "});", + ], + }, + "Qwik component (props)": { + "scope": "typescriptreact", + "prefix": "qcomponent$ + props", + "description": "Qwik component w/ props", + "body": [ + "export interface ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}}Props {", + " $2", + "}", + "", + "export const $1 = component$<$1Props>((props) => {", + " const ${2:count} = useSignal(0);", + " return (", + " <${3:div} on${4:Click}$={(ev) => {$5}}>", + " $6", + " ", + " );", + "});", + ], + }, + "Qwik signal": { + "scope": "javascriptreact,typescriptreact", + "prefix": "quseSignal", + "description": "useSignal() declaration", + "body": ["const ${1:foo} = useSignal($2);", "$0"], + }, + "Qwik store": { + "scope": "javascriptreact,typescriptreact", + "prefix": "quseStore", + "description": "useStore() declaration", + "body": ["const ${1:state} = useStore({", " $2", "});", "$0"], + }, + "$ hook": { + "scope": "javascriptreact,typescriptreact", + "prefix": "q$", + "description": "$() function hook", + "body": ["$(() => {", " $0", "});", ""], + }, + "useVisibleTask": { + "scope": "javascriptreact,typescriptreact", + "prefix": "quseVisibleTask", + "description": "useVisibleTask$() function hook", + "body": ["useVisibleTask$(({ track }) => {", " $0", "});", ""], + }, + "useTask": { + "scope": "javascriptreact,typescriptreact", + "prefix": "quseTask$", + "description": "useTask$() function hook", + "body": [ + "useTask$(({ track }) => {", + " track(() => $1);", + " $0", + "});", + "", + ], + }, + "useResource": { + "scope": "javascriptreact,typescriptreact", + "prefix": "quseResource$", + "description": "useResource$() declaration", + "body": [ + "const $1 = useResource$(({ track, cleanup }) => {", + " $0", + "});", + "", + ], + }, +} diff --git a/blog/CNAME b/blog/CNAME deleted file mode 100644 index f946780b..00000000 --- a/blog/CNAME +++ /dev/null @@ -1 +0,0 @@ -hogpit.muehl.dev diff --git a/blog/README.md b/blog/README.md new file mode 100644 index 00000000..bb4b7d0e --- /dev/null +++ b/blog/README.md @@ -0,0 +1,71 @@ +# Qwik City App ⚡️ + +- [Qwik Docs](https://qwik.dev/) +- [Discord](https://qwik.dev/chat) +- [Qwik GitHub](https://github.com/QwikDev/qwik) +- [@QwikDev](https://twitter.com/QwikDev) +- [Vite](https://vitejs.dev/) + +--- + +## Project Structure + +This project is using Qwik with [QwikCity](https://qwik.dev/qwikcity/overview/). QwikCity is just an extra set of tools on top of Qwik to make it easier to build a full site, including directory-based routing, layouts, and more. + +Inside your project, you'll see the following directory structure: + +``` +├── public/ +│ └── ... +└── src/ + ├── components/ + │ └── ... + └── routes/ + └── ... +``` + +- `src/routes`: Provides the directory-based routing, which can include a hierarchy of `layout.tsx` layout files, and an `index.tsx` file as the page. Additionally, `index.ts` files are endpoints. Please see the [routing docs](https://qwik.dev/qwikcity/routing/overview/) for more info. + +- `src/components`: Recommended directory for components. + +- `public`: Any static assets, like images, can be placed in the public directory. Please see the [Vite public directory](https://vitejs.dev/guide/assets.html#the-public-directory) for more info. + +## Add Integrations and deployment + +Use the `bun qwik add` command to add additional integrations. Some examples of integrations includes: Cloudflare, Netlify or Express Server, and the [Static Site Generator (SSG)](https://qwik.dev/qwikcity/guides/static-site-generation/). + +```shell +bun qwik add # or `bun qwik add` +``` + +## Development + +Development mode uses [Vite's development server](https://vitejs.dev/). The `dev` command will server-side render (SSR) the output during development. + +```shell +npm start # or `bun start` +``` + +> Note: during dev mode, Vite may request a significant number of `.js` files. This does not represent a Qwik production build. + +## Preview + +The preview command will create a production build of the client modules, a production build of `src/entry.preview.tsx`, and run a local server. The preview server is only for convenience to preview a production build locally and should not be used as a production server. + +```shell +bun preview # or `bun preview` +``` + +## Production + +The production build will generate client and server modules by running both client and server build commands. The build command will use Typescript to run a type check on the source code. + +```shell +bun build # or `bun build` +``` + +## Static Site Generator (Node.js) + +```shell +bun build.server +``` diff --git a/blog/adapters/static/vite.config.ts b/blog/adapters/static/vite.config.ts new file mode 100644 index 00000000..691408e4 --- /dev/null +++ b/blog/adapters/static/vite.config.ts @@ -0,0 +1,19 @@ +import { staticAdapter } from "@builder.io/qwik-city/adapters/static/vite"; +import { extendConfig } from "@builder.io/qwik-city/vite"; +import baseConfig from "../../vite.config"; + +export default extendConfig(baseConfig, () => { + return { + build: { + ssr: true, + rollupOptions: { + input: ["@qwik-city-plan"], + }, + }, + plugins: [ + staticAdapter({ + origin: "https://yoursite.qwik.dev", + }), + ], + }; +}); diff --git a/blog/bun.lockb b/blog/bun.lockb new file mode 100755 index 00000000..b247271f Binary files /dev/null and b/blog/bun.lockb differ diff --git a/blog/content/authors/authors.yml b/blog/content/authors/authors.yml deleted file mode 100644 index 2a666728..00000000 --- a/blog/content/authors/authors.yml +++ /dev/null @@ -1,8 +0,0 @@ -- name: Christopher Mühl - slug: christopher - bio: | - Written by Christopher, a programmer and maker from the Frankfurt metropolitan area in Germany, who is working on building an A‑10C simulator. - avatar: https://avatars.githubusercontent.com/u/3678770?v=4 - featured: true - social: - - url: https://github.com/padarom diff --git a/blog/content/parts/images/unsplash.jpg b/blog/content/parts/images/unsplash.jpg deleted file mode 100644 index 28a6facd..00000000 Binary files a/blog/content/parts/images/unsplash.jpg and /dev/null differ diff --git a/blog/content/parts/instruments/adi/side_picture.jpg b/blog/content/parts/instruments/adi/side_picture.jpg deleted file mode 100644 index fb7e09fb..00000000 Binary files a/blog/content/parts/instruments/adi/side_picture.jpg and /dev/null differ diff --git a/blog/content/parts/instruments/hsi/side_picture.jpg b/blog/content/parts/instruments/hsi/side_picture.jpg deleted file mode 100644 index 707a01e4..00000000 Binary files a/blog/content/parts/instruments/hsi/side_picture.jpg and /dev/null differ diff --git a/blog/content/parts/misc/.gitkeep b/blog/content/parts/misc/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/blog/content/parts/misc/mpcnc/index.md b/blog/content/parts/misc/mpcnc/index.md deleted file mode 100644 index 628b8359..00000000 --- a/blog/content/parts/misc/mpcnc/index.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: MPCNC -released: 2023-09-07 -updated: 2023-09-07 ---- - -TBD. diff --git a/blog/content/parts/misc/photon-mono/index.md b/blog/content/parts/misc/photon-mono/index.md deleted file mode 100644 index a4773ceb..00000000 --- a/blog/content/parts/misc/photon-mono/index.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: ANYCUBIC Photon Mono -released: 2023-09-07 -updated: 2023-09-07 ---- - -TBD. \ No newline at end of file diff --git a/blog/content/parts/misc/prusa-mk3s/index.md b/blog/content/parts/misc/prusa-mk3s/index.md deleted file mode 100644 index 1d3cb700..00000000 --- a/blog/content/parts/misc/prusa-mk3s/index.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Prusa MK3S -released: 2023-09-07 -updated: 2023-09-07 ---- - -TBD. \ No newline at end of file diff --git a/blog/content/parts/panels/.gitkeep b/blog/content/parts/panels/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/blog/content/parts/panels/elec-pwr/first_iteration.jpg b/blog/content/parts/panels/elec-pwr/first_iteration.jpg deleted file mode 100644 index 7a91415a..00000000 Binary files a/blog/content/parts/panels/elec-pwr/first_iteration.jpg and /dev/null differ diff --git a/blog/content/parts/panels/elec-pwr/index.md b/blog/content/parts/panels/elec-pwr/index.md deleted file mode 100644 index f0b783da..00000000 --- a/blog/content/parts/panels/elec-pwr/index.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Electrical Power Panel -heroImage: ./first_iteration.jpg -heroSubtitle: The first proper iteration of my Electrical Power Panel. This was constructed and milled on my CNC machine. It doesn't yet include its green backlight in this picture. -released: 2021-07-02 -updated: 2023-09-07 ---- - -The first thing I ever tried to construct for my simulator was an HSI. I knew early on that I didn't just want to have all my instruments be LCD screens, I wanted real mechanical ones. - -Therefore I started constructing my own and bought my first 3D printer for it. - -At some point the instrument started seeming really daunting and getting more complex than I envisioned it originally. I wanted to know how an actual HSI is constructed, but couldn't find any pictures of its mechanics. - -I kept looking around for old HSIs on ebay until I eventually found one that seemed to match what I was constructing. An **AF/A24J-1**, the HSI of an F-4 Phantom, which I quickly bought for just shy of 200€. - -My plan wasn't to use this instrument, I still wanted to build my own, but wanted to reverse engineer the original to get some inspiration from it. diff --git a/blog/content/posts/2023-09-07-start-of-a-journey/index.md b/blog/content/posts/2023-09-07-start-of-a-journey/index.md deleted file mode 100644 index dadada83..00000000 --- a/blog/content/posts/2023-09-07-start-of-a-journey/index.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: The start of a journey -heroImage: ./first_iteration.jpg -released: 2023-09-07 -updated: 2023-09-07 ---- - -TBD. \ No newline at end of file diff --git a/blog/gatsby-browser.js b/blog/gatsby-browser.js deleted file mode 100644 index 6fc84837..00000000 --- a/blog/gatsby-browser.js +++ /dev/null @@ -1,2 +0,0 @@ -import './src/styles/global.css' -import './src/styles/base.css' diff --git a/blog/gatsby-config.js b/blog/gatsby-config.js deleted file mode 100644 index 2cbcf07d..00000000 --- a/blog/gatsby-config.js +++ /dev/null @@ -1,82 +0,0 @@ -module.exports = { - siteMetadata: { - title: 'Hogpit', - }, - trailingSlash: 'never', - plugins: [ - 'gatsby-plugin-image', - 'gatsby-plugin-react-helmet', - // 'gatsby-plugin-sitemap', - { - resolve: 'gatsby-plugin-manifest', - options: { - icon: 'src/images/icon.png', - }, - }, - { - resolve: 'gatsby-plugin-google-fonts', - options: { - fonts: [ - 'righteous:400', - 'roboto:300,400,500,600', - 'merriweather', - 'Roboto Mono', - ], - display: 'swap' - } - }, - { - resolve: 'gatsby-plugin-disqus', - options: { - shortname: 'hogpit', - }, - }, - 'gatsby-plugin-postcss', - 'gatsby-plugin-emotion', - { - resolve: 'gatsby-plugin-mdx', - options: { - extensions: ['.mdx', '.md'], - }, - }, - 'gatsby-plugin-sharp', - 'gatsby-transformer-sharp', - 'gatsby-transformer-yaml', - { - resolve: 'gatsby-source-filesystem', - options: { - name: 'parts', - path: './content/parts/', - fastHash: true, - }, - __key: 'parts', - }, - { - resolve: 'gatsby-source-filesystem', - options: { - name: 'images', - path: './content/images/', - fastHash: true, - }, - __key: 'images', - }, - { - resolve: 'gatsby-source-filesystem', - options: { - name: 'posts', - path: './content/posts/', - fastHash: true, - }, - __key: 'posts', - }, - { - resolve: 'gatsby-source-filesystem', - options: { - name: 'authors', - path: './content/authors/', - fastHash: true, - }, - __key: 'authors', - }, - ], -}; diff --git a/blog/gatsby-node.js b/blog/gatsby-node.js deleted file mode 100644 index 440ad92e..00000000 --- a/blog/gatsby-node.js +++ /dev/null @@ -1,76 +0,0 @@ -const path = require('path') -const readingTime = require('reading-time') - -const postTemplate = path.resolve('./src/templates/BlogPost.js') -const collectionTemplate = path.resolve('./src/templates/CollectionList.js') - -exports.createPages = async ({ graphql, actions }) => { - const { createPage } = actions - - // Create pages from MDX files - const { data } = await graphql(` - { - allMdx(filter: {internal: {contentFilePath: {regex: "/index.mdx?$/"}}}) { - nodes { - id - internal { contentFilePath } - parent { - ... on File { - relativeDirectory - } - } - } - } - } - `) - - data.allMdx.nodes.forEach(node => { - createPage({ - path: node.parent.relativeDirectory, - component: `${postTemplate}?__contentFilePath=${node.internal.contentFilePath}`, - context: { id: node.id }, - }) - }) - - await Promise.all(['parts', 'posts'].map(async (collection) => { - const { data } = await graphql(` - query($collection: String!) { - posts: allFile( - filter: {sourceInstanceName: {eq: $collection}, name: {eq: "index"}, extension: {in: ["md", "mdx"]}} - ) { - totalCount - } - } - `, { collection }) - - const POSTS_PER_PAGE = 9 - const numPages = Math.ceil(data.posts.totalCount / POSTS_PER_PAGE) - - Array.from({ length: numPages }).forEach((_, i) => { - createPage({ - path: `/${collection}/${i + 1}`, - component: collectionTemplate, - context: { - collection, - currentPage: i + 1, - numPages, - limit: POSTS_PER_PAGE, - skip: i * POSTS_PER_PAGE, - }, - }) - }) - })) -} - -exports.onCreateNode = ({ node, getNode, actions }) => { - const { createNodeField } = actions - - // Add reading time to MDX nodes - if (node.internal.type === 'Mdx') { - createNodeField({ - node, - name: 'timeToRead', - value: readingTime(node.body) - }) - } -} diff --git a/blog/gatsby-ssr.js b/blog/gatsby-ssr.js deleted file mode 100644 index 3355a8b9..00000000 --- a/blog/gatsby-ssr.js +++ /dev/null @@ -1,10 +0,0 @@ -import React from 'react' - -export const onRenderBody = ({ setHeadComponents }) => { - setHeadComponents([ - +*/ + +export default component$(() => ( + <> +
+ +)) diff --git a/blog/src/components/Header.js b/blog/src/components/Header.js deleted file mode 100644 index c5009fc1..00000000 --- a/blog/src/components/Header.js +++ /dev/null @@ -1,57 +0,0 @@ -import React, { useState } from 'react' -import Icon from './Icon' -import tw from 'twin.macro' -import Helmet from 'react-helmet' -import { Link } from 'gatsby' - -const Container = tw.div` - pt-16 pb-24 flex justify-between items-center -` - -const LinkedLogo = tw(Link)` - font-page-title text-4xl p-2 -m-2 -` - -const Menu = tw.div` - px-3 ml-auto mr-10 -` - -const IconContainer = tw.div` - text-2xl text-gray-500 dark:text-gray-300 -` - -const MenuLink = tw(Link)` - px-3 hover:text-gray-700 dark:hover:text-gray-300 -` - -export default function Header () { - const [darkMode, setDarkMode] = useState(false) - - return ( - - - - - - - Hog - pit - - - - About - Simulator - Parts - Blog - - - - setDarkMode(!darkMode) } - /> - - - ) -} diff --git a/blog/src/components/Header.tsx b/blog/src/components/Header.tsx new file mode 100644 index 00000000..dee753a0 --- /dev/null +++ b/blog/src/components/Header.tsx @@ -0,0 +1,41 @@ +import { Slot, component$, useSignal, $ } from '@builder.io/qwik' +import Icon from './Icon' + +const MenuLink = component$((props: { href: string }) => + + + +) + +export default component$(() => { + const darkMode = useSignal(false) + const toggleDarkMode = $(() => { + darkMode.value = !darkMode.value + document.documentElement.classList.toggle('dark') + }) + + return ( +
+ + Hog + pit + + +
+ About + Simulator + Blog +
+ +
+ +
+
+ ) +}) diff --git a/blog/src/components/Icon.js b/blog/src/components/Icon.js deleted file mode 100644 index 25ad5495..00000000 --- a/blog/src/components/Icon.js +++ /dev/null @@ -1,13 +0,0 @@ -import tw, { styled } from 'twin.macro' - -const Icon = styled.i(({ active }) => [ - tw` - text-gray-400 p-2 rounded-full cursor-pointer - bg-transparent hover:bg-gray-100 - dark:text-gray-400 dark:hover:bg-gray-700 - transition-colors duration-300 - `, - active && tw`text-gray-900 dark:text-gray-100`, -]) - -export default Icon diff --git a/blog/src/components/Icon.tsx b/blog/src/components/Icon.tsx new file mode 100644 index 00000000..a1bf352b --- /dev/null +++ b/blog/src/components/Icon.tsx @@ -0,0 +1,18 @@ +import { component$ } from '@builder.io/qwik' +import type { ClassList } from '@builder.io/qwik' + +type Props = { + active: boolean, + class?: ClassList +} + +export default component$(({ active, class: classes }) => ( + +)) diff --git a/blog/src/components/Layout.js b/blog/src/components/Layout.js deleted file mode 100644 index 8e2daf44..00000000 --- a/blog/src/components/Layout.js +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react' -import Header from './Header' -import tw from 'twin.macro' -import { Global } from '@emotion/react' -import { GlobalStyles } from 'twin.macro' -import globalStyles from './styles' - -const Container = tw.div` - container mx-auto px-6 md:px-16 pb-28 -` - -export default function Layout ({ children }) { - return ( - - - - -
- - {children} - - ) -} diff --git a/blog/src/components/PostExcerpt.tsx b/blog/src/components/PostExcerpt.tsx new file mode 100644 index 00000000..b54cd665 --- /dev/null +++ b/blog/src/components/PostExcerpt.tsx @@ -0,0 +1,43 @@ +import { component$ } from '@builder.io/qwik' +import { Image } from '@unpic/qwik' +// import { createExcerpt } from '../../../blog/src/utils/excerpt' + +// TODO: Determine how to properly type this generically. +export type Props = { + post?: any, + tabular: boolean, + index: number, +} + +export default component$(({ post, tabular, index }) => { + // remarkPluginFrontmatter.minutesRead + + return ( + +
+ {post.frontmatter.heroSubtitle} +
+ +
+

{post.title}

+

{"excerpt"}

+

+ {new Date(post.updated).toLocaleDateString()} · {''} min read +

+
+ + ) +}) diff --git a/blog/src/components/blog/FullPost.js b/blog/src/components/blog/FullPost.js deleted file mode 100644 index 8b76d7e6..00000000 --- a/blog/src/components/blog/FullPost.js +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react' -import { MDXProvider } from '@mdx-js/react' -import { CodeBlock, github } from 'react-code-blocks' -import { Disqus } from 'gatsby-plugin-disqus' -import tw from 'twin.macro' - -const InlineCode = tw.code` - text-gray-500 px-[2px] bg-gray-100 - dark:text-gray-400 dark:bg-gray-700 -` - -const components = { - p: tw.p` - mb-6 - `, - a: tw.a` - text-indigo-400 hover:underline - dark:text-indigo-300 - `, - code: ({ className, children }) => { - if (!className) return {children} - - const language = className.replace('language-', '') - - return - }, -} - -export default function FullPost ({ post, children }) { - const disqusConfig = { - identifier: post.parent.relativeDirectory, - title: post.frontmatter.title - } - - return ( - <> - - {children} - - -
- - - - ) -} diff --git a/blog/src/components/blog/PartsPostList.js b/blog/src/components/blog/PartsPostList.js deleted file mode 100644 index 9cd9692b..00000000 --- a/blog/src/components/blog/PartsPostList.js +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react' -import PostList from './PostList' -import { useStaticQuery, graphql } from 'gatsby' - -export default function PartsPostList ({ tabularLayout }) { - const { posts } = useStaticQuery(graphql` - query PostQuery { - posts: allFile( - filter: { - sourceInstanceName: {eq: "parts"}, - relativeDirectory: {regex: "/^(instruments|panels|frames)/"} - name: {eq: "index"}, - extension: {in: ["md", "mdx"]} - } - sort: {childMdx: {frontmatter: {updated: DESC}}} - limit: 9 - ) { - ...PostListQuery - } - } - `) - - return -} diff --git a/blog/src/components/blog/PostList.js b/blog/src/components/blog/PostList.js deleted file mode 100644 index 8e2530b0..00000000 --- a/blog/src/components/blog/PostList.js +++ /dev/null @@ -1,60 +0,0 @@ -import React from 'react' -import tw from 'twin.macro' -import { Link, useStaticQuery, graphql } from 'gatsby' -import { GatsbyImage, getImage } from 'gatsby-plugin-image' - -const Container = tw.div` - grid grid-cols-1 gap-12 pb-12 -` - -const styles = { - title: tw`font-serif text-2xl font-bold mb-3`, - excerpt: tw`mb-3`, - subtext: tw`text-gray-400 font-bold text-sm`, - container: ({ tabularLayout }) => [ - tabularLayout && tw`grid grid-cols-3 gap-x-10 gap-y-20`, - ], - post: ({ tabularLayout }) => [ - tabularLayout && tw`grid grid-cols-1`, - !tabularLayout && tw`grid grid-cols-2 gap-20`, - ], - description: ({ index, tabularLayout }) => [ - tabularLayout && (index % 2 ? tw`pb-7 pt-4 border-gray-100 border-t -order-1` : tw`pt-7 pb-2 border-gray-100 border-b`), - !tabularLayout && tw`py-10`, - ], -} - -export default function PostList ({ posts, tabularLayout }) { - const blogPosts = posts.map((node, i) => ( - - )) - - return ( - - {blogPosts} - - ) -} - -function BlogPost ({ node, index, tabularLayout }) { - const date = node.content.frontmatter.updated - - return ( - -
- -
- -
-

{node.content.frontmatter.title}

-
{node.content.excerpt}
-
- {node.content.frontmatter.updated} · {node.content.fields.timeToRead.minutes} min read -
-
- - ) -} diff --git a/blog/src/components/blog/lists/index.js b/blog/src/components/blog/lists/index.js deleted file mode 100644 index b9bd199b..00000000 --- a/blog/src/components/blog/lists/index.js +++ /dev/null @@ -1,32 +0,0 @@ -import { graphql } from 'gatsby' - -export const query = graphql` - fragment PostListQuery on FileConnection { - totalCount - nodes { - id - relativeDirectory - changeTime(formatString: "MMMM Do, YYYY") - content: childMdx { - excerpt - fields { - timeToRead { minutes } - } - frontmatter { - title - updated(formatString: "MMMM Do, YYYY") - released(formatString: "MMMM Do, YYYY") - heroImage { - childImageSharp { - gatsbyImageData( - width: 500, - placeholder: BLURRED, - formats: [AUTO, WEBP, JPG] - ) - } - } - } - } - } - } -` diff --git a/blog/src/components/index.ts b/blog/src/components/index.ts new file mode 100644 index 00000000..f805b491 --- /dev/null +++ b/blog/src/components/index.ts @@ -0,0 +1,6 @@ +export { default as Icon } from './Icon' +export { default as PostExcerpt } from './PostExcerpt' +export { default as Header } from './Header' +export { default as Disqus } from './Disqus' +export { default as Author } from './Author' +export * from './mdx' diff --git a/blog/src/components/mdx/Link.tsx b/blog/src/components/mdx/Link.tsx new file mode 100644 index 00000000..6cd6ad6c --- /dev/null +++ b/blog/src/components/mdx/Link.tsx @@ -0,0 +1,9 @@ +import { component$ } from '@builder.io/qwik' + +type Props = object + +export default component$((props) => ( + + + +)) diff --git a/blog/src/components/mdx/Paragraph.tsx b/blog/src/components/mdx/Paragraph.tsx new file mode 100644 index 00000000..3b97bea6 --- /dev/null +++ b/blog/src/components/mdx/Paragraph.tsx @@ -0,0 +1,9 @@ +import { component$ } from '@builder.io/qwik' + +type Props = object + +export default component$((props) => ( +

+ +

+)) diff --git a/blog/src/components/mdx/index.tsx b/blog/src/components/mdx/index.tsx new file mode 100644 index 00000000..c58ee9eb --- /dev/null +++ b/blog/src/components/mdx/index.tsx @@ -0,0 +1,7 @@ +import Link from './Link' +import Paragraph from './Paragraph' + +export const mdxComponents = { + p: Paragraph, + a: Link, +} diff --git a/blog/src/components/router-head/router-head.tsx b/blog/src/components/router-head/router-head.tsx new file mode 100644 index 00000000..c8afa689 --- /dev/null +++ b/blog/src/components/router-head/router-head.tsx @@ -0,0 +1,49 @@ +import { component$ } from '@builder.io/qwik' +import { useDocumentHead, useLocation } from '@builder.io/qwik-city' + +/** + * The RouterHead component is placed inside of the document `` element. + */ +export const RouterHead = component$(() => { + const head = useDocumentHead() + const loc = useLocation() + + return ( + <> + {head.title} + + + + + + + {head.meta.map((m) => ( + + ))} + + {head.links.map((l) => ( + + ))} + + {head.styles.map((s) => ( +