Laine Hallot
3 years ago
parent
cb834ad2c5
commit
5c833cf7d9
@ -0,0 +1,3 @@
|
||||
node_modules/
|
||||
.cache/
|
||||
public
|
||||
@ -0,0 +1,3 @@
|
||||
.cahce/
|
||||
node_modules/
|
||||
public/
|
||||
@ -0,0 +1,9 @@
|
||||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"semi": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "es5",
|
||||
"bracketSpacing": true,
|
||||
"arrowParens": "avoid"
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
# Anime Girls Holding Programing Books Webviewer
|
||||
|
||||
This part of the repo is very much still a work in progress and theres a decent amount of work to clean it up and get it into a state that I'd consider complete.
|
||||
|
||||
I'll update this readme with more details at some point
|
||||
|
||||
The structure of the GraphQL requests will also be reorganized at some point since they aren't ideal rn
|
||||
@ -0,0 +1 @@
|
||||
import './src/styles/global.css'
|
||||
@ -0,0 +1,40 @@
|
||||
/** @type {import('gatsby').GatsbyConfig} */
|
||||
module.exports = {
|
||||
siteMetadata: {
|
||||
title: ``,
|
||||
siteUrl: `https://www.yourdomain.tld`,
|
||||
},
|
||||
plugins: [
|
||||
'gatsby-plugin-postcss',
|
||||
'gatsby-plugin-image',
|
||||
'gatsby-plugin-react-helmet',
|
||||
'gatsby-plugin-sitemap',
|
||||
'gatsby-plugin-mdx',
|
||||
'gatsby-plugin-sharp',
|
||||
'gatsby-transformer-sharp',
|
||||
{
|
||||
resolve: 'gatsby-source-filesystem',
|
||||
options: {
|
||||
name: 'images',
|
||||
path: `..`,
|
||||
ignore: [
|
||||
'**/.*',
|
||||
'../**/node_modules/**',
|
||||
'../node_modules/**',
|
||||
'**/webviewer/**',
|
||||
'**/README.md',
|
||||
'**/CONTRIBUTING.md',
|
||||
],
|
||||
},
|
||||
__key: 'images',
|
||||
},
|
||||
{
|
||||
resolve: 'gatsby-source-filesystem',
|
||||
options: {
|
||||
name: 'pages',
|
||||
path: './src/pages/',
|
||||
},
|
||||
__key: 'pages',
|
||||
},
|
||||
],
|
||||
};
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,46 @@
|
||||
{
|
||||
"name": "anime-girls-holding-programming-books",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"description": "anime-girls-holding-programming-books",
|
||||
"keywords": [
|
||||
"gatsby"
|
||||
],
|
||||
"scripts": {
|
||||
"develop": "gatsby develop",
|
||||
"start": "gatsby develop",
|
||||
"build": "gatsby build",
|
||||
"serve": "gatsby serve",
|
||||
"clean": "gatsby clean",
|
||||
"typecheck": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdx-js/mdx": "^1.6.22",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"gatsby": "^4.9.0",
|
||||
"gatsby-plugin-image": "^2.9.1",
|
||||
"gatsby-plugin-mdx": "^3.9.0",
|
||||
"gatsby-plugin-postcss": "^5.9.0",
|
||||
"gatsby-plugin-react-helmet": "^5.9.0",
|
||||
"gatsby-plugin-sharp": "^4.9.1",
|
||||
"gatsby-plugin-sitemap": "^5.9.0",
|
||||
"gatsby-source-filesystem": "^4.9.1",
|
||||
"gatsby-transformer-sharp": "^4.9.0",
|
||||
"react": "^17.0.1",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-helmet": "^6.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^17.0.14",
|
||||
"@types/react": "^17.0.38",
|
||||
"@types/react-dom": "^17.0.11",
|
||||
"autoprefixer": "^10.4.2",
|
||||
"gh-pages": "^3.2.3",
|
||||
"postcss": "^8.4.8",
|
||||
"tailwindcss": "^3.0.23",
|
||||
"typescript": "^4.5.5"
|
||||
},
|
||||
"lint-staged": {
|
||||
"**/*": "prettier --write --ignore-unknown"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
import React, { useContext } from 'react';
|
||||
import { useStaticQuery, graphql } from 'gatsby';
|
||||
import AnimeImage from './AnimeImage';
|
||||
import { ImageFiles } from '../types';
|
||||
import { ImagesContext } from './Layout';
|
||||
|
||||
const AnimeImageGrid: React.FC = () => {
|
||||
const images = useContext(ImagesContext);
|
||||
console.log(images);
|
||||
const data: ImageFiles = useStaticQuery(graphql`
|
||||
query {
|
||||
allFile {
|
||||
nodes {
|
||||
relativeDirectory
|
||||
name
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
console.log(images);
|
||||
return (
|
||||
<div className="grid grid-flow-row-dense auto-rows-min gap-y-4 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
|
||||
{(images as any).allImages.edges.map((file: any) => (
|
||||
<AnimeImage image={file.node} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AnimeImageGrid;
|
||||
@ -0,0 +1,45 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useStaticQuery, graphql } from 'gatsby';
|
||||
import { GatsbyImage, getImage } from 'gatsby-plugin-image';
|
||||
import { ImageFile } from '../types';
|
||||
|
||||
interface AnimeImageProps {
|
||||
image: any;
|
||||
}
|
||||
|
||||
const AnimeImage: React.FC<AnimeImageProps> = ({ image }) => {
|
||||
const pic = getImage(image);
|
||||
return (
|
||||
<div
|
||||
key={image.id}
|
||||
className="relative group inline-block"
|
||||
style={{ height: pic?.height, width: pic?.width }}
|
||||
>
|
||||
<div
|
||||
className="
|
||||
absolute
|
||||
w-full
|
||||
h-full
|
||||
bg-indigo-400
|
||||
bg-opacity-0
|
||||
group-hover:bg-opacity-80
|
||||
transition-all
|
||||
duration-700
|
||||
z-10
|
||||
top-0
|
||||
left-0
|
||||
p-4
|
||||
overflow-clip
|
||||
"
|
||||
>
|
||||
<span className="text-transparent group-hover:text-white transition-color duration-700 tracking-wide text-md capitalize">
|
||||
<span className="mr-1">Filename: </span>
|
||||
<span className="break-all">{image.name.replace(/_/g, ' ')}</span>
|
||||
</span>
|
||||
</div>
|
||||
<GatsbyImage image={pic} alt={image.name} title={image.name} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AnimeImage;
|
||||
@ -0,0 +1,58 @@
|
||||
import React, { createContext, useMemo, useState } from 'react';
|
||||
import AnimeImageGrid from '../components/AimeImageGrid';
|
||||
import { useAnimeImages } from '../hooks/useAnimeImages';
|
||||
import { useDirectories } from '../hooks/useDirectories';
|
||||
import { ImageFiles } from '../types';
|
||||
|
||||
// styles
|
||||
const pageStyles = {
|
||||
color: '#232129',
|
||||
padding: 96,
|
||||
fontFamily: '-apple-system, Roboto, sans-serif, serif',
|
||||
};
|
||||
const headingStyles = {
|
||||
marginTop: 0,
|
||||
marginBottom: 64,
|
||||
maxWidth: 320,
|
||||
};
|
||||
const headingAccentStyles = {
|
||||
color: '#663399',
|
||||
};
|
||||
|
||||
const linkStyle = {
|
||||
color: '#8954A8',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 16,
|
||||
verticalAlign: '5%',
|
||||
};
|
||||
|
||||
export const ImagesContext = createContext<ImageFiles | undefined>(undefined);
|
||||
// markup
|
||||
const Layout: React.FC = ({ children }) => {
|
||||
const directories = useDirectories();
|
||||
const allImages = useAnimeImages();
|
||||
console.log(allImages);
|
||||
const images = useMemo(() => allImages, [allImages]);
|
||||
|
||||
return (
|
||||
<ImagesContext.Provider value={images}>
|
||||
<div className="flex">
|
||||
<nav className="flex flex-col w-2/12 h-screen overflow-y-scroll space-y-2 px-6">
|
||||
{directories.allDirectory.edges.map(({ node }: any) => (
|
||||
<span
|
||||
className="p-2 hover:bg-indigo-500 hover:text-white transition-colors duration-300 rounded-md cursor-pointer"
|
||||
onClick={() => {}}
|
||||
>
|
||||
{node.name}
|
||||
</span>
|
||||
))}
|
||||
</nav>
|
||||
<main style={pageStyles} className="w-10/12 h-screen overflow-y-scroll">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</ImagesContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default Layout;
|
||||
@ -0,0 +1,28 @@
|
||||
import { useStaticQuery, graphql } from 'gatsby';
|
||||
import { Directories, ImageFiles } from '../types';
|
||||
|
||||
const useAnimeImages = (): ImageFiles => {
|
||||
const data = useStaticQuery(graphql`
|
||||
query {
|
||||
allImages: allFile(sort: { order: ASC, fields: relativeDirectory }) {
|
||||
edges {
|
||||
node {
|
||||
name
|
||||
id
|
||||
relativePath
|
||||
childImageSharp {
|
||||
gatsbyImageData(
|
||||
width: 400
|
||||
placeholder: TRACED_SVG
|
||||
formats: [AUTO, WEBP, AVIF]
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export { useAnimeImages };
|
||||
@ -0,0 +1,18 @@
|
||||
import { useStaticQuery, graphql } from 'gatsby';
|
||||
import { Directories, ImageFiles } from '../types';
|
||||
|
||||
export const useDirectories = (): Directories => {
|
||||
const data: Directories = useStaticQuery(graphql`
|
||||
query {
|
||||
allDirectory(filter: { sourceInstanceName: { eq: "images" } }) {
|
||||
edges {
|
||||
node {
|
||||
name
|
||||
relativePath
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
return data;
|
||||
};
|
||||
|
After Width: | Height: | Size: 11 KiB |
@ -0,0 +1,37 @@
|
||||
import React from 'react';
|
||||
import AnimeImageGrid from '../components/AimeImageGrid';
|
||||
import Layout from '../components/Layout';
|
||||
|
||||
// styles
|
||||
const pageStyles = {
|
||||
color: '#232129',
|
||||
padding: 96,
|
||||
fontFamily: '-apple-system, Roboto, sans-serif, serif',
|
||||
};
|
||||
const headingStyles = {
|
||||
marginTop: 0,
|
||||
marginBottom: 64,
|
||||
maxWidth: 320,
|
||||
};
|
||||
const headingAccentStyles = {
|
||||
color: '#663399',
|
||||
};
|
||||
|
||||
const linkStyle = {
|
||||
color: '#8954A8',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 16,
|
||||
verticalAlign: '5%',
|
||||
};
|
||||
|
||||
// markup
|
||||
const IndexPage: React.FC = () => {
|
||||
return (
|
||||
<Layout>
|
||||
<title>Home Page</title>
|
||||
<AnimeImageGrid />
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default IndexPage;
|
||||
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@ -0,0 +1,21 @@
|
||||
export interface Directory {
|
||||
name: string;
|
||||
relativePath: string;
|
||||
}
|
||||
|
||||
export interface Directories {
|
||||
allDirectory: {
|
||||
edges: Directory[];
|
||||
};
|
||||
}
|
||||
|
||||
export interface ImageFile {
|
||||
name: string;
|
||||
relativeDirectory: string;
|
||||
}
|
||||
|
||||
export interface ImageFiles {
|
||||
allFile: {
|
||||
edges: ImageFile[];
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{js,jsx,ts,tsx}",],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
@ -0,0 +1,102 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
/* Visit https://aka.ms/tsconfig.json to read more about this file */
|
||||
|
||||
/* Projects */
|
||||
// "incremental": true, /* Enable incremental compilation */
|
||||
// "composite": true, /* Enable constraints that allow a TypeScript project to be used with project references. */
|
||||
// "tsBuildInfoFile": "./", /* Specify the folder for .tsbuildinfo incremental compilation files. */
|
||||
// "disableSourceOfProjectReferenceRedirect": true, /* Disable preferring source files instead of declaration files when referencing composite projects */
|
||||
// "disableSolutionSearching": true, /* Opt a project out of multi-project reference checking when editing. */
|
||||
// "disableReferencedProjectLoad": true, /* Reduce the number of projects loaded automatically by TypeScript. */
|
||||
|
||||
/* Language and Environment */
|
||||
"target": "esnext", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
|
||||
"lib": ["dom", "esnext"], /* Specify a set of bundled library declaration files that describe the target runtime environment. */
|
||||
"jsx": "react", /* Specify what JSX code is generated. */
|
||||
// "experimentalDecorators": true, /* Enable experimental support for TC39 stage 2 draft decorators. */
|
||||
// "emitDecoratorMetadata": true, /* Emit design-type metadata for decorated declarations in source files. */
|
||||
// "jsxFactory": "", /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */
|
||||
// "jsxFragmentFactory": "", /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
|
||||
// "jsxImportSource": "", /* Specify module specifier used to import the JSX factory functions when using `jsx: react-jsx*`.` */
|
||||
// "reactNamespace": "", /* Specify the object invoked for `createElement`. This only applies when targeting `react` JSX emit. */
|
||||
// "noLib": true, /* Disable including any library files, including the default lib.d.ts. */
|
||||
// "useDefineForClassFields": true, /* Emit ECMAScript-standard-compliant class fields. */
|
||||
|
||||
/* Modules */
|
||||
"module": "esnext", /* Specify what module code is generated. */
|
||||
// "rootDir": "./", /* Specify the root folder within your source files. */
|
||||
"moduleResolution": "node", /* Specify how TypeScript looks up a file from a given module specifier. */
|
||||
// "baseUrl": "./", /* Specify the base directory to resolve non-relative module names. */
|
||||
// "paths": {}, /* Specify a set of entries that re-map imports to additional lookup locations. */
|
||||
// "rootDirs": [], /* Allow multiple folders to be treated as one when resolving modules. */
|
||||
// "typeRoots": [], /* Specify multiple folders that act like `./node_modules/@types`. */
|
||||
// "types": [], /* Specify type package names to be included without being referenced in a source file. */
|
||||
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
|
||||
// "resolveJsonModule": true, /* Enable importing .json files */
|
||||
// "noResolve": true, /* Disallow `import`s, `require`s or `<reference>`s from expanding the number of files TypeScript should add to a project. */
|
||||
|
||||
/* JavaScript Support */
|
||||
// "allowJs": true, /* Allow JavaScript files to be a part of your program. Use the `checkJS` option to get errors from these files. */
|
||||
// "checkJs": true, /* Enable error reporting in type-checked JavaScript files. */
|
||||
// "maxNodeModuleJsDepth": 1, /* Specify the maximum folder depth used for checking JavaScript files from `node_modules`. Only applicable with `allowJs`. */
|
||||
|
||||
/* Emit */
|
||||
// "declaration": true, /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
|
||||
// "declarationMap": true, /* Create sourcemaps for d.ts files. */
|
||||
// "emitDeclarationOnly": true, /* Only output d.ts files and not JavaScript files. */
|
||||
// "sourceMap": true, /* Create source map files for emitted JavaScript files. */
|
||||
// "outFile": "./", /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
|
||||
// "outDir": "./", /* Specify an output folder for all emitted files. */
|
||||
// "removeComments": true, /* Disable emitting comments. */
|
||||
// "noEmit": true, /* Disable emitting files from a compilation. */
|
||||
// "importHelpers": true, /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
|
||||
// "importsNotUsedAsValues": "remove", /* Specify emit/checking behavior for imports that are only used for types */
|
||||
// "downlevelIteration": true, /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
|
||||
// "sourceRoot": "", /* Specify the root path for debuggers to find the reference source code. */
|
||||
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
|
||||
// "inlineSourceMap": true, /* Include sourcemap files inside the emitted JavaScript. */
|
||||
// "inlineSources": true, /* Include source code in the sourcemaps inside the emitted JavaScript. */
|
||||
// "emitBOM": true, /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
|
||||
// "newLine": "crlf", /* Set the newline character for emitting files. */
|
||||
// "stripInternal": true, /* Disable emitting declarations that have `@internal` in their JSDoc comments. */
|
||||
// "noEmitHelpers": true, /* Disable generating custom helper functions like `__extends` in compiled output. */
|
||||
// "noEmitOnError": true, /* Disable emitting files if any type checking errors are reported. */
|
||||
// "preserveConstEnums": true, /* Disable erasing `const enum` declarations in generated code. */
|
||||
// "declarationDir": "./", /* Specify the output directory for generated declaration files. */
|
||||
// "preserveValueImports": true, /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
|
||||
|
||||
/* Interop Constraints */
|
||||
// "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
|
||||
// "allowSyntheticDefaultImports": true, /* Allow 'import x from y' when a module doesn't have a default export. */
|
||||
"esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */
|
||||
// "preserveSymlinks": true, /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
|
||||
"forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
|
||||
|
||||
/* Type Checking */
|
||||
"strict": true, /* Enable all strict type-checking options. */
|
||||
// "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied `any` type.. */
|
||||
// "strictNullChecks": true, /* When type checking, take into account `null` and `undefined`. */
|
||||
// "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
|
||||
// "strictBindCallApply": true, /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
|
||||
// "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
|
||||
// "noImplicitThis": true, /* Enable error reporting when `this` is given the type `any`. */
|
||||
// "useUnknownInCatchVariables": true, /* Type catch clause variables as 'unknown' instead of 'any'. */
|
||||
// "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
|
||||
// "noUnusedLocals": true, /* Enable error reporting when a local variables aren't read. */
|
||||
// "noUnusedParameters": true, /* Raise an error when a function parameter isn't read */
|
||||
// "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
|
||||
// "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
|
||||
// "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
|
||||
// "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
|
||||
// "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
|
||||
// "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type */
|
||||
// "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
|
||||
// "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
|
||||
|
||||
/* Completeness */
|
||||
// "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */
|
||||
"skipLibCheck": true /* Skip type checking all .d.ts files. */
|
||||
},
|
||||
"include": ["./src/**/*"]
|
||||
}
|
||||
Loading…
Reference in new issue